feat: api 隐藏可选

给api添加了隐藏选项

feat: api 隐藏可选
给api添加了隐藏选项
刘硕 · BaiFu
Commit 516f37bd25b28d3f9aeee42500a802fa42649ae3 516f37bd 1 parent b6c5c418
Showing 1 changed file with 87 additions and 23 deletions
templates/index.html
--- a/templates/index.html
View file @516f37b
+++ b/templates/index.html
View file @516f37b
@@ -83,19 +83,38 @@
         }
         .config-password-toggle {
-            padding: 8px 14px;
+            padding: 8px 12px;
             border: 2px solid #000000;
             background-color: #ffffff;
             cursor: pointer;
-            font-size: 12px;
-            font-weight: bold;
+            font-size: 0;
             transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 44px;
+            min-height: 38px;
+        }
+
+        .config-password-toggle svg {
+            width: 20px;
+            height: 20px;
+            stroke: #000000;
+            fill: none;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            transition: stroke 0.3s ease;
         }
         .config-password-toggle:hover,
         .config-password-toggle.revealed {
             background-color: #000000;
-            color: #ffffff;
+        }
+
+        .config-password-toggle:hover svg,
+        .config-password-toggle.revealed svg {
+            stroke: #ffffff;
         }
         .search-box {
@@ -1163,7 +1182,7 @@
                 title: 'Insight Agent',
                 subtitle: '负责洞察分析的模型配置',
                 fields: [
-                    { key: 'INSIGHT_ENGINE_API_KEY', label: 'API Key' },
+                    { key: 'INSIGHT_ENGINE_API_KEY', label: 'API Key', type: 'password' },
                     { key: 'INSIGHT_ENGINE_BASE_URL', label: 'Base URL' },
                     { key: 'INSIGHT_ENGINE_MODEL_NAME', label: '模型名称' }
                 ]
@@ -1172,7 +1191,7 @@
                 title: 'Media Agent',
                 subtitle: '媒体内容理解与生成模型',
                 fields: [
-                    { key: 'MEDIA_ENGINE_API_KEY', label: 'API Key' },
+                    { key: 'MEDIA_ENGINE_API_KEY', label: 'API Key', type: 'password' },
                     { key: 'MEDIA_ENGINE_BASE_URL', label: 'Base URL' },
                     { key: 'MEDIA_ENGINE_MODEL_NAME', label: '模型名称' }
                 ]
@@ -1181,7 +1200,7 @@
                 title: 'Query Agent',
                 subtitle: '负责搜索与信息汇总的模型配置',
                 fields: [
-                    { key: 'QUERY_ENGINE_API_KEY', label: 'API Key' },
+                    { key: 'QUERY_ENGINE_API_KEY', label: 'API Key', type: 'password' },
                     { key: 'QUERY_ENGINE_BASE_URL', label: 'Base URL' },
                     { key: 'QUERY_ENGINE_MODEL_NAME', label: '模型名称' }
                 ]
@@ -1190,7 +1209,7 @@
                 title: 'Report Agent',
                 subtitle: '报告生成使用的模型配置',
                 fields: [
-                    { key: 'REPORT_ENGINE_API_KEY', label: 'API Key' },
+                    { key: 'REPORT_ENGINE_API_KEY', label: 'API Key', type: 'password' },
                     { key: 'REPORT_ENGINE_BASE_URL', label: 'Base URL' },
                     { key: 'REPORT_ENGINE_MODEL_NAME', label: '模型名称' }
                 ]
@@ -1199,7 +1218,7 @@
                 title: 'Forum Host',
                 subtitle: '多智能体协同使用的模型配置',
                 fields: [
-                    { key: 'FORUM_HOST_API_KEY', label: 'API Key' },
+                    { key: 'FORUM_HOST_API_KEY', label: 'API Key', type: 'password' },
                     { key: 'FORUM_HOST_BASE_URL', label: 'Base URL' },
                     { key: 'FORUM_HOST_MODEL_NAME', label: '模型名称' }
                 ]
@@ -1208,7 +1227,7 @@
                 title: 'Keyword Optimizer',
                 subtitle: 'SQL / 关键词优化模型配置',
                 fields: [
-                    { key: 'KEYWORD_OPTIMIZER_API_KEY', label: 'API Key' },
+                    { key: 'KEYWORD_OPTIMIZER_API_KEY', label: 'API Key', type: 'password' },
                     { key: 'KEYWORD_OPTIMIZER_BASE_URL', label: 'Base URL' },
                     { key: 'KEYWORD_OPTIMIZER_MODEL_NAME', label: '模型名称' }
                 ]
@@ -1217,8 +1236,8 @@
                 title: '外部检索工具',
                 subtitle: '联动搜索引擎、网站抓取等在线服务',
                 fields: [
-                    { key: 'TAVILY_API_KEY', label: 'Tavily API Key' },
-                    { key: 'BOCHA_WEB_SEARCH_API_KEY', label: 'Bocha API Key' }
+                    { key: 'TAVILY_API_KEY', label: 'Tavily API Key', type: 'password' },
+                    { key: 'BOCHA_WEB_SEARCH_API_KEY', label: 'Bocha API Key', type: 'password' }
                 ]
             }
         ];
