---
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