From f0275aaadc8d6b123d1aad4195e50ff23175babb Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Thu, 6 Nov 2025 21:59:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/FileTable.vue             |  39 +--
 web/src/components/FileUploadModal.vue       | 140 +++++----
 web/src/components/KnowledgeGraphSection.vue |  60 +++-
 web/src/components/MessageInputComponent.vue |   2 +-
 web/src/components/QuerySection.vue          | 301 +++++++------------
 web/src/views/DataBaseInfoView.vue           |  36 ++-
 web/src/views/DataBaseView.vue               |  15 +-
 7 files changed, 279 insertions(+), 314 deletions(-)

diff --git a/web/src/components/FileTable.vue b/web/src/components/FileTable.vue
index 476cda97..f54f4b0a 100644
--- a/web/src/components/FileTable.vue
+++ b/web/src/components/FileTable.vue
@@ -46,7 +46,7 @@
       </div>
     </div>
 
-    <div class="batch-actions-compact" v-if="selectedRowKeys.length > 0">
+    <div class="batch-actions" v-if="selectedRowKeys.length > 0">
       <div class="batch-info">
         <span>{{ selectedRowKeys.length }} 项</span>
         <a-button
@@ -74,7 +74,7 @@
         :columns="columnsCompact"
         :data-source="filteredFiles"
         row-key="file_id"
-        class="my-table-compact"
+        class="my-table"
         size="small"
         :pagination="paginationCompact"
         :row-selection="{
@@ -373,7 +373,8 @@ import { parseToShanghai } from '@/utils/time';
 .file-table-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
   border-radius: 12px;
   border: 1px solid var(--gray-150);
   padding-top: 6px;
@@ -416,12 +417,12 @@ import { parseToShanghai } from '@/utils/time';
   }
 }
 
-.batch-actions-compact {
+.batch-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 2px 4px;
-  background-color: var(--main-5);
+  padding: 2px 12px;
+  background-color: var(--main-10);
   border-radius: 4px;
   margin-bottom: 4px;
   flex-shrink: 0;
@@ -434,31 +435,31 @@ import { parseToShanghai } from '@/utils/time';
 }
 
 .batch-info span {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--gray-700);
 }
 
