wangjia
5b9262a166
- 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>
91 lines
7.8 KiB
HTML
91 lines
7.8 KiB
HTML
<!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>
|