52 lines
4.5 KiB
Markdown
52 lines
4.5 KiB
Markdown
# 小程序分包与交互整理 · 2026-10-14
|
||
|
||
目标：交互选项采用「标签 / 当前值 / 展开入口」的分组设置行，点击后通过编辑对话或选择弹层修改。不是 HTML/uni form 表单提交。沿用米白与森林绿，减少首页操作密度，主包只保留四个 tab 入口和浏览所需内容。
|
||
|
||
## 路由
|
||
|
||
主包 pages/gallery/index、pages/make/index、pages/store/index、pages/mine/index。
|
||
|
||
- packages/creation/config：mode=image|text|blank，设置生成参数；packages/creation/editor：调整画布，恢复与保存草稿。
|
||
- packages/patterns/detail：id，跟做图纸；packages/patterns/materials：id，用料清单；packages/patterns/print：id，打印参数与申请。
|
||
- packages/store/visit：桌位确认；packages/store/request：kind?/patternId?，服务申请；packages/store/records：记录与取消。
|
||
- packages/account/library：type=works|favorites，个人图纸。
|
||
|
||
每个分包页显示返回上页与返回所属主 tab 的入口。主 tab 用 switchTab，普通分包页用 navigateTo；无历史页栈时返回所属主 tab。不使用独立分包；共享基础 UI、Pinia 与 API 放主包可引用目录。旧 /pages/detail/index 不再注册，所有调用更新。
|
||
|
||
## 共用接口
|
||
|
||
- components/ui/SettingRow.vue：props label,value?,description?,disabled?,danger?；事件 activate。
|
||
- components/ui/EditDialog.vue：props open,title,value?,placeholder?,type?（text/number/digit/textarea）,maxlength?；事件 close、confirm(value:string)。临时修改在确认后才提交。
|
||
- components/ui/ChoiceSheet.vue：props open,title,options:Array<{value:string,label:string,description?:string,color?:string}>,selected?:string[],multiple?:boolean；事件 close、confirm(values:string[])。
|
||
- components/ui/PageReturn.vue：props tab（gallery/make/store/mine）；上页/主 tab 两个入口。
|
||
- core/navigation.ts：route(path,query?) 生成经过编码的分包 URL；goPage(path,query?)；goMain(tab)；backOrMain(tab)。主包不得静态导入分包代码。
|
||
- 通用样式 .page .page-heading .eyebrow .title .muted .settings-group .section-title .panel .row .spread .mt .primary .empty .error .hint .action-footer。
|
||
|
||
## 实施与验证
|
||
|
||
- [x] 共享设置行、对话框、选择面板与导航辅助；路由编码/回退测试。
|
||
- [x] 制作入口 + 生成参数页 + 编辑页，保留图片/文字/手绘、草稿与保存。
|
||
- [x] 门店入口 + 到店/申请/记录，保留幂等请求与状态反馈。
|
||
- [x] 图纸/我的主包页，以及详情/用料/打印/个人列表分包。
|
||
- [x] 核心逻辑测试、类型检查、H5 与 mp-weixin 构建；浏览器验证入口→分包→对话→返回主 tab，检查分包产物。
|
||
|
||
不改变后端接口与数据库。微信真机分包加载、原生对话与设备字体仍需最终真机验收。没有 Git 仓库，不创建虚构提交或分支。
|
||
|
||
## 验收结果
|
||
|
||
2026-10-14：`npm run typecheck`、`npm test`（23 项）、`npm run build:h5`、`npm run build:mp-weixin` 通过。微信构建产物 `app.json` 保留 4 个主包页面，并注册 4 个分包、9 个分包页面；每个注册页均生成 WXML。源代码没有 `<form>` 或旧 `/pages/detail/index` 路由。
|
||
|
||
浏览器检查覆盖 390px 手机与 320px 窄屏：
|
||
- 制作入口 → 参数页 → 编辑画布；取消修改保留 29 格，确认后变为 32 格；空白画布显示完整网格。
|
||
- 设置行支持 Enter，编辑对话支持 Escape 关闭并恢复焦点；320px 对话无横向溢出。
|
||
- 直接刷新编辑分包后，返回按钮在无历史栈时切回制作主 tab。
|
||
- 图纸 → 用料 → 返回详情；打印方式选择后只显示相关参数；到店打印将 `kind=print` 和图纸 ID 带入服务申请。
|
||
- 服务备注确认后，到店页往返保留服务类型、图纸与备注；分包的门店首页入口回到主 tab。
|
||
- 我的收藏迁入独立列表页，未登录状态和返回我的入口正常。
|
||
|
||
状态回归修复：离店/换桌位清除旧申请成功结果；换账号清除旧草稿、记录及幂等上下文，旧账号在途读写响应不再回写。首次未登录填写的申请在确认到店流程中保留。
|
||
|
||
本轮浏览器没有提交员工呼叫或创建服务器图纸；申请及创作工作流使用隔离测试验证。真实微信小程序的软键盘、相机、读屏与分包下载仍需开发者工具/真机验收。本轮没有完整 Lighthouse 或 Core Web Vitals 测量，不宣称达到评分或 WCAG 认证。
|
||
|
||
截图：[门店首页](screenshots/ui-store-2026-10-14.jpg)、[320px 编辑对话](screenshots/ui-dialog-320-2026-10-14.jpg)。
|