From 428870511717c5760e8a81a098f7f58bec2cb98b Mon Sep 17 00:00:00 2001
From: Youzini-afk <13153778771cx@gmail.com>
Date: Tue, 24 Mar 2026 17:36:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A2=98=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E6=A0=87=E9=A2=98=E6=A0=8F=E8=B0=83=E8=89=B2?=
 =?UTF-8?q?=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除配置页的 select 下拉和面板外观卡片
- 在 header ❌ 左侧添加 4 个彩色圆点（赤红/青蓝/琥珀/紫雾）
- 圆点 hover 发光，active 白色边框高亮
- 汉化主题名称为 title 提示
---
 panel.html | 19 +++++++------------
 panel.js   | 22 ++++++++++++++++++----
 style.css  | 31 +++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/panel.html b/panel.html
index 22ae99d..821f86e 100644
--- a/panel.html
+++ b/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>
diff --git a/panel.js b/panel.js
index 0778d82..43b4673 100644
--- a/panel.js
+++ b/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 ?? "")) {
diff --git a/style.css b/style.css
index 5985f31..293a377 100644
--- a/style.css
+++ b/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;