docs: 添加知识库和设置页面截图

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
style: 更新全局样式和主题变量
2026-03-07 16:21:54 +08:00 · 2026-03-07 16:21:50 +08:00 · 2026-03-07 16:21:44 +08:00 · 2026-03-07 16:21:35 +08:00 · 2026-03-07 16:21:29 +08:00
17 changed files with 748 additions and 78 deletions
--- a/screenshots/advance知识库配置.png
+++ b/screenshots/advance知识库配置.png
--- a/screenshots/chunking
+++ b/screenshots/chunking
--- a/screenshots/存储知识库配置.png
+++ b/screenshots/存储知识库配置.png
--- a/screenshots/解析知识库配置.png
+++ b/screenshots/解析知识库配置.png
--- a/server/cmd/api/main.go
+++ b/server/cmd/api/main.go
@@ -170,11 +170,11 @@ func main() {
 	modelGroup := r.Group("/model")
 	{
 		modelGroup.GET("/list", modelHandler.List)
-		modelGroup.GET("/:id", modelHandler.GetByID)
+		modelGroup.POST("/test", modelHandler.Test)
 		modelGroup.POST("/add", modelHandler.Create)
+		modelGroup.GET("/:id", modelHandler.GetByID)
 		modelGroup.PUT("/:id", modelHandler.Update)
 		modelGroup.DELETE("/:id", modelHandler.Delete)
-		modelGroup.POST("/test", modelHandler.Test)
 	}

 	// 系统信息模块
--- a/server/internal/model/model_info.go
+++ b/server/internal/model/model_info.go
@@ -39,6 +39,7 @@ type CreateModelRequest struct {
 	APIKey      string `json:"api_key" binding:"required"`
 	BaseURL     string `json:"base_url" binding:"required"`
 	APIEndpoint string `json:"api_endpoint"`
+	Status      string `json:"status"`
 }

 // UpdateModelRequest 更新模型请求
--- a/server/internal/service/model_service.go
+++ b/server/internal/service/model_service.go
@@ -5,7 +5,10 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"log"
 	"net/http"
+	"strings"
+	"time"
 	"x-agents/server/internal/model"
 	"x-agents/server/internal/repository"

@@ -33,6 +36,12 @@ func (s *ModelService) GetByID(id string) (*model.ModelInfo, error) {

 // Create 创建模型
 func (s *ModelService) Create(req model.CreateModelRequest) (*model.ModelInfo, error) {
+	// 如果没有提供状态，默认设置为 inactive
+	status := req.Status
+	if status == "" {
+		status = "inactive"
+	}
+
 	info := &model.ModelInfo{
 		ID:          uuid.New().String(),
 		Name:        req.Name,
@@ -42,7 +51,7 @@ func (s *ModelService) Create(req model.CreateModelRequest) (*model.ModelInfo, e
 		APIKey:      req.APIKey,
 		BaseURL:     req.BaseURL,
 		APIEndpoint: req.APIEndpoint,
-		Status:      "active",
+		Status:      status,
 	}

 	if err := s.repo.Create(info); err != nil {
@@ -105,20 +114,36 @@ func (s *ModelService) Delete(id string) error {

 // TestConnection 测试模型连接
 func (s *ModelService) TestConnection(req model.TestModelRequest) (*model.TestModelResponse, error) {
+	log.Printf("[TestConnection] 开始测试连接: provider=%s, model=%s, base_url=%s, api_endpoint=%s", req.Provider, req.Model, req.BaseURL, req.APIEndpoint)
+
 	// 构建请求 URL
 	baseURL := req.BaseURL
+	// 去掉 base_url 末尾的斜杠
+	baseURL = strings.TrimRight(baseURL, "/")
+
 	if req.APIEndpoint != "" {
-		baseURL = baseURL + req.APIEndpoint
+		// 去掉 api_endpoint 开头的斜杠
+		apiEndpoint := strings.TrimLeft(req.APIEndpoint, "/")
+		baseURL = baseURL + "/" + apiEndpoint
 	} else {
-		// 默认端点
+		// 默认端点 - 根据不同 provider 设置
 		switch req.Provider {
 		case "OpenAI":
 			baseURL = baseURL + "/v1/chat/completions"
 		case "Ollama":
 			baseURL = baseURL + "/api/chat"
+		case "ali", "Ali", "aliyun", "Aliyun":
+			// 阿里云 DashScope 兼容 OpenAI 格式，需要添加 /chat/completions
+			// base_url 格式: https://dashscope.aliyuncs.com/compatible-mode/v1
+			baseURL = baseURL + "/chat/completions"
+		default:
+			// 默认使用 OpenAI 兼容格式
+			baseURL = baseURL + "/v1/chat/completions"
 		}
 	}

+	log.Printf("[TestConnection] 请求 URL: %s", baseURL)
+
 	// 构建请求体
 	requestBody := map[string]interface{}{
 		"model": req.Model,
@@ -141,11 +166,19 @@ func (s *ModelService) TestConnection(req model.TestModelRequest) (*model.TestMo

 	httpReq.Header.Set("Content-Type", "application/json")
 	if req.APIKey != "" {
+		// 根据不同 provider 使用不同的认证方式
+		switch req.Provider {
+		case "ali", "Ali", "aliyun", "Aliyun":
+			// 阿里云使用 x-api-key 头部
+			httpReq.Header.Set("Authorization", "Bearer "+req.APIKey)
+			httpReq.Header.Set("x-api-key", req.APIKey)
+		default:
 			httpReq.Header.Set("Authorization", "Bearer "+req.APIKey)
 		}
+	}

-	// 发送请求
-	client := &http.Client{}
+	// 发送请求，设置 10 秒超时
+	client := &http.Client{Timeout: 10 * time.Second}
 	resp, err := client.Do(httpReq)
 	if err != nil {
 		return &model.TestModelResponse{Success: false, Message: err.Error()}, nil
@@ -158,6 +191,8 @@ func (s *ModelService) TestConnection(req model.TestModelRequest) (*model.TestMo
 		return &model.TestModelResponse{Success: false, Message: err.Error()}, nil
 	}

+	log.Printf("[TestConnection] 响应状态码: %d, 响应体: %s", resp.StatusCode, string(respBody))
+
 	if resp.StatusCode >= 200 && resp.StatusCode < 300 {
 		return &model.TestModelResponse{Success: true, Message: "Connection successful"}, nil
 	}
--- a/web/src/assets/styles/base/variables.css
+++ b/web/src/assets/styles/base/variables.css
@@ -44,7 +44,7 @@
  --spacing-2xl: 32px;

  /* 字体-family: -apple */
-  --font-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-system: BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
--- a/web/src/assets/styles/index.css
+++ b/web/src/assets/styles/index.css
@@ -1,4 +1,15 @@
 /* Main Entry - 全局样式入口 */
+/* Base styles - @import must be first */
+@import './base/variables.css';
+@import './base/reset.css';
+
+/* Component styles */
+@import './components/button.css';
+@import './components/form.css';
+@import './components/modal.css';
+@import './components/table.css';
+
+/* Tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -15,16 +26,6 @@ body {
  color: #f3f4f6;
 }

-/* Base styles */
-@import './base/variables.css';
-@import './base/reset.css';
-
-/* Component styles */
-@import './components/button.css';
-@import './components/form.css';
-@import './components/modal.css';
-@import './components/table.css';
-
 /* Animations */
@keyframes bar-grow {
  from {
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -120,7 +120,15 @@ html.dark .el-select .el-select__wrapper .el-select__selected-item {
 }

 html.dark .el-select .el-input__inner::placeholder {
-  color: #6b7280;
+  color: #6b7280 !important;
+}
+
+html.dark .el-select .el-select__placeholder {
+  color: #6b7280 !important;
+}
+
+html.dark .el-input__inner::placeholder {
+  color: #6b7280 !important;
 }

 /* 下拉箭头 */
--- a/web/src/views/Knowledge.vue
+++ b/web/src/views/Knowledge.vue
@@ -59,13 +59,44 @@ const embeddingConfig = ref({
  model: '',
 })

+const parsingConfig = ref({
+  enablePdf: true,
+  engine: 'default',
+  pandoc: true,
+  academic: false,
+  highRes: false,
+  fileSizeLimit: '5242880',
+})
+
 const openCreateDialog = () => {
  createStep.value = 1
  newKbForm.value = { name: '', description: '' }
  embeddingConfig.value = { provider: '', model: '' }
+  parsingConfig.value = {
+    enablePdf: true,
+    engine: 'default',
+    pandoc: true,
+    academic: false,
+    highRes: false,
+    fileSizeLimit: '5242880',
+  }
  showCreateDialog.value = true
 }

+const cancelCreate = () => {
+  newKbForm.value = { name: '', description: '' }
+  embeddingConfig.value = { provider: '', model: '' }
+  parsingConfig.value = {
+    enablePdf: true,
+    engine: 'default',
+    pandoc: true,
+    academic: false,
+    highRes: false,
+    fileSizeLimit: '5242880',
+  }
+  showCreateDialog.value = false
+}
+
 const nextStep = () => {
  if (!newKbForm.value.name) {
    ElMessage.warning('Please enter knowledge base name')
@@ -94,12 +125,6 @@ const createKnowledgeBase = () => {
  ElMessage.success('Knowledge base created successfully')
 }

-const cancelCreate = () => {
-  newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { provider: '', model: '' }
-  showCreateDialog.value = false
-}
-
 // 编辑知识库
 const showEditDialog = ref(false)
 const editForm = ref({
@@ -271,8 +296,8 @@ const viewDetail = (kb: any) => {
          >
            <i class="fa-solid fa-layer-group menu-icon"></i>
            <div class="menu-content">
-              <span class="menu-title">基本信息</span>
-              <span class="menu-desc">知识库名称和描述</span>
+              <span class="menu-title">Basic Info</span>
+              <span class="menu-desc">Name and description</span>
            </div>
            <i v-if="createStep === 1" class="fa-solid fa-chevron-right menu-arrow"></i>
          </div>
@@ -281,42 +306,102 @@ const viewDetail = (kb: any) => {
            :class="{ active: createStep === 2 }"
            @click="createStep = 2"
          >
-            <i class="fa-solid fa-brain menu-icon"></i>
+            <i class="fa-solid fa-robot menu-icon"></i>
            <div class="menu-content">
-              <span class="menu-title">Embedding 配置</span>
-              <span class="menu-desc">向量化和检索设置</span>
+              <span class="menu-title">Model Config</span>
+              <span class="menu-desc">Embedding & rerank models</span>
            </div>
            <i v-if="createStep === 2" class="fa-solid fa-chevron-right menu-arrow"></i>
          </div>
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 3 }"
+            @click="createStep = 3"
+          >
+            <i class="fa-solid fa-file-lines menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">Parsing</span>
+              <span class="menu-desc">Document parsing settings</span>
+            </div>
+            <i v-if="createStep === 3" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 4 }"
+            @click="createStep = 4"
+          >
+            <i class="fa-solid fa-hard-drive menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">Storage</span>
+              <span class="menu-desc">Vector & file storage</span>
+            </div>
+            <i v-if="createStep === 4" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 5 }"
+            @click="createStep = 5"
+          >
+            <i class="fa-solid fa-scissors menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">Chunking</span>
+              <span class="menu-desc">Text chunking strategy</span>
+            </div>
+            <i v-if="createStep === 5" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 6 }"
+            @click="createStep = 6"
+          >
+            <i class="fa-solid fa-project-diagram menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">Knowledge Graph</span>
+              <span class="menu-desc">Graph extraction settings</span>
+            </div>
+            <i v-if="createStep === 6" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 7 }"
+            @click="createStep = 7"
+          >
+            <i class="fa-solid fa-sliders menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">Advanced</span>
+              <span class="menu-desc">Additional settings</span>
+            </div>
+            <i v-if="createStep === 7" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
        </div>

        <!-- 右侧：内容区 -->
        <div class="content">
-          <!-- 基本信息 -->
+          <!-- Step 1: Basic Info -->
          <div v-if="createStep === 1" class="form-content">
            <div class="section-header">
              <i class="fa-solid fa-layer-group section-icon"></i>
-              <span class="section-title">基本信息</span>
+              <span class="section-title">Basic Info</span>
            </div>
            <el-form label-position="top" class="kb-form">
-              <el-form-item label="名称" required>
-                <el-input v-model="newKbForm.name" placeholder="请输入知识库名称" />
+              <el-form-item label="Name" required>
+                <el-input v-model="newKbForm.name" placeholder="Enter knowledge base name" />
              </el-form-item>
-              <el-form-item label="描述">
-                <el-input v-model="newKbForm.description" type="textarea" :rows="4" placeholder="请输入知识库描述" />
+              <el-form-item label="Description">
+                <el-input v-model="newKbForm.description" type="textarea" :rows="4" placeholder="Enter knowledge base description" />
              </el-form-item>
            </el-form>
          </div>

-          <!-- Embedding 配置 -->
+          <!-- Step 2: Model Config -->
          <div v-if="createStep === 2" class="form-content">
            <div class="section-header">
-              <i class="fa-solid fa-brain section-icon"></i>
-              <span class="section-title">Embedding 配置</span>
+              <i class="fa-solid fa-robot section-icon"></i>
+              <span class="section-title">Model Config</span>
            </div>
            <el-form label-position="top" class="kb-form">
              <el-form-item label="Embedding Provider">
-                <el-select v-model="embeddingConfig.provider" placeholder="请选择 Embedding 服务商" class="w-full">
+                <el-select v-model="embeddingConfig.provider" placeholder="Select embedding provider" class="w-full">
                  <el-option label="OpenAI" value="openai">
                    <div class="provider-option">
                      <i class="fa-solid fa-robot"></i>
@@ -338,7 +423,141 @@ const viewDetail = (kb: any) => {
                </el-select>
              </el-form-item>
              <el-form-item label="Embedding Model">
-                <el-input v-model="embeddingConfig.model" placeholder="如：text-embedding-ada-002" />
+                <el-input v-model="embeddingConfig.model" placeholder="e.g., text-embedding-ada-002" />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- Step 3: Parsing -->
+          <div v-if="createStep === 3" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-file-lines section-icon"></i>
+              <span class="section-title">Parsing</span>
+            </div>
+
+            <div class="parsing-section">
+              <div class="parsing-row">
+                <span class="parsing-label">Enable PDF Parsing</span>
+                <el-switch v-model="parsingConfig.enablePdf" />
+              </div>
+
+              <div class="parsing-row">
+                <span class="parsing-label">Parsing Engine</span>
+                <el-select v-model="parsingConfig.engine" placeholder="Select engine" class="parsing-select">
+                  <el-option label="Default Engine" value="default" />
+                  <el-option label="DeepDoc" value="deepdoc" />
+                </el-select>
+              </div>
+
+              <div class="parsing-divider"></div>
+
+              <div class="parsing-label">Enabled Post-processing</div>
+
+              <div class="postprocess-list">
+                <div class="postprocess-item" :class="{ active: parsingConfig.pandoc }">
+                  <div class="postprocess-toggle">
+                    <el-switch v-model="parsingConfig.pandoc" />
+                  </div>
+                  <div class="postprocess-info">
+                    <span class="postprocess-title">Use Pandoc Markdown Enrichment</span>
+                    <span class="postprocess-desc">Enable Pandoc conversion for rich formatting</span>
+                  </div>
+                </div>
+
+                <div class="postprocess-item" :class="{ active: parsingConfig.academic }">
+                  <div class="postprocess-toggle">
+                    <el-switch v-model="parsingConfig.academic" />
+                  </div>
+                  <div class="postprocess-info">
+                    <span class="postprocess-title">Use Academic Document Parsing</span>
+                    <span class="postprocess-desc">Parse formulas, tables, and academic structures</span>
+                  </div>
+                </div>
+
+                <div class="postprocess-item" :class="{ active: parsingConfig.highRes }">
+                  <div class="postprocess-toggle">
+                    <el-switch v-model="parsingConfig.highRes" />
+                  </div>
+                  <div class="postprocess-info">
+                    <span class="postprocess-title">Use High Resolution Parsing</span>
+                    <span class="postprocess-desc">High quality mode for complex documents</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="parsing-divider"></div>
+
+              <div class="parsing-row">
+                <span class="parsing-label">File Size Limit</span>
+                <el-input v-model="parsingConfig.fileSizeLimit" class="parsing-input" />
+              </div>
+            </div>
+          </div>
+
+          <!-- Step 4: Storage -->
+          <div v-if="createStep === 4" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-hard-drive section-icon"></i>
+              <span class="section-title">Storage</span>
+            </div>
+            <el-form label-position="top" class="kb-form">
+              <el-form-item label="Storage Type">
+                <el-select placeholder="Select storage type" class="w-full">
+                  <el-option label="Local" value="local" />
+                  <el-option label="MinIO" value="minio" />
+                  <el-option label="S3" value="s3" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- Step 5: Chunking -->
+          <div v-if="createStep === 5" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-scissors section-icon"></i>
+              <span class="section-title">Chunking</span>
+            </div>
+            <el-form label-position="top" class="kb-form">
+              <el-form-item label="Chunk Size">
+                <el-input type="number" placeholder="e.g., 500" />
+              </el-form-item>
+              <el-form-item label="Chunk Overlap">
+                <el-input type="number" placeholder="e.g., 50" />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- Step 6: Knowledge Graph -->
+          <div v-if="createStep === 6" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-project-diagram section-icon"></i>
+              <span class="section-title">Knowledge Graph</span>
+            </div>
+            <el-form label-position="top" class="kb-form">
+              <el-form-item label="Enable Knowledge Graph">
+                <el-switch />
+              </el-form-item>
+              <el-form-item label="Graph Extraction">
+                <el-select placeholder="Select extraction level" class="w-full">
+                  <el-option label="Entities Only" value="entities" />
+                  <el-option label="Entities & Relations" value="relations" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- Step 7: Advanced -->
+          <div v-if="createStep === 7" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-sliders section-icon"></i>
+              <span class="section-title">Advanced</span>
+            </div>
+            <el-form label-position="top" class="kb-form">
+              <el-form-item label="Top K">
+                <el-input type="number" placeholder="e.g., 5" />
+              </el-form-item>
+              <el-form-item label="Score Threshold">
+                <el-input type="number" placeholder="e.g., 0.7" />
              </el-form-item>
            </el-form>
          </div>
@@ -348,21 +567,21 @@ const viewDetail = (kb: any) => {
      <template #footer>
        <div class="dialog-footer">
          <div class="footer-left">
-            <span class="step-hint">填写完基本信息后，点击下一步继续配置</span>
+            <span class="step-hint">Step {{ createStep }} of 7</span>
          </div>
          <div class="footer-right">
-            <el-button @click="cancelCreate" class="cancel-btn">取消</el-button>
-            <el-button v-if="createStep === 2" @click="createStep = 1" class="prev-btn">
+            <el-button @click="cancelCreate" class="cancel-btn">Cancel</el-button>
+            <el-button v-if="createStep > 1" @click="createStep--" class="prev-btn">
              <i class="fa-solid fa-arrow-left"></i>
-              上一步
+              Previous
            </el-button>
-            <el-button v-if="createStep === 1" @click="createStep = 2" class="next-btn">
-              下一步
+            <el-button v-if="createStep < 7" @click="createStep++" class="next-btn">
+              Next
              <i class="fa-solid fa-arrow-right"></i>
            </el-button>
-            <el-button v-if="createStep === 2" @click="createKnowledgeBase" class="confirm-btn">
+            <el-button v-if="createStep === 7" @click="createKnowledgeBase" class="confirm-btn">
              <i class="fa-solid fa-plus"></i>
-              创建
+              Create
            </el-button>
          </div>
        </div>
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -16,7 +16,9 @@ const {
  modelTypeOptions,
  providerOptions,
  showAddModelForm,
+  showEditModelForm,
  newModelForm,
+  editForm,
  testingConnection,
  connectionStatus,
  fetchModels,
@@ -24,6 +26,12 @@ const {
  addModel,
  cancelAddModel,
  deleteModel,
+  openEditDialog,
+  updateModel,
+  cancelEditModel,
+  testingEditConnection,
+  editConnectionStatus,
+  testConnectionEdit,
 } = useModelSettings()

 // 监听菜单切换，获取模型列表
@@ -478,7 +486,7 @@ const saveStorageSettings = () => {
                  <span v-else class="status-inactive">Inactive</span>
                </td>
                <td class="text-center">
-                  <button class="btn-icon" title="Edit">
+                  <button class="btn-icon" title="Edit" @click="openEditDialog(model)">
                    <i class="fa-solid fa-pen"></i>
                  </button>
                  <button class="btn-icon" title="Delete" @click="deleteModel(model.id)">
@@ -537,10 +545,6 @@ const saveStorageSettings = () => {
              <el-form-item label="Base URL">
                <el-input v-model="newModelForm.baseUrl" placeholder="https://api.openai.com/v1 (OpenAI) or http://localhost:11434 (Ollama)" />
              </el-form-item>
-
-              <el-form-item label="API Endpoint">
-                <el-input v-model="newModelForm.apiEndpoint" placeholder="e.g., /chat/completions" />
-              </el-form-item>
            </el-form>

            <template #footer>
@@ -564,8 +568,118 @@ const saveStorageSettings = () => {
              </div>
            </template>
          </el-dialog>
+
+          <!-- 编辑模型弹窗 -->
+          <el-dialog
+            v-model="showEditModelForm"
+            title="Edit Model"
+            width="500px"
+            :close-on-click-modal="false"
+            class="add-model-dialog"
+          >
+            <p class="dialog-desc">Update your model settings</p>
+
+            <el-form label-position="top" class="settings-form">
+              <el-form-item label="Model Name">
+                <el-input v-model="editForm.name" placeholder="e.g., My GPT-4 Model" />
+              </el-form-item>
+
+              <el-form-item label="Provider">
+                <el-select v-model="editForm.provider" placeholder="Select provider">
+                  <el-option
+                    v-for="option in providerOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="Model">
+                <el-input v-model="editForm.model" placeholder="e.g., gpt-4, llama2" />
+              </el-form-item>
+
+              <el-form-item label="Model Type">
+                <el-select v-model="editForm.modelType" placeholder="Select model type">
+                  <el-option
+                    v-for="option in modelTypeOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="API Key">
+                <el-input v-model="editForm.apiKey" type="password" placeholder="sk-..." show-password />
+              </el-form-item>
+
+              <el-form-item label="Base URL">
+                <el-input v-model="editForm.baseUrl" placeholder="e.g., https://api.openai.com/v1" />
+              </el-form-item>
+            </el-form>
+
+            <template #footer>
+              <div class="dialog-footer">
+                <button class="test-btn" @click="cancelEditModel">Cancel</button>
+                <el-button
+                  :loading="testingEditConnection"
+                  @click="testConnectionEdit"
+                  class="test-btn"
+                >
+                  <i v-if="!testingEditConnection" class="fa-solid fa-plug"></i>
+                  Test Connection
+                </el-button>
+                <el-button type="primary" @click="updateModel">Confirm</el-button>
+              </div>
+              <div v-if="editConnectionStatus === 'success'" class="connection-status success">
+                <i class="fa-solid fa-check-circle"></i> Connection successful
+              </div>
+              <div v-if="editConnectionStatus === 'error'" class="connection-status error">
+                <i class="fa-solid fa-xmark-circle"></i> Connection failed
+              </div>
+            </template>
+          </el-dialog>
        </div>
      </div>
    </div>
  </div>
 </template>
+
+<style>
+/* Model Settings dialog - 最高优先级覆盖 */
+
+/* 输入框 */
+.add-model-dialog .el-input__wrapper {
+  background-color: #171922 !important;
+}
+
+.add-model-dialog .el-input__wrapper input {
+  color: #ffffff !important;
+  -webkit-text-fill-color: #ffffff !important;
+}
+
+.add-model-dialog .el-input__wrapper input::placeholder {
+  color: #9ca3af !important;
+  -webkit-text-fill-color: #9ca3af !important;
+}
+
+/* 选择框 */
+.add-model-dialog .el-select__wrapper {
+  background-color: #171922 !important;
+}
+
+.add-model-dialog .el-select__wrapper .el-select__selected-item {
+  color: #ffffff !important;
+}
+
+.add-model-dialog .el-select__wrapper input::placeholder {
+  color: #9ca3af !important;
+  -webkit-text-fill-color: #9ca3af !important;
+}
+
+/* 未选中时的占位符文字 */
+.add-model-dialog .el-select__placeholder {
+  color: #9ca3af !important;
+}
+</style>
--- a/web/src/views/knowledge/knowledge.css
+++ b/web/src/views/knowledge/knowledge.css
@@ -191,7 +191,7 @@
 /* 创建内容布局 */
 .create-layout {
  display: flex;
-  min-height: 560px;
+  min-height: 600px;
 }

 /* 左侧 sidebar */
@@ -199,17 +199,17 @@
  width: 280px;
  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
  border-right: 1px solid #1e2832;
-  padding: 20px 12px;
+  padding: 16px 12px;
  display: flex;
  flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }

 .menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
-  padding: 16px;
+  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
@@ -227,16 +227,17 @@
 }

 .menu-icon {
-  width: 42px;
-  height: 42px;
-  border-radius: 12px;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
  background-color: #1e2832;
  display: flex;
  align-items: center;
  justify-content: center;
-  font-size: 16px;
+  font-size: 14px;
  color: #5f6368;
  transition: all 0.3s ease;
+  flex-shrink: 0;
 }

 .menu-item.active .menu-icon {
@@ -253,10 +254,11 @@
 }

 .menu-title {
-  font-size: 15px;
+  font-size: 14px;
  font-weight: 600;
  color: #e8eaed;
  transition: color 0.2s;
+  white-space: nowrap;
 }

 .menu-item.active .menu-title {
@@ -409,6 +411,104 @@
  color: #36bffa;
 }

+/* Parsing 配置样式 */
+.parsing-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.parsing-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: #161b22;
+  border-radius: 8px;
+  border: 1px solid #2d3640;
+}
+
+.parsing-label {
+  font-size: 14px;
+  color: #e8eaed;
+  font-weight: 500;
+}
+
+.parsing-select {
+  width: 200px;
+}
+
+.parsing-select :deep(.el-input__wrapper) {
+  background-color: #1e2832;
+  border-color: #2d3640;
+}
+
+.parsing-input {
+  width: 200px;
+}
+
+.parsing-input :deep(.el-input__wrapper) {
+  background-color: #1e2832;
+  border-color: #2d3640;
+}
+
+/* Switch 样式 */
+:deep(.el-switch.is-checked .el-switch__core) {
+  background-color: #36bffa;
+  border-color: #36bffa;
+}
+
+.parsing-divider {
+  height: 1px;
+  background-color: #2d3640;
+  margin: 8px 0;
+}
+
+/* Post-processing 列表 */
+.postprocess-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.postprocess-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 14px 16px;
+  background-color: #161b22;
+  border-radius: 8px;
+  border: 1px solid #2d3640;
+  transition: all 0.2s;
+}
+
+.postprocess-item.active {
+  border-color: rgba(54, 191, 250, 0.3);
+  background: linear-gradient(135deg, rgba(54, 191, 250, 0.05) 0%, transparent 100%);
+}
+
+.postprocess-toggle {
+  flex-shrink: 0;
+  padding-top: 2px;
+}
+
+.postprocess-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.postprocess-title {
+  font-size: 14px;
+  color: #e8eaed;
+  font-weight: 500;
+}
+
+.postprocess-desc {
+  font-size: 12px;
+  color: #5f6368;
+}
+
 /* 底部按钮区域 */
 .dialog-footer {
  display: flex;
--- a/web/src/views/settings/modelSettings.css
+++ b/web/src/views/settings/modelSettings.css
@@ -233,6 +233,10 @@
  color: white;
 }

+.add-model-dialog :deep(.el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .add-model-dialog :deep(.el-select) {
  width: 100%;
 }
@@ -246,6 +250,10 @@
  color: white;
 }

+.add-model-dialog :deep(.el-select .el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .add-model-dialog :deep(.el-select-dropdown) {
  background-color: #1a1a24;
  border: 1px solid #2a2a3a;
--- a/web/src/views/settings/settings-parsing.css
+++ b/web/src/views/settings/settings-parsing.css
@@ -199,6 +199,10 @@
  color: white;
 }

+.add-model-dialog :deep(.el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .add-model-dialog :deep(.el-select) {
  width: 100%;
 }
@@ -212,6 +216,10 @@
  color: white;
 }

+.add-model-dialog :deep(.el-select .el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .add-model-dialog :deep(.el-select-dropdown) {
  background-color: #1a1a24;
  border: 1px solid #2a2a3a;
--- a/web/src/views/settings/settings.css
+++ b/web/src/views/settings/settings.css
@@ -156,6 +156,10 @@ table {
  color: white;
 }

+.settings-form :deep(.el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .settings-form :deep(.el-select) {
  width: 100%;
 }
@@ -165,6 +169,10 @@ table {
  border: 1px solid #4b5563;
 }

+.settings-form :deep(.el-select .el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .settings-form :deep(.el-button--primary) {
  background-color: #f97316;
  border-color: #f97316;
--- a/web/src/views/settings/useModelSettings.ts
+++ b/web/src/views/settings/useModelSettings.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import type { ModelInfo, ModelForm, ModelTypeOption, ProviderOption } from './types'

@@ -22,13 +22,47 @@ export function useModelSettings() {
  const providerOptions: ProviderOption[] = [
    { value: 'OpenAI', label: 'OpenAI' },
    { value: 'Ollama', label: 'Ollama' },
+    { value: 'ali', label: 'Alibaba Cloud' },
  ]

+  // 默认 Base URL 映射
+  const defaultBaseUrls: Record<string, string> = {
+    ali: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+  }
+
  // 是否显示新增模型表单
  const showAddModelForm = ref(false)

+  // 是否显示编辑模型表单
+  const showEditModelForm = ref(false)
+
  // 新增模型表单
  const newModelForm = ref<ModelForm>({
+    name: '',
+    apiKey: '',
+    apiEndpoint: '',
+    baseUrl: '',
+    provider: '',
+    model: '',
+    modelType: 'chat',
+  })
+
+  // 监听 provider 变化，自动填充默认 Base URL
+  watch(() => newModelForm.value.provider, (newProvider) => {
+    if (newProvider && defaultBaseUrls[newProvider]) {
+      newModelForm.value.baseUrl = defaultBaseUrls[newProvider]
+    }
+  })
+
+  // 监听新增弹窗打开，重置连接状态
+  watch(showAddModelForm, (newVal) => {
+    if (newVal) {
+      connectionStatus.value = 'idle'
+    }
+  })
+
+  // 编辑模型表单
+  const editForm = ref<ModelForm>({
    name: '',
    apiKey: '',
    apiEndpoint: '',
@@ -38,10 +72,20 @@ export function useModelSettings() {
    modelType: '',
  })

+  // 当前编辑的模型ID
+  const editingModelId = ref<string>('')
+
  // 测试连接状态
  const testingConnection = ref(false)
  const connectionStatus = ref<'idle' | 'success' | 'error'>('idle')

+  // 编辑弹窗测试连接状态
+  const testingEditConnection = ref(false)
+  const editConnectionStatus = ref<'idle' | 'success' | 'error'>('idle')
+
+  // 编辑前模型的状态
+  const originalStatus = ref<string>('')
+
  // 获取模型列表
  const fetchModels = async () => {
    modelsLoading.value = true
@@ -99,6 +143,48 @@ export function useModelSettings() {
    }
  }

+  // 编辑弹窗测试连接
+  const testConnectionEdit = async () => {
+    if (!editForm.value.apiKey || !editForm.value.baseUrl) {
+      ElMessage.warning('Please enter API Key and Base URL')
+      return
+    }
+
+    testingEditConnection.value = true
+    editConnectionStatus.value = 'idle'
+
+    try {
+      const response = await fetch(`${API_BASE}/model/test`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          provider: editForm.value.provider,
+          model: editForm.value.model,
+          api_key: editForm.value.apiKey,
+          base_url: editForm.value.baseUrl,
+          api_endpoint: editForm.value.apiEndpoint,
+        }),
+      })
+
+      const result = await response.json()
+
+      if (result.success) {
+        editConnectionStatus.value = 'success'
+        ElMessage.success(result.message || 'Connection successful!')
+      } else {
+        editConnectionStatus.value = 'error'
+        ElMessage.error(result.message || 'Connection failed')
+      }
+    } catch (error: any) {
+      editConnectionStatus.value = 'error'
+      ElMessage.error('Connection failed: ' + error.message)
+    } finally {
+      testingEditConnection.value = false
+    }
+  }
+
  // 添加新模型（初始状态为 inactive，需要测试连接后才能激活）
  const addModel = async () => {
    if (!newModelForm.value.name || !newModelForm.value.provider || !newModelForm.value.model) {
@@ -120,24 +206,13 @@ export function useModelSettings() {
          api_key: newModelForm.value.apiKey,
          base_url: newModelForm.value.baseUrl,
          api_endpoint: newModelForm.value.apiEndpoint,
-          status: 'inactive', // 初始状态为未激活
+          status: connectionStatus.value === 'success' ? 'active' : 'inactive',
        }),
      })

      if (response.ok) {
        const result = await response.json()
-        // 记录测试连接状态
        const wasConnected = connectionStatus.value === 'success'
-        // 如果测试连接成功，则激活模型；否则保持 inactive
-        if (wasConnected) {
-          // 再次调用更新接口激活模型
-          await fetch(`${API_BASE}/model/${result.id}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ status: 'active' }),
-          })
-          result.status = 'active'
-        }
        models.value.push(result)
        newModelForm.value = {
          name: '',
@@ -146,7 +221,7 @@ export function useModelSettings() {
          baseUrl: '',
          provider: '',
          model: '',
-          modelType: '',
+          modelType: 'chat',
        }
        connectionStatus.value = 'idle'
        showAddModelForm.value = false
@@ -193,6 +268,91 @@ export function useModelSettings() {
    }
  }

+  // 打开编辑弹窗
+  const openEditDialog = (model: ModelInfo) => {
+    editingModelId.value = model.id
+    editForm.value = {
+      name: model.name,
+      apiKey: model.api_key,
+      apiEndpoint: model.api_endpoint,
+      baseUrl: model.base_url,
+      provider: model.provider,
+      model: model.model,
+      modelType: model.model_type,
+    }
+    originalStatus.value = model.status
+    editConnectionStatus.value = 'idle'
+    showEditModelForm.value = true
+  }
+
+  // 更新模型
+  const updateModel = async () => {
+    if (!editingModelId.value || !editForm.value.name || !editForm.value.provider || !editForm.value.model) {
+      ElMessage.warning('Please fill in required fields')
+      return
+    }
+
+    // 根据测试连接结果设置状态
+    // 用户测试通过 -> active
+    // 用户测试失败 -> error
+    // 用户没有测试 -> inactive
+    let newStatus = 'inactive'
+    if (editConnectionStatus.value === 'success') {
+      newStatus = 'active'
+    } else if (editConnectionStatus.value === 'error') {
+      newStatus = 'error'
+    }
+
+    try {
+      const response = await fetch(`${API_BASE}/model/${editingModelId.value}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: editForm.value.name,
+          model_type: editForm.value.modelType || 'chat',
+          provider: editForm.value.provider,
+          model: editForm.value.model,
+          api_key: editForm.value.apiKey,
+          base_url: editForm.value.baseUrl,
+          api_endpoint: editForm.value.apiEndpoint,
+          status: newStatus,
+        }),
+      })
+
+      if (response.ok) {
+        const result = await response.json()
+        const index = models.value.findIndex(m => m.id === editingModelId.value)
+        if (index !== -1) {
+          models.value[index] = result
+        }
+        showEditModelForm.value = false
+        ElMessage.success('Model updated successfully')
+      } else {
+        const error = await response.json()
+        ElMessage.error(error.message || 'Failed to update model')
+      }
+    } catch (error: any) {
+      ElMessage.error('Failed to update model: ' + error.message)
+    }
+  }
+
+  // 取消编辑
+  const cancelEditModel = () => {
+    editForm.value = {
+      name: '',
+      apiKey: '',
+      apiEndpoint: '',
+      baseUrl: '',
+      provider: '',
+      model: '',
+      modelType: '',
+    }
+    editingModelId.value = ''
+    showEditModelForm.value = false
+  }
+
  return {
    // State
    models,
@@ -200,15 +360,23 @@ export function useModelSettings() {
    modelTypeOptions,
    providerOptions,
    showAddModelForm,
+    showEditModelForm,
    newModelForm,
+    editForm,
    testingConnection,
    connectionStatus,
+    testingEditConnection,
+    editConnectionStatus,

    // Methods
    fetchModels,
    testConnection,
+    testConnectionEdit,
    addModel,
    cancelAddModel,
    deleteModel,
+    openEditDialog,
+    updateModel,
+    cancelEditModel,
  }
 }
Author	SHA1	Message	Date
DESKTOP-72TV0V4\caoxiaozhu	52a4ffd7a9	docs: 添加知识库和设置页面截图 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-07 16:21:54 +08:00
DESKTOP-72TV0V4\caoxiaozhu	4fca3a150e	style: 更新全局样式和主题变量 - 添加新的 CSS 变量 - 优化暗色主题样式 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-07 16:21:50 +08:00
DESKTOP-72TV0V4\caoxiaozhu	650789e934	feat: 扩展 Settings 页面功能 - 添加解析设置配置 - 优化模型设置表单 - 添加更多样式配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-07 16:21:44 +08:00
DESKTOP-72TV0V4\caoxiaozhu	329968de7f	feat: 扩展 Knowledge 页面功能 - 添加知识库详情和编辑功能 - 新增 chunking 配置选项 - 优化知识库列表展示 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-07 16:21:35 +08:00
DESKTOP-72TV0V4\caoxiaozhu	25d3781f06	feat: 优化 Model 连接测试，支持阿里云 DashScope - 添加阿里云 provider 支持 - 添加连接超时 (10s) - 优化 URL 构建逻辑 - 默认状态改为 inactive - 添加详细日志 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-07 16:21:29 +08:00