cc-web/.trellis/tasks/07-17-gilded-wasteland-theme/research/visual-rework-audit.md

# 暗金荒野视觉返工审计

审计对象：

- 参考图：`sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp`
- 背景图：`sessions/_attachments/094d7907-875d-41f4-9985-992c87c9b9cc.webp`
- 当前 CSS：`public/style.css`，重点为 `/* === 暗金荒野` 到文件末尾
- 当前 mock：`.planning/gilded-wasteland-theme/visual-preview.html`

审计结论：当前版本的问题不是主题元素不够多，而是过度把所有组件做成厚金边、硬切角、重阴影卡片。参考图的核心语言是“全画布骑士背景 + 半透明黑铁薄面板 + 1px 旧金蚀刻线 + 局部角饰”，需要删重而不是继续加装饰。

## 1. 参考图 1672x941 像素比例

以下尺寸为按原尺寸图像检查后的近似像素坐标，误差约 2-6px，适合作为 CSS 目标值。

| 区域 | 参考图坐标 | 像素尺寸 | 视口占比 | 当前 CSS/Mock 主要偏差 |
|---|---:|---:|---:|---|
| 左侧栏整体 | `x=0-316, y=0-941` | `316x941` | 宽 `18.9%`，高 `100%` | 当前 `--sidebar-width: 280px`，仅 `16.7%`，明显偏窄 |
| 主工作区 | `x=316-1672, y=0-941` | `1356x941` | 宽 `81.1%` | 当前主区更早暴露背景，但侧栏比例不对 |
| 顶栏 | `x=316-1672, y=0-57` | `1356x57` | 高 `6.1%` | 当前 `--header-height: 52px`，略矮 |
| 侧栏顶部按钮组 | `x=15-303, y=10-57` | `288x47` | 侧栏内宽 `91.1%` | 当前按钮形状可接近，但金边过亮、切角太统一 |
| 新会话主按钮 | `x=15-245, y=10-57` | `230x47` | 侧栏宽 `72.8%` | 当前宽度受 280px 侧栏影响，整体缩窄 |
| 新会话下拉 | `x=250-303, y=10-57` | `53x47` | 侧栏宽 `16.8%` | 当前可以保留分裂按钮，但边框需要降亮度 |
| 搜索框 | `x=15-303, y=68-102` | `288x34` | 侧栏宽 `91.1%` | 当前 `clip-path` 切角不应扩散到搜索框 |
| 会话列表主区 | `x=15-303, y=118-870` | `288x752` | 高 `79.9%` | 当前 active item 过厚、阴影过明显 |
| 侧栏底栏 | `x=0-316, y=870-941` | `316x71` | 高 `7.5%` | 当前底栏暗度可保留，但不要成为厚卡片 |
| 消息可视带 | `x=316-1672, y=57-795` | `1356x738` | 高 `78.4%` | 当前消息卡片堆叠感更强 |
| 第一条 assistant 面板 | `x=400-1043, y=87-431` | `643x344` | 宽 `38.5%`，高 `36.6%` | 当前 max-width 接近，但黑底和切角过重 |
| 用户气泡 | `x=1152-1572, y=453-516` | `420x63` | 宽 `25.1%`，高 `6.7%` | 当前用户气泡过暗、阴影厚 |
| 第二条 assistant 面板 | `x=400-1397, y=516-774` | `997x258` | 宽 `59.6%`，高 `27.4%` | 当前 tool-call 产生太多内部卡片层 |
| 输入区总高度 | `x=316-1672, y=795-941` | `1356x146` | 高 `15.5%` | 当前 `.input-area` 作为整条暗底带太明显 |
| 模式按钮行 | `x=563-899, y=795-824` | `336x29` | 主区宽 `24.8%` | 当前状态胶囊可保留，边框和填充应更轻 |
| 输入框外框 | `x=557-1363, y=832-905` | `806x73` | 宽 `48.2%`，高 `7.8%` | 当前 max-width `800px` 接近，但高度 `54px` 偏矮，阴影偏重 |

建议直接落地的布局变量：

```css
html[data-theme='wasteland'] {
  --sidebar-width: 316px;
  --header-height: 57px;
}
```

移动端不应照搬 316px，可继续使用 `min(88vw, 320px)`，但桌面 mock 必须先贴近参考图。

## 2. 边框、透明度、切角和面板层级

### 边框线宽

