From 092ab7eb2c21b8a803a8eb5e4463927316b1bae6 Mon Sep 17 00:00:00 2001
From: chabai <14799297+dhasjklhdfjkasfbhfasfj@user.noreply.gitee.com>
Date: Thu, 14 Aug 2025 15:27:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=95=B0=E6=8D=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A8=A1=E5=9D=97=EF=BC=8C=E5=B0=86=E6=99=BA=E8=83=BD?=
 =?UTF-8?q?=E5=95=86=E5=8A=A1=E6=A8=A1=E5=9D=97=E4=B8=9A=E5=8A=A1copy?=
 =?UTF-8?q?=E5=88=B0=E6=95=B0=E6=8D=AE=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/data/index.ts    |  188 ++
 src/apis/data/type.ts     |   98 +
 src/apis/index.ts         |    1 +
 src/router/route.ts       |   22 +-
 src/types/components.d.ts |   63 +
 src/views/data/data.vue   | 3787 +++++++++++++++++++++++++++++++++++++
 6 files changed, 4158 insertions(+), 1 deletion(-)
 create mode 100644 src/apis/data/index.ts
 create mode 100644 src/apis/data/type.ts
 create mode 100644 src/views/data/data.vue

diff --git a/src/apis/data/index.ts b/src/apis/data/index.ts
new file mode 100644
index 0000000..cec076f
--- /dev/null
+++ b/src/apis/data/index.ts
@@ -0,0 +1,188 @@
+// @/apis/data/index.ts - 数据管理API
+import http from '@/utils/http'
+import type {
+  FolderInfo,
+  FileInfo,
+  FolderListParams,
+  FileListParams,
+  FolderListResponse,
+  FileListResponse,
+  CreateFolderParams,
+  RenameFolderParams,
+  DeleteFolderParams,
+  UploadFileParams,
+  DownloadFileParams,
+  DeleteFileParams,
+  PreviewFileParams,
+  RenameFileParams
+} from './type'
+
+const { request, requestRaw } = http
+
+// 导出类型定义
+export type {
+  FolderInfo,
+  FileInfo,
+  FolderListParams,
+  FileListParams,
+  FolderListResponse,
+  FileListResponse,
+  CreateFolderParams,
+  RenameFolderParams,
+  DeleteFolderParams,
+  UploadFileParams,
+  DownloadFileParams,
+  DeleteFileParams,
+  PreviewFileParams,
+  RenameFileParams
+}
+
+// 获取文件夹列表（分页）
+export function getFolderListApi(params?: FolderListParams) {
+  return request<FolderListResponse>({
+    url: '/data/folder/list',
+    method: 'get',
+    params: {
+      page: params?.page || 1,
+      pageSize: params?.pageSize || 10,
+      folderName: params?.folderName
+    }
+  })
+}
+
+// 获取文件列表（分页）
+export function getFilesApi(params?: FileListParams) {
+  return request<FileListResponse>({
+    url: '/data/file/list',
+    method: 'get',
+    params: {
+      page: params?.page || 1,
+      pageSize: params?.pageSize || 10,
+      folderId: params?.folderId || '0',
+      fileName: params?.fileName,
+      sortField: params?.sortField,
+      sortOrder: params?.sortOrder
+    }
+  })
+}
+
+// 创建文件夹
+export function createFolderApi(data: CreateFolderParams) {
+  return request({
+    url: '/data/folder/creatFolder',
+    method: 'post',
+    data: {
+      name: data.name,
+      parentId: data.parentId || '0'
+    }
+  })
+}
+
+// 重命名文件夹
+export function updateFolderApi(folderId: string, newName: string) {
+  return request({
+    url: '/data/folder/rename',
+    method: 'put',
+    params: {
+      folderId: folderId,
+      newName: newName
+    }
+  })
+}
+
+// 删除文件夹
+export function deleteFolderApi(folderId: string) {
+  return request({
+    url: '/data/folder/delete',
+    method: 'delete',
+    params: {
+      folderId: folderId
+    }
+  })
+}
+
+// 上传文件
+export function uploadFileApi(
+  file: File,
+  folderId: string,
+  onUploadProgress?: (progressEvent: any) => void,
+  cancelToken?: any
+) {
+  const formData = new FormData()
+  formData.append('file', file)
+  
+  return requestRaw({
+    url: '/data/file/add',
+    method: 'post',
+    params: {
+      folderId: folderId
+    },
+    data: formData,
+    onUploadProgress,
+    cancelToken,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  }).then(response => response.data)
+    .catch(error => {
+      // 确保错误不会抛出，而是返回一个错误对象
+      console.error('上传文件API错误:', error)
+      return {
+        code: 500,
+        msg: error.message || '上传失败',
+        success: false
+      }
+    })
+}
+
+// 下载文件
+export function downloadFileApi(fileId: string) {
+  return request({
+    url: '/data/file/download',
+    method: 'get',
+    params: {
+      fileId: fileId
+    },
+    responseType: 'blob'
+  })
+}
+
+// 删除文件
+export function deleteFileApi(fileId: string) {
+  return request({
+    url: '/data/file/delete',
+    method: 'delete',
+    params: {
+      fileId: fileId
+    }
+  })
+}
+
+// 预览文件
+export function previewFileApi(fileId: string) {
+  return request({
+    url: '/data/file/preview',
+    method: 'get',
+    params: {
+      fileId: fileId
+    },
+    responseType: 'blob'
+  })
+}
+
+// 重命名文件
+export function renameFileApi(fileId: string, newFileName: string) {
+  return request({
+    url: '/data/file/rename',
+    method: 'put',
+    params: {
+      fileId: fileId,
+      newFileName: newFileName
+    }
+  })
+}
+
+// 重命名文件（兼容旧接口）
+export function updateFileNameApi(fileId: string, data: RenameFileParams) {
+  return renameFileApi(fileId, data.newFileName)
+} 
\ No newline at end of file
diff --git a/src/apis/data/type.ts b/src/apis/data/type.ts
new file mode 100644
index 0000000..b5aa836
--- /dev/null
+++ b/src/apis/data/type.ts
@@ -0,0 +1,98 @@
+/** 文件夹信息接口 */
+export interface FolderInfo {
+    folderId: string
+    name: string
+    parentId: string
+    createTime?: string
+    updateTime?: string
+  }
+  
+  /** 文件信息接口 */
+  export interface FileInfo {
+    fileId: string
+    fileName: string
+    fileSize: number
+    fileType: string
+    folderId: string
+    createTime?: string
+    updateTime?: string
+  }
+  
+  /** 文件夹列表查询参数 */
+  export interface FolderListParams {
+    page?: number
+    pageSize?: number
+    folderName?: string
+  }
+  
+  /** 文件列表查询参数 */
+  export interface FileListParams {
+    page?: number
+    pageSize?: number
+    folderId?: string
+    fileName?: string
+    sortField?: string
+    sortOrder?: string
+  }
+  
+  /** 文件夹列表响应 */
+  export interface FolderListResponse {
+    data: FolderInfo[]
+    total: number
+    current: number
+    size: number
+  }
+  
+  /** 文件列表响应 */
+  export interface FileListResponse {
+    data: FileInfo[]
+    total: number
+    current: number
+    size: number
+  }
+  
+  /** 创建文件夹请求参数 */
+  export interface CreateFolderParams {
+    name: string
+    parentId?: string
+  }
+  
+  /** 重命名文件夹请求参数 */
+  export interface RenameFolderParams {
+    folderId: string
+    newName: string
+  }
+  
+  /** 删除文件夹请求参数 */
+  export interface DeleteFolderParams {
+    folderId: string
+  }
+  
+  /** 上传文件请求参数 */
+  export interface UploadFileParams {
+    file: File
+    folderId: string
+    onUploadProgress?: (progressEvent: any) => void
+    cancelToken?: any
+  }
+  
+  /** 下载文件请求参数 */
+  export interface DownloadFileParams {
+    fileId: string
+  }
+  
+  /** 删除文件请求参数 */
+  export interface DeleteFileParams {
+    fileId: string
+  }
+  
+  /** 预览文件请求参数 */
+  export interface PreviewFileParams {
+    fileId: string
+  }
+  
+  /** 重命名文件请求参数 */
+  export interface RenameFileParams {
+    fileId: string
+    newFileName: string
+  } 
\ No newline at end of file
diff --git a/src/apis/index.ts b/src/apis/index.ts
index 8218898..c39615e 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -20,6 +20,7 @@ export * as RegulationAPI from './regulation'
 export * as TrainingAPI from './training'
 export * as EquipmentAPI from './equipment'
 export * as BussinessAPI from './bussiness/bussiness'
+export * as DataAPI from './data'
 
 export * from './area/type'
 export * from './auth/type'
