beads-group/docs/applet-ui-refactor.md

小程序分包与交互整理 · 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。

实施与验证

• 共享设置行、对话框、选择面板与导航辅助；路由编码/回退测试。
• 制作入口 + 生成参数页 + 编辑页，保留图片/文字/手绘、草稿与保存。
• 门店入口 + 到店/申请/记录，保留幂等请求与状态反馈。
• 图纸/我的主包页，以及详情/用料/打印/个人列表分包。
• 核心逻辑测试、类型检查、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 认证。

截图：门店首页、320px 编辑对话。