cc-web/.planning/warframe-theme-rework/findings.md

Warframe 主题返工发现

用户反馈根因

• 上一版将原画放入 --page-background，导致图片同时出现在欢迎态和阅读态；图片没有 独立布局职责，只是壁纸。
• 上一版对比度计算使用纯色变量，没有计算半透明聊天表面叠加图片后的实际背景， 因此结果不能反映用户真实阅读体验。
• 暖纸色被过度用于正文，长段内容缺少接近中性的高亮文字，视觉疲劳明显。

新构图方向

• 阅读态：实色主背景、实色消息表面、实色输入表面，图片完全退场。
• 欢迎态：利用 .welcome-msg 建立左侧操作信息与右侧完整竖幅的单一构图，不给图片 叠加正文。
• 移动端：欢迎态单列，完整图片作为独立区块；聊天状态不加载可见图片层。

作品检索状态

• https://displate.com/search?q=warframe 直接访问被 Cloudflare challenge 拦截。
• DuckDuckGo HTML 公开索引连接超时。
• 用户已提供 3 个 Displate CDN 候选和 Pinterest Warframe poster 页面；后续以这些 候选为主，不再把拿到产品落地页作为前置条件。
• Pinterest ideas 页面直连在 30 秒后超时，无法可靠提取更多公开候选；停止自动搜图， 避免绕过站点限制或产生噪声。

用户提供的 Displate CDN 候选

1. 候选 1（480×673）：红橙落日群像，四个角色、多重能量效果，视觉冲击最强但焦点 过多；只能作为完全独立海报，不适合与界面文字共享区域，且与现有暗金色板偏离。
2. 候选 2（480×672）：单角色近景、浅蓝建筑背景，轮廓清晰、构图安静，最适合 左右分区；采用它意味着主题应整体转为冷蓝钢铁色，不能继续沿用暗金棕。
3. 候选 3（480×672）：WARFRAME THE SACRIFICE 深青暗金群像，自带完整标题和 海报层级；与现有暗金主题最协调，适合欢迎态右侧完整立幅，禁止铺到阅读区背后。

上述 CDN 图仅下载到 /tmp 做只读分析，未写入项目。

多图参考板决策

• 用户明确说明三张 CDN 图用于“参考”，不是替换主题原图；此前把“继续”解释为授权 替换是错误假设，已撤销。项目继续使用最初上传的 1000×1500 原图。
• 参考 1：借鉴强对角线、能量方向和前中后景层次；不借用高饱和红色和群像拥挤布局。
• 参考 2：借鉴单角色清晰轮廓、主体与浅色负空间分离；不把主题整体改成冷蓝。
• 参考 3：借鉴深青暗金材质、完整框景和垂直层级；不复制海报文字或群像素材。
• 综合结果：原图作为完整独立立幅；欢迎态用明确的框景、负空间和纵向层级组织； 阅读态图片完全退场。三张参考图均不进入 public/assets。

代码定位

• codebase-memory MCP 仍返回 Transport closed，已降级为 rg/sed 精确定位，不重复 调用失效通道。
• 欢迎态由 buildWelcomeMarkup() 生成稳定的 .welcome-msg，静态首页也使用同一结构； 可以用 .messages:has(> .welcome-msg) 限定欢迎构图，无需修改多处分支状态。
• 上一版图片同时存在于 --page-background、--login-background、.chat-main 移动规则 和主题预览；返工后原图只保留在欢迎态立幅与主题选择器预览两处。

真实表面对比度体系

• 主背景：#0b0d0e；面板/助手消息：#171a1c；用户消息：#34271f；代码背景： #101214，全部使用不透明实色。
• 主文字 #f2eee5：对主背景 16.82:1，对面板 15.10:1。
• 次文字 #d5cbb8：对主背景 12.12:1，对面板 10.88:1。
• 弱文字 #aea38f：对主背景 7.82:1，对面板 7.02:1。
• 暗色按钮字 #111416 对暗金按钮 #d4bd83 为 10.05:1。
• 用户消息文字/背景 12.46:1；代码文字/背景 14.44:1；危险与成功状态对面板 分别为 7.54:1、9.31:1。
• 禁用态使用 0.68 透明度，次文字在面板上的实际合成对比度为 5.65:1；不再沿用 0.56 导致的 4.26:1。

