feat: 主题选择改为标题栏调色盘

- 移除配置页的 select 下拉和面板外观卡片
- 在 header  左侧添加 4 个彩色圆点(赤红/青蓝/琥珀/紫雾)
- 圆点 hover 发光,active 白色边框高亮
- 汉化主题名称为 title 提示
This commit is contained in:
Youzini-afk
2026-03-24 17:36:05 +08:00
parent f3936b2d0a
commit 4288705117
3 changed files with 56 additions and 16 deletions

View File

@@ -7,6 +7,12 @@
<span>ST-BME 记忆图谱</span>
<span class="bme-panel-subtitle" id="bme-panel-status">SYSTEM_ACTIVE</span>
</div>
<div class="bme-theme-palette">
<button class="bme-theme-dot" data-theme="crimson" title="赤红" style="--dot-color: #e94560"></button>
<button class="bme-theme-dot" data-theme="cyan" title="青蓝" style="--dot-color: #00e5ff"></button>
<button class="bme-theme-dot" data-theme="amber" title="琥珀" style="--dot-color: #ffb300"></button>
<button class="bme-theme-dot" data-theme="violet" title="紫雾" style="--dot-color: #b388ff"></button>
</div>
<button class="bme-panel-close" id="bme-panel-close" title="关闭">
<i class="fa-solid fa-xmark"></i>
</button>
@@ -353,18 +359,7 @@
</details>
</div>
<div class="bme-config-card">
<div class="bme-section-header">面板外观</div>
<div class="bme-config-row">
<label for="bme-setting-panel-theme">面板主题</label>
<select id="bme-setting-panel-theme" class="bme-config-input">
<option value="crimson">Crimson Synth</option>
<option value="cyan">Neon Cyan</option>
<option value="amber">Amber Console</option>
<option value="violet">Violet Haze</option>
</select>
</div>
</div>
</div>
</div>
</div>

View File

@@ -633,7 +633,8 @@ function _refreshConfigTab() {
_setInputValue("bme-setting-compress-prompt", settings.compressPrompt || DEFAULT_PROMPTS.compress);
_setInputValue("bme-setting-synopsis-prompt", settings.synopsisPrompt || DEFAULT_PROMPTS.synopsis);
_setInputValue("bme-setting-reflection-prompt", settings.reflectionPrompt || DEFAULT_PROMPTS.reflection);
_setInputValue("bme-setting-panel-theme", settings.panelTheme || "crimson");
// 主题调色盘高亮
_highlightThemeDot(settings.panelTheme || "crimson");
}
function _bindConfigControls() {
@@ -720,9 +721,15 @@ function _bindConfigControls() {
bindText("bme-setting-reflection-prompt", (value) =>
_updateSettings?.({ reflectionPrompt: value }),
);
bindText("bme-setting-panel-theme", (value) =>
_updateSettings?.({ panelTheme: value }),
);
// 主题调色盘点击
panelEl.querySelectorAll(".bme-theme-dot").forEach((dot) => {
dot.addEventListener("click", () => {
const theme = dot.dataset.theme;
if (!theme) return;
_updateSettings?.({ panelTheme: theme });
_highlightThemeDot(theme);
});
});
document.getElementById("bme-test-llm")?.addEventListener("click", async () => {
await _actionHandlers.testMemoryLLM?.();
@@ -768,6 +775,13 @@ function _setText(id, text) {
if (el) el.textContent = String(text);
}
function _highlightThemeDot(themeName) {
if (!panelEl) return;
panelEl.querySelectorAll(".bme-theme-dot").forEach((dot) => {
dot.classList.toggle("active", dot.dataset.theme === themeName);
});
}
function _setInputValue(id, value) {
const el = document.getElementById(id);
if (el && el.value !== String(value ?? "")) {

View File

@@ -187,6 +187,8 @@
font-size: 14px;
font-weight: 600;
color: var(--bme-primary, #e94560);
flex: 1;
min-width: 0;
}
.bme-panel-title i {
@@ -200,6 +202,35 @@
font-weight: 400;
}
.bme-theme-palette {
display: flex;
align-items: center;
gap: 6px;
margin-right: 8px;
}
.bme-theme-dot {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid transparent;
background: var(--dot-color);
cursor: pointer;
padding: 0;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
box-shadow: 0 0 0 0 transparent;
}
.bme-theme-dot:hover {
transform: scale(1.2);
box-shadow: 0 0 6px var(--dot-color);
}
.bme-theme-dot.active {
border-color: var(--bme-on-surface, #e4e1e6);
box-shadow: 0 0 8px var(--dot-color);
}
.bme-panel-close {
width: 28px;
height: 28px;