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

@@ -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');
 }
 

frontends/desktop/static/index.html

@@ -138,7 +138,6 @@
         <section class="page" data-page="channels">
           <div class="page-pad">
             <div class="page-title" data-i18n="page.channels.title"></div>
-            <div class="page-sub" data-i18n="page.channels.sub"></div>
             <div class="list" id="chan-list"></div>
             <div class="list-empty" id="chan-empty" hidden data-i18n="ch.empty"></div>
           </div>
@@ -148,7 +147,6 @@
         <section class="page" data-page="status">
           <div class="page-pad">
             <div class="page-title" data-i18n="page.status.title"></div>
-            <div class="page-sub" data-i18n="page.status.sub"></div>
             <div class="list" id="status-list"></div>
           </div>
         </section>
@@ -171,7 +169,6 @@
         <section class="page" data-page="token">
           <div class="page-pad">
             <div class="page-title" data-i18n="page.token.title"></div>
-            <div class="page-sub" data-i18n="page.token.sub"></div>
             <div class="tok-filter">
               <label data-i18n="tok.from"></label>
               <input type="datetime-local" id="tok-since">

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; }