优化提示词管理界面样式，添加社交链接和描述显示功能；更新设置管理器以支持新提示词描述的加载和显示，提升用户体验。

static/js/settings.js

@@ -176,6 +176,7 @@ class SettingsManager {
         this.temperatureGroup = document.querySelector('.setting-group:has(#temperature)') || 
                               document.querySelector('div.setting-group:has(input[id="temperature"])');
         this.systemPromptInput = document.getElementById('systemPrompt');
+        this.promptDescriptionElement = document.getElementById('promptDescription');
         this.languageInput = document.getElementById('language');
         this.proxyEnabledInput = document.getElementById('proxyEnabled');
         this.proxyHostInput = document.getElementById('proxyHost');
@@ -194,7 +195,7 @@ class SettingsManager {
         this.promptIdInput = document.getElementById('promptId');
         this.promptNameInput = document.getElementById('promptName');
         this.promptContentInput = document.getElementById('promptContent');
-        this.promptDescriptionInput = document.getElementById('promptDescription');
+        this.promptDescriptionInput = document.getElementById('promptDescriptionEdit');
         this.cancelPromptBtn = document.getElementById('cancelPromptBtn');
         this.confirmPromptBtn = document.getElementById('confirmPromptBtn');
         
@@ -690,13 +691,6 @@ class SettingsManager {
             });
         }
         
