X/LittleWhiteBox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上傳檔案到「modules/story-summary」

Browse Source
This commit is contained in:
X
2026-02-15 13:55:28 +00:00
parent 22d3002786
commit dc47de6c10
4 changed files with 358 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
modules/story-summary/story-summary-a.css
View File

@@ -73,6 +73,7 @@
═══════════════════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════════════════ */
:root { :root {
/* ── Base ── */
--bg: #f0f0f0; --bg: #f0f0f0;
--bg2: #ffffff; --bg2: #ffffff;
--bg3: #eeeeee; --bg3: #eeeeee;
@@ -80,36 +81,127 @@
--txt2: #333333; --txt2: #333333;
--txt3: #555555; --txt3: #555555;
/* Neo-Brutalism Core */ /* ── Neo-Brutalism Core ── */
--bdr: #000000; --bdr: #000000;
--bdr2: #000000; --bdr2: #000000;
/* Secondary border is also black/high contrast */
--shadow: 4px 4px 0 var(--txt); --shadow: 4px 4px 0 var(--txt);
--shadow-hover: 2px 2px 0 var(--txt); --shadow-hover: 2px 2px 0 var(--txt);
--acc: #000000; --acc: #000000;
--hl: #ff4444; --hl: #ff4444;
/* Harsh Red */ --hl2: #d85858;
--hl-soft: #ffeaea; --hl-soft: #ffeaea;
/* Light Red bg */ --inv: #fff;
/* ── Buttons ── */
--btn-p-hover: #333;
--btn-p-disabled: #999;
/* ── Status ── */
--warn: #ff9800;
--success: #22c55e;
--info: #3b82f6;
--downloading: #f59e0b;
--error: #ef4444;
/* ── Code blocks ── */
--code-bg: #1e1e1e;
--code-txt: #d4d4d4;
--muted: #999;
/* ── Overlay ── */
--overlay: rgba(0, 0, 0, .5);
/* ── Tag ── */
--tag-s-bdr: rgba(255, 68, 68, .2);
--tag-shadow: rgba(0, 0, 0, .12);
/* ── Category colors ── */
--cat-status: #e57373;
--cat-inventory: #64b5f6;
--cat-relation: #ba68c8;
--cat-knowledge: #4db6ac;
--cat-rule: #ffd54f;
/* ── Trend colors ── */
--trend-broken: #444;
--trend-broken-bg: rgba(68, 68, 68, .15);
--trend-hate: #8b0000;
--trend-hate-bg: rgba(139, 0, 0, .15);
--trend-dislike: #cd5c5c;
--trend-dislike-bg: rgba(205, 92, 92, .15);
--trend-stranger: #888;
--trend-stranger-bg: rgba(136, 136, 136, .15);
--trend-click: #4a9a7e;
--trend-click-bg: rgba(102, 205, 170, .15);
--trend-close-bg: rgba(235, 106, 106, .15);
--trend-merge: #c71585;
--trend-merge-bg: rgba(199, 21, 133, .2);
} }
@media (prefers-color-scheme: dark) { :root[data-theme="dark"] {
:root { /* ── Base ── */
--bg: #111111; --bg: #111111;
--bg2: #222222; --bg2: #222222;
--bg3: #333333; --bg3: #333333;
--txt: #ffffff; --txt: #ffffff;
--txt2: #eeeeee; --txt2: #eeeeee;
--txt3: #cccccc; --txt3: #cccccc;
--bdr: #ffffff; /* ── Neo-Brutalism Core ── */
--bdr2: #ffffff; --bdr: #ffffff;
--bdr2: #ffffff;
--shadow: 4px 4px 0 var(--txt);
--shadow-hover: 2px 2px 0 var(--txt);
--acc: #ffffff;
--hl: #ff6b6b;
--hl2: #e07070;
--hl-soft: #442222;
--inv: #222;
--acc: #ffffff; /* ── Buttons ── */
--hl: #ff6b6b; --btn-p-hover: #ddd;
--hl-soft: #442222; --btn-p-disabled: #666;
}
/* ── Status ── */
--warn: #ffb74d;
--success: #4caf50;
--info: #64b5f6;
--downloading: #ffa726;
--error: #ef5350;
/* ── Code blocks ── */
--code-bg: #0d0d0d;
--code-txt: #d4d4d4;
--muted: #777;
/* ── Overlay ── */
--overlay: rgba(0, 0, 0, .7);
/* ── Tag ── */
--tag-s-bdr: rgba(255, 107, 107, .3);
--tag-shadow: rgba(0, 0, 0, .4);
/* ── Category colors ── */
--cat-status: #ef9a9a;
--cat-inventory: #90caf9;
--cat-relation: #ce93d8;
--cat-knowledge: #80cbc4;
--cat-rule: #ffe082;
/* ── Trend colors ── */
--trend-broken: #999;
--trend-broken-bg: rgba(153, 153, 153, .15);
--trend-hate: #ef5350;
--trend-hate-bg: rgba(239, 83, 80, .15);
--trend-dislike: #e57373;
--trend-dislike-bg: rgba(229, 115, 115, .15);
--trend-stranger: #aaa;
--trend-stranger-bg: rgba(170, 170, 170, .12);
--trend-click: #66bb6a;
--trend-click-bg: rgba(102, 187, 106, .15);
--trend-close-bg: rgba(255, 107, 107, .15);
--trend-merge: #f06292;
--trend-merge-bg: rgba(240, 98, 146, .15);
} }
body { body {
@@ -218,7 +310,7 @@ h1 {
.stat-warning { .stat-warning {
font-size: .625rem; font-size: .625rem;
color: #ff9800; color: var(--warn);
margin-top: 4px; margin-top: 4px;
} }
@@ -705,7 +797,7 @@ h1 {
.prof-prog-inner { .prof-prog-inner {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--hl), #d85858); background: linear-gradient(90deg, var(--hl), var(--hl2));
border-radius: 2px; border-radius: 2px;
transition: width .6s; transition: width .6s;
} }
@@ -810,38 +902,38 @@ h1 {
} }
.trend-broken { .trend-broken {
background: rgba(68, 68, 68, .15); background: var(--trend-broken-bg);
color: #444; color: var(--trend-broken);
} }
.trend-hate { .trend-hate {
background: rgba(139, 0, 0, .15); background: var(--trend-hate-bg);
color: #8b0000; color: var(--trend-hate);
} }
.trend-dislike { .trend-dislike {
background: rgba(205, 92, 92, .15); background: var(--trend-dislike-bg);
color: #cd5c5c; color: var(--trend-dislike);
} }
.trend-stranger { .trend-stranger {
background: rgba(136, 136, 136, .15); background: var(--trend-stranger-bg);
color: #888; color: var(--trend-stranger);
} }
.trend-click { .trend-click {
background: rgba(102, 205, 170, .15); background: var(--trend-click-bg);
color: #4a9a7e; color: var(--trend-click);
} }
.trend-close { .trend-close {
background: rgba(235, 106, 106, .15); background: var(--trend-close-bg);
color: var(--hl); color: var(--hl);
} }
.trend-merge { .trend-merge {
background: rgba(199, 21, 133, .2); background: var(--trend-merge-bg);
color: #c71585; color: var(--trend-merge);
} }
/* ═══════════════════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════════════════
@@ -1009,7 +1101,7 @@ h1 {
} }
.modal-close:hover svg { .modal-close:hover svg {
stroke: #fff; stroke: var(--inv);
} }
.modal-close svg { .modal-close svg {
@@ -1361,24 +1453,24 @@ h1 {
} }
.status-dot.ready { .status-dot.ready {
background: #22c55e; background: var(--success);
} }
.status-dot.cached { .status-dot.cached {
background: #3b82f6; background: var(--info);
} }
.status-dot.downloading { .status-dot.downloading {
background: #f59e0b; background: var(--downloading);
animation: pulse 1s infinite; animation: pulse 1s infinite;
} }
.status-dot.error { .status-dot.error {
background: #ef4444; background: var(--error);
} }
.status-dot.success { .status-dot.success {
background: #22c55e; background: var(--success);
} }
@keyframes pulse { @keyframes pulse {
@@ -1406,7 +1498,7 @@ h1 {
.progress-inner { .progress-inner {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--hl), #d85858); background: linear-gradient(90deg, var(--hl), var(--hl2));
border-radius: 3px; border-radius: 3px;
width: 0%; width: 0%;
transition: width .3s; transition: width .3s;
@@ -1445,7 +1537,7 @@ h1 {
.vector-mismatch-warning { .vector-mismatch-warning {
font-size: .75rem; font-size: .75rem;
color: #f59e0b; color: var(--downloading);
margin-top: 6px; margin-top: 6px;
} }
@@ -1499,7 +1591,7 @@ h1 {
font-family: 'Consolas', 'Monaco', 'SF Mono', monospace; font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
font-size: 12px; font-size: 12px;
line-height: 1.6; line-height: 1.6;
color: #e8e8e8; color: var(--code-txt);
white-space: pre-wrap !important; white-space: pre-wrap !important;
overflow-x: hidden !important; overflow-x: hidden !important;
word-break: break-word; word-break: break-word;
@@ -1570,7 +1662,7 @@ h1 {
width: 28px; width: 28px;
height: 28px; height: 28px;
background: var(--acc); background: var(--acc);
color: #fff; color: var(--inv);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1660,7 +1752,7 @@ h1 {
.hf-code { .hf-code {
margin: 0; margin: 0;
padding: 14px; padding: 14px;
background: #1e1e1e; background: var(--code-bg);
overflow-x: auto; overflow-x: auto;
position: relative; position: relative;
} }
@@ -1669,7 +1761,7 @@ h1 {
font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace; font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
font-size: .75rem; font-size: .75rem;
line-height: 1.5; line-height: 1.5;
color: #d4d4d4; color: var(--code-txt);
display: block; display: block;
white-space: pre; white-space: pre;
} }
@@ -1681,7 +1773,7 @@ h1 {
padding: 4px 10px; padding: 4px 10px;
background: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .2);
color: #999; color: var(--muted);
font-size: .6875rem; font-size: .6875rem;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
@@ -1690,14 +1782,14 @@ h1 {
.hf-code .copy-btn:hover { .hf-code .copy-btn:hover {
background: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .2);
color: #fff; color: var(--inv);
} }
.hf-status-badge { .hf-status-badge {
display: inline-block; display: inline-block;
padding: 2px 10px; padding: 2px 10px;
background: rgba(34, 197, 94, .15); background: rgba(34, 197, 94, .15);
color: #22c55e; color: var(--success);
border-radius: 10px; border-radius: 10px;
font-size: .75rem; font-size: .75rem;
} }
@@ -1856,23 +1948,23 @@ h1 {
/* Category Icon Colors */ /* Category Icon Colors */
.world-group[data-category="status"] .world-group-title { .world-group[data-category="status"] .world-group-title {
color: #e57373; color: var(--cat-status);
} }
.world-group[data-category="inventory"] .world-group-title { .world-group[data-category="inventory"] .world-group-title {
color: #64b5f6; color: var(--cat-inventory);
} }
.world-group[data-category="relation"] .world-group-title { .world-group[data-category="relation"] .world-group-title {
color: #ba68c8; color: var(--cat-relation);
} }
.world-group[data-category="knowledge"] .world-group-title { .world-group[data-category="knowledge"] .world-group-title {
color: #4db6ac; color: var(--cat-knowledge);
} }
.world-group[data-category="rule"] .world-group-title { .world-group[data-category="rule"] .world-group-title {
color: #ffd54f; color: var(--cat-rule);
} }
/* Empty State */ /* Empty State */
@@ -1971,7 +2063,7 @@ h1 {
top: 2px; top: 2px;
width: 5px; width: 5px;
height: 10px; height: 10px;
border: solid #fff; border: solid var(--inv);
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg); transform: rotate(45deg);
} }
@@ -2205,8 +2297,8 @@ h1 {
═══════════════════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════════════════ */
.debug-log-viewer { .debug-log-viewer {
background: #1a1a1a; background: var(--code-bg);
color: #e0e0e0; color: var(--code-txt);
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
font-family: 'Consolas', 'Monaco', 'SF Mono', monospace; font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
@@ -2221,7 +2313,7 @@ h1 {
} }
.recall-empty { .recall-empty {
color: #999; color: var(--muted);
text-align: center; text-align: center;
padding: 40px; padding: 40px;
font-style: italic; font-style: italic;
@@ -2234,15 +2326,15 @@ h1 {
═══════════════════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════════════════ */
#recall-log-content .metric-warn { #recall-log-content .metric-warn {
color: #f59e0b; color: var(--downloading);
} }
#recall-log-content .metric-error { #recall-log-content .metric-error {
color: #ef4444; color: var(--error);
} }
#recall-log-content .metric-good { #recall-log-content .metric-good {
color: #22c55e; color: var(--success);
} }
/* ═══════════════════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════════════════
@@ -2485,8 +2577,8 @@ h1 {
.neo-badge { .neo-badge {
/* Explicitly requested Black Background & White Text */ /* Explicitly requested Black Background & White Text */
background: #000; background: var(--acc);
color: #fff; color: var(--inv);
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 0.75rem; font-size: 0.75rem;

