前端架构
用户小程序（Taro 4 + React）+ 运营后台（Vue 3）+ 配送端（Taro/H5 优先）
多端矩阵
| 端 | 框架 | 编译目标 | 鉴权 | 域名 |
|---|---|---|---|---|
| 用户小程序 | Taro 4 + React 18 | 微信小程序 | 微信 code -> JWT | m.dingwei.com |
| 运营后台 | gin-vue-admin (Vue 3 + Go) | SPA | 账号密码 → JWT + RBAC | admin.dingwei.com |
| 配送端 | Taro / H5 优先 | H5 / 后续 App | 账号密码 -> JWT | driver.dingwei.com |
三端统一经过同一 api-server 的 auth 模块鉴权，JWT 格式和验证逻辑一致。
一、用户端 · 微信小程序
页面结构
技术选型
| 类别 | 选型 | 说明 |
|---|---|---|
| 框架 | Taro 4.x + React 18 | 编译到微信小程序 |
| 语言 | TypeScript strict | — |
| 状态管理 | Zustand | 轻量 |
| 网络 | Taro.request + 拦截器 | Token 自动刷新、401 重试 |
| UI 组件 | NutUI | 适配小程序 |
| 埋点 | 自建 → PG（MVP 阶段） | 后期可接 ClickHouse |
Token 刷新
拦截器:
access_token 过期 (401)
→ 自动调 POST /api/auth/refresh
→ 成功: 替换 token，重试原请求
→ 失败: 跳转登录页性能目标
| 指标 | 目标 |
|---|---|
| 首屏加载 | ≤ 2s |
| 包体积 | ≤ 2MB |
| 接口响应 | ≤ 500ms |
二、运营后台 · gin-vue-admin
页面模块
| 模块 | 功能 |
|---|---|
| 商品管理 | 商品 CRUD、分类、上下架、溯源信息录入 |
| 订单管理 | 订单列表、状态跟踪、手动取消/退款 |
| 优惠券管理 | 创建/发放优惠券模板、查看使用统计 |
| 配送管理 | 查看所有配送任务、配送进度监控 |
| 用户管理 | 用户列表、会员管理 |
| 售后管理 | 退款/退货/投诉审核 |
| 数据看板 | 每日 GMV、订单趋势（PG 查询） |
| 系统管理 | RBAC 角色权限、菜单配置（gin-vue-admin 内置） |
三、配送端 · Taro / H5 优先
轻量任务看板。不做派单。骑手按时段查看订单、在高德地图查看坐标、自行认领。
页面结构
配送时段分组
┌─────────────────────────┐
│ 08:00-10:00 [5单] │
│ 10:00-12:00 [3单] │
│ 14:00-16:00 [2单] │
│ 16:00-18:00 [0单] │
└─────────────────────────┘
进入时段 → 订单列表:
┌──────────────────────────┐
│ 🔴 待配送 │
│ 琶洲新村3栋 · 张** │
│ [认领] │
├──────────────────────────┤
│ 🟡 已认领 │
│ 保利天悦5栋 · 李** │
│ [取货] [释放] │
├──────────────────────────┤
│ 🟢 已取货 │
│ 万胜广场B座 · 王** │
│ [送达] │
└──────────────────────────┘数据刷新（轮询，不用 WebSocket）
配送端定时轮询:
- 任务列表: 每 15 秒 GET /api/delivery/tasks
- 坐标点: 每 30 秒 GET /api/delivery/tasks/locations
美团/饿了么骑手端也是短轮询为主。初期不需要 WebSocket。降级策略：轮询失败时展示缓存数据 + "刷新中" 状态。
高德地图集成
| 功能 | 实现 |
|---|---|
| 订单标记点 | 高德 Marker（红=待认领/黄=已认领/绿=已取货） |
| 骑手定位 | 高德定位 SDK |
| 点击标记 | InfoWindow 弹出脱敏地址卡片 |
| 路线规划 | 调用高德路径规划（骑手自行触发） |
| 聚合显示 | 10+ 订单同区域自动聚合 |
信息脱敏
| 原始信息 | 配送端展示 |
|---|---|
| 张三 | 张** |
| 13812341234 | 138****1234 |
| 广东省广州市海珠区琶洲新村3栋1201室 | 海珠区 · 琶洲新村 · 3栋 |
| GPS 坐标 | 完整展示 |
脱敏字段在创建配送任务时由 delivery 模块预计算存储，不额外调用 user 模块。
技术选型
| 类别 | 选型 |
|---|---|
| 框架 | Taro 4 / H5 优先，后续可扩展 React Native |
| 地图 | 高德地图 React Native SDK |
| 状态管理 | Zustand + 轮询刷新 |
| 鉴权 | JWT（同用户端） |