docs(06): UI design contract
This commit is contained in:
parent
f8f6401842
commit
26a6260696
|
|
@ -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
|
||||
Loading…
Reference in New Issue