| 元素类型 | 参考图特征 | 建议 CSS 值 | 当前问题 |
|---|---|---|---|
| 全局旧金线 | 大多是 1px，抗锯齿后局部看似 2px | `1px solid rgba(185, 139, 75, 0.28)` | 当前多处用 `rgba(..., 0.52-0.64)`，视觉太亮 |
| 高亮角线 | 只在角、按钮边缘、active 状态短暂增强 | `rgba(223, 180, 108, 0.44-0.58)` | 当前整条边都亮，不像蚀刻线 |
| 内发亮线 | 很弱，只用于面板顶部/内侧 | `inset 0 1px rgba(255, 230, 180, 0.04-0.08)` | 当前叠加了大阴影，层级失真 |
| active 会话 | 1px 金线 + 微弱背景，不是粗卡片 | `border-color: rgba(196,154,90,.46)` | 当前 `inset 3px` + 外阴影太重 |
| tool-call 内框 | 1px 细线，嵌在消息面板内 | `border-color: rgba(185,139,75,.30)` | 当前 `border-left: 2px` 和 `clip-path` 抢层级 |

### 透明度层级

参考图不是纯黑 UI，而是让背景纹理穿过面板。建议把层级收敛为 4 档：

| 层级 | 用途 | 建议值 |
|---|---|---|
| 页面遮罩 | 保证左侧可读，右侧人物可见 | 左侧最高 `0.72`，人物区 `0.04-0.18`，底部 `0.44` |
| 侧栏大底 | 黑铁主面板 | `rgba(5, 7, 7, 0.72-0.78)` |
| 消息/输入面板 | 半透明工作区卡面 | `rgba(8, 10, 10, 0.62-0.76)` |
| 小按钮/标签 | 状态和工具按钮 | `rgba(12, 14, 12, 0.48-0.66)` |

当前 CSS 中这些值偏重：

- `body` 左侧遮罩 `0.96/0.90/0.68`，会把背景压成黑墙。
- `.sidebar` 背景 `rgba(7,9,8,0.92)`，比参考图更像实心抽屉。
- `.msg.assistant` 背景 `rgba(12,15,13,0.88)`，压掉背景纹理。
- `.input-wrapper` 背景 `rgba(8,10,9,0.91)`，过实。
- `.wasteland-panel-strong` `0.93` 加上 `--shadow-strong`，弹层会变成厚卡片。

### 切角位置

参考图的切角是“局部外框语言”，不是全组件形状规则。

| 区域 | 参考图切角 | 建议 |
|---|---|---|
| 新会话主按钮/下拉按钮 | 顶部左右约 `6-8px` 斜切，底边更克制 | 可保留小切角 |
| 输入框外框 | 外框角部约 `6-8px`，并带底部中心装饰 | 可保留局部角饰，但不要把内容裁掉 |
| 消息面板 | 基本是轻圆角矩形，角部仅有细线高光 | 删除 `clip-path`，用 `border-radius: 8px` |
| 会话列表项 | active 项有边框和微弱纹理，不是每一项都硬切 | 删除普通项 `clip-path` |
| 搜索框/状态胶囊 | 小圆角/轻边框 | 删除切角 |
| tool-call | 内嵌细线框，局部角线即可 | 删除 `clip-path` 和厚左边 |
| 弹层/菜单 | 可使用轻角饰，但不能整块重卡片 | 优先用 border/pseudo corner，不用全局裁切 |

核心建议：不要继续依赖 `--wasteland-cut` 做全局形状。只保留一个小尺寸切角变量给主按钮和输入框外框，其余组件回到圆角或直角薄线。

## 3. 人物/背景可见范围与遮罩梯度

背景图与项目资源一致，`public/assets/themes/wasteland/background.webp` 和给定背景附件 hash 一致。背景本身就是 1672x941，桌面 `cover center` 不会裁切，这是好事。

参考图中人物可见范围：

| 背景元素 | 参考图大致范围 | 视觉要求 |
|---|---:|---|
| 骑士头盔/头肩 | `x=1180-1370, y=85-265` | 必须清晰可辨，不能被右侧遮罩压黑 |
| 胸甲主体 | `x=1110-1415, y=190-620` | 是第一视觉锚点，应保留高光轮廓 |
| 法杖/右臂 | `x=1375-1535, y=330-610` | 需要在用户气泡后仍可见 |
| 披风左延展 | `x=660-1230, y=270-730` | 应穿过消息面板背后，增强深度 |
| 下摆/地面 | `x=1000-1510, y=610-941` | 输入区背后应能隐约看到，不要全黑 |
| 圆环符文 | `x=910-1580, y=15-655` | 右半背景层次的关键，不应被径向金色光斑覆盖 |

