From 900d0ca86accdeed3f03c3a1a48e613d17259c2b Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Thu, 18 Dec 2025 11:47:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(FileTable):=20=E9=87=8D=E6=9E=84=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E4=B8=BA=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E8=8F=9C=E5=8D=95=E5=B9=B6=E6=B7=BB=E5=8A=A0=20LightR?=
 =?UTF-8?q?AG=20=E6=9D=A1=E4=BB=B6=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将文件操作按钮重构为下拉菜单样式，提升界面简洁性
添加 isLightRAG 条件控制重新分块功能的显示
调整操作列宽度并优化下拉菜单样式
---
 web/src/components/FileTable.vue | 125 ++++++++++++++++++++++++++-----
 1 file changed, 106 insertions(+), 19 deletions(-)

diff --git a/web/src/components/FileTable.vue b/web/src/components/FileTable.vue
index 5b6430d4..be988306 100644
--- a/web/src/components/FileTable.vue
+++ b/web/src/components/FileTable.vue
@@ -61,6 +61,7 @@
       </div>
       <div style="display: flex; gap: 4px;">
         <a-button
+          v-if="!isLightRAG"
           type="link"
           @click="handleBatchRechunk"
           :loading="batchRechunking"
@@ -132,24 +133,25 @@
         </a-tooltip>
 
         <div v-else-if="column.key === 'action'" class="table-row-actions">
-          <a-button class="download-btn" type="link"
-            @click="handleDownloadFile(record)"
-            :disabled="lock || record.status !== 'done'"
-            :icon="h(Download)"
-            title="下载"
-            />
-          <a-button class="rechunk-btn" type="link"
-            @click="handleRechunkFile(record)"
-            :disabled="lock || record.status === 'processing' || record.status === 'waiting'"
-            :icon="h(RefreshCw)"
-            title="重新分块"
-            />
-          <a-button class="del-btn" type="link"
-            @click="handleDeleteFile(record.file_id)"
-            :disabled="lock || record.status === 'processing' || record.status === 'waiting'"
-            :icon="h(Trash2)"
-            title="删除"
-            />
+          <a-popover placement="bottomRight" trigger="click" overlayClassName="file-action-popover">
+            <template #content>
+              <div class="file-action-list">
+                <a-button type="text" block @click="handleDownloadFile(record)" :disabled="lock || record.status !== 'done'">
+                  <template #icon><component :is="h(Download)" style="width: 14px; height: 14px;" /></template>
+                  下载文件
+                </a-button>
+                <a-button v-if="!isLightRAG" type="text" block @click="handleRechunkFile(record)" :disabled="lock || record.status === 'processing' || record.status === 'waiting'">
+                  <template #icon><component :is="h(RefreshCw)" style="width: 14px; height: 14px;" /></template>
+                  重新分块
+                </a-button>
+                <a-button type="text" block danger @click="handleDeleteFile(record.file_id)" :disabled="lock || record.status === 'processing' || record.status === 'waiting'">
+                  <template #icon><component :is="h(Trash2)" style="width: 14px; height: 14px;" /></template>
+                  删除文件
+                </a-button>
+              </div>
+            </template>
+            <a-button type="text" :icon="h(Ellipsis)" class="action-trigger-btn" />
+          </a-popover>
         </div>
         <span v-else>{{ text }}</span>
       </template>
@@ -176,6 +178,7 @@ import {
   RefreshCw,
   ChevronLast,
   RefreshCcw,
+  Ellipsis,
 } from 'lucide-vue-next';
 
 const store = useDatabaseStore();
@@ -194,6 +197,7 @@ const emit = defineEmits([
 ]);
 
 const files = computed(() => Object.values(store.database.files || {}));
+const isLightRAG = computed(() => store.database?.kb_type?.toLowerCase() === 'lightrag');
 const refreshing = computed(() => store.state.refrashing);
 const lock = computed(() => store.state.lock);
 const batchDeleting = computed(() => store.state.batchDeleting);
@@ -259,7 +263,7 @@ const columnsCompact = [
     },
     sortDirections: ['ascend', 'descend']
   },
-  { title: '', key: 'action', dataIndex: 'file_id', width: 80, align: 'center' }
+  { title: '', key: 'action', dataIndex: 'file_id', width: 40, align: 'center' }
 ];
 
 // 过滤后的文件列表
@@ -734,6 +738,28 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
   /* border: 1px solid var(--main-100); */
 }
 
+.action-trigger-btn {
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: var(--gray-500);
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: var(--gray-100);
+    color: var(--main-color);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
 
 /* Table row selection styling */
 :deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
@@ -748,3 +774,64 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
   background-color: var(--main-5);
 }
 </style>
+
+<style lang="less">
+.file-action-popover {
+  .ant-popover-inner {
+    padding: 4px;
+  }
+
+  .ant-popover-inner {
+    border-radius: 8px;
+    border: 1px solid var(--gray-150);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+
+  .ant-popover-arrow {
+    display: none;
+  }
+}
+
+.file-action-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  .ant-btn {
+    text-align: left;
+    height: 36px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    padding: 0 12px;
+    border: none;
+    box-shadow: none;
+
+    &:hover {
+      background-color: var(--gray-50);
+      color: var(--main-color);
+    }
+
+    &.ant-btn-dangerous:hover {
+      background-color: var(--color-error-50);
+      color: var(--color-error-500);
+    }
+
+    .anticon, .lucide {
+      margin-right: 10px;
+    }
+
+    span {
+      font-size: 13px;
+    }
+  }
+
+  .ant-btn:disabled {
+    background-color: transparent;
+    color: var(--gray-300);
+    cursor: not-allowed;
+  }
+}
+</style>