46
modules/story-summary/story-summary-ui.js
View File

@@ -1640,42 +1640,34 @@
bindEvents(); bindEvents();
// === EASTER EGG: 连续点击标题「总结」5 次切换新野兽派主题（localStorage 持久化）=== // === THEME SWITCHER ===
(function () { (function () {
const STORAGE_KEY = 'xb-theme-alt'; const STORAGE_KEY = 'xb-theme-alt';
const CSS_A = 'story-summary.css'; const CSS_MAP = { default: 'story-summary.css', dark: 'story-summary.css', neo: 'story-summary-a.css', 'neo-dark': 'story-summary-a.css' };
const CSS_B = 'story-summary-a.css';
const link = document.querySelector('link[rel="stylesheet"]'); const link = document.querySelector('link[rel="stylesheet"]');
if (!link) return; const sel = document.getElementById('theme-select');
if (!link || !sel) return;
// 启动时：根据持久化状态设置 CSS function applyTheme(theme) {
if (localStorage.getItem(STORAGE_KEY) === '1') { if (!CSS_MAP[theme]) return;
link.setAttribute('href', CSS_B); link.setAttribute('href', CSS_MAP[theme]);
document.documentElement.setAttribute('data-theme', (theme === 'dark' || theme === 'neo-dark') ? 'dark' : '');
} }
// 点击计数器 // 启动时恢复主题
let clickCount = 0, clickTimer = null; const saved = localStorage.getItem(STORAGE_KEY) || 'default';
const trigger = document.querySelector('h1 span'); applyTheme(saved);
if (!trigger) return; sel.value = saved;
trigger.style.cursor = 'default'; // 下拉框切换
trigger.addEventListener('click', function () { sel.addEventListener('change', function () {
clickCount++; const theme = sel.value;
clearTimeout(clickTimer); applyTheme(theme);
clickTimer = setTimeout(() => { clickCount = 0; }, 2000); localStorage.setItem(STORAGE_KEY, theme);
console.log(`[Theme] Switched → ${theme} (${CSS_MAP[theme]})`);
if (clickCount >= 5) {
clickCount = 0;
clearTimeout(clickTimer);
const isAlt = localStorage.getItem(STORAGE_KEY) === '1';
const next = isAlt ? CSS_A : CSS_B;
localStorage.setItem(STORAGE_KEY, isAlt ? '0' : '1');
link.setAttribute('href', next);
console.log(`[Easter Egg] Theme toggled → ${next}`);
}
}); });
})(); })();
// === END EASTER EGG === // === END THEME SWITCHER ===
// Notify parent // Notify parent
postMsg('FRAME_READY'); postMsg('FRAME_READY');

