让技能、库、壳和统计页在首屏套用主题，并在页内滚动而不是整页被撑开。

技能池说明改为按本局清单取用能力。

Co-authored-by: Cursor <cursoragent@cursor.com>

web/libraries.css

@@ -6,15 +6,20 @@
 
 .lib-body {
   display: grid;
-  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
+  grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
   gap: 16px;
-  align-items: start;
-  padding: 0 4px 24px;
+  align-items: stretch;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0 20px 16px;
 }
 
 .lib-list-pane,
 .lib-work-pane {
   min-width: 0;
+  min-height: 0;
+  overflow: auto;
 }
 
 .lib-work-card {
@@ -42,7 +47,7 @@
   border: 1px solid var(--st-border);
   border-radius: 6px;
   padding: 10px 12px;
-  background: #fafafa;
+  background: var(--st-bg);
   margin: 12px 0;
   font-size: 13px;
 }
@@ -80,6 +85,8 @@
   border: 1px solid var(--st-border);
   border-radius: 6px;
   padding: 8px 10px;
+  background: var(--st-surface);
+  color: var(--st-text);
 }
 
 .lib-composer-actions,
@@ -107,7 +114,7 @@
   border: 1px solid var(--st-border);
   border-radius: 6px;
   padding: 8px 10px;
-  background: #fafafa;
+  background: var(--st-bg);
 }
 
 .lib-candidate-actions {
@@ -117,13 +124,14 @@
 }
 
 .lib-candidate.is-ready {
-  border-color: #86efac;
-  background: #f0fdf4;
+  border-color: color-mix(in srgb, var(--st-ok) 55%, var(--st-border));
+  background: color-mix(in srgb, var(--st-ok) 9%, var(--st-surface));
 }
 
 @media (max-width: 900px) {
   .lib-body {
     grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 38%) minmax(0, 1fr);
   }
 }
 

web/libraries.html

@@ -4,6 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>库 · Writing Agent</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="/theme-init.js"></script>
     <link rel="stylesheet" href="/settings.css" />
     <link rel="stylesheet" href="/libraries.css" />
   </head>

web/modules.css

