117 lines
4.0 KiB
Markdown
117 lines
4.0 KiB
Markdown
---
|
||
phase: 06
|
||
slug: at-file-reference
|
||
status: approved
|
||
shadcn_initialized: true
|
||
preset: new-york
|
||
created: 2026-04-15
|
||
reviewed_at: 2026-04-15T10:08:50+08:00
|
||
---
|
||
|
||
# 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 背景、引用上限提示中的非危险强调文本（不用于全部按钮）。
|
||
|
||
---
|
||
|
||
## Visual Anchors & Hierarchy
|
||
|
||
1) 主焦点：`@` 候选 dropdown 的高亮首项（默认聚焦项，承担“下一步可执行动作”视觉引导）。
|
||
2) 次焦点：输入框内已选 chip 列表（持续反馈当前引用上下文）。
|
||
3) 第三层：辅助提示（引用上限提示、软失败 toast）。
|
||
4) 交互可达性补充：chip `×` 必须提供文字 fallback（`tooltip` 或 `aria-label="移除引用"`）。
|
||
|
||
---
|
||
|
||
## 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 |
|
||
|
||
---
|
||
|
||
## 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
|