# 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

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产

```bash
npm run build
```

### 类型检查

```bash
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](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`: 繁体中文

可以通过 `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