diff --git a/.planning/phases/06-quality-and-frontend/06-UI-SPEC.md b/.planning/phases/06-quality-and-frontend/06-UI-SPEC.md new file mode 100644 index 0000000..f2ff418 --- /dev/null +++ b/.planning/phases/06-quality-and-frontend/06-UI-SPEC.md @@ -0,0 +1,100 @@ +--- +phase: 6 +slug: quality-and-frontend +status: approved +shadcn_initialized: false +preset: none +created: 2026-03-21 +reviewed_at: 2026-03-21 +--- + +# Phase 6 — UI Design Contract + +> Visual and interaction contract for frontend phases. Generated by gsd-ui-researcher, verified by gsd-ui-checker. + +--- + +## Design System + +| Property | Value | +|----------|-------| +| Tool | none | +| Preset | not applicable | +| Component library | Naive UI (Vue 3) | +| Icon library | Iconify (unplugin-icons) | +| Font | System font (sans-serif) | + +--- + +## Spacing Scale + +Declared values (must be multiples of 4): + +| Token | Value | Usage | +|-------|-------|-------| +| xs | 4px | Icon gaps, inline padding | +| sm | 8px | Compact element spacing | +| md | 16px | Default element spacing, table cell padding | +| lg | 24px | Section padding | +| xl | 32px | Layout gaps, page margins | +| 2xl | 48px | Major section breaks | +| 3xl | 64px | Page-level spacing | + +Exceptions: none + +--- + +## Typography + +| Role | Size | Weight | Line Height | +|------|------|--------|-------------| +| Body | 14px | 400 | 1.5 | +| Label | 16px | 600 | 1.5 | +| Heading | 20px | 600 | 1.2 | +| Display | 28px | 600 | 1.2 | + +--- + +## Color + +| Role | Value | Usage | +|------|-------|-------| +| Dominant (60%) | #FFFFFF / #18181C | Background, main surfaces (Light/Dark mode) | +| Secondary (30%) | #F3F4F6 / #242428 | Cards, sidebar, modal backgrounds | +| Accent (10%) | #2080F0 | Primary buttons, active links, selected nav items | +| Destructive | #D03050 | Delete buttons, error badges, critical alerts | + +Accent reserved for: Primary Call-to-Action buttons (e.g. 触发清洗, 执行任务) and active navigation highlights. Never use for generic background elements. + +--- + +## Copywriting Contract + +| Element | Copy | +|---------|------| +| Primary CTA | "刷新数据" (Refresh Data) / "执行清洗" (Execute Cleaning) | +| Empty state heading | "暂无数据" (No data available) | +| Empty state body | "目前没有可显示的爬虫监控数据或待清洗任务" (There are no crawler monitoring data or pending tasks to display) | +| Error state | "数据加载失败: 请检查网络连接或后端服务状态" (Data load failed: Please check network or backend status) | +| Destructive confirmation | "删除": "确定要删除该记录吗?此操作不可恢复。" (Delete: Are you sure you want to delete this record? This cannot be undone.) | + +--- + +## Registry Safety + +| Registry | Blocks Used | Safety Gate | +|----------|-------------|-------------| +| shadcn official | none | not required | + +--- + +## Checker Sign-Off + +- [x] Dimension 1 Copywriting: PASS +- [x] Dimension 2 Visuals: FLAG (No focal point declared) +- [x] Dimension 3 Color: PASS +- [x] Dimension 4 Typography: PASS +- [x] Dimension 5 Spacing: PASS +- [x] Dimension 6 Registry Safety: PASS + +**Approval:** approved 2026-03-21