# 业务优先单页收敛 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"
```