5.6 KiB

Raw Blame History

业务优先单页收敛 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 把状态中心页面收敛成“业务先看懂单据、运维再下钻”的单页结构，首屏只保留结论、关键编号、当前待办和简化流程，证据/节点详情/验收收口默认折叠。

Architecture: 页面以单据概览为主视图，流程图和当前待办保持可见，但证据、节点详情、验收清单移到折叠区。状态计算仍留在 stateMachine.ts，组件只消费派生结果，不在 JSX 里推导业务规则。视觉上减少同屏卡片数量，保留一条主叙事线。

Tech Stack: React 18 + TypeScript + CSS + 现有 FastAPI 数据契约

Task 1: 提炼业务概览的数据模型

Files:

Modify: state_center_web/src/stateMachine.ts
Modify: state_center_web/src/stateMachine.test.mjs
Step 1: Write the failing test

test('概览模型只保留首屏必要信息', () => {
  const model = buildBusinessOverview(job, timeline, tasks, artifacts);
  assert.equal(model.header.currentStatusText, '已完成');
  assert.equal(model.header.currentNodeText, '归档');
  assert.equal(model.referenceChain.length, 5);
  assert.equal(model.primaryTask.title, '新增货源:重庆亿昊药业');
});

Step 2: Run test to verify it fails

Run: cd state_center_web && node --test --experimental-strip-types src/stateMachine.test.mjs Expected: FAIL with missing buildBusinessOverview export.

Step 3: Write minimal implementation

Implement buildBusinessOverview() in stateMachine.ts so it returns:

首屏头部摘要
关键编号链
当前待办
简化的流程状态
折叠区所需的计数摘要
Step 4: Run test to verify it passes

Run: cd state_center_web && node --test --experimental-strip-types src/stateMachine.test.mjs Expected: PASS.

Step 5: Commit

git add state_center_web/src/stateMachine.ts state_center_web/src/stateMachine.test.mjs
git commit -m "feat: add business overview view model"

Task 2: 重排单页骨架为业务优先布局

Files:

Modify: state_center_web/src/App.tsx
Modify: state_center_web/src/components/JobTimeline.tsx
Modify: state_center_web/src/components/JobReferenceChain.tsx
Modify: state_center_web/src/components/JobAcceptanceChecklist.tsx
Modify: state_center_web/src/components/JobNodeDetailList.tsx
Modify: state_center_web/src/components/JobEvidenceList.tsx
Step 1: Write the failing test

Use the existing browser mockup as the acceptance target:

首屏只显示一个业务结论区
关键编号和当前待办在首屏可见
证据、节点详情、验收清单默认收起

Add a component test or state snapshot asserting the new layout consumes the business overview model instead of rendering all detail blocks at equal weight.

Step 2: Run test to verify it fails

Run: cd state_center_web && node --test --experimental-strip-types src/*.test.mjs Expected: FAIL because the page still renders the old dense stack.

Step 3: Write minimal implementation

Recompose App.tsx into:

顶部单据概览
中间流程主区 + 当前待办
底部三个折叠区：证据、节点详情、验收对照

Keep existing data loading and callbacks, but move the dense panels behind <details> or equivalent collapsible controls. Limit the header to the business summary, not all fields.

Step 4: Run test to verify it passes

Run:

cd state_center_web && node --test --experimental-strip-types src/*.test.mjs
cd state_center_web && ./node_modules/.bin/tsc --noEmit

Expected: PASS.

Step 5: Commit

git add state_center_web/src/App.tsx state_center_web/src/components/JobTimeline.tsx state_center_web/src/components/JobReferenceChain.tsx state_center_web/src/components/JobAcceptanceChecklist.tsx state_center_web/src/components/JobNodeDetailList.tsx state_center_web/src/components/JobEvidenceList.tsx
git commit -m "feat: simplify business overview layout"

Task 3: 压缩视觉密度并做浏览器验收

Files:

Modify: state_center_web/src/styles.css
Optional modify: state_center_web/src/components/*.tsx only if a small class split is needed
Step 1: Write the failing test

No new logic test needed; use a visual acceptance check:

业务结论区在首屏可见
折叠区默认关闭
屏幕上不同时出现过多等重卡片
Step 2: Run test to verify it fails

Run: cd state_center_web && ./node_modules/.bin/vite build Expected: build passes before visual check, but browser screenshot should still show the dense layout, proving the need for CSS reduction.

Step 3: Write minimal implementation

Reduce weight in CSS:

收窄主卡片数量
给折叠区明显但低优先级的视觉权重
让编号链和状态结论压在首屏
让路径、证据、验收清单更像下钻信息，不像主内容
Step 4: Run test to verify it passes

Run:

cd state_center_web && ./node_modules/.bin/vite build
cd state_center_web && ./node_modules/.bin/tsc --noEmit
cd state_center_web && node --test --experimental-strip-types src/*.test.mjs

Then open the local app in the browser and verify:

首屏只有一条主叙事
折叠区默认收起
证据路径可点
Step 5: Commit

git add state_center_web/src/styles.css
git commit -m "feat: reduce dashboard density"

5.6 KiB Raw Blame History

业务优先单页收敛 Implementation Plan

Task 1: 提炼业务概览的数据模型

Task 2: 重排单页骨架为业务优先布局

Task 3: 压缩视觉密度并做浏览器验收

5.6 KiB

Raw Blame History