diff --git a/web/src/components/DatabaseHeader.vue b/web/src/components/DatabaseHeader.vue
deleted file mode 100644
index 66090438..00000000
--- a/web/src/components/DatabaseHeader.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <HeaderComponent
-    :title="database.name || '数据库信息加载中'"
-    :loading="loading"
-    class="database-info-header"
-  >
-    <template #left>
-      <a-button
-        @click="backToDatabase"
-        shape="circle"
-        :icon="h(LeftOutlined)"
-        type="text"
-      ></a-button>
-    </template>
-    <template #behind-title>
-      <a-button type="link" @click="showEditModal" :style="{ padding: '0px', color: 'inherit' }">
-        <EditOutlined />
-      </a-button>
-    </template>
-    <template #actions>
-      <div class="header-info">
-        <span class="db-id"
-          >ID:
-          <span style="user-select: all">{{ database.db_id || 'N/A' }}</span>
-        </span>
-        <span class="file-count">{{ database.row_count || 0 }} 文件</span>
-        <a-tag v-if="database.embedding_model_spec" color="blue">{{ database.embedding_model_spec }}</a-tag>
-        <a-tag
-          :color="getKbTypeColor(database.kb_type || 'milvus')"
-          class="kb-type-tag"
-          size="small"
-        >
-          <component :is="getKbTypeIcon(database.kb_type || 'milvus')" class="type-icon" />
-          {{ getKbTypeLabel(database.kb_type || 'milvus') }}
-        </a-tag>
-      </div>
-    </template>
-  </HeaderComponent>
-
-  <!-- 添加编辑对话框 -->
-  <a-modal v-model:open="editModalVisible" title="编辑知识库信息">
-    <template #footer>
-      <a-button danger @click="deleteDatabase" style="margin-right: auto; margin-left: 0">
-        <DeleteOutlined /> 删除数据库
-      </a-button>
-      <a-button key="back" @click="editModalVisible = false">取消</a-button>
-      <a-button key="submit" type="primary" @click="handleEditSubmit">确定</a-button>
-    </template>
-    <a-form :model="editForm" :rules="rules" ref="editFormRef" layout="vertical">
-      <a-form-item label="知识库名称" name="name" required>
-        <a-input v-model:value="editForm.name" placeholder="请输入知识库名称" />
-      </a-form-item>
-      <a-form-item label="知识库描述" name="description">
-        <AiTextarea
-          v-model="editForm.description"
-          :name="editForm.name"
-          placeholder="请输入知识库描述"
-          :rows="4"
-        />
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
-<script setup>
-import { ref, reactive, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { useDatabaseStore } from '@/stores/database'
-import { getKbTypeLabel, getKbTypeIcon, getKbTypeColor } from '@/utils/kb_utils'
-import { LeftOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
-import HeaderComponent from '@/components/HeaderComponent.vue'
-import AiTextarea from '@/components/AiTextarea.vue'
-import { h } from 'vue'
-
-const router = useRouter()
-const store = useDatabaseStore()
-
-const database = computed(() => store.database)
-const loading = computed(() => store.state.databaseLoading)
-
-const editModalVisible = ref(false)
-const editFormRef = ref(null)
-const editForm = reactive({
-  name: '',
-  description: ''
-})
-
-const rules = {
-  name: [{ required: true, message: '请输入知识库名称' }]
-}
-
-const backToDatabase = () => {
-  router.push({ path: '/extensions', query: { tab: 'knowledge' } })
-}
-
-const showEditModal = () => {
-  editForm.name = database.value.name || ''
-  editForm.description = database.value.description || ''
-  editModalVisible.value = true
-}
-
-const handleEditSubmit = () => {
-  editFormRef.value
-    .validate()
-    .then(async () => {
-      const updateData = {
-        name: editForm.name,
-        description: editForm.description
-      }
-
-      await store.updateDatabaseInfo(updateData)
-      editModalVisible.value = false
-    })
-    .catch((err) => {
-      console.error('表单验证失败:', err)
-    })
-}
-
-const deleteDatabase = () => {
-  store.deleteDatabase()
-}
-</script>
-
-<style scoped>
-.database-info-header {
-  padding: 8px;
-  height: 50px;
-}
-
-.header-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.db-id {
-  font-size: 12px;
-  color: var(--gray-500);
-}
-
-.file-count {
-  font-size: 12px;
-  color: var(--gray-500);
-}
-
-.kb-type-tag {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.type-icon {
-  width: 14px;
-  height: 14px;
-}
-</style>
diff --git a/web/src/components/FileTable.vue b/web/src/components/FileTable.vue
index 08c11bfa..ac262f2d 100644
--- a/web/src/components/FileTable.vue
+++ b/web/src/components/FileTable.vue
@@ -1,23 +1,8 @@
 <template>
   <div class="file-table-container">
     <div class="panel-header">
-      <div class="upload-btn-group">
-        <a-button type="primary" size="small" class="upload-btn" @click="showAddFilesModal()">
-          <FileUp size="14" />
-          上传
-        </a-button>
-
-        <a-button
-          class="panel-action-btn"
-          type="text"
-          size="small"
-          @click="showCreateFolderModal"
-          title="新建文件夹"
-        >
-          <template #icon><FolderPlus size="16" /></template>
-        </a-button>
-      </div>
       <div class="panel-actions">
+        <slot name="toolbar-extra" />
         <div class="panel-actions-default">
           <a-input
             v-model:value="filenameFilter"
@@ -32,23 +17,6 @@
             </template>
           </a-input>
 
-          <a-dropdown trigger="click">
-            <a-button
-              type="text"
-              class="panel-action-btn"
-              :class="{ active: sortField !== 'filename' }"
-              title="排序"
-            >
-              <template #icon><ArrowUpDown size="16" /></template>
-            </a-button>
-            <template #overlay>
-              <a-menu :selectedKeys="[sortField]" @click="handleSortMenuClick">
-                <a-menu-item v-for="opt in sortOptions" :key="opt.value">
-                  {{ opt.label }}
-                </a-menu-item>
-              </a-menu>
-            </template>
-          </a-dropdown>
 
           <a-dropdown trigger="click">
             <a-button
@@ -114,21 +82,6 @@
                 </a-input>
               </div>
               <div class="overflow-actions">
-                <a-dropdown trigger="click" placement="bottomLeft">
-                  <div class="overflow-action-item" :class="{ active: sortField !== 'filename' }">
-                    <ArrowUpDown size="16" />
-                    <span>排序</span>
-                    <span class="overflow-action-hint">{{ currentSortLabel }}</span>
-                  </div>
-                  <template #overlay>
-                    <a-menu :selectedKeys="[sortField]" @click="handleSortMenuClick">
-                      <a-menu-item v-for="opt in sortOptions" :key="opt.value">
-                        {{ opt.label }}
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-
                 <a-dropdown trigger="click" placement="bottomLeft">
                   <div class="overflow-action-item" :class="{ active: statusFilter !== 'all' }">
                     <Filter size="16" />
@@ -167,15 +120,6 @@
           </template>
         </a-dropdown>
 
-        <a-button
-          type="text"
-          @click="toggleRightPanel"
-          title="切换右侧面板"
-          class="panel-action-btn expand"
-          :class="{ expanded: props.rightPanelVisible }"
-        >
-          <template #icon><ChevronLast size="16" /></template>
-        </a-button>
       </div>
     </div>
 
@@ -264,7 +208,6 @@
       row-key="file_id"
       class="my-table"
       size="small"
-      :show-header="false"
       :pagination="tablePagination"
       @change="handleTableChange"
       v-model:expandedRowKeys="expandedRowKeys"
@@ -295,85 +238,56 @@
               {{ record.filename }}
             </span>
           </template>
-          <a-popover
-            v-else
-            placement="right"
-            overlayClassName="file-info-popover"
-            :mouseEnterDelay="0.5"
-          >
-            <template #content>
-              <div class="file-info-card">
-                <div class="info-row">
-                  <span class="label">ID:</span> <span class="value">{{ record.file_id }}</span>
-                </div>
-                <div class="info-row">
-                  <span class="label">状态:</span>
-                  <span class="value">{{ getStatusText(record.status) }}</span>
-                </div>
-                <div class="info-row">
-                  <span class="label">时间:</span>
-                  <span class="value">{{ formatRelativeTime(record.created_at) }}</span>
-                </div>
-                <div v-if="record.error_message" class="info-row error">
-                  <span class="label">错误:</span>
-                  <span class="value">{{ record.error_message }}</span>
-                </div>
-              </div>
-            </template>
-            <a-button class="main-btn" type="link" @click="openFileDetail(record)">
-              <component
-                :is="getFileIcon(record.displayName || text)"
-                :style="{
-                  marginRight: '0',
-                  color: getFileIconColor(record.displayName || text),
-                  fontSize: '16px'
-                }"
-              />
-              {{ record.displayName || text }}
-            </a-button>
-          </a-popover>
+          <a-button v-else class="main-btn" type="link" @click="openFileDetail(record)">
+            <component
+              :is="getFileIcon(record.displayName || text)"
+              :style="{
+                marginRight: '0',
+                color: getFileIconColor(record.displayName || text),
+                fontSize: '16px'
+              }"
+            />
+            {{ record.displayName || text }}
+          </a-button>
         </div>
         <span v-else-if="column.key === 'type'">
           <span v-if="!record.is_folder" :class="['span-type', text]">{{
             text?.toUpperCase()
           }}</span>
         </span>
-        <div
-          v-else-if="column.key === 'status'"
-          style="display: flex; align-items: center; justify-content: flex-end"
-        >
+        <div v-else-if="column.key === 'status'" class="file-status-cell">
           <template v-if="!record.is_folder">
-            <a-tooltip :title="getStatusText(text)">
-              <span
-                v-if="text === 'done' || text === 'indexed'"
-                style="color: var(--color-success-500)"
-                ><CheckCircleFilled
-              /></span>
-              <span
-                v-else-if="
-                  text === 'failed' || text === 'error_parsing' || text === 'error_indexing'
-                "
-                style="color: var(--color-error-500)"
-                ><CloseCircleFilled
-              /></span>
-              <span
-                v-else-if="text === 'processing' || text === 'parsing' || text === 'indexing'"
-                style="color: var(--color-info-500)"
-                ><HourglassFilled
-              /></span>
-              <span
-                v-else-if="text === 'waiting' || text === 'uploaded'"
-                style="color: var(--color-warning-500)"
-                ><ClockCircleFilled
-              /></span>
-              <span v-else-if="text === 'parsed'" style="color: var(--color-primary-500)"
-                ><FileTextFilled
-              /></span>
-              <span v-else>{{ text }}</span>
-            </a-tooltip>
+            <span
+              v-if="text === 'done' || text === 'indexed'"
+              class="file-status-icon status-success"
+              ><CheckCircleFilled
+            /></span>
+            <span
+              v-else-if="text === 'failed' || text === 'error_parsing' || text === 'error_indexing'"
+              class="file-status-icon status-error"
+              ><CloseCircleFilled
+            /></span>
+            <span
+              v-else-if="text === 'processing' || text === 'parsing' || text === 'indexing'"
+              class="file-status-icon status-info"
+              ><HourglassFilled
+            /></span>
+            <span
+              v-else-if="text === 'waiting' || text === 'uploaded'"
+              class="file-status-icon status-warning"
+              ><ClockCircleFilled
+            /></span>
+            <span v-else-if="text === 'parsed'" class="file-status-icon status-primary"
+              ><FileTextFilled
+            /></span>
+            <span>{{ getStatusText(text) }}</span>
           </template>
         </div>
 
+        <span v-else-if="column.key === 'created_at'" class="file-time-cell">
+          {{ record.is_folder ? '-' : formatStandardTime(text) }}
+        </span>
+
         <div v-else-if="column.key === 'action'" class="table-row-actions">
           <a-popover
             placement="bottomRight"
@@ -486,34 +400,18 @@ import {
   Trash2,
   Download,
   RotateCw,
-  ChevronLast,
   Ellipsis,
   FolderPlus,
   CheckSquare,
   FileText,
   Database,
-  FileUp,
   Search,
   Filter,
-  ArrowUpDown,
   MoreHorizontal
 } from 'lucide-vue-next'
 
 const store = useDatabaseStore()
 
-const sortField = ref('filename')
-const sortOptions = [
-  { label: '文件名', value: 'filename' },
-  { label: '创建时间', value: 'created_at' },
-  { label: '状态', value: 'status' }
-]
-
-const handleSortMenuClick = (e) => {
-  sortField.value = e.key
-  // 排序变化时重置到第一页
-  paginationConfig.value.current = 1
-}
-
 const handleStatusMenuClick = (e) => {
   statusFilter.value = e.key
   // 状态筛选变化时重置到第一页
@@ -538,15 +436,6 @@ const getStatusText = (status) => {
   return map[status] || status
 }
 
-const props = defineProps({
-  rightPanelVisible: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const emit = defineEmits(['showAddFilesModal', 'toggleRightPanel'])
-
 const files = computed(() => Object.values(store.database.files || {}))
 const refreshing = computed(() => store.state.refrashing)
 const lock = computed(() => store.state.lock)
@@ -561,11 +450,6 @@ const selectedRowKeys = computed({
 const isSelectionMode = ref(false)
 const overflowMenuOpen = ref(false)
 
-const currentSortLabel = computed(() => {
-  const opt = sortOptions.find((o) => o.value === sortField.value)
-  return opt ? opt.label : ''
-})
-
 const currentStatusLabel = computed(() => {
   if (statusFilter.value === 'all') return ''
   const opt = statusOptions.find((o) => o.value === statusFilter.value)
@@ -643,6 +527,10 @@ const showCreateFolderModal = (parentId = null) => {
   createFolderModalVisible.value = true
 }
 
+defineExpose({
+  showCreateFolderModal
+})
+
 const toggleExpand = (record) => {
   if (!record.is_folder) return
 
@@ -843,8 +731,7 @@ const columnsCompact = [
     title: '状态',
     dataIndex: 'status',
     key: 'status',
-    width: 60,
-    align: 'right',
+    width: 90,
     sorter: (a, b) => {
       const statusOrder = {
         done: 1,
@@ -863,7 +750,15 @@ const columnsCompact = [
     },
     sortDirections: ['ascend', 'descend']
   },
-  { title: '', key: 'action', dataIndex: 'file_id', width: 40, align: 'center' }
+  {
+    title: '时间',
+    dataIndex: 'created_at',
+    key: 'created_at',
+    width: 180,
+    sorter: (a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0),
+    sortDirections: ['ascend', 'descend']
+  },
+  { title: '操作', key: 'action', dataIndex: 'file_id', width: 64, align: 'center' }
 ]
 
 // 构建文件树
@@ -963,27 +858,7 @@ const buildFileTree = (fileList) => {
       if (a.is_folder && !b.is_folder) return -1
       if (!a.is_folder && b.is_folder) return 1
 
-      if (sortField.value === 'filename') {
-        return (a.filename || '').localeCompare(b.filename || '')
-      } else if (sortField.value === 'created_at') {
-        return new Date(b.created_at || 0) - new Date(a.created_at || 0)
-      } else if (sortField.value === 'status') {
-        const statusOrder = {
-          done: 1,
-          indexed: 1,
-          processing: 2,
-          indexing: 2,
-          parsing: 2,
-          waiting: 3,
-          uploaded: 3,
-          parsed: 3,
-          failed: 4,
-          error_indexing: 4,
-          error_parsing: 4
-        }
-        return (statusOrder[a.status] || 5) - (statusOrder[b.status] || 5)
-      }
-      return 0
+      return (a.filename || '').localeCompare(b.filename || '')
     })
     nodes.forEach((node) => {
       if (node.children) sortNodes(node.children)
@@ -1056,21 +931,12 @@ const canBatchIndex = computed(() => {
   })
 })
 
-const showAddFilesModal = (options = {}) => {
-  emit('showAddFilesModal', options)
-}
-
 const handleRefresh = () => {
   // 刷新时重置分页
   paginationConfig.value.current = 1
   store.getDatabaseInfo(undefined, true) // Skip query params for manual refresh
 }
 
-const toggleRightPanel = () => {
-  console.log(props.rightPanelVisible)
-  emit('toggleRightPanel')
-}
-
 const onSelectChange = (keys, selectedRows) => {
   // 只保留非文件夹的文件ID
   const fileKeys = selectedRows.filter((row) => !row.is_folder).map((row) => row.file_id)
@@ -1304,7 +1170,7 @@ const handleIndexConfigCancel = () => {
 }
 
 // 导入工具函数
-import { getFileIcon, getFileIconColor, formatRelativeTime } from '@/utils/file_utils'
+import { getFileIcon, getFileIconColor, formatStandardTime } from '@/utils/file_utils'
 import { buildChunkParamsPayload, isPlainObject } from '@/utils/chunk_presets'
 import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
 </script>
@@ -1328,22 +1194,25 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
-  padding: 8px 8px;
+  padding: 12px;
 }
 
 .panel-actions {
+  width: 100%;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
 
   .panel-actions-default {
     display: flex;
     align-items: center;
     gap: 6px;
+    margin-left: auto;
   }
 
   .overflow-trigger {
     display: none;
+    margin-left: auto;
   }
 
   .action-searcher {
@@ -1412,7 +1281,7 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
   background-color: transparent;
   min-height: 0;
   table-layout: fixed;
-  padding-left: 4px;
+  padding: 0 8px;
 }
 
 .my-table .main-btn {
@@ -1461,6 +1330,44 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
   height: 16px;
 }
 
+.file-status-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--gray-700);
+  white-space: nowrap;
+}
+
+.file-status-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.status-success {
+  color: var(--color-success-500);
+}
+
+.status-error {
+  color: var(--color-error-500);
+}
+
+.status-info {
+  color: var(--color-info-500);
+}
+
+.status-warning {
+  color: var(--color-warning-500);
+}
+
+.status-primary {
+  color: var(--color-primary-500);
+}
+
+.file-time-cell {
+  color: var(--gray-600);
+  white-space: nowrap;
+}
+
 .my-table .rechunk-btn:hover {
   color: var(--color-warning-500);
 }
@@ -1592,21 +1499,6 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
   }
 }
 
-.upload-btn-group {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  .upload-btn {
-    height: 28px;
-    font-size: 13px;
-    display: flex;
-    padding: 0 12px;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-  }
-}
 </style>
 
 <style lang="less">
@@ -1670,58 +1562,6 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
   }
 }
 
-.file-info-popover {
-  .ant-popover-inner {
-    border-radius: 8px;
-  }
-
-  // .ant-popover-inner-content {
-  //   padding: 16px;
-  // }
-
-  .file-info-card {
-    min-width: 120px;
-    max-width: 320px;
-    font-size: 13px;
-
-    .info-row {
-      display: flex;
-      margin-bottom: 8px;
-      line-height: 1.5;
-      align-items: flex-start;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .label {
-        color: var(--gray-500);
-        width: 40px;
-        flex-shrink: 0;
-        text-align: right;
-        margin-right: 12px;
-        font-weight: 500;
-      }
-
-      .value {
-        color: var(--gray-900);
-        word-break: break-all;
-        flex: 1;
-        font-family: monospace; /* Optional: for ID and numbers */
-      }
-
-      &.error {
-        .label {
-          color: var(--color-error-500);
-        }
-        .value {
-          color: var(--color-error-500);
-        }
-      }
-    }
-  }
-}
-
 .panel-overflow-popover {
   .ant-popover-inner {
     padding: 0;
diff --git a/web/src/components/KnowledgeBaseCard.vue b/web/src/components/KnowledgeBaseCard.vue
deleted file mode 100644
index 95119701..00000000
--- a/web/src/components/KnowledgeBaseCard.vue
+++ /dev/null
@@ -1,506 +0,0 @@
-<template>
-  <div class="knowledge-base-card">
-    <!-- 标题栏 -->
-    <div class="card-header">
-      <div class="header-left">
-        <a-button
-          @click="backToDatabase"
-          class="back-button"
-          shape="circle"
-          :icon="h(LeftOutlined)"
-          type="text"
-          size="small"
-        ></a-button>
-        <h3 class="card-title">{{ database.name || '数据库信息加载中' }}</h3>
-      </div>
-      <div class="header-right">
-        <a-button type="text" size="small" @click="copyDatabaseId" title="复制知识库ID">
-          <template #icon>
-            <Copy :size="14" />
-          </template>
-        </a-button>
-        <a-button @click="showEditModal" type="text" size="small">
-          <template #icon>
-            <Pencil :size="14" />
-          </template>
-        </a-button>
-      </div>
-    </div>
-
-    <!-- 卡片内容 -->
-    <div class="card-content">
-      <!-- 描述文本 -->
-      <div class="description">
-        <p class="description-text">{{ database.description || '暂无描述' }}</p>
-      </div>
-
-
-    </div>
-  </div>
-
-  <!-- 编辑对话框 -->
-  <a-modal v-model:open="editModalVisible" title="编辑知识库信息" width="700px">
-    <template #footer>
-      <a-button danger @click="deleteDatabase" style="margin-right: auto; margin-left: 0">
-        <template #icon>
-          <Trash2 :size="16" style="vertical-align: -3px; margin-right: 4px" />
-        </template>
-        删除数据库
-      </a-button>
-      <a-button key="back" @click="editModalVisible = false">取消</a-button>
-      <a-button key="submit" type="primary" @click="handleEditSubmit">确定</a-button>
-    </template>
-    <a-form :model="editForm" :rules="rules" ref="editFormRef" layout="vertical">
-      <a-form-item label="知识库名称" name="name" required>
-        <a-input v-model:value="editForm.name" placeholder="请输入知识库名称" />
-      </a-form-item>
-      <a-form-item label="知识库描述" name="description">
-        <AiTextarea
-          v-model="editForm.description"
-          :name="editForm.name"
-          :files="fileList"
-          placeholder="请输入知识库描述"
-          :rows="4"
-        />
-      </a-form-item>
-
-      <a-form-item
-        v-if="!isReadOnlyConnector"
-        label="自动生成问题"
-        name="auto_generate_questions"
-      >
-        <a-switch
-          v-model:checked="editForm.auto_generate_questions"
-          checked-children="开启"
-          un-checked-children="关闭"
-        />
-        <span style="margin-left: 8px; font-size: 12px; color: var(--gray-500)"
-          >上传文件后自动生成测试问题</span
-        >
-      </a-form-item>
-
-      <a-form-item v-if="!isReadOnlyConnector" name="chunk_preset_id">
-        <template #label>
-          <span class="chunk-preset-label">
-            分块策略
-            <a-tooltip :title="editPresetDescription">
-              <QuestionCircleOutlined class="chunk-preset-help-icon" />
-            </a-tooltip>
-          </span>
-        </template>
-        <a-select v-model:value="editForm.chunk_preset_id" :options="chunkPresetOptions" />
-      </a-form-item>
-
-      <template v-if="isDifyKb">
-        <a-form-item label="Dify API URL" name="dify_api_url">
-          <a-input
-            v-model:value="editForm.dify_api_url"
-            placeholder="例如: https://api.dify.ai/v1"
-          />
-        </a-form-item>
-        <a-form-item label="Dify Token" name="dify_token">
-          <a-input-password
-            v-model:value="editForm.dify_token"
-            placeholder="请输入 Dify API Token"
-          />
-        </a-form-item>
-        <a-form-item label="Dataset ID" name="dify_dataset_id">
-          <a-input v-model:value="editForm.dify_dataset_id" placeholder="请输入 Dify dataset_id" />
-        </a-form-item>
-      </template>
-
-      <template v-if="isNotionKb">
-        <a-form-item label="Notion Token" name="notion_token">
-          <a-input-password
-            v-model:value="editForm.notion_token"
-            placeholder="留空则保持现有 Token 或使用环境变量"
-          />
-        </a-form-item>
-        <a-form-item label="Data Source ID" name="notion_data_source_id">
-          <a-input
-            v-model:value="editForm.notion_data_source_id"
-            placeholder="请输入 Notion data_source_id"
-          />
-        </a-form-item>
-        <a-form-item label="Notion API Version" name="notion_version">
-          <a-input v-model:value="editForm.notion_version" placeholder="2026-03-11" />
-        </a-form-item>
-      </template>
-
-      <!-- 共享配置（超级管理员可编辑，非共享时本部门管理员也可编辑） -->
-      <a-form-item v-if="canEditShareConfig" label="共享设置" name="share_config">
-        <a-form-item-rest>
-          <ShareConfigForm
-            ref="shareConfigFormRef"
-            :model-value="database.share_config"
-            :auto-select-user-dept="true"
-          />
-        </a-form-item-rest>
-      </a-form-item>
-      <!-- 非编辑状态下显示共享配置信息 -->
-      <a-form-item v-else-if="database.share_config" label="共享设置" name="share_config_readonly">
-        <div class="share-config-readonly">
-          <a-tag :color="shareConfigDisplay.color">
-            {{ shareConfigDisplay.label }}
-          </a-tag>
-          <span class="access-names">
-            {{ shareConfigDisplay.detail }}
-          </span>
-        </div>
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
-<script setup>
-import { ref, reactive, computed, h, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useDatabaseStore } from '@/stores/database'
-import { useUserStore } from '@/stores/user'
-import { CHUNK_PRESET_OPTIONS, getChunkPresetDescription } from '@/utils/chunk_presets'
-import { message } from 'ant-design-vue'
-import { LeftOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue'
-import { Pencil, Trash2, Copy } from 'lucide-vue-next'
-import { departmentApi } from '@/apis/department_api'
-import { authApi } from '@/apis/auth_api'
-import AiTextarea from '@/components/AiTextarea.vue'
-import ShareConfigForm from '@/components/ShareConfigForm.vue'
-
-const router = useRouter()
-const store = useDatabaseStore()
-const userStore = useUserStore()
-
-const database = computed(() => store.database)
-const isDifyKb = computed(() => database.value?.kb_type === 'dify')
-const isNotionKb = computed(() => database.value?.kb_type === 'notion')
-const isReadOnlyConnector = computed(() => isDifyKb.value || isNotionKb.value)
-
-const departments = ref([])
-const users = ref([])
-
-const loadDepartments = async () => {
-  try {
-    const res = await departmentApi.getDepartments()
-    departments.value = res.departments || res || []
-  } catch (e) {
-    console.error('加载部门列表失败:', e)
-    departments.value = []
-  }
-}
-
-const loadUsers = async () => {
-  try {
-    users.value = await authApi.getUserAccessOptions()
-  } catch (e) {
-    console.error('加载用户列表失败:', e)
-    users.value = []
-  }
-}
-
-onMounted(() => {
-  loadDepartments()
-  loadUsers()
-})
-
-const shareConfigDisplay = computed(() => {
-  const shareConfig = database.value?.share_config || { access_level: 'global' }
-  if (shareConfig.access_level === 'department') {
-    const departmentIds = shareConfig.department_ids || []
-    const names = departmentIds.map((id) => getDepartmentName(id)).join('、') || '无'
-    return {
-      color: 'blue',
-      label: '部门共享',
-      detail: `${departmentIds.length} 个部门可访问：${names}`
-    }
-  }
-
-  if (shareConfig.access_level === 'user') {
-    const userUids = shareConfig.user_uids || []
-    const names = userUids.map((uid) => getUserName(uid)).join('、') || '无'
-    return {
-      color: 'purple',
-      label: '指定人可访问',
-      detail: `${userUids.length} 个用户可访问：${names}`
-    }
-  }
-
-  return {
-    color: 'green',
-    label: '全局共享',
-    detail: '所有用户可访问'
-  }
-})
-
-const getDepartmentName = (id) => {
-  const dept = departments.value.find((item) => Number(item.id) === Number(id))
-  return dept?.name || `部门${id}`
-}
-
-const getUserName = (uid) => {
-  const user = users.value.find((item) => item.uid === uid)
-  return user?.username || uid
-}
-
-// 是否可以编辑共享配置
-// 规则：1. 超级管理员可以编辑所有
-//       2. 管理员也可以编辑（后端会验证权限）
-const canEditShareConfig = computed(() => {
-  if (userStore.isSuperAdmin) {
-    return true
-  }
-  // 管理员可以编辑共享配置，后端会验证权限
-  return userStore.isAdmin
-})
-
-const fileList = computed(() => {
-  if (!database.value?.files) return []
-  return Object.values(database.value.files)
-    .map((f) => f.filename)
-    .filter(Boolean)
-})
-
-// 复制数据库ID
-const copyDatabaseId = async () => {
-  if (!database.value.db_id) {
-    message.warning('知识库ID为空')
-    return
-  }
-
-  try {
-    await navigator.clipboard.writeText(database.value.db_id)
-    message.success('知识库ID已复制到剪贴板')
-  } catch {
-    // 降级方案
-    const textArea = document.createElement('textarea')
-    textArea.value = database.value.db_id
-    document.body.appendChild(textArea)
-    textArea.select()
-    document.execCommand('copy')
-    document.body.removeChild(textArea)
-    message.success('知识库ID已复制到剪贴板')
-  }
-}
-
-// 返回数据库列表
-const backToDatabase = () => {
-  router.push({ path: '/extensions', query: { tab: 'knowledge' } })
-}
-
-// 编辑相关逻辑（复用自 DatabaseHeader）
-const editModalVisible = ref(false)
-const editFormRef = ref(null)
-const shareConfigFormRef = ref(null)
-const editForm = reactive({
-  name: '',
-  description: '',
-  auto_generate_questions: false,
-  chunk_preset_id: 'general',
-  dify_api_url: '',
-  dify_token: '',
-  dify_dataset_id: '',
-  notion_token: '',
-  notion_data_source_id: '',
-  notion_version: '2026-03-11'
-})
-
-const chunkPresetOptions = CHUNK_PRESET_OPTIONS.map(({ label, value }) => ({ label, value }))
-const editPresetDescription = computed(() => getChunkPresetDescription(editForm.chunk_preset_id))
-
-const rules = {
-  name: [{ required: true, message: '请输入知识库名称' }]
-}
-
-// 打开编辑弹窗
-const showEditModal = () => {
-  console.log('[showEditModal] 被调用')
-
-  editForm.name = database.value.name || ''
-  editForm.description = database.value.description || ''
-  editForm.auto_generate_questions =
-    database.value.additional_params?.auto_generate_questions || false
-  editForm.chunk_preset_id = database.value.additional_params?.chunk_preset_id || 'general'
-  editForm.dify_api_url = database.value.additional_params?.dify_api_url || ''
-  editForm.dify_token = database.value.additional_params?.dify_token || ''
-  editForm.dify_dataset_id = database.value.additional_params?.dify_dataset_id || ''
-  editForm.notion_token = ''
-  editForm.notion_data_source_id = database.value.additional_params?.notion_data_source_id || ''
-  editForm.notion_version = database.value.additional_params?.notion_version || '2026-03-11'
-
-  editModalVisible.value = true
-}
-
-const handleEditSubmit = () => {
-  editFormRef.value
-    .validate()
-    .then(async () => {
-      // 验证共享配置
-      if (shareConfigFormRef.value) {
-        const validation = shareConfigFormRef.value.validate()
-        if (!validation.valid) {
-          message.warning(validation.message)
-          return
-        }
-      }
-
-      const formConfig = shareConfigFormRef.value?.config || { access_level: 'global' }
-      const updateData = {
-        name: editForm.name,
-        description: editForm.description,
-        additional_params: {},
-        share_config: {
-          access_level: formConfig.access_level,
-          department_ids: formConfig.access_level === 'department' ? formConfig.department_ids || [] : [],
-          user_uids: formConfig.access_level === 'user' ? formConfig.user_uids || [] : []
-        }
-      }
-
-      if (isDifyKb.value) {
-        if (
-          !editForm.dify_api_url?.trim() ||
-          !editForm.dify_token?.trim() ||
-          !editForm.dify_dataset_id?.trim()
-        ) {
-          message.error('请完整填写 Dify API URL、Token 和 Dataset ID')
-          return
-        }
-        if (!editForm.dify_api_url.trim().endsWith('/v1')) {
-          message.error('Dify API URL 必须以 /v1 结尾')
-          return
-        }
-        updateData.additional_params = {
-          dify_api_url: editForm.dify_api_url.trim(),
-          dify_token: editForm.dify_token.trim(),
-          dify_dataset_id: editForm.dify_dataset_id.trim()
-        }
-      } else if (isNotionKb.value) {
-        if (!editForm.notion_data_source_id?.trim()) {
-          message.error('请填写 Notion Data Source ID')
-          return
-        }
-        updateData.additional_params = {
-          notion_data_source_id: editForm.notion_data_source_id.trim(),
-          notion_version: editForm.notion_version?.trim() || '2026-03-11'
-        }
-        if (editForm.notion_token?.trim()) {
-          updateData.additional_params.notion_token = editForm.notion_token.trim()
-        }
-      } else {
-        updateData.additional_params = {
-          auto_generate_questions: editForm.auto_generate_questions,
-          chunk_preset_id: editForm.chunk_preset_id || 'general'
-        }
-      }
-
-      console.log(
-        '[handleEditSubmit] updateData.share_config:',
-        JSON.stringify(updateData.share_config)
-      )
-
-      await store.updateDatabaseInfo(updateData)
-      editModalVisible.value = false
-    })
-    .catch((err) => {
-      console.error('表单验证失败:', err)
-    })
-}
-
-const deleteDatabase = () => {
-  store.deleteDatabase()
-}
-</script>
-
-<style lang="less" scoped>
-.knowledge-base-card {
-  background: linear-gradient(120deg, var(--main-30) 0%, var(--gray-0) 100%);
-  border-radius: 12px;
-  border: 1px solid var(--gray-200);
-  margin-bottom: 8px;
-}
-
-// 只读共享配置显示
-.share-config-readonly {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  .access-names {
-    font-size: 13px;
-    color: var(--gray-600);
-  }
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex: 1;
-    min-width: 0;
-
-    button.back-button {
-      margin-left: -5px;
-      font-size: 10px;
-    }
-  }
-
-  .card-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--gray-800);
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    // flex: 1;
-  }
-
-  .header-right {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex-shrink: 0;
-
-    button {
-      color: var(--gray-500);
-      height: 100%;
-    }
-
-    button:hover {
-      color: var(--gray-700);
-      background-color: var(--gray-100);
-    }
-  }
-}
-
-.card-content {
-  padding: 0 16px 16px 16px;
-}
-
-.description {
-  margin-bottom: 12px;
-
-  .description-text {
-    font-size: 14px;
-    color: var(--gray-700);
-    line-height: 1.5;
-    margin: 0;
-  }
-}
-
-.chunk-preset-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.chunk-preset-help-icon {
-  color: var(--gray-500);
-  cursor: help;
-  font-size: 14px;
-}
-</style>
diff --git a/web/src/components/QuerySection.vue b/web/src/components/QuerySection.vue
index 06f6bbdb..24fc312d 100644
--- a/web/src/components/QuerySection.vue
+++ b/web/src/components/QuerySection.vue
@@ -384,11 +384,10 @@ defineExpose({
 }
 
 .query-input-container {
-  padding: 16px;
+  padding-bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  background-color: var(--gray-0);
 }
 
 .search-input-wrapper {
@@ -512,7 +511,7 @@ defineExpose({
   }
 
   .result-list {
-    padding: 16px;
+    // padding: 16px;
 
     .no-results {
       text-align: center;
diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index 1b178876..98fc05da 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -1,14 +1,7 @@
 <template>
-  <div class="database-info-container">
+  <div class="database-info-container extension-detail-page">
     <FileDetailModal />
 
-    <!-- 检索配置弹窗 -->
-    <SearchConfigModal
-      v-model="searchConfigModalVisible"
-      :database-id="databaseId"
-      @save="handleSearchConfigSave"
-    />
-
     <FileUploadModal
       v-model:visible="addFilesModalVisible"
       :folder-tree="folderTree"
@@ -18,135 +11,343 @@
       @success="onFileUploadSuccess"
     />
 
-    <div class="unified-layout">
-      <div class="left-panel" :style="{ width: leftPanelWidth + '%' }">
-        <KnowledgeBaseCard />
-        <!-- 待处理文件提示条 -->
-        <div v-if="isMilvus && (pendingParseCount > 0 || pendingIndexCount > 0)" class="info-panel">
-          <div class="banner-item" v-if="pendingParseCount > 0" @click="confirmBatchParse">
-            <FileText :size="14" />
-            <span>{{ pendingParseCount }} 个文件待解析，点击解析</span>
-          </div>
-          <div class="banner-item" v-if="pendingIndexCount > 0" @click="confirmBatchIndex">
-            <Database :size="14" />
-            <span>{{ pendingIndexCount }} 个文件待入库，点击入库</span>
-          </div>
+    <div class="detail-top-bar">
+      <button class="detail-back-btn" type="button" @click="backToDatabase">
+        <ArrowLeft :size="16" />
+        <span>返回</span>
+      </button>
+      <div class="detail-title-area">
+        <div class="detail-icon">
+          <component :is="kbTypeIcon" :size="18" />
         </div>
-        <FileTable
-          v-if="isMilvus"
-          :right-panel-visible="state.rightPanelVisible"
-          @show-add-files-modal="showAddFilesModal"
-          @toggle-right-panel="toggleRightPanel"
-        />
-        <div v-if="isConnector" class="search-config-wrapper">
-          <div class="search-config-header">
-            <h4>检索配置</h4>
-            <button
-              type="button"
-              class="lucide-icon-btn extension-panel-action extension-panel-action-primary"
-              :disabled="searchConfigSaving"
-              @click="handleInlineSearchConfigSave"
-            >
-              <Save :size="14" />
-              <span>保存</span>
-            </button>
-          </div>
-          <div class="search-config-body">
-            <SearchConfigPanel
-              ref="searchConfigPanelRef"
-              :database-id="databaseId"
-              @save="handleSearchConfigSave"
-            />
-          </div>
+        <div class="detail-title-text">
+          <h2>{{ database.name || '知识库加载中' }}</h2>
+          <span class="detail-subtitle">{{ databaseSubtitle }}</span>
         </div>
       </div>
-
-      <div class="resize-handle" @mousedown="handleMouseDown"></div>
-
-      <div
-        class="right-panel"
-        :style="{
-          width: 100 - leftPanelWidth + '%',
-          display: isConnector || store.state.rightPanelVisible ? 'flex' : 'none'
-        }"
-      >
-        <a-tabs
-          v-model:activeKey="activeTab"
-          class="knowledge-tabs"
-          :tabBarStyle="{ margin: 0, padding: '0 16px' }"
-        >
-          <template v-if="isMilvus" #rightExtra>
-            <a-tooltip title="检索配置" placement="bottom">
-              <a-button type="text" class="config-btn" @click="openSearchConfigModal">
-                <SettingOutlined />
-                <span class="config-text">检索配置</span>
-              </a-button>
-            </a-tooltip>
-          </template>
-          <a-tab-pane key="query" tab="检索测试">
-            <QuerySection ref="querySectionRef" :visible="true" @toggle-visible="() => {}" />
-          </a-tab-pane>
-          <a-tab-pane v-if="isMilvus" key="graph" tab="知识图谱">
-            <KnowledgeGraphSection
-              :visible="true"
-              :active="activeTab === 'graph'"
-              @toggle-visible="() => {}"
-            />
-          </a-tab-pane>
-          <a-tab-pane v-if="isMilvus" key="mindmap" tab="知识导图">
-            <MindMapSection v-if="databaseId" :database-id="databaseId" ref="mindmapSectionRef" />
-          </a-tab-pane>
-          <a-tab-pane
-            v-if="isMilvus"
-            key="evaluation"
-            tab="RAG评估"
+      <div class="detail-actions">
+        <a-space :size="8">
+          <button
+            type="button"
+            class="lucide-icon-btn extension-panel-action extension-panel-action-secondary"
+            @click="copyDatabaseId"
           >
-            <RAGEvaluationTab
-              v-if="databaseId"
-              :database-id="databaseId"
-              @switch-to-benchmarks="activeTab = 'benchmarks'"
-            />
-          </a-tab-pane>
-          <a-tab-pane
-            v-if="isMilvus"
-            key="benchmarks"
-            tab="评估基准"
+            <Copy :size="14" />
+            <span>复制 ID</span>
+          </button>
+          <button
+            type="button"
+            class="lucide-icon-btn extension-panel-action extension-panel-action-primary"
+            @click="showEditModal"
           >
-            <div class="benchmark-management-container">
-              <div class="benchmark-content">
-                <EvaluationBenchmarks
-                  v-if="databaseId && isEvaluationSupported"
-                  :database-id="databaseId"
-                  @benchmark-selected="
-                    (benchmark) => {
-                      // 处理基准选择逻辑
-                      activeTab = 'evaluation'
-                    }
-                  "
-                  @refresh="
-                    () => {
-                      // 刷新逻辑
-                    }
-                  "
-                />
-              </div>
-            </div>
-          </a-tab-pane>
-        </a-tabs>
+            <Pencil :size="14" />
+            <span>编辑</span>
+          </button>
+        </a-space>
       </div>
     </div>
+
+    <div class="database-detail-body">
+      <aside class="database-sidebar" aria-label="知识库功能导航">
+        <nav class="database-tab-list">
+          <button
+            v-for="tab in visibleTabs"
+            :key="tab.key"
+            type="button"
+            class="database-tab-item"
+            :class="{ active: activeTab === tab.key }"
+            @click="activeTab = tab.key"
+          >
+            <component :is="tab.icon" :size="17" />
+            <span>{{ tab.label }}</span>
+          </button>
+        </nav>
+      </aside>
+
+      <main class="database-tab-content">
+        <div v-if="isMilvus" v-show="activeTab === 'filetable'" class="tab-panel file-panel">
+          <div class="file-management-info">
+            <div class="file-info-title">
+              <span class="file-panel-title">文件管理</span>
+              <span class="file-panel-desc">管理知识库中的文件、文件夹上传、整理与查看</span>
+            </div>
+            <div class="file-panel-status">
+              <div
+                v-if="pendingParseCount > 0"
+                class="file-stat-card file-stat-action"
+                @click="confirmBatchParse"
+              >
+                <FileText :size="20" />
+                <div>
+                  <strong>{{ pendingParseCount }}</strong>
+                  <span>待解析</span>
+                </div>
+              </div>
+              <div
+                v-if="pendingIndexCount > 0"
+                class="file-stat-card file-stat-action"
+                @click="confirmBatchIndex"
+              >
+                <DatabaseIcon :size="20" />
+                <div>
+                  <strong>{{ pendingIndexCount }}</strong>
+                  <span>待入库</span>
+                </div>
+              </div>
+              <div class="file-stat-card">
+                <FileText :size="20" />
+                <div>
+                  <strong>{{ fileStats.count }}</strong>
+                  <span>文件总数</span>
+                </div>
+              </div>
+              <div v-if="fileStats.sizeText" class="file-stat-card">
+                <DatabaseIcon :size="20" />
+                <div>
+                  <strong>{{ fileStats.sizeText }}</strong>
+                  <span>总大小</span>
+                </div>
+              </div>
+              <div class="file-stat-card">
+                <CheckCircle2 :size="20" />
+                <div>
+                  <strong>{{ fileStats.processedCount }}</strong>
+                  <span>已处理</span>
+                </div>
+              </div>
+              <div class="file-stat-card">
+                <Activity :size="20" />
+                <div>
+                  <strong>{{ fileStats.completionRate }}%</strong>
+                  <span>完成进度</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <FileTable ref="fileTableRef">
+            <template #toolbar-extra>
+              <div class="file-panel-actions">
+                <button
+                  type="button"
+                  class="lucide-icon-btn extension-panel-action extension-panel-action-primary"
+                  @click="showAddFilesModal()"
+                >
+                  <FileUp :size="14" />
+                  <span>上传</span>
+                </button>
+                <button
+                  type="button"
+                  class="lucide-icon-btn extension-panel-action extension-panel-action-secondary"
+                  @click="showCreateFolderModal"
+                >
+                  <FolderPlus :size="14" />
+                  <span>新建文件夹</span>
+                </button>
+              </div>
+            </template>
+          </FileTable>
+        </div>
+
+        <div v-show="activeTab === 'query'" class="tab-panel query-config-panel">
+          <div class="query-config-layout">
+            <div class="query-test-pane">
+              <QuerySection ref="querySectionRef" :visible="true" @toggle-visible="() => {}" />
+            </div>
+            <aside class="query-config-pane" aria-label="检索配置">
+              <div class="search-config-wrapper">
+                <div class="search-config-header">
+                  <div>
+                    <h3>检索配置</h3>
+                    <p>调整当前知识库的检索参数。</p>
+                  </div>
+                  <button
+                    type="button"
+                    class="lucide-icon-btn extension-panel-action extension-panel-action-primary"
+                    :disabled="searchConfigSaving"
+                    @click="handleInlineSearchConfigSave"
+                  >
+                    <Save :size="14" />
+                    <span>保存</span>
+                  </button>
+                </div>
+                <div class="search-config-body">
+                  <SearchConfigPanel
+                    ref="searchConfigPanelRef"
+                    :database-id="databaseId"
+                    @save="handleSearchConfigSave"
+                  />
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+
+        <div v-if="isMilvus && activeTab === 'graph'" class="tab-panel">
+          <KnowledgeGraphSection
+            :visible="true"
+            :active="activeTab === 'graph'"
+            @toggle-visible="() => {}"
+          />
+        </div>
+
+        <div v-if="isMilvus && activeTab === 'mindmap'" class="tab-panel">
+          <MindMapSection v-if="databaseId" :database-id="databaseId" ref="mindmapSectionRef" />
+        </div>
+
+        <div v-if="isMilvus && activeTab === 'evaluation'" class="tab-panel">
+          <RAGEvaluationTab
+            v-if="databaseId"
+            :database-id="databaseId"
+            @switch-to-benchmarks="activeTab = 'benchmarks'"
+          />
+        </div>
+
+        <div v-if="isMilvus && activeTab === 'benchmarks'" class="tab-panel">
+          <div class="benchmark-management-container">
+            <div class="benchmark-content">
+              <EvaluationBenchmarks
+                v-if="databaseId && isEvaluationSupported"
+                :database-id="databaseId"
+                @benchmark-selected="activeTab = 'evaluation'"
+              />
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <a-modal v-model:open="editModalVisible" title="编辑知识库信息" width="700px">
+      <template #footer>
+        <a-button danger @click="deleteDatabase" style="margin-right: auto; margin-left: 0">
+          <template #icon>
+            <Trash2 :size="16" style="vertical-align: -3px; margin-right: 4px" />
+          </template>
+          删除数据库
+        </a-button>
+        <a-button key="back" @click="editModalVisible = false">取消</a-button>
+        <a-button key="submit" type="primary" @click="handleEditSubmit">确定</a-button>
+      </template>
+      <a-form :model="editForm" :rules="rules" ref="editFormRef" layout="vertical">
+        <a-form-item label="知识库名称" name="name" required>
+          <a-input v-model:value="editForm.name" placeholder="请输入知识库名称" />
+        </a-form-item>
+        <a-form-item label="知识库描述" name="description">
+          <AiTextarea
+            v-model="editForm.description"
+            :name="editForm.name"
+            :files="fileList"
+            placeholder="请输入知识库描述"
+            :rows="4"
+          />
+        </a-form-item>
+
+        <a-form-item v-if="!isConnector" label="自动生成问题" name="auto_generate_questions">
+          <a-switch
+            v-model:checked="editForm.auto_generate_questions"
+            checked-children="开启"
+            un-checked-children="关闭"
+          />
+          <span style="margin-left: 8px; font-size: 12px; color: var(--gray-500)">
+            上传文件后自动生成测试问题
+          </span>
+        </a-form-item>
+
+        <a-form-item v-if="!isConnector" name="chunk_preset_id">
+          <template #label>
+            <span class="chunk-preset-label">
+              分块策略
+              <a-tooltip :title="editPresetDescription">
+                <QuestionCircleOutlined class="chunk-preset-help-icon" />
+              </a-tooltip>
+            </span>
+          </template>
+          <a-select v-model:value="editForm.chunk_preset_id" :options="chunkPresetOptions" />
+        </a-form-item>
+
+        <template v-if="isDifyKb">
+          <a-form-item label="Dify API URL" name="dify_api_url">
+            <a-input
+              v-model:value="editForm.dify_api_url"
+              placeholder="例如: https://api.dify.ai/v1"
+            />
+          </a-form-item>
+          <a-form-item label="Dify Token" name="dify_token">
+            <a-input-password
+              v-model:value="editForm.dify_token"
+              placeholder="请输入 Dify API Token"
+            />
+          </a-form-item>
+          <a-form-item label="Dataset ID" name="dify_dataset_id">
+            <a-input v-model:value="editForm.dify_dataset_id" placeholder="请输入 Dify dataset_id" />
+          </a-form-item>
+        </template>
+
+        <template v-if="isNotionKb">
+          <a-form-item label="Notion Token" name="notion_token">
+            <a-input-password
+              v-model:value="editForm.notion_token"
+              placeholder="留空则保持现有 Token 或使用环境变量"
+            />
+          </a-form-item>
+          <a-form-item label="Data Source ID" name="notion_data_source_id">
+            <a-input
+              v-model:value="editForm.notion_data_source_id"
+              placeholder="请输入 Notion data_source_id"
+            />
+          </a-form-item>
+          <a-form-item label="Notion API Version" name="notion_version">
+            <a-input v-model:value="editForm.notion_version" placeholder="2026-03-11" />
+          </a-form-item>
+        </template>
+
+        <a-form-item v-if="canEditShareConfig" label="共享设置" name="share_config">
+          <a-form-item-rest>
+            <ShareConfigForm
+              ref="shareConfigFormRef"
+              :model-value="database.share_config"
+              :auto-select-user-dept="true"
+            />
+          </a-form-item-rest>
+        </a-form-item>
+        <a-form-item v-else-if="database.share_config" label="共享设置" name="share_config_readonly">
+          <div class="share-config-readonly">
+            <a-tag :color="shareConfigDisplay.color">
+              {{ shareConfigDisplay.label }}
+            </a-tag>
+            <span class="access-names">{{ shareConfigDisplay.detail }}</span>
+          </div>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useDatabaseStore } from '@/stores/database'
 import { useTaskerStore } from '@/stores/tasker'
-import { FileText, Database, Save } from 'lucide-vue-next'
-import { SettingOutlined } from '@ant-design/icons-vue'
-import { Modal } from 'ant-design-vue'
-import KnowledgeBaseCard from '@/components/KnowledgeBaseCard.vue'
+import { useUserStore } from '@/stores/user'
+import {
+  Activity,
+  ArrowLeft,
+  BarChart3,
+  CheckCircle2,
+  ClipboardList,
+  Copy,
+  Database as DatabaseIcon,
+  FileUp,
+  FileText,
+  FolderPlus,
+  Map as MapIcon,
+  Network,
+  Pencil,
+  Save,
+  Search,
+  Trash2
+} from 'lucide-vue-next'
+import { QuestionCircleOutlined } from '@ant-design/icons-vue'
+import { message, Modal } from 'ant-design-vue'
 import FileTable from '@/components/FileTable.vue'
 import FileDetailModal from '@/components/FileDetailModal.vue'
 import FileUploadModal from '@/components/FileUploadModal.vue'
@@ -155,31 +356,107 @@ import QuerySection from '@/components/QuerySection.vue'
 import MindMapSection from '@/components/MindMapSection.vue'
 import RAGEvaluationTab from '@/components/RAGEvaluationTab.vue'
 import EvaluationBenchmarks from '@/components/EvaluationBenchmarks.vue'
-import SearchConfigModal from '@/components/SearchConfigModal.vue'
 import SearchConfigPanel from '@/components/SearchConfigPanel.vue'
-import { kbUtils } from '@/utils/kb_utils'
+import AiTextarea from '@/components/AiTextarea.vue'
+import ShareConfigForm from '@/components/ShareConfigForm.vue'
+import { departmentApi } from '@/apis/department_api'
+import { authApi } from '@/apis/auth_api'
+import { CHUNK_PRESET_OPTIONS, getChunkPresetDescription } from '@/utils/chunk_presets'
+import { formatFileSize } from '@/utils/file_utils'
+import {
+  getKbTypeIcon,
+  getKbTypeLabel,
+  kbUtils
+} from '@/utils/kb_utils'
 
 const route = useRoute()
+const router = useRouter()
 const store = useDatabaseStore()
 const taskerStore = useTaskerStore()
+const userStore = useUserStore()
 
 const databaseId = computed(() => store.databaseId)
 const database = computed(() => store.database)
-const state = computed(() => store.state)
 const isCurrentDatabaseLoaded = computed(() => database.value?.db_id === databaseId.value)
-const kbType = computed(() => (isCurrentDatabaseLoaded.value ? database.value.kb_type?.toLowerCase() : ''))
+const kbType = computed(() =>
+  isCurrentDatabaseLoaded.value ? database.value.kb_type?.toLowerCase() || 'milvus' : ''
+)
 const isMilvus = computed(() => kbType.value === 'milvus')
+const isDifyKb = computed(() => kbType.value === 'dify')
+const isNotionKb = computed(() => kbType.value === 'notion')
 const isConnector = computed(
   () => isCurrentDatabaseLoaded.value && kbUtils.isReadOnlyDatabase(database.value)
 )
+const isEvaluationSupported = computed(() => isMilvus.value)
+const kbTypeIcon = computed(() => getKbTypeIcon(kbType.value || 'milvus'))
+
+const databaseSubtitle = computed(() => {
+  const typeLabel = getKbTypeLabel(kbType.value || 'milvus')
+  if (!isCurrentDatabaseLoaded.value) return '正在加载知识库信息'
+
+  const description = database.value.description?.trim()
+  if (description) return description
+
+  if (isConnector.value) return `${typeLabel} 连接器`
+  return `${typeLabel} 知识库 · ${database.value.row_count || 0} 文件`
+})
+
+const tabs = computed(() => {
+  if (isMilvus.value) {
+    return [
+      { key: 'filetable', label: '文件管理', icon: FileText },
+      { key: 'query', label: '检索测试', icon: Search },
+      { key: 'graph', label: '知识图谱', icon: Network },
+      { key: 'mindmap', label: '知识导图', icon: MapIcon },
+      { key: 'evaluation', label: 'RAG 评估', icon: BarChart3 },
+      { key: 'benchmarks', label: '评估基准', icon: ClipboardList }
+    ]
+  }
+
+  return [
+    { key: 'query', label: '检索测试', icon: Search }
+  ]
+})
+
+const visibleTabs = computed(() => tabs.value)
+const activeTab = ref('filetable')
+
+watch(
+  () => [databaseId.value, isMilvus.value],
+  ([newDbId, isMilvusType]) => {
+    if (!newDbId) return
+    activeTab.value = isMilvusType ? 'filetable' : 'query'
+  },
+  { immediate: true }
+)
+
+watch(visibleTabs, (nextTabs) => {
+  if (!nextTabs.some((tab) => tab.key === activeTab.value)) {
+    activeTab.value = nextTabs[0]?.key || 'query'
+  }
+})
 
-// 计算待解析文件数量（status: 'uploaded'）
 const pendingParseCount = computed(() => {
   const files = store.database.files || {}
   return Object.values(files).filter((f) => !f.is_folder && f.status === 'uploaded').length
 })
 
-// 计算待入库文件数量（status: 'parsed' 或 'error_indexing'）
+const fileStats = computed(() => {
+  const files = Object.values(store.database.files || {}).filter((file) => !file.is_folder)
+  const totalSize = files.reduce((sum, file) => {
+    const size = Number(file.file_size ?? file.size ?? 0)
+    return Number.isFinite(size) ? sum + size : sum
+  }, 0)
+  const processedCount = files.filter((file) => ['done', 'indexed'].includes(file.status)).length
+
+  return {
+    count: files.length,
+    sizeText: totalSize > 0 ? formatFileSize(totalSize) : '',
+    processedCount,
+    completionRate: files.length ? Math.round((processedCount / files.length) * 100) : 0
+  }
+})
+
 const pendingIndexCount = computed(() => {
   const files = store.database.files || {}
   return Object.values(files).filter((f) => {
@@ -188,15 +465,12 @@ const pendingIndexCount = computed(() => {
   }).length
 })
 
-// 确认批量解析
 const confirmBatchParse = () => {
   const fileIds = Object.values(store.database.files || {})
     .filter((f) => f.status === 'uploaded')
     .map((f) => f.file_id)
 
-  if (fileIds.length === 0) {
-    return
-  }
+  if (fileIds.length === 0) return
 
   Modal.confirm({
     title: '批量解析',
@@ -205,7 +479,6 @@ const confirmBatchParse = () => {
   })
 }
 
-// 确认批量入库
 const confirmBatchIndex = () => {
   const fileIds = Object.values(store.database.files || {})
     .filter((f) => {
@@ -214,9 +487,7 @@ const confirmBatchIndex = () => {
     })
     .map((f) => f.file_id)
 
-  if (fileIds.length === 0) {
-    return
-  }
+  if (fileIds.length === 0) return
 
   Modal.confirm({
     title: '批量入库',
@@ -225,46 +496,8 @@ const confirmBatchIndex = () => {
   })
 }
 
-// Tab 切换逻辑 - 智能默认
-const activeTab = ref('query')
-
-// 思维导图引用
 const mindmapSectionRef = ref(null)
-
-// 查询区域引用
 const querySectionRef = ref(null)
-
-// 拖拽调整大小（仅水平方向）
-const leftPanelWidth = ref(50)
-const isDragging = ref(false)
-
-watch(
-  () => [databaseId.value, isMilvus.value],
-  ([newDbId, isMilvusType]) => {
-    if (!newDbId) {
-      return
-    }
-
-    if (!isMilvusType) {
-      activeTab.value = 'query'
-      leftPanelWidth.value = 40
-      return
-    }
-
-    leftPanelWidth.value = 50
-    activeTab.value = 'query'
-    return
-  },
-  { immediate: true }
-)
-
-// 切换右侧面板显示/隐藏
-const toggleRightPanel = () => {
-  store.state.rightPanelVisible = !store.state.rightPanelVisible
-}
-
-// 检索配置弹窗
-const searchConfigModalVisible = ref(false)
 const searchConfigSaving = ref(false)
 const searchConfigPanelRef = ref(null)
 
@@ -282,44 +515,31 @@ const handleInlineSearchConfigSave = async () => {
   }
 }
 
-// 打开检索配置弹窗
-const openSearchConfigModal = () => {
-  searchConfigModalVisible.value = true
-}
-
-// 添加文件弹窗
 const addFilesModalVisible = ref(false)
 const currentFolderId = ref(null)
 const isFolderUploadMode = ref(false)
 const addFilesMode = ref('file')
-
-// 标记是否是初次加载
 const isInitialLoad = ref(true)
+const fileTableRef = ref(null)
 
-// 显示添加文件弹窗
 const showAddFilesModal = (options = {}) => {
   const { isFolder = false, mode = 'file' } = options
   isFolderUploadMode.value = isFolder
   addFilesMode.value = mode
   addFilesModalVisible.value = true
-  currentFolderId.value = null // 重置
+  currentFolderId.value = null
+}
+
+const showCreateFolderModal = () => {
+  fileTableRef.value?.showCreateFolderModal()
 }
 
-// 传递给 FileUploadModal 的文件夹树
 const folderTree = computed(() => {
-  // 复用 FileTable 中构建文件树的逻辑，或者从 store 中获取
-  // 简单起见，这里假设 store.database.files 是扁平列表，我们在 FileTable 中已经有了构建好的树
-  // 但 FileTable 是子组件，最好将树的构建逻辑放到 store 或 composable 中，或者在这里重新构建
-  // 既然 FileTable 中已经实现了 buildFileTree，我们可以考虑将其提取出来
-  // 为了快速实现，我们这里简单实现一个仅用于选择的树构建
   const files = store.database.files || {}
   const fileList = Object.values(files)
-
-  // 构建树的简化版逻辑 (只关心文件夹)
   const nodeMap = new Map()
   const roots = []
 
-  // 1. 初始化节点
   fileList.forEach((file) => {
     if (file.is_folder) {
       const item = { ...file, title: file.filename, value: file.file_id, children: [] }
@@ -327,34 +547,23 @@ const folderTree = computed(() => {
     }
   })
 
-  // 2. 构建层级
   fileList.forEach((file) => {
     if (file.is_folder && file.parent_id && nodeMap.has(file.parent_id)) {
       const parent = nodeMap.get(file.parent_id)
       const child = nodeMap.get(file.file_id)
-      if (parent && child) {
-        parent.children.push(child)
-      }
-    } else if (file.is_folder && !file.parent_id) {
-      // 只有显式根文件夹才放入 roots
-      // 对于隐式路径生成的文件夹，目前简化处理暂不支持在上传时选择（因为它们没有物理ID）
-      // 除非我们复用 FileTable 的复杂逻辑。
-      // 如果用户只用新建文件夹功能创建文件夹，那么逻辑是够用的。
-      if (nodeMap.has(file.file_id)) {
-        roots.push(nodeMap.get(file.file_id))
-      }
+      if (parent && child) parent.children.push(child)
+    } else if (file.is_folder && !file.parent_id && nodeMap.has(file.file_id)) {
+      roots.push(nodeMap.get(file.file_id))
     }
   })
 
   return roots
 })
 
-// 文件上传成功回调
 const onFileUploadSuccess = () => {
   taskerStore.loadTasks()
 }
 
-// 重置文件选中状态
 const resetFileSelectionState = () => {
   store.selectedRowKeys = []
   store.selectedFile = null
@@ -364,19 +573,16 @@ const resetFileSelectionState = () => {
 watch(
   () => route.params.database_id,
   async (newId) => {
-    // 切换知识库时，标记为初次加载
     isInitialLoad.value = true
-
     store.databaseId = newId
     resetFileSelectionState()
     store.stopAutoRefresh()
-    await store.getDatabaseInfo(newId, false) // Explicitly load query params on initial load
+    await store.getDatabaseInfo(newId, false)
     store.startAutoRefresh()
   },
   { immediate: true }
 )
 
-// 监听文件列表变化，自动更新思维导图和生成示例问题
 const previousFileCount = ref(0)
 
 watch(
@@ -387,53 +593,33 @@ watch(
     const newFileCount = Object.keys(newFiles).length
     const oldFileCount = previousFileCount.value
 
-    // 首次加载时，只更新计数，不触发任何操作
     if (isInitialLoad.value) {
       previousFileCount.value = newFileCount
       isInitialLoad.value = false
       return
     }
 
-    // 如果文件数量发生变化（增加或减少），只重新生成问题，不自动生成思维导图
     if (newFileCount !== oldFileCount) {
-      const changeType = newFileCount > oldFileCount ? '增加' : '减少'
-      console.log(`文件数量从 ${oldFileCount} ${changeType}到 ${newFileCount}，准备重新生成问题`)
-
-      // 只要有文件，就重新生成问题（无论之前是否有问题）
       if (newFileCount > 0) {
         setTimeout(async () => {
-          console.log('文件数量变化，检查是否需要生成问题，querySectionRef:', querySectionRef.value)
           if (querySectionRef.value) {
-            // 检查是否开启了自动生成问题
             if (database.value.additional_params?.auto_generate_questions) {
-              console.log('开始重新生成问题...')
               await querySectionRef.value.generateSampleQuestions(true)
-            } else {
-              console.log('自动生成问题已关闭，跳过生成')
             }
           } else {
-            console.warn('querySectionRef 未准备好，稍后重试')
-            // 如果组件还没准备好，再等一会儿
             setTimeout(async () => {
-              if (querySectionRef.value) {
-                if (database.value.additional_params?.auto_generate_questions) {
-                  console.log('延迟后开始生成问题...')
-                  await querySectionRef.value.generateSampleQuestions(true)
-                } else {
-                  console.log('自动生成问题已关闭，跳过生成')
-                }
+              if (
+                querySectionRef.value &&
+                database.value.additional_params?.auto_generate_questions
+              ) {
+                await querySectionRef.value.generateSampleQuestions(true)
               }
             }, 2000)
           }
-        }, 3000) // 等待3秒让后端处理完成
+        }, 3000)
       } else {
-        // 如果文件数量变为0，清空问题列表
-        console.log('文件数量为0，清空问题列表')
         setTimeout(() => {
-          if (querySectionRef.value) {
-            // 清空问题列表
-            querySectionRef.value.clearQuestions()
-          }
+          querySectionRef.value?.clearQuestions()
         }, 1000)
       }
     }
@@ -443,248 +629,639 @@ watch(
   { deep: true }
 )
 
-// 组件挂载时启动示例轮播
-
-// 拖拽调整大小功能
-const handleMouseDown = () => {
-  isDragging.value = true
-  document.addEventListener('mousemove', handleMouseMove)
-  document.addEventListener('mouseup', handleMouseUp)
-  document.body.style.cursor = 'col-resize'
-  document.body.style.userSelect = 'none'
+const backToDatabase = () => {
+  router.push({ path: '/extensions', query: { tab: 'knowledge' } })
 }
 
-const handleMouseMove = (e) => {
-  if (!isDragging.value) return
+const copyDatabaseId = async () => {
+  if (!database.value.db_id) {
+    message.warning('知识库ID为空')
+    return
+  }
 
-  const container = document.querySelector('.unified-layout')
-  if (!container) return
-
-  const containerRect = container.getBoundingClientRect()
-  const newWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100
-  leftPanelWidth.value = Math.max(20, Math.min(80, newWidth))
+  try {
+    await navigator.clipboard.writeText(database.value.db_id)
+    message.success('知识库ID已复制到剪贴板')
+  } catch {
+    const textArea = document.createElement('textarea')
+    textArea.value = database.value.db_id
+    document.body.appendChild(textArea)
+    textArea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textArea)
+    message.success('知识库ID已复制到剪贴板')
+  }
 }
 
-const handleMouseUp = () => {
-  isDragging.value = false
-  document.removeEventListener('mousemove', handleMouseMove)
-  document.removeEventListener('mouseup', handleMouseUp)
-  document.body.style.cursor = ''
-  document.body.style.userSelect = ''
+const departments = ref([])
+const users = ref([])
+const editModalVisible = ref(false)
+const editFormRef = ref(null)
+const shareConfigFormRef = ref(null)
+const editForm = reactive({
+  name: '',
+  description: '',
+  auto_generate_questions: false,
+  chunk_preset_id: 'general',
+  dify_api_url: '',
+  dify_token: '',
+  dify_dataset_id: '',
+  notion_token: '',
+  notion_data_source_id: '',
+  notion_version: '2026-03-11'
+})
+
+const rules = {
+  name: [{ required: true, message: '请输入知识库名称' }]
 }
+
+const chunkPresetOptions = CHUNK_PRESET_OPTIONS.map(({ label, value }) => ({ label, value }))
+const editPresetDescription = computed(() => getChunkPresetDescription(editForm.chunk_preset_id))
+const fileList = computed(() => {
+  if (!database.value?.files) return []
+  return Object.values(database.value.files)
+    .map((f) => f.filename)
+    .filter(Boolean)
+})
+
+const canEditShareConfig = computed(() => userStore.isSuperAdmin || userStore.isAdmin)
+
+const shareConfigDisplay = computed(() => {
+  const shareConfig = database.value?.share_config || { access_level: 'global' }
+  if (shareConfig.access_level === 'department') {
+    const departmentIds = shareConfig.department_ids || []
+    const names = departmentIds.map((id) => getDepartmentName(id)).join('、') || '无'
+    return {
+      color: 'blue',
+      label: '部门共享',
+      detail: `${departmentIds.length} 个部门可访问：${names}`
+    }
+  }
+
+  if (shareConfig.access_level === 'user') {
+    const userUids = shareConfig.user_uids || []
+    const names = userUids.map((uid) => getUserName(uid)).join('、') || '无'
+    return {
+      color: 'purple',
+      label: '指定人可访问',
+      detail: `${userUids.length} 个用户可访问：${names}`
+    }
+  }
+
+  return {
+    color: 'green',
+    label: '全局共享',
+    detail: '所有用户可访问'
+  }
+})
+
+const getDepartmentName = (id) => {
+  const dept = departments.value.find((item) => Number(item.id) === Number(id))
+  return dept?.name || `部门${id}`
+}
+
+const getUserName = (uid) => {
+  const user = users.value.find((item) => item.uid === uid)
+  return user?.username || uid
+}
+
+const loadDepartments = async () => {
+  try {
+    const res = await departmentApi.getDepartments()
+    departments.value = res.departments || res || []
+  } catch {
+    departments.value = []
+  }
+}
+
+const loadUsers = async () => {
+  try {
+    users.value = await authApi.getUserAccessOptions()
+  } catch {
+    users.value = []
+  }
+}
+
+const showEditModal = () => {
+  editForm.name = database.value.name || ''
+  editForm.description = database.value.description || ''
+  editForm.auto_generate_questions =
+    database.value.additional_params?.auto_generate_questions || false
+  editForm.chunk_preset_id = database.value.additional_params?.chunk_preset_id || 'general'
+  editForm.dify_api_url = database.value.additional_params?.dify_api_url || ''
+  editForm.dify_token = database.value.additional_params?.dify_token || ''
+  editForm.dify_dataset_id = database.value.additional_params?.dify_dataset_id || ''
+  editForm.notion_token = ''
+  editForm.notion_data_source_id = database.value.additional_params?.notion_data_source_id || ''
+  editForm.notion_version = database.value.additional_params?.notion_version || '2026-03-11'
+  editModalVisible.value = true
+}
+
+const handleEditSubmit = () => {
+  editFormRef.value
+    .validate()
+    .then(async () => {
+      if (shareConfigFormRef.value) {
+        const validation = shareConfigFormRef.value.validate()
+        if (!validation.valid) {
+          message.warning(validation.message)
+          return
+        }
+      }
+
+      const formConfig = shareConfigFormRef.value?.config || { access_level: 'global' }
+      const updateData = {
+        name: editForm.name,
+        description: editForm.description,
+        additional_params: {},
+        share_config: {
+          access_level: formConfig.access_level,
+          department_ids:
+            formConfig.access_level === 'department' ? formConfig.department_ids || [] : [],
+          user_uids: formConfig.access_level === 'user' ? formConfig.user_uids || [] : []
+        }
+      }
+
+      if (isDifyKb.value) {
+        if (
+          !editForm.dify_api_url?.trim() ||
+          !editForm.dify_token?.trim() ||
+          !editForm.dify_dataset_id?.trim()
+        ) {
+          message.error('请完整填写 Dify API URL、Token 和 Dataset ID')
+          return
+        }
+        if (!editForm.dify_api_url.trim().endsWith('/v1')) {
+          message.error('Dify API URL 必须以 /v1 结尾')
+          return
+        }
+        updateData.additional_params = {
+          dify_api_url: editForm.dify_api_url.trim(),
+          dify_token: editForm.dify_token.trim(),
+          dify_dataset_id: editForm.dify_dataset_id.trim()
+        }
+      } else if (isNotionKb.value) {
+        if (!editForm.notion_data_source_id?.trim()) {
+          message.error('请填写 Notion Data Source ID')
+          return
+        }
+        updateData.additional_params = {
+          notion_data_source_id: editForm.notion_data_source_id.trim(),
+          notion_version: editForm.notion_version?.trim() || '2026-03-11'
+        }
+        if (editForm.notion_token?.trim()) {
+          updateData.additional_params.notion_token = editForm.notion_token.trim()
+        }
+      } else {
+        updateData.additional_params = {
+          auto_generate_questions: editForm.auto_generate_questions,
+          chunk_preset_id: editForm.chunk_preset_id || 'general'
+        }
+      }
+
+      await store.updateDatabaseInfo(updateData)
+      editModalVisible.value = false
+    })
+    .catch((err) => {
+      console.error('表单验证失败:', err)
+    })
+}
+
+const deleteDatabase = () => {
+  store.deleteDatabase()
+}
+
+onMounted(() => {
+  loadDepartments()
+  loadUsers()
+})
 </script>
 
 <style lang="less" scoped>
 @import '@/assets/css/extensions.less';
-.db-main-container {
+@import '@/assets/css/extension-detail.less';
+
+.database-info-container {
+  .detail-content-wrapper {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+.database-detail-body {
+  flex: 1;
+  min-height: 0;
   display: flex;
+  background: var(--gray-10);
+  overflow: hidden;
+}
+
+.database-sidebar {
+  width: 180px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--gray-150);
+  background: var(--gray-0);
+  padding: 12px 10px;
+  overflow-y: auto;
+}
+
+.database-tab-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.database-tab-item {
+  position: relative;
   width: 100%;
-}
-
-.ant-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.auto-refresh-control {
+  min-height: 44px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--gray-600);
   display: flex;
   align-items: center;
-  gap: 8px;
-  border-radius: 6px;
+  gap: 10px;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background 0.15s,
+    color 0.15s;
 
-  span {
-    color: var(--gray-700);
-    font-weight: 500;
-    font-size: 14px;
+  svg {
+    flex-shrink: 0;
   }
 
-  .ant-switch {
-    &.ant-switch-checked {
-      background-color: var(--main-color);
+  &:hover {
+    color: var(--gray-900);
+    background: var(--gray-50);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--main-200);
+    outline-offset: 2px;
+  }
+
+  &.active {
+    color: var(--main-color);
+    background: var(--main-30);
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 10px;
+      bottom: 10px;
+      width: 3px;
+      border-radius: 0 3px 3px 0;
+      background: var(--main-color);
     }
   }
 }
 
-/* Unified Layout Styles */
-.unified-layout {
+.database-tab-content {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
   display: flex;
-  height: 100vh;
-  background-color: var(--gray-0);
-  gap: 0;
-
-  .left-panel,
-  .right-panel {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    padding: 8px;
-  }
-
-  .left-panel {
-    display: flex;
-    flex-shrink: 0;
-    flex-grow: 1;
-    padding-right: 0;
-    flex-direction: column;
-
-    .search-config-wrapper {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-      border: 1px solid var(--gray-200);
-      border-radius: 12px;
-      background: var(--gray-0);
-      overflow: hidden;
-
-      .search-config-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 10px 12px;
-        border-bottom: 1px solid var(--gray-200);
-        flex-shrink: 0;
-
-        h4 {
-          margin: 0;
-          font-size: 14px;
-          font-weight: 600;
-          color: var(--gray-900);
-        }
-      }
-
-      .search-config-body {
-        flex: 1;
-        min-height: 0;
-        overflow-y: auto;
-        padding: 12px;
-      }
-    }
-  }
-
-  .info-panel {
-    background: var(--gray-10);
-    border-radius: 12px;
-    border: 1px solid var(--gray-200);
-    display: flex;
-    gap: 12px;
-    padding: 8px 12px;
-    margin-bottom: 8px;
-    flex-shrink: 0;
-
-    .banner-item {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      background: var(--color-info-50);
-      border-left: 3px solid var(--color-info-500);
-      border-radius: 2px;
-      font-size: 13px;
-      color: var(--color-info-700);
-      cursor: pointer;
-      transition: all 0.2s;
-
-      &:hover {
-        background: var(--color-info-100);
-      }
-
-      svg {
-        color: var(--color-info-500);
-      }
-    }
-  }
-
-  .right-panel {
-    flex-grow: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding-left: 0;
-  }
-
-  .resize-handle {
-    width: 4px;
-    cursor: col-resize;
-    background-color: var(--gray-200);
-    position: relative;
-    z-index: 10;
-    flex-shrink: 0;
-    height: 30px;
-    top: 40%;
-    margin: 0 2px;
-    border-radius: 4px;
-  }
+  flex-direction: column;
+  overflow: hidden;
 }
 
-/* Tab 样式 */
-.knowledge-tabs {
+.tab-panel {
+  flex: 1;
+  min-height: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--gray-200);
-  border-radius: 12px;
-  background: var(--gray-10);
   overflow: hidden;
-
-  :deep(.ant-tabs-content) {
-    flex: 1;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  :deep(.ant-tabs-tabpane) {
-    height: 100%;
-    overflow: hidden;
-  }
-
-  :deep(.ant-tabs-nav) {
-    margin-bottom: 0;
-    // background-color: var(--gray-0);
-  }
-
-  :deep(.ant-tabs-extra-content) {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
+  padding: 12px;
 }
 
-.config-btn {
-  color: var(--gray-600);
-  font-size: 16px;
+.file-panel {
+  gap: 8px;
+}
+
+.query-config-panel {
+  overflow: hidden;
+}
+
+.query-config-layout {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  gap: 12px;
+}
+
+.query-test-pane {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+.query-test-pane :deep(.query-section) {
+  flex: 1;
+  min-width: 0;
+}
+
+.query-config-pane {
+  width: 360px;
+  flex: 0 0 360px;
+  min-height: 0;
+  display: flex;
+}
+
+.query-config-pane .search-config-wrapper {
+  width: 100%;
+}
+
+.query-config-pane :deep(.ant-row) {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.query-config-pane :deep(.ant-col) {
+  max-width: 100%;
+  flex: 0 0 100%;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.file-panel-toolbar {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-shrink: 0;
+  padding: 10px 12px;
+  background: var(--gray-0);
+  border: 1px solid var(--gray-150);
+  border-radius: 8px;
+}
+
+.file-panel-summary {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+  gap: 8px;
+}
+
+.file-panel-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--gray-900);
+  white-space: nowrap;
+}
+
+.file-panel-count {
+  font-size: 12px;
+  color: var(--gray-500);
+  white-space: nowrap;
+}
+
+.file-panel-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.file-management-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  flex-shrink: 0;
+}
+
+.file-info-title {
+  display: flex;
+  flex-direction: column;
   gap: 4px;
-  padding: 4px 8px;
-  height: 32px;
-  border-radius: 6px;
-  transition: all 0.2s;
+  min-width: 180px;
+}
+
+.file-panel-desc {
+  font-size: 12px;
+  color: var(--gray-500);
+}
+
+.file-panel-status {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.file-stat-card {
+  min-width: 92px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--main-0);
+  border: 1px solid var(--gray-100);
+  color: var(--main-color);
+  font: inherit;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  strong {
+    font-size: 14px;
+    line-height: 1.2;
+    color: var(--gray-900);
+  }
+
+  span {
+    font-size: 11px;
+    color: var(--gray-500);
+    white-space: nowrap;
+  }
+}
+
+.file-stat-action {
+  cursor: pointer;
+  color: var(--color-warning-500);
+  border: 1px solid var(--color-warning-100);
+  background-color: var(--color-warning-50);
+  transition:
+    background 0.15s,
+    border-color 0.15s;
 
   &:hover {
-    color: var(--main-color);
-    background-color: var(--gray-100);
-  }
-
-  .config-text {
-    font-size: 14px;
-    margin-left: 4px;
+    border-color: var(--color-warning-700);
   }
 }
 
-/* Table row selection styling */
-:deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
-  background-color: var(--main-5);
+.search-config-wrapper {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+  background: var(--gray-0);
+  overflow: hidden;
 }
 
-:deep(.ant-table-tbody > tr:hover > td) {
-  background-color: var(--main-5);
+.search-config-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--gray-150);
+  flex-shrink: 0;
+
+  h3 {
+    margin: 0 0 4px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--gray-900);
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: var(--gray-500);
+  }
+}
+
+.search-config-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.share-config-readonly {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .access-names {
+    font-size: 13px;
+    color: var(--gray-600);
+  }
+}
+
+.chunk-preset-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.chunk-preset-help-icon {
+  color: var(--gray-500);
+  cursor: help;
+  font-size: 14px;
+}
+
+@media (max-width: 1024px) {
+  .query-config-layout {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .query-test-pane {
+    min-height: 360px;
+  }
+
+  .query-config-pane {
+    width: 100%;
+    flex: 0 0 auto;
+    min-height: 320px;
+  }
+}
+
+@media (max-width: 767px) {
+  .detail-top-bar {
+    gap: 10px;
+  }
+
+  .detail-actions :deep(.extension-panel-action span) {
+    display: none;
+  }
+
+  .database-detail-body {
+    flex-direction: column;
+  }
+
+  .database-sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--gray-150);
+    padding: 8px;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .database-tab-list {
+    flex-direction: row;
+    min-width: max-content;
+  }
+
+  .database-tab-item {
+    width: auto;
+    min-width: 104px;
+    justify-content: center;
+
+    &.active::before {
+      left: 12px;
+      right: 12px;
+      top: auto;
+      bottom: 0;
+      width: auto;
+      height: 3px;
+      border-radius: 3px 3px 0 0;
+    }
+  }
+
+  .tab-panel {
+    padding: 8px;
+  }
+
+  .query-config-layout {
+    flex-direction: column;
+  }
+
+  .query-config-pane {
+    width: 100%;
+    flex: 0 0 auto;
+    min-height: 320px;
+  }
+
+  .file-panel-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .file-panel-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
 }
 </style>
 
 <style lang="less">
+@media (max-width: 767px) {
+  .app-layout:has(.database-info-container) {
+    min-width: 0;
+  }
+}
+
 /* 全局样式作为备用方案 */
 .ant-popover .query-params-compact {
   width: 220px;
@@ -773,7 +1350,6 @@ const handleMouseUp = () => {
   }
 }
 
-// 基准管理样式
 .benchmark-management-container {
   height: 100%;
   background: var(--gray-0);