欢迎态实现

• buildWelcomeMarkup 与静态首页统一为 .welcome-copy + .welcome-art 结构。
• gilded 主题用 .messages:has(> .welcome-msg) 建立欢迎态专属布局：桌面文字/立幅双区， 移动端立幅在上、操作说明在下。
• --page-background 与 --login-background 已改为实色，移动 .chat-main 图片背景已 删除；原图只在 .welcome-art 与主题选择器小预览出现。
• 欢迎文案用暗金竖线组织，原图 contain 完整展示；没有增加卡片或在图上叠文字。

阅读表面实现

• gilded 变量已切换为中性暖白文字、墨黑主背景和不透明面板；暗金只用于焦点、选中 边缘、欢迎态竖线和主按钮。
• 导航、会话 hover/active、聊天头部、输入区、搜索、消息气泡、命令菜单、选项菜单、 行内代码与工具代码均使用实色，不再依赖图片或半透明模糊层。
• 主按钮由渐变改为单一暗金实色；助手/用户消息使用明确不同但都高对比的实色表面。
• placeholder 使用弱文字且 opacity=1；所有禁用表单控件统一 opacity=0.68。

响应式几何

• 1440×900：主区扣除侧栏和欢迎 padding 后宽 1056.3px，双列最小需求 652px；原图 contain 约 360×540，无横向溢出。
• 1024×768：可用宽 670.3px，双列最小需求 631.2px；原图约 307.2×460.8，仍保持 独立完整立幅。
• 390×844：切换单列，可用宽 362px，原图约 253.2×379.8；图片在上、操作说明在下， 输入区位于 .messages-wrap 外部，不被图片挤压，无横向溢出。
• 移动头部、输入区和输入框均为完全不透明实色；1024 视口降低欢迎最小高度，避免为 海报制造无意义滚动。

回归契约

• 动态/静态欢迎 DOM 必须同时包含 .welcome-copy 与 .welcome-art，并移除旧花朵占位。
• 原图 URL 必须在 CSS 中恰好出现两次：欢迎立幅和主题选择器预览；变量块和 .chat-main 禁止出现图片 URL。
• 项目 UI 文件禁止出现 cdn.displate.com，保证三张参考图不被复制进产品。
• 自动计算主/次/弱文字和主按钮真实对比度，并断言欢迎态桌面/移动结构、不透明表面、 禁用态透明度、减少动态偏好和缓存版本。
• gilded-theme 专项回归通过。

独立审查第 1 轮

• 769–980px 视口扣除 280px 侧栏和消息 padding 后，双列最小宽度可能不足；欢迎态应 在 980px 以下提前切单列，1024×768 仍保留双列。
• .msg.user .msg-attachment-card/thumb 的特异性高于暗色共用层，仍使用旧半透明规则； 需要 gilded 专属实色附件卡与缩略图覆盖。
• 回归只禁止 cdn.displate.com 不够；应禁止主题 CSS 中任何远程 url(http...)，并 覆盖 Displate/Pinterest/pinimg 参考域名。
• 完整回归在恢复既有 Claude 欢迎短语后已通过。

审查修复结果

• 欢迎态在 max-width: 980px 提前切换单列，覆盖所有可能塞不下双列的窄桌面； 1024×768 继续使用双区。
• 用户消息附件卡、hover、缩略图、占位/说明文字、名称和过期态均增加 gilded 高特异性 实色覆盖，消除旧透明规则。
• 回归禁止 Displate/Pinterest/pinimg 域名进入 UI 文件，并禁止 Warframe 主题 CSS 使用 任意远程 url(http...)。
• 修复后专项与完整回归再次通过；独立复核确认原图未替换、参考图未进入项目、图片 仅用于欢迎态立幅和主题选择器预览，普通聊天与所有阅读表面均保持实色高对比。
• 当前服务已实际返回 20260717-warframe-readable 版本首页和原始主题图；环境仍无 Playwright/Chromium，真实浏览器视觉效果保留为用户刷新后的人工复核项。