224
modules/story-summary/story-summary.css
View File

@@ -80,6 +80,7 @@
} }
:root { :root {
/* ── Base ── */
--bg: #fafafa; --bg: #fafafa;
--bg2: #fff; --bg2: #fff;
--bg3: #f5f5f5; --bg3: #f5f5f5;
@@ -90,7 +91,117 @@
--bdr2: #e8e8e8; --bdr2: #e8e8e8;
--acc: #1a1a1a; --acc: #1a1a1a;
--hl: #d87a7a; --hl: #d87a7a;
--hl2: #d85858;
--hl-soft: rgba(184, 90, 90, .1); --hl-soft: rgba(184, 90, 90, .1);
--inv: #fff;
/* text on accent/primary bg */
/* ── Buttons ── */
--btn-p-hover: #555;
--btn-p-disabled: #999;
/* ── Status ── */
--warn: #ff9800;
--success: #22c55e;
--info: #3b82f6;
--downloading: #f59e0b;
--error: #ef4444;
/* ── Code blocks ── */
--code-bg: #1e1e1e;
--code-txt: #d4d4d4;
--muted: #999;
/* ── Overlay ── */
--overlay: rgba(0, 0, 0, .5);
/* ── Tag highlight border ── */
--tag-s-bdr: rgba(255, 68, 68, .2);
--tag-shadow: rgba(0, 0, 0, .08);
/* ── Category colors ── */
--cat-status: #e57373;
--cat-inventory: #64b5f6;
--cat-relation: #ba68c8;
--cat-knowledge: #4db6ac;
--cat-rule: #ffd54f;
/* ── Trend colors ── */
--trend-broken: #444;
--trend-broken-bg: rgba(68, 68, 68, .15);
--trend-hate: #8b0000;
--trend-hate-bg: rgba(139, 0, 0, .15);
--trend-dislike: #cd5c5c;
--trend-dislike-bg: rgba(205, 92, 92, .15);
--trend-stranger: #888;
--trend-stranger-bg: rgba(136, 136, 136, .15);
--trend-click: #4a9a7e;
--trend-click-bg: rgba(102, 205, 170, .15);
--trend-close-bg: rgba(235, 106, 106, .15);
--trend-merge: #c71585;
--trend-merge-bg: rgba(199, 21, 133, .2);
}
:root[data-theme="dark"] {
/* ── Base ── */
--bg: #121212;
--bg2: #1e1e1e;
--bg3: #2a2a2a;
--txt: #e0e0e0;
--txt2: #b0b0b0;
--txt3: #808080;
--bdr: #3a3a3a;
--bdr2: #333;
--acc: #e0e0e0;
--hl: #e8928a;
--hl2: #e07070;
--hl-soft: rgba(232, 146, 138, .12);
--inv: #1e1e1e;
/* ── Buttons ── */
--btn-p-hover: #ccc;
--btn-p-disabled: #666;
/* ── Status ── */
--warn: #ffb74d;
--success: #4caf50;
--info: #64b5f6;
--downloading: #ffa726;
--error: #ef5350;
/* ── Code blocks ── */
--code-bg: #0d0d0d;
--code-txt: #d4d4d4;
--muted: #777;
/* ── Overlay ── */
--overlay: rgba(0, 0, 0, .7);
/* ── Tag ── */
--tag-s-bdr: rgba(232, 146, 138, .3);
--tag-shadow: rgba(0, 0, 0, .3);
/* ── Category colors (softer for dark) ── */
--cat-status: #ef9a9a;
--cat-inventory: #90caf9;
--cat-relation: #ce93d8;
--cat-knowledge: #80cbc4;
--cat-rule: #ffe082;
/* ── Trend colors ── */
--trend-broken: #999;
--trend-broken-bg: rgba(153, 153, 153, .15);
--trend-hate: #ef5350;
--trend-hate-bg: rgba(239, 83, 80, .15);
--trend-dislike: #e57373;
--trend-dislike-bg: rgba(229, 115, 115, .15);
--trend-stranger: #aaa;
--trend-stranger-bg: rgba(170, 170, 170, .12);
--trend-click: #66bb6a;
--trend-click-bg: rgba(102, 187, 106, .15);
--trend-close-bg: rgba(232, 146, 138, .15);
--trend-merge: #f06292;
--trend-merge-bg: rgba(240, 98, 146, .15);
} }
body { body {
@@ -204,7 +315,7 @@ h1 span {
.stat-warning { .stat-warning {
font-size: .625rem; font-size: .625rem;
color: #ff9800; color: var(--warn);
margin-top: 4px; margin-top: 4px;
} }
@@ -306,17 +417,17 @@ h1 span {
.btn-p { .btn-p {
background: var(--acc); background: var(--acc);
color: #fff; color: var(--inv);
border-color: var(--acc); border-color: var(--acc);
} }
.btn-p:hover { .btn-p:hover {
background: #555; background: var(--btn-p-hover);
} }
.btn-p:disabled { .btn-p:disabled {
background: #999; background: var(--btn-p-disabled);
border-color: #999; border-color: var(--btn-p-disabled);
cursor: not-allowed; cursor: not-allowed;
opacity: .7; opacity: .7;
} }
@@ -466,20 +577,20 @@ h1 span {
.tag.p { .tag.p {
background: var(--acc); background: var(--acc);
color: #fff; color: var(--inv);
border-color: var(--acc); border-color: var(--acc);
font-weight: 500; font-weight: 500;
} }
.tag.s { .tag.s {
background: var(--hl-soft); background: var(--hl-soft);
border-color: rgba(255, 68, 68, .2); border-color: var(--tag-s-bdr);
color: var(--hl); color: var(--hl);
} }
.tag:hover { .tag:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, .08); box-shadow: 0 4px 12px var(--tag-shadow);
} }
/* ═══════════════════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════════════════
@@ -662,7 +773,7 @@ h1 span {
.prof-prog-inner { .prof-prog-inner {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--hl), #d85858); background: linear-gradient(90deg, var(--hl), var(--hl2));
border-radius: 2px; border-radius: 2px;
transition: width .6s; transition: width .6s;
} }
@@ -769,38 +880,38 @@ h1 span {
} }
.trend-broken { .trend-broken {
background: rgba(68, 68, 68, .15); background: var(--trend-broken-bg);
color: #444; color: var(--trend-broken);
} }
.trend-hate { .trend-hate {
background: rgba(139, 0, 0, .15); background: var(--trend-hate-bg);
color: #8b0000; color: var(--trend-hate);
} }
.trend-dislike { .trend-dislike {
background: rgba(205, 92, 92, .15); background: var(--trend-dislike-bg);
color: #cd5c5c; color: var(--trend-dislike);
} }
.trend-stranger { .trend-stranger {
background: rgba(136, 136, 136, .15); background: var(--trend-stranger-bg);
color: #888; color: var(--trend-stranger);
} }
.trend-click { .trend-click {
background: rgba(102, 205, 170, .15); background: var(--trend-click-bg);
color: #4a9a7e; color: var(--trend-click);
} }
.trend-close { .trend-close {
background: rgba(235, 106, 106, .15); background: var(--trend-close-bg);
color: var(--hl); color: var(--hl);
} }
.trend-merge { .trend-merge {
background: rgba(199, 21, 133, .2); background: var(--trend-merge-bg);
color: #c71585; color: var(--trend-merge);
} }
/* ═══════════════════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════════════════
@@ -913,7 +1024,7 @@ h1 span {
.modal-bg { .modal-bg {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(0, 0, 0, .5); background: var(--overlay);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
@@ -964,6 +1075,7 @@ h1 span {
.modal-close svg { .modal-close svg {
width: 14px; width: 14px;
height: 14px; height: 14px;
color: var(--txt);
} }
.modal-body { .modal-body {
@@ -1031,7 +1143,7 @@ h1 span {
.editor-err { .editor-err {
padding: 12px; padding: 12px;
background: var(--hl-soft); background: var(--hl-soft);
border: 1px solid rgba(255, 68, 68, .3); border: 1px solid var(--tag-s-bdr);
color: var(--hl); color: var(--hl);
font-size: .8125rem; font-size: .8125rem;
margin-top: 12px; margin-top: 12px;
@@ -1301,24 +1413,24 @@ h1 span {
} }
.status-dot.ready { .status-dot.ready {
background: #22c55e; background: var(--success);
} }
.status-dot.cached { .status-dot.cached {
background: #3b82f6; background: var(--info);
} }
.status-dot.downloading { .status-dot.downloading {
background: #f59e0b; background: var(--downloading);
animation: pulse 1s infinite; animation: pulse 1s infinite;
} }
.status-dot.error { .status-dot.error {
background: #ef4444; background: var(--error);
} }
.status-dot.success { .status-dot.success {
background: #22c55e; background: var(--success);
} }
@keyframes pulse { @keyframes pulse {
@@ -1346,7 +1458,7 @@ h1 span {
.progress-inner { .progress-inner {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--hl), #d85858); background: linear-gradient(90deg, var(--hl), var(--hl2));
border-radius: 3px; border-radius: 3px;
width: 0%; width: 0%;
transition: width .3s; transition: width .3s;
@@ -1404,7 +1516,7 @@ h1 span {
.vector-mismatch-warning { .vector-mismatch-warning {
font-size: .75rem; font-size: .75rem;
color: #f59e0b; color: var(--downloading);
margin-top: 6px; margin-top: 6px;
} }
@@ -1458,7 +1570,7 @@ h1 span {
font-family: 'Consolas', 'Monaco', 'SF Mono', monospace; font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
font-size: 12px; font-size: 12px;
line-height: 1.6; line-height: 1.6;
color: #e8e8e8; color: var(--code-txt);
white-space: pre-wrap !important; white-space: pre-wrap !important;
overflow-x: hidden !important; overflow-x: hidden !important;
word-break: break-word; word-break: break-word;
@@ -1468,7 +1580,7 @@ h1 span {
} }
.recall-empty { .recall-empty {
color: #999; color: var(--muted);
text-align: center; text-align: center;
padding: 40px; padding: 40px;
font-style: italic; font-style: italic;
@@ -1555,7 +1667,7 @@ h1 span {
width: 28px; width: 28px;
height: 28px; height: 28px;
background: var(--acc); background: var(--acc);
color: #fff; color: var(--inv);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1648,7 +1760,7 @@ h1 span {
.hf-code { .hf-code {
margin: 0; margin: 0;
padding: 14px; padding: 14px;
background: #1e1e1e; background: var(--code-bg);
overflow-x: auto; overflow-x: auto;
position: relative; position: relative;
} }
@@ -1657,7 +1769,7 @@ h1 span {
font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace; font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
font-size: .75rem; font-size: .75rem;
line-height: 1.5; line-height: 1.5;
color: #d4d4d4; color: var(--code-txt);
display: block; display: block;
white-space: pre; white-space: pre;
} }
@@ -1669,7 +1781,7 @@ h1 span {
padding: 4px 10px; padding: 4px 10px;
background: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .2);
color: #999; color: var(--muted);
font-size: .6875rem; font-size: .6875rem;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
@@ -1678,14 +1790,14 @@ h1 span {
.hf-code .copy-btn:hover { .hf-code .copy-btn:hover {
background: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .2);
color: #fff; color: var(--inv);
} }
.hf-status-badge { .hf-status-badge {
display: inline-block; display: inline-block;
padding: 2px 10px; padding: 2px 10px;
background: rgba(34, 197, 94, .15); background: rgba(34, 197, 94, .15);
color: #22c55e; color: var(--success);
border-radius: 10px; border-radius: 10px;
font-size: .75rem; font-size: .75rem;
font-weight: 500; font-weight: 500;
@@ -2291,23 +2403,23 @@ h1 span {
/* 分类图标颜色 */ /* 分类图标颜色 */
.world-group[data-category="status"] .world-group-title { .world-group[data-category="status"] .world-group-title {
color: #e57373; color: var(--cat-status);
} }
.world-group[data-category="inventory"] .world-group-title { .world-group[data-category="inventory"] .world-group-title {
color: #64b5f6; color: var(--cat-inventory);
} }
.world-group[data-category="relation"] .world-group-title { .world-group[data-category="relation"] .world-group-title {
color: #ba68c8; color: var(--cat-relation);
} }
.world-group[data-category="knowledge"] .world-group-title { .world-group[data-category="knowledge"] .world-group-title {
color: #4db6ac; color: var(--cat-knowledge);
} }
.world-group[data-category="rule"] .world-group-title { .world-group[data-category="rule"] .world-group-title {
color: #ffd54f; color: var(--cat-rule);
} }
/* 空状态 */ /* 空状态 */
@@ -2444,7 +2556,7 @@ h1 span {
top: 2px; top: 2px;
width: 5px; width: 5px;
height: 10px; height: 10px;
border: solid #fff; border: solid var(--inv);
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg); transform: rotate(45deg);
} }
@@ -2740,8 +2852,8 @@ h1 span {
═══════════════════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════════════════ */
.debug-log-viewer { .debug-log-viewer {
background: #1a1a1a; background: var(--code-bg);
color: #e0e0e0; color: var(--code-txt);
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
font-family: 'Consolas', 'Monaco', 'SF Mono', monospace; font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
@@ -2756,7 +2868,7 @@ h1 span {
} }
.recall-empty { .recall-empty {
color: #999; color: var(--muted);
text-align: center; text-align: center;
padding: 40px; padding: 40px;
font-style: italic; font-style: italic;
@@ -2775,15 +2887,15 @@ h1 span {
═══════════════════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════════════════ */
#recall-log-content .metric-warn { #recall-log-content .metric-warn {
color: #f59e0b; color: var(--downloading);
} }
#recall-log-content .metric-error { #recall-log-content .metric-error {
color: #ef4444; color: var(--error);
} }
#recall-log-content .metric-good { #recall-log-content .metric-good {
color: #22c55e; color: var(--success);
} }
/* ═══════════════════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════════════════
@@ -2825,7 +2937,7 @@ h1 span {
width: 26px; width: 26px;
height: 26px; height: 26px;
background: var(--acc); background: var(--acc);
color: #fff; color: var(--inv);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -2872,7 +2984,7 @@ h1 span {
width: 22px; width: 22px;
height: 22px; height: 22px;
background: var(--hl); background: var(--hl);
color: #fff; color: var(--inv);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -3103,7 +3215,7 @@ h1 span {
width: 18px; width: 18px;
height: 18px; height: 18px;
background: var(--acc); background: var(--acc);
color: #fff; color: var(--inv);
border-radius: 3px; border-radius: 3px;
font-size: .625rem; font-size: .625rem;
font-weight: 700; font-weight: 700;
@@ -3304,8 +3416,8 @@ h1 span {
.neo-badge { .neo-badge {
/* Explicitly requested Black Background & White Text */ /* Explicitly requested Black Background & White Text */
background: #000; background: var(--acc);
color: #fff; color: var(--inv);
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 0.75rem; font-size: 0.75rem;

16
modules/story-summary/story-summary.html
View File

@@ -176,6 +176,22 @@
<div class="modal-body"> <div class="modal-body">
<!-- Tab 1: Summary Settings --> <!-- Tab 1: Summary Settings -->
<div class="tab-pane active" id="tab-summary"> <div class="tab-pane active" id="tab-summary">
<!-- Theme Settings -->
<div class="settings-section">
<div class="settings-section-title">主题设置</div>
<div class="settings-row">
<div class="settings-field full">
<label>界面主题</label>
<select id="theme-select">
<option value="default">默认主题 · 亮色</option>
<option value="dark">默认主题 · 暗色</option>
<option value="neo">Neo主题 · 亮色</option>
<option value="neo-dark">Neo主题 · 暗色</option>
</select>
</div>
</div>
</div>
<!-- API Config & Gen Params Combined --> <!-- API Config & Gen Params Combined -->
<div class="settings-section"> <div class="settings-section">
<div class="settings-section-title">API 配置</div> <div class="settings-section-title">API 配置</div>