README.md
Food Label System - uni-app 版
基于 uni-app 的跨平台食品标签管理员工端应用,1:1 还原 React 版本 (Food Labeling Management App React) 的页面与交互。
支持平台
- App (iOS / Android)(当前仅维护 App)
- 其他端(H5、小程序)未再维护
技术栈
- 框架: uni-app + Vue 3 + TypeScript
- 构建: Vite
- 国际化: vue-i18n(中英双语)
- 样式: rpx 响应式 + 内联样式
功能页面
| 页面 | 路径 | 说明 |
|---|---|---|
| 登录 | /pages/login/login |
邮箱密码登录、记住我 |
| 选择店铺 | /pages/store-select/store-select |
选择工作门店 |
| 仪表盘 | /pages/index/index |
今日统计、快捷操作 |
| 标签 | /pages/labels/labels |
创建/历史 Tab、6 种标签类型 |
| 选择食品 | /pages/labels/food-select |
按类别选择、搜索 |
| 标签预览 | /pages/labels/preview |
预览、打印 |
| 更多 | /pages/more/more |
入口菜单 |
| 个人资料 | /pages/more/profile |
编辑资料 |
| 打印机 | /pages/more/printers |
打印机列表 |
| 工作地点 | /pages/more/location |
门店详情、切换店铺 |
| 同步状态 | /pages/more/sync |
数据同步 |
| 语言设置 | /pages/more/language |
中/英切换 |
| 支持 | /pages/more/support |
联系方式、资源 |
快速开始
# 安装依赖
npm install
# H5 开发
npm run dev:h5
# 微信小程序
npm run dev:mp-weixin
# 构建 H5
npm run build:h5
App 打包(避免「__uniappview.html 无法打开」)
先构建再打包(必须):
npm run build:app会生成
dist/build/app-plus/并同步到unpackage/dist/build/app-plus/。用 HBuilderX 云打包:
- 用 HBuilderX 打开本项目根目录(含
package.json、src的目录)。 - 菜单:发行 → 原生 App-云打包,选 Android/iOS,按提示打包。
- 不要用「制作自定义调试基座」再单独打正式包,否则安装包内可能缺少 www 内容。
- 用 HBuilderX 打开本项目根目录(含
若仍提示「www/__uniappview.html 无法打开」:
- 确认已执行过
npm run build:app且无报错。 - 确认是用 发行 → 原生 App-云打包,而不是自定义基座打包。
- 用 HBuilderX 的「运行 → 运行到手机」先确认真机可正常打开,再云打包。
- 确认已执行过
打印机
- Bluetooth:在 Printer 页选 Bluetooth → Scan。Android 需开启定位权限才能扫到设备;无名称设备会显示为 "Unknown Device",可正常连接。
- Built-in(一体机):打印机与安卓一体、数据从本机下发时使用。依赖原生插件
nativeplugins/moe-tcp-client(已放入项目),通过 TCP 连接本机 9100 端口。打包时用 HBuilderX 云打包即可带上该插件。
设计规范(与 React 版一致)
- 主色: #1F3A8A (Enterprise Blue)
- 最大宽度: 480px (约 960rpx)
- 底部导航: Dashboard / Labels / More
- 触控高度: ≥ 48px (96rpx)