181 lines
7.6 KiB
Markdown
181 lines
7.6 KiB
Markdown
---
|
||
phase: 03-legacy-visual-alignment-pass
|
||
plan: 01
|
||
type: execute
|
||
wave: 1
|
||
depends_on:
|
||
- 02-thread-and-skills-logic-reconciliation
|
||
files_modified:
|
||
- frontend/src/styles/globals.css
|
||
- frontend/src/app/workspace/layout.tsx
|
||
- frontend/src/app/workspace/chats/[thread_id]/layout.tsx
|
||
- frontend/src/components/workspace/workspace-container.tsx
|
||
- frontend/src/components/workspace/workspace-header.tsx
|
||
- frontend/src/components/workspace/workspace-sidebar.tsx
|
||
- frontend/src/components/workspace/messages/message-list.tsx
|
||
- frontend/src/components/workspace/messages/message-list-item.tsx
|
||
- frontend/src/components/workspace/chats/chat-box.tsx
|
||
- frontend/src/components/workspace/input-box.tsx
|
||
autonomous: true
|
||
requirements:
|
||
- UI-01
|
||
- UI-02
|
||
- UI-03
|
||
must_haves:
|
||
truths:
|
||
- "workspace 的 typography、spacing、hierarchy 与旧视觉基线对齐。"
|
||
- "视觉改动不改变 chat/thread/artifact 的既有行为与数据流。"
|
||
- "全局样式和核心 workspace 页面风格保持一致，无局部割裂。"
|
||
artifacts:
|
||
- path: "frontend/src/styles/globals.css"
|
||
provides: "全局排版、间距与基础视觉变量统一"
|
||
- path: "frontend/src/app/workspace/layout.tsx"
|
||
provides: "workspace 主骨架层级与容器结构对齐"
|
||
- path: "frontend/src/components/workspace/workspace-header.tsx"
|
||
provides: "头部视觉语义与旧版一致"
|
||
- path: "frontend/src/components/workspace/workspace-sidebar.tsx"
|
||
provides: "侧栏视觉层级与交互样式对齐"
|
||
- path: "frontend/src/components/workspace/messages/message-list-item.tsx"
|
||
provides: "消息项视觉层级、间距和可读性一致"
|
||
key_links:
|
||
- from: "globals.css"
|
||
to: "workspace components"
|
||
via: "全局 token + 基础样式约束"
|
||
pattern: "font-size|line-height|spacing|color"
|
||
- from: "workspace layout/header/sidebar"
|
||
to: "chat/message/input"
|
||
via: "视觉层级和间距系统"
|
||
pattern: "container|panel|padding|gap"
|
||
---
|
||
|
||
<objective>
|
||
完成 Phase 3 的视觉对齐：在不改动核心逻辑行为的前提下，使 workspace 关键页面呈现与旧视觉基线一致。
|
||
|
||
Purpose: 落实 UI-01/UI-02/UI-03，确保后续 Phase 4 继续做逻辑稳定化时视觉基础已稳定。
|
||
Output: 全局样式与 workspace 关键组件视觉统一，且核心交互无回归。
|
||
</objective>
|
||
|
||
<context>
|
||
@.planning/PROJECT.md
|
||
@.planning/REQUIREMENTS.md
|
||
@.planning/ROADMAP.md
|
||
@.planning/phases/03-legacy-visual-alignment-pass/03-CONTEXT.md
|
||
@.planning/phases/02-thread-and-skills-logic-reconciliation/02-SUMMARY.md
|
||
@.planning/phases/02-thread-and-skills-logic-reconciliation/02-UAT.md
|
||
@frontend/src/styles/globals.css
|
||
@frontend/src/app/workspace/layout.tsx
|
||
@frontend/src/components/workspace/workspace-container.tsx
|
||
@frontend/src/components/workspace/workspace-header.tsx
|
||
@frontend/src/components/workspace/workspace-sidebar.tsx
|
||
</context>
|
||
|
||
<tasks>
|
||
|
||
<task type="auto" tdd="false">
|
||
<name>Task 1: 全局视觉基线收敛（UI-01, UI-03）</name>
|
||
<files>
|
||
frontend/src/styles/globals.css
|
||
frontend/src/app/workspace/layout.tsx
|
||
frontend/src/app/workspace/chats/[thread_id]/layout.tsx
|
||
</files>
|
||
<behavior>
|
||
- 全局字体、字号、行高、间距尺度与旧视觉基线一致。
|
||
- workspace 主容器和聊天页容器层级一致，避免局部页面漂移。
|
||
- 不引入影响业务逻辑的数据或路由变更。
|
||
</behavior>
|
||
<action>
|
||
在全局样式和 layout 层建立统一视觉基线：先定义/收敛 token，再修正容器级 spacing 与层级；明确只改样式与结构包装，不触碰核心行为逻辑。
|
||
</action>
|
||
<verify>
|
||
<automated>cd frontend && npm run lint</automated>
|
||
</verify>
|
||
<done>
|
||
workspace 全局视觉骨架一致，可作为组件级对齐基础。
|
||
</done>
|
||
</task>
|
||
|
||
<task type="auto" tdd="false">
|
||
<name>Task 2: 核心工作区组件视觉对齐（UI-01, UI-03）</name>
|
||
<files>
|
||
frontend/src/components/workspace/workspace-container.tsx
|
||
frontend/src/components/workspace/workspace-header.tsx
|
||
frontend/src/components/workspace/workspace-sidebar.tsx
|
||
frontend/src/components/workspace/messages/message-list.tsx
|
||
frontend/src/components/workspace/messages/message-list-item.tsx
|
||
</files>
|
||
<behavior>
|
||
- workspace header/sidebar/content 层级与视觉权重符合旧版感知。
|
||
- message list/item 的可读性、间距、层级和状态样式统一。
|
||
- 组件视觉变化在主页面之间保持一致。
|
||
</behavior>
|
||
<action>
|
||
分组件执行视觉对齐：先容器与导航，再消息列表与消息项，最后统一细节（边距、圆角、分隔、颜色对比）。必要时提取复用样式，避免重复样式漂移。
|
||
</action>
|
||
<verify>
|
||
<automated>cd frontend && npm run lint</automated>
|
||
</verify>
|
||
<done>
|
||
核心组件视觉风格一致，且不存在明显的页面间样式割裂。
|
||
</done>
|
||
</task>
|
||
|
||
<task type="auto" tdd="true">
|
||
<name>Task 3: 交互回归护栏与关键场景验证（UI-02）</name>
|
||
<files>
|
||
frontend/src/components/workspace/chats/chat-box.tsx
|
||
frontend/src/components/workspace/input-box.tsx
|
||
frontend/tests/e2e/welcome-and-routing.spec.ts
|
||
frontend/tests/e2e/support/chat-helpers.ts
|
||
</files>
|
||
<behavior>
|
||
- chat 输入、发送、历史加载、线程切换等关键交互不回归。
|
||
- 视觉调整不影响 artifacts/thread reuse 的核心流程。
|
||
- 关键路径在 E2E 可执行时能通过，不可执行时有明确失败信号。
|
||
</behavior>
|
||
<action>
|
||
对关键交互路径建立最小回归护栏：补充/修正与视觉改造耦合的 E2E 断言，确保 UI 层改动不改变行为结果；并对高风险页面做手动冒烟清单。
|
||
</action>
|
||
<verify>
|
||
<automated>cd frontend && npm run test:e2e -- welcome-and-routing.spec.ts</automated>
|
||
</verify>
|
||
<done>
|
||
视觉改动后的关键交互行为保持稳定，可安全衔接后续阶段。
|
||
</done>
|
||
</task>
|
||
|
||
</tasks>
|
||
|
||
<threat_model>
|
||
## Trust Boundaries
|
||
|
||
| Boundary | Description |
|
||
|----------|-------------|
|
||
| `global styles -> all workspace pages` | 全局样式变更会影响多页面，需防止非目标页面被破坏 |
|
||
| `visual refactor -> interaction surfaces` | 视觉重构可能影响点击区域、滚动行为和输入交互 |
|
||
|
||
## STRIDE Threat Register
|
||
|
||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||
|-----------|----------|-----------|-------------|-----------------|
|
||
| T-03-01 | T (Tampering) | global style tokens | mitigate | 统一 token 来源并限制覆盖范围，避免局部无意覆盖 |
|
||
| T-03-02 | D (Denial of Service) | chat input / list interaction | mitigate | 对输入、发送、滚动与路由关键路径增加回归验证 |
|
||
| T-03-03 | I (Information Disclosure) | visual-only phase scope | accept | 本阶段仅前端视觉改造，不引入新数据读取路径 |
|
||
| T-03-04 | R (Repudiation) | UI regressions without proof | mitigate | 记录 E2E 结果与关键页面对照说明，便于审阅 |
|
||
</threat_model>
|
||
|
||
<verification>
|
||
1. `lint` 通过，样式/组件改动无基础质量问题。
|
||
2. 关键 E2E 场景可执行时通过；不可执行时输出明确错误而非静默。
|
||
3. 手动抽查 workspace 关键页面视觉一致性（header/sidebar/chat/message/input）。
|
||
</verification>
|
||
|
||
<success_criteria>
|
||
- UI-01：workspace 视觉风格（排版、间距、层级）与旧版基线一致。
|
||
- UI-02：视觉对齐不破坏 chat/thread/artifact 关键交互。
|
||
- UI-03：全局样式在主 workspace 页面保持一致。
|
||
</success_criteria>
|
||
|
||
<output>
|
||
After completion, create `.planning/phases/03-legacy-visual-alignment-pass/03-SUMMARY.md`
|
||
</output>
|