mirror of
https://github.com/Youzini-afk/ST-Bionic-Memory-Ecology.git
synced 2026-05-15 22:30:38 +08:00
feat: 主题选择改为标题栏调色盘
- 移除配置页的 select 下拉和面板外观卡片
- 在 header ❌ 左侧添加 4 个彩色圆点(赤红/青蓝/琥珀/紫雾)
- 圆点 hover 发光,active 白色边框高亮
- 汉化主题名称为 title 提示
This commit is contained in:
19
panel.html
19
panel.html
@@ -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>
|
||||
|
||||
22
panel.js
22
panel.js
@@ -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 ?? "")) {
|
||||
|
||||
31
style.css
31
style.css
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user