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 偏矮，阴影偏重

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

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 背景遮罩：

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 主题变量

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 侧栏和顶部

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 消息面板

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 输入区

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

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 仍会偏离参考图。