diff --git a/src/router/route.ts b/src/router/route.ts
index 05536b6..ddc8ced 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -1184,7 +1184,7 @@ export const systemRoutes: RouteRecordRaw[] = [
     name: 'bussinesskonwledge',
     component: Layout,
     redirect: '/bussiness-knowledge/data',
-    meta: { title: '商务资料知识库', icon: 'database', hidden: false, sort: 5.5 },
+    meta: { title: '智能商务', icon: 'database', hidden: false, sort: 5.5 },
     children: [
       {
         path: '/bussiness-konwledge/data',
@@ -1198,6 +1198,26 @@ export const systemRoutes: RouteRecordRaw[] = [
       },
     ],
   },
+  // 数据管理模块
+  {
+    path: '/data-management',
+    name: 'dataManagement',
+    component: Layout,
+    redirect: '/data-management/data',
+    meta: { title: '数据管理', icon: 'database', hidden: false, sort: 5.6 },
+    children: [
+      {
+        path: '/data-management/data',
+        name: 'data-management',
+        component: () => import('@/views/data/data.vue'),
+        meta: {
+          title: '数据管理',
+          icon: 'database',
+          hidden: false,
+        },
+      },
+    ],
+  },
   {
   path: '/image-detection',
   name: 'ImageDetection',
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 7fa6b1b..a427ece 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -7,7 +7,70 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ApprovalAssistant: typeof import('./../components/ApprovalAssistant/index.vue')['default']
+    ApprovalMessageItem: typeof import('./../components/NotificationCenter/ApprovalMessageItem.vue')['default']
+    Avatar: typeof import('./../components/Avatar/index.vue')['default']
+    Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
+    CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
+    Chart: typeof import('./../components/Chart/index.vue')['default']
+    CircularProgress: typeof import('./../components/CircularProgress/index.vue')['default']
+    ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
+    CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
+    CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
+    DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
+    DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
+    FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
+    GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
+    GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
+    GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
+    GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
+    GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
+    GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
+    GiDot: typeof import('./../components/GiDot/index.tsx')['default']
+    GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
+    GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
+    GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
+    GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
+    GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
+    GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
+    GiOption: typeof import('./../components/GiOption/index.vue')['default']
+    GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
+    GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
+    GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
+    GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
+    GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
+    GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
+    GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
+    GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
+    GiTag: typeof import('./../components/GiTag/index.tsx')['default']
+    GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
+    HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
+    Icon403: typeof import('./../components/icons/Icon403.vue')['default']
+    Icon404: typeof import('./../components/icons/Icon404.vue')['default']
+    Icon500: typeof import('./../components/icons/Icon500.vue')['default']
+    IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
+    IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
+    IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
+    IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
+    ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
+    ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
+    IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
+    JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
+    MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
+    MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
+    NotificationCenter: typeof import('./../components/NotificationCenter/index.vue')['default']
+    ParentView: typeof import('./../components/ParentView/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
+    SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
+    TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
+    TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
+    UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
+    Verify: typeof import('./../components/Verify/index.vue')['default']
+    VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
+    VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
+    WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
+    YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
   }
 }
diff --git a/src/views/data/data.vue b/src/views/data/data.vue
new file mode 100644
index 0000000..d4d6c3a
--- /dev/null
+++ b/src/views/data/data.vue
@@ -0,0 +1,3787 @@
+<template>
+  <a-layout class="knowledge-container">
+    <!-- 侧边栏 -->
+    <a-layout-sider 
+      width="260"
+      :collapsed-width="80"
+      theme="dark" 
+      class="folder-sidebar"
+      :collapsed="sidebarCollapsed"
+      @collapse="handleSidebarCollapse"
+      @expand="handleSidebarExpand"
+    >
+      <div class="sidebar-header">
+        <a-space direction="vertical" size="medium" v-if="!sidebarCollapsed">
+          <a-button 
+            type="primary" 
+            size="large" 
+            long 
+            @click="handleCreateFolder"
+            class="create-folder-btn"
+          >
+            <template #icon><icon-plus /></template>
+            新建文件夹
+          </a-button>
+          <a-input-search 
+            placeholder="搜索文件夹..." 
+            allow-clear 
+            v-model="searchKeyword"
+            @search="handleFolderSearch"
+            @input="handleSearchInput"
+            @clear="handleSearchClear"
+            class="search-input"
+          />
+        </a-space>
+      </div>
+
+      <div class="folder-content">
+        <!-- 加载状态 -->
+        <a-skeleton :loading="loading && folderList.length === 0" :rows="5" v-if="loading" :animation="true">
+          <template #skeleton>
+            <div class="skeleton-item flex items-center px-4 py-3" v-for="i in 5" :key="i">
+              <div class="w-6 h-6 rounded bg-gray-200 mr-3"></div>
+              <div class="flex-1 h-4 bg-gray-200 rounded"></div>
+            </div>
+          </template>
+        </a-skeleton>
+        
+        <!-- 搜索结果提示 -->
+        <div v-if="searchKeyword && !loading" class="search-result-tip">
+          <a-typography-text type="secondary">
+            搜索 "{{ searchKeyword }}" 的结果：共 {{ totalFolders }} 个文件夹
+          </a-typography-text>
+        </div>
+        
+
+        
+        <a-empty v-if="!loading && folderList.length === 0" :description="searchKeyword ? '未找到匹配的文件夹' : '暂无文件夹'" />
+        
+                <!-- 树形文件夹结构 -->
+        <div v-if="!loading && folderList.length > 0" class="folder-tree-container">
+
+          <a-tree
+            :data="folderTreeData"
+            :selected-keys="currentFolderId ? [currentFolderId] : []"
+            :field-names="{ key: 'key', title: 'title', children: 'children' }"
+            :show-line="!sidebarCollapsed"
+            :block-node="true"
+            :default-expand-all="true"
+            @select="handleFolderSelect"
+            @dblclick="handleFolderDoubleClick"
+            class="folder-tree"
+            :class="{ 'collapsed': sidebarCollapsed }"
+          />
+          
+          <!-- 文件夹操作按钮 -->
+          <div v-if="currentFolderId && currentFolderId !== '0'" class="folder-actions-bar" style="padding: 8px; border-top: 1px solid #e5e6eb; margin-top: 8px;">
+            <a-space>
+              <a-button 
+                type="text" 
+                size="small" 
+                @click="handleRenameCurrentFolder"
+                tooltip="重命名"
+              >
+                <template #icon><icon-edit /></template>
+                重命名
+              </a-button>
+              <a-button 
+                type="text" 
+                size="small" 
+                @click="handleDeleteCurrentFolder"
+                tooltip="删除"
+                status="danger"
+              >
+                <template #icon><icon-delete /></template>
+                删除
+              </a-button>
+            </a-space>
+          </div>
+          
+
+        </div>
+      </div>
+
+
+    </a-layout-sider>
+
+    <a-layout>
+      <a-layout-header class="file-header">
+        <div class="breadcrumbs">
+          <a-breadcrumb>
+            <a-breadcrumb-item 
+              v-for="(item, index) in breadcrumbPath" 
+              :key="index"
+              :class="{ 'clickable': index < breadcrumbPath.length - 1 }"
+              @click="handleBreadcrumbClick(index)"
+            >
+              {{ item }}
+            </a-breadcrumb-item>
+          </a-breadcrumb>
+          <a-button 
+            type="text" 
+            shape="circle" 
+            @click="refreshData"
+            :loading="refreshing" 
+            tooltip="刷新数据"
+          >
+            <template #icon>
+              <icon-refresh :spin="refreshing" />
+            </template>
+          </a-button>
+        </div>
+        <a-space>
+          <a-button type="outline" @click="handleUploadFile">
+            <template #icon><icon-upload /></template>
+            上传文件
+          </a-button>
+          <a-button type="primary" @click="handleCreateFolder">
+            <template #icon><icon-plus /></template>
+            新建文件夹
+          </a-button>
+        </a-space>
+      </a-layout-header>
+
+      <a-layout-content class="file-content">
+        <a-card :bordered="false" class="file-card">
+          <!-- 文件列表标题和搜索框在同一行 -->
+          <div v-if="currentFolderId" class="file-header-container">
+            <div class="file-title">
+              <span class="file-list-title">文件列表 ({{ fileList.length }})</span>
+            </div>
+            <div class="file-search-container">
+              <a-input-search
+                v-model="fileSearchKeyword"
+                placeholder="搜索文件名..."
+                class="file-search-input"
+                @search="handleFileSearch"
+                @input="handleFileSearchInput"
+                @clear="handleFileSearchClear"
+                allow-clear
+              />
+            </div>
+          </div>
+          
+          <a-divider size="small" v-if="currentFolderId" />
+
+          <template v-if="!currentFolderId">
+            <div class="initial-state">
+              <icon-folder-add class="initial-icon" />
+              <div class="initial-text">请从左侧选择一个文件夹</div>
+            </div>
+          </template>
+
+          <!-- 文件列表加载状态 -->
+          <a-skeleton 
+            :loading="loading && currentFolderId" 
+            :rows="8" 
+            v-if="loading && currentFolderId"
+            animation="pulse"
+          >
+            <template #skeleton>
+              <a-row class="table-data-row" v-for="i in 8" :key="i">
+                <!-- 文件名列 -->
+                <a-col :span="10" class="table-column name-column">
+                  <div class="file-main">
+                    <div class="w-8 h-8 rounded bg-gray-200 mr-3"></div>
+                    <div class="file-name-wrap">
+                      <div class="h-5 bg-gray-200 rounded w-1/2 mb-1"></div>
+                      <div class="h-4 bg-gray-200 rounded w-1/3"></div>
+                    </div>
+                  </div>
+                </a-col>
+
+                <!-- 类型列 -->
+                <a-col :span="4" class="table-column type-column">
+                  <div class="h-4 bg-gray-200 rounded w-1/3"></div>
+                </a-col>
+
+                <!-- 大小列 -->
+                <a-col :span="3" class="table-column size-column">
+                  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
+                </a-col>
+
+                <!-- 时间列 -->
+                <a-col :span="5" class="table-column time-column">
+                  <div class="h-4 bg-gray-200 rounded w-2/3"></div>
+                </a-col>
+
+                <!-- 操作列 -->
+                <a-col :span="2" class="table-column action-column">
+                  <div class="flex gap-2">
+                    <div class="w-6 h-6 rounded bg-gray-200"></div>
+                    <div class="w-6 h-6 rounded bg-gray-200"></div>
+                    <div class="w-6 h-6 rounded bg-gray-200"></div>
+                    <div class="w-6 h-6 rounded bg-gray-200"></div>
+                  </div>
+                </a-col>
+              </a-row>
+            </template>
+          </a-skeleton>
+
+          <!-- 文件表格 -->
+          <div class="file-grid-container" v-if="currentFolderId && !loading">
+            <!-- 表头行 -->
+            <a-row class="table-header-row">
+              <a-col :span="10" class="table-column name-column">
+                <div class="sortable-header" @click="handleSortChange('fileName')">
+                  <span>文件名</span>
+                  <div class="sort-indicator">
+                    <div class="sort-arrow up" :class="{ active: sortField === 'file_name' && sortOrder === 'asc' }"></div>
+                    <div class="sort-arrow down" :class="{ active: sortField === 'file_name' && sortOrder === 'desc' }"></div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="4" class="table-column type-column">
+                <div class="sortable-header" @click="handleSortChange('fileType')">
+                  <span>类型</span>
+                  <div class="sort-indicator">
+                    <div class="sort-arrow up" :class="{ active: sortField === 'file_type' && sortOrder === 'asc' }"></div>
+                    <div class="sort-arrow down" :class="{ active: sortField === 'file_type' && sortOrder === 'desc' }"></div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="3" class="table-column size-column">
+                <div class="sortable-header" @click="handleSortChange('fileSize')">
+                  <span>大小</span>
+                  <div class="sort-indicator">
+                    <div class="sort-arrow up" :class="{ active: sortField === 'file_size' && sortOrder === 'asc' }"></div>
+                    <div class="sort-arrow down" :class="{ active: sortField === 'file_size' && sortOrder === 'desc' }"></div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="5" class="table-column time-column">
+                <div class="sortable-header" @click="handleSortChange('uploadTime')">
+                  <span>修改时间</span>
+                  <div class="sort-indicator">
+                    <div class="sort-arrow up" :class="{ active: sortField === 'upload_time' && sortOrder === 'asc' }"></div>
+                    <div class="sort-arrow down" :class="{ active: sortField === 'upload_time' && sortOrder === 'desc' }"></div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="2" class="table-column action-column">操作</a-col>
+            </a-row>
+
+            <!-- 数据行 -->
+            <a-row 
+              v-for="file in fileList" 
+              :key="file.fileId" 
+              class="table-data-row"
+            >
+              <!-- 文件名列 -->
+              <a-col :span="10" class="table-column name-column">
+                <div class="file-main">
+                  <icon-file :style="{ color: fileColor(getFileExtension(file.fileName || file.name)) }" class="file-icon-large" />
+                  <div class="file-name-wrap">
+                    <a-typography-title :heading="6" class="file-name">{{ file.fileName || file.name }}</a-typography-title>
+                    <div class="file-name-small">{{ file.fileName || file.name }}</div>
+                  </div>
+                </div>
+              </a-col>
+
+              <!-- 类型列 -->
+              <a-col :span="4" class="table-column type-column">
+                <div class="cell-content">{{ fileTypeText(getFileExtension(file.fileName || file.name)) }}</div>
+              </a-col>
+
+              <!-- 大小列 -->
+              <a-col :span="3" class="table-column size-column">
+                <div class="cell-content">{{ formatFileListSize(file.fileSize || file.size) }}</div>
+              </a-col>
+
+              <!-- 时间列 -->
+              <a-col :span="5" class="table-column time-column">
+                <div class="cell-content">{{ formatUploadTime(file.uploadTime || file.uploadTime) }}</div>
+              </a-col>
+
+              <!-- 操作列 -->
+              <a-col :span="2" class="table-column action-column">
+                <div class="file-actions">
+                  <a-button 
+                    type="text" 
+                    shape="circle" 
+                    size="small" 
+                    tooltip="预览"
+                    @click="handlePreview(file)"
+                  >
+                    <icon-eye />
+                  </a-button>
+                  <a-button 
+                    type="text" 
+                    shape="circle" 
+                    size="small" 
+                    tooltip="下载"
+                    @click="handleDownload(file)"
+                  >
+                    <icon-download />
+                  </a-button>
+                  <a-button 
+                    type="text" 
+                    shape="circle" 
+                    size="small" 
+                    tooltip="重命名"
+                    @click="handleEditFile(file)"
+                  >
+                    <icon-edit />
+                  </a-button>
+                  <a-button 
+                    type="text" 
+                    shape="circle" 
+                    size="small" 
+                    tooltip="删除"
+                    @click="handleDelete(file)"
+                    class="action-btn delete-btn"
+                  >
+                    <icon-delete />
+                  </a-button>
+                </div>
+              </a-col>
+            </a-row>
+          </div>
+
+          <!-- 文件分页 -->
+          <div v-if="currentFolderId && !loading && totalFiles > 0" class="pagination-container">
+            <a-pagination
+              :total="totalFiles"
+              :current="fileCurrentPage"
+              :page-size="filePageSize"
+              :show-total="true"
+              :show-page-size="true"
+              :page-size-options="[10, 20, 50, 100]"
+              :show-jumper="true"
+              :hide-on-single-page="false"
+              size="default"
+              @change="handleFilePageChange"
+              @page-size-change="handleFilePageSizeChange"
+            />
+          </div>
+
+          <!-- 空状态 -->
+          <a-empty 
+            v-if="!loading && currentFolderId && fileList.length === 0" 
+            description="暂无文件"
+            class="empty-state"
+          >
+            <template #image><icon-file /></template>
+            <template #actions>
+              <a-button type="primary" @click="handleUploadFile">
+                <template #icon><icon-upload /></template>
+                上传文件
+              </a-button>
+            </template>
+          </a-empty>
+        </a-card>
+      </a-layout-content>
+    </a-layout>
+
+    <!-- 新建/编辑文件夹对话框 -->
+    <a-modal
+      v-model:visible="folderDialogVisible"
+      :title="folderForm.id ? '编辑文件夹' : '新建文件夹'"
+      width="520px"
+      @ok="submitFolderForm"
+      @cancel="folderDialogVisible = false"
+      :confirm-loading="folderSubmitting"  
+    >
+      <a-form 
+        :model="folderForm" 
+        ref="folderFormRef" 
+        layout="vertical"
+        :validate-trigger="['change', 'blur']"  
+      >
+        <a-form-item label="文件夹名称" field="name" :rules="folderRules.name">
+          <a-input v-model="folderForm.name" placeholder="输入文件夹名称" max-length="50" />
+        </a-form-item>
+        <a-form-item label="父级目录" field="parentId" :rules="folderRules.parentId">
+          <a-tree-select
+            v-model="folderForm.parentId"
+            placeholder="请选择父级目录"
+            :data="folderTreeSelectData"
+            :field-names="{ key: 'id', title: 'name', children: 'children' }"
+            allow-clear
+            :tree-props="{ showLine: true }"
+          >
+            <template #title="{ node }">
+              <span>{{ node?.title || node?.name }}</span>
+            </template>
+          </a-tree-select>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    
+    <!-- 上传文件对话框 -->
+    <a-modal
+      v-model:visible="uploadDialogVisible"
+      title="上传文件"
+      width="620px"
+      :mask-closable="false"
+      @ok="handleUploadSubmit"
+      @cancel="resetUpload"
+      :confirm-loading="uploading"
+      :ok-disabled="!canUpload"
+    >
+      <a-form :model="uploadForm" ref="uploadFormRef" layout="vertical">
+        <!-- 选择文件 -->
+        <a-form-item 
+          label="选择文件" 
+          :validate-status="!hasFiles ? 'error' : ''"
+          :help="!hasFiles ? '请选择需要上传的文件' : ''"
+        >
+          <div class="upload-container">
+            <!-- 上传按钮 -->
+            <a-upload
+              ref="uploadRef"
+              :key="uploadDialogVisible ? 'upload-open' : 'upload-closed'"
+              :auto-upload="false"
+              :show-file-list="false"
+              @change="handleFileChange"
+              :accept="allowedFileTypes"
+              multiple
+            >
+              <a-button type="primary" class="upload-btn">
+                <icon-upload />
+                点击选择文件
+              </a-button>
+            </a-upload>
+            
+            <!-- 文件类型提示 -->
+            <div class="upload-hint">
+              支持 {{ allowedFileTypesText }} 等格式，单个文件不超过 {{ maxFileSizeText }}
+            </div>
+          </div>
+          
+          <!-- 文件列表 -->
+          <div class="upload-file-list" v-if="fileListTemp.length > 0">
+            <div 
+              class="upload-file-item" 
+              v-for="file in fileListTemp" 
+              :key="file.uid"
+              :class="{ 'file-error': file.error }"
+            >
+              <div class="file-info">
+                <icon-file 
+                  :style="{ color: fileColor(getFileExtension(file.name)) }" 
+                  class="file-icon" 
+                />
+                <div class="file-details">
+                  <div class="file-name">{{ file.name }}</div>
+                  <div class="file-meta">
+                    {{ formatFileSize(file.size) }}
+                    <span v-if="file.error" class="error-text">{{ file.error }}</span>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 进度条 -->
+              <div class="file-progress" v-if="file.status === 'uploading'">
+                <a-progress 
+                  :percent="file.percent || 0" 
+                  size="small"
+                  :status="file.percent === 100 ? 'success' : 'processing'"
+                />
+              </div>
+              
+              <!-- 操作按钮 -->
+              <div class="file-actions">
+                <a-button 
+                  v-if="file.status !== 'uploading'"
+                  type="text" 
+                  shape="circle" 
+                  size="small" 
+                  @click="removeFile(file)"
+                  class="remove-btn"
+                >
+                  <icon-delete />
+                </a-button>
+                <a-button 
+                  v-else
+                  type="text" 
+                  shape="circle" 
+                  size="small" 
+                  @click="cancelUpload(file)"
+                  class="cancel-btn"
+                >
+                  <icon-stop />
+                </a-button>
+              </div>
+            </div>
+          </div>
+        </a-form-item>
+
+        <!-- 目标文件夹选择 -->
+        <a-form-item 
+          label="上传至目录" 
+          field="folderId"
+          :rules="[{ required: true, message: '请选择目标文件夹' }]"
+        >
+          <a-select
+            v-model="uploadForm.folderId"
+            placeholder="请选择目标文件夹"
+            allow-clear
+          >
+            <a-option value="0">根目录</a-option>
+            <a-option 
+              v-for="folder in folderList" 
+              :key="folder.id" 
+              :value="folder.id"
+            >
+              {{ folder.name }}
+            </a-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    
+    <!-- 重命名文件夹对话框 -->
+    <a-modal
+      v-model:visible="renameModalVisible"
+      :title="renameForm.isRoot ? '重命名根目录' : '重命名文件夹'"
+      width="520px"
+      @ok="confirmRename"
+      @cancel="renameModalVisible = false"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="文件夹名称">
+          <a-input 
+            v-model="renameForm.newName" 
+            placeholder="请输入新的文件夹名称" 
+            max-length="50"
+            @keyup.enter="confirmRename"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 重命名文件对话框 -->
+    <a-modal
+      v-model:visible="renameFileModalVisible"
+      title="重命名文件"
+      width="520px"
+      @ok="confirmRenameFile"
+      @cancel="renameFileModalVisible = false"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="新文件名">
+          <a-input 
+            v-model="renameFileForm.newName" 
+            placeholder="请输入新的文件名称（不含扩展名）" 
+            max-length="100"
+            @keyup.enter="confirmRenameFile"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </a-layout>
+</template>
+
+<script setup>
+// 导入核心依赖
+import { ref, reactive, onMounted, computed, watch, nextTick, h } from 'vue';
+import {
+  IconFolder,
+  IconFile,
+  IconPlus,
+  IconUpload,
+  IconMenuFold,
+  IconMenuUnfold,
+  IconEye,
+  IconDownload,
+  IconDelete,
+  IconRefresh,
+  IconEdit,
+  IconFolderAdd,
+  IconStop
+} from '@arco-design/web-vue/es/icon';
+import { Message, Modal } from '@arco-design/web-vue';
+import axios from 'axios';
+
+// 导入API
+import {
+  getFolderListApi,
+  getFilesApi,
+  createFolderApi,
+  updateFolderApi,
+  deleteFolderApi,
+  deleteFileApi,
+  downloadFileApi,
+  uploadFileApi,
+  updateFileNameApi,
+  renameFileApi,
+  previewFileApi
+} from '@/apis/data'
+
+// 状态管理
+const folderList = ref([]);
+const fileList = ref([]);
+const currentFolderId = ref('');
+// 移除currentFolderName，现在使用面包屑导航
+// const currentFolderName = ref('');
+const loading = ref(false);
+const folderDialogVisible = ref(false);
+const uploadDialogVisible = ref(false);
+
+// 分页
+const currentPage = ref(1);
+const pageSize = ref(10);
+const totalFolders = ref(0);
+const fileCurrentPage = ref(1);
+const filePageSize = ref(10);
+const totalFiles = ref(0);
+
+// 排序状态
+const sortField = ref('');
+const sortOrder = ref('');
+
+// 排序字段映射（前端显示名 -> 后端字段名）
+const sortFieldMap = {
+  'fileName': 'file_name',
+  'fileType': 'file_type', 
+  'fileSize': 'file_size',
+  'uploadTime': 'upload_time'
+};
+
+// 表单数据
+const folderForm = reactive({
+  id: '',
+  name: '',
+  parentId: '0'
+});
+
+const folderRules = {
+  name: [
+    { required: true, message: '请输入文件夹名称' },
+    { maxLength: 50, message: '文件夹名称不能超过50个字符' }
+  ],
+  parentId: [
+    { required: true, message: '请选择父级目录' }
+  ]
+};
+
+// 上传相关状态
+const uploadForm = reactive({
+  folderId: ''
+});
+const fileListTemp = ref([]);
+const folderFormRef = ref(null);
+const uploadFormRef = ref(null);
+const uploadRef = ref(null);
+const folderColor = 'var(--color-primary)';
+const refreshing = ref(false);
+const folderSubmitting = ref(false);
+const uploading = ref(false);
+const allowedFileTypes = '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.txt,.jpg,.jpeg,.png,.gif,.bmp,.webp';
+const allowedFileTypesText = 'PDF, Word, Excel, PPT, 压缩文件, 文本文件, 图片文件';
+const maxFileSize = 1000 * 1024 * 1024; // 1000MB
+const maxFileSizeText = '1000MB';
+const cancelTokens = ref({});
+
+// 计算属性：是否有文件可上传
+const hasFiles = computed(() => {
+  console.log('=== hasFiles计算属性执行 ===');
+  console.log('原始fileListTemp:', fileListTemp.value);
+  console.log('fileListTemp长度:', fileListTemp.value.length);
+  
+  const validFiles = fileListTemp.value.filter(file => {
+    const isValid = !file.error && file.status !== 'removed' && file.status !== 'canceled';
+    console.log(`文件 ${file.name}: error=${file.error}, status=${file.status}, isValid=${isValid}`);
+    return isValid;
+  });
+  
+  console.log('过滤后的有效文件:', validFiles);
+  console.log('有效文件数量:', validFiles.length);
+  console.log('hasFiles结果:', validFiles.length > 0);
+  
+  return validFiles.length > 0;
+});
+
+// 计算属性：是否可以上传
+const canUpload = computed(() => {
+  return hasFiles.value && !uploading.value && uploadForm.folderId;
+});
+
+// 计算属性：将平铺的文件夹数据转换为树形结构
+const folderTreeData = computed(() => {
+  console.log('=== folderTreeData计算属性执行 ===');
+  console.log('folderList.value:', folderList.value);
+  console.log('folderList.value.length:', folderList.value?.length);
+  
+  if (!folderList.value || folderList.value.length === 0) {
+    console.log('folderList为空，返回空数组');
+    return [];
+  }
+
+  // 创建文件夹映射表
+  const folderMap = new Map();
+  const rootFolders = [];
+
+  console.log('=== 开始创建文件夹映射 ===');
+  // 首先创建所有文件夹的映射
+  folderList.value.forEach((folder, index) => {
+    console.log(`处理第${index + 1}个文件夹:`, folder);
+    // 确保文件夹数据完整
+    if (folder && folder.id && folder.name) {
+      const node = {
+        key: folder.id,        // Tree组件需要的key字段
+        title: folder.name,    // Tree组件需要的title字段
+        children: [],          // Tree组件需要的children字段
+        // 保留原始字段用于其他功能
+        id: folder.id,
+        name: folder.name,
+        parentId: folder.parentId
+      };
+      folderMap.set(folder.id, node);
+      console.log(`✅ 成功添加文件夹到映射: ${folder.name} (ID: ${folder.id})`);
+    } else {
+      console.warn('❌ 跳过不完整的文件夹数据:', folder);
+    }
+  });
+
+  console.log('=== 开始构建树形结构 ===');
+  console.log('文件夹映射表大小:', folderMap.size);
+  
+  // 构建树形结构
+  folderList.value.forEach((folder, index) => {
+    console.log(`构建第${index + 1}个文件夹的树形结构:`, folder);
+    // 确保文件夹数据完整
+    if (!folder || !folder.id || !folder.name) {
+      console.warn('❌ 跳过不完整的文件夹数据:', folder);
+      return;
+    }
+    
+    const node = folderMap.get(folder.id);
+    if (!node) {
+      console.warn('❌ 找不到文件夹节点:', folder.id);
+      return;
+    }
+    
+    console.log(`处理文件夹: ${folder.name} (ID: ${folder.id}, ParentID: ${folder.parentId})`);
+    
+    if (folder.parentId === '0' || folder.parentId === 0) {
+      // 根文件夹
+      rootFolders.push(node);
+      console.log(`✅ 添加为根文件夹: ${folder.name}`);
+    } else {
+      // 子文件夹
+      const parent = folderMap.get(folder.parentId);
+      if (parent) {
+        parent.children.push(node);
+        console.log(`✅ 添加为子文件夹: ${folder.name} -> ${parent.name}`);
+      } else {
+        // 如果找不到父文件夹，当作根文件夹处理
+        console.warn('⚠️ 找不到父文件夹，将文件夹作为根文件夹:', folder.name, folder.parentId);
+        rootFolders.push(node);
+      }
+    }
+  });
+
+  console.log('=== 树形结构构建完成 ===');
+  console.log('根文件夹数量:', rootFolders.length);
+  console.log('构建的树形结构:', rootFolders);
+  
+  // 验证树形结构中的节点数据
+  rootFolders.forEach((root, index) => {
+    console.log(`根文件夹${index + 1}:`, {
+      id: root.id,
+      name: root.name,
+      childrenCount: root.children?.length || 0
+    });
+  });
+  
+  return rootFolders;
+});
+
+// 计算属性：树形选择器数据（包含根目录选项）
+const folderTreeSelectData = computed(() => {
+  const rootOption = {
+    key: '0',        // Tree组件需要的key字段
+    title: '根目录',  // Tree组件需要的title字段
+    children: [],    // Tree组件需要的children字段
+    // 保留原始字段用于其他功能
+    id: '0',
+    name: '根目录'
+  };
+  
+  return [rootOption, ...folderTreeData.value];
+});
+
+// 搜索相关
+const searchKeyword = ref(''); // 文件夹搜索关键词
+const fileSearchKeyword = ref(''); // 文件搜索关键词
+const searchTimeout = ref(null);
+
+// 初始化文件夹数据
+const initData = async () => {
+  try {
+    loading.value = true;
+    console.log('=== 开始初始化数据 ===');
+    console.log('搜索关键词:', searchKeyword.value);
+    console.log('搜索关键词类型:', typeof searchKeyword.value);
+    console.log('搜索关键词长度:', searchKeyword.value?.length);
+    console.log('当前页码:', currentPage.value);
+    console.log('页面大小:', pageSize.value);
+    
+    const apiParams = {
+      page: currentPage.value,
+      pageSize: 1000, // 修改为足够大的值，确保获取所有文件夹
+      folderName: searchKeyword.value.trim() || undefined
+    };
+    
+    console.log('API参数:', apiParams);
+    
+    const folderRes = await getFolderListApi(apiParams);
+    
+    console.log('=== API响应详情 ===');
+    console.log('完整响应:', folderRes);
+    console.log('响应状态码:', folderRes.code);
+    console.log('响应数据:', folderRes.data);
+    console.log('rows数据:', folderRes.data?.rows);
+    console.log('rows数据类型:', typeof folderRes.data?.rows);
+    console.log('rows数据长度:', folderRes.data?.rows?.length);
+    console.log('total数据:', folderRes.data?.total);
+    
+    // 根据后端返回的数据结构处理
+    if (folderRes.code === 200 && folderRes.data) {
+      console.log('=== 开始处理数据 ===');
+      console.log('folderRes.data:', folderRes.data);
+      console.log('folderRes.data.rows:', folderRes.data.rows);
+      console.log('folderRes.data.rows类型:', typeof folderRes.data.rows);
+      console.log('folderRes.data.rows长度:', folderRes.data.rows?.length);
+      
+      // 检查数据结构
+      if (!folderRes.data.rows || !Array.isArray(folderRes.data.rows)) {
+        console.error('API返回的数据结构不正确，rows字段不存在或不是数组');
+        console.log('可用的字段:', Object.keys(folderRes.data));
+        folderList.value = [];
+        totalFolders.value = 0;
+        return;
+      }
+      
+      const processedFolders = folderRes.data.rows.map((folder, index) => {
+        console.log(`处理第${index + 1}个原始文件夹数据:`, folder);
+        console.log(`原始数据字段:`, Object.keys(folder));
+        console.log(`folderId:`, folder.folderId);
+        console.log(`folderName:`, folder.folderName);
+        console.log(`parentId:`, folder.parentId);
+        
+        // 确保所有必需字段都存在
+        if (!folder.folderId || !folder.folderName) {
+          console.warn('❌ 跳过不完整的文件夹数据:', folder);
+          return null;
+        }
+        
+        const processedFolder = {
+          id: String(folder.folderId),
+          name: String(folder.folderName),
+          parentId: String(folder.parentId || 0)
+        };
+        
+        console.log(`✅ 处理后的文件夹数据:`, processedFolder);
+        return processedFolder;
+      }).filter(Boolean); // 过滤掉null值
+      
+      folderList.value = processedFolders;
+      totalFolders.value = Number(folderRes.data.total) || 0;
+      
+      console.log('=== 处理后的数据 ===');
+      console.log('处理后的文件夹列表:', folderList.value);
+      console.log('文件夹列表长度:', folderList.value.length);
+      console.log('总文件夹数:', totalFolders.value);
+      console.log('当前folderList.value:', folderList.value);
+    } else {
+      folderList.value = [];
+      totalFolders.value = 0;
+      console.log('API响应异常，清空列表');
+      console.log('响应码不是200或数据为空');
+      console.log('folderRes.code:', folderRes.code);
+      console.log('folderRes.data:', folderRes.data);
+    }
+  } catch (error) {
+    console.error('初始化文件夹数据失败:', error);
+    console.error('错误详情:', error.response?.data);
+    Message.error('加载文件夹失败，请重试');
+    folderList.value = [];
+    totalFolders.value = 0;
+  } finally {
+    loading.value = false;
+    console.log('=== 初始化完成 ===');
+    console.log('最终folderList.value:', folderList.value);
+    console.log('最终loading.value:', loading.value);
+  }
+};
+
+// 分页事件处理
+const handlePageChange = (page) => {
+  currentPage.value = page;
+  initData();
+};
+
+const handlePageSizeChange = (current, size) => {
+  pageSize.value = size;
+  currentPage.value = 1;
+  initData();
+};
+
+const handleFolderSearch = () => {
+  console.log('=== 执行搜索 ===');
+  console.log('搜索关键词:', searchKeyword.value);
+  // 重置到第一页并搜索
+  currentPage.value = 1;
+  console.log('重置页码为:', currentPage.value);
+  initData();
+};
+
+const handleSearchInput = (value) => {
+  console.log('=== 搜索输入 ===');
+  console.log('输入值:', value);
+  searchKeyword.value = value;
+  console.log('设置搜索关键词为:', searchKeyword.value);
+  // 防抖搜索：300ms后自动搜索
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value);
+    console.log('清除之前的搜索定时器');
+  }
+  searchTimeout.value = setTimeout(() => {
+    console.log('=== 防抖搜索执行 ===');
+    currentPage.value = 1;
+    console.log('重置页码为:', currentPage.value);
+    initData();
+  }, 300);
+};
+
+const handleSearchClear = () => {
+  console.log('=== 清除搜索 ===');
+  searchKeyword.value = '';
+  console.log('清空搜索关键词');
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value);
+    console.log('清除搜索定时器');
+  }
+  currentPage.value = 1;
+  console.log('重置页码为:', currentPage.value);
+  // 清除搜索后立即刷新数据，显示所有文件夹
+  initData();
+};
+
+// 文件搜索相关函数
+const handleFileSearch = () => {
+  console.log('=== 执行文件搜索 ===');
+  console.log('文件搜索关键词:', fileSearchKeyword.value);
+  // 重置到第一页并搜索
+  fileCurrentPage.value = 1;
+  // 搜索时重置排序状态
+  sortField.value = '';
+  sortOrder.value = '';
+  console.log('重置文件页码为:', fileCurrentPage.value);
+  if (currentFolderId.value) {
+    loadFiles(currentFolderId.value);
+  }
+};
+
+const handleFileSearchInput = (value) => {
+  console.log('=== 文件搜索输入 ===');
+  console.log('输入值:', value);
+  fileSearchKeyword.value = value;
+  console.log('设置文件搜索关键词为:', fileSearchKeyword.value);
+  // 防抖搜索：300ms后自动搜索
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value);
+    console.log('清除之前的文件搜索定时器');
+  }
+  searchTimeout.value = setTimeout(() => {
+    console.log('=== 防抖文件搜索执行 ===');
+    fileCurrentPage.value = 1;
+    // 搜索时重置排序状态
+    sortField.value = '';
+    sortOrder.value = '';
+    console.log('重置文件页码为:', fileCurrentPage.value);
+    if (currentFolderId.value) {
+      loadFiles(currentFolderId.value);
+    }
+  }, 300);
+};
+
+const handleFileSearchClear = () => {
+  console.log('=== 清除文件搜索 ===');
+  fileSearchKeyword.value = '';
+  console.log('清空文件搜索关键词');
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value);
+    console.log('清除文件搜索定时器');
+  }
+  fileCurrentPage.value = 1;
+  // 清除搜索时重置排序状态
+  sortField.value = '';
+  sortOrder.value = '';
+  console.log('重置文件页码为:', fileCurrentPage.value);
+  if (currentFolderId.value) {
+    loadFiles(currentFolderId.value);
+  }
+};
+
+const loadFiles = async (folderId) => {
+  try {
+    loading.value = true;
+    const apiParams = {
+      folderId: folderId,
+      page: fileCurrentPage.value,
+      pageSize: filePageSize.value,
+      fileName: fileSearchKeyword.value || undefined
+    };
+    
+    // 添加排序参数
+    if (sortField.value && sortOrder.value) {
+      apiParams.sortField = sortField.value;
+      apiParams.sortOrder = sortOrder.value;
+    }
+    
+    const res = await getFilesApi(apiParams);
+    
+    // 根据后端返回的数据结构处理
+    if (res.code === 200 && res.data) {
+      fileList.value = res.data.rows || []; 
+      totalFiles.value = res.data.total || 0;
+    } else {
+      fileList.value = [];
+      totalFiles.value = 0;
+    }
+    
+    currentFolderId.value = folderId;
+  } catch (error) {
+    console.error('加载文件失败:', error);
+    Message.error('服务开小差，请稍后再试');
+    fileList.value = [];
+    totalFiles.value = 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 排序处理函数
+const handleSortChange = (field) => {
+  const backendField = sortFieldMap[field];
+  
+  if (!backendField) return;
+  
+  // 切换排序方向
+  if (sortField.value === backendField) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
+  } else {
+    // 新字段，默认降序
+    sortField.value = backendField;
+    sortOrder.value = 'desc';
+  }
+  
+  // 重新加载文件列表
+  if (currentFolderId.value) {
+    loadFiles(currentFolderId.value);
+  }
+};
+
+// 文件夹点击事件
+// const handleFolderClick = (folderId) => {
+//   const id = String(folderId);
+//   if (currentFolderId.value !== id) {
+//     fileCurrentPage.value = 1;
+//     // 切换文件夹时清空文件搜索关键词
+//     fileSearchKeyword.value = '';
+//   }
+//   currentFolderId.value = id;
+// };
+
+// 树形文件夹选择事件
+const handleFolderSelect = (selectedKeys, info) => {
+  if (selectedKeys.length > 0) {
+    const folderId = selectedKeys[0];
+    if (currentFolderId.value !== folderId) {
+      fileCurrentPage.value = 1;
+      // 切换文件夹时清空文件搜索关键词和排序状态
+      fileSearchKeyword.value = '';
+      sortField.value = '';
+      sortOrder.value = '';
+    }
+    currentFolderId.value = folderId;
+    loadFiles(folderId);
+  }
+};
+
+// 文件夹双击处理
+const handleFolderDoubleClick = (info) => {
+  console.log('文件夹双击:', info);
+  
+  const { node } = info;
+  if (!node) return;
+  
+  // 显示操作选项
+  Modal.confirm({
+    title: '文件夹操作',
+    content: `请选择对文件夹"${node.title}"的操作`,
+    okText: '重命名',
+    cancelText: '删除',
+    onOk: () => handleRenameFolder(node),
+    onCancel: () => handleDeleteFolder(node)
+  });
+};
+
+// 重命名当前选中的文件夹
+const handleRenameCurrentFolder = () => {
+  if (!currentFolderId.value || currentFolderId.value === '0') {
+    Message.warning('请先选择一个文件夹');
+    return;
+  }
+  
+  // 从folderList中找到当前选中的文件夹
+  const currentFolder = folderList.value.find(folder => folder.id === currentFolderId.value);
+  if (!currentFolder) {
+    Message.error('找不到当前文件夹信息');
+    return;
+  }
+  
+  // 构造node对象
+  const node = {
+    key: currentFolder.id,
+    title: currentFolder.name,
+    id: currentFolder.id,
+    name: currentFolder.name
+  };
+  
+  handleRenameFolder(node);
+};
+
+// 删除当前选中的文件夹
+const handleDeleteCurrentFolder = () => {
+  if (!currentFolderId.value || currentFolderId.value === '0') {
+    Message.warning('请先选择一个文件夹');
+    return;
+  }
+  
+  // 从folderList中找到当前选中的文件夹
+  const currentFolder = folderList.value.find(folder => folder.id === currentFolderId.value);
+  if (!currentFolder) {
+    Message.error('找不到当前文件夹信息');
+    return;
+  }
+  
+  // 构造node对象
+  const node = {
+    key: currentFolder.id,
+    title: currentFolder.name,
+    id: currentFolder.id,
+    name: currentFolder.name
+  };
+  
+  handleDeleteFolder(node);
+};
+
+
+
+// 计算属性：面包屑导航路径
+const breadcrumbPath = computed(() => {
+  if (!currentFolderId.value || currentFolderId.value === '0') {
+    return ['知识库', '根目录'];
+  }
+
+  const path = ['知识库'];
+  let currentId = currentFolderId.value;
+  
+  // 从当前文件夹向上查找父级路径
+  while (currentId && currentId !== '0') {
+    const folder = folderList.value.find(f => f.id === currentId);
+    if (folder) {
+      path.unshift(folder.name);
+      currentId = folder.parentId;
+    } else {
+      break;
+    }
+  }
+  
+  return path;
+});
+
+// 面包屑点击事件处理
+const handleBreadcrumbClick = (index) => {
+  if (index === 0) {
+    // 点击"知识库"，回到根目录
+    currentFolderId.value = '0';
+    // 重置排序状态
+    sortField.value = '';
+    sortOrder.value = '';
+    loadFiles('0');
+  } else {
+    // 点击其他路径项，需要找到对应的文件夹ID
+    const targetPath = breadcrumbPath.value.slice(0, index + 1);
+    const targetFolderName = targetPath[targetPath.length - 1];
+    
+    // 查找对应的文件夹
+    const targetFolder = folderList.value.find(folder => folder.name === targetFolderName);
+    if (targetFolder) {
+      currentFolderId.value = targetFolder.id;
+      // 重置排序状态
+      sortField.value = '';
+      sortOrder.value = '';
+      loadFiles(targetFolder.id);
+    }
+  }
+};
+
+// 重命名对话框状态
+const renameModalVisible = ref(false);
+const renameForm = reactive({
+  folderId: '',
+  currentName: '',
+  newName: '',
+  isRoot: false
+});
+
+// 重命名文件对话框状态
+const renameFileModalVisible = ref(false);
+const renameFileForm = reactive({
+  fileId: '',
+  newName: '',
+  fileExtension: ''
+});
+
+// 文件夹重命名处理函数
+const handleRenameFolder = (folder) => {
+  console.log('重命名文件夹:', folder);
+  
+  if (!folder) {
+    Message.error('文件夹信息不能为空');
+    return;
+  }
+  
+  const folderId = folder.key || folder.id;
+  const currentName = folder.title || folder.name;
+  
+  if (!folderId) {
+    Message.error('文件夹ID不能为空');
+    return;
+  }
+  
+  if (!currentName) {
+    Message.error('文件夹名称不能为空');
+    return;
+  }
+  
+  if (!currentName) {
+    console.error('❌ currentName 为空');
+    console.error('尝试从folder对象获取名称...');
+    const fallbackName = folder?.title || folder?.name;
+    console.error('fallbackName:', fallbackName);
+    
+    if (!fallbackName) {
+      Message.error('当前文件夹名称不能为空');
+      return;
+    } else {
+      console.log('✅ 使用fallbackName:', fallbackName);
+      currentName = fallbackName;
+    }
+  }
+  
+  // 先显示一个简单的提示，确认函数被调用
+  Message.info('重命名功能被触发');
+  
+  // 设置重命名对话框数据
+  renameForm.folderId = folderId;
+  renameForm.currentName = currentName;
+  renameForm.newName = currentName;
+  renameForm.isRoot = folderId === '0';
+  
+  console.log('重命名表单数据已设置:', renameForm);
+  
+  // 显示重命名对话框
+  renameModalVisible.value = true;
+  console.log('重命名对话框已显示');
+};
+
+// 确认重命名
+const confirmRename = async () => {
+  const { folderId, newName, currentName, isRoot } = renameForm;
+  
+  console.log('确认重命名:', { folderId, newName, currentName, isRoot });
+  
+  if (!newName || newName.trim() === '') {
+    Message.warning('文件夹名称不能为空');
+    return;
+  }
+  
+  if (newName.trim() === currentName) {
+    renameModalVisible.value = false;
+    return;
+  }
+  
+  try {
+    console.log('开始调用重命名API...');
+    console.log('API参数:', { folderId, newName: newName.trim() });
+    
+    // 调用重命名API
+    const result = await updateFolderApi(folderId, newName.trim());
+    console.log('重命名API响应:', result);
+    
+    // 检查API响应
+    if (result && result.code === 200) {
+      if (isRoot) {
+        Message.success('根目录重命名成功');
+        // 移除对currentFolderName的设置，现在使用面包屑导航
+        // currentFolderName.value = newName.trim();
+      } else {
+        Message.success('文件夹重命名成功');
+        // 移除对currentFolderName的设置，现在使用面包屑导航
+        // if (currentFolderId.value === folderId) {
+        //   currentFolderName.value = newName.trim();
+        // }
+      }
+      
+      initData(); // 刷新文件夹列表
+      renameModalVisible.value = false;
+    } else {
+      // API返回错误
+      const errorMsg = result?.msg || '重命名失败，请检查网络连接';
+      console.error('重命名API返回错误:', result);
+      Message.error(errorMsg);
+    }
+  } catch (error) {
+    console.error('重命名失败 - 详细错误信息:', error);
+    console.error('错误响应数据:', error.response?.data);
+    console.error('错误状态码:', error.response?.status);
+    
+    // 显示更详细的错误信息
+    let errorMessage = '重命名失败';
+    if (error.response?.data?.msg) {
+      errorMessage = error.response.data.msg;
+    } else if (error.message) {
+      errorMessage = `重命名失败: ${error.message}`;
+    }
+    
+    Message.error(errorMessage);
+  }
+};
+
+// 文件分页事件
+const handleFilePageChange = (page) => {
+  fileCurrentPage.value = page;
+  if (currentFolderId.value) {
+    loadFiles(currentFolderId.value);
+  }
+};
+
+const handleFilePageSizeChange = (current, size) => {
+  filePageSize.value = size;
+  fileCurrentPage.value = 1;
+  if (currentFolderId.value) {
+    loadFiles(currentFolderId.value);
+  }
+};
+
+// 刷新数据
+const refreshData = async () => {
+  refreshing.value = true;
+  try {
+    // 强制清空搜索关键词，确保显示所有文件夹
+    searchKeyword.value = '';
+    currentPage.value = 1;
+    // 刷新时重置排序状态
+    sortField.value = '';
+    sortOrder.value = '';
+    
+    await initData();
+    if (currentFolderId.value) {
+      await loadFiles(currentFolderId.value);
+    }
+    Message.success('数据已刷新');
+  } catch (error) {
+    Message.error('刷新失败');
+  } finally {
+    refreshing.value = false;
+  }
+};
+
+// 新建/编辑文件夹提交
+const submitFolderForm = async () => {
+  folderSubmitting.value = true;
+  try {
+    if (folderForm.id) {
+      await updateFolderApi(folderForm.id, folderForm.name);
+      Message.success('文件夹重命名成功');
+    } else {
+      const result = await createFolderApi({
+        name: folderForm.name,
+        parentId: folderForm.parentId
+      });
+      Message.success('文件夹创建成功');
+      
+      // 新建文件夹后，刷新数据并自动选中新建的文件夹
+      await initData();
+      
+      // 如果有返回新建文件夹的ID，自动选中它
+      if (result.data && result.data.folderId) {
+        currentFolderId.value = String(result.data.folderId);
+        loadFiles(currentFolderId.value);
+      }
+    }
+    folderDialogVisible.value = false;
+  } catch (error) {
+    console.error('文件夹操作失败:', error);
+    Message.error(folderForm.id ? '重命名失败' : '创建失败');
+  } finally {
+    folderSubmitting.value = false;
+  }
+};
+
+// 格式化上传时间
+const formatUploadTime = (timeStr) => {
+  if (!timeStr) return '未知时间';
+  const date = new Date(timeStr);
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  });
+};
+
+// 文件变化处理
+const handleFileChange = (info) => {
+  console.log('=== 文件变化事件 ===');
+  console.log('完整info对象:', info);
+  
+  // 安全检查：确保 info 存在且是数组
+  if (!info || !Array.isArray(info)) {
+    console.log('❌ info 不存在或不是数组，跳过处理');
+    return;
+  }
+  
+  const fileList = info;
+  console.log('文件列表:', fileList);
+  console.log('文件列表长度:', fileList.length);
+  
+  // 检查是否是组件内部状态触发的（可能是之前的状态）
+  if (fileList.length === 0) {
+    console.log('⚠️ 文件列表为空，可能是组件内部状态，跳过处理');
+    return;
+  }
+  
+  // 检查是否是对话框刚打开时的触发（可能是之前的状态）
+  if (!uploadDialogVisible.value) {
+    console.log('⚠️ 对话框未显示，可能是之前的状态触发，跳过处理');
+    return;
+  }
+  
+  // 获取当前已存在的文件UID列表，用于去重
+  const existingUids = fileListTemp.value.map(f => f.uid);
+  console.log('已存在的文件UID:', existingUids);
+  
+  // 获取当前文件夹中已存在的文件名列表，用于检查重复
+  const currentFolderFiles = fileList.value || [];
+  const existingFileNames = currentFolderFiles.map(f => f.fileName || f.name);
+  console.log('当前文件夹中的文件:', existingFileNames);
+  
+  // 强制重置上传组件状态
+  if (uploadRef.value) {
+    try {
+      uploadRef.value.reset();
+      console.log('已强制重置上传组件');
+    } catch (error) {
+      console.log('重置上传组件时出错:', error);
+    }
+  }
+  
+  // 处理新选择的文件 - 支持多文件选择，同时避免重复
+  fileList.forEach((file, index) => {
+    console.log(`处理第${index + 1}个文件:`, file);
+    console.log('文件名称:', file.name);
+    console.log('文件大小:', file.size);
+    console.log('文件UID:', file.uid);
+    console.log('文件对象结构:', Object.keys(file));
+    
+    // 检查文件是否已存在（去重）
+    if (existingUids.includes(file.uid)) {
+      console.log('⚠️ 文件已存在，跳过:', file.name);
+      return;
+    }
+    
+    // 确保文件对象有正确的属性
+    const fileObj = {
+      uid: file.uid,
+      name: file.name,
+      size: file.size || file.file?.size || 0,
+      type: file.type || file.file?.type || '',
+      status: 'ready',
+      error: '',
+      originFileObj: file.file || file // 保存原始File对象
+    };
+    
+    console.log('开始验证新文件...');
+    
+    // 检查文件是否已存在于当前文件夹中
+    if (existingFileNames.includes(fileObj.name)) {
+      fileObj.error = '文件已存在于当前文件夹中';
+      console.log('⚠️ 文件已存在于文件夹中:', fileObj.name);
+      // 显示友好的提示信息
+      Message.warning(`文件 "${fileObj.name}" 已存在于当前文件夹中，已跳过`);
+      return;
+    }
+    
+    // 验证文件
+    const isValid = validateFile(fileObj);
+    console.log('文件验证结果:', isValid);
+    
+    if (isValid) {
+      // 支持多文件：添加到列表
+      fileListTemp.value.push(fileObj);
+      console.log('✅ 成功添加文件到列表:', fileObj.name);
+    } else {
+      console.log('❌ 文件验证失败:', fileObj.name, '错误:', fileObj.error);
+    }
+  });
+  
+  console.log('=== 当前文件列表状态 ===');
+  console.log('fileListTemp长度:', fileListTemp.value.length);
+  console.log('fileListTemp内容:', fileListTemp.value);
+  console.log('hasFiles计算结果:', hasFiles.value);
+};
+
+// 文件验证
+const validateFile = (file) => {
+  console.log('=== 开始验证文件 ===');
+  console.log('验证文件:', file.name);
+  console.log('文件大小:', file.size);
+  
+  // 清除之前的错误
+  file.error = '';
+  
+  // 验证文件类型
+  const ext = getFileExtension(file.name).toLowerCase();
+  console.log('文件扩展名:', ext);
+  
+  const allowedExts = allowedFileTypes
+    .split(',')
+    .map(type => type.toLowerCase().replace(/^\./, ''));
+  
+  console.log('允许的扩展名:', allowedExts);
+  console.log('扩展名是否匹配:', allowedExts.includes(ext));
+  
+  if (!allowedExts.includes(ext)) {
+    file.error = `不支持的文件类型，支持: ${allowedFileTypesText}`;
+    console.log('❌ 文件类型验证失败:', file.error);
+    return false;
+  }
+  
+  // 验证文件大小
+  console.log('文件大小验证:', file.size, '<=', maxFileSize);
+  if (file.size > maxFileSize) {
+    file.error = `文件过大，最大支持 ${maxFileSizeText}`;
+    console.log('❌ 文件大小验证失败:', file.error);
+    return false;
+  }
+  
+  console.log('✅ 文件验证通过');
+  return true;
+};
+
+// 获取文件扩展名
+const getFileExtension = (fileName) => {
+  const lastDotIndex = fileName.lastIndexOf('.');
+  return lastDotIndex > 0 ? fileName.slice(lastDotIndex + 1) : '';
+};
+
+// 获取文件图标颜色
+const fileColor = (extension) => {
+  const colorMap = {
+    pdf: '#ff4d4f',
+    doc: '#1890ff',
+    docx: '#1890ff',
+    xls: '#52c41a',
+    xlsx: '#52c41a',
+    ppt: '#faad14',
+    pptx: '#faad14',
+    zip: '#722ed1',
+    txt: '#8c8c8c',
+    // 图片格式颜色
+    jpg: '#52c41a',
+    jpeg: '#52c41a',
+    png: '#1890ff',
+    gif: '#faad14',
+    bmp: '#722ed1',
+    webp: '#13c2c2'
+  };
+  return colorMap[extension.toLowerCase()] || 'var(--color-text-3)';
+};
+
+
+
+// 移除文件
+const removeFile = (file) => {
+  fileListTemp.value = fileListTemp.value.filter(f => f.uid !== file.uid);
+  
+  // 如果是正在上传的文件，取消请求
+  if (file.status === 'uploading' && cancelTokens.value[file.uid]) {
+    cancelTokens.value[file.uid].cancel('上传已取消');
+    delete cancelTokens.value[file.uid];
+  }
+};
+
+// 取消上传
+const cancelUpload = (file) => {
+  if (cancelTokens.value[file.uid]) {
+    cancelTokens.value[file.uid].cancel('上传已取消');
+    file.status = 'canceled';
+  }
+};
+
+// 提交上传
+const handleUploadSubmit = async () => {
+  // 过滤有效文件
+  const validFiles = fileListTemp.value.filter(file => 
+    !file.error && file.status !== 'removed' && file.status !== 'canceled'
+  );
+  
+  if (validFiles.length === 0) {
+    Message.warning('请选择有效的文件');
+    return;
+  }
+  
+  // 验证文件夹ID
+  if (!uploadForm.folderId) {
+    Message.warning('请选择目标文件夹');
+    return;
+  }
+  
+  uploading.value = true;
+  let hasError = false;
+  let hasFileExists = false;
+  
+  for (const fileItem of validFiles) {
+      // 获取原始File对象
+      const realFile = fileItem.originFileObj || fileItem;
+      
+      if (!realFile) {
+        hasError = true;
+        continue;
+      }
+      
+      fileItem.status = 'uploading';
+      fileItem.percent = 0;
+      
+      // 创建取消令牌
+      const source = axios.CancelToken.source();
+      cancelTokens.value[fileItem.uid] = source;
+      
+      // 调用API
+      const result = await uploadFileApi(
+        realFile,
+        Number(uploadForm.folderId),
+        (progressEvent) => {
+          if (progressEvent.lengthComputable) {
+            fileItem.percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
+          }
+        },
+        source.token
+      );
+      
+      // 检查上传结果
+      if (result.code === 200) {
+        fileItem.status = 'success';
+        fileItem.percent = 100;
+      } else if (result.code === 400 && result.msg && result.msg.includes('已存在')) {
+        // 文件已存在的情况
+        fileItem.status = 'error';
+        fileItem.error = '文件已存在';
+        hasFileExists = true;
+      } else {
+        fileItem.status = 'error';
+        fileItem.error = result.msg || '上传失败';
+        hasError = true;
+      }
+  }
+  
+  // 根据结果显示相应的消息
+  if (hasFileExists && !hasError) {
+    Message.warning('文件已存在');
+  } else if (hasError) {
+    Message.error('上传失败');
+  } else {
+    Message.success('上传成功');
+    // 刷新当前文件夹文件列表
+    if (currentFolderId.value === uploadForm.folderId) {
+      loadFiles(currentFolderId.value);
+    }
+  }
+  
+  resetUpload();
+};
+
+// 重置上传表单
+const resetUpload = () => {
+  console.log('=== 重置上传表单 ===');
+  
+  // 取消所有正在进行的上传
+  Object.values(cancelTokens.value).forEach(source => {
+    source.cancel('上传已取消');
+  });
+  
+  // 重置所有状态
+  uploadDialogVisible.value = false;
+  uploadForm.folderId = currentFolderId.value || '';
+  fileListTemp.value = [];
+  cancelTokens.value = {};
+  uploading.value = false;
+  
+  // 清空上传组件
+  if (uploadRef.value) {
+    uploadRef.value.reset();
+    console.log('已重置上传组件');
+  }
+  
+  console.log('上传表单重置完成');
+};
+
+// 预览文件
+const handlePreview = async (file) => {
+  try {
+    console.log('开始预览文件:', file);
+    Message.loading('正在加载预览...', 0); // 显示加载提示
+    
+    const blob = await previewFileApi(file.fileId);
+    Message.clear(); // 清除加载提示
+    
+    if (!blob) {
+      Message.error('无法获取文件数据');
+      return;
+    }
+    
+    const url = URL.createObjectURL(blob);
+    const fileName = file.fileName || file.name;
+    const ext = getFileExtension(fileName).toLowerCase();
+    
+    console.log('文件扩展名:', ext);
+    
+    // 根据文件类型决定预览方式
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
+      // 图片预览 - 使用更好的图片预览组件
+      showImagePreview(url, fileName);
+    } else if (ext === 'pdf') {
+      // PDF预览（在新窗口打开）
+      window.open(url, '_blank');
+      Message.success('PDF文件已在新窗口打开');
+    } else if (['txt', 'md', 'json', 'xml', 'csv', 'log'].includes(ext)) {
+      // 文本文件预览
+      showTextPreview(blob, fileName);
+    } else if (['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(ext)) {
+      // 视频预览
+      showVideoPreview(url, fileName);
+    } else if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
+      // 音频预览
+      showAudioPreview(url, fileName);
+    } else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
+      // Office文档预览提示
+      Modal.confirm({
+        title: '文件预览',
+        content: `${fileName} 是Office文档格式，您可以选择：`,
+        okText: '下载查看',
+        cancelText: '取消',
+        onOk: () => {
+          handleDownload(file);
+        }
+      });
+    } else {
+      // 其他类型询问是否下载
+      Modal.confirm({
+        title: '文件预览',
+        content: `文件类型 ${ext.toUpperCase()} 暂不支持在线预览，是否下载查看？`,
+        okText: '下载',
+        cancelText: '取消',
+        onOk: () => {
+          handleDownload(file);
+        }
+      });
+    }
+    
+    // 延迟释放URL，确保预览组件有足够时间加载
+    setTimeout(() => {
+      URL.revokeObjectURL(url);
+    }, 10000);
+    
+  } catch (error) {
+    Message.clear(); // 清除加载提示
+    console.error('预览失败:', error);
+    
+    // 更详细的错误处理
+    if (error.response?.status === 404) {
+      Message.error('文件不存在或已被删除');
+    } else if (error.response?.status === 403) {
+      Message.error('没有权限访问该文件');
+    } else if (error.response?.status === 500) {
+      Message.error('服务器内部错误，请稍后重试');
+    } else {
+      Message.error('预览文件失败，请检查网络连接');
+    }
+  }
+};
+
+// 显示图片预览
+const showImagePreview = (url, fileName) => {
+  Modal.info({
+    title: '图片预览',
+    content: h('div', {
+      style: {
+        textAlign: 'center',
+        padding: '20px'
+      }
+    }, [
+      h('img', {
+        src: url,
+        style: {
+          maxWidth: '100%',
+          maxHeight: '70vh',
+          objectFit: 'contain'
+        }
+      })
+    ]),
+    width: '80%',
+    footer: null,
+    closable: true
+  });
+};
+
+// 显示文本预览
+const showTextPreview = async (blob, fileName) => {
+  try {
+    const text = await blob.text();
+    
+    Modal.info({
+      title: '文本预览',
+      content: h('div', {
+        style: {
+          textAlign: 'center',
+          padding: '20px'
+        }
+      }, [
+        h('div', {
+          style: {
+            maxWidth: '100%',
+            maxHeight: '70vh',
+            overflow: 'auto',
+            backgroundColor: 'var(--color-fill-1)',
+            border: '1px solid var(--color-border)',
+            borderRadius: '8px',
+            padding: '20px',
+            fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
+            fontSize: '14px',
+            lineHeight: '1.6',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            color: 'var(--color-text-1)',
+            textAlign: 'left'
+          }
+        }, text)
+      ]),
+      width: '80%',
+      footer: null,
+      closable: true
+    });
+  } catch (error) {
+    console.error('文本预览失败:', error);
+    Message.error('无法读取文本内容');
+  }
+};
+
+// 显示视频预览
+const showVideoPreview = (url, fileName) => {
+  const container = h('div', {
+    class: 'preview-container',
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '20px',
+      boxSizing: 'border-box',
+      background: '#f8fafc !important'
+    }
+  }, [
+    // 视频容器
+    h('div', {
+      style: {
+        width: '100%',
+        maxWidth: '1000px',
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        padding: '20px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid #e2e8f0',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      }
+    }, [
+      h('video', {
+        src: url,
+        controls: true,
+        style: {
+          width: '100%',
+          maxHeight: '70vh',
+          borderRadius: '8px',
+          background: '#000',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+          border: '1px solid #e2e8f0'
+        }
+      })
+    ]),
+    
+    // 文件信息栏
+    h('div', {
+      style: {
+        marginTop: '16px',
+        padding: '12px 16px',
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid #e2e8f0',
+        width: '100%',
+        maxWidth: '1000px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        fontSize: '14px',
+        color: '#2c3e50'
+      }
+    }, [
+      h('span', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
+        h('span', { style: { fontSize: '16px' } }, '🎬'),
+        fileName
+      ]),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '视频文件'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, new Date().toLocaleString('zh-CN'))
+    ])
+  ]);
+
+  Modal.info({
+    title: h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        fontSize: '16px',
+        fontWeight: '600',
+        color: '#2c3e50'
+      }
+    }, [
+      h('span', { style: { fontSize: '18px' } }, '🎬'),
+      '视频预览'
+    ]),
+    content: container,
+    width: '90%',
+    style: { 
+      maxWidth: '1200px',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
+      border: '1px solid #e2e8f0',
+      zIndex: 10000
+    },
+    mask: true,
+    maskClosable: true,
+    maskStyle: {
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: '100vw',
+      height: '100vh',
+      zIndex: 9999
+    },
+    footer: null,
+    closable: true,
+    okText: null,
+    cancelText: null
+  });
+};
+
+// 显示音频预览
+const showAudioPreview = (url, fileName) => {
+  const container = h('div', {
+    class: 'preview-container',
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '20px',
+      boxSizing: 'border-box',
+      background: '#f8fafc !important'
+    }
+  }, [
+    // 音频容器
+    h('div', {
+      style: {
+        width: '100%',
+        maxWidth: '500px',
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        padding: '32px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid #e2e8f0',
+        textAlign: 'center'
+      }
+    }, [
+      // 音频图标
+      h('div', {
+        style: {
+          fontSize: '48px',
+          marginBottom: '20px',
+          color: '#165DFF'
+        }
+      }, '��'),
+      
+      // 音频播放器
+      h('audio', {
+        src: url,
+        controls: true,
+        style: {
+          width: '100%',
+          height: '40px',
+          borderRadius: '6px',
+          marginBottom: '16px'
+        }
+      }),
+      
+      // 文件名
+      h('div', {
+        style: {
+          fontSize: '14px',
+          color: '#2c3e50',
+          wordBreak: 'break-all',
+          textAlign: 'center',
+          padding: '8px 12px',
+          backgroundColor: '#f8fafc',
+          borderRadius: '6px',
+          fontWeight: '500',
+          border: '1px solid #e2e8f0'
+        }
+      }, fileName)
+    ]),
+    
+    // 文件信息栏
+    h('div', {
+      style: {
+        marginTop: '16px',
+        padding: '12px 16px',
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid #e2e8f0',
+        width: '100%',
+        maxWidth: '500px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        fontSize: '14px',
+        color: '#2c3e50'
+      }
+    }, [
+      h('span', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
+        h('span', { style: { fontSize: '16px' } }, '🎵'),
+        fileName
+      ]),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '音频文件'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, new Date().toLocaleString('zh-CN'))
+    ])
+  ]);
+
+  Modal.info({
+    title: h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        fontSize: '16px',
+        fontWeight: '600',
+        color: '#2c3e50'
+      }
+    }, [
+      h('span', { style: { fontSize: '18px' } }, '🎵'),
+      '音频预览'
+    ]),
+    content: container,
+    width: '70%',
+    style: { 
+      maxWidth: '800px',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
+      border: '1px solid #e2e8f0',
+      zIndex: 10000
+    },
+    mask: true,
+    maskClosable: true,
+    maskStyle: {
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: '100vw',
+      height: '100vh',
+      zIndex: 9999
+    },
+    footer: null,
+    closable: true,
+    okText: null,
+    cancelText: null
+  });
+};
+
+// 下载文件
+const handleDownload = async (file) => {
+  try {
+    const blob = await downloadFileApi(file.fileId);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = file.fileName || file.name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    Message.success('开始下载');
+  } catch (error) {
+    console.error('下载失败:', error);
+    Message.error('下载文件失败');
+  }
+};
+
+// 重命名文件
+const handleEditFile = (file) => {
+  console.log('=== 重命名文件函数被调用 ===');
+  console.log('重命名文件 - 文件对象:', file);
+  console.log('文件对象的所有属性:', Object.keys(file));
+  console.log('文件属性详情:', {
+    fileId: file.fileId,
+    fileName: file.fileName,
+    name: file.name,
+    originalName: file.originalName,
+    displayName: file.displayName,
+    title: file.title
+  });
+  
+  // 尝试多种可能的文件名字段
+  let fileName = '';
+  if (file.fileName) {
+    fileName = file.fileName;
+    console.log('使用 fileName 字段:', fileName);
+  } else if (file.name) {
+    fileName = file.name;
+    console.log('使用 name 字段:', fileName);
+  } else if (file.originalName) {
+    fileName = file.originalName;
+    console.log('使用 originalName 字段:', fileName);
+  } else if (file.displayName) {
+    fileName = file.displayName;
+    console.log('使用 displayName 字段:', fileName);
+  } else if (file.title) {
+    fileName = file.title;
+    console.log('使用 title 字段:', fileName);
+  }
+  
+  console.log('最终获取到的文件名:', fileName);
+  
+  if (!fileName) {
+    console.error('无法获取文件名，文件对象:', file);
+    Message.error('无法获取文件名，请检查文件数据');
+    return;
+  }
+  
+  const fileExtension = getFileExtension(fileName);
+  const fileNameWithoutExtension = fileExtension ? fileName.substring(0, fileName.lastIndexOf('.')) : fileName;
+  
+  console.log('处理后的文件名信息:', {
+    originalName: fileName,
+    extension: fileExtension,
+    nameWithoutExtension: fileNameWithoutExtension
+  });
+  
+  // 设置重命名表单数据
+  renameFileForm.fileId = file.fileId;
+  renameFileForm.newName = fileNameWithoutExtension;
+  renameFileForm.fileExtension = fileExtension;
+  
+  console.log('设置的重命名表单数据:', renameFileForm);
+  
+  // 显示重命名弹窗
+  renameFileModalVisible.value = true;
+};
+
+// 确认重命名文件
+const confirmRenameFile = async () => {
+  if (!renameFileForm.newName.trim()) {
+    Message.warning('请输入文件名称');
+    return;
+  }
+  
+  // 使用用户输入的文件名，不添加任何扩展名
+  const newFileName = renameFileForm.newName.trim();
+  
+  try {
+    await renameFileApi(renameFileForm.fileId, newFileName);
+    Message.success('文件重命名成功');
+    renameFileModalVisible.value = false;
+    // 刷新当前文件夹的文件列表
+    if (currentFolderId.value) {
+      loadFiles(currentFolderId.value);
+    }
+  } catch (error) {
+    console.error('重命名文件失败:', error);
+    Message.error('重命名失败');
+  }
+};
+
+// 删除文件夹
+const handleDeleteFolder = (folder) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除文件夹「${folder.title || folder.name}」吗？删除后无法恢复，文件夹内的所有文件也将被删除。`,
+    onOk: async () => {
+      try {
+        const result = await deleteFolderApi(folder.key || folder.id);
+        if (result.code === 200) {
+          Message.success('文件夹删除成功');
+          // 如果删除的是当前选中的文件夹，切换到根目录
+          if (currentFolderId.value === (folder.key || folder.id)) {
+            currentFolderId.value = '0';
+            // 移除对currentFolderName的设置，现在使用面包屑导航
+            // currentFolderName.value = '根目录';
+            fileList.value = [];
+            totalFiles.value = 0;
+          }
+          // 刷新文件夹列表
+          initData();
+        } else {
+          Message.error(result.msg || '删除失败');
+        }
+      } catch (error) {
+        console.error('删除文件夹失败:', error);
+        Message.error('删除失败');
+      }
+    }
+  });
+};
+
+// 删除文件
+const handleDelete = (file) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除 ${file.fileName || file.name} 吗？`,
+    onOk: async () => {
+      try {
+        const result = await deleteFileApi(file.fileId);
+        if (result.code === 200) {
+          Message.success('删除成功');
+          loadFiles(currentFolderId.value);
+        } else {
+          Message.error(result.msg || '删除失败');
+        }
+      } catch (error) {
+        console.error('删除失败:', error);
+        Message.error('删除失败');
+      }
+    }
+  });
+};
+
+// 格式化文件大小
+const formatFileSize = (fileSize) => {
+  const size = Number(fileSize);
+  if (isNaN(size) || size < 0) return '未知';
+  
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+};
+
+// 专门用于文件列表的格式化函数（假设后端返回的是KB单位）
+const formatFileListSize = (fileSize) => {
+  const size = Number(fileSize);
+  if (isNaN(size) || size < 0) return '未知';
+  
+  // 假设后端返回的是KB单位
+  if (size < 1024) {
+    return `${size} KB`;
+  } else if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} MB`;
+  } else {
+    return `${(size / (1024 * 1024)).toFixed(1)} GB`;
+  }
+};
+
+
+
+const fileTypeText = (type) => {
+  const types = {
+    pdf: 'PDF文档',
+    doc: 'Word文档',
+    docx: 'Word文档',
+    xls: 'Excel表格',
+    xlsx: 'Excel表格',
+    ppt: 'PPT演示',
+    pptx: 'PPT演示',
+    zip: '压缩文件',
+    txt: '文本文件',
+    // 图片格式
+    jpg: 'JPG图片',
+    jpeg: 'JPEG图片',
+    png: 'PNG图片',
+    gif: 'GIF图片',
+    bmp: 'BMP图片',
+    webp: 'WebP图片',
+    unknown: '未知类型'
+  };
+  
+  return types[type] || type;
+};
+
+// 侧边栏控制
+const sidebarCollapsed = ref(false);
+
+// 打开新建文件夹对话框
+const handleCreateFolder = () => {
+  folderForm.id = '';
+  folderForm.name = '';
+  folderForm.parentId = currentFolderId.value || '0';
+  folderDialogVisible.value = true;
+};
+
+// 打开上传文件对话框
+const handleUploadFile = () => {
+  // 清空文件列表，避免显示之前上传的文件
+  fileListTemp.value = [];
+  
+  // 重置上传组件状态
+  if (uploadRef.value) {
+    try {
+      uploadRef.value.reset();
+      // 强制清空组件的内部文件列表
+      if (uploadRef.value.fileList) {
+        uploadRef.value.fileList = [];
+      }
+      if (uploadRef.value.fileListTemp) {
+        uploadRef.value.fileListTemp = [];
+      }
+    } catch (error) {
+      console.log('重置上传组件时出错:', error);
+    }
+  }
+  
+  uploadForm.folderId = currentFolderId.value || '';
+  uploadDialogVisible.value = true;
+};
+
+// 侧边栏控制函数
+const handleSidebarCollapse = (collapsed) => {
+  sidebarCollapsed.value = collapsed;
+};
+
+const handleSidebarExpand = (collapsed) => {
+  sidebarCollapsed.value = collapsed;
+};
+
+// 监听文件夹ID变化，自动加载文件
+watch(currentFolderId, (newId) => {
+  if (newId) {
+    loadFiles(newId);
+  }
+});
+
+// 监听上传对话框显示状态，确保文件列表清空
+watch(uploadDialogVisible, (visible) => {
+  if (visible) {
+    console.log('=== 上传对话框已显示，确保文件列表清空 ===');
+    // 立即清空文件列表
+    fileListTemp.value = [];
+    console.log('✅ 已清空文件列表');
+    
+    // 强制重置上传组件
+    if (uploadRef.value) {
+      try {
+        uploadRef.value.reset();
+        // 强制清空组件的内部文件列表
+        if (uploadRef.value.fileList) {
+          uploadRef.value.fileList = [];
+        }
+        if (uploadRef.value.fileListTemp) {
+          uploadRef.value.fileListTemp = [];
+        }
+        console.log('✅ 已重置上传组件');
+      } catch (error) {
+        console.log('❌ 重置上传组件时出错:', error);
+      }
+    }
+    
+    // 延迟再次清空，确保处理完所有可能的触发
+    setTimeout(() => {
+      fileListTemp.value = [];
+      console.log('✅ 延迟清空文件列表');
+    }, 100);
+  }
+});
+
+
+
+// 初始化加载
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style scoped>
+.knowledge-container {
+  height: 100vh;
+  background-color: var(--color-bg-1);
+}
+
+/* 侧边栏样式 */
+.folder-sidebar {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border-right: 1px solid var(--color-border);
+  transition: all 0.3s ease;
+  overflow: hidden;
+  position: relative;
+  background: var(--color-bg-1);
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  padding: 20px 16px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-1);
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent 0%, var(--color-border) 50%, transparent 100%);
+  }
+}
+
+.folder-content {
+  padding: 16px 0;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  background: var(--color-bg-1);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: calc(100vh - 200px);
+}
+
+
+
+.folder-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.folder-content::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.folder-content::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, var(--color-primary-light-2) 0%, var(--color-primary) 100%);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  &:hover {
+    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark-1) 100%);
+  }
+}
+
+.folder-list {
+  border: none;
+  background: transparent;
+  padding: 0 16px;
+}
+
+/* 文件夹列表项样式 */
+.folder-list-item {
+  padding: 12px 16px;
+  margin-bottom: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid transparent;
+  
+  &:hover {
+    background: linear-gradient(135deg, var(--color-fill-2) 0%, var(--color-fill-3) 100%);
+    border-color: var(--color-primary-light-2);
+    transform: translateX(2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+  
+  &.active {
+    background: linear-gradient(135deg, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 100%);
+    color: var(--color-primary);
+    font-weight: 500;
+    border-color: var(--color-primary);
+    box-shadow: 0 2px 12px rgba(var(--color-primary-6), 0.2);
+  }
+}
+
+/* 文件夹主要信息样式 */
+.folder-main-info {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.folder-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 12px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 文件夹操作按钮样式 */
+.folder-actions-row {
+  display: flex;
+  gap: 6px;
+  width: 100%;
+  justify-content: flex-end;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.folder-list-item:hover .folder-actions-row {
+  opacity: 1;
+}
+
+.folder-actions .action-btn {
+  width: 28px;
+  height: 28px;
+  color: var(--color-text-3);
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    color: var(--color-primary);
+    background: var(--color-fill-3);
+    transform: scale(1.1);
+  }
+}
+
+/* 删除旧的span样式，因为现在使用.folder-name */
+
+/* 顶部导航样式 */
+.file-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24px;
+  background: var(--color-bg-1);
+  border-bottom: 1px solid var(--color-border);
+  height: 64px;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 文件内容区域样式 */
+.file-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  background: var(--color-bg-1);
+  min-height: 0;
+  max-height: calc(100vh - 120px);
+  position: relative;
+}
+
+.file-card {
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  padding-bottom: 80px; /* 为分页器留出空间 */
+}
+
+/* 表格容器 */
+.file-grid-container {
+  flex: 1;
+  width: 100%;
+  margin-top: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  overflow-y: auto;
+  background-color: var(--color-bg-1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  margin-bottom: 0;
+  min-height: 300px;
+  max-height: calc(100vh - 380px); /* 调整高度为分页器留出空间 */
+}
+
+/* 表头行样式 */
+.table-header-row {
+  padding: 0 16px;
+  height: 48px;
+  line-height: 48px;
+  background-color: var(--color-fill-1);
+  border-bottom: 1px solid var(--color-border);
+  font-size: 13px;
+  color: var(--color-text-3);
+  font-weight: 500;
+}
+
+/* 数据行样式 */
+.table-data-row {
+  display: flex;
+  padding: 0 16px;
+  height: 64px;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  background-color: var(--color-bg-1);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:hover {
+    background-color: rgba(22, 93, 255, 0.1);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  }
+}
+
+/* 通用列样式 */
+.table-column {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0 8px;
+}
+
+.cell-content {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.name-column {
+  padding: 0 14px;
+  justify-content: flex-start !important;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.file-icon {
+  font-size: 20px;
+  margin-right: 12px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.folder-icon {
+  color: var(--color-primary);
+  background-color: var(--color-primary-light-1);
+}
+
+.file-name {
+  font-size: 14px;
+  font-weight: 500;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.2s ease;
+}
+
+.table-data-row:hover .file-name {
+  color: var(--color-primary);
+}
+
+.type-column, .size-column, .time-column {
+  color: var(--color-text-3);
+  font-size: 14px;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+}
+
+.action-column {
+  justify-content: center;
+}
+
+.file-main {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.file-icon-large {
+  font-size: 24px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.file-name-wrap {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.file-name {
+  margin: 0;
+  font-size: 14px;
+  color: var(--color-text-1);
+  transition: color 0.2s;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  
+  .table-data-row:hover & {
+    color: var(--color-primary);
+  }
+}
+
+.file-name-small {
+  font-size: 14px;
+  color: var(--color-text-4);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+/* 操作按钮区域 */
+.file-actions {
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+}
+
+.action-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text-3);
+  
+  &:hover {
+    background: var(--color-fill-3);
+    color: var(--color-primary);
+  }
+}
+
+.delete-btn {
+  &:hover {
+    color: var(--color-danger);
+    background-color: rgba(255, 77, 77, 0.05);
+  }
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .name-column { 
+    flex: 0 0 35% !important; 
+    max-width: 35% !important; 
+  }
+  .time-column { 
+    flex: 0 0 20% !important; 
+    max-width: 20% !important; 
+  }
+}
+
+@media (max-width: 992px) {
+  .name-column { 
+    flex: 0 0 45% !important; 
+    max-width: 45% !important; 
+  }
+  .type-column { 
+    flex: 0 0 20% !important; 
+    max-width: 20% !important; 
+  }
+  .time-column { 
+    display: none; 
+  }
+  .action-column { 
+    flex: 0 0 35% !important; 
+    max-width: 35% !important; 
+  }
+  .file-actions { 
+    justify-content: flex-end; 
+  }
+}
+
+@media (max-width: 768px) {
+  .size-column, .time-column { 
+    display: none; 
+  }
+  .type-column { 
+    flex: 0 0 25% !important; 
+    max-width: 25% !important; 
+  }
+  .name-column { 
+    flex: 0 0 45% !important; 
+    max-width: 45% !important; 
+  }
+  .action-column { 
+    flex: 0 0 30% !important; 
+    max-width: 30% !important; 
+  }
+  .file-content { 
+    padding: 12px; 
+  }
+  .file-grid-container { 
+    overflow-x: auto; 
+    -webkit-overflow-scrolling: touch; 
+  }
+}
+
+@media (max-width: 576px) {
+  .type-column { 
+    display: none; 
+  }
+  .name-column { 
+    flex: 0 0 60% !important; 
+    max-width: 60% !important; 
+  }
+  .action-column { 
+    flex: 0 0 40% !important; 
+    max-width: 40% !important; 
+  }
+  .file-header { 
+    padding: 0 12px; 
+    flex-wrap: wrap; 
+  }
+  .breadcrumbs { 
+    margin-bottom: 8px; 
+    width: 100%; 
+  }
+  .file-card { 
+    min-height: auto; 
+  }
+}
+
+/* 浏览器缩放调整 */
+@media (max-height: 800px) {
+  .folder-content {
+    max-height: calc(100vh - 180px);
+  }
+  
+  .file-content {
+    max-height: calc(100vh - 100px);
+  }
+  
+  .file-grid-container {
+    max-height: calc(100vh - 280px);
+  }
+}
+
+@media (max-height: 600px) {
+  .folder-content {
+    max-height: calc(100vh - 160px);
+  }
+  
+  .file-content {
+    max-height: calc(100vh - 80px);
+  }
+  
+  .file-grid-container {
+    max-height: calc(100vh - 260px);
+  }
+}
+
+/* 空状态样式 */
+.initial-state, .empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 0;
+  color: var(--color-text-3);
+  background-color: var(--color-fill-1);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.initial-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: var(--color-text-4);
+}
+
+:deep(.empty-state .arco-btn) {
+  margin-top: 16px;
+  padding: 8px 16px;
+  background-color: var(--color-primary);
+  color: white;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 500;
+}
+
+:deep(.empty-state .arco-btn:hover) {
+  background-color: var(--color-primary-dark-1);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.empty-state .arco-btn:active) {
+  transform: translateY(0);
+}
+
+/* 上传区域样式 */
+.upload-area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 140px;
+  border: 1px dashed var(--color-border);
+  border-radius: 4px;
+  background-color: var(--color-fill-1);
+  transition: all 0.2s;
+  cursor: pointer;
+  
+  &:hover {
+    border-color: rgb(var(--primary-6));
+    background-color: var(--color-primary-light-1);
+  }
+}
+
+.upload-icon {
+  text-align: center;
+}
+
+.upload-text {
+  margin-top: 8px;
+  color: var(--color-text-3);
+}
+
+.upload-hint {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--color-text-4);
+}
+
+/* 上传相关样式 */
+.upload-file-list {
+  margin-top: 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  overflow: hidden;
+}
+
+.upload-file-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-bottom: 1px solid var(--color-border);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:hover {
+    background-color: var(--color-fill-1);
+  }
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.file-icon {
+  font-size: 20px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.file-name {
+  flex: 1;
+  min-width: 0;
+}
+
+.name-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+
+.file-meta {
+  font-size: 12px;
+  color: var(--color-text-4);
+  margin-top: 4px;
+}
+
+.file-error {
+  color: var(--color-danger);
+  margin-left: 8px;
+}
+
+.file-progress {
+  flex: 1;
+  margin: 0 16px;
+}
+
+.file-actions {
+  flex-shrink: 0;
+}
+
+/* 分页样式 */
+.pagination-container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--color-bg-1);
+  padding: 16px 24px;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  z-index: 10;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  margin-top: 0;
+  
+  .arco-pagination {
+    margin: 0;
+    
+    .arco-pagination-item {
+      border-radius: 6px;
+      margin: 0 4px;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+      }
+      
+      &.arco-pagination-item-active {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+        color: white;
+      }
+    }
+    
+    .arco-pagination-prev,
+    .arco-pagination-next {
+      border-radius: 6px;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+      }
+    }
+    
+    .arco-pagination-size-changer {
+      margin-left: 16px;
+    }
+    
+    .arco-pagination-jumper {
+      margin-left: 16px;
+    }
+    
+    .arco-pagination-total {
+      color: var(--color-text-2);
+      font-size: 14px;
+    }
+  }
+}
+
+
+
+/* 动画效果 */
+:deep(.arco-icon-refresh.spin) {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 预览弹窗动画效果 */
+@keyframes float {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  25% { transform: translateY(-10px) rotate(1deg); }
+  50% { transform: translateY(-5px) rotate(-1deg); }
+  75% { transform: translateY(-15px) rotate(0.5deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.8; }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* 预览弹窗样式增强 */
+:deep(.arco-modal) {
+  animation: slideIn 0.2s ease-out;
+  z-index: 10000 !important;
+}
+
+/* 确保遮罩覆盖整个屏幕 */
+:deep(.arco-modal-mask) {
+  animation: fadeIn 0.2s ease;
+  background-color: rgba(0, 0, 0, 0.6) !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  outline: none !important;
+  box-sizing: border-box !important;
+}
+
+:deep(.arco-modal-content) {
+  border-radius: 8px !important;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
+  border: 1px solid #e2e8f0 !important;
+  background: #ffffff !important;
+}
+
+:deep(.arco-modal-body) {
+  background: #f8fafc !important;
+  padding: 0 !important;
+}
+
+/* 强制覆盖所有可能的背景样式 */
+:deep(.arco-modal-body > div) {
+  background: #f8fafc !important;
+}
+
+:deep(.arco-modal-body > div > div) {
+  background: #f8fafc !important;
+}
+
+/* 确保预览弹窗内容区域使用正确的背景 */
+:deep(.arco-modal-body .preview-container) {
+  background: #f8fafc !important;
+}
+
+/* 强制覆盖所有预览弹窗的背景 */
+:deep(.arco-modal-body) {
+  background: #f8fafc !important;
+}
+
+:deep(.arco-modal-body > *) {
+  background: #f8fafc !important;
+}
+
+/* 确保没有渐变背景 */
+:deep(.arco-modal-body *[style*="linear-gradient"]) {
+  background: #f8fafc !important;
+}
+
+:deep(.arco-modal-header) {
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 16px 20px;
+}
+
+:deep(.arco-modal-title) {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 16px;
+}
+
+:deep(.arco-modal-close) {
+  background: #f8fafc;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  border: 1px solid #e2e8f0;
+  
+  &:hover {
+    background: var(--color-fill-2);
+    color: var(--color-primary);
+  }
+}
+
+/* 按钮悬停效果增强 */
+:deep(.arco-btn) {
+  transition: all 0.2s ease;
+  
+  &:hover {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+/* 骨架屏样式 */
+.skeleton-item {
+  height: 36px;
+  margin: 4px 16px;
+  border-radius: 4px;
+  background-color: var(--color-fill-2);
+}
+
+.file-skeleton-item {
+  height: 60px;
+  margin: 8px 0;
+  border-radius: 4px;
+  background-color: var(--color-fill-2);
+}
+
+/** 文件夹样式 **/
+.folder-icon-wrapper {
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background: linear-gradient(135deg, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 100%);
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.folder-icon {
+  font-size: 14px;
+  color: var(--color-primary);
+  transition: all 0.3s ease;
+}
+
+.folder-list-item:hover .folder-icon-wrapper {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(var(--color-primary-6), 0.2);
+}
+
+.folder-list-item.active .folder-icon-wrapper {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark-1) 100%);
+  box-shadow: 0 2px 8px rgba(var(--color-primary-6), 0.3);
+}
+
+.folder-list-item.active .folder-icon {
+  color: white;
+}
+
+/* 文件夹操作按钮样式 */
+.folder-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.folder-list-item:hover .folder-actions {
+  opacity: 1;
+}
+
+.action-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-btn:hover {
+  background-color: var(--color-fill-3);
+}
+
+/* 确保在折叠状态下不显示操作按钮 */
+:deep(.folder-sidebar.collapsed) .folder-actions-row {
+  display: none;
+}
+
+/* 新建文件夹按钮美化 */
+.create-folder-btn {
+  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
+  border: none;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+/* 搜索输入框美化 */
+.search-input {
+  :deep(.arco-input-wrapper) {
+    border-radius: 8px;
+    border: 1px solid var(--color-border);
+    transition: all 0.3s ease;
+    background: rgba(var(--color-bg-1-rgb), 0.9);
+    
+    &:hover {
+      border-color: var(--color-primary-light-2);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    }
+    
+    &:focus-within {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px rgba(var(--color-primary-6), 0.1);
+    }
+  }
+}
+
+/* 搜索结果提示样式 */
+.search-result-tip {
+  padding: 12px 16px;
+  margin: 12px 16px;
+  background: linear-gradient(135deg, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 100%);
+  border-radius: 8px;
+  border-left: 4px solid var(--color-primary);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent 30%, rgba(var(--color-bg-1-rgb), 0.1) 50%, transparent 70%);
+    animation: shimmer 2s infinite;
+  }
+}
+
+/* 上传文件相关样式 */
+.upload-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.upload-btn {
+  align-self: flex-start;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+  }
+}
+
+.upload-hint {
+  color: var(--color-text-3);
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 8px 12px;
+  background: var(--color-fill-2);
+  border-radius: 6px;
+  border-left: 3px solid var(--color-primary-light-3);
+}
+
+.upload-file-list {
+  margin-top: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-bg-1);
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.upload-file-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border);
+  transition: all 0.2s ease;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:hover {
+    background: var(--color-fill-1);
+  }
+  
+  &.file-error {
+    background: rgba(255, 77, 79, 0.05);
+    border-left: 3px solid #ff4d4f;
+  }
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 12px;
+  min-width: 0;
+}
+
+.file-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.file-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name {
+  font-weight: 500;
+  color: var(--color-text-1);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-meta {
+  font-size: 12px;
+  color: var(--color-text-3);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.error-text {
+  color: #ff4d4f;
+  font-weight: 500;
+}
+
+.file-progress {
+  margin: 0 16px;
+  min-width: 120px;
+}
+
+.file-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.remove-btn {
+  color: var(--color-text-3);
+  
+  &:hover {
+    color: #ff4d4f;
+    background: rgba(255, 77, 79, 0.1);
+  }
+}
+
+.cancel-btn {
+  color: var(--color-text-3);
+  
+  &:hover {
+    color: #faad14;
+    background: rgba(250, 173, 20, 0.1);
+  }
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* 文件头部容器样式 */
+.file-header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 16px 0;
+}
+
+.file-title {
+  display: flex;
+  align-items: center;
+}
+
+.file-list-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin: 0;
+}
+
+/* 文件搜索样式 */
+.file-search-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.file-search-input {
+  max-width: 300px;
+  transition: all 0.3s ease;
+  
+  &:focus-within {
+    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
+  }
+}
+
+/* 可排序表头样式 */
+.sortable-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.sortable-header:hover {
+  background: var(--color-fill-2);
+  color: var(--color-primary);
+}
+
+.sort-indicator {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-left: 4px;
+}
+
+.sort-arrow {
+  width: 0;
+  height: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.sort-arrow.up {
+  border-bottom: 3px solid var(--color-text-4);
+}
+
+.sort-arrow.down {
+  border-top: 3px solid var(--color-text-4);
+}
+
+.sort-arrow.active {
+  border-bottom-color: var(--color-primary);
+  border-top-color: var(--color-primary);
+}
+
+.sortable-header:hover .sort-arrow.up {
+  border-bottom-color: var(--color-primary);
+}
+
+.sortable-header:hover .sort-arrow.down {
+  border-top-color: var(--color-primary);
+}
+
+
+
+/* 树形文件夹结构 */
+.folder-tree-container {
+  padding: 8px;
+  background: var(--color-bg-1);
+  border-radius: 6px;
+  margin: 8px;
+  overflow: hidden;
+}
+
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px 0;
+}
+
+.folder-name {
+  flex: 1;
+  margin-left: 4px;
+  font-size: 14px;
+  color: var(--color-text-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.folder-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.tree-node-content:hover .folder-actions {
+  opacity: 1;
+}
+
+.folder-actions .action-btn {
+  width: 20px;
+  height: 20px;
+  color: var(--color-text-3);
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    color: var(--color-primary);
+    background: var(--color-fill-3);
+    transform: scale(1.1);
+  }
+}
+
+.folder-tree {
+  :deep(.arco-tree-node-content) {
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+    
+    &:hover {
+      background-color: var(--color-fill-2);
+    }
+  }
+  
+  :deep(.arco-tree-node-selected .arco-tree-node-content) {
+    background-color: var(--color-primary-light-1);
+    color: var(--color-primary);
+  }
+  
+  :deep(.arco-tree-node-indent) {
+    padding-left: 8px;
+  }
+  
+  &.collapsed {
+    :deep(.arco-tree-node-content) {
+      padding: 8px 4px;
+      justify-content: center;
+    }
+    
+    :deep(.arco-tree-node-title) {
+      display: none;
+    }
+    
+    :deep(.arco-tree-node-switcher) {
+      display: none;
+    }
+    
+    :deep(.arco-tree-node-indent) {
+      display: none;
+    }
+  }
+}
+
+/* 面包屑导航样式 */
+.breadcrumbs {
+  .clickable {
+    cursor: pointer;
+    color: var(--color-primary);
+    transition: color 0.2s ease;
+    
+    &:hover {
+      color: var(--color-primary-light-1);
+      text-decoration: underline;
+    }
+  }
+}
+</style>