refactor: 优化界面组件和样式，简化代码结构

- 移除知识图谱查看器的图例和部分控制按钮
- 调整数据库信息视图的面板宽度和背景色
- 简化知识库工厂注册参数
- 移除文件表格的自动刷新和面板切换按钮
- 优化代理配置侧边栏的系统提示词编辑体验

src/__init__.py

@@ -20,19 +20,8 @@ from src.knowledge.lightrag_kb import LightRagKB  # noqa: E402
 from src.knowledge.milvus_kb import MilvusKB  # noqa: E402
 
 # 注册知识库类型
-KnowledgeBaseFactory.register(
-    "chroma",
-    ChromaKB,
-    {"chunk_size": 1000, "chunk_overlap": 200, "description": "基于 ChromaDB 的轻量级向量知识库，适合开发和小规模部署"},
-)
-
-KnowledgeBaseFactory.register(
-    "milvus",
-    MilvusKB,
-    {"chunk_size": 1000, "chunk_overlap": 200, "description": "基于 Milvus 的生产级向量知识库，适合大规模高性能部署"},
-)
-
-
+KnowledgeBaseFactory.register("chroma", ChromaKB, {"description": "基于 ChromaDB 的轻量级向量知识库，适合开发和小规模"})
+KnowledgeBaseFactory.register("milvus", MilvusKB, {"description": "基于 Milvus 的生产级向量知识库，适合高性能部署"})
 KnowledgeBaseFactory.register("lightrag", LightRagKB, {"description": "基于图检索的知识库，支持实体关系构建和复杂查询"})
 
 

web/src/components/AgentConfigSidebar.vue

@@ -68,14 +68,33 @@
                 </div>
 
                 <!-- 系统提示词 -->
-                <a-textarea
-                  v-else-if="key === 'system_prompt'"
-                  :value="agentConfig[key]"
-                  @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
-                  :rows="10"
-                  :placeholder="getPlaceholder(key, value)"
-                  class="system-prompt-input"
-                />
+                <div v-else-if="key === 'system_prompt'" class="system-prompt-container">
+                  <!-- 编辑模式 -->
+                  <a-textarea
+                    v-if="systemPromptEditMode"
+                    :value="agentConfig[key]"
+                    @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
+                    :rows="10"
+                    :placeholder="getPlaceholder(key, value)"
+                    class="system-prompt-input"
+                    @blur="systemPromptEditMode = false"
+                    ref="systemPromptTextarea"
+                  />
+                  <!-- 显示模式 -->
+                  <div
+                    v-else
+                    class="system-prompt-display"
+                    @click="enterEditMode"
+                  >
+                    <div
+                      class="system-prompt-content"
+                      :class="{ 'is-placeholder': !agentConfig[key] }"
+                    >
+                      {{ agentConfig[key] || getPlaceholder(key, value) }}
+                    </div>
+                    <div class="edit-hint">点击编辑</div>
+                  </div>
+                </div>
 
                 <!-- 工具选择 -->
                 <div v-else-if="value.template_metadata.kind === 'tools'" class="tools-selector">
