131 lines
7.8 KiB
Markdown
131 lines
7.8 KiB
Markdown
# 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，真实浏览器视觉效果保留为用户刷新后的人工复核项。
|