diff --git a/.planning/phases/06-/06-UI-SPEC.md b/.planning/phases/06-/06-UI-SPEC.md new file mode 100644 index 00000000..56fdc23d --- /dev/null +++ b/.planning/phases/06-/06-UI-SPEC.md @@ -0,0 +1,109 @@ +--- +phase: 06 +slug: at-file-reference +status: draft +shadcn_initialized: true +preset: new-york +created: 2026-04-15 +--- + +# Phase 06 — 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 | shadcn(来源:`frontend/components.json`) | +| Preset | `style=new-york`, `baseColor=neutral`, `cssVariables=true`(来源:`frontend/components.json` + `npx shadcn info`) | +| Component library | radix(来源:`npx shadcn info`) | +| Icon library | lucide(来源:`frontend/components.json`) | +| Font | `"Microsoft YaHei","微软雅黑","PingFang SC",ui-sans-serif,system-ui,sans-serif`(来源:`frontend/src/styles/globals.css`) | + +--- + +## Spacing Scale + +Declared values (must be multiples of 4): + +| Token | Value | Usage | +|-------|-------|-------| +| xs | 4px | chip 内图标与文字间距、微小内边距 | +| sm | 8px | dropdown 条目内间距、chip 间距 | +| md | 16px | 输入框内部默认间距、候选区分组间距 | +| lg | 24px | 输入框 footer 区块分隔 | +| xl | 32px | 面板与上下内容的视觉留白 | +| 2xl | 48px | 大段落分区留白(不用于本 phase 细粒度组件) | +| 3xl | 64px | 页面级留白(沿用全局,不在本 phase 新增) | + +Exceptions: none(来源:默认值;未与 D-08 上限/交互约束冲突) + +--- + +## Typography + +| Role | Size | Weight | Line Height | +|------|------|--------|-------------| +| Body | 14px | 400 | 1.5 | +| Label | 16px | 600 | 1.4 | +| Heading | 20px | 600 | 1.2 | +| Display | 28px | 600 | 1.2 | + +说明:仅使用 2 个字重(400/600);字号集合为 14/16/20/28(来源:`globals.css` 现有 14/16/20 + 本 phase 默认扩展 28)。 + +--- + +## Color + +| Role | Value | Usage | +|------|-------|-------| +| Dominant (60%) | `#F9F8FA` (`--background`) | 主背景、输入区域底面 | +| Secondary (30%) | `#FFFFFF` (`--card`/`--popover`) | dropdown 容器、卡片、浮层底色 | +| Accent (10%) | `#1500331A` (`--accent`/`--secondary`) | 候选高亮底、chip 轻量背景、@ 触发态提示 | +| Destructive | `oklch(0.577 0.245 27.325)` (`--destructive`) | 删除引用 chip 图标 hover/危险提示 | + +Accent reserved for: `@` 触发后候选高亮行、已选引用 chip 背景、引用上限提示中的非危险强调文本(不用于全部按钮)。 + +--- + +## Copywriting Contract + +| Element | Copy | +|---------|------| +| Primary CTA | 添加引用 | +| Empty state heading | 无可引用文件 | +| Empty state body | 当前线程暂无 artifacts 或 uploads。请先上传文件或先生成文件后再输入 `@`。 | +| Error state | 部分引用文件已失效,已自动移除并继续发送。 | +| Destructive confirmation | 移除引用文件:点击 chip 的 `×` 立即移除,无二次确认(低风险可逆交互)。 | + +补充约束(来源:`06-CONTEXT.md`): +- 软失败必须 toast 提示且不阻断发送(D-07)。 +- 超过 10 个引用必须阻止继续添加并提示(D-08)。 +- 同名文件候选展示必须为“文件名 + 类型 + 路径尾段”(D-04)。 + +--- + +## Registry Safety + +| Registry | Blocks Used | Safety Gate | +|----------|-------------|-------------| +| shadcn official | `dropdown-menu`, `badge`, `button`, `tooltip`(沿用已安装) | not required | +| `@ai-elements` | none(本 phase 未声明新增 block) | not in scope — no third-party block declared — 2026-04-15 | +| `@magicui` | none(本 phase 未声明新增 block) | not in scope — no third-party block declared — 2026-04-15 | +| `@react-bits` | none(本 phase 未声明新增 block) | not in scope — no third-party block declared — 2026-04-15 | + +--- + +## Checker Sign-Off + +- [ ] Dimension 1 Copywriting: PASS +- [ ] Dimension 2 Visuals: PASS +- [ ] Dimension 3 Color: PASS +- [ ] Dimension 4 Typography: PASS +- [ ] Dimension 5 Spacing: PASS +- [ ] Dimension 6 Registry Safety: PASS + +**Approval:** pending