@@ -276,7 +295,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import {
   SettingOutlined,
   CloseOutlined,
@@ -319,6 +338,7 @@ const debugMode = ref(false);
 const toolsModalOpen = ref(false);
 const selectedTools = ref([]);
 const toolsSearchText = ref('');
+const systemPromptEditMode = ref(false);
 
 
 const isEmptyConfig = computed(() => {
@@ -464,6 +484,18 @@ const cancelToolsSelection = () => {
   selectedTools.value = [];
 };
 
+// 系统提示词编辑相关方法
+const enterEditMode = () => {
+  systemPromptEditMode.value = true;
+  // 使用 nextTick 确保 DOM 更新后再聚焦
+  nextTick(() => {
+    const textarea = document.querySelector('.system-prompt-input');
+    if (textarea) {
+      textarea.focus();
+    }
+  });
+};
+
 // 验证和过滤配置项
 const validateAndFilterConfig = () => {
   const validatedConfig = { ...agentConfig.value };
@@ -721,6 +753,62 @@ watch(() => props.isOpen, (newVal) => {
             }
           }
 
+          .system-prompt-container {
+            width: 100%;
+          }
+
+          .system-prompt-display {
+            min-height: 60px;
+            background: var(--gray-50);
+            border: 1px solid var(--gray-200);
+            border-radius: 6px;
+            padding: 8px 12px;
+            cursor: pointer;
+            position: relative;
+            transition: all 0.2s ease;
+
+            &:hover {
+              border-color: var(--main-color);
+              background: var(--gray-25);
+
+              .edit-hint {
+                opacity: 1;
+              }
+            }
+
+            .system-prompt-content {
+               white-space: pre-wrap;
+               word-break: break-word;
+               line-height: 1.5;
+               color: var(--gray-900);
+               font-size: 14px;
+              //  min-height: 100px;
+
+               &.is-placeholder {
+                 color: var(--gray-400);
+                 font-style: italic;
+               }
+
+               &:empty::before {
+                 content: attr(data-placeholder);
+                 color: var(--gray-400);
+               }
+             }
+
+            .edit-hint {
+              position: absolute;
+              top: 8px;
+              right: 12px;
+              font-size: 12px;
+              color: var(--gray-400);
+              opacity: 0;
+              transition: opacity 0.2s ease;
+              background: rgba(255, 255, 255, 0.9);
+              padding: 2px 6px;
+              border-radius: 4px;
+            }
+          }
+
           .config-select,
           .config-input,
           .config-input-number {

web/src/components/FileTable.vue

@@ -17,7 +17,7 @@
           :icon="h(ReloadOutlined)"
           title="刷新"
         />
-        <a-button
+        <!-- <a-button
           @click="toggleAutoRefresh"
           size="small"
           :type="autoRefresh ? 'primary' : 'default'"
@@ -25,7 +25,7 @@
           class="auto-refresh-btn panel-action-btn"
         >
           Auto
-        </a-button>
+        </a-button> -->
         <a-input
           v-model:value="filenameFilter"
           placeholder="搜索文件名"
@@ -34,14 +34,14 @@
           allow-clear
           @change="onFilterChange"
         />
-        <a-button
+        <!-- <a-button
           type="text"
           @click="toggleRightPanel"
           :icon="h(ChevronLast)"
           title="切换右侧面板"
           class="panel-action-btn expand"
           :class="{ 'expanded': props.rightPanelVisible }"
-        />
+        /> -->
       </div>
     </div>
 

web/src/components/KnowledgeGraphSection.vue

@@ -29,14 +29,14 @@
           导出图谱
         </a-button>
         -->
-        <a-button
+        <!-- <a-button
           type="text"
           size="small"
           @click="showSettings = true"
         >
           <SettingOutlined />
-          查询参数
-        </a-button>
+          参数
+        </a-button> -->
         <!-- <a-button
           type="text"
           size="small"
@@ -327,39 +327,3 @@ watch(isGraphSupported, (supported) => {
   }
 }
 </style>
-
-<style lang="less">
-.graph-section {
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 12px;
-    border-bottom: 1px solid #f0f0f0;
-    background-color: #fafafa;
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    .section-title {
-      font-size: 16px;
-      font-weight: 500;
-      margin: 0;
-    }
-
-    .graph-stats {
-      display: flex;
-      gap: 8px;
-    }
-
-    .panel-actions {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-  }
-}
-</style>

web/src/components/KnowledgeGraphViewer.vue

@@ -178,7 +178,7 @@
       </div>
     </div>
 
-    <div class="legend" v-if="entityTypes.length > 0">
+    <!-- <div class="legend" v-if="entityTypes.length > 0">
       <div class="legend-header">
         <h4>实体类型</h4>
       </div>
@@ -191,7 +191,7 @@
           <span>{{ type.type }} ({{ type.count }})</span>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 控制按钮 (简化版) -->
     <div class="graph-controls">

web/src/views/DataBaseInfoView.vue

@@ -121,7 +121,7 @@ const toggleRightPanel = () => {
 };
 
 // 拖拽调整大小
-const leftPanelWidth = ref(45);
+const leftPanelWidth = ref(60);
 const isDragging = ref(false);
 const resizeHandle = ref(null);
 
@@ -332,7 +332,7 @@ const handleMouseUpHorizontal = () => {
   .left-panel {
     flex-shrink: 0;
     flex-grow: 1;
-    background-color: var(--bg-sider);
+    background-color: var(--gray-0);
     padding: 8px;
   }
 
@@ -350,7 +350,7 @@ const handleMouseUpHorizontal = () => {
   }
 
   .resize-handle {
-    width: 2px;
+    width: 1px;
     cursor: col-resize;
     background-color: var(--gray-200);
     transition: background-color 0.2s ease;