@@ -1251,6 +1270,9 @@
             checkStatus();
             setInterval(checkStatus, 5000);
+            // 初始化密码切换功能（事件委托，只需调用一次）
+            attachConfigPasswordToggles();
+            
             // 初始化Report Engine锁定状态检查
             checkReportLockStatus();
             reportLockCheckInterval = setInterval(checkReportLockStatus, 10000); // 每10秒检查一次
@@ -1520,10 +1542,19 @@
                                 autocomplete="off"
                             >
                         `;
+                        // 眼睛图标 - 闭眼状态（默认隐藏密码）
+                        const eyeOffIcon = `
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                                <line x1="1" y1="1" x2="23" y2="23"></line>
+                            </svg>
+                        `;
                         control = `
                             <div class="config-password-wrapper">
                                 ${inputElement}
-                                <button type="button" class="config-password-toggle" data-target="${field.key}">显示</button>
+                                <button type="button" class="config-password-toggle" data-target="${field.key}" title="显示/隐藏密码">
+                                    ${eyeOffIcon}
+                                </button>
                             </div>
                         `;
                     } else {
@@ -1562,24 +1593,57 @@
             }).join('');
             container.innerHTML = sections;
-            attachConfigPasswordToggles();
+            // 不再需要每次调用 attachConfigPasswordToggles
+            // 事件委托已在页面初始化时设置
         }
         function attachConfigPasswordToggles() {
-            const toggles = document.querySelectorAll('.config-password-toggle');
-            toggles.forEach(toggle => {
+            // 定义眼睛图标的SVG
+            const eyeOffIcon = `
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                    <line x1="1" y1="1" x2="23" y2="23"></line>
+                </svg>
+            `;
+            const eyeOnIcon = `
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                    <circle cx="12" cy="12" r="3"></circle>
+                </svg>
+            `;
+            
+            // 使用事件委托，只在容器上绑定一次事件
+            const container = document.getElementById('configFormContainer');
+            if (!container) {
+                return;
+            }
+            
+            // 防止重复绑定
+            if (container.dataset.passwordToggleAttached === 'true') {
+                return;
+            }
+            
+            container.addEventListener('click', (event) => {
+                // 查找是否点击了密码切换按钮或其内部的SVG
+                const toggle = event.target.closest('.config-password-toggle');
+                if (!toggle) {
+                    return;
+                }
+                
                 const key = toggle.dataset.target;
-                const input = document.querySelector(`.config-field-input[data-config-key="${key}"]`);
+                const input = container.querySelector(`.config-field-input[data-config-key="${key}"]`);
                 if (!input) {
                     return;
                 }
-                toggle.addEventListener('click', () => {
-                    const reveal = input.getAttribute('type') === 'password';
-                    input.setAttribute('type', reveal ? 'text' : 'password');
-                    toggle.textContent = reveal ? '隐藏' : '显示';
-                    toggle.classList.toggle('revealed', reveal);
-                });
+                
+                const reveal = input.getAttribute('type') === 'password';
+                input.setAttribute('type', reveal ? 'text' : 'password');
+                toggle.innerHTML = reveal ? eyeOnIcon : eyeOffIcon;
+                toggle.classList.toggle('revealed', reveal);
             });
+            
+            // 标记已绑定，防止重复
+            container.dataset.passwordToggleAttached = 'true';
         }
         function collectConfigUpdates() {