门店 Web 后台 · 技术选型草案(Q5)
状态:推荐方案(编码前口头确认即可;不阻塞 PRD)
日期:2026-07-10
上游:docs/门店管理后台-PhaseA-页面清单PRD.md、docs/门店管理后台升级方案-对标宠老板.md
约束:rule:BR-ADMIN-004;与小程序共用 /api/** 与 service 规则
1. 结论(推荐)
| 项 |
选择 |
| 形态 |
独立 SPA:仓库内新建 admin/(与 frontend/ 小程序并列) |
| 框架 |
Vue 3 + Vite + TypeScript |
| UI |
Element Plus(中后台表格/筛选/抽屉成熟) |
| 路由/状态 |
Vue Router + Pinia |
| 鉴权 |
复用现网 sessionToken;请求头与小程序一致 |
| API |
axios/fetch 封装;禁止另造业务状态机 |
| 部署 |
静态资源独立域名或 /admin/ path;Nginx 反代 /api → 现网后端 |
不推荐:在 uni-app 里硬撑 PC 后台;用 React 另起技术栈(团队已是 Vue 3);把 admin 塞进 frontend/ 与小程序同构建。
2. 方案对比
| 方案 |
优点 |
缺点 |
结论 |
A. monorepo admin/ + Vue3 + Element Plus |
与现网 Vue 技能复用;桌面组件全;与小程序构建隔离 |
多一个前端工程 |
推荐 |
| B. uni-app H5 加宽屏布局 |
少一个仓 |
表格/筛选体验差;与门店端页面耦合 |
否 |
| C. React + Ant Design Pro |
中后台模板多 |
与现网 Vue 分裂;学习/规范成本 |
否(除非专招 React) |
| D. 纯后端模板(Thymeleaf 等) |
无前端仓 |
交互与迭代慢;难复用 H5 预览 |
否 |
3. 目录与边界(建议)
petstore/
├── frontend/ # uni-app 小程序 + H5(既有)
├── admin/ # Web 门店后台(新建)
│ ├── src/views/ # workbench / appointments / …
│ ├── src/api/ # 仅调 /api/**
│ └── …
└── backend/ # 共用;新增 /api/admin/service-customers 等
| Owner |
写入 |
| Store Admin FE(新建角色) |
admin/** |
| Backend Core |
GET /api/admin/service-customers 及工作台聚合(若做) |
| Report Media Backend |
报告列表/成片重试相关若需扩展时 |
| Store Miniapp FE |
不写 admin;小程序履约页保持原边界 |
4. 与现网契约
- 登录:
GET /api/user/info 校验 boss|staff;customer → 403 文案。
- 预约开始服务:Web 调
POST /api/appointment/start(与小程序同规则)。
- 客户列表:新
GET /api/admin/service-customers(见 PRD §7.6)。
- 公开报告预览:新开现有 H5/
report-view,不在 admin 内嵌改报告。
- 本体:实现时把 planned entrypoint 升
anchored,跑 validate_ontology + audit_drift。
5. 非功能
| 项 |
Phase A 口径 |
| 浏览器 |
近两年版 Chrome / Edge;不做 IE |
| 响应式 |
桌面优先;平板可用;不做手机后台 |
| 国际化 |
仅中文 |
| 主题 |
简洁中后台即可;不对标宠老板视觉像素级 |
6. 开放确认
修订记录