|
|
@@ -1,41 +1,71 @@
|
|
|
# LINE Order App
|
|
|
|
|
|
-LINE订餐系统 - 基于Vue 3 + LIFF的移动端Web应用
|
|
|
+LINE 订餐系统 - 基于 Vue 3 + TypeScript + LIFF 的移动端 Web 应用
|
|
|
|
|
|
## 技术栈
|
|
|
|
|
|
-- **框架**: Vue 3 (Composition API)
|
|
|
+- **框架**: Vue 3 (Composition API) + TypeScript
|
|
|
- **构建工具**: Vite 5
|
|
|
- **状态管理**: Pinia 2
|
|
|
- **路由**: Vue Router 4
|
|
|
-- **UI组件**: Vant 4
|
|
|
-- **HTTP请求**: Axios
|
|
|
+- **UI 组件**: Vant 4
|
|
|
+- **HTTP 请求**: Axios
|
|
|
- **WebSocket**: Socket.IO Client
|
|
|
-- **国际化**: vue-i18n 9
|
|
|
+- **国际化**: 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接口
|
|
|
+│ ├── api/ # API接口定义
|
|
|
│ ├── assets/ # 资源文件
|
|
|
-│ ├── components/ # 组件
|
|
|
-│ ├── composables/ # 组合式函数
|
|
|
-│ ├── config/ # 配置
|
|
|
-│ ├── locale/ # 国际化
|
|
|
-│ ├── router/ # 路由
|
|
|
-│ ├── store/ # 状态管理
|
|
|
-│ ├── utils/ # 工具函数
|
|
|
-│ ├── views/ # 页面
|
|
|
+│ ├── components/ # 公共组件
|
|
|
+│ ├── composables/ # 组合式函数 (Hooks)
|
|
|
+│ ├── config/ # 全局配置
|
|
|
+│ ├── locale/ # 国际化语言包
|
|
|
+│ ├── router/ # 路由配置
|
|
|
+│ ├── store/ # Pinia状态管理
|
|
|
+│ ├── utils/ # 工具函数 (Geo, Formatters)
|
|
|
+│ ├── views/ # 页面视图
|
|
|
+│ │ ├── index/ # 首页/平台
|
|
|
+│ │ ├── menu/ # 菜单/C端
|
|
|
+│ │ ├── order/ # 订单列表
|
|
|
+│ │ ├── mine/ # 个人中心
|
|
|
+│ │ ├── pos/ # POS系统
|
|
|
+│ │ ├── owner/ # 店长后台
|
|
|
+│ │ └── admin/ # 总后台
|
|
|
│ ├── App.vue # 根组件
|
|
|
-│ └── main.js # 入口文件
|
|
|
+│ └── main.ts # 入口文件 (TypeScript)
|
|
|
├── .env.development # 开发环境变量
|
|
|
├── .env.production # 生产环境变量
|
|
|
-├── vite.config.js # Vite配置
|
|
|
+├── vite.config.ts # Vite配置
|
|
|
├── package.json
|
|
|
└── README.md
|
|
|
```
|
|
|
@@ -65,34 +95,41 @@ npm run dev
|
|
|
npm run build
|
|
|
```
|
|
|
|
|
|
-### 预览构建结果
|
|
|
+### 类型检查
|
|
|
|
|
|
```bash
|
|
|
-npm run preview
|
|
|
+npm run type-check
|
|
|
```
|
|
|
|
|
|
## 环境配置
|
|
|
|
|
|
### 开发环境 (.env.development)
|
|
|
|
|
|
-- `VITE_API_URL`: API地址
|
|
|
-- `VITE_WS_URL`: WebSocket地址
|
|
|
+- `VITE_API_URL`: API 地址
|
|
|
+- `VITE_WS_URL`: WebSocket 地址
|
|
|
- `VITE_LIFF_ID`: LINE LIFF ID
|
|
|
-- `VITE_TENANT_ID`: 租户ID
|
|
|
+- `VITE_TENANT_ID`: 租户 ID
|
|
|
|
|
|
### 生产环境 (.env.production)
|
|
|
|
|
|
同上
|
|
|
|
|
|
-## LIFF配置
|
|
|
+## LIFF 配置
|
|
|
|
|
|
-1. 在 [LINE Developers Console](https://developers.line.biz/console/) 创建LIFF应用
|
|
|
-2. 获取LIFF ID
|
|
|
+1. 在 [LINE Developers Console](https://developers.line.biz/console/) 创建 LIFF 应用
|
|
|
+2. 获取 LIFF ID
|
|
|
3. 配置到环境变量 `VITE_LIFF_ID`
|
|
|
|
|
|
-## 重构进度
|
|
|
+## 国际化 (i18n)
|
|
|
+
|
|
|
+项目全量支持国际化，语言包位于 `src/locale/`：
|
|
|
+
|
|
|
+- `ja.json`: 日语 (默认)
|
|
|
+- `en.json`: 英语
|
|
|
+- `zh-Hans.json`: 简体中文
|
|
|
+- `zh-Hant.json`: 繁体中文
|
|
|
|
|
|
-详见 [REFACTOR_PLAN.md](./REFACTOR_PLAN.md)
|
|
|
+可以通过 `LanguageSwitcher` 组件或 `appStore` 动态切换语言。
|
|
|
|
|
|
## License
|
|
|
|
FanLide