@@ -21,8 +21,13 @@ html[data-embed="1"] .st-main {
 }
 
 .mod-shell {
-  max-width: 1280px;
-  --st-rail-w: 260px;
+  max-width: none;
+  width: 100%;
+  --st-rail-w: 280px;
+}
+
+.mod-rail {
+  overflow: hidden;
 }
 
 .mod-pack {
@@ -42,6 +47,7 @@ html[data-embed="1"] .st-main {
   border: 1px solid var(--st-border);
   border-radius: 6px;
   background: var(--st-bg);
+  color: var(--st-text);
 }
 
 .mod-status-filters {
@@ -77,6 +83,7 @@ html[data-embed="1"] .st-main {
   flex-direction: column;
   gap: 2px;
   flex: 1;
+  min-height: 0;
   overflow: auto;
   padding-bottom: 12px;
 }
@@ -94,7 +101,7 @@ html[data-embed="1"] .st-main {
 }
 
 .mod-item:hover {
-  background: #f4f4f5;
+  background: color-mix(in srgb, var(--st-surface) 62%, var(--st-bg));
 }
 
 .mod-item.active {
@@ -146,7 +153,7 @@ html[data-embed="1"] .st-main {
   font-weight: 600;
   padding: 4px 10px;
   border-radius: 999px;
-  background: #f4f4f5;
+  background: color-mix(in srgb, var(--st-surface) 62%, var(--st-bg));
   color: var(--st-muted);
 }
 
@@ -162,7 +169,7 @@ html[data-embed="1"] .st-main {
 
 .mod-badge.skeleton,
 .mod-badge.missing {
-  background: #f4f4f5;
+  background: color-mix(in srgb, var(--st-surface) 62%, var(--st-bg));
   color: var(--st-muted);
 }
 
@@ -177,6 +184,21 @@ html[data-embed="1"] .st-main {
   margin: 2rem 0;
 }
 
+.mod-read {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.mod-read > .st-status {
+  margin: 16px 28px 0;
+}
+
+.mod-read > .st-body {
+  flex: none;
+  overflow: visible;
+}
+
 .mod-body {
   display: flex;
   flex-direction: column;
@@ -222,7 +244,7 @@ html[data-embed="1"] .st-main {
   flex-wrap: wrap;
   gap: 6px;
   position: sticky;
-  top: calc(var(--st-top-h) + 8px);
+  top: 0;
   z-index: 5;
   background: var(--st-bg);
   padding: 6px 0;
@@ -278,7 +300,7 @@ html[data-embed="1"] .st-main {
 }
 
 .mod-section > summary:hover {
-  background: #fafafa;
+  background: color-mix(in srgb, var(--st-surface) 58%, var(--st-bg));
 }
 
 .mod-section-body {
@@ -293,7 +315,7 @@ html[data-embed="1"] .st-main {
   font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
   font-size: 12.5px;
   line-height: 1.55;
-  color: #27272a;
+  color: var(--st-text);
 }
 
 .mod-raw-toggle {
@@ -327,12 +349,17 @@ html[data-embed="1"] .st-main {
 @media (max-width: 820px) {
   .mod-shell {
     grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 38%) minmax(0, 1fr);
   }
 
   .mod-rail {
-    min-height: auto;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    align-content: stretch;
     border-right: none;
     border-bottom: 1px solid var(--st-border);
-    max-height: 42vh;
+    max-height: none;
+    overflow: hidden;
   }
 }

web/modules.html

@@ -13,6 +13,13 @@
       })();
     </script>
     <title>技能池 · Writing Agent</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="/theme-init.js"></script>
     <link rel="stylesheet" href="/settings.css" />
     <link rel="stylesheet" href="/modules.css" />
   </head>
@@ -49,7 +56,7 @@
         </div>
         <nav class="mod-list" id="mod-list"></nav>
         <p class="st-rail-note">
-          编排器编排工作流计划时从这里选型；本页只读浏览方法正文。
+          创作助手根据本局设计清单从这里取用能力；本页只读浏览方法正文。
         </p>
       </aside>
 
@@ -64,11 +71,13 @@
           </div>
         </header>
 
-        <div class="st-status" id="meta-bar" hidden></div>
         <p class="mod-error" id="mod-error" hidden></p>
 
-        <div class="st-body mod-body" id="mod-detail">
-          <p class="mod-empty">从左侧选择一项技能</p>
+        <div class="mod-read">
+          <div class="st-status" id="meta-bar" hidden></div>
+          <div class="st-body mod-body" id="mod-detail">
+            <p class="mod-empty">从左侧选择一项技能</p>
+          </div>
         </div>
       </main>
     </div>

web/shells.css

@@ -2,26 +2,25 @@
 
 html,
 body.shells-page {
-  height: auto;
-  min-height: 100%;
-  overflow: auto;
+  height: 100%;
+  overflow: hidden;
   background: var(--st-bg, #f4f4f5);
 }
 
 .shells-page .st-shell.shells-shell {
-  max-width: 1280px;
-  align-items: start;
-  grid-template-columns: 200px minmax(0, 1fr);
+  max-width: none;
+  width: 100%;
+  align-items: stretch;
+  grid-template-columns: 220px minmax(0, 1fr);
 }
 
 .shells-page .st-rail {
-  width: 200px;
-  position: sticky;
-  top: var(--st-top-h, 48px);
-  max-height: calc(100dvh - var(--st-top-h, 48px));
-  overflow-y: auto;
+  width: auto;
+  position: static;
+  max-height: none;
+  overflow: auto;
   min-height: 0;
-  align-self: start;
+  align-self: stretch;
   gap: 2px;
 }
 
@@ -65,9 +64,11 @@ body.shells-page {
 }
 
 .shells-main {
-  min-height: calc(100dvh - var(--st-top-h, 48px));
+  min-height: 0;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .shells-toolbar {
@@ -78,8 +79,8 @@ body.shells-page {
   padding: 14px 24px 12px;
   border-bottom: 1px solid var(--st-border, #e4e4e7);
   background: var(--st-surface, #fff);
-  position: sticky;
-  top: var(--st-top-h, 48px);
+  position: static;
+  flex-shrink: 0;
   z-index: 3;
 }
 
@@ -137,7 +138,7 @@ body.shells-page {
 }
 
 .shells-tone-chip:hover {
-  background: #f4f4f5;
+  background: color-mix(in srgb, var(--st-surface, #fff) 62%, var(--st-bg, #f8f8f8));
   color: var(--st-text, #18181b);
 }
 
@@ -156,29 +157,32 @@ body.shells-page {
 /* 主工作面：尽量大的阅读画布 */
 .shells-preview-wrap {
   flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
   padding: 20px 24px 28px;
-  background: #ebebed;
+  background: color-mix(in srgb, var(--st-bg) 82%, var(--st-border));
 }
 
 .shells-preview {
-  min-height: min(70vh, 720px);
-  padding: 20px 16px 28px;
+  flex: 1 1 auto;
+  min-height: min-content;
+  padding: 12px 16px;
   border-radius: 10px;
   border: 1px solid var(--st-border, #e4e4e7);
-  background: #f4f4f5;
+  background: color-mix(in srgb, var(--st-surface) 62%, var(--st-bg));
   overflow: visible;
 }
 
-.shells-preview .present-shell {
-  max-width: 42rem;
-  margin: 0 auto;
-  box-shadow: none;
-}
-
+.shells-preview .present-shell,
 .shells-preview[data-shell="turn_panel"] .present-shell,
 .shells-preview[data-shell="split_board"] .present-shell,
 .shells-preview[data-shell="chapter_reader"] .present-shell {
-  max-width: 52rem;
+  max-width: none;
+  width: 100%;
+  margin: 0;
+  box-shadow: none;
 }
 
 .shells-preview .present-shell-badge {
@@ -186,7 +190,10 @@ body.shells-page {
 }
 
 .shells-details {
-  margin: 0 24px 28px;
+  flex-shrink: 0;
+  margin: 0 24px 16px;
+  max-height: min(36%, 280px);
+  overflow: auto;
   border: 1px solid var(--st-border, #e4e4e7);
   border-radius: 8px;
   background: var(--st-surface, #fff);
@@ -258,13 +265,16 @@ body.shells-page {
 @media (max-width: 800px) {
   .shells-page .st-shell.shells-shell {
     grid-template-columns: 1fr;
+    grid-template-rows: minmax(7.5rem, 34%) minmax(0, 1fr);
   }
 
   .shells-page .st-rail {
     position: static;
     max-height: none;
     width: auto;
-    overflow: visible;
+    overflow: auto;
+    align-items: flex-start;
+    align-content: flex-start;
     border-right: none;
     border-bottom: 1px solid var(--st-border, #e4e4e7);
   }

web/shells.html

@@ -10,6 +10,7 @@
       href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap"
       rel="stylesheet"
     />
+    <script src="/theme-init.js"></script>
     <link rel="stylesheet" href="/settings.css" />
     <link rel="stylesheet" href="/styles.css" />
     <link rel="stylesheet" href="/shells.css" />
@@ -59,7 +60,7 @@
           <div class="shells-details-body">
             <div class="shells-tweak-grid" id="tweak-controls"></div>
             <ul class="shells-help-list">
-              <li>主工作面 = 上面的壳。读长文时正文撑高，页面滚动；侧栏 / 选择坞钉住。</li>
+              <li>主工作面 = 上面的壳。长文在预览框内滚动；顶栏和侧栏钉住。</li>
               <li>壳差在「必须同时看见什么」：只正文 / 正文+状态 / 正文+线索 / 正文+选项…</li>
               <li>创作只改字段绑定与显示名，不发明新布局。文档：<code>docs/play-presentation-shells.md</code></li>
             </ul>

web/stats.css

@@ -2,12 +2,19 @@
 
 .stats-shell {
   grid-template-columns: minmax(0, 1fr);
-  max-width: 1120px;
+  max-width: none;
+  width: 100%;
 }
 
 .stats-main {
-  padding: 0 0 40px;
+  padding: 0;
   min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.stats-main > * {
+  flex-shrink: 0;
 }
 
 .stats-main .st-main-head {
@@ -77,7 +84,7 @@
   display: inline-flex;
   padding: 2px;
   border-radius: 7px;
-  background: #f4f4f5;
+  background: color-mix(in srgb, var(--st-surface) 62%, var(--st-bg));
   border: 1px solid var(--st-border);
 }
 
@@ -157,14 +164,14 @@
   padding: 0 10px;
   border: 1px solid var(--st-border);
   border-radius: 6px;
-  background: #fafafa;
+  background: color-mix(in srgb, var(--st-surface) 72%, var(--st-bg));
   color: var(--st-text);
   font-size: 12px;
   cursor: pointer;
 }
 
 .stats-suggest:hover {
-  background: #f4f4f5;
+  background: var(--st-accent-soft);
   border-color: var(--st-border-strong);
 }
 
@@ -340,13 +347,11 @@
   background: var(--st-surface);
   border: 1px solid var(--st-border);
   border-radius: var(--st-radius);
-  overflow: auto;
-  max-height: min(70vh, 720px);
-  margin: 0 24px;
+  overflow-x: auto;
+  margin: 0 24px 24px;
 }
 
 .stats-table-wrap-model {
-  max-height: none;
   margin-bottom: 18px;
 }
 
@@ -368,7 +373,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background: #fafafa;
+  background: color-mix(in srgb, var(--st-surface) 82%, var(--st-bg));
   border-bottom: 1px solid var(--st-border);
   padding: 8px 12px;
   text-align: left;
@@ -392,7 +397,7 @@
 }
 
 .stats-table tbody tr:hover td {
-  background: #fafafa;
+  background: color-mix(in srgb, var(--st-surface) 58%, var(--st-bg));
 }
 
 .stats-table .num {

web/stats.html

@@ -4,6 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Token 统计 · Writing Agent</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="/theme-init.js"></script>
     <link rel="stylesheet" href="/settings.css" />
     <link rel="stylesheet" href="/stats.css" />
   </head>

web/theme-init.js

@@ -0,0 +1,151 @@
+/* Apply the conversation workspace theme before first paint, then mount the
+ * same theme controls in every secondary-page top bar. */
+(function () {
+  var themes = [
+    { id: "paper", icon: "📖", name: "仿纸暖黄", description: "经典护眼" },
+    { id: "modern", icon: "✨", name: "现代清爽", description: "干净明快" },
+    { id: "dark", icon: "🌙", name: "夜间暗色", description: "黑底灰字" },
+    { id: "green", icon: "🍃", name: "豆沙绿", description: "自然疗愈" },
+  ];
+
+  function normalizeTheme(value) {
+    return /^(paper|modern|dark|green)$/.test(value || "") ? value : "modern";
+  }
+
+  function normalizeScale(value) {
+    var legacy = { sm: 88, md: 100, lg: 112, xl: 125 };
+    var percent = legacy[value] != null ? legacy[value] : Number(value);
+    if (!isFinite(percent)) percent = 100;
+    if (percent > 0 && percent <= 2.5) percent = Math.round(percent * 100);
+    return Math.min(150, Math.max(80, Math.round(percent / 5) * 5));
+  }
+
+  function applyTheme(theme) {
+    var next = normalizeTheme(theme);
+    document.documentElement.setAttribute("data-color-theme", next);
+    document.documentElement.setAttribute("data-theme", next);
+    try {
+      localStorage.setItem("wa-color-theme", next);
+    } catch (_) {}
+    return next;
+  }
+
+  function applyScale(scale) {
+    var next = normalizeScale(scale);
+    document.documentElement.setAttribute("data-ui-font-scale", String(next));
+    document.documentElement.style.setProperty("--ui-font-scale", String(next / 100));
+    try {
+      localStorage.setItem("wa-ui-font-scale", String(next));
+    } catch (_) {}
+    return next;
+  }
+
+  try {
+    applyTheme(localStorage.getItem("wa-color-theme") || "modern");
+    applyScale(localStorage.getItem("wa-ui-font-scale") || "100");
+  } catch (_) {
+    /* Storage may be unavailable; CSS defaults remain usable. */
+  }
+
+  function mountThemeMenu() {
+    var top = document.querySelector(".st-top");
+    if (!top || top.querySelector(".st-theme-menu")) return;
+
+    var actions = document.createElement("div");
+    actions.className = "st-top-actions";
+    actions.innerHTML =
+      '<details class="st-theme-menu">' +
+      '<summary class="st-theme-summary" title="主题与字号" aria-label="主题与字号">' +
+      '<span class="st-hamburger" aria-hidden="true"></span>' +
+      "</summary>" +
+      '<div class="st-theme-panel">' +
+      '<div class="st-theme-label">主题</div>' +
+      themes
+        .map(function (item) {
+          return (
+            '<button type="button" class="st-theme-item" data-st-theme="' +
+            item.id +
+            '">' +
+            '<span class="st-theme-icon" aria-hidden="true">' +
+            item.icon +
+            "</span>" +
+            '<span class="st-theme-copy"><span class="st-theme-name">' +
+            item.name +
+            '</span><span class="st-theme-desc">' +
+            item.description +
+            "</span></span>" +
+            "</button>"
+          );
+        })
+        .join("") +
+      '<div class="st-theme-separator"></div>' +
+      '<div class="st-theme-label">字号</div>' +
+      '<div class="st-font-scale" role="group" aria-label="字号">' +
+      '<button type="button" data-st-scale="-1" aria-label="缩小字号">−</button>' +
+      '<span class="st-font-value" aria-live="polite"></span>' +
+      '<button type="button" data-st-scale="1" aria-label="放大字号">＋</button>' +
+      "</div></div></details>";
+    top.appendChild(actions);
+
+    var menu = actions.querySelector(".st-theme-menu");
+    var value = actions.querySelector(".st-font-value");
+
+    function sync() {
+      var active = normalizeTheme(
+        document.documentElement.getAttribute("data-color-theme"),
+      );
+      var scale = normalizeScale(
+        document.documentElement.getAttribute("data-ui-font-scale"),
+      );
+      actions.querySelectorAll("[data-st-theme]").forEach(function (button) {
+        var selected = button.getAttribute("data-st-theme") === active;
+        button.classList.toggle("is-active", selected);
+        button.setAttribute("aria-pressed", String(selected));
+      });
+      value.textContent = String(scale);
+      var minus = actions.querySelector('[data-st-scale="-1"]');
+      var plus = actions.querySelector('[data-st-scale="1"]');
+      minus.disabled = scale <= 80;
+      plus.disabled = scale >= 150;
+    }
+
+    actions.addEventListener("click", function (event) {
+      var themeButton = event.target.closest("[data-st-theme]");
+      if (themeButton) {
+        applyTheme(themeButton.getAttribute("data-st-theme"));
+        sync();
+        return;
+      }
+      var scaleButton = event.target.closest("[data-st-scale]");
+      if (scaleButton) {
+        var current = normalizeScale(
+          document.documentElement.getAttribute("data-ui-font-scale"),
+        );
+        applyScale(current + Number(scaleButton.getAttribute("data-st-scale")) * 5);
+        sync();
+      }
+    });
+
+    document.addEventListener("click", function (event) {
+      if (menu.open && !menu.contains(event.target)) menu.removeAttribute("open");
+    });
+    document.addEventListener("keydown", function (event) {
+      if (event.key === "Escape" && menu.open) {
+        menu.removeAttribute("open");
+        menu.querySelector("summary").focus();
+      }
+    });
+    window.addEventListener("storage", function (event) {
+      if (event.key === "wa-color-theme") applyTheme(event.newValue);
+      if (event.key === "wa-ui-font-scale") applyScale(event.newValue);
+      sync();
+    });
+    sync();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", mountThemeMenu, { once: true });
+  } else {
+    mountThemeMenu();
+  }
+})();