From 2dd8b7ded898d3dc4b51d24e6751d3b37e0937e9 Mon Sep 17 00:00:00 2001
From: CaasianVale <1544257291@qq.com>
Date: Sat, 8 Mar 2025 03:09:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E4=BB=A4=E7=89=8C=E5=92=8Cnginx=E4=B8=AD/test=5Fapi=5Fconnecti?=
 =?UTF-8?q?on=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/nginx.conf                          |   9 ++
 frontend/src/assets/css/global.css           |  59 ++++++++++
 frontend/src/components/ApiConfigPanel.vue   | 109 +++++++++++--------
 frontend/src/components/StockAnalysisApp.vue |  22 +++-
 frontend/src/main.ts                         |   1 +
 frontend/src/style.css                       |  38 ++++++-
 6 files changed, 190 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/assets/css/global.css

diff --git a/frontend/nginx.conf b/frontend/nginx.conf
index d07268f..3808961 100644
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -72,6 +72,15 @@ server {
         proxy_read_timeout 300s;
     }
 
+    location /test_api_connection {
+        proxy_pass http://backend:8888/test_api_connection;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_cache_bypass $http_upgrade;
+    }
+
     # 所有其他路由返回index.html（SPA应用需要）
     location / {
         try_files $uri $uri/ /index.html;
diff --git a/frontend/src/assets/css/global.css b/frontend/src/assets/css/global.css
new file mode 100644
index 0000000..08b5b62
--- /dev/null
+++ b/frontend/src/assets/css/global.css
@@ -0,0 +1,59 @@
+/* 全局样式覆盖 - 专门针对Naive UI组件 */
+
+/* 移除所有Naive UI按钮的焦点边框 */
+.n-button:focus,
+.n-button:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* 为主要按钮添加自定义焦点样式 */
+.n-button--primary:focus,
+.n-button--primary:focus-visible {
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(32, 128, 240, 0.2) !important;
+}
+
+/* 输入框和下拉菜单的焦点样式 */
+.n-input:focus-within,
+.n-input-number:focus-within,
+.n-select:focus-within {
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(32, 128, 240, 0.2) !important;
+}
+
+/* 标签的焦点样式 */
+.n-tag:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* 移除所有元素的黑色边框 */
+*:focus {
+  outline: none !important;
+}
+
+/* 移除移动设备上的点击高亮 */
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 修复Firefox特定的焦点样式 */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+}
+
+/* 确保所有按钮在点击后不显示边框 */
+button:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* 确保所有输入框在点击后显示自定义边框 */
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(32, 128, 240, 0.2) !important;
+} 
\ No newline at end of file
diff --git a/frontend/src/components/ApiConfigPanel.vue b/frontend/src/components/ApiConfigPanel.vue
index 2886359..3b02555 100644
--- a/frontend/src/components/ApiConfigPanel.vue
+++ b/frontend/src/components/ApiConfigPanel.vue
@@ -146,11 +146,17 @@
 
         <div class="api-actions">
           <div class="api-save-option">
-            <n-switch 
-              v-model:value="apiConfig.saveApiConfig"
-              @update:value="handleConfigChange"
-            />
-            <span class="save-label">保存配置到本地</span>
+            <n-button 
+              tertiary
+              size="small"
+              @click="saveConfig"
+              round
+            >
+              <template #icon>
+                <n-icon :component="SaveIcon" />
+              </template>
+              保存配置到本地
+            </n-button>
           </div>
           
           <div class="api-buttons">
