From b50d555e374a5f0364611e8c0f59290836b77163 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sat, 26 Jul 2025 11:18:54 +0800
Subject: [PATCH] =?UTF-8?q?style(DataBaseInfoView):=20=E4=B8=BA=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E5=90=8D=E6=B7=BB=E5=8A=A0=E6=96=87=E4=BB=B6=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=9B=BE=E6=A0=87=E5=92=8C=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/DataBaseInfoView.vue | 94 +++++++++++++++++++++++++++++-
 1 file changed, 93 insertions(+), 1 deletion(-)

diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index 3840a650..52213bd7 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -371,7 +371,10 @@
           emptyText: emptyText
         }">
         <template #bodyCell="{ column, text, record }">
-          <a-button v-if="column.key === 'filename'"  class="main-btn" type="link" @click="openFileDetail(record)">{{ text }}</a-button>
+          <a-button v-if="column.key === 'filename'"  class="main-btn" type="link" @click="openFileDetail(record)">
+            <component :is="getFileIcon(text)" :style="{ marginRight: '6px', color: getFileIconColor(text) }" />
+            {{ text }}
+          </a-button>
           <span v-else-if="column.key === 'type'" :class="['span-type', text]">{{ text?.toUpperCase() }}</span>
           <CheckCircleFilled v-else-if="column.key === 'status' && text === 'done'" style="color: #41A317;"/>
           <CloseCircleFilled v-else-if="column.key === 'status' && text === 'failed'" style="color: #FF4D4F ;"/>
@@ -601,6 +604,13 @@ import {
   DownOutlined,
   ExpandOutlined,
   CompressOutlined,
+  FileTextFilled,
+  FileImageFilled,
+  FileMarkdownFilled,
+  FilePdfFilled,
+  FileWordFilled,
+  FileExcelFilled,
+  FileUnknownFilled,
 } from '@ant-design/icons-vue'
 import HeaderComponent from '@/components/HeaderComponent.vue';
 import KnowledgeGraphViewer from '@/components/KnowledgeGraphViewer.vue';
@@ -1660,6 +1670,88 @@ const getKbTypeColor = (type) => {
   return colors[type] || 'blue'
 }
 
+// 根据文件扩展名获取文件图标
+const getFileIcon = (filename) => {
+  if (!filename) return FileUnknownFilled
+  
+  const extension = filename.toLowerCase().split('.').pop()
+  
+  const iconMap = {
+    // 文本文件
+    'txt': FileTextFilled,
+    'text': FileTextFilled,
+    'log': FileTextFilled,
+    
+    // Markdown文件
+    'md': FileMarkdownFilled,
+    'markdown': FileMarkdownFilled,
+    
+    // PDF文件
+    'pdf': FilePdfFilled,
+    
+    // Word文档
+    'doc': FileWordFilled,
+    'docx': FileWordFilled,
+    
+    // Excel文档
+    'xls': FileExcelFilled,
+    'xlsx': FileExcelFilled,
+    'csv': FileExcelFilled,
+    
+    // 图片文件
+    'jpg': FileImageFilled,
+    'jpeg': FileImageFilled,
+    'png': FileImageFilled,
+    'gif': FileImageFilled,
+    'bmp': FileImageFilled,
+    'svg': FileImageFilled,
+    'webp': FileImageFilled,
+  }
+  
+  return iconMap[extension] || FileUnknownFilled
+}
+
+// 根据文件扩展名获取文件图标颜色
+const getFileIconColor = (filename) => {
+  if (!filename) return '#8c8c8c'
+  
+  const extension = filename.toLowerCase().split('.').pop()
+  
+  const colorMap = {
+    // 文本文件 - 蓝色
+    'txt': '#1890ff',
+    'text': '#1890ff',
+    'log': '#1890ff',
+    
+    // Markdown文件 - 深蓝色
+    'md': '#0050b3',
+    'markdown': '#0050b3',
+    
+    // PDF文件 - 红色
+    'pdf': '#ff4d4f',
+    
+    // Word文档 - 深蓝色
+    'doc': '#2f54eb',
+    'docx': '#2f54eb',
+    
+    // Excel文档 - 绿色
+    'xls': '#52c41a',
+    'xlsx': '#52c41a',
+    'csv': '#52c41a',
+    
+    // 图片文件 - 紫色
+    'jpg': '#722ed1',
+    'jpeg': '#722ed1',
+    'png': '#722ed1',
+    'gif': '#722ed1',
+    'bmp': '#722ed1',
+    'svg': '#722ed1',
+    'webp': '#722ed1',
+  }
+  
+  return colorMap[extension] || '#8c8c8c'
+}
+
 
 </script>