🔄Update: Final

.gitignore

@@ -0,0 +1,25 @@
+# JetBrains
+.idea/
+
+# Compiled class file
+*.class
+
+# Log file
+*.log
+
+
+# Mobile Tools for Java (J2ME)
+.mtj.tmp/
+
+# Package Files #
+*.jar
+*.war
+*.nar
+*.ear
+*.zip
+*.tar.gz
+*.rar
+
+# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
+hs_err_pid*
+replay_pid*

README.md

@@ -1,3 +1,13 @@
 # api-box
 
 🔩 各大 LLM 厂商的 API 服务聚合
+
+| 平台       | 端点（Endpoint）                  | 参考文档                    |
+|------------|-----------------------------------|-------------------------|
+| OpenAI     | `https://api.openai.com/v1/chat/completions` | https://openai.apifox.cn/    |
+| 通义千问   | `https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions` |https://www.alibabacloud.com/help/zh/model-studio/use-qwen-by-calling-api#a25484c79d1ca|
+| 智谱       | `https://open.bigmodel.cn/api/paas/v4/chat/completions`     | https://docs.bigmodel.cn/api-reference/%E6%A8%A1%E5%9E%8B-api/%E5%AF%B9%E8%AF%9D%E8%A1%A5%E5%85%A8      |
+| DeepSeek   | `https://api.deepseek.com/chat/completions`                                   | https://api-docs.deepseek.com/zh-cn/api/create-chat-completion|
+| 硅基流动   | `https://api.siliconflow.cn/v1/chat/completions`                                | https://docs.siliconflow.cn/cn/api-reference/chat-completions/chat-completions  |
+
+![img.png](img.png)

backend/.gitignore

@@ -0,0 +1,33 @@
+HELP.md
+target/
+.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### VS Code ###
+.vscode/

backend/pom.xml

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>3.5.6</version>
+        <relativePath/> <!-- lookup parent from repository -->
+    </parent>
+    <groupId>cn.hezhaohui</groupId>
+    <artifactId>backend</artifactId>
+    <version>0.0.1-SNAPSHOT</version>
+    <name>backend</name>
+    <description>backend</description>
+    <url/>
+    <licenses>
+        <license/>
+    </licenses>
+    <developers>
+        <developer/>
+    </developers>
+    <scm>
+        <connection/>
+        <developerConnection/>
+        <tag/>
+        <url/>
+    </scm>
+    <properties>
+        <java.version>21</java.version>
+    </properties>
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>org.projectlombok</groupId>
+            <artifactId>lombok</artifactId>
+        </dependency>
+
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>

backend/src/main/java/cn/hezhaohui/backend/BackendApplication.java

@@ -0,0 +1,13 @@
+package cn.hezhaohui.backend;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class BackendApplication {
+
+    public static void main(String[] args) {
+        SpringApplication.run(BackendApplication.class, args);
+    }
+
+}

backend/src/main/java/cn/hezhaohui/backend/config/RestTmplateConfig.java

@@ -0,0 +1,13 @@
+package cn.hezhaohui.backend.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.client.RestTemplate;
+
+@Configuration
+public class RestTmplateConfig {
+    @Bean
+    public RestTemplate restTemplate() {
+        return new RestTemplate();
+    }
+}

backend/src/main/java/cn/hezhaohui/backend/controller/ChatController.java

@@ -0,0 +1,21 @@
+package cn.hezhaohui.backend.controller;
+
+import cn.hezhaohui.backend.entity.ChatRequest;
+import cn.hezhaohui.backend.entity.ChatResponse;
+import cn.hezhaohui.backend.service.ChatService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+@CrossOrigin(origins = "*")
+@RestController
+@RequestMapping
+public class ChatController {
+
+    @Autowired
+    private ChatService chatService;
+
+    @PostMapping("/api/chat")
+    public ChatResponse chat(@RequestBody ChatRequest request) {
+        return chatService.chat(request);
+    }
+}

backend/src/main/java/cn/hezhaohui/backend/entity/ChatRequest.java

@@ -0,0 +1,11 @@
+package cn.hezhaohui.backend.entity;
+
+import lombok.Data;
+
+@Data
+public class ChatRequest {
+    private String platformId;
+    private String apiKey;
+    private String endpoint;
+    private String message;
+}

backend/src/main/java/cn/hezhaohui/backend/entity/ChatResponse.java

@@ -0,0 +1,10 @@
+package cn.hezhaohui.backend.entity;
+
+import lombok.Builder;
+import lombok.Data;
+
+@Data
+@Builder
+public class ChatResponse {
+    private String response;
+}

backend/src/main/java/cn/hezhaohui/backend/service/ChatService.java

@@ -0,0 +1,33 @@
+package cn.hezhaohui.backend.service;
+
+import cn.hezhaohui.backend.entity.ChatRequest;
+import cn.hezhaohui.backend.entity.ChatResponse;
+import jakarta.annotation.Resource;
+import org.springframework.http.HttpEntity;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Service;
+import org.springframework.web.client.RestTemplate;
+
+@Service
+public class ChatService {
+
+    @Resource
+    private RestTemplate restTemplate;
+
+
+
+    public ChatResponse chat(ChatRequest req) {
+        HttpHeaders headers = new HttpHeaders();
+        headers.set("Authorization", "Bearer " + req.getApiKey());
+        headers.set("Content-Type", "application/json");
+        String requestBody = String.format(
+                "{\"model\": \"Qwen/Qwen3-30B-A3B\", \"messages\": [{\"role\": \"user\", \"content\": \"%s\"}]}",
+                req.getMessage()
+        );
+        HttpEntity<String> stringHttpEntity = new HttpEntity<>(requestBody, headers);
+        ResponseEntity<String> response = restTemplate.postForEntity(req.getEndpoint(), stringHttpEntity, String.class);
+        System.out.println(response.getBody());
+        return ChatResponse.builder().response(response.getBody()).build();
+    }
+}

