# 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` | 联系方式、资源 | ## 快速开始 ```bash # 安装依赖 npm install # H5 开发 npm run dev:h5 # 微信小程序 npm run dev:mp-weixin # 构建 H5 npm run build:h5 ``` ## App 打包(避免「__uniappview.html 无法打开」) 1. **先构建再打包**(必须): ```bash npm run build:app ``` 会生成 `dist/build/app-plus/` 并同步到 `unpackage/dist/build/app-plus/`。 2. **用 HBuilderX 云打包**: - 用 HBuilderX 打开**本项目根目录**(含 `package.json`、`src` 的目录)。 - 菜单:**发行** → **原生 App-云打包**,选 Android/iOS,按提示打包。 - 不要用「制作自定义调试基座」再单独打正式包,否则安装包内可能缺少 www 内容。 3. 若仍提示「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)