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

Wasteland 图标重做审计

审计时间：2026-07-17

输入资产：

• 图标板：sessions/_attachments/43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp
• 完整界面参考：sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp
• 现有图标：public/assets/themes/wasteland/icons/*.png
• 当前样式：public/style.css

结论：主 UI 控件不建议继续直接使用现有原色 PNG。推荐改为“清理后的 24px 单色 mask + CSS 暗金材质”，再按控件容器设置 16/18/20/24px 的显示尺寸。status 这类带绿色状态语义、头像/主题装饰类图标可以保留原色，但要重新裁切对应规格。

1. 参考界面实际显示尺寸

图标板原尺寸为 1672x941，每张卡片标注了 16px / 24px / 32px 三档逻辑使用尺寸。需要注意：标注是设计目标尺寸，不等同于源图中的物理像素；当前切片来自 32px 档展示图，源图里主体通常有 49-70px 宽高。

完整参考图同为 1672x941。按原尺寸查看和局部放大后，主要控件的实际显示尺寸约为：

区域	控件	参考图容器尺寸	图标视觉主体	对齐观察
侧栏顶部	新会话主按钮	229x48	18-20px	图标+文字整体居中，图标不贴左边
侧栏顶部	新会话下拉按钮	51x48	10-12px 宽、7-9px 高	小三角居中
侧栏顶部	搜索框	288x34	18-20px	图标左距约 13px，图标到文字约 10px
项目列表	折叠/展开三角	行高约 44-46px	10-12px	左侧垂直居中
项目列表	新建圆形加号	约 28-30px 圆按钮	14-16px	圆按钮居中，线条要比搜索更实
输入区上方	运行状态/模式 chip	高约 30-31px	状态点约 8px，下拉约 8px	文字与图标同基线
输入区	输入框外框	约 804x70	附件 22-24px	附件没有明显方形底，靠左居中
输入区右侧	发送/队列/停止按钮	约 42x42	发送 24-28px，停止 17-20px	三个按钮等宽等高，间距约 6px
消息卡右下	小动作按钮	29-30px	14-16px	适合单色小图标，不适合复杂材质 PNG
侧栏底部	设置按钮	可点击区约 34px 高	18px	与文字标签水平对齐
侧栏底部	主题/星芒入口	可点击区约 34px 高	22-24px	星芒比齿轮略大才接近参考

当前 public/style.css 中 Wasteland 图标相关尺寸：

• .new-chat-btn::before：24x24
• .session-search::before：20x20
• .attach-btn::before / .send-btn::before / .abort-btn::before / .settings-btn::before：默认 22x22
• .settings-btn：34x34
• :is(.settings-select, .mode-select) 下拉背景：14x14
• 移动端 .attach-btn/.send-btn/.abort-btn::before：降到 20x20

主要偏差：参考图里“主按钮图标”和“输入区发送图标”不是同一套尺寸；当前 CSS 把大部分伪元素统一为 22x22，导致小动作按钮偏脏、大按钮又不够有冲击。

2. 现有 PNG 为什么显得糊、脏、比例怪

现有 PNG 全部是 64x64 RGBA，但它们不是干净矢量导出的图标，而是从有损 WebP 展示板里裁 32px 档，再透明化/统一画布得到的位图。抽检全部 17 个 PNG 后，问题集中在以下几点。

2.1 缩放链路过长

当前路径大致是：

有损 WebP 展示板
  → 裁 32px 档的放大截图区域
  → 统一输出 64x64 PNG
  → CSS 再缩到 14/20/22/24px

浏览器最后会把 64px 的半透明阴影、暗边、高光全部平均到 20-24px。图标不会变“精致”，反而会把阴影糊成灰边。

2.2 alpha 过软，缺少清晰实心主体

PNG 的非透明像素几乎都是半透明像素。统计结果显示：

• 多数图标的半透明像素占比在 96%-100%
• stop.png 也有约 92% 半透明像素
• 非透明像素平均 alpha 普遍只有 67-142/255

这说明边缘和主体都偏软。缩小时，暗边会吞掉金色高光，尤其在黑铁背景上更明显。

2.3 有效主体尺寸不一致

代表性 PNG 的 alpha 边界如下：

图标	PNG 画布	alpha 主体边界	视觉问题
new-chat.png	64x64	55x54	星芒长尖角多，缩小后中心笔画变弱
search.png	64x64	54x54	圆环+手柄复杂，20px 时手柄容易糊
attachment.png	64x64	42x54	窄高图标，被统一方形缩放后显得瘦
send.png	64x64	54x49	纸飞机横向强，22px 时尖角仍可辨但高光变灰
stop.png	64x64	54x54	填充和外框过重，小尺寸像脏方块
settings.png	64x64	54x53	齿轮齿太多，22px 以下信息密度过高
dropdown.png	64x64	54x40	横宽纵矮，放进 14x14 背景后实际只有约 14x10

同样放进 22x22 伪元素时，attachment 会显瘦，stop/settings 会显重，dropdown 会显矮，整体视觉重量不统一。

2.4 原色 PNG 不能响应 CSS 颜色状态

当前 hover/focus 主要改变 color、background-color、border-color。PNG 作为 background-image 不会跟随 color 改变，所以 hover 后按钮变亮，但图标仍是暗铜色，造成“按钮亮、图标脏”的割裂。

3. 逐控件建议尺寸与对齐

建议把“容器尺寸”和“图标主体尺寸”分开控制，不再一刀切 22x22。

控件	当前落点	建议桌面尺寸	建议移动尺寸	对齐建议
新会话	.new-chat-btn::before	20x20	18x18	.new-chat-btn 改回图标+文字整体居中，gap: 10px
新会话下拉	.new-chat-arrow::before	12x8 或 14x9	12x8	按钮 48-52px 宽，三角居中；隐藏原文本 ▾
搜索	.session-search::before	18x18 或 20x20	18x18	left: 13px，输入框 padding-left: 42px
附件	.attach-btn::before	24x24	22x22	40px 按钮内居中；不要用实心按钮底色压住图标
发送	.send-btn::before	24x24，主发送可到 26x26	22x22	桌面建议按钮 40-42px，纸飞机略向右上视觉居中
停止	.abort-btn::before	18x18 或 20x20	18x18	与发送按钮同容器，但图标主体必须小一档
设置	.settings-btn::before	18x18	18x18	34px 点击区内居中；避免 22px 齿轮过密
下拉 select	:is(.settings-select, .mode-select)	10x7 或 12x8	10x7	background-position: right 12px center；不要用 14x14 方形 PNG

补充建议：

• 消息卡角落动作按钮：容器 30x30，图标只用 14-16px mask。
• 项目折叠三角：使用 10-12px mask，不要复用 24px/32px 原色 PNG。
• 状态点/在线图标：如果要保留绿色，应单独重裁 16px 或 20px 原色图，不建议统一金色 mask。

4. 三种方案对比与推荐

方案	优点	缺点	适用范围	结论
原色 PNG	最接近图标板的金属纹理；不需要改 DOM；可保留绿色状态、头像等多色信息	当前资产来自有损截图且 alpha 过软；缩到 20px 会糊；hover/focus 不能自动变色；每个尺寸都要维护独立图片	装饰图标、状态图标、头像/主题入口、较大 32px 展示	不推荐作为主 UI 控件方案
CSS mask	形状和材质分离；可用 CSS 控制金色、hover、禁用、危险色；小尺寸更干净；同一 mask 可按控件调尺寸	会损失原图内部金属纹理；如果直接拿现有 PNG 当 mask，软 alpha 仍会残留；严格做好需要清理 mask 资产	new-chat/search/attach/send/stop/settings/dropdown 等交互控件	推荐主路径
重新裁 24px	保留原色质感；比 64px 再缩小更稳；实现成本中等	仍是位图，16px 以下会糊；hover 不能换材质；不同控件仍要分别调视觉重量	必须保留原色材质的 24px 常规按钮	可作为过渡或备用

推荐路径：

1. 主交互控件使用 CSS mask，但不要直接依赖当前软 alpha PNG；先从图标板重做清晰的 24px 单色 mask，或从现有 PNG 做阈值化/锐化后生成 icons/masks/*.png。
2. new-chat/search/attach/send/stop/settings/dropdown 全部走 mask + CSS 暗金材质。
3. status/user/theme/ai 这类多色或装饰语义保留原色，但分别重裁 16/24/32px，不要再统一 64px 后缩放。

5. CSS mask 规则建议

下面是基于当前 DOM 的精确 selector 规则。路径可以先指向现有 PNG 做验证；正式落地时建议替换为清理后的 mask 资产，例如 assets/themes/wasteland/icons/masks/send.png。

5.1 通用金色材质

html[data-theme='wasteland'] {
  --waste-icon-gold:
    radial-gradient(circle at 32% 22%, rgba(255, 244, 196, 0.98) 0 10%, transparent 32%),
    linear-gradient(135deg, #fff0bd 0%, #dfbd82 28%, #c49a5a 48%, #8f592b 72%, #f0d7aa 100%);
  --waste-icon-gold-muted:
    linear-gradient(135deg, #ead7ad 0%, #c49a5a 44%, #7b4c27 100%);
  --waste-icon-danger:
    linear-gradient(135deg, #f1b68d 0%, #b96849 48%, #6f2f24 100%);
  --waste-icon-shadow:
    drop-shadow(0 0 2px rgba(223, 189, 130, 0.42))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.82));
}

html[data-theme='wasteland'] :is(
  .new-chat-btn,
  .new-chat-arrow,
  .attach-btn,
  .send-btn,
  .abort-btn,
  .settings-btn
)::before,
html[data-theme='wasteland'] .session-search::before {
  content: '';
  display: block;
  flex: 0 0 auto;
  background: var(--waste-icon-gold);
  filter: var(--waste-icon-shadow);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

5.2 new-chat

html[data-theme='wasteland'] .new-chat-btn {
  justify-content: center;
  gap: 10px;
  padding-inline: 16px;
}

html[data-theme='wasteland'] .new-chat-btn .new-chat-glyph {
  display: none;
}

html[data-theme='wasteland'] .new-chat-btn::before {
  width: 20px;
  height: 20px;
  -webkit-mask-image: url('assets/themes/wasteland/icons/new-chat.png');
  mask-image: url('assets/themes/wasteland/icons/new-chat.png');
}

5.3 search

html[data-theme='wasteland'] .session-search::before {
  position: absolute;
  left: 13px;
  top: 50%;
  z-index: 1;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-image: url('assets/themes/wasteland/icons/search.png');
  mask-image: url('assets/themes/wasteland/icons/search.png');
}

html[data-theme='wasteland'] .session-search-input {
  padding-left: 42px;
}

5.4 attach

html[data-theme='wasteland'] .attach-btn::before {
  width: 24px;
  height: 24px;
  -webkit-mask-image: url('assets/themes/wasteland/icons/attachment.png');
  mask-image: url('assets/themes/wasteland/icons/attachment.png');
}

5.5 send

html[data-theme='wasteland'] .send-btn::before {
  width: 24px;
  height: 24px;
  -webkit-mask-image: url('assets/themes/wasteland/icons/send.png');
  mask-image: url('assets/themes/wasteland/icons/send.png');
}

html[data-theme='wasteland'] .send-btn:hover::before {
  background: var(--waste-icon-gold);
  filter:
    drop-shadow(0 0 4px rgba(223, 189, 130, 0.58))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.82));
}

5.6 stop

html[data-theme='wasteland'] .abort-btn::before {
  width: 18px;
  height: 18px;
  background: var(--waste-icon-danger);
  -webkit-mask-image: url('assets/themes/wasteland/icons/stop.png');
  mask-image: url('assets/themes/wasteland/icons/stop.png');
}

5.7 settings

html[data-theme='wasteland'] .settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 0;
}

html[data-theme='wasteland'] .settings-btn::before {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url('assets/themes/wasteland/icons/settings.png');
  mask-image: url('assets/themes/wasteland/icons/settings.png');
}

5.8 dropdown

new-chat-arrow 是普通按钮，可以直接用 mask：

html[data-theme='wasteland'] .new-chat-arrow {
  font-size: 0;
  line-height: 0;
}

html[data-theme='wasteland'] .new-chat-arrow::before {
  width: 12px;
  height: 8px;
  background: var(--waste-icon-gold-muted);
  -webkit-mask-image: url('assets/themes/wasteland/icons/dropdown.png');
  mask-image: url('assets/themes/wasteland/icons/dropdown.png');
}

settings-select 和 mode-select 是原生 select，当前 DOM 没有外层专用 wrapper，不能安全地只给箭头使用 ::before mask。当前结构下推荐继续用金色 SVG 背景；如果强制用 CSS mask，需要新增 wrapper 或自定义 select 结构。

当前 DOM 兼容规则：

html[data-theme='wasteland'] :is(.settings-select, .mode-select) {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.75 11 1.25Z' fill='%23dfbd82' stroke='%238f592b' stroke-width='0.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
}

html[data-theme='wasteland'] .settings-select {
  background-position: right 12px center;
}

html[data-theme='wasteland'] .mode-select {
  background-position: right 10px center;
}

若后续允许改 DOM，建议把 select 放进 .select-shell，由 .select-shell::after 承载 dropdown mask，这样文本和箭头可以完全分层。

5.9 移动端尺寸

@media (max-width: 560px) {
  html[data-theme='wasteland'] .new-chat-btn::before,
  html[data-theme='wasteland'] .session-search::before,
  html[data-theme='wasteland'] .settings-btn::before {
    width: 18px;
    height: 18px;
  }

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

  html[data-theme='wasteland'] .abort-btn::before {
    width: 18px;
    height: 18px;
  }
}

6. 实施优先级

1. 先把 new-chat/search/attach/send/stop/settings/new-chat-arrow 改成 mask 方案，解决主路径视觉脏和 hover 不一致。
2. 同步把 select 下拉从 dropdown.png 改成金色 SVG 背景，尺寸降到 12x8 或 10x7。
3. 再生成清理后的 mask 资产，替换当前 PNG mask 源。清理标准是：去掉暗色投影，只保留形状 alpha；小尺寸下需要比原图更粗、更少内部细节。
4. 最后再决定是否为 status/user/theme/ai 重裁原色 16/24/32px，这些不应阻塞主交互控件修复。