docs(06): UI design contract

.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