参考图遮罩规律：

1. 左侧 0-320px 需要更暗，但不是全黑，仍能看到纹理。
2. 中间 400-1000px 是消息阅读区，面板负责可读性，页面遮罩不应过重。
3. 人物区域 1050-1500px 遮罩最轻，保留胸甲和头肩轮廓。
4. 底部 800-941px 有自然暗角，但输入框外部仍可透出地面和披风。
5. 人工火星不应叠加到很显眼，背景图已有足够颗粒和火星。

建议替换 `body` 背景遮罩：

```css
html[data-theme='wasteland'] body {
  background-color: #080a09;
  background-image:
    linear-gradient(
      90deg,
      rgba(3, 5, 5, 0.72) 0%,
      rgba(3, 5, 5, 0.58) 18%,
      rgba(3, 5, 5, 0.34) 43%,
      rgba(3, 5, 5, 0.08) 66%,
      rgba(3, 5, 5, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.02) 32%,
      rgba(0, 0, 0, 0.12) 72%,
      rgba(0, 0, 0, 0.44) 100%
    ),
    url('assets/themes/wasteland/background.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
```

建议删除当前 `body::after` 人工火星层。若必须保留，`opacity` 不应超过 `0.18`，且不要动画漂移。

## 4. 当前 CSS 最不相似的 10 项

| 排名 | 影响 | 当前位置 | 不相似点 | 返工方向 |
|---:|---|---|---|---|
| 1 | 极高 | `style.css:7498-7502` | 页面遮罩太黑，左侧 `0.96`、中部 `0.68`、底部 `0.74`，人物和纹理被压扁 | 降低遮罩，人物区保持 `0.04-0.18` |
| 2 | 极高 | `style.css:805`、`7589-7594`、`7664-7665`、`7722-7723`、`7739-7744`、`7775-7780`、`7831-7838`、`7942-7948`、`7998-8009` | `clip-path` 被扩散到消息、弹层、输入、会话项、tool-call、按钮、搜索框和欢迎卡片 | 只给新会话按钮、输入外框少量角饰；其余删除 |
| 3 | 极高 | `style.css:7831-7838` | 主按钮边框 `rgba(...,0.64)` 加切角和阴影，变成厚金属按钮 | 边框降到 `0.42-0.48`，阴影删掉，角饰局部化 |
| 4 | 高 | `style.css:7541-7548` | 侧栏 `0.92` 实心黑 + `18px 48px` 侧向阴影，参考图更轻、更透 | 侧栏背景降到 `0.72-0.78`，只留内侧细线 |
| 5 | 高 | `style.css:7566-7572` | 顶栏和输入区阴影过强，形成上下厚压条 | 顶栏保留底线；输入区背景透明、无整条阴影 |
| 6 | 高 | `style.css:7584-7617` | 消息面板硬切角、暗底 `0.88-0.90`、外阴影重，不像参考图的薄线半透明面板 | 圆角 `8px`，背景 `0.64-0.70`，删除外阴影 |
| 7 | 高 | `style.css:7716-7726` | 输入框高度 `54px` 偏矮，背景 `0.91` 偏实，阴影厚；参考图为约 `806x73` 的长金属薄框 | `max-width:806px`，`min-height:72px`，背景 `0.76`，轻内线 |
| 8 | 中高 | `style.css:7739-7759` | 会话项每条切角，active 有 `inset 3px` 和外阴影，列表太卡片化 | 普通项无边框，active 仅 1px 旧金线和轻背景 |
| 9 | 中高 | `style.css:7775-7807` | tool-call 独立卡片化，`border-left:2px`、切角、阴影抢走消息层级 | 作为消息内部嵌套细线框，去左粗边和阴影 |
| 10 | 中 | `style.css:7913-7968` | 统一 22-24px bitmap pseudo-icon 并隐藏 SVG，图标偏大偏实 | 图标降到 `16-18px`，优先保留线性符号或降低 bitmap opacity |

补充布局偏差：

- `style.css:31-32` 当前全局 `--sidebar-width: 280px`、`--header-height: 52px`，参考图约为 `316px` 和 `57px`。
- mock 使用 `html data-theme="wasteland"` 并直接引入当前 CSS，因此该比例偏差会直接出现在预览里。

