docs(design): 移动端落地收尾——CONTRACT 台账入表 + 实现计划 HTML 阅读版登记
- CONTRACT 块4：移动壳/我的/授权/盘点入验收表（同步·golden）；通知两屏登记二期、 建单两屏登记拍板不落地；「移动愿景原型」小节改记 2026-07-04 已落地； 授权面板代码先行行更新为公共 license_panel.dart - docs/plans/mobile-screens-implementation.html：实现计划阅读版（Stage0/四包/合流验收）， 登记 docs/index.html「实现计划」分类 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wangjia
+9
-3
@@ -112,6 +112,12 @@ AppTokens 目前**仅颜色**。原型还驱动：
|
||||
| 关于我们(桌/移) | `about.html` | `about_screen.dart` | 同步 | ✅ **Phase2 重建**：Hero/产品信息/更新日志 timeline(/public/release 同源)；fidelity 2.2–2.7%≤8%；授权信息卡 2026-07-04 迁至 设置→授权管理 | ✅ fidelity | ✅ fidelity |
|
||||
| 登录 | `login.html` | `login_screen.dart` | 同步 | ✅ **Phase2 重建（2026-07-03）**：两栏卡片(品牌渐变面板+表单)+右上主题切换器+记住我/忘记密码+lg 主按钮；fidelity 1.4–2.1%≤8%（已知差异见下） | ✅ fidelity | ✅ fidelity |
|
||||
| 注册新门店 | `register.html` | `register_screen.dart` | 快照 | ✅ **Phase2 重建（2026-07-03）**：品牌面板三步时间线+grid2 表单+协议勾选；**不入 fidelity 闸**（少 门店编号/兑换券 两字段致结构错位，用户拍板先不加，见下） | ✅ golden ×3 | ✅ golden ×3 |
|
||||
| 移动壳 | `mobile-shell.js`（m-top/m-tabbar） | `app_shell.dart` 窄屏 + `m_tab_bar.dart` | 同步 | ✅ **2026-07-04 移动壳落地**：底部 5 tab(库存/入库/出库/财务/我的)+顶栏(标题/主题/铃/头像)+二级屏返回箭头；golden `app_shell_mobile` ×3 | ✅ golden 自比 | ✅ golden 自比 |
|
||||
| 我的(移动) | `m-me.html` | `me_screen.dart`（`/me`） | 同步 | ✅ 用户头卡+经营管理/系统 hub+退出登录确认 sheet；golden `me` ×3 | ✅ golden 自比 | ✅ golden 自比 |
|
||||
| 授权管理(移动) | `m-license.html` | `license_screen.dart`（`/me/license`） | 同步 | ✅ 独立屏复用公共 `LicensePanel` 四卡（内容属代码先行区，见下小节） | ✅ golden(licPanel 随 settings) | ✅ 同左 |
|
||||
| 库存盘点(移动) | `m-inventory-check.html` | `inventory_check_screen.dart` 窄屏 | 同步 | ✅ 卡片流+详情 sheet+底部操作条（原型为桩，按桩粒度）；golden `m_inventory_check` ×3 | ✅ golden 自比 | ✅ golden 自比 |
|
||||
| 通知/通知详情(移动) | `m-notifications.html` `m-notification.html` | —（二期未落地） | 二期 | 后端无通知模块；铃铛保持「暂无通知」 | — | — |
|
||||
| 建单表单(移动) | `m-stock-in.html` `m-stock-out.html` | —（拍板不落地） | 不落地 | 2026-07-04 拍板：移动端无建单入口（列表无 +/FAB），录单仅桌面 | — | — |
|
||||
|
||||
### 代码先行屏/面板（无原型，golden 为唯一像素基准）
|
||||
|
||||
@@ -119,13 +125,13 @@ AppTokens 目前**仅颜色**。原型还驱动：
|
||||
|
||||
| 屏/面板 | Flutter | 像素基准 | 说明 |
|
||||
|---|---|---|---|
|
||||
| 设置→授权管理面板（授权信息/在线购买续费/兑换券/降级规则 四卡） | `settings_screen.dart` `_LicensePanel` | settings golden ×3（仅锁面板 0 门店信息；子导航文字变更会入镜） | 2026-07 授权/购买迭代产物；原型 `settings.html` 仍是旧「授权兑换券」面板，视为历史快照 |
|
||||
| 设置→授权管理面板（授权信息/在线购买续费/兑换券/降级规则 四卡） | `settings/license_panel.dart`（公共 `LicensePanel`，2026-07-04 自 settings_screen 抽取；桌面设置 tab 与移动 `/me/license` 独立屏共用） | settings golden ×3（仅锁面板 0 门店信息；子导航文字变更会入镜） | 2026-07 授权/购买迭代产物；原型 `settings.html` 仍是旧「授权兑换券」面板，视为历史快照 |
|
||||
| 购买卡（首月特惠/标准/高级 tab + 年付月付 + 支付轮询三态） | `purchase_card.dart` | 无独立 golden；改动后人工目检 + `flutter test` 回归 | 价格展示以 `license_plans.dart` 为源，实付以 pay 侧为准 |
|
||||
| 官网 定价区/checkout/license-result/profile/logout | `web/index.njk` `checkout.njk` 等 | 人工验收（web 无 golden 体系） | 原型 `pricing.html`/`checkout.html` 为当初设计参考，已漂移，视为历史快照 |
|
||||
|
||||
### 移动愿景原型（m-*，2026-07-04 起对齐轮）
|
||||
### 移动愿景原型（m-*，2026-07-04 对齐轮 → **同日 Flutter 落地**）
|
||||
|
||||
`m-*` 屏是**移动端目标设计**（底部 tab + 「我的」hub 导航），Flutter 窄屏当前为响应式复用桌面屏（Drawer 导航），tab 形态未实现——两者差异是**有意的愿景超前**，不算漂移。已按桌面/实现能力对齐的移动屏：`m-stock-in-list`/`m-stock-out-list`（详细搜索/退单/确认定价/KPI）、`m-devices`（登录会话+外设，**打印相关移动端裁剪**）、`m-settings`（5 面板 + 授权管理二级视图=授权信息/在线购买/兑换券/降级规则）、`m-about`（链接行/反馈表单/ICP 页脚，授权块已删随迁）。移动端**不提供建单入口**（无 + / FAB）。Flutter 移动改版实现时以这批原型为 design-first 基准。
|
||||
`m-*` 屏是移动端目标设计（底部 tab + 「我的」hub 导航）。**2026-07-04 Flutter 已整体落地**：窄屏 Drawer 汉堡导航退役，改为底部 5 tab（库存/入库/出库/财务/我的）+ 「我的」hub 聚合二级屏（往来/基础数据/盘点/用户/授权/设备/设置/关于），二级屏隐藏 tabbar + 顶栏返回；一切弹层（详情/筛选/详搜/退单/确认定价/表单）窄屏统一走底部 sheet（`showMSheet`）；列表 = 2×2 可点 KPI（`MKpiGrid`）+ 搜索行（`MSearchRow`）+ 图标徽章卡片流（`status_icon_map` 转录原型 BADGE_ICON 28 词）。移动屏验收 = 各自 `*_mobile`/`m_*` golden ×3 主题（390×844@2x），**不入 fidelity 像素闸**（跨渲染器移动字体度量漂移大）；桌面形态全程零改动。移动端**不提供建单入口**（无 + / FAB）、**无打印动作**。
|
||||
|
||||
> **共享组件杠杆**：`StatusBadge`（入/出库单据状态）一处升级两屏受益；`StatusPill`/`KpiCard` 现已被库存/往来/入出库/财务/设备/设置/关于复用——新屏直接套，无需重做徽章/卡片。
|
||||
|
||||
|
||||
+1
-1
@@ -73,7 +73,7 @@
|
||||
|
||||
<h2>实现计划</h2>
|
||||
<ul>
|
||||
<li class="hint">（暂无）</li>
|
||||
<li><a href="plans/mobile-screens-implementation.html">移动端全屏落地实现计划（m-* 原型 → Flutter，2026-07-04 已执行）</a><span class="tag html">HTML</span> <span class="hint">— 底部 tab + 我的 hub + sheet 交互范式；Stage0 基建 + 4 并行工作包 + 合流验收全记录</span></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>移动端全屏落地实现计划 — 酒库管理系统</title>
|
||||
<style>
|
||||
:root{
|
||||
--primary:#2563AC; --primary-dark:#154072; --accent:#8B2331;
|
||||
--ink:#232934; --muted:#6E7888; --border:#DCE2EB; --paper:#F5F7FA; --head:#F0F4FF;
|
||||
--ok:#1F8A4C; --warn:#B7791F;
|
||||
}
|
||||
*{box-sizing:border-box;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
|
||||
body{margin:0;background:var(--paper);color:var(--ink);padding:28px;line-height:1.7;max-width:1000px;margin:0 auto;}
|
||||
h1{font-size:22px;margin:0 0 4px;}
|
||||
.sub{color:var(--muted);font-size:13px;margin-bottom:22px;}
|
||||
h2{font-size:16px;margin:28px 0 10px;color:var(--primary-dark);border-bottom:2px solid var(--head);padding-bottom:6px;}
|
||||
h3{font-size:14px;margin:18px 0 6px;}
|
||||
.card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin:12px 0;}
|
||||
.lead{font-size:14px;}
|
||||
table{border-collapse:collapse;width:100%;font-size:13px;margin:10px 0;}
|
||||
th,td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top;}
|
||||
th{background:var(--head);color:var(--primary-dark);}
|
||||
code{background:#EEF2F8;padding:1px 5px;border-radius:4px;font-family:"JetBrains Mono",Menlo,monospace;font-size:12px;}
|
||||
ul{margin:6px 0;padding-left:20px;}
|
||||
li{margin:5px 0;font-size:13.5px;}
|
||||
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:9px;background:#EEF2F8;color:var(--muted);margin-left:6px;}
|
||||
.tag.done{background:#E4F3EA;color:var(--ok);}
|
||||
.hint{color:var(--muted);font-size:12px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>移动端全屏落地实现计划 <span class="tag done">已执行 · 2026-07-04</span></h1>
|
||||
<div class="sub">m-* 原型 → Flutter 实现：底部 tab + 我的 hub + 底部 sheet 交互范式。执行真相源为 plan .md（checkbox 版），本页为阅读版。</div>
|
||||
|
||||
<div class="card lead">
|
||||
<b>背景</b>：移动原型体系（19 个 m-*.html）设计评审通过后整体落成 Flutter。核心差距是 Flutter 窄屏原为「桌面响应式复用」（Drawer 汉堡导航、右滑抽屉详情、弹窗筛选），移动愿景是「底部 5 tab + 我的 hub、一切弹层走底部 sheet、2×2 可点 KPI + 搜索行 + 图标徽章卡片流」。<b>桌面形态全程零改动</b>，所有改动走 <code>context.isMobile</code> 分支。
|
||||
<br><br>
|
||||
<b>已拍板边界（不做）</b>：移动端无建单入口（m-stock-in/m-stock-out 建单表单屏不落地）；移动端无打印动作；通知中心为二期（后端无通知模块，m-notifications 两屏跳过）；登录/注册已自适应不入包。
|
||||
</div>
|
||||
|
||||
<h2>执行模式</h2>
|
||||
<p>Stage 0 共享基建由主会话串行完成（router / shell / widgets 属冻结区），随后 <b>4 个 flutter-coder agent 并行</b>跑 4 个文件不相交的屏工作包，最后主会话合流验收。</p>
|
||||
|
||||
<h2>Stage 0 · 基建（commit <code>be9afcf</code>）</h2>
|
||||
<div class="card">
|
||||
<ul>
|
||||
<li><b>统一移动 sheet</b>：<code>widgets/ds/m_sheet.dart</code> — <code>showMSheet</code>（grip/标题/X/86vh/键盘避让/SelectionArea）+ <code>showAdaptiveSheet</code>（窄屏 sheet / 宽屏 dialog）</li>
|
||||
<li><b>状态图标映射</b>：<code>widgets/ds/status_icon_map.dart</code> — 原型 icons.js BADGE_ICON 28 词逐词转录为 LucideIcons</li>
|
||||
<li><b>图标徽章</b>：DsBadge / StatusPill / StatusBadge 加 icon 变体（默认圆点，桌面 golden 零漂移）</li>
|
||||
<li><b>移动组件</b>：<code>m_kpi_grid.dart</code>（2×2 可点 KPI）· <code>m_search_row.dart</code>（搜索框+状态钮+详搜钮）· <code>m_hub.dart</code>（hub 入口组）· <code>m_tab_bar.dart</code>（底部 tab）· <code>theme_sheet.dart</code>（主题外观 sheet）</li>
|
||||
<li><b>路由</b>：branch 9 <code>/me</code>（MeScreen）+ <code>/me/license</code>（LicenseScreen）；location 透传壳</li>
|
||||
<li><b>壳改造</b>：窄屏 tab 根白名单出底部 5 tab（库存/入库/出库/财务/我的 ↔ branch 2/0/1/3/9）；二级屏隐藏 tabbar + 顶栏返回箭头 + PopScope 拦系统返回键；删 Drawer/汉堡；窄屏顶栏对齐 m-top（标题+主题/铃/头像）；授权跳转窄屏分叉 <code>/me/license</code></li>
|
||||
<li><b>授权抽取</b>：_LicensePanel/_SettingsCard → 公共 <code>license_panel.dart</code> / <code>settings_card.dart</code>（桌面设置 tab 与移动独立屏同源）</li>
|
||||
<li><b>六个共享弹层</b>窄屏自动 sheet 化：订单详情/往来详情/财务往来/商品编辑抽屉 + 退单/登记收支 dialog（asSheet 形态）</li>
|
||||
<li><b>golden</b>：app_shell_mobile + me 各三主题（390×844@2x）</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Stage 1 · 四个并行工作包</h2>
|
||||
<table>
|
||||
<tr><th>包</th><th>屏</th><th>对照原型</th><th>要点</th><th>commit</th></tr>
|
||||
<tr><td><b>P1 单据域</b></td><td>入库列表 / 出库列表</td><td>m-stock-in-list / m-stock-out-list</td><td>KPI 2×2 可点筛选、MSearchRow、状态/详搜 sheet（字段与桌面同集）、图标徽章卡片流、确认进价/售价 sheet 化、窄屏无建单无打印、成本利润权限隐藏保持</td><td><code>ff7b419</code></td></tr>
|
||||
<tr><td><b>P2 库存+财务域</b></td><td>库存列表 / 库存盘点 / 财务</td><td>m-inventory / m-inventory-check / m-finance</td><td>库存 KPI 2×2+详搜 sheet；盘点卡片流+详情 sheet（按原型桩粒度）；财务 KPI 2×2+三分段卡片流+收付款图标徽章</td><td><code>dde87a3</code></td></tr>
|
||||
<tr><td><b>P3 经营数据域</b></td><td>往来单位 / 基础数据 / 商品详情</td><td>m-partners / m-products</td><td>类型 chips+图标徽章卡片流；五分段横滚+字典 sheet 表单；商品详情单列化+图片横滚防溢出</td><td><code>4287f5a</code></td></tr>
|
||||
<tr><td><b>P4 系统域</b></td><td>系统设置 / 用户管理 / 设备管理 / 关于我们</td><td>m-settings / m-users / m-devices / m-about</td><td>设置窄屏 hub 化（门店信息/编号规则/默认仓库 sheet）；用户卡片流+详情 sheet+FAB；设备会话/外设卡流+强制下线+添加设备 sheet+无打印模板；关于 hero+hub 链接+时间线+反馈 sheet</td><td><code>9445042</code></td></tr>
|
||||
</table>
|
||||
<p class="hint">统一约束：只改本包屏文件 + 新建本包 golden；禁改 widgets/ core/ router/ shell；桌面（!isMobile）零改动；颜色全走 token；窄屏隐藏建单/打印入口。</p>
|
||||
|
||||
<h2>Stage 2 · 合流验收（全部通过）</h2>
|
||||
<div class="card">
|
||||
<ul>
|
||||
<li>✅ 交叉冲突检查：四包 commit 文件清单互不相交，共享文件（widgets/core/shell/router）零越界</li>
|
||||
<li>✅ <code>flutter analyze</code> 0 error / 0 warning</li>
|
||||
<li>✅ <code>flutter test</code> 全量 283 用例全绿（既有 16 组桌面 golden 零漂移）</li>
|
||||
<li>✅ <code>node tool/check_ds_code.mjs --strict</code> 违规 0；<code>node tools/check-l1-sync.mjs</code> L1 同源过</li>
|
||||
<li>✅ design/CONTRACT.md 块 4 台账：移动壳/我的/授权/盘点入表（同步·golden 验证）；通知两屏登记「二期」；建单两屏登记「拍板不落地」；移动屏以 golden 自比为准不入 fidelity 闸</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>验证方式</h2>
|
||||
<ul>
|
||||
<li>每屏移动 golden：<code>pumpGolden(logical: Size(390,844), dpr: 2)</code> × A/B/C 三主题</li>
|
||||
<li>桌面回归：既有 golden 全绿零漂移（所有改动限 isMobile 分支 + 徽章 icon 默认 null）</li>
|
||||
<li>用户验收：真机（iPhone USB）或 macOS debug 窄窗目检；<b>不自动发版</b></li>
|
||||
</ul>
|
||||
|
||||
<p class="hint">执行真相源：~/.claude/plans/purrfect-tumbling-salamander.md（checkbox 版）。相关：design/CONTRACT.md「移动愿景原型」小节、CLAUDE.md「设计真相源分层」。</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user