# 原型验收说明 v0.3（Antigravity 版式 + 玻璃光感）

> **仅原型，未修改 DSH 正式代码、依赖或任何业务数据。**
> 位置：`design-prototype/`；生成时间：2026-10-22

---

## 0. 这一版改了什么（回应「不是很满意」）

v0.1 偏「克制的冷白工作台」。之后两步：v0.2 按参考图重排版式与配色（逐区域放大 + 像素采样），v0.3 补上玻璃光感（背景加可折射的光、面板改磨砂配方）。

| 维度 | v0.1 | v0.3（现在） |
| --- | --- | --- |
| 画布 | 冷白 `#F6F9FE` + 淡环境光 | **满屏蓝渐变** `#A9DCF9 → #E8EBF8`，实测贴合参考图 |
| 侧栏 | 白色玻璃卡 + 描边 | 同画布上的**半透明白**（0.16），无阴影 |
| 主区空态 | 大标题问候 + 鲸鱼标 + 四张卡 | **几乎全空**：一条面包屑 + 输入框（与参考图一致） |
| 输入框位置 | 偏下（59%） | **垂直中部**（45%–52%），参考图 43%–52% |
| 模型选择 | 带底色的胶囊 + 倍率 | **纯文字 + 箭头**，右侧是「档位」不是倍率 |
| 控件层级 | 处处有卡片底与阴影 | **几乎全平**，只有浮层用阴影 |
| 玻璃质感 | 半透明白面板，模糊 20px | 低白度 + 高饱和 + 定向边缘高光 + 内部颗粒 + 液面反光 |
| 行高 / 字号 | 32px / 13.5 | **30px / 13**（参考图 ≈28px） |
| 顶栏 | 标题 + 状态 | 图标工具行（标、折叠、前后退、搜索）｜状态胶囊 + 账号 + 更多 |

唯一「故意不像」的地方：**文字对比度**。参考图侧栏 `#3D738E`、占位符 `#7E9EAD` 在蓝底上只有 3:1 上下；本原型压到 5–12:1。

## 0.5 玻璃光感（v0.3，回应「背景只是色块」）

你说的问题是对的：**纯渐变模糊之后还是纯渐变**，所以面板看起来像贴上去的色块。这一版做了两件事：

**① 让背景有「可折射的东西」**

| 加了什么 | 效果 |
| --- | --- |
| 3 个高饱和色团（冰蓝 / 淡紫 / 薄荷），26–33s 缓慢漂移 | 模糊后有色相变化，玻璃才有"染了背景色"的证据 |
| 3 条 1200px 长、`blur(34px)` 的斜向光带，压在面板正后方 | 玻璃里会出现一条柔和亮带——最接近"折射"的一招 |
| 一道 116° 白色扫光（`mix-blend-mode: screen`）+ 3.5% 颗粒 | 表面反光与防色带 |

**② 把「白塑料」改成「磨砂玻璃」**

| 部件 | 做法 |
| --- | --- |
| 底色 | 白度从 72% 降到 **14%–36%** 的半透明白渐变 |
| backdrop | `blur(34–40px) saturate(1.25–1.35) brightness(1.02)`——**提饱和**是玻璃感的关键 |
| 边缘 | 定向高光：左上 `1px` 纯白 85–95%，右下 `35–45%`（均匀描边=塑料） |
| 颗粒 | `::after` 在玻璃**内部**铺 6% fractalNoise，`overlay` 混合 |
| 反光 | `::before` 铺 145° 白渐变（前 38% 渐隐） |
| 抬升 | 大面板双层投影，浮层更深 |

侧栏、输入框、气泡、代码块、工具卡、状态胶囊**全部**换成了这套。

**纯 CSS 的天花板**：macOS 控制中心是压在一张真实照片上的，模糊有真细节可平均。我们背景仍是抽象光场，所以能到「很像磨砂玻璃」，到不了「1:1 液态玻璃」。要继续往上，得垫一张真实背景图（生成一张约 5–10 积分，我没擅自花）。你说要，我就加。

## 1. 怎么预览

```sh
cd design-prototype && npm install && npm run dev   # → http://localhost:5199
```

跳状态：`?view=chat`、`?view=empty&menu=1`、`&collapsed=1`、`&settings=1`。

## 2. 截图（11 张，脚本自动生成）

| 文件 | 视口 | 内容 |
| --- | --- | --- |
| `01-empty-1440.png` | 1440×900 | 空态：蓝画布 + 侧栏 + 面包屑 + 输入框 |
| `02-menu-1440.png` | 1440×900 | 模型菜单（名称/档位/徽标/勾） |
| `03-chat-1440.png` | 1440×900 | 对话：气泡、代码块、工具卡 |
| `04-empty-1280.png` | 1280×800 | 笔记本 |
| `05-chat-768.png` | 768×1024 | 平板（52px 轨道） |
| `06-empty-390.png` | 390×844 | 手机空态 |
| `07-menu-390.png` | 390×844 | 手机菜单 |
| `08-chat-390.png` | 390×844 | 手机对话 |
| `09-rail-1280.png` | 1280×800 | 折叠轨道（3 条近期会话 + 图标） |
| `10-settings-1440.png` | 1440×900 | 设置浮层 |
| `11-drawer-390.png` | 390×844 | 手机抽屉 + 遮罩 |

## 3. 自动化自检（脚本，不是人工声称）

`node scripts/verify.mjs` → **8/8 PASS**，11 个状态 `overflowX=false`、`clipped=[]`：