## 5. 可直接落成 CSS 的具体值

### 5.1 主题变量

```css
html[data-theme='wasteland'] {
  --sidebar-width: 316px;
  --header-height: 57px;

  --wasteland-iron: #080a09;
  --wasteland-panel: rgba(8, 10, 10, 0.66);
  --wasteland-panel-soft: rgba(8, 10, 10, 0.52);
  --wasteland-panel-strong: rgba(7, 9, 9, 0.74);
  --wasteland-gold: #b98b4b;
  --wasteland-gold-bright: #dfb46c;
  --wasteland-line: rgba(185, 139, 75, 0.30);
  --wasteland-line-strong: rgba(223, 180, 108, 0.44);
  --wasteland-corner: rgba(231, 185, 109, 0.58);
  --shadow-strong: 0 14px 34px rgba(0, 0, 0, 0.30);
}
```

### 5.2 侧栏和顶部

```css
html[data-theme='wasteland'] .sidebar {
  background:
    linear-gradient(180deg, rgba(185, 139, 75, 0.035), transparent 24%),
    rgba(5, 7, 7, 0.76);
  border-right: 1px solid rgba(185, 139, 75, 0.32);
  box-shadow: inset -1px 0 rgba(255, 230, 180, 0.08);
  backdrop-filter: blur(4px) saturate(0.9);
}

html[data-theme='wasteland'] :is(.sidebar-header, .sidebar-footer, .chat-header) {
  background: rgba(7, 9, 9, 0.46);
  border-color: rgba(185, 139, 75, 0.26);
  backdrop-filter: blur(3px) saturate(0.9);
}

html[data-theme='wasteland'] .chat-header {
  box-shadow: none;
}
```

### 5.3 消息面板

```css
html[data-theme='wasteland'] .messages {
  padding-top: 29px;
  padding-bottom: 20px;
}

html[data-theme='wasteland'] .msg {
  max-width: min(74%, 997px);
}

html[data-theme='wasteland'] .msg.user {
  max-width: min(42%, 480px);
}

html[data-theme='wasteland'] .msg-bubble {
  border: 1px solid rgba(185, 139, 75, 0.28);
  border-radius: 8px;
  clip-path: none;
  backdrop-filter: blur(4px) saturate(0.9);
  box-shadow: inset 0 1px rgba(255, 230, 180, 0.05);
}

html[data-theme='wasteland'] :is(
  .msg.assistant .msg-bubble,
  .msg.cross-conversation .msg-bubble,
  .msg.cross-conversation-reply .msg-bubble,
  .msg.system .msg-bubble[data-tone='info']
) {
  background: rgba(8, 10, 10, 0.66);
  border-color: rgba(185, 139, 75, 0.28);
  box-shadow: inset 0 1px rgba(255, 230, 180, 0.05);
}

html[data-theme='wasteland'] .msg.user .msg-bubble {
  background: rgba(38, 28, 19, 0.62);
  border-color: rgba(196, 154, 90, 0.42);
  box-shadow: inset 0 1px rgba(255, 230, 180, 0.06);
}
```

### 5.4 输入区

```css
html[data-theme='wasteland'] .input-area {
  background: transparent;
  border-top: 0;
  box-shadow: none;
  padding: 10px 16px 36px;
}

html[data-theme='wasteland'] .input-wrapper {
  position: relative;
  width: min(806px, calc(100% - 48px));
  max-width: 806px;
  min-height: 72px;
  padding: 10px 14px;
  border: 1px solid rgba(185, 139, 75, 0.46);
  border-radius: 6px;
  clip-path: none;
  background: rgba(7, 8, 8, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 180, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px) saturate(0.9);
}

html[data-theme='wasteland'] .input-wrapper::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 62px;
  height: 28px;
  transform: translateX(-50%);
  background:
    linear-gradient(135deg, transparent 42%, rgba(223, 180, 108, 0.58) 43% 47%, transparent 48%),
    linear-gradient(45deg, transparent 42%, rgba(223, 180, 108, 0.58) 43% 47%, transparent 48%);
  opacity: 0.72;
  pointer-events: none;
}
```

### 5.5 侧栏项、按钮和 tool-call

