From 6daea9a5a185dcc291f3307cbef2bac72dca6cd2 Mon Sep 17 00:00:00 2001
From: Wonder <hezhaohui0807@163.com>
Date: Sun, 5 Oct 2025 18:12:51 +0800
Subject: [PATCH] =?UTF-8?q?=20=F0=9F=94=84Update:=20T3/=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E5=88=9D=E6=AD=A5=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json              |   7 +
 frontend/package.json                   |   1 +
 frontend/src/App.vue                    |  79 ++++-
 frontend/src/assets/main.css            | 139 +++++++--
 frontend/src/components/ChatPanel.vue   | 386 ++++++++++++++++++++++++
 frontend/src/components/ConfigPanel.vue | 369 ++++++++++++++++++++++
 frontend/src/main.js                    |   6 +-
 frontend/src/utils/encryption.js        |  36 +++
 8 files changed, 993 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/components/ChatPanel.vue
 create mode 100644 frontend/src/components/ConfigPanel.vue
 create mode 100644 frontend/src/utils/encryption.js

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 978f918..5ee32d9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "crypto-js": "^4.2.0",
         "vue": "^3.5.22"
       },
       "devDependencies": {
@@ -1686,6 +1687,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f764a6a..6e8152a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "crypto-js": "^4.2.0",
     "vue": "^3.5.22"
   },
   "devDependencies": {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index af9fa97..e3fff03 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,3 +1,80 @@
 <template>
+  <div class="app-container">
+    <header class="app-header">
+      <h1>AI API 配置与对话工具</h1>
+      <p>快速配置主流厂商API并进行对话测试</p>
+    </header>
 
-</template>
\ No newline at end of file
+    <main class="app-main">
+      <!-- 配置区域 -->
+      <section class="config-section">
+        <h2>厂商配置</h2>
+        <ConfigPanel />
+      </section>
+
+      <!-- 对话区域 -->
+      <section class="chat-section">
+        <h2>AI 对话</h2>
+        <ChatPanel />
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import ConfigPanel from './components/ConfigPanel.vue'
+import ChatPanel from './components/ChatPanel.vue'
+</script>
+
+<style scoped>
+.app-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.app-header {
+  text-align: center;
+  margin-bottom: 30px;
+  padding: 20px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+
+.app-header h1 {
+  margin: 0;
+  color: #333;
+}
+
+.app-header p {
+  margin: 10px 0 0 0;
+  color: #666;
+}
+
+.app-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+}
+
+.config-section, .chat-section {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.config-section h2, .chat-section h2 {
+  margin-top: 0;
+  color: #333;
+  border-bottom: 2px solid #007bff;
+  padding-bottom: 10px;
+}
+
+@media (max-width: 768px) {
+  .app-main {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 67f3a04..41ec21e 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,34 +1,117 @@
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+/* 全局样式 */
+* {
+  box-sizing: border-box;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #f5f7fa;
+  color: #333;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+/* 重置默认样式 */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* 表单样式 */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  color: #212529;
+  background-color: #fff;
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+/* 按钮样式 */
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.btn-primary:hover {
+  color: #fff;
+  background-color: #0069d9;
+  border-color: #0062cc;
+}
+
+.btn-primary:disabled {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .app-container {
+    padding: 10px;
   }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
+  
+  .app-main {
+    grid-template-columns: 1fr;
   }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
new file mode 100644
index 0000000..e0ce462
--- /dev/null
+++ b/frontend/src/components/ChatPanel.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="chat-panel">
+    <!-- 厂商选择器 -->
+    <div class="form-group">
+      <label for="chat-platform">选择厂商</label>
+      <select id="chat-platform" v-model="selectedPlatform" :disabled="!configuredPlatforms.length">
+        <option value="">请选择厂商</option>
+        <option v-for="platform in configuredPlatforms" :key="platform.id" :value="platform.id">
+          {{ platform.name }}
+        </option>
+      </select>
+    </div>
+
+    <!-- 对话输入框 -->
+    <div class="form-group">
+      <label for="user-input">输入问题</label>
+      <textarea 
+        id="user-input" 
+        v-model="userInput" 
+        placeholder="请输入您的问题..." 
+        :disabled="!selectedPlatform || isSending"
+        rows="4"
+      ></textarea>
+    </div>
+
+    <!-- 发送按钮 -->
+    <div class="form-group">
+      <button @click="sendMessage" :disabled="!canSend || isSending" class="send-btn">
+        {{ isSending ? '发送中...' : '发送' }}
+      </button>
+    </div>
+
+    <!-- 响应显示区域 -->
+    <div v-if="responseMessage" class="response-area">
+      <h3>AI 响应</h3>
+      <div class="response-content" v-html="responseMessage"></div>
+    </div>
+
+    <!-- 错误信息显示 -->
+    <div v-if="errorMessage" class="error-message">
+      {{ errorMessage }}
+    </div>
+
+    <!-- 提示信息 -->
+    <div v-if="!configuredPlatforms.length" class="info-message">
+      <p>请先在配置页面添加厂商配置</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { decrypt } from '../utils/encryption'
+
+// 响应式数据
+const userInput = ref('')
+const selectedPlatform = ref('')
+const responseMessage = ref('')
+const errorMessage = ref('')
+const isSending = ref(false)
+const configuredPlatforms = ref([])
+
+// 计算属性
+const canSend = computed(() => {
+  return selectedPlatform.value && userInput.value.trim() !== ''
+})
+
+// 从localStorage加载已配置的厂商
+const loadConfiguredPlatforms = () => {
+  try {
+    const stored = localStorage.getItem('ai-api-configs')
+    if (stored) {
+      const configs = JSON.parse(stored)
+      configuredPlatforms.value = configs.map(config => {
+        // 这里需要根据实际的平台配置来构建完整信息
+        // 为简化实现，我们只保留必要的信息
+        return {
+          id: config.id,
+          name: getPlatformName(config.id)
+        }
+      })
+    }
+  } catch (error) {
+    console.error('加载配置失败:', error)
+  }
+}
+
+// 获取平台名称
+const getPlatformName = (platformId) => {
+  const platforms = [
+    { id: 'openai', name: 'OpenAI' },
+    { id: 'anthropic', name: 'Anthropic' },
+    { id: 'google', name: 'Google (Gemini)' },
+    { id: 'qwen', name: '通义千问（阿里云）' },
+    { id: 'wenxin', name: '文心一言（百度）' }
+  ]
+  const platform = platforms.find(p => p.id === platformId)
+  return platform ? platform.name : platformId
+}
+
+// 发送消息
+const sendMessage = async () => {
+  if (!canSend.value) return
+  
+  isSending.value = true
+  responseMessage.value = ''
+  errorMessage.value = ''
+  
+  try {
+    // 获取选中的平台配置
+    const platformConfig = configuredPlatforms.value.find(p => p.id === selectedPlatform.value)
+    if (!platformConfig) {
+      throw new Error('未找到厂商配置')
+    }
+    
+    // 从localStorage获取密钥
+    const stored = localStorage.getItem('ai-api-configs')
+    if (!stored) {
+      throw new Error('未找到厂商配置')
+    }
+    
+    const configs = JSON.parse(stored)
+    const config = configs.find(c => c.id === selectedPlatform.value)
+    if (!config) {
+      throw new Error('未找到厂商配置')
+    }
+    
+    // 解密密钥
+    const apiKey = decrypt(config.apiKey)
+    
+    // 调用API
+    const result = await callAIPlatform(selectedPlatform.value, apiKey, config.endpoint, userInput.value)
+    
+    // 显示响应
+    responseMessage.value = result
+  } catch (error) {
+    console.error('发送消息失败:', error)
+    errorMessage.value = error.message || '发送消息失败，请重试'
+  } finally {
+    isSending.value = false
+  }
+}
+
+// 调用AI平台API
+const callAIPlatform = async (platformId, apiKey, endpoint, message) => {
+  // 根据不同平台调用不同的API
+  switch (platformId) {
+    case 'openai':
+      return await callOpenAI(apiKey, endpoint, message)
+    case 'anthropic':
+      return await callAnthropic(apiKey, endpoint, message)
+    case 'google':
+      return await callGoogle(apiKey, endpoint, message)
+    case 'qwen':
+      return await callQwen(apiKey, endpoint, message)
+    case 'wenxin':
+      return await callWenxin(apiKey, endpoint, message)
+    default:
+      throw new Error(`不支持的厂商: ${platformId}`)
+  }
+}
+
+// 调用OpenAI API
+const callOpenAI = async (apiKey, endpoint, message) => {
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${apiKey}`
+    },
+    body: JSON.stringify({
+      model: 'gpt-3.5-turbo',
+      messages: [{ role: 'user', content: message }],
+      temperature: 0.7
+    })
+  })
+  
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(`OpenAI API 调用失败 (${response.status}): ${errorData.error?.message || '未知错误'}`)
+  }
+  
+  const data = await response.json()
+  return data.choices[0]?.message?.content || '未获取到响应内容'
+}
+
+// 调用Anthropic API
+const callAnthropic = async (apiKey, endpoint, message) => {
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': apiKey,
+      'anthropic-version': '2023-06-01'
+    },
+    body: JSON.stringify({
+      model: 'claude-3-haiku-20240307',
+      messages: [{ role: 'user', content: message }],
+      max_tokens: 1024
+    })
+  })
+  
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(`Anthropic API 调用失败 (${response.status}): ${errorData.error?.message || '未知错误'}`)
+  }
+  
+  const data = await response.json()
+  return data.content[0]?.text || '未获取到响应内容'
+}
+
+// 调用Google Gemini API
+const callGoogle = async (apiKey, endpoint, message) => {
+  const response = await fetch(`${endpoint}?key=${apiKey}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      contents: [{
+        parts: [
+          { text: message }
+        ]
+      }]
+    })
+  })
+  
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(`Google API 调用失败 (${response.status}): ${errorData.error?.message || '未知错误'}`)
+  }
+  
+  const data = await response.json()
+  return data.candidates[0]?.content?.parts[0]?.text || '未获取到响应内容'
+}
+
+// 调用通义千问API
+const callQwen = async (apiKey, endpoint, message) => {
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${apiKey}`,
+      'X-DashScope-Scene': 'chat'
+    },
+    body: JSON.stringify({
+      model: 'qwen-plus',
+      input: {
+        messages: [{ role: 'user', content: message }]
+      },
+      parameters: {
+        result_format: 'message'
+      }
+    })
+  })
+  
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(`通义千问 API 调用失败 (${response.status}): ${errorData.error?.message || '未知错误'}`)
+  }
+  
+  const data = await response.json()
+  return data.output?.choices[0]?.message?.content || '未获取到响应内容'
+}
+
+// 调用文心一言API
+const callWenxin = async (apiKey, endpoint, message) => {
+  const response = await fetch(`${endpoint}?access_token=${apiKey}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      messages: [{ role: 'user', content: message }]
+    })
+  })
+  
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(`文心一言 API 调用失败 (${response.status}): ${errorData.error?.message || '未知错误'}`)
+  }
+  
+  const data = await response.json()
+  return data.result || '未获取到响应内容'
+}
+
+// 初始化
+onMounted(() => {
+  loadConfiguredPlatforms()
+})
+</script>
+
+<style scoped>
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: #333;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.form-group input:disabled,
+.form-group select:disabled,
+.form-group textarea:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.send-btn {
+  padding: 12px 20px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s;
+}
+
+.send-btn:hover:not(:disabled) {
+  background-color: #218838;
+}
+
+.send-btn:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.response-area {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  border-left: 4px solid #007bff;
+}
+
+.response-area h3 {
+  margin-top: 0;
+  color: #333;
+}
+
+.response-content {
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+
+.error-message {
+  padding: 10px;
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.info-message {
+  padding: 15px;
+  background-color: #e7f3ff;
+  color: #004085;
+  border: 1px solid #b8daff;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.info-message p {
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/ConfigPanel.vue b/frontend/src/components/ConfigPanel.vue
new file mode 100644
index 0000000..449d32a
--- /dev/null
+++ b/frontend/src/components/ConfigPanel.vue
@@ -0,0 +1,369 @@
+<template>
+  <div class="config-panel">
+    <!-- 厂商选择 -->
+    <div class="form-group">
+      <label for="platform">选择厂商</label>
+      <select id="platform" v-model="selectedPlatform" @change="onPlatformChange">
+        <option value="">请选择厂商</option>
+        <option v-for="platform in platforms" :key="platform.id" :value="platform.id">
+          {{ platform.name }}
+        </option>
+      </select>
+    </div>
+
+    <!-- 密钥输入 -->
+    <div class="form-group">
+      <label for="api-key">API 密钥</label>
+      <input 
+        id="api-key" 
+        v-model="apiKey" 
+        type="password" 
+        :placeholder="currentPlatform?.keyPlaceholder || '请输入API密钥'"
+        :disabled="!selectedPlatform"
+      />
+    </div>
+
+    <!-- 接入点输入 -->
+    <div class="form-group">
+      <label for="endpoint">接入点</label>
+      <input 
+        id="endpoint" 
+        v-model="endpoint" 
+        type="text" 
+        :placeholder="currentPlatform?.endpoint || '请输入接入点'"
+        :disabled="!selectedPlatform"
+      />
+    </div>
+
+    <!-- 保存按钮 -->
+    <div class="form-group">
+      <button @click="saveConfig" :disabled="!canSave" class="save-btn">
+        保存配置
+      </button>
+    </div>
+
+    <!-- 验证状态 -->
+    <div v-if="validationMessage" class="validation-message" :class="validationClass">
+      {{ validationMessage }}
+    </div>
+
+    <!-- 已配置的厂商列表 -->
+    <div v-if="configuredPlatforms.length > 0" class="configured-list">
+      <h3>已配置的厂商</h3>
+      <div class="platform-item" v-for="platform in configuredPlatforms" :key="platform.id">
+        <span>{{ platform.name }}</span>
+        <button @click="removeConfig(platform.id)" class="remove-btn">删除</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { encrypt, decrypt } from '../utils/encryption'
+
+// 厂商配置预设
+const platforms = [
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    endpoint: 'https://api.openai.com/v1/chat/completions',
+    keyPlaceholder: 'sk-...',
+    keyType: 'api_key'
+  },
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    endpoint: 'https://api.anthropic.com/v1/messages',
+    keyPlaceholder: 'sk-...',
+    keyType: 'api_key'
+  },
+  {
+    id: 'google',
+    name: 'Google (Gemini)',
+    endpoint: 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent',
+    keyPlaceholder: 'AIza...',
+    keyType: 'api_key'
+  },
+  {
+    id: 'qwen',
+    name: '通义千问（阿里云）',
+    endpoint: 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation',
+    keyPlaceholder: 'sk-...',
+    keyType: 'api_key'
+  },
+  {
+    id: 'wenxin',
+    name: '文心一言（百度）',
+    endpoint: 'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie_bot',
+    keyPlaceholder: 'your_api_key',
+    keyType: 'api_key'
+  }
+]
+
+// 响应式数据
+const selectedPlatform = ref('')
+const apiKey = ref('')
+const endpoint = ref('')
+const validationMessage = ref('')
+const validationClass = ref('')
+const configuredPlatforms = ref([])
+
+// 计算属性
+const currentPlatform = computed(() => {
+  if (!selectedPlatform.value) return null
+  return platforms.find(p => p.id === selectedPlatform.value)
+})
+
+const canSave = computed(() => {
+  return selectedPlatform.value && apiKey.value && endpoint.value
+})
+
+// 从localStorage加载已配置的厂商
+const loadConfiguredPlatforms = () => {
+  try {
+    const stored = localStorage.getItem('ai-api-configs')
+    if (stored) {
+      const configs = JSON.parse(stored)
+      configuredPlatforms.value = configs.map(config => {
+        const platform = platforms.find(p => p.id === config.id)
+        return {
+          ...platform,
+          ...config
+        }
+      })
+    }
+  } catch (error) {
+    console.error('加载配置失败:', error)
+  }
+}
+
+// 保存配置
+const saveConfig = () => {
+  if (!canSave.value) {
+    showValidation('请填写所有必填字段', 'error')
+    return
+  }
+
+  // 验证密钥格式
+  if (!validateApiKey()) {
+    return
+  }
+
+  // 加密密钥
+  const encryptedKey = encrypt(apiKey.value)
+  
+  // 构造配置对象
+  const config = {
+    id: selectedPlatform.value,
+    apiKey: encryptedKey,
+    endpoint: endpoint.value
+  }
+
+  // 保存到localStorage
+  try {
+    const stored = localStorage.getItem('ai-api-configs')
+    let configs = stored ? JSON.parse(stored) : []
+    
+    // 检查是否已存在该厂商配置
+    const existingIndex = configs.findIndex(c => c.id === selectedPlatform.value)
+    if (existingIndex !== -1) {
+      configs[existingIndex] = config
+    } else {
+      configs.push(config)
+    }
+    
+    localStorage.setItem('ai-api-configs', JSON.stringify(configs))
+    
+    // 更新已配置列表
+    loadConfiguredPlatforms()
+    
+    // 清空表单
+    resetForm()
+    
+    showValidation('配置保存成功', 'success')
+  } catch (error) {
+    console.error('保存配置失败:', error)
+    showValidation('保存配置失败，请重试', 'error')
+  }
+}
+
+// 验证密钥格式
+const validateApiKey = () => {
+  const key = apiKey.value.trim()
+  const platform = currentPlatform.value
+  
+  if (!platform) return true
+  
+  // 根据厂商类型验证密钥格式
+  if (platform.id === 'openai' || platform.id === 'qwen' || platform.id === 'anthropic') {
+    if (!key.startsWith('sk-')) {
+      showValidation('OpenAI/通义千问密钥应以 "sk-" 开头', 'error')
+      return false
+    }
+  } else if (platform.id === 'google') {
+    if (!key.startsWith('AIza')) {
+      showValidation('Google密钥应以 "AIza" 开头', 'error')
+      return false
+    }
+  }
+  
+  return true
+}
+
+// 显示验证消息
+const showValidation = (message, type) => {
+  validationMessage.value = message
+  validationClass.value = type
+  setTimeout(() => {
+    validationMessage.value = ''
+  }, 3000)
+}
+
+// 重置表单
+const resetForm = () => {
+  selectedPlatform.value = ''
+  apiKey.value = ''
+  endpoint.value = ''
+}
+
+// 平台变更
+const onPlatformChange = () => {
+  if (selectedPlatform.value) {
+    const platform = platforms.find(p => p.id === selectedPlatform.value)
+    if (platform) {
+      endpoint.value = platform.endpoint
+    }
+  } else {
+    endpoint.value = ''
+  }
+}
+
+// 删除配置
+const removeConfig = (platformId) => {
+  try {
+    const stored = localStorage.getItem('ai-api-configs')
+    if (stored) {
+      const configs = JSON.parse(stored)
+      const filtered = configs.filter(c => c.id !== platformId)
+      localStorage.setItem('ai-api-configs', JSON.stringify(filtered))
+      loadConfiguredPlatforms()
+      showValidation('配置已删除', 'success')
+    }
+  } catch (error) {
+    console.error('删除配置失败:', error)
+    showValidation('删除配置失败', 'error')
+  }
+}
+
+// 初始化
+onMounted(() => {
+  loadConfiguredPlatforms()
+})
+</script>
+
+<style scoped>
+.config-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: #333;
+}
+
+.form-group input,
+.form-group select {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.form-group input:disabled,
+.form-group select:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.save-btn {
+  padding: 12px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s;
+}
+
+.save-btn:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+.save-btn:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.validation-message {
+  padding: 10px;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.validation-message.success {
+  background-color: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.validation-message.error {
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+.configured-list {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.configured-list h3 {
+  margin-top: 0;
+  color: #333;
+}
+
+.platform-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.remove-btn {
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.remove-btn:hover {
+  background-color: #c82333;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 0ac3a5f..26c68d2 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -2,5 +2,9 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import CryptoJS from 'crypto-js'
 
-createApp(App).mount('#app')
+// 将CryptoJS挂载到全局，供组件使用
+const app = createApp(App)
+app.config.globalProperties.$crypto = CryptoJS
+app.mount('#app')
diff --git a/frontend/src/utils/encryption.js b/frontend/src/utils/encryption.js
new file mode 100644
index 0000000..62367d1
--- /dev/null
+++ b/frontend/src/utils/encryption.js
@@ -0,0 +1,36 @@
+// AES-256 加密/解密工具
+// 注意：这是一个简化版本，实际生产环境应使用更安全的加密库
+
+import CryptoJS from 'crypto-js'
+
+// 密钥（在实际应用中应使用更安全的方式管理）
+const SECRET_KEY = 'ai-api-tool-secret-key-2025'
+
+/**
+ * 加密函数
+ * @param {string} text - 要加密的文本
+ * @returns {string} - 加密后的文本
+ */
+export function encrypt(text) {
+  try {
+    return CryptoJS.AES.encrypt(text, SECRET_KEY).toString()
+  } catch (error) {
+    console.error('加密失败:', error)
+    throw new Error('加密失败')
+  }
+}
+
+/**
+ * 解密函数
+ * @param {string} encryptedText - 要解密的文本
+ * @returns {string} - 解密后的文本
+ */
+export function decrypt(encryptedText) {
+  try {
+    const bytes = CryptoJS.AES.decrypt(encryptedText, SECRET_KEY)
+    return bytes.toString(CryptoJS.enc.Utf8)
+  } catch (error) {
+    console.error('解密失败:', error)
+    throw new Error('解密失败')
+  }
+}
\ No newline at end of file