Geen omschrijving

FanLide 0be5c7a860 feat: 更新说明文档		2 weken geleden
doc	5833a3184b feat: 完善了国际化功能和页面	2 weken geleden
src	5833a3184b feat: 完善了国际化功能和页面	2 weken geleden
.env.development	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
.env.local.backup	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
.env.local.example	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
.env.production	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
.gitignore	5833a3184b feat: 完善了国际化功能和页面	2 weken geleden
README.md	0be5c7a860 feat: 更新说明文档	2 weken geleden
components.d.ts	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
env.d.ts	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
index.html	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
jsconfig.json	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
package-lock.json	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
package.json	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
tsconfig.app.json	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
tsconfig.json	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
tsconfig.node.json	5b0c9db2e2 chore: initial commit as independent project	2 weken geleden
vite.config.ts	d4f792fa2b feat: align API endpoints with Swagger and enhance TypeScript definitions	2 weken geleden

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)

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

顾客模式 (Customer Mode) -C 端点餐界面，运行在 LINE 内或移动端浏览器。
- 功能：浏览菜单、购物车、下单、查看订单状态、个人中心。
POS 模式 (POS Mode)
- 店员操作界面，运行在平板设备。
- 功能：桌台管理、开台/清台、接单、出餐管理。
店长模式 (Owner Mode)
- 移动端管理后台。
- 功能：销售报表、店铺设置、菜品管理。
平台模式 (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 配置

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

国际化 (i18n)

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

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

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

License

MIT