@@ -188,7 +194,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, markRaw } from 'vue';
 import { 
   NButton, 
   NIcon, 
@@ -219,12 +225,14 @@ import {
   RemoveOutline as RemoveIcon,
   CheckmarkCircle as SuccessIcon,
   CloseCircle as ErrorIcon,
-  CodeSlashOutline as CodeIcon
+  CodeSlashOutline as CodeIcon,
+  SaveOutline as SaveIcon
 } from '@vicons/ionicons5';
 import { apiService } from '@/services/api';
 import { saveApiConfigToLocalStorage, loadApiConfig } from '@/utils';
 import type { ApiConfig } from '@/types';
 
+// 出于安全考虑，API KEY不会显示在前端
 const props = defineProps<{
   defaultApiUrl?: string;
   defaultApiModel?: string;
@@ -276,7 +284,7 @@ const apiConfig = ref<ApiConfig>({
   apiKey: '',
   apiModel: props.defaultApiModel || '',
   apiTimeout: props.defaultApiTimeout || '60',
-  saveApiConfig: false
+  saveApiConfig: true // 默认启用保存配置
 });
 
 const apiTimeout = computed({
@@ -301,39 +309,35 @@ function toggleConfig() {
 function handleConfigChange() {
   console.log('API配置变更:', apiConfig.value);
   
-  // 如果选择了保存配置，则自动保存
-  if (apiConfig.value.saveApiConfig) {
-    saveApiConfigToLocalStorage({
-      apiUrl: apiConfig.value.apiUrl,
-      apiKey: apiConfig.value.apiKey,
-      apiModel: apiConfig.value.apiModel,
-      apiTimeout: apiConfig.value.apiTimeout,
-      saveApiConfig: true
-    });
-  }
-  
-  // 向父组件发送更新事件
+  // 不再在每次配置变更时自动保存
+  // 仅向父组件发送更新事件
   emit('update:apiConfig', { ...apiConfig.value });
 }
 
 function handleTimeoutChange(value: number | null) {
   if (value !== null) {
     apiConfig.value.apiTimeout = value.toString();
-    handleConfigChange();
+    
+    // 仅通知父组件更新，不自动保存
+    emit('update:apiConfig', { ...apiConfig.value });
   }
 }
 
 function increaseTimeout() {
   if (apiTimeout.value < 300) {
     apiTimeout.value += 10;
-    handleTimeoutChange(apiTimeout.value);
+    
+    // 通知父组件
+    emit('update:apiConfig', { ...apiConfig.value });
   }
 }
 
 function decreaseTimeout() {
   if (apiTimeout.value > 10) {
     apiTimeout.value -= 10;
-    handleTimeoutChange(apiTimeout.value);
+    
+    // 通知父组件
+    emit('update:apiConfig', { ...apiConfig.value });
   }
 }
 
@@ -377,25 +381,14 @@ async function testConnection() {
       connectionStatus.value = {
         type: 'success',
         message: '连接成功！API配置有效。',
-        icon: SuccessIcon
+        icon: markRaw(SuccessIcon)
       };
-      
-      // 如果选择了保存配置，则保存
-      if (apiConfig.value.saveApiConfig) {
-        saveApiConfigToLocalStorage({
-          apiUrl: apiConfig.value.apiUrl,
-          apiKey: apiConfig.value.apiKey,
-          apiModel: apiConfig.value.apiModel,
-          apiTimeout: apiConfig.value.apiTimeout,
-          saveApiConfig: true
-        });
-      }
     } else {
       message.error(`API连接测试失败: ${response.message}`);
       connectionStatus.value = {
         type: 'error',
         message: `连接失败: ${response.message}`,
-        icon: ErrorIcon
+        icon: markRaw(ErrorIcon)
       };
     }
   } catch (error: any) {
@@ -403,7 +396,7 @@ async function testConnection() {
     connectionStatus.value = {
       type: 'error',
       message: `连接错误: ${error.message || '未知错误'}`,
-      icon: ErrorIcon
+      icon: markRaw(ErrorIcon)
     };
   } finally {
     testingConnection.value = false;
@@ -416,16 +409,18 @@ function resetConfig() {
     apiKey: '',
     apiModel: props.defaultApiModel || '',
     apiTimeout: props.defaultApiTimeout || '60',
-    saveApiConfig: false
+    saveApiConfig: true
   };
   
   // 清除本地存储
   if (window.localStorage) {
     localStorage.removeItem('apiConfig');
+    message.success('已重置API配置并清除本地存储');
+  } else {
+    message.success('已重置API配置');
   }
   
   connectionStatus.value = null;
-  message.success('已重置API配置');
   emit('update:apiConfig', { ...apiConfig.value });
 }
 
@@ -433,7 +428,21 @@ function resetConfig() {
 function selectModel(key: string) {
   console.log('选择模型:', key);
   apiConfig.value.apiModel = key;
-  handleConfigChange();
+  
+  // 通知父组件
+  emit('update:apiConfig', { ...apiConfig.value });
+}
+
+// 显式保存配置的函数
+function saveConfig() {
+  saveApiConfigToLocalStorage({
+    apiUrl: apiConfig.value.apiUrl,
+    apiKey: apiConfig.value.apiKey,
+    apiModel: apiConfig.value.apiModel,
+    apiTimeout: apiConfig.value.apiTimeout,
+    saveApiConfig: true
+  });
+  message.success('已将配置保存到本地');
 }
 
 onMounted(() => {
@@ -528,15 +537,27 @@ onMounted(() => {
 .api-save-option {
   display: flex;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.02);
   padding: 6px 12px;
   border-radius: 16px;
 }
 
-.save-label {
-  margin-left: 0.5rem;
-  font-size: 0.875rem;
+.api-save-option button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
   font-weight: 500;
+  background-color: rgba(0, 0, 0, 0.02);
+  transition: all 0.2s ease;
+}
+
+.api-save-option button:hover {
+  background-color: rgba(32, 128, 240, 0.08);
+  transform: translateY(-1px);
+}
+
+.api-save-option button .n-icon {
+  font-size: 16px;
 }
 
 .api-buttons {
diff --git a/frontend/src/components/StockAnalysisApp.vue b/frontend/src/components/StockAnalysisApp.vue
index c3ec27e..88b0fd3 100644
--- a/frontend/src/components/StockAnalysisApp.vue
+++ b/frontend/src/components/StockAnalysisApp.vue
@@ -603,16 +603,32 @@ async function analyzeStocks() {
       requestData.api_timeout = apiConfig.value.apiTimeout;
     }
     
+    // 获取身份验证令牌
+    const token = localStorage.getItem('token');
+    
+    // 构建请求头
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json'
+    };
+    
+    // 如果有令牌，添加到请求头
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+    
     // 发送分析请求
     const response = await fetch('/analyze', {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
+      headers,
       body: JSON.stringify(requestData)
     });
     
     if (!response.ok) {
+      if (response.status === 401) {
+        message.error('未授权访问，请登录后再试');
+        // 可以在这里触发登录流程
+        return;
+      }
       if (response.status === 404) {
         throw new Error('服务器接口未找到，请检查服务是否正常运行');
       }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e3a485c..1c6a4c4 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
+import './assets/css/global.css'
 import App from './App.vue'
 import router from './router'
 
diff --git a/frontend/src/style.css b/frontend/src/style.css
index f691315..cfc7325 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -51,7 +51,8 @@ button:hover {
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(32, 128, 240, 0.2) !important;
 }
 
 .card {
@@ -77,3 +78,38 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* 全局移除黑色边框 */
+*:focus {
+  outline: none !important;
+}
+
+/* 输入框和表单元素的焦点样式 */
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(32, 128, 240, 0.2) !important;
+}
+
+/* 移除移动设备上的点击高亮 */
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 修复Firefox特定的焦点样式 */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+}
+
+/* Naive UI组件的焦点样式 */
+.n-button:focus,
+.n-button:focus-visible,
+.n-input:focus-within,
+.n-input-number:focus-within,
+.n-select:focus-within,
+.n-tag:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(32, 128, 240, 0.2) !important;
+}