-.batch-actions-compact .ant-btn {
-  font-size: 11px;
+.batch-actions .ant-btn {
+  font-size: 12px;
   padding: 0 6px;
   height: 22px;
   border-radius: 3px;
 }
 
-.batch-actions-compact .ant-btn:hover {
+.batch-actions .ant-btn:hover {
   background-color: var(--main-20);
   color: var(--main-color);
 }
 
-.my-table-compact {
+.my-table {
   flex: 1;
   overflow: auto;
   background-color: transparent;
   min-height: 0; /* 让 flex 子项可以正确缩小 */
 }
 
-.my-table-compact .main-btn {
+.my-table .main-btn {
   padding: 0;
   height: auto;
   line-height: 1.4;
@@ -468,32 +469,32 @@ import { parseToShanghai } from '@/utils/time';
   text-decoration: none;
 }
 
-.my-table-compact .main-btn:hover {
+.my-table .main-btn:hover {
   cursor: pointer;
   color: var(--main-color);
 }
 
-.my-table-compact .del-btn {
+.my-table .del-btn {
   color: var(--gray-500);
 }
 
-.my-table-compact .download-btn {
+.my-table .download-btn {
   color: var(--gray-500);
 }
 
-.my-table-compact .download-btn:hover {
+.my-table .download-btn:hover {
   color: var(--main-color);
 }
 
-.my-table-compact .del-btn:hover {
+.my-table .del-btn:hover {
   color: var(--error-color);
 }
 
-.my-table-compact .del-btn:disabled {
+.my-table .del-btn:disabled {
   cursor: not-allowed;
 }
 
-.my-table-compact .span-type {
+.my-table .span-type {
   display: inline-block;
   padding: 1px 5px;
   font-size: 10px;
diff --git a/web/src/components/FileUploadModal.vue b/web/src/components/FileUploadModal.vue
index 0df7efa2..14377149 100644
--- a/web/src/components/FileUploadModal.vue
+++ b/web/src/components/FileUploadModal.vue
@@ -21,12 +21,12 @@
     <div class="add-files-content">
       <div class="upload-header">
         <div class="source-selector">
-          <div class="upload-mode-selector" @click="uploadMode = 'file'" :class="{ active: uploadMode === 'file' }">
-            <FileOutlined /> 上传文件
-          </div>
-          <div class="upload-mode-selector" @click="uploadMode = 'url'" :class="{ active: uploadMode === 'url' }">
-            <LinkOutlined /> 输入网址
-          </div>
+          <a-segmented
+            v-model:value="uploadMode"
+            :options="uploadModeOptions"
+            size="large"
+            class="source-segmented"
+          />
         </div>
         <div class="config-controls">
           <a-button type="dashed" @click="showChunkConfigModal" v-if="!isGraphBased">
@@ -35,7 +35,7 @@
         </div>
       </div>
 
-      <div class="ocr-config">
+      <div class="ocr-config" v-if="uploadMode === 'file'">
         <a-form layout="horizontal">
           <a-form-item label="使用OCR" name="enable_ocr">
             <div class="ocr-controls">
@@ -67,36 +67,6 @@
         </a-form>
       </div>
 
-      <div class="qa-split-config" v-if="isQaSplitSupported">
-        <a-form layout="horizontal">
-          <a-form-item label="QA分割模式" name="use_qa_split">
-            <div class="toggle-controls">
-              <a-switch
-                v-model:checked="chunkParams.use_qa_split"
-                style="margin-right: 12px;"
-              />
-              <span class="param-description">
-                {{ chunkParams.use_qa_split ? '启用QA分割（忽略chunk大小设置）' : '使用普通分割模式' }}
-              </span>
-            </div>
-          </a-form-item>
-          <a-form-item
-            v-if="chunkParams.use_qa_split"
-            label="QA分隔符"
-            name="qa_separator"
-          >
-            <a-input
-              v-model:value="chunkParams.qa_separator"
-              placeholder="输入QA分隔符"
-              style="width: 200px; margin-right: 12px;"
-            />
-            <span class="param-description">
-              用于分割不同QA对的分隔符，默认为3个换行符
-            </span>
-          </a-form-item>
-        </a-form>
-      </div>
-
             <!-- PDF/图片OCR提醒 -->
       <div v-if="uploadMode === 'file' && hasPdfOrImageFiles && !isOcrEnabled" class="ocr-warning-alert">
         ⚠️ 检测到PDF或图片文件，请启用OCR功能以提取文本内容
@@ -181,7 +151,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { message, Upload } from 'ant-design-vue';
 import { useUserStore } from '@/stores/user';
 import { useDatabaseStore } from '@/stores/database';
@@ -295,6 +265,24 @@ const chunkLoading = computed(() => store.state.chunkLoading);
 
 // 上传模式
 const uploadMode = ref('file');
+const previousOcrSelection = ref('disable');
+
+const uploadModeOptions = computed(() => [
+  {
+    value: 'file',
+    label: h('div', { class: 'segmented-option' }, [
+      h(FileOutlined, { class: 'option-icon' }),
+      h('span', { class: 'option-text' }, '上传文件'),
+    ]),
+  },
+  {
+    value: 'url',
+    label: h('div', { class: 'segmented-option' }, [
+      h(LinkOutlined, { class: 'option-icon' }),
+      h('span', { class: 'option-text' }, '输入网址'),
+    ]),
+  },
+]);
 
 // 文件列表
 const fileList = ref([]);
@@ -349,6 +337,15 @@ const isOcrEnabled = computed(() => {
   return chunkParams.value.enable_ocr !== 'disable';
 });
 
+watch(uploadMode, (mode, previous) => {
+  if (mode === 'url') {
+    previousOcrSelection.value = chunkParams.value.enable_ocr;
+    chunkParams.value.enable_ocr = 'disable';
+  } else if (mode === 'file' && previous === 'url') {
+    chunkParams.value.enable_ocr = previousOcrSelection.value || 'disable';
+  }
+});
+
 // 计算属性：是否有PDF或图片文件
 const hasPdfOrImageFiles = computed(() => {
   if (fileList.value.length === 0) {
@@ -647,25 +644,7 @@ const chunkData = async () => {
 
 .source-selector {
   display: flex;
-  gap: 12px;
-}
-
-.upload-mode-selector {
-  padding: 8px 16px;
-  border: 1px solid var(--gray-300);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.upload-mode-selector:hover {
-  border-color: var(--main-color);
-}
-
-.upload-mode-selector.active {
-  border-color: var(--main-color);
-  background-color: var(--main-30);
-  color: var(--main-color);
+  align-items: center;
 }
 
 .config-controls {
@@ -673,19 +652,52 @@ const chunkData = async () => {
   align-items: center;
 }
 
-.ocr-config,
-.qa-split-config {
+.source-segmented {
+  background-color: var(--gray-100);
+  border-radius: 999px;
+  padding: 4px;
+  border: 1px solid var(--gray-200);
+}
+
+.source-segmented :deep(.ant-segmented-item) {
+  border-radius: 999px;
+}
+
+.source-segmented :deep(.ant-segmented-item-label) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  font-weight: 500;
+  color: var(--gray-600);
+}
+
+.source-segmented :deep(.ant-segmented-thumb) {
+  background-color: var(--main-30);
+  border-radius: 999px;
+}
+
+.source-segmented :deep(.ant-segmented-item-selected .ant-segmented-item-label) {
+  color: var(--main-color);
+}
+
+.source-segmented :deep(.segmented-option) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.source-segmented :deep(.option-icon) {
+  font-size: 16px;
+}
+
+.ocr-config {
   margin-bottom: 20px;
   padding: 16px;
   background-color: var(--gray-50);
   border-radius: 6px;
 }
 
-.toggle-controls {
-  display: flex;
-  align-items: center;
-}
-
 .param-description {
   font-size: 12px;
   color: var(--gray-600);
diff --git a/web/src/components/KnowledgeGraphSection.vue b/web/src/components/KnowledgeGraphSection.vue
index 8678fe0c..bab8703a 100644
--- a/web/src/components/KnowledgeGraphSection.vue
+++ b/web/src/components/KnowledgeGraphSection.vue
@@ -113,17 +113,25 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
 import { useDatabaseStore } from '@/stores/database';
 import { ReloadOutlined, ExpandOutlined } from '@ant-design/icons-vue';
-import { message } from 'ant-design-vue';
 import KnowledgeGraphViewer from '@/components/KnowledgeGraphViewer.vue';
 import { h } from 'vue';
+import { getKbTypeLabel } from '@/utils/kb_utils';
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
 
 const store = useDatabaseStore();
 
 const databaseId = computed(() => store.databaseId);
 const kbType = computed(() => store.database.kb_type);
+const kbTypeLabel = computed(() => getKbTypeLabel(kbType.value || 'lightrag'));
 const graphStats = computed({
     get: () => store.graphStats,
     set: (stats) => store.graphStats = stats
@@ -146,10 +154,9 @@ const isGraphSupported = computed(() => {
   return type === 'lightrag';
 });
 
+let pendingLoadTimer = null;
+
 const loadGraph = () => {
-  if (!(Object.keys(store.database?.files).length > 0)) {
-    return;
-  }
   if (graphViewerRef.value && typeof graphViewerRef.value.loadFullGraph === 'function') {
     graphViewerRef.value.loadFullGraph();
   }
@@ -220,12 +227,45 @@ const applySettings = () => {
 //   }
 // };
 
-watch(isGraphSupported, (supported) => {
-    if (supported) {
-        setTimeout(() => {
-            loadGraph();
-        }, 800);
+const scheduleGraphLoad = (delay = 200) => {
+  if (!props.active || !isGraphSupported.value) {
+    return;
+  }
+  if (pendingLoadTimer) {
+    clearTimeout(pendingLoadTimer);
+  }
+  pendingLoadTimer = setTimeout(() => {
+    nextTick(() => {
+      loadGraph();
+    });
+  }, delay);
+};
+
+watch(
+  () => props.active,
+  (active) => {
+    if (active) {
+      scheduleGraphLoad();
     }
+  },
+  { immediate: true }
+);
+
+watch(databaseId, () => {
+  scheduleGraphLoad(300);
+});
+
+watch(isGraphSupported, (supported) => {
+  if (supported) {
+    scheduleGraphLoad(200);
+  }
+});
+
+onUnmounted(() => {
+  if (pendingLoadTimer) {
+    clearTimeout(pendingLoadTimer);
+    pendingLoadTimer = null;
+  }
 });
 
 </script>
diff --git a/web/src/components/MessageInputComponent.vue b/web/src/components/MessageInputComponent.vue
index d56ea2cf..2d429e4b 100644
--- a/web/src/components/MessageInputComponent.vue
+++ b/web/src/components/MessageInputComponent.vue
@@ -444,7 +444,7 @@ onBeforeUnmount(() => {
   }
 
   &:disabled {
-    background-color: var(--gray-400);
+    opacity: 0.5;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
diff --git a/web/src/components/QuerySection.vue b/web/src/components/QuerySection.vue
index 4716a7cc..f317ab25 100644
--- a/web/src/components/QuerySection.vue
+++ b/web/src/components/QuerySection.vue
@@ -3,63 +3,37 @@
     <div class="query-section-layout">
       <!-- 主内容区域 -->
       <div class="query-main">
-        <div class="query-header">
-          <div class="header-status">
-            <a-switch
-              v-model:checked="showRawData"
-              size="small"
-              checked-children="原始数据"
-              un-checked-children="格式化"
-            />
-            <span v-if="searchLoading" class="search-status">
-              <a-spin size="small" />
-              搜索中...
-            </span>
-            <span v-else-if="queryResult" class="result-count">
-              找到 {{ resultCount }} 条结果
-            </span>
-          </div>
-        </div>
-
         <div class="query-input-container">
-          <a-textarea
-            v-model:value="queryText"
-            placeholder="输入查询内容"
-            :auto-size="{ minRows: 3, maxRows: 6 }"
-            class="compact-query-textarea"
-          />
-          <div class="query-actions-row">
-            <a-button
-              @click="onQuery"
-              :loading="searchLoading"
-              class="search-button"
-              type="primary"
-            >
-              <template #icon>
-                <SearchOutlined />
-              </template>
-              搜索
-            </a-button>
-            <div class="query-examples-compact">
-              <span class="examples-label">示例：</span>
-              <div class="examples-container">
-                <a-button
-                  type="text"
-                  :key="currentExampleIndex"
-                  @click="useQueryExample(queryExamples[currentExampleIndex])"
-                  size="small"
-                  class="example-btn"
-                >
-                  {{ queryExamples[currentExampleIndex] }}
-                </a-button>
-              </div>
+          <div class="search-input-wrapper">
+            <a-textarea
+              v-model:value="queryText"
+              placeholder="输入查询内容..."
+              :auto-size="{ minRows: 2, maxRows: 6 }"
+              class="search-textarea"
+              @press-enter.prevent="onQuery"
+            />
+            <div class="search-actions">
+              <a-switch
+                v-model:checked="showRawData"
+                checked-children="格式化"
+                un-checked-children="原始"
+              />
+              <a-button
+                @click="onQuery"
+                :loading="searchLoading"
+                class="search-button"
+                type="primary"
+                :disabled="!queryText.trim()"
+                :icon=h(SearchOutlined)
+                shape="circle"
+              />
             </div>
           </div>
         </div>
 
         <div class="query-results" v-if="queryResult">
           <!-- 原始数据显示 -->
-          <div v-if="showRawData" class="result-raw">
+          <div v-if="!showRawData" class="result-raw">
             <pre>{{ JSON.stringify(queryResult, null, 2) }}</pre>
           </div>
 
@@ -128,16 +102,13 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, h } from 'vue';
 import { useDatabaseStore } from '@/stores/database';
 import { message } from 'ant-design-vue';
 import { queryApi } from '@/apis/knowledge_api';
 import {
   SearchOutlined,
-  SettingOutlined,
-  CloseOutlined,
 } from '@ant-design/icons-vue';
-import { h } from 'vue';
 
 const store = useDatabaseStore();
 
@@ -155,30 +126,11 @@ const props = defineProps({
 
 const searchLoading = computed(() => store.state.searchLoading);
 const queryResult = ref('');
-const showRawData = ref(false);
-const resultCount = ref(0);
+const showRawData = ref(true);
 
 // 查询测试
 const queryText = ref('');
 
-// 添加更多示例查询
-const queryExamples = ref([
-  '孕妇应该避免吃哪些水果？',
-  '荔枝应该怎么清洗？',
-  '如何判断西瓜是否成熟？',
-  '苹果有哪些营养价值？',
-  '什么季节最适合吃梨？',
-  '如何保存草莓以延长保质期？',
-  '香蕉变黑后还能吃吗？',
-  '橙子皮可以用来做什么？'
-]);
-
-// 当前示例索引
-const currentExampleIndex = ref(0);
-
-// 示例轮播相关
-let exampleCarouselInterval = null;
-
 
 const onQuery = async () => {
   if (!queryText.value.trim()) {
@@ -195,57 +147,19 @@ const onQuery = async () => {
     const data = await queryApi.queryTest(store.database.db_id, queryText.value.trim(), queryMeta);
     queryResult.value = data;
 
-    // 计算结果数量
-    if (data?.data && Array.isArray(data.data)) {
-      resultCount.value = data.data.length;
-    } else if (data) {
-      resultCount.value = 1;
-    }
-
   } catch (error) {
     console.error(error);
     message.error(error.message);
     queryResult.value = '';
-    resultCount.value = 0;
   } finally {
     store.state.searchLoading = false;
   }
 };
 
-const useQueryExample = (example) => {
-  queryText.value = example;
-  onQuery();
-};
-
-const startExampleCarousel = () => {
-  if (exampleCarouselInterval) return;
-
-  exampleCarouselInterval = setInterval(() => {
-    currentExampleIndex.value = (currentExampleIndex.value + 1) % queryExamples.value.length;
-  }, 6000); // 每6秒切换一次
-};
-
-const stopExampleCarousel = () => {
-  if (exampleCarouselInterval) {
-    clearInterval(exampleCarouselInterval);
-    exampleCarouselInterval = null;
-  }
-};
-
-// 组件挂载时启动示例轮播
+// 组件挂载时加载查询参数
 onMounted(() => {
-  // 启动示例轮播
-  startExampleCarousel();
-
   // 加载查询参数
   store.loadQueryParams();
-
-  });
-
-// 组件卸载时停止示例轮播
-onUnmounted(() => {
-  // 停止示例轮播
-  stopExampleCarousel();
 });
 </script>
 
@@ -267,98 +181,92 @@ onUnmounted(() => {
   flex-direction: column;
   overflow: hidden;
   min-width: 0;
-}
-
-.query-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--gray-200);
-  background-color: #fff;
-
-  .header-status {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    font-size: 13px;
-    color: var(--gray-600);
-
-    .search-status {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-
-    .result-count {
-      font-weight: 500;
-    }
-  }
+  max-height: 100%;
 }
 
 .query-input-container {
   padding: 16px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  background-color: #fff;
-  border-bottom: 1px solid var(--gray-200);
+  gap: 12px;
+  background-color: var(--gray-0);
 }
 
-.compact-query-textarea {
-  flex: 1;
+.search-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 16px 8px;
+  border-radius: 12px;
+  border: 1px solid var(--gray-200);
+  background-color: var(--gray-0);
+  box-shadow: 0 1px 3px rgba(23, 23, 23, 0.05);
+  transition: border-color 0.5s ease, box-shadow 0.5s ease;
 
-  &:focus {
+  &:hover {
+    border-color: var(--main-400);
+    box-shadow: 0 4px 12px rgba(1, 97, 121, 0.08);
+  }
+
+  :deep(.ant-input) {
+    border-radius: 8px;
+    background-color: var(--gray-0);
+    color: var(--gray-1000);
     outline: none;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+
+    &:focus {
+      outline: none;
+      border: none;
+    }
+
+    &::placeholder {
+      color: var(--gray-500);
+    }
   }
 }
 
-.query-actions-row {
+.search-actions {
   display: flex;
-  gap: 16px;
   align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .search-button {
-  flex-shrink: 0;
-}
+  background-color: var(--main-color);
+  border-color: var(--main-color);
+  box-shadow: 0 2px 4px rgba(1, 97, 121, 0.15);
+  transition: all 0.2s ease;
 
-.query-examples-compact {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
+  &:hover:not(:disabled) {
+    background-color: var(--main-bright);
+    border-color: var(--main-bright);
+    box-shadow: 0 4px 8px rgba(1, 136, 166, 0.25);
+    transform: translateY(-1px);
+  }
 
-.examples-label {
-  font-size: 12px;
-  color: #8c8c8c;
-  white-space: nowrap;
-}
-
-.examples-container {
-  min-height: 24px;
-  display: flex;
-}
-
-.example-btn {
-  text-align: left;
-  white-space: normal;
-  height: auto;
-  padding: 4px 8px;
-  font-size: 12px;
+  &:disabled {
+    opacity: 0.5;
+    color: var(--gray-0);
+    cursor: not-allowed;
+    box-shadow: none;
+    transform: none;
+  }
 }
 
 .query-results {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
-  background-color: #fafafa;
+  padding: 16px;
+  background-color: var(--gray-25);
   min-height: 0;
 
   .result-raw {
-    background-color: #f8f9fa;
+    background-color: var(--gray-50);
     border: 1px solid var(--gray-200);
     border-radius: 6px;
     padding: 16px;
@@ -369,6 +277,7 @@ onUnmounted(() => {
       font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
       font-size: 12px;
       line-height: 1.5;
+      color: var(--gray-1000);
       white-space: pre-wrap;
       word-break: break-word;
     }
@@ -378,32 +287,36 @@ onUnmounted(() => {
     white-space: pre-wrap;
     word-break: break-word;
     line-height: 1.6;
+    color: var(--gray-1000);
   }
 
   .result-list {
     .no-results {
       text-align: center;
       padding: 32px;
-      color: #999;
+      color: var(--gray-500);
     }
 
     .result-summary {
       margin-bottom: 12px;
       padding: 8px 12px;
-      background-color: #e6f7ff;
+      background-color: var(--main-50);
       border-left: 3px solid var(--main-color);
       border-radius: 2px;
+      color: var(--gray-800);
     }
 
     .result-item {
-      background-color: white;
-      border: 1px solid #e8e8e8;
+      background-color: var(--gray-0);
+      border: 1px solid var(--gray-200);
       border-radius: 6px;
       padding: 12px;
       margin-bottom: 12px;
+      transition: all 0.2s ease;
 
       &:hover {
-        border-color: var(--gray-400);
+        border-color: var(--main-300);
+        box-shadow: 0 2px 8px rgba(1, 97, 121, 0.08);
       }
 
       &:last-child {
@@ -416,7 +329,7 @@ onUnmounted(() => {
         gap: 12px;
         margin-bottom: 8px;
         padding-bottom: 8px;
-        border-bottom: 1px solid #f0f0f0;
+        border-bottom: 1px solid var(--gray-150);
 
         .result-index {
           font-weight: 600;
@@ -429,20 +342,20 @@ onUnmounted(() => {
           font-size: 12px;
           padding: 2px 8px;
           border-radius: 12px;
-          background-color: #f0f0f0;
-          color: #666;
+          background-color: var(--gray-100);
+          color: var(--gray-700);
         }
 
         .result-rerank-score {
-          background-color: #fff7e6;
-          color: #fa8c16;
+          background-color: var(--stats-warning-bg);
+          color: var(--stats-warning-color);
         }
       }
 
       .result-content {
         padding: 8px 0;
         line-height: 1.6;
-        color: #333;
+        color: var(--gray-900);
         white-space: pre-wrap;
         word-break: break-word;
       }
@@ -453,14 +366,14 @@ onUnmounted(() => {
         gap: 12px;
         margin-top: 8px;
         padding-top: 8px;
-        border-top: 1px solid #f0f0f0;
+        border-top: 1px solid var(--gray-150);
 
         .metadata-item {
           font-size: 12px;
-          color: #666;
+          color: var(--gray-700);
 
           strong {
-            color: #999;
+            color: var(--gray-500);
             font-weight: 500;
             margin-right: 4px;
           }
@@ -471,13 +384,15 @@ onUnmounted(() => {
 
   .result-unknown {
     pre {
-      background-color: white;
+      background-color: var(--gray-0);
+      border: 1px solid var(--gray-200);
       padding: 12px;
       border-radius: 4px;
       overflow-x: auto;
       font-size: 12px;
+      color: var(--gray-1000);
     }
   }
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index ab1855f7..e304f937 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -56,6 +56,7 @@
         <a-tab-pane key="graph" tab="知识图谱" v-if="isGraphSupported">
           <KnowledgeGraphSection
             :visible="true"
+            :active="activeTab === 'graph'"
             @toggle-visible="() => {}"
           />
         </a-tab-pane>
@@ -108,19 +109,27 @@ const isGraphSupported = computed(() => {
 
 // Tab 切换逻辑 - 智能默认
 const activeTab = ref('query');
-const previousDatabaseId = ref(null);
 
-// 监听数据库ID变化，只在切换数据库时设置默认Tab
-watch(databaseId, (newDbId, oldDbId) => {
-  if (newDbId && newDbId !== oldDbId) {
-    // 切换到支持图谱的数据库时，默认显示图谱，否则显示检索
-    // 使用setTimeout确保在下一个tick中设置，避免和其他响应式更新冲突
-    setTimeout(() => {
-      activeTab.value = isGraphSupported.value ? 'graph' : 'query';
-    }, 0);
-    previousDatabaseId.value = newDbId;
-  }
-}, { immediate: true });
+// LightRAG 默认展示知识图谱
+watch(
+  () => [databaseId.value, isGraphSupported.value],
+  ([newDbId, supported], oldValue = []) => {
+    const [oldDbId, previouslySupported] = oldValue;
+    if (!newDbId) {
+      return;
+    }
+
+    if (supported && (newDbId !== oldDbId || previouslySupported === false || previouslySupported === undefined)) {
+      activeTab.value = 'graph';
+      return;
+    }
+
+    if (!supported && activeTab.value === 'graph') {
+      activeTab.value = 'query';
+    }
+  },
+  { immediate: true }
+);
 
 // 切换右侧面板显示/隐藏
 const toggleRightPanel = () => {
@@ -261,10 +270,12 @@ const handleMouseUp = () => {
   }
 
   .left-panel {
+    display: flex;
     flex-shrink: 0;
     flex-grow: 1;
     background-color: var(--gray-0);
     padding-right: 0;
+    // max-height: calc(100% - 16px);
   }
 
   .right-panel {
@@ -315,7 +326,6 @@ const handleMouseUp = () => {
   }
 }
 
-
 /* Simplify resize handle */
 .resize-handle {
   opacity: 0.8;
diff --git a/web/src/views/DataBaseView.vue b/web/src/views/DataBaseView.vue
index 9579b1dd..4f2b6368 100644
--- a/web/src/views/DataBaseView.vue
+++ b/web/src/views/DataBaseView.vue
@@ -163,15 +163,6 @@
 
     <!-- 数据库列表 -->
     <div v-else class="databases">
-      <div class="new-database dbcard" @click="state.openNewDatabaseModel=true">
-        <div class="top">
-          <div class="icon"><BookPlus /></div>
-          <div class="info">
-            <h3>新建知识库</h3>
-          </div>
-        </div>
-        <p>导入您自己的文本数据或通过Webhook实时写入数据以增强 LLM 的上下文。</p>
-      </div>
       <div
         v-for="database in databases"
         :key="database.db_id"
@@ -224,7 +215,7 @@ import { ref, onMounted, reactive, watch, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router';
 import { useConfigStore } from '@/stores/config';
 import { message } from 'ant-design-vue'
-import { BookPlus, Database, Zap, FileDigit,  Waypoints, Building2 } from 'lucide-vue-next';
+import { Database, Zap, FileDigit,  Waypoints, Building2 } from 'lucide-vue-next';
 import { LockOutlined, InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { databaseApi, typeApi } from '@/apis/knowledge_api';
 import HeaderComponent from '@/components/HeaderComponent.vue';
@@ -877,10 +868,6 @@ onMounted(() => {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 16px;
-
-  .new-database {
-    background-color: #F0F3F4;
-  }
 }
 
 .database, .graphbase {