150 lines
5.6 KiB
Markdown
150 lines
5.6 KiB
Markdown
# 业务优先单页收敛 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**
|
|
|
|
```javascript
|
|
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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
git add state_center_web/src/styles.css
|
|
git commit -m "feat: reduce dashboard density"
|
|
```
|
|
|