- 编排器编排工作流计划时从这里选型；本页只读浏览方法正文。
+ 创作助手根据本局设计清单从这里取用能力；本页只读浏览方法正文。
@@ -64,11 +71,13 @@
-
- - 主工作面 = 上面的壳。读长文时正文撑高，页面滚动；侧栏 / 选择坞钉住。
+ - 主工作面 = 上面的壳。长文在预览框内滚动；顶栏和侧栏钉住。
- 壳差在「必须同时看见什么」：只正文 / 正文+状态 / 正文+线索 / 正文+选项…
- 创作只改字段绑定与显示名，不发明新布局。文档：
docs/play-presentation-shells.md
diff --git a/web/stats.css b/web/stats.css
index 0f1b401..66ea884 100644
--- a/web/stats.css
+++ b/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 {
diff --git a/web/stats.html b/web/stats.html
index d04d8b0..3b48802 100644
--- a/web/stats.html
+++ b/web/stats.html
@@ -4,6 +4,13 @@
Token 统计 · Writing Agent
+
+
+
+
diff --git a/web/theme-init.js b/web/theme-init.js
new file mode 100644
index 0000000..dff5912
--- /dev/null
+++ b/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 =
+ '";
+ 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();
+ }
+})();