From 7dc9aa510a96a8bb904a3913110eab48f5a2ec3c Mon Sep 17 00:00:00 2001
From: Minidoracat <minidora0702@gmail.com>
Date: Fri, 13 Jun 2025 14:32:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E4=BF=AE=E6=94=B9=E8=AA=9E?=
 =?UTF-8?q?=E7=B3=BB=E9=81=B8=E6=93=87=E7=9A=84=E6=A8=A3=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/static/css/styles.css                 | 31 ++++++++++++++++++-
 .../web/static/js/i18n.js                     | 10 ++++--
 .../web/static/js/modules/settings-manager.js | 21 +++++++++++--
 .../web/templates/feedback.html               | 21 ++++---------
 4 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/src/mcp_feedback_enhanced/web/static/css/styles.css b/src/mcp_feedback_enhanced/web/static/css/styles.css
index d90d52a..f297ba1 100644
--- a/src/mcp_feedback_enhanced/web/static/css/styles.css
+++ b/src/mcp_feedback_enhanced/web/static/css/styles.css
@@ -617,7 +617,7 @@ body {
     background: rgba(0, 122, 204, 0.15);
 }
 
-/* 語言選擇器現代化樣式 */
+/* 語言選擇器現代化樣式 - 保留用於兼容性 */
 .language-selector-modern {
     display: flex;
     align-items: center;
@@ -668,6 +668,35 @@ body {
     color: white;
 }
 
+/* 語言選擇器下拉選單樣式 */
+.language-selector-dropdown {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.language-setting-select {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 14px;
+    min-width: 140px;
+    transition: border-color 0.3s ease;
+    cursor: pointer;
+}
+
+.language-setting-select:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
+}
+
+.language-setting-select:hover {
+    border-color: var(--accent-color);
+}
+
 /* 表單元素樣式 */
 .input-group {
     margin-bottom: 20px;
diff --git a/src/mcp_feedback_enhanced/web/static/js/i18n.js b/src/mcp_feedback_enhanced/web/static/js/i18n.js
index 067a30a..8afe4dd 100644
--- a/src/mcp_feedback_enhanced/web/static/js/i18n.js
+++ b/src/mcp_feedback_enhanced/web/static/js/i18n.js
@@ -265,14 +265,18 @@ class I18nManager {
     }
 
     setupLanguageSelectors() {
-        // 舊版下拉選擇器（兼容性保留）
+        // 設定頁籤的下拉選擇器
         const selector = document.getElementById('settingsLanguageSelect');
         if (selector) {
             // 設置當前值
             selector.value = this.currentLanguage;
-            
+
+            // 移除舊的事件監聽器（避免重複綁定）
+            const newSelector = selector.cloneNode(true);
+            selector.parentNode.replaceChild(newSelector, selector);
+
             // 添加事件監聽器
-            selector.addEventListener('change', (e) => {
+            newSelector.addEventListener('change', (e) => {
                 this.setLanguage(e.target.value);
             });
         }
diff --git a/src/mcp_feedback_enhanced/web/static/js/modules/settings-manager.js b/src/mcp_feedback_enhanced/web/static/js/modules/settings-manager.js
index 965f423..400bc96 100644
--- a/src/mcp_feedback_enhanced/web/static/js/modules/settings-manager.js
+++ b/src/mcp_feedback_enhanced/web/static/js/modules/settings-manager.js
@@ -351,8 +351,14 @@
                 window.i18nManager.setLanguage(this.currentSettings.language);
             }
         }
-        
-        // 更新語言選項顯示
+
+        // 更新下拉選單選項
+        const languageSelect = Utils.safeQuerySelector('#settingsLanguageSelect');
+        if (languageSelect) {
+            languageSelect.value = this.currentSettings.language;
+        }
+
+        // 更新語言選項顯示（兼容舊版卡片式選擇器）
         const languageOptions = document.querySelectorAll('.language-option');
         languageOptions.forEach(function(option) {
             option.classList.toggle('active', option.getAttribute('data-lang') === this.currentSettings.language);
@@ -400,7 +406,16 @@
             });
         }
 
-        // 語言切換
+        // 語言切換 - 支援下拉選單
+        const languageSelect = Utils.safeQuerySelector('#settingsLanguageSelect');
+        if (languageSelect) {
+            languageSelect.addEventListener('change', function(e) {
+                const lang = e.target.value;
+                self.set('language', lang);
+            });
+        }
+
+        // 語言切換 - 兼容舊版卡片式選擇器
         const languageOptions = document.querySelectorAll('.language-option');
         languageOptions.forEach(function(option) {
             option.addEventListener('click', function() {
diff --git a/src/mcp_feedback_enhanced/web/templates/feedback.html b/src/mcp_feedback_enhanced/web/templates/feedback.html
index 85f660e..7199fe6 100644
--- a/src/mcp_feedback_enhanced/web/templates/feedback.html
+++ b/src/mcp_feedback_enhanced/web/templates/feedback.html
@@ -732,21 +732,12 @@
                                     選擇界面顯示語言
                                 </div>
                             </div>
-                            <div class="language-selector-modern">
-                                <div class="language-options">
-                                    <div class="language-option" data-lang="zh-TW">
-                                        <div class="language-flag">🌏</div>
-                                        <div class="language-name">繁體中文</div>
-                                    </div>
-                                    <div class="language-option" data-lang="zh-CN">
-                                        <div class="language-flag">🌍</div>
-                                        <div class="language-name">简体中文</div>
-                                    </div>
-                                    <div class="language-option" data-lang="en">
-                                        <div class="language-flag">🌎</div>
-                                        <div class="language-name">English</div>
-                                    </div>
-                                </div>
+                            <div class="language-selector-dropdown">
+                                <select id="settingsLanguageSelect" class="language-setting-select">
+                                    <option value="zh-TW" data-i18n="languages.zh-TW">繁體中文</option>
+                                    <option value="zh-CN" data-i18n="languages.zh-CN">简体中文</option>
+                                    <option value="en" data-i18n="languages.en">English</option>
+                                </select>
                             </div>
                         </div>
                     </div>