backend/src/main/resources/application.properties

@@ -0,0 +1 @@
+spring.application.name=backend

backend/src/test/java/cn/hezhaohui/backend/BackendApplicationTests.java

@@ -0,0 +1,13 @@
+package cn.hezhaohui.backend;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+class BackendApplicationTests {
+
+    @Test
+    void contextLoads() {
+    }
+
+}

frontend/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

frontend/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

frontend/frontend.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

frontend/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

frontend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.22"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.1.7",
+    "vite-plugin-vue-devtools": "^8.0.2"
+  }
+}

frontend/src/App.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="app-container">
+    <header class="app-header">
+      <h1>AI API 配置与对话工具</h1>
+      <p>快速配置主流厂商API并进行对话测试</p>
+    </header>
+
+    <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>

frontend/src/assets/main.css

@@ -0,0 +1,117 @@
+/* 全局样式 */
+* {
+  box-sizing: border-box;
+}
+
+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;
+}
+
+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;
+  }
+  
+  .app-main {
+    grid-template-columns: 1fr;
+  }
+}

frontend/src/components/ChatPanel.vue

@@ -0,0 +1,288 @@
+<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'
+
+// 响应式数据
+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: 'zhipu', name: '智谱' },
+    { id: 'deepseek', name: 'DeepSeek' },
+    { id: 'qwen', name: '通义千问' },
+    { id: 'siliconflow', 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 result = await callAIPlatform(selectedPlatform.value, config.apiKey, config.endpoint, userInput.value)
+    
+    // 显示响应
+    responseMessage.value = result
+  } catch (error) {
+    console.error('发送消息失败:', error)
+    errorMessage.value = error.message || '发送消息失败，请重试'
+  } finally {
+    isSending.value = false
+  }
+}
+
+// 调用AI平台API
+// TODO 这里需要调用实际后端API接口
+const callAIPlatform = async (platformId, apiKey, endpoint, message) => {
+  try {
+    // 发送请求到后端API
+    // console.log(JSON.stringify({
+    //     platformId,
+    //     apiKey,
+    //     endpoint,
+    //     message
+    //   }))
+    const response = await fetch('http://localhost:8080/api/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        platformId,
+        apiKey,
+        endpoint,
+        message
+      })
+    }
+  )
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    
+    const data = await response.json()
+    return data.response
+  } catch (error) {
+    console.error('调用AI平台API失败:', error)
+    throw new Error('调用AI平台API失败: ' + error.message)
+  }
+}
+
+// 初始化
+onMounted(() => {
+  loadConfiguredPlatforms()
+  
+  // 监听配置保存事件，以便刷新数据
+  const handleConfigSaved = () => {
+    loadConfiguredPlatforms()
+  }
+  
+  window.addEventListener('config-saved', handleConfigSaved)
+  
+  // 组件卸载时移除事件监听器
+  onUnmounted(() => {
+    window.removeEventListener('config-saved', handleConfigSaved)
+  })
+})
+</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>

frontend/src/components/ConfigPanel.vue

@@ -0,0 +1,367 @@
+<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>
+
+    <!-- 保存按钮 -->
+     <!-- TODO 保存后应该使得 ChatPanel 组件刷新，使得能够选择厂商 -->
+    <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'
+
+// 厂商配置预设
+const platforms = [
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    endpoint: 'https://api.openai.com/v1/chat/completions',
+    keyPlaceholder: 'sk-...',
+    keyType: 'api_key'
+  },
+  {
+    id: 'zhipu',
+    name: '智谱',
+    endpoint: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
+    keyPlaceholder: 'sk-...',
+    keyType: 'api_key'
+  },
+  {
+    id: 'deepseek',
+    name: 'DeepSeek',
+    endpoint: 'https://api.deepseek.com/chat/completions',
+    keyPlaceholder: 'sk-...',
+    keyType: 'api_key'
+  },
+  {
+    id: 'qwen',
+    name: '通义千问',
+    endpoint: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',
+    keyPlaceholder: 'sk-...',
+    keyType: 'api_key'
+  },
+  {
+    id: 'siliconflow',
+    name: '硅基流动',
+    endpoint: 'https://api.siliconflow.cn/v1/chat/completions',
+    keyPlaceholder: 'sk-...',
+    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 config = {
+    id: selectedPlatform.value,
+    apiKey: apiKey.value,
+    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')
+    
+    // TODO: 保存后应该使得 ChatPanel 组件刷新，使得能够选择厂商
+    // 触发全局事件，通知 ChatPanel 刷新配置
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('config-saved', { detail: { platformId: selectedPlatform.value } }))
+    }
+  } catch (error) {
+    console.error('保存配置失败:', error)
+    showValidation('保存配置失败，请重试', 'error')
+  }
+}
+
+// 验证密钥格式
+const validateApiKey = () => {
+  const key = apiKey.value.trim()
+  const platform = currentPlatform.value
+  
+  if (!platform) return true
+  
+  // 根据厂商类型验证密钥格式
+  if (platform.keyType === 'api_key') {
+    if (!key.startsWith('sk-') || key.length < 20) {
+      showValidation('API 密钥格式不正确，应以 "sk-" 开头且长度不少于20位', '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>

frontend/src/main.js

@@ -0,0 +1,10 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import CryptoJS from 'crypto-js'
+
+// 将CryptoJS挂载到全局，供组件使用
+const app = createApp(App)
+app.config.globalProperties.$crypto = CryptoJS
+app.mount('#app')

frontend/vite.config.js

@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})