wangjia
93 lines
10 KiB
HTML
93 lines
10 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; --danger:#D14343; --danger-bg:#FDECEC;
|
||
--success:#2E8B57; --success-bg:#E6F3EC; --warn:#B45309; --warn-bg:#FFF4E5; --accent:#8B2331;
|
||
--ink:#232934; --muted:#6E7888; --border:#DCE2EB; --paper:#F5F7FA; --head:#F0F4FF;
|
||
}
|
||
*{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;}
|
||
h1{font-size:22px;margin:0 0 4px;}
|
||
h2{font-size:17px;margin:30px 0 12px;color:var(--primary-dark);border-bottom:2px solid var(--head);padding-bottom:6px;}
|
||
h3{font-size:14.5px;margin:18px 0 8px;color:var(--primary-dark);}
|
||
.sub{color:var(--muted);font-size:13px;margin-bottom:18px;}
|
||
.card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin:14px 0;font-size:13.5px;}
|
||
code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#EEF2F8;padding:1px 5px;border-radius:4px;color:var(--primary-dark);}
|
||
pre{background:#0F1722;color:#D8E1EC;border-radius:8px;padding:12px 14px;overflow-x:auto;font-size:12px;line-height:1.55;}
|
||
pre code{background:none;color:inherit;padding:0;}
|
||
ul,ol{margin:6px 0;padding-left:22px;} li{margin:4px 0;font-size:13px;}
|
||
table{border-collapse:collapse;width:100%;margin:10px 0;font-size:12.5px;background:#fff;}
|
||
th,td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top;}
|
||
th{background:var(--head);color:var(--primary-dark);white-space:nowrap;}
|
||
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:10px;margin-right:6px;font-weight:600;}
|
||
.tag.keep{background:var(--success-bg);color:var(--success);}
|
||
.tag.change{background:var(--warn-bg);color:var(--warn);}
|
||
.tag.risk{background:var(--danger-bg);color:var(--danger);}
|
||
.chk{color:var(--success);font-weight:700;margin-right:4px;}
|
||
.hl{background:var(--warn-bg);padding:0 3px;border-radius:3px;}
|
||
.wrap{overflow-x:auto;}
|
||
</style></head><body>
|
||
<h1>六项前端体验优化 实现计划</h1>
|
||
<div class="sub">2026-07-14 · 状态：<b>7 任务全部完成</b>（本地提交态，DoD 全绿 + fidelity 最差 4.724%≤阈，等用户验收；不发版不部署）· 执行真相源 = <code>docs/plans/2026-07-14-six-frontend-tweaks.md</code>（checkbox），本页为阅读版 · 每任务经独立审查（T3 修掉生产日期空串崩溃 Critical；T4/T5/T6 补 19 个回归用例）</div>
|
||
|
||
<h2>结论先行</h2><div class="card">
|
||
<p style="margin:4px 0"><b>六个需求全部「后端零改动」</b>，均为 Flutter 前端 + 设计原型改动。按 design-first 铁律：每个任务<span class="hl">先改原型 → 再改真实代码 → 同一提交落地</span>，改到的屏保持 CONTRACT「同步」态，完成后跑 fidelity / check-ds / check-l1-sync / golden 全闸。</p>
|
||
<ul>
|
||
<li><span class="tag keep">数据已通</span>①供应商：后端库存 List 已返回 <code>supplier_name</code>、前端模型已解析；③生产日期/批次号：出入库明细快照列已有且接口已返回，写入有保障（入库空批次自动生成、出库空值从 product 回填）</li>
|
||
<li><span class="tag keep">接口已支持</span>④状态多选：List 接口本就 <code>status IN (逗号拆分)</code>；⑥往来单位：<code>/finance/records?partner_id=</code> 过滤已存在，repository 已有参数</li>
|
||
<li><span class="tag keep">概念已存在</span>⑤默认仓库：<code>warehouses.is_default</code> schema/后端/客户端模型/设置页选择 UI 全链路齐备，只差新建表单一行填充</li>
|
||
</ul></div>
|
||
|
||
<h2>需求 → 改法一览（两端分列）</h2><div class="wrap">
|
||
<table>
|
||
<tr><th>#</th><th>需求</th><th>桌面端</th><th>移动端</th><th>后端</th></tr>
|
||
<tr><td>1</td><td>库存抽屉加供应商</td><td colspan="2"><b>两端共用同一抽屉组件</b>（<code>product_editor_drawer.dart</code> 的 <code>_infoBody</code>，桌面=右滑抽屉 / 移动=底部 sheet），加一行两端同时生效；由库存列表调用点传 <code>item.supplierName</code>，其它调用方不传即不显示</td><td>零</td></tr>
|
||
<tr><td>2</td><td>批次号↔生产日期换位</td><td><code>inventory.html COLS</code> + <code>_colDefs</code> 对调（批次号第4列 ↔ 生产日期第8列）；列偏好按 key 存，用户配置不受影响</td><td>移动端无批次号字段，<b>不涉及</b></td><td>零</td></tr>
|
||
<tr><td>3</td><td>出入库单抽屉加「生产日期+批次号」</td><td>明细表插双行列（上=生产日期 fsSm mono，下=批次号 fsXs 小字，照抄「商品·编码」列先例）：入库 5→6 列微调列宽不加宽；出库管理员 7→8 列太紧，<span class="tag change">抽屉 600→660px</span>（L1 <code>atoms.css .drawer.wide</code> 与 Flutter 常量同提交）</td><td>明细行金额左侧同样插入<b>双行列</b>（上=生产日期，下=批次号小字，与桌面同构；两值皆空不渲染）</td><td>零</td></tr>
|
||
<tr><td>4</td><td>状态筛选多选 + 默认草稿+待审核</td><td>状态 chip 单选 PopupMenu → 库存屏已有多选先例 <code>showDsMultiMenu</code>（摘要 值/「N 项」/ × 清）</td><td>状态底部 sheet 单选 → 多选勾选；KPI 卡点击=覆盖单值</td><td>零（已支持逗号多值）</td></tr>
|
||
<tr><td>5</td><td>新建单默认填默认仓库</td><td colspan="2"><b>两表单共用同一代码路径</b>（OrderFormShell docHead），新建模式仓库列表加载后 <code>??=</code> 默认仓（无默认仓且仅一仓则取它），改一处两端生效；编辑模式不受影响</td><td>零</td></tr>
|
||
<tr><td>6</td><td>财务加往来单位筛选 + 统一时间组件</td><td>流水表 toolbar 加 <code>ComboSearchField</code>（照出库「客户」筛选），数据源 <code>allPartnersProvider</code></td><td>时间 chips 行尾加「往来单位」chip → 底部 sheet 可搜单选（财务移动屏无 toolbar/详搜结构，此为最轻形态）</td><td>零（partner_id 已支持）</td></tr>
|
||
<tr><td>6b</td><td>自定义时间统一</td><td colspan="2"><code>showDateRangePicker</code>（Material 原生）→ 入库管理用的 <code>showDateRangeDropdown</code>（桌面=chip 下拉双滚轮 / 窄屏=底部 sheet，<b>组件内部自适应，一处改动两端生效</b>）</td><td>零</td></tr>
|
||
</table></div>
|
||
|
||
<h2>已定决策（评审时可推翻）</h2><div class="card"><ul>
|
||
<li><b>D1 供应商行两端同显</b>：抽屉组件两端共用、成本为零；桌面抽屉当前也没供应商（表格有），一并补齐更一致。行位：生产日期行之后</li>
|
||
<li><b>D2 库存抽屉顺手补「批次号」行（推荐做）</b>：与需求③口径对称（出入库抽屉都有、库存抽屉只有生产日期），数据已有零成本。<span class="tag risk">待确认</span>只要最小改动就去掉</li>
|
||
<li><b>D3 状态筛选「重置」回默认</b> <code>draft,pending</code>（与进页初始一致），不是回「全部」</li>
|
||
<li><b>D4 退单伪状态（ret:*）与主状态多选保持互斥</b>：选退单清多选、选主状态清退单（沿用现语义）</li>
|
||
<li><b>D5 移动 KPI 卡点击 = 覆盖为单值</b>（点「待审核」即只看待审核，保持现有心智）</li>
|
||
<li><b>D6 移动财务往来单位形态</b>：时间行尾 chip → 底部可搜索单选 sheet，× 清除</li>
|
||
<li><b>D7 出库抽屉加宽 600→660px</b>：8 列所需；入库 6 列余量够不加宽</li>
|
||
</ul></div>
|
||
|
||
<h2>任务分解与多 agent 调度（7 任务，每任务原型+代码同提交）</h2>
|
||
<div class="card"><ul>
|
||
<li><span class="chk">T1</span><b>库存抽屉供应商(+批次号)行</b> — 原型 product-editor.js / m-inventory.html → 抽屉加入参+条件行 → 列表传参</li>
|
||
<li><span class="chk">T2</span><b>库存桌面列换位</b> — inventory.html COLS + _colDefs 对调</li>
|
||
<li><span class="chk">T3</span><b>出入库抽屉双行列</b> — 4 原型 + atoms.css 660 → OrderLine 加字段 + 桌面/移动都插双行列 + 两屏传参 + stock_in 模型 lineOrProduct 兜底 + 列结构专测更新</li>
|
||
<li><span class="chk">T4</span><b>状态多选+默认值</b> — 4 原型 → provider 默认 <code>draft,pending</code> + <span class="hl">重写 initState「归零残留多值」陷阱逻辑</span> + 桌面 showDsMultiMenu + 移动 sheet 多选 + KPI/重置语义</li>
|
||
<li><span class="chk">T5</span><b>默认仓库填充</b> — stock-in.js 原型 → 两表单新建时 ??= 默认仓</li>
|
||
<li><span class="chk">T6</span><b>财务往来筛选+统一时间</b> — finance.html 接 datewheel + m-finance.html 回填时间行（<span class="tag change">顺带修存量漂移</span>：真实端有时间行、移动原型没有）→ provider 加 setPartner → ComboSearchField / chip+sheet / showDateRangeDropdown</li>
|
||
<li><span class="chk">T7</span><b>收尾</b> — CONTRACT 台账回填 + fidelity 体检（库存/出入库/财务 双端）+ 手册核查（默认筛选行为变化）</li>
|
||
</ul>
|
||
<div class="wrap"><table>
|
||
<tr><th>波次</th><th>并行组</th><th>任务</th><th>说明</th></tr>
|
||
<tr><td>1</td><td>A 库存域 ∥ B 出入库抽屉 ∥ D 财务域</td><td>T1+T2 ∥ T3 ∥ T6</td><td>三组文件域无交集，并行执行</td></tr>
|
||
<tr><td>2</td><td>C 出入库筛选+表单</td><td>T4+T5</td><td>与 B 同文件（两 list_screen / 4 原型），<b>必须等 B 完成</b></td></tr>
|
||
<tr><td>3</td><td>收尾</td><td>T7</td><td>全部完成后统一体检回填</td></tr>
|
||
</table></div></div>
|
||
|
||
<h2>红线与 DoD</h2><div class="card"><ul>
|
||
<li><b>design-first 铁律</b>：每任务先改原型（5180 可随时预览）再落码，原型与代码同一提交；颜色走 token 禁硬编码</li>
|
||
<li>后端零改动 · 零写真实库 · <b>不部署不发版不打 tag</b>，完成停在本地提交态等验收</li>
|
||
<li>DoD：<code>flutter analyze/test</code> 全绿 + <code>check_ds_code.mjs</code> + <code>check-l1-sync.mjs</code> 过闸 + 受影响屏 fidelity ≤8% + golden regen + CONTRACT 保持「同步」态</li>
|
||
</ul></div>
|
||
|
||
<h2>批准后落地流程</h2><div class="card"><ol>
|
||
<li>todo 登记（全局 todo skill）并标 doing</li>
|
||
<li>按波次多 agent 派发执行（波1 三组并行 → 波2 → 收尾），每任务一提交</li>
|
||
<li>完成后本地起服务给你实测验收（5180 原型 + dev.sh run 真实端）</li>
|
||
</ol></div>
|
||
</body></html>
|