-        // 系统提示词输入框的变更保存设置
-        this.systemPromptInput.addEventListener('change', (e) => {
-            // 阻止事件冒泡
-            e.stopPropagation();
-            this.saveSettings();
-        });
-
         // 最大Token输入框事件处理
         if (this.maxTokensInput) {
             this.maxTokensInput.addEventListener('change', (e) => {
@@ -1186,34 +1180,56 @@ class SettingsManager {
     }
 
     /**
-     * 加载系统提示词配置
+     * 从服务器加载提示词列表
      */
     async loadPrompts() {
         try {
             // 从服务器获取提示词列表
             const response = await fetch('/api/prompts');
+            
             if (response.ok) {
-                this.prompts = await response.json();
+                // 解析提示词列表
+                const prompts = await response.json();
+                
+                // 保存到本地
+                this.prompts = prompts;
                 
                 // 更新提示词选择下拉框
-                this.updatePromptSelect();
+                if (this.promptSelect) {
+                    this.updatePromptSelect();
+                }
                 
-                // 如果有当前选中的提示词，加载它
-                if (this.currentPromptId && this.prompts[this.currentPromptId]) {
-                    this.loadPrompt(this.currentPromptId);
+                // 如果有默认提示词，加载它
+                if (this.prompts.default) {
+                    this.loadPrompt('default');
                 } else if (Object.keys(this.prompts).length > 0) {
                     // 否则加载第一个提示词
                     this.loadPrompt(Object.keys(this.prompts)[0]);
+                } else {
+                    // 如果没有提示词，显示默认描述
+                    if (this.promptDescriptionElement) {
+                        this.promptDescriptionElement.innerHTML = '<p>暂无提示词，请点击"+"创建新提示词</p>';
+                    }
                 }
                 
-                console.log('提示词配置加载成功');
+                console.log('提示词加载成功:', this.prompts);
             } else {
-                console.error('加载提示词配置失败');
-                window.uiManager?.showToast('加载提示词配置失败', 'error');
+                console.error('加载提示词失败:', response.status, response.statusText);
+                window.uiManager?.showToast('加载提示词失败', 'error');
+                
+                // 显示默认描述
+                if (this.promptDescriptionElement) {
+                    this.promptDescriptionElement.innerHTML = '<p>加载提示词失败，请检查网络连接</p>';
+                }
             }
         } catch (error) {
-            console.error('加载提示词配置出错:', error);
-            window.uiManager?.showToast('加载提示词配置出错', 'error');
+            console.error('加载提示词错误:', error);
+            window.uiManager?.showToast('加载提示词错误: ' + error.message, 'error');
+            
+            // 显示错误描述
+            if (this.promptDescriptionElement) {
+                this.promptDescriptionElement.innerHTML = '<p>加载提示词错误，请检查网络连接</p>';
+            }
         }
     }
     
@@ -1223,20 +1239,29 @@ class SettingsManager {
     updatePromptSelect() {
         if (!this.promptSelect) return;
         
-        // 清空现有选项
+        // 暂存当前选中的提示词ID
+        const currentPromptId = this.promptSelect.value;
+        
+        // 清空下拉框
         this.promptSelect.innerHTML = '';
         
-        // 添加选项
-        for (const [id, prompt] of Object.entries(this.prompts)) {
+        // 添加所有提示词选项
+        for (const promptId in this.prompts) {
+            const prompt = this.prompts[promptId];
             const option = document.createElement('option');
-            option.value = id;
+            option.value = promptId;
             option.textContent = prompt.name;
             this.promptSelect.appendChild(option);
         }
         
-        // 选中当前提示词
-        if (this.currentPromptId && this.prompts[this.currentPromptId]) {
-            this.promptSelect.value = this.currentPromptId;
+        // 恢复之前选中的提示词或选择第一个提示词
+        if (currentPromptId && this.prompts[currentPromptId]) {
+            this.promptSelect.value = currentPromptId;
+        } else if (Object.keys(this.prompts).length > 0) {
+            // 如果之前选中的提示词不存在，选择第一个
+            this.promptSelect.value = Object.keys(this.prompts)[0];
+            // 更新当前提示词ID和描述显示
+            this.loadPrompt(this.promptSelect.value);
         }
     }
     
@@ -1250,9 +1275,15 @@ class SettingsManager {
         // 更新当前提示词ID
         this.currentPromptId = promptId;
         
-        // 更新提示词输入框
+        // 更新提示词输入框 (隐藏，但仍需保存正确的内容)
         this.systemPromptInput.value = this.prompts[promptId].content;
         
+        // 更新提示词描述显示
+        if (this.promptDescriptionElement) {
+            const description = this.prompts[promptId].description || this.prompts[promptId].content;
+            this.promptDescriptionElement.innerHTML = `<p>${description}</p>`;
+        }
+        
         // 更新提示词选择下拉框
         if (this.promptSelect) {
             this.promptSelect.value = promptId;
@@ -1376,8 +1407,11 @@ class SettingsManager {
                     if (promptIds.length > 0) {
                         this.loadPrompt(promptIds[0]);
                     } else {
-                        // 如果没有提示词了，清空输入框
+                        // 如果没有提示词了，清空输入框和描述显示
                         this.systemPromptInput.value = '';
+                        if (this.promptDescriptionElement) {
+                            this.promptDescriptionElement.innerHTML = '<p>暂无提示词，请点击"+"创建新提示词</p>';
+                        }
                         this.currentPromptId = '';
                     }
                     
@@ -1401,7 +1435,7 @@ class SettingsManager {
         // 清空输入框
         this.promptIdInput.value = '';
         this.promptNameInput.value = '';
-        this.promptContentInput.value = this.systemPromptInput.value || '';
+        this.promptContentInput.value = '';
         this.promptDescriptionInput.value = '';
         
         // 启用ID输入框
@@ -1420,6 +1454,12 @@ class SettingsManager {
         const promptId = this.currentPromptId;
         
         if (!promptId || !this.prompts[promptId]) {
+            // 如果没有选择提示词，但有系统提示词内容，将其作为新提示词
+            if (this.systemPromptInput.value.trim()) {
+                this.openNewPromptDialog();
+                return;
+            }
+            
             window.uiManager?.showToast('未选择提示词', 'error');
             return;
         }
@@ -1442,8 +1482,13 @@ class SettingsManager {
      * 关闭提示词对话框
      */
     closePromptDialog() {
-        this.promptDialog.classList.remove('active');
-        this.promptDialogOverlay.classList.remove('active');
+        if (this.promptDialog) {
+            this.promptDialog.classList.remove('active');
+        }
+        
+        if (this.promptDialogOverlay) {
+            this.promptDialogOverlay.classList.remove('active');
+        }
     }
 }
 

static/style.css

@@ -1714,29 +1714,26 @@ button:disabled {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 4rem 2rem;
     text-align: center;
-    color: var(--text-secondary);
+    padding: 2rem;
     height: 100%;
 }
 
 .empty-state i {
-    font-size: 4rem;
-    margin-bottom: 1.5rem;
-    color: var(--border-color);
-    opacity: 0.7;
+    font-size: 3rem;
+    color: var(--text-tertiary);
+    margin-bottom: 1rem;
 }
 
 .empty-state h3 {
     font-size: 1.5rem;
-    font-weight: 600;
     margin-bottom: 1rem;
     color: var(--text-primary);
 }
 
 .empty-state p {
-    font-size: 1rem;
-    max-width: 400px;
+    color: var(--text-secondary);
+    max-width: 600px;
     margin: 0 auto 1.5rem;
     line-height: 1.6;
 }
@@ -1744,7 +1741,8 @@ button:disabled {
 .empty-state .star-prompt {
     color: var(--primary);
     font-weight: 500;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
     font-size: 0.95rem;
 }
 
@@ -1753,6 +1751,68 @@ button:disabled {
     transition: transform 0.2s ease;
 }
 
+/* 空状态社交链接 */
+.empty-state-social {
+    display: flex;
+    gap: 12px;
+    margin-top: 0.5rem;
+}
+
+.social-link {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    text-decoration: none;
+    color: var(--text-secondary);
+    background-color: rgba(var(--surface-rgb), 0.5);
+    border: 1px solid var(--border-color);
+    transition: all 0.25s ease;
+}
+
+.social-link:hover {
+    transform: translateY(-2px);
+    color: var(--primary);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.social-link i {
+    font-size: 0.95rem;
+}
+
+.github-link:hover {
+    background-color: rgba(60, 60, 60, 0.08);
+    border-color: rgba(60, 60, 60, 0.2);
+}
+
+.xiaohongshu-link:hover {
+    background-color: rgba(255, 36, 66, 0.08);
+    border-color: rgba(255, 36, 66, 0.2);
+}
+
+.xiaohongshu-link i {
+    color: #ff2442;
+}
+
+/* 暗色主题社交链接 */
+[data-theme="dark"] .social-link {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .github-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme="dark"] .xiaohongshu-link:hover {
+    background-color: rgba(255, 36, 66, 0.15);
+    border-color: rgba(255, 36, 66, 0.3);
+}
+
 .loading-message {
     text-align: center;
     padding: 2rem;
@@ -1760,13 +1820,6 @@ button:disabled {
     font-style: italic;
 }
 
-.thinking-hint {
-    font-size: 0.8rem;
-    font-weight: normal;
-    color: var(--text-secondary);
-    margin-left: 0.5rem;
-}
-
 /* 响应标题样式 */
 .response-header,
 .response-title,
@@ -3214,6 +3267,27 @@ textarea,
     font-size: 0.9em;
 }
 
+/* 提示词描述样式 */
+.prompt-description {
+    padding: 10px 12px;
+    background-color: rgba(var(--surface-rgb), 0.5);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.5;
+    margin-bottom: 10px;
+}
+
+.prompt-description p {
+    margin: 0;
+}
+
+[data-theme="dark"] .prompt-description {
+    background-color: rgba(255, 255, 255, 0.03);
+    border-color: var(--border-color);
+}
+
 /* 移动端提示词区域优化 */
 @media (max-width: 768px) {
     .prompt-header {
@@ -3237,6 +3311,11 @@ textarea,
     .icon-btn {
         padding: 3px;
     }
+
+    .prompt-description {
+        padding: 8px 10px;
+        font-size: 0.9rem;
+    }
 }
 
 @media (max-width: 480px) {
@@ -3259,6 +3338,11 @@ textarea,
         font-size: 0.9em;
         padding: 2px;
     }
+
+    .prompt-description {
+        padding: 6px 8px;
+        font-size: 0.85rem;
+    }
 }
 
 .icon-btn {

templates/index.html

@@ -65,7 +65,15 @@
                     <i class="fas fa-camera-retro"></i>
                     <h3>准备好开始了吗？</h3>
                     <p>点击顶部状态栏的"相机"图标捕获屏幕，然后使用AI分析图像或提取文本。您可以截取数学题、代码或任何需要帮助的内容。</p>
-                    <p class="star-prompt">如果觉得好用，别忘了给项目点个 Star ⭐</p>
+                    <p class="star-prompt">如果觉得好用，别忘了给Github点个 Star ⭐</p>
+                    <div class="empty-state-social">
+                        <a href="https://github.com/Zippland/Snap-Solver/" target="_blank" class="social-link github-link">
+                            <span>GitHub</span>
+                        </a>
+                        <a href="https://www.xiaohongshu.com/user/profile/623e8b080000000010007721" target="_blank" class="social-link xiaohongshu-link">
+                            <span>小红书</span>
+                        </a>
+                    </div>
                 </div>
                 <div id="imagePreview" class="image-preview hidden">
                     <div class="image-container">
@@ -174,13 +182,12 @@
                     </div>
                     <div class="setting-group prompt-setting-group">
                         <div class="prompt-header">
-                            <label for="systemPrompt"><i class="fas fa-comment-alt"></i> 系统提示词</label>
+                            <label for="promptSelect"><i class="fas fa-comment-alt"></i> 系统提示词</label>
                             <div class="prompt-actions">
                                 <select id="promptSelect" title="选择预设提示词">
-                                    <option value="">-- 选择预设提示词 --</option>
                                 </select>
-                                <button id="savePromptBtn" class="icon-btn" title="保存当前提示词">
-                                    <i class="fas fa-save"></i>
+                                <button id="savePromptBtn" class="icon-btn" title="编辑当前提示词">
+                                    <i class="fas fa-edit"></i>
                                 </button>
                                 <button id="newPromptBtn" class="icon-btn" title="新建提示词">
                                     <i class="fas fa-plus"></i>
@@ -190,7 +197,10 @@
                                 </button>
                             </div>
                         </div>
-                        <textarea id="systemPrompt" rows="3">您是一位专业的问题解决专家。请逐步分析问题，找出问题所在，并提供详细的解决方案。始终使用用户偏好的语言回答。</textarea>
+                        <div id="promptDescription" class="prompt-description">
+                            <p>您是一位专业的问题解决专家。请逐步分析问题，找出问题所在，并提供详细的解决方案。始终使用用户偏好的语言回答。</p>
+                        </div>
+                        <textarea id="systemPrompt" class="hidden">您是一位专业的问题解决专家。请逐步分析问题，找出问题所在，并提供详细的解决方案。始终使用用户偏好的语言回答。</textarea>
                     </div>
                 </div>
 
@@ -416,8 +426,8 @@
             <textarea id="promptContent" placeholder="输入提示词内容..."></textarea>
         </div>
         <div class="form-group">
-            <label for="promptDescription">描述（可选）</label>
-            <input type="text" id="promptDescription" placeholder="简短描述">
+            <label for="promptDescriptionEdit">描述（可选）</label>
+            <input type="text" id="promptDescriptionEdit" placeholder="简短描述">
         </div>
         <div class="dialog-buttons">
             <button class="cancel-btn" id="cancelPromptBtn">取消</button>