1. 点模型胶囊 → 菜单打开（`aria-expanded=true`，10 行）
2. `↓↓ + Enter` → 选中 `GLM-5.3-Flash`，胶囊回显，菜单关闭
3. `Esc` 关闭
4. 空输入禁用 → 输入后可发送
5. 发送后追加演示消息、清空输入、空态自动进对话态
6. 设置浮层打开且不出屏（264×~340，bottom 848 / vh 900）
7. 折叠 52px 轨道 + 气泡提示
8. 390px 抽屉可开合 + 遮罩

几何实测（`verify-report.json`）：
- 输入框 `x=465 w=774 h=83`，居中；参考图 754×82
- 菜单 `w=252`，锚在输入框下缘
- 对话页气泡右缘 `1239` = 输入框右缘 `1239`（轴线对齐）

## 4. 验收表（V01–V13）

| 编号 | 验收项 | 自检结论 | 证据 |
| --- | --- | --- | --- |
| V01 | 整体质感 | **待你验收**——这一版按参考图重做，观感应接近得多 | 01 / 03 |
| V02 | 背景环境光 | 通过：满屏蓝渐变，实测顶部 `#AFDFF9`、中部 `#D4EFFD`、底部 `#E2F2FD` | 01 |
| V03 | 玻璃层次 | 通过：三层白度（14–26% / 20–36% / 62–80%）+ 定向边缘高光，浮层才用深阴影 | 01 / 02 / 10 |
| V04 | 阅读清晰度 | 通过：正文 10.8:1、次文 6.2:1、元信息 4.9:1 | 03 |
| V05 | 侧栏 | 通过：白色胶囊锚点、无图标会话行、右对齐时间、圆点标记 | 01 / 09 |
| V06 | 输入栏 | 通过：16 圆角、83px 高、焦点柔光、文字型模型选择 | 01 / 03 |
| V07 | 模型菜单 | 通过：开/关/悬停/选中/键盘/碰撞翻转全部实测 | 02 / 07 |
| V08 | 聊天内容 | 通过：长文、列表、代码块、工具卡、滚动 | 03 |
| V09 | 一致性 | 通过：单一 token 源；列表与输入框同宽同轴 | 全部 |
| V10 | 多视口 | 通过：1440 / 1280 / 768 / 390 无错位、无横向滚动 | 01–08 |
| V11 | 可访问性 | **部分通过**：对比度达标、键盘可达、`focus-visible`、减少动画；暗色未做 | 见 §6 |
| V12 | 原型隔离 | 通过：未触碰 dsh 安装包、`~/.dsh`、业务数据 | — |
| V13 | 可预览性 | 通过：可运行、可点击、11 张图 + 一键自检 | — |

## 5. 与参考图逐项对照

| 参考图特征 | 本原型 |
| --- | --- |
| 满屏蓝渐变，右下偏淡紫 | ✅ 同 |
| 侧栏半透明、无描边（就一条极淡分界） | ✅ 同 |
| 「New Conversation」纯白胶囊 | ✅ `新会话` 白胶囊 |
| 导航无底色、纯文字 + 细图标 | ✅ 同 |
| 会话行无图标、右侧时间、部分带圆点 | ✅ 同 |
| 主区大面积留白，输入框在垂直中部 | ✅ 同 |
| 输入框上方一条 `Desktop ⌄` 面包屑 | ✅ `dsh-ui-refactor ⌄` |
| 控件行 `+` + 模型名 + 右功能 | ✅ `+` + 模型名 + 发送 |
| 模型选择是纯文字，不是色块 | ✅ 同 |
| 菜单 = 名称 + 档位 + New 徽标 + 勾/箭头 | ✅ 同 |
| 文字偏淡、整体发灰 | ❌ 刻意不抄（提升到 AA 以上） |
| OS 标题栏（Antigravity / File / View / Window） | ❌ Web 无窗口栏，合并为 46px 单行工具条 |
| 侧栏 Automations / Customizations | ❌ 按你的决定保留 DSH 真实功能名 |

## 6. 已知问题

- **玻璃上限**：背景是抽象光场，不是真实照片，所以「折射」是近似出来的。要更接近 macOS 需要一张背景图（可选，会额外消耗生成额度）。
- 大面积 `backdrop-filter` 在低端机上有开销；原型为保证观感叠加了 3 层，正式插件里会按视口面积收敛。
- 暗色未做（首轮范围外）。
- 对话页是新增设计（参考图无对话态）：用户消息右对齐白气泡，助手整宽。
- 侧栏的搜索、附件 `+`、后退/前进、更多按钮只有视觉与 hover，未接真实功能（原型范围）。
- 窗口高度 < 620px 时模型菜单会转向上并压缩高度（碰撞处理，属预期）。
- 文案写死中文，未做国际化。

## 7. 需要你拍板的三件事

1. **要不要垫真实背景图**：这是从「像磨砂玻璃」到「像液态玻璃」的最后一步（生成一张约 5–10 积分）。不加就是现在这版纯 CSS 效果。
2. **玻璃浓度**：现在白度 14%–36%。想更透（更像玻璃）或更实（更像磨砂纸），改三个数字即可。
3. **对话形态**：用户消息继续用右对齐白气泡，还是回到 DSH 现在的整宽排版？

确认没问题就可以说「原型验收通过，可以开始正式改造」，我再动插件代码（`dsh.bundle` + `dsh.client` 双半包）。