online-order-h5

LINE Order App

LINE 订餐系统 - 基于 Vue 3 + TypeScript + LIFF 的移动端 Web 应用

技术栈

• 框架: Vue 3 (Composition API) + TypeScript
• 构建工具: Vite 5
• 状态管理: Pinia 2
• 路由: Vue Router 4
• UI 组件: Vant 4
• HTTP 请求: Axios
• WebSocket: Socket.IO Client
• 国际化: vue-i18n 9 (支持 ja, en, zh-Hans, zh-Hant)
• LINE SDK: @line/liff
• 工具库: dayjs, @vueuse/core

应用架构 (Application Modes)

本项目包含四种核心业务模式，通过状态管理动态切换：

1. 顾客模式 (Customer Mode) -C 端点餐界面，运行在 LINE 内或移动端浏览器。

   • 功能：浏览菜单、购物车、下单、查看订单状态、个人中心。

2. POS 模式 (POS Mode)

   • 店员操作界面，运行在平板设备。
   • 功能：桌台管理、开台/清台、接单、出餐管理。

3. 店长模式 (Owner Mode)

   • 移动端管理后台。
   • 功能：销售报表、店铺设置、菜品管理。

4. 平台模式 (Platform Mode)

   • 首页聚合模式。
   • 功能：店铺列表、搜索、LBS 定位。

项目结构

line-order-app/
├── public/              # 静态资源
├── src/
│   ├── api/            # API接口定义
│   ├── assets/         # 资源文件
│   ├── components/     # 公共组件
│   ├── composables/    # 组合式函数 (Hooks)
│   ├── config/         # 全局配置
│   ├── locale/         # 国际化语言包
│   ├── router/         # 路由配置
│   ├── store/          # Pinia状态管理
│   ├── utils/          # 工具函数 (Geo, Formatters)
│   ├── views/          # 页面视图
│   │   ├── index/      # 首页/平台
│   │   ├── menu/       # 菜单/C端
│   │   ├── order/      # 订单列表
│   │   ├── mine/       # 个人中心
│   │   ├── pos/        # POS系统
│   │   ├── owner/      # 店长后台
│   │   └── admin/      # 总后台
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件 (TypeScript)
├── .env.development    # 开发环境变量
├── .env.production     # 生产环境变量
├── vite.config.ts      # Vite配置
├── package.json
└── README.md

开发指南

环境要求

• Node.js >= 18.0.0
• npm >= 9.0.0

安装依赖

npm install

开发模式

npm run dev

构建生产

npm run build

类型检查

npm run type-check

环境配置

开发环境 (.env.development)

• VITE_API_URL: API 地址
• VITE_WS_URL: WebSocket 地址
• VITE_LIFF_ID: LINE LIFF ID
• VITE_TENANT_ID: 租户 ID

生产环境 (.env.production)

同上

LIFF 配置

1. 在 LINE Developers Console 创建 LIFF 应用
2. 获取 LIFF ID
3. 配置到环境变量 VITE_LIFF_ID

国际化 (i18n)

项目全量支持国际化，语言包位于 src/locale/：

• ja.json: 日语 (默认)
• en.json: 英语
• zh-Hans.json: 简体中文
• zh-Hant.json: 繁体中文

可以通过 LanguageSwitcher 组件或 appStore 动态切换语言。

针对开发者的测试建议 (Testing & Demo)

由于本项目支持多模式切换，你可以通过以下 URL 直接进入对应的业务模块进行测试：

1. 平台/聚合模式 (Platform Mode)

展示店铺列表和 LBS 定位。

• URL: /#/index

2. 顾客点餐模式 (Customer Mode)

模拟用户进入特定店铺点餐。

• 外带模式: /#/menu?shopId=shop_1
• 堂食/桌位模式: /#/menu?shopId=shop_1&tableCode=A01
• 扫码入口测试: /#/scan?shopId=shop_1&tableCode=A01

3. POS 员工模式 (POS Mode)

模拟店员在平板端进行桌台和订单管理。

• 入口: /#/pos/welcome
• 桌位管理: /#/pos/tables

4. 店长管理模式 (Owner Mode)

模拟老板查看报表和管理店铺。

• 总览: /#/owner/dashboard
• 报表: /#/owner/reports

提示: 部分管理端页面 (/pos, /owner, /admin) 设有路由守卫，测试前需先在 /#/login 完成对应权限角色的登录。

License

MIT