```css
html[data-theme='wasteland'] .session-item {
  border: 1px solid transparent;
  border-radius: 4px;
  clip-path: none;
  box-shadow: none;
}

html[data-theme='wasteland'] .session-item:hover {
  background: rgba(185, 139, 75, 0.08);
  border-color: rgba(185, 139, 75, 0.22);
  transform: none;
}

html[data-theme='wasteland'] .session-item.active {
  background: rgba(43, 31, 20, 0.50);
  border-color: rgba(196, 154, 90, 0.46);
  box-shadow: inset 1px 0 rgba(223, 180, 108, 0.48);
}

html[data-theme='wasteland'] :is(.tool-call, .ccweb-prompt-card) {
  border: 1px solid rgba(185, 139, 75, 0.30);
  border-radius: 4px;
  background: rgba(8, 10, 10, 0.58);
  clip-path: none;
  box-shadow: none;
}

html[data-theme='wasteland'] :is(.new-chat-btn, .new-chat-arrow) {
  min-height: 48px;
  border: 1px solid rgba(196, 154, 90, 0.48);
  border-radius: 2px;
  background: rgba(10, 12, 11, 0.68);
  color: #dfbd82;
  box-shadow: inset 0 1px rgba(255, 230, 180, 0.07);
}

html[data-theme='wasteland'] :is(.attach-btn, .send-btn, .abort-btn)::before {
  width: 18px;
  height: 18px;
  opacity: 0.82;
}
```

## 6. 建议删除或替换的当前规则

优先删除这些规则，而不是在后面继续覆盖：

| 当前位置 | 建议动作 | 原因 |
|---|---|---|
| `style.css:7498-7502` | 替换整个 `background-image` | 当前遮罩太黑，径向金光也会污染符文圆环 |
| `style.css:7509-7522` | 删除 `body::after` | 人工火星层太显眼，且动画会让背景像装饰层 |
| `style.css:7546` | 删除侧栏大外阴影 | 参考图没有厚侧投影 |
| `style.css:7566-7572` | 删除顶栏/输入区外阴影 | 上下压条感过强 |
| `style.css:7589-7594` | 删除 `border-radius:0` 和 `clip-path`，降低 blur | 消息面板应轻圆角、半透明 |
| `style.css:7596-7617` | 替换用户/assistant 背景和阴影 | 当前背景太实、阴影太厚 |
| `style.css:7659-7667` | 删除弹层全局 `clip-path` 和 `--shadow-strong` 套用 | 弹层变成厚金属卡片 |
| `style.css:7670-7714` | 拆分大范围组件组 | 所有组件共用一个卡片底会形成卡片堆叠 |
| `style.css:7716-7726` | 替换输入框规则 | 高度、背景透明度、阴影、切角都偏离 |
| `style.css:7728-7736` | 降低 focus/drag 阴影 | 参考图状态变化克制，不应出现 3px 光圈 |
| `style.css:7739-7759` | 删除普通会话项切角、hover 位移、active 厚阴影 | 列表应是薄线面板，不是卡片列表 |
| `style.css:7775-7781` | 删除 tool-call 左粗边、切角和阴影 | tool-call 应嵌在消息面板内部 |
| `style.css:7821-7858` | 替换按钮组厚金边、clip 和 hover 光圈 | 当前最像“游戏按钮皮肤”，不似参考图薄金属线 |
| `style.css:7913-7968` | 缩小或移除统一 pseudo bitmap 图标规则 | 图标过大过实，且隐藏 SVG 后细线感丢失 |
| `style.css:7986-8010` | 删除欢迎卡片厚框、切角和大阴影 | 欢迎页不能另起一套卡片重装饰 |
| `style.css:8068-8071` | 删除 `wastelandEmberDrift` | 若删除 `body::after`，该动画也应删除 |
| `style.css:8074-8087` | 替换移动端重遮罩和 `0.97` 侧栏背景 | 移动端也不应变成纯黑抽屉 |

## 7. 执行顺序建议

1. 先改布局变量：`--sidebar-width:316px`、`--header-height:57px`。
2. 再改 `body` 遮罩，确保骑士主体、符文圆环、披风透出来。
3. 删除全组件 `clip-path`，只保留主按钮和输入框的局部角饰。
4. 降低所有面板背景 alpha 和外阴影，统一回 1px 旧金线。
5. 最后再处理图标尺寸和 active/hover 状态。

如果只做配色微调，不删厚边、全局切角和重阴影，mock 仍会偏离参考图。