From 5fe5401ec6c575ef0b46ad3ebdb680cd7fee7e16 Mon Sep 17 00:00:00 2001 From: dd3xp Date: Thu, 21 May 2026 17:46:47 +0800 Subject: [PATCH] style(desktop): drop hardcoded colors/strings, remove placeholder page-subs - Move pricing-tooltip text in modelPriceTip to i18n keys (tok.priceInput/Output/CacheW/CacheR/pricingUnknown), drop lang === 'zh' ? : ternaries - Replace remaining hex literals in selectors with CSS vars: chan-log-pre and mykey-editor backgrounds now respect --field-bg / --card (dark mode no longer shows white panels) - Introduce --sample-light-* / --sample-dark-* vars for appearance preview cards (intentionally static, do not follow current theme) - Remove placeholder page-sub on Channels / Status / Token pages (annotation copy, never meant to ship); keep on Collab page since that page is still unimplemented --- frontends/desktop/static/app.js | 16 +++++++++++----- frontends/desktop/static/index.html | 3 --- frontends/desktop/static/styles.css | 22 +++++++++++++++------- 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/frontends/desktop/static/app.js b/frontends/desktop/static/app.js index eb662845..fbc474b1 100644 --- a/frontends/desktop/static/app.js +++ b/frontends/desktop/static/app.js @@ -298,6 +298,9 @@ const I18N = { 'tok.total': '累计 token', 'tok.cost': '估算成本', 'tok.today': '今日 token', 'tok.colSession': '会话', 'tok.colIn': '输入', 'tok.colOut': '输出', 'tok.colCacheW': '缓存写入', 'tok.colCache': '缓存读取', 'tok.colCost': '成本', 'tok.from': '从', 'tok.to': '到', 'tok.reset': '重置', 'tok.noData': '暂无记录', + 'tok.pricingUnknown': '⚠ 此模型计费规则尚未明确，按默认估算', + 'tok.priceInput': '输入: $', 'tok.priceOutput': '输出: $', + 'tok.priceCacheW': '缓存写入: $', 'tok.priceCacheR': '缓存读取: $', 'presetPrompt.goal': '进入 Goal 模式：读 L3 goal mode SOP，自主达成我接下来描述的目标。', 'presetPrompt.planMode': '进入 Plan 模式：读 L3 plan mode SOP，按其中的探索→规划→执行→验证流程完成我接下来描述的任务。', 'presetPrompt.explore': '进入自主探索模式：自动浏览并定期向我汇总要点。', @@ -387,6 +390,9 @@ const I18N = { 'tok.total': 'Total tokens', 'tok.cost': 'Est. cost', 'tok.today': 'Today tokens', 'tok.colSession': 'Session', 'tok.colIn': 'Input', 'tok.colOut': 'Output', 'tok.colCacheW': 'Cache write', 'tok.colCache': 'Cache read', 'tok.colCost': 'Cost', 'tok.from': 'From', 'tok.to': 'To', 'tok.reset': 'Reset', 'tok.noData': 'No records', + 'tok.pricingUnknown': '⚠ Pricing not confirmed, using defaults', + 'tok.priceInput': 'Input: $', 'tok.priceOutput': 'Output: $', + 'tok.priceCacheW': 'Cache write: $', 'tok.priceCacheR': 'Cache read: $', 'presetPrompt.goal': 'Enter Goal mode: read the L3 goal-mode SOP and autonomously achieve the goal I describe next.', 'presetPrompt.planMode': 'Enter Plan mode: read the L3 plan-mode SOP and follow its explore→plan→execute→verify flow for the task I describe next.', 'presetPrompt.explore': 'Enter auto-explore mode: browse autonomously and periodically summarize key points to me.', @@ -1657,11 +1663,11 @@ function modelPriceTip(model) { const cacheReadRate = isClaudeOrDS ? 0.1 : 0.5; const cacheWriteRate = isClaudeOrDS ? 1.25 : 1.0; const lines = []; - if (!known) lines.push(lang === 'zh' ? '⚠ 此模型计费规则尚未明确，按默认估算' : '⚠ Pricing not confirmed, using defaults'); - lines.push((lang === 'zh' ? '输入: $' : 'Input: $') + p[0] + ' /M tokens'); - lines.push((lang === 'zh' ? '输出: $' : 'Output: $') + p[1] + ' /M tokens'); - lines.push((lang === 'zh' ? '缓存写入: $' : 'Cache write: $') + (p[0] * cacheWriteRate).toFixed(2) + ' /M tokens'); - lines.push((lang === 'zh' ? '缓存读取: $' : 'Cache read: $') + (p[0] * cacheReadRate).toFixed(2) + ' /M tokens'); + if (!known) lines.push(t('tok.pricingUnknown')); + lines.push(t('tok.priceInput') + p[0] + ' /M tokens'); + lines.push(t('tok.priceOutput') + p[1] + ' /M tokens'); + lines.push(t('tok.priceCacheW') + (p[0] * cacheWriteRate).toFixed(2) + ' /M tokens'); + lines.push(t('tok.priceCacheR') + (p[0] * cacheReadRate).toFixed(2) + ' /M tokens'); return lines.join('\n'); } diff --git a/frontends/desktop/static/index.html b/frontends/desktop/static/index.html index c3747d72..cc0d7427 100644 --- a/frontends/desktop/static/index.html +++ b/frontends/desktop/static/index.html @@ -138,7 +138,6 @@
-
@@ -148,7 +147,6 @@
-
@@ -171,7 +169,6 @@
-
diff --git a/frontends/desktop/static/styles.css b/frontends/desktop/static/styles.css index e311b3ba..290401d9 100644 --- a/frontends/desktop/static/styles.css +++ b/frontends/desktop/static/styles.css @@ -65,6 +65,14 @@ --switch-off:#cfd4de; --dot-idle:#c2c7d0; + /* —— 外观切换页的样本色（不跟随当前主题，固定为 light/dark 实际配色） —— */ + --sample-light-bg:#f4f5f7; + --sample-light-panel:#ffffff; + --sample-light-line:#e9eaee; + --sample-dark-bg:#0d1117; + --sample-dark-panel:#161b22; + --sample-dark-line:#30363d; + /* —— 阴影 / 遮罩 —— */ --overlay:#14192861; --shadow:0 1px 2px #1419280a, 0 8px 24px #1419280d; @@ -207,19 +215,19 @@ body{ background:var(--bg); color:var(--txt); font-size:13px; overflow:hidden; } position:relative; overflow:hidden; } .appear-preview-light{ - background:linear-gradient(180deg, #f4f5f7 0%, #f4f5f7 42%, #ffffff 42%, #ffffff 100%); + background:linear-gradient(180deg, var(--sample-light-bg) 0%, var(--sample-light-bg) 42%, var(--sample-light-panel) 42%, var(--sample-light-panel) 100%); } .appear-preview-light::after{ content:''; position:absolute; left:10%; top:52%; width:55%; height:7px; - border-radius:4px; background:#e9eaee; + border-radius:4px; background:var(--sample-light-line); } .appear-preview-dark{ - background:linear-gradient(180deg, #0d1117 0%, #0d1117 42%, #161b22 42%, #161b22 100%); - border-color:#30363d; + background:linear-gradient(180deg, var(--sample-dark-bg) 0%, var(--sample-dark-bg) 42%, var(--sample-dark-panel) 42%, var(--sample-dark-panel) 100%); + border-color:var(--sample-dark-line); } .appear-preview-dark::after{ content:''; position:absolute; left:10%; top:52%; width:55%; height:7px; - border-radius:4px; background:#30363d; + border-radius:4px; background:var(--sample-dark-line); } .appear-name{ font-size:12px; font-weight:600; color:var(--txt-2); } .appear-card.sel .appear-name{ color:var(--blue); } @@ -572,7 +580,7 @@ html[data-boot-has-sessions] .chat-start{ display:none !important; } .chan-log-pre{ max-height:360px; overflow:auto; margin:0; font-family:inherit; font-size:13px; line-height:1.5; - color:var(--txt-2); background:#ffffff; + color:var(--txt-2); background:var(--field-bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; white-space:pre-wrap; word-break:break-word; } @@ -586,7 +594,7 @@ html[data-boot-has-sessions] .chat-start{ display:none !important; } flex:1; min-height:420px; width:100%; padding:0; margin:0; font-family:inherit; font-size:13px; line-height:1.5; - color:var(--txt); background:#ffffff; + color:var(--txt); background:var(--card); border:none; border-radius:0; resize:vertical; outline:none; } .mykey-editor:focus{ outline:none; }