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/equipment/type.ts b/src/apis/equipment/type.ts
index f9bf6d9..1e2403f 100644
--- a/src/apis/equipment/type.ts
+++ b/src/apis/equipment/type.ts
@@ -457,6 +457,7 @@ export interface ReceiptRequest {
     useStatus?: string
     healthStatus?: string
     receiptStatus?: string
+    paymentStatus?: string
     
     // 其他管理信息
     depreciationMethod?: string
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/apis/project/index.ts b/src/apis/project/index.ts
index bde6b8a..3471f0c 100644
--- a/src/apis/project/index.ts
+++ b/src/apis/project/index.ts
@@ -15,6 +15,12 @@ export function getProject(id: string | number) {
   return http.get<T.ProjectResp>(`${BASE_URL}/${id}`)
 }
 
+/** @desc 获取项目详情（标准详情接口） */
+export function getProjectDetail(id: string | number) {
+  return http.get<T.ProjectResp>(`${BASE_URL}/detail/${id}`)
+}
+
+
 /** @desc 新增项目 */
 export function addProject(data: any) {
   return http.post(`${BASE_URL}`, data)
@@ -49,4 +55,4 @@ export function importProject(file: File) {
 /** @desc 导出项目 */
 export function exportProject(query: T.ProjectQuery) {
   return http.download(`${BASE_URL}/export`, query)
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/NotificationCenter/index.vue b/src/components/NotificationCenter/index.vue
index 7fb4ccf..7230f61 100644
--- a/src/components/NotificationCenter/index.vue
+++ b/src/components/NotificationCenter/index.vue
@@ -19,7 +19,7 @@
       :mask-closable="true"
       :closable="true"
       :destroy-on-close="false"
-      :z-index="999999"
+      :z-index="1000"
       class="notification-modal"
     >
       <!-- 消息中心头部 -->
@@ -673,7 +673,7 @@ defineExpose({
 <style scoped lang="scss">
 .notification-center {
   position: relative;
-  z-index: 999999;
+  z-index: 1000;
   
   .notification-trigger {
     cursor: pointer;
@@ -699,15 +699,15 @@ defineExpose({
 // 消息中心弹窗样式
 .notification-modal {
   :deep(.arco-modal) {
-    z-index: 999999 !important;
+    z-index: 1000 !important;
   }
   
   :deep(.arco-modal-mask) {
-    z-index: 999998 !important;
+    z-index: 999 !important;
   }
   
   :deep(.arco-modal-wrapper) {
-    z-index: 999999 !important;
+    z-index: 1000 !important;
   }
 }
 
@@ -858,37 +858,37 @@ defineExpose({
   padding: 16px;
 }
 
-// 确保弹窗在最上层
+// 确保弹窗在普通层级
 :deep(.arco-modal) {
-  z-index: 999999 !important;
+  z-index: 1000 !important;
 }
 
 :deep(.arco-modal-mask) {
-  z-index: 999998 !important;
+  z-index: 999 !important;
 }
 
 :deep(.arco-modal-wrapper) {
-  z-index: 999999 !important;
+  z-index: 1000 !important;
 }
 
 // 针对Arco Design v2的样式
 :deep(.arco-overlay) {
-  z-index: 999999 !important;
+  z-index: 1000 !important;
 }
 
 :deep(.arco-overlay-container) {
-  z-index: 999999 !important;
+  z-index: 1000 !important;
 }
 
-// 确保消息中心弹窗不被其他元素遮挡
+// 确保消息中心弹窗在普通层级
 :deep(.arco-modal) {
-  z-index: 999999 !important;
+  z-index: 1000 !important;
   position: relative !important;
 }
 
-// 强制设置最高优先级
+// 强制设置普通优先级
 :deep(.arco-modal-wrapper) {
-  z-index: 999999 !important;
+  z-index: 1000 !important;
   position: relative !important;
 }
 </style>
diff --git a/src/router/route.ts b/src/router/route.ts
index c7279f4..c632539 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -906,12 +906,61 @@ export const systemRoutes: RouteRecordRaw[] = [
       },
     ],
   },
-  // start
+  
+  {
+    path: '/construction-operation-platform',
+    name: 'ConstructionOperationPlatform',
+    component: Layout,
+    redirect: '/construction-operation-platform/implementation-workflow/field-construction',
+    meta: { title: '我的工作台', icon: 'tool', hidden: false, sort: 5 },
+    children: [
+      // {
+      //   path: '/construction-operation-platform/implementation-workflow',
+      //   name: 'ImplementationWorkflow',
+      //   component: () => import('@/components/ParentView/index.vue'),
+      //   redirect: '/construction-operation-platform/implementation-workflow/field-construction',
+      //   meta: { title: '项目实施工作流程', icon: 'fork', hidden: false },
+      //   children: [
+      {
+        path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/attachment',
+        name: 'AttachmentManagement',
+        component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/data-storage/index.vue'),
+        meta: { title: '附件管理', icon: 'attachment', hidden: false },
+      },
+      {
+        path: '/construction-operation-platform/implementation-workflow/data-processing/model-config',
+        name: 'ModelConfig',
+        component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/model-config/index.vue'),
+        meta: { title: '模型配置', icon: 'robot', hidden: false },
+      },
+      {
+        path: '/construction-operation-platform/implementation-workflow/field-construction',
+        name: 'FieldConstruction',
+        component: () => import('@/components/ParentView/index.vue'),
+        redirect: '/construction-operation-platform/implementation-workflow/field-construction/project-list',
+        meta: { title: '我的项目', icon: 'construction', hidden: false },
+        children: [
+          {
+            path: '/project-management/projects/list',
+            name: 'ProjectList',
+            component: () => import('@/views/project-management/projects/list/index.vue'),
+            meta: {
+              title: '项目列表',
+              icon: 'unordered-list',
+              hidden: false,
+            },
+          },
+          {
+            path: '/construction-operation-platform/implementation-workflow/field-construction/technology',
+            name: 'FieldConstructionTechnology',
+            component: () => import('@/views/project-operation-platform/implementation-workflow/field-construction/project-list/index.vue'),
+            meta: { title: '我的施工', icon: 'tool', hidden: false },
+          },
+          // start
   // 数据管理
   {
     path: '/data-management',
     name: 'DataManagement',
-    component: Layout,
     redirect: '/data-management/project-management/project-template',
     meta: { title: '数据管理', icon: 'database', hidden: false, sort: 4 },
     children: [
@@ -1027,55 +1076,6 @@ export const systemRoutes: RouteRecordRaw[] = [
     ],
   },
   // end
-  {
-    path: '/construction-operation-platform',
-    name: 'ConstructionOperationPlatform',
-    component: Layout,
-    redirect: '/construction-operation-platform/implementation-workflow/field-construction',
-    meta: { title: '我的工作台', icon: 'tool', hidden: false, sort: 5 },
-    children: [
-      // {
-      //   path: '/construction-operation-platform/implementation-workflow',
-      //   name: 'ImplementationWorkflow',
-      //   component: () => import('@/components/ParentView/index.vue'),
-      //   redirect: '/construction-operation-platform/implementation-workflow/field-construction',
-      //   meta: { title: '项目实施工作流程', icon: 'fork', hidden: false },
-      //   children: [
-      {
-        path: '/construction-operation-platform/implementation-workflow/data-processing/data-storage/attachment',
-        name: 'AttachmentManagement',
-        component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/data-storage/index.vue'),
-        meta: { title: '附件管理', icon: 'attachment', hidden: false },
-      },
-      {
-        path: '/construction-operation-platform/implementation-workflow/data-processing/model-config',
-        name: 'ModelConfig',
-        component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/model-config/index.vue'),
-        meta: { title: '模型配置', icon: 'robot', hidden: false },
-      },
-      {
-        path: '/construction-operation-platform/implementation-workflow/field-construction',
-        name: 'FieldConstruction',
-        component: () => import('@/components/ParentView/index.vue'),
-        redirect: '/construction-operation-platform/implementation-workflow/field-construction/project-list',
-        meta: { title: '我的项目', icon: 'construction', hidden: false },
-        children: [
-          {
-            path: '/project-management/projects/list',
-            name: 'ProjectList',
-            component: () => import('@/views/project-management/projects/list/index.vue'),
-            meta: {
-              title: '项目列表',
-              icon: 'unordered-list',
-              hidden: false,
-            },
-          },
-          {
-            path: '/construction-operation-platform/implementation-workflow/field-construction/technology',
-            name: 'FieldConstructionTechnology',
-            component: () => import('@/views/project-operation-platform/implementation-workflow/field-construction/project-list/index.vue'),
-            meta: { title: '我的施工', icon: 'tool', hidden: false },
-          },
           {
             path: '/construction-operation-platform/implementation-workflow/project-delivery',
             name: 'ProjectDelivery',
@@ -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,47 +1198,162 @@ export const systemRoutes: RouteRecordRaw[] = [
       },
     ],
   },
+  // 数据管理模块
   {
-    path: '/chat-platform',
-    name: 'ChatPlatform',
+    path: '/data-management',
+    name: 'dataManagement',
     component: Layout,
-    redirect: '/chat-platform/options',
-    meta: { title: '聊天平台', icon: 'message', hidden: false, sort: 6 },
+    redirect: '/data-management/data',
+    meta: { title: '数据管理', icon: 'database', hidden: false, sort: 5.6 },
     children: [
-      // {
-      //   path: '/chat-platform/options',
-      //   name: 'ChatOptions',
-      //   component: () => import('@/views/default/redirect/index.vue'), // 临时使用一个组件，实际开发中需要替换
-      //   meta: {
-      //     title: '二级选项1',
-      //     icon: 'setting',
-      //     hidden: false
-      //   }
-      // }
+      {
+        path: '/data-management/data',
+        name: 'data-management',
+        component: () => import('@/views/data/data.vue'),
+        meta: {
+          title: '数据管理',
+          icon: 'database',
+          hidden: false,
+        },
+      },
     ],
   },
+  {
+  path: '/image-detection',
+  name: 'ImageDetection',
+  component: Layout,
+  redirect: '/Image-detection/tower-monitoring/clearance-monitoring',
+  meta: {
+    title: '图像检测',
+    icon: 'monitor',
+    hidden: false,
+    sort: 6.5,
+    },
+  
+    children: [
+      {
+        path: '/image-detection/image-analysis',
+      name: 'ImageAnalysis',
+        component: () => import('@/components/ParentView/index.vue'),
+      meta: {
+        title: '检查图像分析',
+        icon: 'line-chart',
+        hidden: false,
+        },
+      redirect: '/image-detection/image-analysis/defect-detection',
+        children: [
+        {path: '/image-detection/image-analysis/defect-detection',
+      name: 'DefectDetection',
+      component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/defect-algorithm/index.vue'),
+      meta: {
+        title: '缺陷检测',
+        icon: 'line-chart',
+        hidden: false,
+            }
+          },
+          {path: '/image-detection/image-analysis/defect-edit',
+      name: 'DefectEdit',
+      component: () => import('@/components/ParentView/index.vue'),
+      meta: {
+        title: '缺陷编辑',
+        icon: 'line-chart',
+        hidden: false,
+            }
+          },
+          {path: '/image-detection/image-analysis/generate-reports',
+      name: 'GenerateReports',
+      component: () => import('@/views/project-operation-platform/data-processing/report-generation/index.vue'),
+      meta: {
+        title: '生成报告',
+        icon: 'line-chart',
+        hidden: false,
+            }
+          },
+          {path: '/image-detection/image-analysis/defect-base',
+      name: 'DefectBase',
+      component: () => import('@/views/project-operation-platform/data-processing/standard-info/index.vue'),
+      meta: {
+        title: '缺陷标准数据信息库',
+        icon: 'line-chart',
+        hidden: false,
+            }
+          },
+      ]
+      },
+      {
+  path: '/tower-monitoring',
+  name: 'TowerMonitoring',
+  component: () => import('@/components/ParentView/index.vue'),
+  redirect: '/tower-monitoring/clearance-monitoring',
+  meta: {
+    title: '音视频检测',
+    icon: 'monitor',
+    hidden: false,
+    sort: 6.5,
+  },
+  children: [
+    {
+      path: '/tower-monitoring/clearance-monitoring',
+      name: 'ClearanceMonitoring',
+      component: () => import('@/views/tower-monitoring/deformation.vue'),
+      meta: {
+        title: '净空监测',
+        icon: 'fullscreen',
+        hidden: false,
+      },
+    },
+    {
+      path: '/tower-monitoring/deformation-monitoring',
+      name: 'DeformationMonitoring',
+      component: () => import('@/views/tower-monitoring/clearance.vue'),
+      meta: {
+        title: '形变监测',
+        icon: 'line-chart',
+        hidden: false,
+      },
+    },
+    {
+      path: '/tower-monitoring/whistle-monitoring',
+      name: 'WhistleMonitoring',
+      component: () => import('@/views/tower-monitoring/whistle.vue'),
+      meta: {
+        title: '哨声监测',
+        icon: 'sound',
+        hidden: false,
+      },
+    },
+    {
+      path: '/tower-monitoring/vibration-monitoring',
+      name: 'VibrationMonitoring',
+      component: () => import('@/views/tower-monitoring/vibration.vue'),
+      meta: {
+        title: '振动监测',
+        icon: 'shake',
+        hidden: false,
+      },
+    },
+  ],
+      },
+      {
+        path: '/image-detection/reporting-center',
+        name: 'ReportingCenter',
+        component: () => import('@/views/tower-monitoring/vibration.vue'),
+        meta: {
+        title: '报告中心',
+        icon: 'shake',
+        hidden: false,
+      },
+      }
+    ]
+},
+
   // {
-  //   path: '/user/profile',
-  //   name: 'UserProfile',
+  //   path: '/chat-platform',
+  //   name: 'ChatPlatform',
   //   component: Layout,
-  //   redirect: '/user/profile',
-  //   meta: {
-  //     title: '个人中心',
-  //     icon: 'user',
-  //     hidden: false,
-  //     sort: 100,
-  //   },
+  //   redirect: '/chat-platform/options',
+  //   meta: { title: '聊天平台', icon: 'message', hidden: false, sort: 6 },
   //   children: [
-  //     {
-  //       path: '/user/profile',
-  //       name: 'UsersProfile',
-  //       component: () => import('@/views/user/profile/index.vue'),
-  //       meta: {
-  //         title: '个人中心',
-  //         icon: 'user',
-  //         hidden: false,
-  //       },
-  //     },
   //   ],
   // },
   {
diff --git a/src/views/bussiness-data/bussiness.vue b/src/views/bussiness-data/bussiness.vue
index 550c414..9cebdba 100644
--- a/src/views/bussiness-data/bussiness.vue
+++ b/src/views/bussiness-data/bussiness.vue
@@ -2,7 +2,7 @@
   <a-layout class="knowledge-container">
     <!-- 侧边栏 -->
     <a-layout-sider 
-      :width="sidebarWidth"
+      width="260"
       :collapsed-width="80"
       theme="dark" 
       class="folder-sidebar"
@@ -101,58 +101,274 @@
         </div>
       </div>
 
-              <!-- 拖拽分隔线 -->
-      <div 
-        v-if="!sidebarCollapsed"
-        class="sidebar-resizer"
-        @mousedown="startResize"
-        @touchstart="startResize"
-        :title="`当前宽度: ${sidebarWidth}px (拖拽调整)`"
-      >
-        <div class="resizer-handle"></div>
-      </div>
+
     </a-layout-sider>
 
     <a-layout>
-      <a-layout-header>
-        <FileHeader
-          :breadcrumb-path="breadcrumbPath"
-          :refreshing="refreshing"
-          @breadcrumb-click="handleBreadcrumbClick"
-          @refresh="refreshData"
-          @upload="handleUploadFile"
-          @create-folder="handleCreateFolder"
-        />
+      <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">
-          <FileList
-            :files="fileList"
-            :loading="loading"
-            :current-folder-id="currentFolderId"
-            :sort-field="sortField"
-            :sort-order="sortOrder"
-            @file-search="handleFileSearch"
-            @file-search-input="handleFileSearchInput"
-            @file-search-clear="handleFileSearchClear"
-            @sort-change="handleSortChange"
-            @file-preview="handlePreview"
-            @file-download="handleDownload"
-            @file-edit="handleEditFile"
-            @file-delete="handleDelete"
-            @upload="handleUploadFile"
-          />
+          <!-- 文件列表标题和搜索框在同一行 -->
+          <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>
 
           <!-- 文件分页 -->
-          <FilePagination
-            :total="totalFiles"
-            :current="fileCurrentPage"
-            :page-size="filePageSize"
-            :visible="currentFolderId && !loading && totalFiles > 0"
-            @page-change="handleFilePageChange"
-            @page-size-change="handleFilePageSizeChange"
-          />
+          <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>
@@ -192,13 +408,128 @@
       </a-form>
     </a-modal>
     
-    <!-- 文件上传组件 -->
-    <FileUpload
+    <!-- 上传文件对话框 -->
+    <a-modal
       v-model:visible="uploadDialogVisible"
-      :folder-list="folderList"
-      :current-folder-id="currentFolderId"
-      @upload-success="handleUploadSuccess"
-    />
+      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
@@ -245,16 +576,11 @@
 <script setup>
 // 导入核心依赖
 import { ref, reactive, onMounted, computed, watch, nextTick, h } from 'vue';
-// 导入子组件
-import FilePagination from './components/FilePagination.vue';
-import FileHeader from './components/FileHeader.vue';
-import FileList from './components/FileList.vue';
-import FileUpload from './components/FileUpload.vue';
 import {
   IconFolder,
   IconFile,
   IconPlus,
-
+  IconUpload,
   IconMenuFold,
   IconMenuUnfold,
   IconEye,
@@ -263,10 +589,10 @@ import {
   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 {
@@ -277,7 +603,7 @@ import {
   deleteFolderApi,
   deleteFileApi,
   downloadFileApi,
-
+  uploadFileApi,
   updateFileNameApi,
   renameFileApi,
   previewFileApi
@@ -330,10 +656,47 @@ const folderRules = {
   ]
 };
 
+// 上传相关状态
+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(() => {
@@ -668,12 +1031,8 @@ const loadFiles = async (folderId) => {
     if (sortField.value && sortOrder.value) {
       apiParams.sortField = sortField.value;
       apiParams.sortOrder = sortOrder.value;
-      console.log('📤 发送排序参数:', apiParams.sortField, apiParams.sortOrder);
-    } else {
-      console.log('📤 未发送排序参数');
     }
     
-    console.log('📤 发送API参数:', apiParams);
     const res = await getFilesApi(apiParams);
     
     // 根据后端返回的数据结构处理
@@ -698,34 +1057,21 @@ const loadFiles = async (folderId) => {
 
 // 排序处理函数
 const handleSortChange = (field) => {
-  console.log('=== 排序处理函数被调用 ===');
-  console.log('传入的字段:', field);
-  
   const backendField = sortFieldMap[field];
-  console.log('映射后的后端字段:', backendField);
   
-  if (!backendField) {
-    console.log('❌ 找不到对应的后端字段，退出');
-    return;
-  }
-  
-  console.log('当前排序字段:', sortField.value);
-  console.log('当前排序方向:', sortOrder.value);
+  if (!backendField) return;
   
   // 切换排序方向
   if (sortField.value === backendField) {
     sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
-    console.log('✅ 切换排序方向为:', sortOrder.value);
   } else {
     // 新字段，默认降序
     sortField.value = backendField;
     sortOrder.value = 'desc';
-    console.log('✅ 设置新排序字段:', sortField.value, '排序方向:', sortOrder.value);
   }
   
   // 重新加载文件列表
   if (currentFolderId.value) {
-    console.log('🔄 重新加载文件列表，文件夹ID:', currentFolderId.value);
     loadFiles(currentFolderId.value);
   }
 };
@@ -903,7 +1249,7 @@ const handleRenameFolder = (folder) => {
   }
   
   const folderId = folder.key || folder.id;
-  let currentName = folder.title || folder.name;
+  const currentName = folder.title || folder.name;
   
   if (!folderId) {
     Message.error('文件夹ID不能为空');
@@ -1080,9 +1426,159 @@ const submitFolderForm = async () => {
   }
 };
 
+// 格式化上传时间
+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) => {
@@ -1090,6 +1586,157 @@ const getFileExtension = (fileName) => {
   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 {
@@ -1660,97 +2307,61 @@ const handleDelete = (file) => {
   });
 };
 
+// 格式化文件大小
+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 sidebarWidth = ref(260); // 默认宽度
-const isResizing = ref(false);
-const startX = ref(0);
-const startWidth = ref(0);
-
-// 从localStorage加载保存的宽度
-const loadSavedWidth = () => {
-  try {
-    const savedWidth = localStorage.getItem('bussiness-sidebar-width');
-    if (savedWidth) {
-      const width = parseInt(savedWidth);
-      if (width >= 200 && width <= 500) {
-        sidebarWidth.value = width;
-      }
-    }
-  } catch (error) {
-    console.warn('加载侧边栏宽度失败:', error);
-  }
-};
-
-// 保存宽度到localStorage
-const saveWidth = (width) => {
-  try {
-    localStorage.setItem('bussiness-sidebar-width', width.toString());
-  } catch (error) {
-    console.warn('保存侧边栏宽度失败:', error);
-  }
-};
-
-
-
-// 开始拖拽调整大小
-const startResize = (event) => {
-  event.preventDefault();
-  isResizing.value = true;
-  startX.value = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;
-  startWidth.value = sidebarWidth.value;
-  
-  // 添加事件监听器
-  if (event.type === 'mousedown') {
-    document.addEventListener('mousemove', handleResize);
-    document.addEventListener('mouseup', stopResize);
-  } else {
-    document.addEventListener('touchmove', handleResize);
-    document.addEventListener('touchend', stopResize);
-  }
-  
-  // 添加样式
-  document.body.classList.add('resizing');
-};
-
-// 处理拖拽调整
-const handleResize = (event) => {
-  if (!isResizing.value) return;
-  
-  const currentX = event.type === 'mousemove' ? event.clientX : event.touches[0].clientX;
-  const deltaX = currentX - startX.value;
-  const newWidth = Math.max(200, Math.min(500, startWidth.value + deltaX));
-  
-  sidebarWidth.value = newWidth;
-};
-
-// 停止拖拽调整
-const stopResize = () => {
-  isResizing.value = false;
-  
-  // 移除事件监听器
-  document.removeEventListener('mousemove', handleResize);
-  document.removeEventListener('mouseup', stopResize);
-  document.removeEventListener('touchmove', handleResize);
-  document.removeEventListener('touchend', stopResize);
-  
-  // 移除样式
-  document.body.classList.remove('resizing');
-  
-  // 保存宽度
-  saveWidth(sidebarWidth.value);
-};
-
 // 打开新建文件夹对话框
 const handleCreateFolder = () => {
   folderForm.id = '';
@@ -1761,15 +2372,27 @@ const handleCreateFolder = () => {
 
 // 打开上传文件对话框
 const handleUploadFile = () => {
-  uploadDialogVisible.value = true;
-};
-
-// 上传成功回调
-const handleUploadSuccess = () => {
-  // 刷新当前文件夹文件列表
-  if (currentFolderId.value) {
-    loadFiles(currentFolderId.value);
+  // 清空文件列表，避免显示之前上传的文件
+  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;
 };
 
 // 侧边栏控制函数
@@ -1788,13 +2411,43 @@ watch(currentFolderId, (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(() => {
-  loadSavedWidth(); // 加载保存的侧边栏宽度
   initData();
 });
 </script>
@@ -1805,8 +2458,6 @@ onMounted(() => {
   background-color: var(--color-bg-1);
 }
 
-
-
 /* 侧边栏样式 */
 .folder-sidebar {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
@@ -1952,7 +2603,22 @@ onMounted(() => {
 
 /* 删除旧的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 {
@@ -1981,13 +2647,360 @@ onMounted(() => {
   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 {
@@ -2017,9 +3030,141 @@ onMounted(() => {
   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;
+    }
+  }
+}
 
 
 
@@ -2309,14 +3454,228 @@ onMounted(() => {
   }
 }
 
+/* 上传文件相关样式 */
+.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);
+}
 
 
 
@@ -2425,52 +3784,4 @@ onMounted(() => {
     }
   }
 }
-
-/* 拖拽分隔线样式 */
-.sidebar-resizer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  background: transparent;
-  transition: background-color 0.2s ease;
-  z-index: 10;
-  
-  &:hover {
-    background: rgba(var(--color-primary-6), 0.1);
-  }
-  
-  &:active {
-    background: rgba(var(--color-primary-6), 0.2);
-  }
-}
-
-.resizer-handle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 2px;
-  height: 40px;
-  background: var(--color-primary);
-  border-radius: 1px;
-  opacity: 0.6;
-  transition: opacity 0.2s ease;
-}
-
-.sidebar-resizer:hover .resizer-handle {
-  opacity: 1;
-}
-
-/* 拖拽时的全局样式 */
-body.resizing {
-  cursor: col-resize !important;
-  user-select: none !important;
-}
-
-body.resizing * {
-  cursor: col-resize !important;
-}
 </style>
diff --git a/src/views/bussiness-data/components/FileHeader.vue b/src/views/bussiness-data/components/FileHeader.vue
deleted file mode 100644
index 6d56a3f..0000000
--- a/src/views/bussiness-data/components/FileHeader.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div 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="handleRefresh"
-        :loading="refreshing" 
-        tooltip="刷新数据"
-      >
-        <template #icon>
-          <icon-refresh :spin="refreshing" />
-        </template>
-      </a-button>
-    </div>
-    <a-space>
-      <a-button type="outline" @click="handleUpload">
-        <template #icon><icon-upload /></template>
-        上传文件
-      </a-button>
-      <a-button type="primary" @click="handleCreateFolder">
-        <template #icon><icon-plus /></template>
-        新建文件夹
-      </a-button>
-    </a-space>
-  </div>
-</template>
-
-<script setup>
-import { IconRefresh, IconUpload, IconPlus } from '@arco-design/web-vue/es/icon';
-
-// 定义props
-const props = defineProps({
-  breadcrumbPath: {
-    type: Array,
-    default: () => []
-  },
-  refreshing: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// 定义emit事件
-const emit = defineEmits(['breadcrumb-click', 'refresh', 'upload', 'create-folder']);
-
-// 处理面包屑点击
-const handleBreadcrumbClick = (index) => {
-  emit('breadcrumb-click', index);
-};
-
-// 处理刷新
-const handleRefresh = () => {
-  emit('refresh');
-};
-
-// 处理上传文件
-const handleUpload = () => {
-  emit('upload');
-};
-
-// 处理新建文件夹
-const handleCreateFolder = () => {
-  emit('create-folder');
-};
-</script>
-
-<style scoped>
-.file-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 24px;
-  height: 64px;
-  background: var(--color-bg-1);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.clickable {
-  cursor: pointer;
-  color: var(--color-primary);
-  transition: color 0.2s ease;
-}
-
-.clickable:hover {
-  color: var(--color-primary-light-1);
-  text-decoration: underline;
-}
-</style>
diff --git a/src/views/bussiness-data/components/FileList.vue b/src/views/bussiness-data/components/FileList.vue
deleted file mode 100644
index 4901a88..0000000
--- a/src/views/bussiness-data/components/FileList.vue
+++ /dev/null
@@ -1,669 +0,0 @@
-<template>
-  <div class="file-list-container">
-    <!-- 文件列表标题和搜索框在同一行 -->
-    <div v-if="currentFolderId" class="file-header-container">
-      <div class="file-title">
-        <span class="file-list-title">文件列表 ({{ files.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: props.sortField === 'file_name' && props.sortOrder === 'asc' }"></div>
-              <div class="sort-arrow down" :class="{ active: props.sortField === 'file_name' && props.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: props.sortField === 'file_type' && props.sortOrder === 'asc' }"></div>
-              <div class="sort-arrow down" :class="{ active: props.sortField === 'file_type' && props.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: props.sortField === 'file_size' && props.sortOrder === 'asc' }"></div>
-              <div class="sort-arrow down" :class="{ active: props.sortField === 'file_size' && props.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: props.sortField === 'upload_time' && props.sortOrder === 'asc' }"></div>
-              <div class="sort-arrow down" :class="{ active: props.sortField === 'upload_time' && props.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 files" 
-        :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>
-
-    <!-- 空状态 -->
-    <a-empty 
-      v-if="!loading && currentFolderId && files.length === 0" 
-      description="暂无文件"
-      class="empty-state"
-    >
-      <template #image><icon-file /></template>
-      <template #actions>
-        <a-button type="primary" @click="handleUpload">
-          <template #icon><icon-upload /></template>
-          上传文件
-        </a-button>
-      </template>
-    </a-empty>
-  </div>
-</template>
-
-<script setup>
-// 导入依赖
-import { ref, computed, watch } from 'vue';
-import {
-  IconFolder,
-  IconFile,
-  IconMore,
-  IconDownload,
-  IconDelete,
-  IconEdit,
-  IconEye,
-  IconCopy,
-  IconFolderAdd,
-  IconUpload
-} from '@arco-design/web-vue/es/icon';
-
-// 定义props
-const props = defineProps({
-  files: {
-    type: Array,
-    default: () => []
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  currentFolderId: {
-    type: [String, Number],
-    default: null
-  },
-  sortField: {
-    type: String,
-    default: ''
-  },
-  sortOrder: {
-    type: String,
-    default: ''
-  }
-});
-
-// 定义emit事件
-const emit = defineEmits([
-  'file-click',
-  'file-download',
-  'file-delete',
-  'file-edit',
-  'file-preview',
-  'file-copy',
-  'file-more',
-  'file-search',
-  'file-search-input',
-  'file-search-clear',
-  'sort-change',
-  'upload'
-]);
-
-// 本地状态
-const fileSearchKeyword = ref('');
-
-// 监听排序状态变化
-watch(() => props.sortField, (newVal, oldVal) => {
-  console.log('👀 FileList组件 - sortField变化:', oldVal, '->', newVal);
-});
-
-watch(() => props.sortOrder, (newVal, oldVal) => {
-  console.log('👀 FileList组件 - sortOrder变化:', oldVal, '->', newVal);
-});
-
-// 处理文件搜索
-const handleFileSearch = (value) => {
-  emit('file-search', value);
-};
-
-// 处理文件搜索输入
-const handleFileSearchInput = (value) => {
-  emit('file-search-input', value);
-};
-
-// 处理文件搜索清除
-const handleFileSearchClear = () => {
-  emit('file-search-clear');
-};
-
-// 处理排序变化
-const handleSortChange = (field) => {
-  console.log('🎯 FileList组件 - 排序点击:', field);
-  console.log('🎯 FileList组件 - 当前sortField:', props.sortField);
-  console.log('🎯 FileList组件 - 当前sortOrder:', props.sortOrder);
-  emit('sort-change', field);
-};
-
-// 处理预览
-const handlePreview = (file) => {
-  emit('file-preview', file);
-};
-
-// 处理下载
-const handleDownload = (file) => {
-  emit('file-download', file);
-};
-
-// 处理编辑文件
-const handleEditFile = (file) => {
-  emit('file-edit', file);
-};
-
-// 处理删除
-const handleDelete = (file) => {
-  emit('file-delete', file);
-};
-
-// 处理上传
-const handleUpload = () => {
-  emit('upload');
-};
-
-// 工具函数 - 获取文件扩展名
-const getFileExtension = (filename) => {
-  if (!filename) return '';
-  return filename.split('.').pop().toLowerCase();
-};
-
-// 工具函数 - 文件颜色
-const fileColor = (extension) => {
-  const colorMap = {
-    pdf: '#ff4d4f',
-    doc: '#1890ff',
-    docx: '#1890ff',
-    xls: '#52c41a',
-    xlsx: '#52c41a',
-    ppt: '#fa8c16',
-    pptx: '#fa8c16',
-    zip: '#722ed1',
-    rar: '#722ed1',
-    txt: '#8c8c8c',
-    jpg: '#fadb14',
-    jpeg: '#fadb14',
-    png: '#fadb14',
-    gif: '#fadb14',
-    bmp: '#fadb14',
-    webp: '#fadb14'
-  };
-  return colorMap[extension] || '#8c8c8c';
-};
-
-// 工具函数 - 文件类型文本
-const fileTypeText = (extension) => {
-  const typeMap = {
-    pdf: 'PDF文档',
-    doc: 'Word文档',
-    docx: 'Word文档',
-    xls: 'Excel表格',
-    xlsx: 'Excel表格',
-    ppt: 'PPT演示',
-    pptx: 'PPT演示',
-    zip: '压缩文件',
-    rar: '压缩文件',
-    txt: '文本文件',
-    jpg: '图片文件',
-    jpeg: '图片文件',
-    png: '图片文件',
-    gif: '图片文件',
-    bmp: '图片文件',
-    webp: '图片文件'
-  };
-  return typeMap[extension] || '未知文件';
-};
-
-// 工具函数 - 格式化文件大小
-const formatFileListSize = (bytes) => {
-  if (!bytes || bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-};
-
-// 工具函数 - 格式化上传时间
-const formatUploadTime = (time) => {
-  if (!time) return '';
-  const date = new Date(time);
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-};
-</script>
-
-<style scoped>
-.file-list-container {
-  width: 100%;
-}
-
-.file-header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.file-title {
-  display: flex;
-  align-items: center;
-}
-
-.file-list-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-text-1);
-}
-
-.file-search-container {
-  flex-shrink: 0;
-}
-
-.file-search-input {
-  width: 300px;
-}
-
-.initial-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);
-}
-
-.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);
-}
-
-.table-data-row:last-child {
-  border-bottom: none;
-}
-
-.table-data-row: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%;
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-}
-
-.name-column {
-  flex: 2;
-}
-
-.type-column {
-  flex: 1;
-}
-
-.size-column {
-  flex: 1;
-}
-
-.time-column {
-  flex: 1.5;
-}
-
-.action-column {
-  flex: 0.5;
-  justify-content: center;
-}
-
-.sortable-header {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  transition: color 0.2s ease;
-}
-
-.sortable-header:hover {
-  color: var(--color-primary);
-}
-
-.sort-indicator {
-  display: flex;
-  flex-direction: column;
-  margin-left: 4px;
-  height: 12px;
-}
-
-.sort-arrow {
-  width: 0;
-  height: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  transition: border-color 0.2s ease;
-}
-
-.sort-arrow.up {
-  border-bottom: 3px solid var(--color-text-4);
-  margin-bottom: 1px;
-}
-
-.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);
-}
-
-.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;
-  min-width: 0;
-}
-
-.file-name {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-1);
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-name-small {
-  font-size: 12px;
-  color: var(--color-text-3);
-  margin-top: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cell-content {
-  font-size: 13px;
-  color: var(--color-text-2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-actions {
-  display: flex;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.table-data-row:hover .file-actions {
-  opacity: 1;
-}
-
-.file-actions .action-btn {
-  width: 28px;
-  height: 28px;
-  color: var(--color-text-3);
-  border-radius: 4px;
-  transition: all 0.2s ease;
-}
-
-.file-actions .action-btn:hover {
-  color: var(--color-primary);
-  background: var(--color-fill-3);
-  transform: scale(1.1);
-}
-
-.file-actions .delete-btn:hover {
-  color: var(--color-danger);
-  background: var(--color-danger-light-1);
-}
-
-.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;
-}
-
-: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);
-}
-</style>
diff --git a/src/views/bussiness-data/components/FilePagination.vue b/src/views/bussiness-data/components/FilePagination.vue
deleted file mode 100644
index 915a632..0000000
--- a/src/views/bussiness-data/components/FilePagination.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div v-if="visible" class="pagination-container">
-    <a-pagination
-      :total="total"
-      :current="current"
-      :page-size="pageSize"
-      :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="handlePageChange"
-      @page-size-change="handlePageSizeChange"
-    />
-  </div>
-</template>
-
-<script setup>
-// 定义props
-const props = defineProps({
-  total: {
-    type: Number,
-    default: 0
-  },
-  current: {
-    type: Number,
-    default: 1
-  },
-  pageSize: {
-    type: Number,
-    default: 10
-  },
-  visible: {
-    type: Boolean,
-    default: true
-  }
-});
-
-// 定义emit事件
-const emit = defineEmits(['page-change', 'page-size-change']);
-
-// 处理页码变化
-const handlePageChange = (page) => {
-  emit('page-change', page);
-};
-
-// 处理每页条数变化
-const handlePageSizeChange = (pageSize) => {
-  emit('page-size-change', pageSize);
-};
-</script>
-
-<style scoped>
-.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;
-}
-
-.pagination-container :deep(.arco-pagination) {
-  margin: 0;
-}
-
-.pagination-container :deep(.arco-pagination-item) {
-  border-radius: 6px;
-  margin: 0 4px;
-  transition: all 0.2s ease;
-}
-
-.pagination-container :deep(.arco-pagination-item:hover) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.pagination-container :deep(.arco-pagination-item-active) {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: white;
-}
-
-.pagination-container :deep(.arco-pagination-prev),
-.pagination-container :deep(.arco-pagination-next) {
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.pagination-container :deep(.arco-pagination-prev:hover),
-.pagination-container :deep(.arco-pagination-next:hover) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.pagination-container :deep(.arco-pagination-size-changer) {
-  margin-left: 16px;
-}
-
-.pagination-container :deep(.arco-pagination-jumper) {
-  margin-left: 16px;
-}
-
-.pagination-container :deep(.arco-pagination-total) {
-  color: var(--color-text-2);
-  font-size: 14px;
-}
-</style>
diff --git a/src/views/bussiness-data/components/FileUpload.vue b/src/views/bussiness-data/components/FileUpload.vue
deleted file mode 100644
index 4802274..0000000
--- a/src/views/bussiness-data/components/FileUpload.vue
+++ /dev/null
@@ -1,557 +0,0 @@
-<template>
-  <a-modal
-    :visible="visible"
-    title="上传文件"
-    width="620px"
-    :mask-closable="false"
-    @ok="handleSubmit"
-    @cancel="handleCancel"
-    :confirm-loading="uploading"
-    :ok-disabled="!canUpload"
-    @update:visible="(val) => emit('update:visible', val)"
-  >
-    <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="visible ? '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>
-</template>
-
-<script setup>
-import { ref, reactive, computed, watch } from 'vue'
-import { Message } from '@arco-design/web-vue'
-import { IconUpload, IconFile, IconDelete, IconStop } from '@arco-design/web-vue/es/icon'
-import { uploadFileApi } from '@/apis/bussiness'
-import axios from 'axios'
-
-// Props
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  folderList: {
-    type: Array,
-    default: () => []
-  },
-  currentFolderId: {
-    type: String,
-    default: ''
-  }
-})
-
-// Emits
-const emit = defineEmits([
-  'update:visible',
-  'upload-success'
-])
-
-// 响应式数据
-const uploadForm = reactive({
-  folderId: ''
-})
-
-const fileListTemp = ref([])
-const uploadFormRef = ref(null)
-const uploadRef = ref(null)
-const uploading = ref(false)
-const cancelTokens = ref({})
-
-// 常量
-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 hasFiles = computed(() => {
-  const validFiles = fileListTemp.value.filter(file => {
-    return !file.error && file.status !== 'removed' && file.status !== 'canceled'
-  })
-  return validFiles.length > 0
-})
-
-const canUpload = computed(() => {
-  return hasFiles.value && !uploading.value && uploadForm.folderId
-})
-
-// 监听 visible 变化
-watch(() => props.visible, (visible) => {
-  if (visible) {
-    // 重置表单
-    uploadForm.folderId = props.currentFolderId || ''
-    fileListTemp.value = []
-    
-    // 重置上传组件
-    if (uploadRef.value) {
-      try {
-        uploadRef.value.reset()
-      } catch (error) {
-        console.log('重置上传组件时出错:', error)
-      }
-    }
-  }
-})
-
-// 文件变化处理
-const handleFileChange = (info) => {
-  if (!info || !Array.isArray(info) || !props.visible) {
-    return
-  }
-  
-  const fileList = info
-  if (fileList.length === 0) {
-    return
-  }
-  
-  // 获取当前已存在的文件UID列表，用于去重
-  const existingUids = fileListTemp.value.map(f => f.uid)
-  
-  // 处理新选择的文件
-  fileList.forEach((file) => {
-    // 检查文件是否已存在（去重）
-    if (existingUids.includes(file.uid)) {
-      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
-    }
-    
-    // 验证文件
-    const isValid = validateFile(fileObj)
-    
-    if (isValid) {
-      fileListTemp.value.push(fileObj)
-    }
-  })
-}
-
-// 文件验证
-const validateFile = (file) => {
-  file.error = ''
-  
-  // 验证文件类型
-  const ext = getFileExtension(file.name).toLowerCase()
-  const allowedExts = allowedFileTypes
-    .split(',')
-    .map(type => type.toLowerCase().replace(/^\./, ''))
-  
-  if (!allowedExts.includes(ext)) {
-    file.error = `不支持的文件类型，支持: ${allowedFileTypesText}`
-    return false
-  }
-  
-  // 验证文件大小
-  if (file.size > maxFileSize) {
-    file.error = `文件过大，最大支持 ${maxFileSizeText}`
-    return false
-  }
-  
-  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 formatFileSize = (fileSize) => {
-  if (fileSize === 0) return '0 B'
-  
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let size = fileSize
-  let unitIndex = 0
-  
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024
-    unitIndex++
-  }
-  
-  return `${size.toFixed(2)} ${units[unitIndex]}`
-}
-
-// 移除文件
-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 handleSubmit = 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('上传成功')
-    emit('upload-success')
-  }
-  
-  handleCancel()
-}
-
-// 取消上传
-const handleCancel = () => {
-  // 取消所有正在进行的上传
-  Object.values(cancelTokens.value).forEach(source => {
-    source.cancel('上传已取消')
-  })
-  
-  // 重置所有状态
-  emit('update:visible', false)
-  uploadForm.folderId = props.currentFolderId || ''
-  fileListTemp.value = []
-  cancelTokens.value = {}
-  uploading.value = false
-  
-  // 清空上传组件
-  if (uploadRef.value) {
-    uploadRef.value.reset()
-  }
-}
-</script>
-
-<style scoped>
-/* 上传文件相关样式 */
-.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);
-  }
-}
-</style>
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>
diff --git a/src/views/operation-platform/data-processing/data-storage/index.vue b/src/views/operation-platform/data-processing/data-storage/index.vue
index 23de01b..a15755d 100644
--- a/src/views/operation-platform/data-processing/data-storage/index.vue
+++ b/src/views/operation-platform/data-processing/data-storage/index.vue
@@ -73,18 +73,8 @@
             </div>
           </div>
         </a-tab-pane>
-        <a-tab-pane key="props" tap="形变" title="形变原数据">
-          <div class="tab-content">
-            <raw-data>
-
-            </raw-data>
-          </div>
-        </a-tab-pane>
       </a-tabs>
     </div>
-
-    <!-- 文件预览模态框（待重新设计） -->
-    <!-- <PreviewModal ref="previewModal" /> -->
   </GiPageLayout>
 </template>
 
@@ -107,8 +97,6 @@ import {
 } from '@/apis/industrial-image'
 import DeformationTap from './components/DeformationTap.vue'
 
-// 预览弹窗引用（待重新设计）
-// const previewModal = ref()
 // 活动选项卡
 const activeTab = ref('image')
 
diff --git a/src/views/project/TurbineCard.vue b/src/views/project/TurbineCard.vue
index 70764b9..bf02fef 100644
--- a/src/views/project/TurbineCard.vue
+++ b/src/views/project/TurbineCard.vue
@@ -3,22 +3,22 @@ import { computed } from 'vue'
 import WindTurbine from './icons/WindTurbine.vue'
 
 interface Turbine {
-    id: number
-    turbineNo: string
-    status: 0 | 1 | 2   // 0 待施工 1 施工中 2 已完成
-    lat?: number
-    lng?: number
+  id: number
+  turbineNo: string
+  status: 0 | 1 | 2 // 0 待施工 1 施工中 2 已完成
+  lat?: number
+  lng?: number
 }
 
 const props = defineProps<{ modelValue: Turbine }>()
 const emit = defineEmits<{
-    (e: 'update:modelValue', v: Turbine): void
-    (e: 'map'): void
+  (e: 'update:modelValue', v: Turbine): void
+  (e: 'map'): void
 }>()
 
 const turbine = computed({
-    get: () => props.modelValue,
-    set: v => emit('update:modelValue', v)
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v),
 })
 
 /* 状态文字 & 颜色 */
@@ -27,34 +27,36 @@ const statusColorMap = { 0: '#FF7D00', 1: '#165DFF', 2: '#00B42A' }
 
 /* 点击循环切换 */
 function toggleStatus() {
-    const next = ((turbine.value.status + 1) % 3) as 0 | 1 | 2
-    turbine.value = { ...turbine.value, status: next }
+  const next = ((turbine.value.status + 1) % 3) as 0 | 1 | 2
+  turbine.value = { ...turbine.value, status: next }
 }
 
 function updateNo(val: string) {
-    turbine.value = { ...turbine.value, turbineNo: val }
+  turbine.value = { ...turbine.value, turbineNo: val }
 }
 </script>
 
 <template>
-    <div class="turbine-card">
-        <!-- 可点击的状态标签 -->
-        <div class="status-tag" :style="{ backgroundColor: statusColorMap[turbine.status] }" @click="toggleStatus">
-            {{ statusTextMap[turbine.status] }}
-        </div>
-
-        <!-- 风机图标 -->
-        <WindTurbine />
-
-        <!-- 机组编号输入框 -->
-        <a-input :model-value="turbine.turbineNo" @update:model-value="updateNo" size="small" class="turbine-input"
-            placeholder="编号" />
-
-        <!-- 地图选点按钮 -->
-        <a-button size="mini" @click="$emit('map')">
-            <template #icon><icon-location /></template>
-        </a-button>
+  <div class="turbine-card">
+    <!-- 可点击的状态标签 -->
+    <div class="status-tag" :style="{ backgroundColor: statusColorMap[turbine.status] }" @click="toggleStatus">
+      {{ statusTextMap[turbine.status] }}
     </div>
+
+    <!-- 风机图标 -->
+    <WindTurbine />
+
+    <!-- 机组编号输入框 -->
+    <a-input
+      :model-value="turbine.turbineNo" size="small" class="turbine-input" placeholder="编号"
+      @update:model-value="updateNo"
+    />
+
+    <!-- 地图选点按钮 -->
+    <a-button size="mini" @click="$emit('map')">
+      <template #icon><icon-location /></template>
+    </a-button>
+  </div>
 </template>
 
 <style scoped>
@@ -85,4 +87,4 @@ function updateNo(val: string) {
     margin-top: 8px;
     text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/project/detail/index.vue b/src/views/project/detail/index.vue
index ed7aa2d..486f420 100644
--- a/src/views/project/detail/index.vue
+++ b/src/views/project/detail/index.vue
@@ -7,9 +7,9 @@
             <template #icon><icon-arrow-left /></template>
           </a-button>
           <h2 class="ml-2">{{ projectTitle }}</h2>
-          <a-tag class="ml-2" :color="getStatusColor(projectData.status)" v-if="projectData.status">{{
-            projectData.status
-          }}</a-tag>
+          <a-tag class="ml-2" :color="getStatusColor(projectData.statusLabel ?? projectData.status)" v-if="projectData.status !== undefined && projectData.status !== null">
+            {{ projectData.statusLabel ?? projectData.status }}
+          </a-tag>
         </div>
         <div class="flex items-center">
           <a-button v-permission="['project:update']" type="primary" class="mr-2" @click="editProject">
@@ -198,8 +198,8 @@
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Message, Modal } from '@arco-design/web-vue'
-import { getProject, deleteProject } from '@/apis/project'
-import { addTask, addTaskGroup, listTask, updateTaskProgress } from '@/apis/project/task'
+import { getProjectDetail, deleteProject } from '@/apis/project'
+import { addTask, addTaskGroup, updateTaskProgress } from '@/apis/project/task'
 import dayjs from 'dayjs'
 
 defineOptions({ name: 'ProjectDetail' })
@@ -257,10 +257,15 @@ const projectTitle = computed(() => {
 
 const projectInfos = computed(() => [
   { label: '项目编号', value: projectData.value?.projectCode },
-  { label: '项目负责人', value: projectData.value?.projectManager },
-  { label: '参与人', value: projectData.value?.projectStaff?.join(', ') },
-  { label: '项目周期', value: projectData.value?.projectPeriod ? `${projectData.value.projectPeriod[0]} 至 ${projectData.value.projectPeriod[1]}` : '' },
-  { label: '客户', value: projectData.value?.commissionUnit },
+  { label: '项目负责人', value: projectData.value?.projectManagerName || projectData.value?.projectManager },
+  { label: '项目来源', value: projectData.value?.projectOrigin },
+  { label: '风场名称', value: projectData.value?.farmName },
+  { label: '风场地址', value: projectData.value?.farmAddress },
+  { label: '开始时间', value: projectData.value?.startDate },
+  { label: '结束时间', value: projectData.value?.endDate },
+  { label: '项目规模', value: projectData.value?.scale },
+  { label: '状态', value: (statusMap as any)[Number(projectData.value?.status)]?.label || projectData.value?.statusLabel },
+  { label: '客户', value: projectData.value?.client },
   { label: '备注', value: projectData.value?.projectIntro || '无' }
 ])
 
@@ -284,6 +289,15 @@ const taskDetailInfos = computed(() => {
     { label: '状态', value: currentTask.value.status },
     { label: '描述', value: currentTask.value.description || '无' }
   ]
+
+const statusMap: Record<number, { label: string; color: string }> = {
+  0: { label: '待施工', color: 'gray' },
+  1: { label: '施工中', color: 'blue' },
+  2: { label: '已完工', color: 'green' },
+  3: { label: '已审核', color: 'orange' },
+  4: { label: '已验收', color: 'arcoblue' },
+}
+
 })
 
 const getStatusColor = (status: string) => {
@@ -322,8 +336,14 @@ const formatDate = (date: string) => {
 const fetchProjectData = async () => {
   loading.value = true
   try {
-    const res = await getProject(projectId.value)
-    projectData.value = res.data
+    const res = await getProjectDetail(projectId.value)
+    const detail = (res as any).data || res
+    // 如果status是数字，补充statusLabel用于页面展示
+    if (typeof detail.status === 'number' && !detail.statusLabel) {
+      const mapper = (statusMap as any)[detail.status]
+      if (mapper) detail.statusLabel = mapper.label
+    }
+    projectData.value = detail
   } catch (error) {
     console.error(error)
     Message.error('获取项目详情失败')
@@ -332,34 +352,39 @@ const fetchProjectData = async () => {
   }
 }
 
-const fetchTaskData = async () => {
-  try {
-    const res = await listTask({
-      projectId: projectId.value,
-      page: 1,
-      size: 100
-    })
+// 若任务未返回状态，依据计划时间简单推断状态
+const inferTaskStatus = (task: any): string => {
+  if (task.status) return task.status
+  const now = dayjs()
+  const start = task.planStartDate ? dayjs(task.planStartDate) : null
+  const end = task.planEndDate ? dayjs(task.planEndDate) : null
+  if (end && end.isBefore(now)) return '已完成'
+  if (start && start.isAfter(now)) return '计划中'
+  if (start && (!end || end.isAfter(now))) return '正在做'
+  return '其他'
+}
 
-    // 重置任务列表
-    taskColumns.value.forEach(column => {
-      column.tasks = []
-    })
 
-    const tasks = res.data?.list || []
+const fetchTaskData = () => {
+  // 使用详情接口返回的任务列表
+  const detail = projectData.value || {}
+  const tasks = (detail.tasks || []) as any[]
 
-    // 分配任务到对应的列
-    tasks.forEach((task: any) => {
-      const column = taskColumns.value.find(col => col.status === task.status)
-      if (column) {
-        column.tasks.push(task)
-      } else {
-        taskColumns.value.find(col => col.status === '其他')?.tasks.push(task)
-      }
-    })
-  } catch (error) {
-    console.error(error)
-    Message.error('获取任务数据失败')
-  }
+  // 重置任务列表
+  taskColumns.value.forEach(column => {
+    column.tasks = []
+  })
+
+  // 分配任务到对应的列（按状态或推断状态）
+  tasks.forEach((task: any) => {
+    const st = inferTaskStatus(task)
+    const column = taskColumns.value.find(col => col.status === st)
+    if (column) {
+      column.tasks.push(task)
+    } else {
+      taskColumns.value.find(col => col.status === '其他')?.tasks.push(task)
+    }
+  })
 }
 
 const goBack = () => {
@@ -491,8 +516,7 @@ const submitProgressUpdate = async () => {
 }
 
 onMounted(() => {
-  fetchProjectData()
-  fetchTaskData()
+  fetchProjectData().then(() => fetchTaskData())
 })
 </script>
 
diff --git a/src/views/project/index.vue b/src/views/project/index.vue
index e9a8e4e..5200ecc 100644
--- a/src/views/project/index.vue
+++ b/src/views/project/index.vue
@@ -332,6 +332,249 @@
       </a-form>
     </a-modal>
 
+    <!-- 编辑项目弹窗（与新增分离） -->
+    <a-modal
+      v-model:visible="editModalVisible"
+      title="编辑项目"
+      :ok-button-props="{ loading: submitLoading }"
+      width="800px"
+      modal-class="project-form-modal"
+      @cancel="() => { editModalVisible.value = false }"
+      @ok="handleEditSubmit"
+    >
+      <a-form
+        ref="editFormRef"
+        :model="editForm"
+        :rules="formRules"
+        layout="vertical"
+        :style="{ maxHeight: '70vh', overflow: 'auto', padding: '0 10px' }"
+      >
+        <a-divider orientation="left">基本信息</a-divider>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="projectName" label="项目名称" required>
+              <a-input v-model="editForm.projectName" placeholder="请输入项目名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item field="farmAddress" label="地址">
+              <a-input v-model="editForm.farmAddress" placeholder="请输入地址" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="projectManagerId" label="项目经理" required>
+              <a-select v-model="editForm.projectManagerId" placeholder="请选择项目经理" :loading="userLoading">
+                <a-option v-for="user in userOptions" :key="user.value" :value="user.value">
+                  {{ user.label }}
+                </a-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="inspectionUnit" label="业主">
+              <a-input v-model="editForm.inspectionUnit" placeholder="请输入业主单位" @input="(val) => (editForm.farmName = val)" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item field="inspectionContact" label="业主单位联系人">
+              <a-input v-model="editForm.inspectionContact" placeholder="请输入联系人" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="inspectionPhone" label="业主单位联系电话">
+              <a-input v-model="editForm.inspectionPhone" placeholder="请输入联系电话" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="client" label="委托单位">
+              <a-input v-model="editForm.client" placeholder="请输入委托单位" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item field="clientContact" label="委托单位联系人">
+              <a-input v-model="editForm.clientContact" placeholder="请输入联系人" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="clientPhone" label="委托单位联系电话">
+              <a-input v-model="editForm.clientPhone" placeholder="请输入联系电话" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="projectOrigin" label="项目来源" :rules="[{ required: true, message: '请输入项目来源' }]">
+              <a-input v-model="editForm.projectOrigin" placeholder="请输入项目来源" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-divider orientation="left">任务设置</a-divider>
+        <div class="mb-2">
+          <a-button type="dashed" size="small" @click="addEditTask">
+            <template #icon><icon-plus /></template>
+            新增任务
+          </a-button>
+        </div>
+        <div v-if="editForm.tasks.length === 0" class="text-gray-500 mb-2">暂无任务。</div>
+        <a-space direction="vertical" fill>
+          <a-card v-for="(task, tIndex) in editForm.tasks" :key="tIndex" size="small">
+            <template #title>
+              <div class="flex items-center justify-between">
+                <span>任务 {{ tIndex + 1 }}</span>
+                <a-space>
+                  <a-button size="mini" @click="addEditSubtask(tIndex)">新增子任务</a-button>
+                  <a-button size="mini" status="danger" @click="removeEditTask(tIndex)">删除</a-button>
+                </a-space>
+              </div>
+            </template>
+            <a-row :gutter="12">
+              <a-col :span="8">
+                <a-form-item :field="`tasks.${tIndex}.taskName`" label="任务名称" required>
+                  <a-input v-model="task.taskName" placeholder="请输入任务名称" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item :field="`tasks.${tIndex}.taskCode`" label="任务编号">
+                  <a-input v-model="task.taskCode" placeholder="编号" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item :field="`tasks.${tIndex}.mainUserId`" label="负责人">
+                  <a-select v-model="task.mainUserId" placeholder="选择负责人" :loading="userLoading">
+                    <a-option v-for="u in userOptions" :key="u.value" :value="u.value">{{ u.label }}</a-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-form-item :field="`tasks.${tIndex}.scales`" label="工量">
+                  <a-input-number v-model="task.scales" :min="0" :max="9999" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="12">
+              <a-col :span="8">
+                <a-form-item :field="`tasks.${tIndex}.planStartDate`" label="计划开始">
+                  <a-date-picker v-model="task.planStartDate" style="width: 100%" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item :field="`tasks.${tIndex}.planEndDate`" label="计划结束">
+                  <a-date-picker v-model="task.planEndDate" style="width: 100%" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item :field="`tasks.${tIndex}.taskGroupId`" label="任务组">
+                  <a-input-number v-model="task.taskGroupId" :min="0" placeholder="可选" style="width: 100%" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <!-- 子任务 -->
+            <div v-if="task.children && task.children.length">
+              <a-divider orientation="left">子任务</a-divider>
+              <a-card v-for="(sub, sIndex) in task.children" :key="sIndex" size="small" class="mb-2">
+                <template #title>
+                  <div class="flex items-center justify-between">
+                    <span>子任务 {{ tIndex + 1 }}-{{ sIndex + 1 }}</span>
+                    <a-button size="mini" status="danger" @click="removeEditSubtask(tIndex, sIndex)">删除</a-button>
+                  </div>
+                </template>
+                <a-row :gutter="12">
+                  <a-col :span="8">
+                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskName`" label="任务名称" required>
+                      <a-input v-model="sub.taskName" placeholder="请输入任务名称" />
+                    </a-form-item>
+                  </a-col>
+                  <a-col :span="6">
+                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskCode`" label="任务编号">
+                      <a-input v-model="sub.taskCode" placeholder="编号" />
+                    </a-form-item>
+                  </a-col>
+                  <a-col :span="6">
+                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.mainUserId`" label="负责人">
+                      <a-select v-model="sub.mainUserId" placeholder="选择负责人" :loading="userLoading">
+                        <a-option v-for="u in userOptions" :key="u.value" :value="u.value">{{ u.label }}</a-option>
+                      </a-select>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :span="4">
+                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.scales`" label="工量">
+                      <a-input-number v-model="sub.scales" :min="0" :max="9999" />
+                    </a-form-item>
+                  </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                  <a-col :span="8">
+                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.planStartDate`" label="计划开始">
+                      <a-date-picker v-model="sub.planStartDate" style="width: 100%" />
+                    </a-form-item>
+                  </a-col>
+                  <a-col :span="8">
+                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.planEndDate`" label="计划结束">
+                      <a-date-picker v-model="sub.planEndDate" style="width: 100%" />
+                    </a-form-item>
+                  </a-col>
+                  <a-col :span="8">
+                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskGroupId`" label="任务组">
+                      <a-input-number v-model="sub.taskGroupId" :min="0" placeholder="可选" style="width: 100%" />
+                    </a-form-item>
+                  </a-col>
+                </a-row>
+              </a-card>
+            </div>
+          </a-card>
+        </a-space>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="status" label="项目状态">
+              <a-select v-model="editForm.status" placeholder="请选择状态">
+                <a-option v-for="option in PROJECT_STATUS_OPTIONS" :key="option.value" :value="option.value">
+                  {{ option.label }}
+                </a-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item field="scale" label="项目规模">
+              <a-input-number v-model="editForm.scale" placeholder="请输入项目规模" :min="0" :max="999" :step="1" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item field="startDate" label="开始时间">
+              <a-date-picker v-model="editForm.startDate" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item field="endDate" label="结束时间">
+              <a-date-picker v-model="editForm.endDate" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-modal>
+
+
     <!-- 导入项目弹窗 -->
     <a-modal v-model:visible="importModalVisible" title="导入文件" @cancel="handleCancelImport" @before-ok="handleImport">
       <div class="flex flex-col items-center justify-center p-8">
@@ -347,20 +590,136 @@
         </a-upload>
       </div>
     </a-modal>
+
+    <!-- 详情弹窗 -->
+    <a-modal
+      v-model:visible="detailVisible"
+      title="项目详情"
+      width="900px"
+      :footer="false"
+      :mask-closable="false"
+    >
+      <a-spin :loading="detailLoading">
+        <a-descriptions :column="2" bordered :label-style="{ width: '140px', fontWeight: 'bold' }">
+          <a-descriptions-item label="项目名称" :span="2">{{ detailData.projectName || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="项目编号">{{ detailData.projectCode || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="状态">
+            <a-tag v-if="detailData.status !== undefined" :color="getStatusColor(detailData.status)">
+              {{ PROJECT_STATUS_MAP[detailData.status] || detailData.statusLabel || '-' }}
+            </a-tag>
+          </a-descriptions-item>
+          <a-descriptions-item label="项目类型">{{ detailData.projectCategory || '-' }}</a-descriptions-item>
+
+          <a-descriptions-item label="业主">{{ detailData.inspectionUnit || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="业主联系人">{{ detailData.inspectionContact || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="业主电话">{{ detailData.inspectionPhone || '-' }}</a-descriptions-item>
+
+          <a-descriptions-item label="委托单位">{{ detailData.client || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="委托联系人">{{ detailData.clientContact || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="委托电话">{{ detailData.clientPhone || '-' }}</a-descriptions-item>
+
+          <a-descriptions-item label="风场名称">{{ detailData.farmName || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="风场地址">{{ detailData.farmAddress || '-' }}</a-descriptions-item>
+
+          <a-descriptions-item label="项目经理">{{ detailData.projectManagerName || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="项目规模">{{ detailData.scale || detailData.projectScale || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="风机型号">{{ detailData.turbineModel || '-' }}</a-descriptions-item>
+
+          <a-descriptions-item label="开始时间">{{ detailData.startDate || '-' }}</a-descriptions-item>
+          <a-descriptions-item label="结束时间">{{ detailData.endDate || '-' }}</a-descriptions-item>
+
+          <a-descriptions-item label="项目简介" :span="2">
+            <a-typography-paragraph :ellipsis="{ rows: 3, expandable: true, collapseText: '收起', expandText: '展开' }">
+              {{ detailData.projectIntro || '-' }}
+            </a-typography-paragraph>
+          </a-descriptions-item>
+        </a-descriptions>
+
+        <a-divider orientation="left">任务列表</a-divider>
+        <a-table
+          :data="detailTasks"
+          :columns="detailTaskColumns as any"
+          :pagination="false"
+          size="small"
+          :bordered="false"
+        />
+
+      </a-spin>
+    </a-modal>
+
   </GiPageLayout>
 </template>
 
 <script setup lang="ts">
+const editModalVisible = ref(false)
+const editFormRef = ref()
+
+// 编辑表单
+const editForm = reactive({
+  projectId: '',
+  projectName: '',
+  projectManagerId: '',
+  client: '',
+  clientContact: '',
+  clientPhone: '',
+  inspectionUnit: '',
+  inspectionContact: '',
+  inspectionPhone: '',
+  farmName: '',
+  farmAddress: '',
+  projectOrigin: '',
+  scale: '',
+  turbineModel: '',
+  status: 0,
+  startDate: '',
+  endDate: '',
+  constructionTeamLeaderId: '',
+  constructorIds: '',
+  qualityOfficerId: '',
+  auditorId: '',
+  tasks: [] as Array<{
+    taskName: string
+    taskCode?: string
+    mainUserId?: string | number
+    planStartDate?: string
+    planEndDate?: string
+    scales?: number
+    taskGroupId?: number | string
+    children?: Array<{
+      taskName: string
+      taskCode?: string
+      mainUserId?: string | number
+      planStartDate?: string
+      planEndDate?: string
+      scales?: number
+      taskGroupId?: number | string
+    }>
+  }>,
+  turbineList: [] as { id: number, turbineNo: string, lat?: number, lng?: number, status: 0 | 1 | 2 }[],
+})
+
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Message, Modal } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
 import TurbineGrid from './TurbineGrid.vue'
-import { addProject, deleteProject, exportProject, importProject, listProject, updateProject } from '@/apis/project'
+import { addProject, deleteProject, exportProject, importProject, listProject, updateProject, getProjectDetail } from '@/apis/project'
 import { isMobile } from '@/utils'
 import http from '@/utils/http'
 import type { ColumnItem } from '@/components/GiForm'
 import type { ProjectPageQuery } from '@/apis/project/type'
+
+// 详情任务表格
+const detailTasks = ref<any[]>([])
+const detailTaskColumns = [
+  { title: '任务名称', dataIndex: 'taskName', ellipsis: true, tooltip: true },
+  { title: '负责人', dataIndex: 'mainUserName', width: 120 },
+  { title: '计划开始', dataIndex: 'planStartDate', width: 120 },
+  { title: '计划结束', dataIndex: 'planEndDate', width: 120 },
+  { title: '工量', dataIndex: 'scales', width: 80 },
+  { title: '状态', dataIndex: 'statusLabel', width: 100 },
+]
+
 import type * as T from '@/apis/project/type'
 
 defineOptions({ name: 'ProjectManagement' })
@@ -412,6 +771,12 @@ const dataList = ref<T.ProjectResp[]>([])
 const userLoading = ref(false)
 const userOptions = ref<{ label: string, value: string }[]>([])
 
+
+// 详情弹窗状态
+const detailVisible = ref(false)
+const detailLoading = ref(false)
+const detailData = ref<any>({})
+
 const searchForm = reactive<Partial<ProjectPageQuery>>({
   projectName: '',
   status: undefined,
@@ -681,6 +1046,94 @@ const fetchData = async () => {
       }
     } else {
       Message.error(res.msg || '获取数据失败')
+
+const handleEditSubmit = async () => {
+  submitLoading.value = true
+  try {
+    // 验证
+    await editFormRef.value?.validate()
+
+    const normalizeDate = (d: any) => (d ? (typeof d === 'string' ? d : new Date(d).toISOString().split('T')[0]) : '')
+    const pickTaskFields = (t: any) => ({
+      mainUserId: t.mainUserId ?? '',
+      planEndDate: normalizeDate(t.planEndDate),
+      planStartDate: normalizeDate(t.planStartDate),
+      scales: t.scales ?? 0,
+      taskCode: t.taskCode ?? '',
+      taskGroupId: t.taskGroupId ?? '',
+      taskName: t.taskName ?? '',
+    })
+    const flattenTasks = (tasks: any[]) => {
+      const result: any[] = []
+      ;(tasks || []).forEach((t) => {
+        result.push(pickTaskFields(t))
+        ;(t.children || []).forEach((c: any) => result.push(pickTaskFields(c)))
+      })
+      return result
+    }
+
+    const submitData = {
+      auditorId: (editForm as any).auditorId || '',
+      bonusProvision: (editForm as any).bonusProvision ?? 0,
+      client: editForm.client || '',
+      clientContact: editForm.clientContact || '',
+      clientPhone: editForm.clientPhone || '',
+      constructionTeamLeaderId: editForm.constructionTeamLeaderId || '',
+      constructorIds: Array.isArray(editForm.constructorIds) ? editForm.constructorIds.join(',') : (editForm.constructorIds || ''),
+      coverUrl: (editForm as any).coverUrl || '',
+      duration: (editForm as any).duration ?? 0,
+      endDate: normalizeDate(editForm.endDate),
+      equipmentAmortization: (editForm as any).equipmentAmortization ?? 0,
+      farmAddress: editForm.farmAddress || '',
+      farmName: editForm.farmName || '',
+      inspectionContact: editForm.inspectionContact || '',
+      inspectionPhone: editForm.inspectionPhone || '',
+      inspectionUnit: editForm.inspectionUnit || '',
+      laborCost: (editForm as any).laborCost ?? 0,
+      othersCost: (editForm as any).othersCost ?? 0,
+      projectBudget: (editForm as any).projectBudget ?? 0,
+      projectId: editForm.projectId || currentId.value || '',
+      projectManagerId: editForm.projectManagerId || '',
+      projectName: editForm.projectName,
+      projectOrigin: (editForm as any).projectOrigin || '',
+      qualityOfficerId: editForm.qualityOfficerId || '',
+      scale: editForm.scale || '',
+      startDate: normalizeDate(editForm.startDate),
+      status: (editForm as any).status ?? 0,
+      tasks: flattenTasks(editForm.tasks as any[]),
+      transAccomMeals: (editForm as any).transAccomMeals ?? 0,
+      turbineModel: editForm.turbineModel || '',
+    }
+
+    if (!currentId.value && submitData.projectId) currentId.value = submitData.projectId
+    if (!currentId.value) {
+      Message.error('缺少项目ID，无法更新')
+      submitLoading.value = false
+      return
+    }
+
+    const res = await updateProject(submitData, currentId.value)
+    if (res && res.success === false) {
+      Message.error(res.msg || '更新失败')
+      submitLoading.value = false
+      return
+    }
+
+    Message.success('更新成功')
+    editModalVisible.value = false
+    fetchData()
+  } catch (e: any) {
+    if (e && e.type === 'form') {
+      // 表单校验失败
+    } else {
+      console.error('编辑提交失败', e)
+      Message.error(e?.message || '编辑失败')
+    }
+  } finally {
+    submitLoading.value = false
+  }
+}
+
       dataList.value = []
       pagination.total = 0
     }
@@ -757,7 +1210,7 @@ const resetForm = () => {
 
 const openAddModal = () => {
   resetForm()
-  addModalVisible.value = true
+  editModalVisible.value = true
 }
 // 任务增删改（仅在新增/编辑弹窗内部使用）
 const addTask = () => {
@@ -777,35 +1230,77 @@ const removeSubtask = (parentIndex: number, index: number) => {
 }
 
 
-const openEditModal = (record: T.ProjectResp) => {
+const openEditModal = async (record: T.ProjectResp) => {
   isEdit.value = true
   currentId.value = record.id || record.projectId || null
 
-  // 重置表单为默认（确保 tasks、turbineList 等为数组初始值）
-  resetForm()
-
-  // 填充表单数据
-  Object.keys(form).forEach((key) => {
-    if (key in record && record[key as keyof T.ProjectResp] !== undefined) {
-      // @ts-expect-error - 这里需要处理类型转换
-      form[key] = record[key as keyof T.ProjectResp]
-    }
+  // 重置编辑表单
+  Object.assign(editForm, {
+    projectId: '', projectName: '', projectManagerId: '', client: '', clientContact: '', clientPhone: '',
+    inspectionUnit: '', inspectionContact: '', inspectionPhone: '', farmName: '', farmAddress: '', projectOrigin: '',
+    scale: '', turbineModel: '', status: 0, startDate: '', endDate: '', constructionTeamLeaderId: '', constructorIds: '',
+    qualityOfficerId: '', auditorId: '', tasks: [], turbineList: [],
   })
 
-  // 处理特殊字段映射
-  if (record.farmName) form.farmName = record.farmName
-  if (record.farmAddress) form.farmAddress = record.farmAddress
-  if (record.client) form.client = record.client
-  if (record.clientContact) form.clientContact = record.clientContact
-  if (record.clientPhone) form.clientPhone = record.clientPhone
-  if (record.turbineModel) form.turbineModel = record.turbineModel
-  if (record.scale) form.scale = record.scale
+  try {
+    if (currentId.value) {
+      const res = await getProjectDetail(currentId.value as any)
+      const detail = (res as any).data || res || {}
 
-  // 处理日期字段
-  if (record.startDate) form.startDate = record.startDate
-  if (record.endDate) form.endDate = record.endDate
+      // 将详情基础字段回填到编辑表单
+      Object.keys(editForm).forEach((key) => {
+        if (key in detail && (detail as any)[key] !== undefined) {
+          // @ts-expect-error 动态赋值
+          editForm[key] = (detail as any)[key]
+        }
+      })
 
-  addModalVisible.value = true
+      // 别名字段
+      editForm.farmName = detail.farmName || record.farmName || editForm.farmName
+      editForm.farmAddress = detail.farmAddress || record.farmAddress || editForm.farmAddress
+      editForm.client = detail.client || record.client || editForm.client
+      editForm.clientContact = detail.clientContact || record.clientContact || editForm.clientContact
+      editForm.clientPhone = detail.clientPhone || record.clientPhone || editForm.clientPhone
+      editForm.turbineModel = detail.turbineModel || record.turbineModel || editForm.turbineModel
+      editForm.scale = detail.scale || record.scale || editForm.scale
+      editForm.startDate = detail.startDate || record.startDate || editForm.startDate
+      editForm.endDate = detail.endDate || record.endDate || editForm.endDate
+
+      // 任务映射
+      const mapTask = (t: any): any => ({
+        taskName: t.taskName ?? t.name ?? '',
+        taskCode: t.taskCode ?? t.code ?? '',
+        mainUserId: t.mainUserId ?? t.mainUser?.id ?? t.mainUser ?? t.ownerId ?? '',
+        planStartDate: t.planStartDate ?? t.startDate ?? '',
+        planEndDate: t.planEndDate ?? t.endDate ?? '',
+        scales: t.scales ?? t.workload ?? 0,
+        taskGroupId: t.taskGroupId ?? t.groupId ?? '',
+        children: Array.isArray(t.children) ? t.children.map(mapTask) : [],
+      })
+
+      const tasksSource: any[] = Array.isArray(detail.tasks)
+        ? detail.tasks
+        : (Array.isArray((detail as any).taskList) ? (detail as any).taskList : [])
+      if (Array.isArray(tasksSource) && tasksSource.length) {
+        ;(editForm.tasks as any[]) = tasksSource.map(mapTask)
+      }
+
+      // projectId 保证存在
+      editForm.projectId = (detail.projectId ?? currentId.value ?? record.projectId ?? '').toString()
+    }
+  } catch (e) {
+    console.error('获取项目详情失败', e)
+    // 回退：至少使用列表字段
+    Object.keys(editForm).forEach((key) => {
+      if (key in record && (record as any)[key] !== undefined) {
+        // @ts-expect-error 动态赋值
+        editForm[key] = (record as any)[key]
+      }
+    })
+  }
+
+  // 打开编辑弹窗（与新增分离）
+  editModalVisible.value = true
 }
 
 // 添加表单验证规则
@@ -842,17 +1337,55 @@ const handleSubmit = async () => {
         }))
       }))
 
+    const pickTaskFields = (t: any) => ({
+      mainUserId: t.mainUserId ?? '',
+      planEndDate: normalizeDate(t.planEndDate),
+      planStartDate: normalizeDate(t.planStartDate),
+      scales: t.scales ?? 0,
+      taskCode: t.taskCode ?? '',
+      taskGroupId: t.taskGroupId ?? '',
+      taskName: t.taskName ?? '',
+    })
+    const flattenTasks = (tasks: any[]) => {
+      const result: any[] = []
+      ;(tasks || []).forEach((t) => {
+        result.push(pickTaskFields(t))
+        ;(t.children || []).forEach((c: any) => result.push(pickTaskFields(c)))
+      })
+      return result
+    }
+
     const submitData = {
-      ...form,
-      // 确保projectId字段正确
-      projectId: isEdit.value && currentId.value ? currentId.value : form.projectId,
-      // 处理日期格式 - 确保是字符串格式 YYYY-MM-DD
-      startDate: normalizeDate(form.startDate),
+      auditorId: (form as any).auditorId || '',
+      bonusProvision: (form as any).bonusProvision ?? 0,
+      client: form.client || '',
+      clientContact: form.clientContact || '',
+      clientPhone: form.clientPhone || '',
+      constructionTeamLeaderId: form.constructionTeamLeaderId || '',
+      constructorIds: Array.isArray(form.constructorIds) ? form.constructorIds.join(',') : (form.constructorIds || ''),
+      coverUrl: (form as any).coverUrl || '',
+      duration: (form as any).duration ?? 0,
       endDate: normalizeDate(form.endDate),
-      // 处理施工人员ID - 如果是数组，转换为逗号分隔的字符串
-      constructorIds: Array.isArray(form.constructorIds) ? form.constructorIds.join(',') : form.constructorIds,
-      // 新字段：任务
-      tasks: mapTasks(form.tasks as any[]),
+      equipmentAmortization: (form as any).equipmentAmortization ?? 0,
+      farmAddress: form.farmAddress || '',
+      farmName: form.farmName || '',
+      inspectionContact: form.inspectionContact || '',
+      inspectionPhone: form.inspectionPhone || '',
+      inspectionUnit: form.inspectionUnit || '',
+      laborCost: (form as any).laborCost ?? 0,
+      othersCost: (form as any).othersCost ?? 0,
+      projectBudget: (form as any).projectBudget ?? 0,
+      projectId: isEdit.value && currentId.value ? currentId.value : form.projectId,
+      projectManagerId: form.projectManagerId || '',
+      projectName: form.projectName,
+      projectOrigin: (form as any).projectOrigin || '',
+      qualityOfficerId: form.qualityOfficerId || '',
+      scale: form.scale || '',
+      startDate: normalizeDate(form.startDate),
+      status: (form as any).status ?? 0,
+      tasks: flattenTasks(form.tasks as any[]),
+      transAccomMeals: (form as any).transAccomMeals ?? 0,
+      turbineModel: form.turbineModel || '',
     }
 
     console.log('提交数据:', submitData)
@@ -927,19 +1460,52 @@ const deleteItem = async (record: T.ProjectResp) => {
   }
 }
 
-const viewDetail = (record: T.ProjectResp) => {
+const viewDetail = async (record: T.ProjectResp) => {
   const projectId = record.id || record.projectId
   if (!projectId) {
     Message.error('项目ID不存在')
     return
   }
+  detailVisible.value = true
+  detailLoading.value = true
+  try {
+    // /project/detail/{projectId}
+    const res = await getProjectDetail(projectId)
+    const data = (res as any).data || res || {}
+    // 若后端返回status为数字，补充状态文案
+    if (typeof data.status === 'number' && !data.statusLabel) {
+      data.statusLabel = PROJECT_STATUS_MAP[data.status]
+    }
+    detailData.value = data
 
-  router.push({
-    name: 'ProjectDetail',
-    params: {
-      id: projectId.toString(),
-    },
-  })
+    // 处理任务列表（支持后端直接返回 tasks 或 taskList）
+    const rawTasks: any[] = Array.isArray(data.tasks) ? data.tasks : (Array.isArray(data.taskList) ? data.taskList : [])
+    // 扁平化（包含子任务）并做字段兜底
+    const flatten = (tasks: any[]): any[] => {
+      const result: any[] = []
+      ;(tasks || []).forEach(t => {
+        result.push({
+          taskName: t.taskName ?? '-',
+          mainUserName: t.mainUserName ?? t.mainUserId ?? '-',
+          planStartDate: t.planStartDate ?? '',
+          planEndDate: t.planEndDate ?? '',
+          scales: t.scales ?? '',
+          status: t.status,
+          statusLabel: t.statusLabel ?? (typeof t.status === 'number' ? PROJECT_STATUS_MAP[t.status as 0|1|2] : t.status ?? '-')
+        })
+        if (Array.isArray(t.children) && t.children.length) {
+          result.push(...flatten(t.children))
+        }
+      })
+      return result
+    }
+    detailTasks.value = flatten(rawTasks)
+  } catch (e) {
+    console.error('获取项目详情失败:', e)
+    Message.error('获取项目详情失败')
+  } finally {
+    detailLoading.value = false
+  }
 }
 
 const openImportModal = () => {
diff --git a/src/views/system-resource/device-management/procurement/components/ContractInvoiceModal.vue b/src/views/system-resource/device-management/procurement/components/ContractInvoiceModal.vue
new file mode 100644
index 0000000..be0f7b3
--- /dev/null
+++ b/src/views/system-resource/device-management/procurement/components/ContractInvoiceModal.vue
@@ -0,0 +1,534 @@
+<template>
+  <a-modal
+    :visible="visible"
+    title="合同发票管理"
+    width="800px"
+    :footer="false"
+    @cancel="handleCancel"
+    @update:visible="handleVisibleChange"
+  >
+    <div class="contract-invoice-container">
+      <!-- 设备基本信息 -->
+      <a-card title="设备信息" class="info-card" :bordered="false">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item label="设备名称">
+            {{ equipmentData?.equipmentName }}
+          </a-descriptions-item>
+          <a-descriptions-item label="设备型号">
+            {{ equipmentData?.equipmentModel }}
+          </a-descriptions-item>
+          <a-descriptions-item label="供应商">
+            {{ equipmentData?.supplierName }}
+          </a-descriptions-item>
+          <a-descriptions-item label="采购价格">
+            ¥{{ formatPrice(equipmentData?.purchasePrice || 0) }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+
+      <!-- 合同信息 -->
+      <a-card title="合同信息" class="info-card" :bordered="false">
+        <a-form
+          ref="contractFormRef"
+          :model="contractForm"
+          :rules="contractRules"
+          layout="vertical"
+        >
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="合同编号" name="contractNumber">
+                <a-input
+                  v-model="contractForm.contractNumber"
+                  placeholder="请输入合同编号"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="合同签订日期" name="contractDate">
+                <a-date-picker
+                  v-model="contractForm.contractDate"
+                  placeholder="请选择合同签订日期"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="合同金额" name="contractAmount">
+                <a-input-number
+                  v-model="contractForm.contractAmount"
+                  placeholder="请输入合同金额"
+                  :precision="2"
+                  :min="0"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="合同状态" name="contractStatus">
+                <a-select
+                  v-model="contractForm.contractStatus"
+                  placeholder="请选择合同状态"
+                  allow-clear
+                >
+                  <a-option value="DRAFT">草稿</a-option>
+                  <a-option value="SIGNED">已签订</a-option>
+                  <a-option value="EXECUTING">执行中</a-option>
+                  <a-option value="COMPLETED">已完成</a-option>
+                  <a-option value="TERMINATED">已终止</a-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-form-item label="合同文件" name="contractFile">
+            <a-upload
+              v-model:file-list="contractForm.contractFile"
+              :action="uploadAction"
+              :headers="uploadHeaders"
+              :before-upload="beforeUpload"
+              :on-success="onContractUploadSuccess"
+              :on-error="onUploadError"
+              accept=".pdf,.doc,.docx"
+              :max-count="1"
+            >
+              <a-button>
+                <template #icon>
+                  <IconUpload />
+                </template>
+                上传合同文件
+              </a-button>
+              <template #itemRender="{ file }">
+                <a-space>
+                  <IconFile />
+                  <span>{{ file.name }}</span>
+                  <a-button
+                    type="text"
+                    size="small"
+                    status="danger"
+                    @click="removeContractFile(file)"
+                  >
+                    删除
+                  </a-button>
+                </a-space>
+              </template>
+            </a-upload>
+          </a-form-item>
+          <a-form-item label="合同备注" name="contractRemark">
+            <a-textarea
+              v-model="contractForm.contractRemark"
+              placeholder="请输入合同备注信息"
+              :rows="3"
+              allow-clear
+            />
+          </a-form-item>
+        </a-form>
+      </a-card>
+
+      <!-- 发票信息 -->
+      <a-card title="发票信息" class="info-card" :bordered="false">
+        <a-form
+          ref="invoiceFormRef"
+          :model="invoiceForm"
+          :rules="invoiceRules"
+          layout="vertical"
+        >
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="发票号码" name="invoiceNumber">
+                <a-input
+                  v-model="invoiceForm.invoiceNumber"
+                  placeholder="请输入发票号码"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="发票类型" name="invoiceType">
+                <a-select
+                  v-model="invoiceForm.invoiceType"
+                  placeholder="请选择发票类型"
+                  allow-clear
+                >
+                  <a-option value="VAT_SPECIAL">增值税专用发票</a-option>
+                  <a-option value="VAT_COMMON">增值税普通发票</a-option>
+                  <a-option value="ELECTRONIC">电子发票</a-option>
+                  <a-option value="OTHER">其他</a-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="发票金额" name="invoiceAmount">
+                <a-input-number
+                  v-model="invoiceForm.invoiceAmount"
+                  placeholder="请输入发票金额"
+                  :precision="2"
+                  :min="0"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="开票日期" name="invoiceDate">
+                <a-date-picker
+                  v-model="invoiceForm.invoiceDate"
+                  placeholder="请选择开票日期"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="税率" name="taxRate">
+                <a-input-number
+                  v-model="invoiceForm.taxRate"
+                  placeholder="请输入税率"
+                  :precision="2"
+                  :min="0"
+                  :max="100"
+                  style="width: 100%"
+                  addon-after="%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="税额" name="taxAmount">
+                <a-input-number
+                  v-model="invoiceForm.taxAmount"
+                  placeholder="税额将自动计算"
+                  :precision="2"
+                  :min="0"
+                  style="width: 100%"
+                  disabled
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-form-item label="发票文件" name="invoiceFile">
+            <a-upload
+              v-model:file-list="invoiceForm.invoiceFile"
+              :action="uploadAction"
+              :headers="uploadHeaders"
+              :before-upload="beforeUpload"
+              :on-success="onInvoiceUploadSuccess"
+              :on-error="onUploadError"
+              accept=".pdf,.jpg,.jpeg,.png"
+              :max-count="1"
+            >
+              <a-button>
+                <template #icon>
+                  <IconUpload />
+                </template>
+                上传发票文件
+              </a-button>
+              <template #itemRender="{ file }">
+                <a-space>
+                  <IconFile />
+                  <span>{{ file.name }}</span>
+                  <a-button
+                    type="text"
+                    size="small"
+                    status="danger"
+                    @click="removeInvoiceFile(file)"
+                  >
+                    删除
+                  </a-button>
+                </a-space>
+              </template>
+            </a-upload>
+          </a-form-item>
+          <a-form-item label="发票备注" name="invoiceRemark">
+            <a-textarea
+              v-model="invoiceForm.invoiceRemark"
+              placeholder="请输入发票备注信息"
+              :rows="3"
+              allow-clear
+            />
+          </a-form-item>
+        </a-form>
+      </a-card>
+
+      <!-- 操作按钮 -->
+      <div class="action-buttons">
+        <a-space>
+          <a-button @click="handleCancel">取消</a-button>
+          <a-button type="primary" @click="handleSave" :loading="saving">
+            保存
+          </a-button>
+          <a-button 
+            type="primary" 
+            @click="handleComplete" 
+            :loading="saving"
+            :disabled="!canComplete"
+          >
+            完成并进入收货阶段
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, watch } from 'vue'
+import { IconUpload, IconFile } from '@arco-design/web-vue/es/icon'
+import message from '@arco-design/web-vue/es/message'
+import type { EquipmentResp } from '@/apis/equipment/type'
+
+interface Props {
+  visible: boolean
+  equipmentData: EquipmentResp | null
+}
+
+interface ContractForm {
+  contractNumber: string
+  contractDate: string | null
+  contractAmount: number | null
+  contractStatus: string
+  contractFile: any[]
+  contractRemark: string
+}
+
+interface InvoiceForm {
+  invoiceNumber: string
+  invoiceType: string
+  invoiceAmount: number | null
+  invoiceDate: string | null
+  taxRate: number | null
+  taxAmount: number | null
+  invoiceFile: any[]
+  invoiceRemark: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'success': []
+}>()
+
+// 表单引用
+const contractFormRef = ref()
+const invoiceFormRef = ref()
+
+// 保存状态
+const saving = ref(false)
+
+// 合同表单
+const contractForm = reactive<ContractForm>({
+  contractNumber: '',
+  contractDate: null,
+  contractAmount: null,
+  contractStatus: 'DRAFT',
+  contractFile: [],
+  contractRemark: ''
+})
+
+// 发票表单
+const invoiceForm = reactive<InvoiceForm>({
+  invoiceNumber: '',
+  invoiceType: '',
+  invoiceAmount: null,
+  invoiceDate: null,
+  taxRate: null,
+  taxAmount: null,
+  invoiceFile: [],
+  invoiceRemark: ''
+})
+
+// 表单验证规则
+const contractRules = {
+  contractNumber: [
+    { required: true, message: '请输入合同编号', trigger: 'blur' }
+  ],
+  contractDate: [
+    { required: true, message: '请选择合同签订日期', trigger: 'change' }
+  ],
+  contractAmount: [
+    { required: true, message: '请输入合同金额', trigger: 'blur' }
+  ],
+  contractStatus: [
+    { required: true, message: '请选择合同状态', trigger: 'change' }
+  ]
+}
+
+const invoiceRules = {
+  invoiceNumber: [
+    { required: true, message: '请输入发票号码', trigger: 'blur' }
+  ],
+  invoiceType: [
+    { required: true, message: '请选择发票类型', trigger: 'change' }
+  ],
+  invoiceAmount: [
+    { required: true, message: '请输入发票金额', trigger: 'blur' }
+  ],
+  invoiceDate: [
+    { required: true, message: '请选择开票日期', trigger: 'change' }
+  ],
+  taxRate: [
+    { required: true, message: '请输入税率', trigger: 'blur' }
+  ]
+}
+
+// 上传配置
+const uploadAction = '/api/file/upload'
+const uploadHeaders = {
+  // 根据实际需求设置上传头
+}
+
+// 计算是否可以完成
+const canComplete = computed(() => {
+  return contractForm.contractStatus === 'SIGNED' && 
+         invoiceForm.invoiceNumber && 
+         invoiceForm.invoiceAmount
+})
+
+// 监听发票金额和税率变化，自动计算税额
+watch([() => invoiceForm.invoiceAmount, () => invoiceForm.taxRate], ([amount, rate]) => {
+  if (amount && rate) {
+    invoiceForm.taxAmount = Number((amount * rate / 100).toFixed(2))
+  } else {
+    invoiceForm.taxAmount = null
+  }
+})
+
+// 格式化价格
+const formatPrice = (price: number) => {
+  return price.toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })
+}
+
+// 上传前检查
+const beforeUpload = (file: File) => {
+  const isValidSize = file.size / 1024 / 1024 < 10 // 10MB限制
+  if (!isValidSize) {
+    message.error('文件大小不能超过10MB')
+    return false
+  }
+  return true
+}
+
+// 合同文件上传成功
+const onContractUploadSuccess = (response: any, file: any) => {
+  console.log('合同文件上传成功:', response, file)
+  message.success('合同文件上传成功')
+}
+
+// 发票文件上传成功
+const onInvoiceUploadSuccess = (response: any, file: any) => {
+  console.log('发票文件上传成功:', response, file)
+  message.success('发票文件上传成功')
+}
+
+// 上传失败
+const onUploadError = (error: any) => {
+  console.error('文件上传失败:', error)
+  message.error('文件上传失败')
+}
+
+// 删除合同文件
+const removeContractFile = (file: any) => {
+  const index = contractForm.contractFile.findIndex(f => f.uid === file.uid)
+  if (index > -1) {
+    contractForm.contractFile.splice(index, 1)
+  }
+}
+
+// 删除发票文件
+const removeInvoiceFile = (file: any) => {
+  const index = invoiceForm.invoiceFile.findIndex(f => f.uid === file.uid)
+  if (index > -1) {
+    invoiceForm.invoiceFile.splice(index, 1)
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 处理 visible 变化
+const handleVisibleChange = (newVisible: boolean) => {
+  emit('update:visible', newVisible)
+}
+
+// 保存
+const handleSave = async () => {
+  try {
+    saving.value = true
+    
+    // 验证合同表单
+    await contractFormRef.value?.validate()
+    
+    // 验证发票表单
+    await invoiceFormRef.value?.validate()
+    
+    // 这里调用API保存数据
+    console.log('保存合同发票信息:', {
+      contract: contractForm,
+      invoice: invoiceForm,
+      equipmentId: props.equipmentData?.equipmentId
+    })
+    
+    message.success('保存成功')
+    
+  } catch (error) {
+    console.error('保存失败:', error)
+    message.error('保存失败，请检查表单信息')
+  } finally {
+    saving.value = false
+  }
+}
+
+// 完成并进入收货阶段
+const handleComplete = async () => {
+  try {
+    saving.value = true
+    
+    // 验证表单
+    await contractFormRef.value?.validate()
+    await invoiceFormRef.value?.validate()
+    
+    // 这里调用API完成合同发票管理
+    console.log('完成合同发票管理:', {
+      contract: contractForm,
+      invoice: invoiceForm,
+      equipmentId: props.equipmentData?.equipmentId
+    })
+    
+    message.success('合同发票管理完成，可以进入收货阶段')
+    emit('success')
+    emit('update:visible', false)
+    
+  } catch (error) {
+    console.error('操作失败:', error)
+    message.error('操作失败，请检查表单信息')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.contract-invoice-container {
+  .info-card {
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  .action-buttons {
+    text-align: center;
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--color-border);
+  }
+}
+</style>
diff --git a/src/views/system-resource/device-management/procurement/components/PaymentModal.vue b/src/views/system-resource/device-management/procurement/components/PaymentModal.vue
index 81b7d52..8535ad2 100644
--- a/src/views/system-resource/device-management/procurement/components/PaymentModal.vue
+++ b/src/views/system-resource/device-management/procurement/components/PaymentModal.vue
@@ -1,474 +1,380 @@
 <template>
   <a-modal
     :visible="visible"
-    title="设备付款"
-    width="900px"
-    :confirm-loading="loading"
+    title="付款申请"
+    width="800px"
+    :footer="false"
     @cancel="handleCancel"
-    @ok="handleSubmit"
+    @update:visible="handleVisibleChange"
   >
-    <a-form
-      ref="formRef"
-      :model="formData"
-      :rules="rules"
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
-      layout="vertical"
-    >
-      <!-- 基本信息 -->
-      <a-card title="设备信息" class="detail-card" :bordered="false">
+    <div class="payment-application-container">
+      <!-- 设备基本信息 -->
+      <a-card title="设备信息" class="info-card" :bordered="false">
         <a-descriptions :column="2" bordered>
           <a-descriptions-item label="设备名称">
-            {{ equipmentData?.equipmentName || '-' }}
-          </a-descriptions-item>
-          <a-descriptions-item label="设备类型">
-            {{ equipmentData?.equipmentType || '-' }}
+            {{ equipmentData?.equipmentName }}
           </a-descriptions-item>
           <a-descriptions-item label="设备型号">
-            {{ equipmentData?.equipmentModel || '-' }}
+            {{ equipmentData?.equipmentModel }}
           </a-descriptions-item>
-          <a-col :span="12">
-            <a-form-item label="品牌">
-              {{ equipmentData?.brand || '-' }}
-            </a-form-item>
-          </a-col>
           <a-descriptions-item label="供应商">
-            {{ equipmentData?.supplierName || '-' }}
-          </a-descriptions-item>
-          <a-descriptions-item label="采购订单">
-            {{ equipmentData?.purchaseOrder || '-' }}
+            {{ equipmentData?.supplierName }}
           </a-descriptions-item>
           <a-descriptions-item label="采购价格">
-            ¥{{ equipmentData?.purchasePrice || '-' }}
-          </a-descriptions-item>
-          <a-descriptions-item label="采购数量">
-            {{ equipmentData?.quantity || '-' }}
+            ¥{{ formatPrice(equipmentData?.purchasePrice || 0) }}
           </a-descriptions-item>
         </a-descriptions>
       </a-card>
 
-      <!-- 支付信息 -->
-      <a-card title="支付信息" class="detail-card" :bordered="false">
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="支付方式" field="paymentMethod" required>
-              <a-select
-                v-model="formData.paymentMethod"
-                placeholder="请选择支付方式"
-                style="width: 100%"
-              >
-                <a-option value="银行转账">银行转账</a-option>
-                <a-option value="现金">现金</a-option>
-                <a-option value="支票">支票</a-option>
-                <a-option value="信用卡">信用卡</a-option>
-                <a-option value="其他">其他</a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="支付金额" field="paymentAmount" required>
-              <a-input-number
-                v-model="formData.paymentAmount"
-                placeholder="请输入支付金额"
-                :min="0.01"
-                :max="999999.99"
-                :precision="2"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
+      <!-- 付款申请信息 -->
+      <a-card title="付款申请信息" class="info-card" :bordered="false">
+        <a-form
+          ref="paymentFormRef"
+          :model="paymentForm"
+          :rules="paymentRules"
+          layout="vertical"
+        >
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="申请日期" name="applicationDate">
+                <a-date-picker
+                  v-model="paymentForm.applicationDate"
+                  placeholder="请选择申请日期"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="部门" name="department">
+                <a-input
+                  v-model="paymentForm.department"
+                  placeholder="请输入部门名称"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
 
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="支付时间" field="paymentTime" required>
-              <a-date-picker
-                v-model="formData.paymentTime"
-                show-time
-                format="YYYY-MM-DD HH:mm:ss"
-                placeholder="请选择支付时间"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="支付人" field="paymentPerson" required>
-              <a-input
-                v-model="formData.paymentPerson"
-                placeholder="请输入支付人姓名"
-                show-word-limit
-                :max-length="50"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="归属项目" name="projectName">
+                <a-input
+                  v-model="paymentForm.projectName"
+                  placeholder="请输入项目名称"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="支出类别" name="expenseCategory">
+                <a-select
+                  v-model="paymentForm.expenseCategory"
+                  placeholder="请选择支出类别"
+                  allow-clear
+                >
+                  <a-option value="EXPENSE_TRANSPORT">a.费用支出-交通费</a-option>
+                  <a-option value="EXPENSE_ACCOMMODATION">a.费用支出-住宿费</a-option>
+                  <a-option value="EXPENSE_TOOLS">a.费用支出-小工具</a-option>
+                  <a-option value="EXPENSE_VEHICLE_MAINTENANCE">a.费用支出-车辆保养</a-option>
+                  <a-option value="PROCUREMENT_DRONE">b.采购支出-设备采购-无人机</a-option>
+                  <a-option value="PROCUREMENT_VEHICLE">b.采购支出-设备采购-车</a-option>
+                  <a-option value="PROCUREMENT_COMPUTER">b.采购支出-设备采购-计算机</a-option>
+                  <a-option value="SALARY">c.工资支出</a-option>
+                  <a-option value="TAX">d.税款支出</a-option>
+                  <a-option value="OTHER">f.其他支出</a-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
 
-        <a-row :gutter="16">
-          <a-col :span="24">
-            <a-form-item label="支付备注" field="paymentRemark">
-              <a-textarea
-                v-model="formData.paymentRemark"
-                placeholder="请输入支付备注"
-                :rows="3"
-                show-word-limit
-                :max-length="200"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="事由" name="reason">
+                <a-textarea
+                  v-model="paymentForm.reason"
+                  placeholder="请输入付款事由"
+                  :rows="3"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="经手人" name="handler">
+                <a-input
+                  v-model="paymentForm.handler"
+                  placeholder="请输入经手人姓名"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="金额" name="amount">
+                <a-input-number
+                  v-model="paymentForm.amount"
+                  placeholder="请输入付款金额"
+                  :precision="2"
+                  :min="0"
+                  style="width: 100%"
+                  addon-before="¥"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="收款单位" name="payeeUnit">
+                <a-input
+                  v-model="paymentForm.payeeUnit"
+                  placeholder="请输入收款单位名称"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item label="收款账号" name="payeeAccount">
+            <a-input
+              v-model="paymentForm.payeeAccount"
+              placeholder="请输入收款账号"
+              allow-clear
+            />
+          </a-form-item>
+
+          <!-- 发票附件及其他附件 -->
+          <a-form-item label="发票附件" name="invoiceAttachments">
+            <a-upload
+              v-model:file-list="paymentForm.invoiceAttachments"
+              :action="uploadAction"
+              :headers="uploadHeaders"
+              :before-upload="beforeUpload"
+              :on-success="onInvoiceUploadSuccess"
+              :on-error="onUploadError"
+              accept=".pdf,.jpg,.jpeg,.png"
+              :max-count="5"
+            >
+              <a-button>
+                <template #icon>
+                  <IconUpload />
+                </template>
+                上传发票附件
+              </a-button>
+              <template #itemRender="{ file }">
+                <a-space>
+                  <IconFile />
+                  <span>{{ file.name }}</span>
+                  <a-button
+                    type="text"
+                    size="small"
+                    status="danger"
+                    @click="removeInvoiceAttachment(file)"
+                  >
+                    删除
+                  </a-button>
+                </a-space>
+              </template>
+            </a-upload>
+          </a-form-item>
+
+          <!-- 银行付款凭证 -->
+          <a-form-item label="银行付款凭证" name="bankPaymentVouchers">
+            <a-upload
+              v-model:file-list="paymentForm.bankPaymentVouchers"
+              :action="uploadAction"
+              :headers="uploadHeaders"
+              :before-upload="beforeUpload"
+              :on-success="onBankVoucherUploadSuccess"
+              :on-error="onUploadError"
+              accept=".pdf,.jpg,.jpeg,.png"
+              :max-count="3"
+            >
+              <a-button>
+                <template #icon>
+                  <IconUpload />
+                </template>
+                上传银行付款凭证
+              </a-button>
+              <template #itemRender="{ file }">
+                <a-space>
+                  <IconFile />
+                  <span>{{ file.name }}</span>
+                  <a-button
+                    type="text"
+                    size="small"
+                    status="danger"
+                    @click="removeBankVoucher(file)"
+                  >
+                    删除
+                  </a-button>
+                </a-space>
+              </template>
+            </a-upload>
+          </a-form-item>
+
+          <a-form-item label="备注" name="remarks">
+            <a-textarea
+              v-model="paymentForm.remarks"
+              placeholder="请输入备注信息"
+              :rows="3"
+              allow-clear
+            />
+          </a-form-item>
+        </a-form>
       </a-card>
 
-      <!-- 发票信息 -->
-      <a-card title="发票信息" class="detail-card" :bordered="false">
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="发票类型" field="invoiceType" required>
-              <a-select
-                v-model="formData.invoiceType"
-                placeholder="请选择发票类型"
-                style="width: 100%"
-              >
-                <a-option value="增值税专用发票">增值税专用发票</a-option>
-                <a-option value="增值税普通发票">增值税普通发票</a-option>
-                <a-option value="电子发票">电子发票</a-option>
-                <a-option value="其他">其他</a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="发票号码" field="invoiceNumber" required>
-              <a-input
-                v-model="formData.invoiceNumber"
-                placeholder="请输入发票号码"
-                show-word-limit
-                :max-length="50"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="开票日期" field="invoiceDate" required>
-              <a-date-picker
-                v-model="formData.invoiceDate"
-                format="YYYY-MM-DD"
-                placeholder="请选择开票日期"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="发票金额" field="invoiceAmount" required>
-              <a-input-number
-                v-model="formData.invoiceAmount"
-                placeholder="请输入发票金额"
-                :min="0.01"
-                :max="999999.99"
-                :precision="2"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="税率(%)" field="taxRate" required>
-              <a-input-number
-                v-model="formData.taxRate"
-                placeholder="请输入税率"
-                :min="0"
-                :max="100"
-                :precision="2"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="税额" field="taxAmount" required>
-              <a-input-number
-                v-model="formData.taxAmount"
-                placeholder="请输入税额"
-                :min="0"
-                :max="999999.99"
-                :precision="2"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="不含税金额" field="amountWithoutTax" required>
-              <a-input-number
-                v-model="formData.amountWithoutTax"
-                placeholder="请输入不含税金额"
-                :min="0.01"
-                :max="999999.99"
-                :precision="2"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-card>
-
-      <!-- 合同信息 -->
-      <a-card title="合同信息" class="detail-card" :bordered="false">
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="合同编号" field="contractNumber" required>
-              <a-input
-                v-model="formData.contractNumber"
-                placeholder="请输入合同编号"
-                show-word-limit
-                :max-length="50"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="合同金额" field="contractAmount" required>
-              <a-input-number
-                v-model="formData.contractAmount"
-                placeholder="请输入合同金额"
-                :min="0.01"
-                :max="999999.99"
-                :precision="2"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="签订日期" field="contractDate" required>
-              <a-date-picker
-                v-model="formData.contractDate"
-                format="YYYY-MM-DD"
-                placeholder="请选择签订日期"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="付款条件" field="paymentTerms" required>
-              <a-input
-                v-model="formData.paymentTerms"
-                placeholder="请输入付款条件"
-                show-word-limit
-                :max-length="100"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="付款期限" field="paymentDeadline" required>
-              <a-date-picker
-                v-model="formData.paymentDeadline"
-                format="YYYY-MM-DD"
-                placeholder="请选择付款期限"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-card>
-    </a-form>
+      <!-- 操作按钮 -->
+      <div class="action-buttons">
+        <a-space>
+          <a-button @click="handleCancel">取消</a-button>
+          <a-button type="primary" @click="handleSubmit" :loading="submitting">
+            提交付款申请
+          </a-button>
+        </a-space>
+      </div>
+    </div>
   </a-modal>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from 'vue'
-import { Message } from '@arco-design/web-vue'
-import type { FormInstance } from '@arco-design/web-vue'
-import type { EquipmentResp, PaymentRequest } from '@/apis/equipment/type'
-import { equipmentProcurementApi } from '@/apis/equipment/procurement'
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { IconUpload, IconFile } from '@arco-design/web-vue/es/icon'
+import message from '@arco-design/web-vue/es/message'
+import type { EquipmentResp } from '@/apis/equipment/type'
 
 interface Props {
   visible: boolean
-  equipmentData?: EquipmentResp | null
+  equipmentData: EquipmentResp | null
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  visible: false,
-  equipmentData: null,
-})
+interface PaymentForm {
+  applicationDate: string | null
+  department: string
+  projectName: string
+  expenseCategory: string
+  reason: string
+  handler: string
+  amount: number | null
+  payeeUnit: string
+  payeeAccount: string
+  invoiceAttachments: any[]
+  bankPaymentVouchers: any[]
+  remarks: string
+}
 
+const props = defineProps<Props>()
 const emit = defineEmits<{
   'update:visible': [value: boolean]
   'success': []
 }>()
 
-const formRef = ref<FormInstance>()
-const loading = ref(false)
+// 表单引用
+const paymentFormRef = ref()
 
-// 表单数据
-const formData = reactive<PaymentRequest>({
-  paymentMethod: '',
-  paymentAmount: 0,
-  paymentTime: '',
-  paymentPerson: '',
-  paymentRemark: '',
-  invoiceType: '',
-  invoiceNumber: '',
-  invoiceDate: '',
-  invoiceAmount: 0,
-  taxRate: 13,
-  taxAmount: 0,
-  amountWithoutTax: 0,
-  contractNumber: '',
-  contractAmount: 0,
-  contractDate: '',
-  paymentTerms: '',
-  paymentDeadline: '',
-})
+// 提交状态
+const submitting = ref(false)
 
-// 计算税额和不含税金额
-const calculatedTaxAmount = computed(() => {
-  if (formData.invoiceAmount && formData.taxRate) {
-    return (formData.invoiceAmount * formData.taxRate) / 100
-  }
-  return 0
-})
-
-const calculatedAmountWithoutTax = computed(() => {
-  if (formData.invoiceAmount && formData.taxAmount) {
-    return formData.invoiceAmount - formData.taxAmount
-  }
-  return 0
-})
-
-// 监听发票金额和税率变化，自动计算税额和不含税金额
-watch([() => formData.invoiceAmount, () => formData.taxRate], () => {
-  formData.taxAmount = calculatedTaxAmount.value
-  formData.amountWithoutTax = calculatedAmountWithoutTax.value
+// 付款申请表单
+const paymentForm = reactive<PaymentForm>({
+  applicationDate: null,
+  department: '',
+  projectName: '',
+  expenseCategory: '',
+  reason: '',
+  handler: '',
+  amount: null,
+  payeeUnit: '',
+  payeeAccount: '',
+  invoiceAttachments: [],
+  bankPaymentVouchers: [],
+  remarks: ''
 })
 
 // 表单验证规则
-const rules = {
-  paymentMethod: [
-    { required: true, message: '请选择支付方式' }
+const paymentRules = {
+  applicationDate: [
+    { required: true, message: '请选择申请日期', trigger: 'change' }
   ],
-  paymentAmount: [
-    { required: true, message: '请输入支付金额' },
-    { type: 'number', min: 0.01, message: '支付金额必须大于0' }
+  department: [
+    { required: true, message: '请输入部门名称', trigger: 'blur' }
   ],
-  paymentTime: [
-    { required: true, message: '请选择支付时间' }
+  projectName: [
+    { required: true, message: '请输入项目名称', trigger: 'blur' }
   ],
-  paymentPerson: [
-    { required: true, message: '请输入支付人姓名' },
-    { min: 2, max: 50, message: '支付人姓名长度应在2-50个字符之间' }
+  expenseCategory: [
+    { required: true, message: '请选择支出类别', trigger: 'change' }
   ],
-  invoiceType: [
-    { required: true, message: '请选择发票类型' }
+  reason: [
+    { required: true, message: '请输入付款事由', trigger: 'blur' }
   ],
-  invoiceNumber: [
-    { required: true, message: '请输入发票号码' },
-    { min: 2, max: 50, message: '发票号码长度应在2-50个字符之间' }
+  handler: [
+    { required: true, message: '请输入经手人姓名', trigger: 'blur' }
   ],
-  invoiceDate: [
-    { required: true, message: '请选择开票日期' }
+  amount: [
+    { required: true, message: '请输入付款金额', trigger: 'blur' }
   ],
-  invoiceAmount: [
-    { required: true, message: '请输入发票金额' },
-    { type: 'number', min: 0.01, message: '发票金额必须大于0' }
-  ],
-  taxRate: [
-    { required: true, message: '请输入税率' },
-    { type: 'number', min: 0, max: 100, message: '税率应在0-100之间' }
-  ],
-  contractNumber: [
-    { required: true, message: '请输入合同编号' },
-    { min: 2, max: 50, message: '合同编号长度应在2-50个字符之间' }
-  ],
-  contractAmount: [
-    { required: true, message: '请输入合同金额' },
-    { type: 'number', min: 0.01, message: '合同金额必须大于0' }
-  ],
-  contractDate: [
-    { required: true, message: '请选择签订日期' }
-  ],
-  paymentTerms: [
-    { required: true, message: '请输入付款条件' },
-    { min: 2, max: 100, message: '付款条件长度应在2-100个字符之间' }
-  ],
-  paymentDeadline: [
-    { required: true, message: '请选择付款期限' }
+  payeeUnit: [
+    { required: true, message: '请输入收款单位名称', trigger: 'blur' }
   ],
+  payeeAccount: [
+    { required: true, message: '请输入收款账号', trigger: 'blur' }
+  ]
 }
 
-// 监听弹窗显示状态
-watch(() => props.visible, (visible) => {
-  if (visible && props.equipmentData) {
-    // 重置表单并设置默认值
-    Object.assign(formData, {
-      paymentMethod: '',
-      paymentAmount: props.equipmentData.purchasePrice || 0,
-      paymentTime: '',
-      paymentPerson: '',
-      paymentRemark: '',
-      invoiceType: '增值税专用发票',
-      invoiceNumber: '',
-      invoiceDate: '',
-      invoiceAmount: props.equipmentData.purchasePrice || 0,
-      taxRate: 13,
-      taxAmount: 0,
-      amountWithoutTax: 0,
-      contractNumber: props.equipmentData.purchaseOrder || '',
-      contractAmount: props.equipmentData.purchasePrice || 0,
-      contractDate: '',
-      paymentTerms: '货到付款',
-      paymentDeadline: '',
-    })
-    
-    // 计算税额和不含税金额
-    formData.taxAmount = calculatedTaxAmount.value
-    formData.amountWithoutTax = calculatedAmountWithoutTax.value
-    
-    formRef.value?.clearValidate()
+// 上传配置
+const uploadAction = '/api/file/upload'
+const uploadHeaders = {
+  // 根据实际需求设置上传头
+}
+
+// 格式化价格
+const formatPrice = (price: number) => {
+  return price.toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })
+}
+
+// 上传前检查
+const beforeUpload = (file: File) => {
+  const isValidSize = file.size / 1024 / 1024 < 10 // 10MB限制
+  if (!isValidSize) {
+    message.error('文件大小不能超过10MB')
+    return false
   }
-})
+  return true
+}
 
-// 提交表单
-const handleSubmit = async () => {
-  try {
-    await formRef.value?.validate()
-    loading.value = true
-    
-    if (!props.equipmentData?.equipmentId) {
-      throw new Error('设备ID不能为空')
-    }
+// 发票附件上传成功
+const onInvoiceUploadSuccess = (response: any, file: any) => {
+  console.log('发票附件上传成功:', response, file)
+  message.success('发票附件上传成功')
+}
 
-    // 格式化时间
-    const paymentTime = formData.paymentTime ? new Date(formData.paymentTime).toISOString() : new Date().toISOString()
-    const invoiceDate = formData.invoiceDate ? new Date(formData.invoiceDate).toISOString() : new Date().toISOString()
-    const contractDate = formData.contractDate ? new Date(formData.contractDate).toISOString() : new Date().toISOString()
-    const paymentDeadline = formData.paymentDeadline ? new Date(formData.paymentDeadline).toISOString() : new Date().toISOString()
-    
-    const requestData: PaymentRequest = {
-      ...formData,
-      paymentTime,
-      invoiceDate,
-      contractDate,
-      paymentDeadline,
-    }
+// 银行付款凭证上传成功
+const onBankVoucherUploadSuccess = (response: any, file: any) => {
+  console.log('银行付款凭证上传成功:', response, file)
+  message.success('银行付款凭证上传成功')
+}
 
-    await equipmentProcurementApi.makePayment(props.equipmentData.equipmentId, requestData)
-    
-    Message.success('付款成功')
-    emit('success')
-    emit('update:visible', false)
-  } catch (error: any) {
-    console.error('付款失败:', error)
-    Message.error(error?.message || '付款失败，请检查表单信息')
-  } finally {
-    loading.value = false
+// 上传失败
+const onUploadError = (error: any) => {
+  console.error('文件上传失败:', error)
+  message.error('文件上传失败')
+}
+
+// 删除发票附件
+const removeInvoiceAttachment = (file: any) => {
+  const index = paymentForm.invoiceAttachments.findIndex(f => f.uid === file.uid)
+  if (index > -1) {
+    paymentForm.invoiceAttachments.splice(index, 1)
+  }
+}
+
+// 删除银行付款凭证
+const removeBankVoucher = (file: any) => {
+  const index = paymentForm.bankPaymentVouchers.findIndex(f => f.uid === file.uid)
+  if (index > -1) {
+    paymentForm.bankPaymentVouchers.splice(index, 1)
   }
 }
 
@@ -476,30 +382,54 @@ const handleSubmit = async () => {
 const handleCancel = () => {
   emit('update:visible', false)
 }
+
+// 处理 visible 变化
+const handleVisibleChange = (newVisible: boolean) => {
+  emit('update:visible', newVisible)
+}
+
+// 提交付款申请
+const handleSubmit = async () => {
+  try {
+    submitting.value = true
+    
+    // 验证表单
+    await paymentFormRef.value?.validate()
+    
+    // 这里调用API提交付款申请
+    console.log('提交付款申请:', {
+      ...paymentForm,
+      equipmentId: props.equipmentData?.equipmentId
+    })
+    
+    message.success('付款申请提交成功')
+    emit('success')
+    emit('update:visible', false)
+    
+  } catch (error) {
+    console.error('提交失败:', error)
+    message.error('提交失败，请检查表单信息')
+  } finally {
+    submitting.value = false
+  }
+}
 </script>
 
 <style scoped lang="scss">
-.detail-card {
-  margin-bottom: 16px;
+.payment-application-container {
+  .info-card {
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
   
-  &:last-child {
-    margin-bottom: 0;
+  .action-buttons {
+    text-align: center;
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--color-border);
   }
 }
-
-.arco-form-item {
-  margin-bottom: 16px;
-}
-
-.arco-input,
-.arco-select,
-.arco-input-number,
-.arco-date-picker,
-.arco-textarea {
-  border-radius: 6px;
-}
-
-.arco-textarea {
-  resize: vertical;
-}
 </style>
diff --git a/src/views/system-resource/device-management/procurement/components/ProcurementModal.vue b/src/views/system-resource/device-management/procurement/components/ProcurementModal.vue
index 260162c..a84a405 100644
--- a/src/views/system-resource/device-management/procurement/components/ProcurementModal.vue
+++ b/src/views/system-resource/device-management/procurement/components/ProcurementModal.vue
@@ -87,11 +87,15 @@
               <a-form-item label="序列号" field="equipmentSn">
                 <a-input
                   v-model="formData.equipmentSn"
-                  placeholder="请输入序列号"
-                  :disabled="isView"
+                  placeholder="选择设备类型后自动生成"
+                  :disabled="true"
                   show-word-limit
                   :max-length="100"
                 />
+                <div class="field-tip">
+                  <IconInfoCircle style="color: #1890ff; margin-right: 4px;" />
+                  选择设备类型后自动生成，格式：设备类型+顺序号+日期
+                </div>
               </a-form-item>
             </a-col>
           </a-row>
@@ -528,6 +532,7 @@ import { Message } from '@arco-design/web-vue'
 import type { FormInstance } from '@arco-design/web-vue'
 import { equipmentProcurementApi } from '@/apis/equipment/procurement'
 import type { EquipmentResp, EquipmentReq } from '@/apis/equipment/type'
+import { IconInfoCircle } from '@arco-design/web-vue/es/icon'
 
 interface Props {
   visible: boolean
@@ -692,6 +697,40 @@ watch([() => formData.unitPrice, () => formData.quantity], ([newUnitPrice, newQu
   }
 })
 
+// 生成设备序列号
+const generateEquipmentSn = (equipmentType: string) => {
+  // 获取当前时间戳作为顺序号
+  const timestamp = Date.now()
+  const orderNumber = timestamp.toString().slice(-6) // 取后6位作为顺序号
+  
+  // 获取设备类型简称
+  const typeMap: Record<string, string> = {
+    'detection': 'DET',
+    'security': 'SEC', 
+    'office': 'OFF',
+    'car': 'CAR',
+    'other': 'OTH'
+  }
+  const typeCode = typeMap[equipmentType] || 'OTH'
+  
+  // 格式化当前时间（年月日）
+  const now = new Date()
+  const dateStr = now.getFullYear().toString().slice(-2) + 
+                  (now.getMonth() + 1).toString().padStart(2, '0') + 
+                  now.getDate().toString().padStart(2, '0')
+  
+  // 生成序列号：设备类型+顺序号+当前时间
+  return `${typeCode}${orderNumber}${dateStr}`
+}
+
+// 监听设备类型变化，自动生成序列号
+watch(() => formData.equipmentType, (newType) => {
+  if (newType && !formData.equipmentSn) {
+    // 只有在序列号为空时才自动生成
+    formData.equipmentSn = generateEquipmentSn(newType)
+  }
+})
+
 // 初始化表单数据
 const initFormData = () => {
   if (props.procurementData) {
@@ -841,7 +880,7 @@ const fillTestData = () => {
   const nextMaintenanceTime = nextMaintenanceDate.toISOString().slice(0, 19).replace('T', ' ')
   
   // 生成随机序列号
-  const randomSn = 'SN' + Math.random().toString(36).substr(2, 8).toUpperCase()
+  const randomSn = generateEquipmentSn('detection')
   
   // 生成随机资产编号
   const randomAssetCode = 'ZC' + Math.random().toString(36).substr(2, 6).toUpperCase()
@@ -949,6 +988,15 @@ const handleCancel = () => {
       color: var(--color-text-1);
       margin-bottom: 8px;
     }
+    
+    .field-tip {
+      margin-top: 4px;
+      font-size: 12px;
+      color: var(--color-text-3);
+      display: flex;
+      align-items: center;
+      line-height: 1.4;
+    }
   }
   
   .arco-input,
diff --git a/src/views/system-resource/device-management/procurement/components/ReceiptModal.vue b/src/views/system-resource/device-management/procurement/components/ReceiptModal.vue
index 17ebc74..11264ca 100644
--- a/src/views/system-resource/device-management/procurement/components/ReceiptModal.vue
+++ b/src/views/system-resource/device-management/procurement/components/ReceiptModal.vue
@@ -27,9 +27,15 @@
           <a-descriptions-item label="设备型号">
             {{ equipmentData?.equipmentModel || '-' }}
           </a-descriptions-item>
+          <a-descriptions-item label="设备序列号">
+            {{ equipmentData?.equipmentSn || '-' }}
+          </a-descriptions-item>
           <a-descriptions-item label="品牌">
             {{ equipmentData?.brand || '-' }}
           </a-descriptions-item>
+          <a-descriptions-item label="配置规格">
+            {{ equipmentData?.specification || '-' }}
+          </a-descriptions-item>
           <a-descriptions-item label="供应商">
             {{ equipmentData?.supplierName || '-' }}
           </a-descriptions-item>
@@ -370,6 +376,32 @@ watch(() => props.equipmentData, () => {
   }
 }, { deep: true })
 
+// 生成设备序列号
+const generateEquipmentSn = (equipmentType: string, inStockTime: string) => {
+  // 获取当前时间戳作为顺序号
+  const timestamp = Date.now()
+  const orderNumber = timestamp.toString().slice(-6) // 取后6位作为顺序号
+  
+  // 获取设备类型简称
+  const typeMap: Record<string, string> = {
+    'detection': 'DET',
+    'security': 'SEC', 
+    'office': 'OFF',
+    'car': 'CAR',
+    'other': 'OTH'
+  }
+  const typeCode = typeMap[equipmentType] || 'OTH'
+  
+  // 格式化入库时间（年月日）
+  const date = new Date(inStockTime)
+  const dateStr = date.getFullYear().toString().slice(-2) + 
+                  (date.getMonth() + 1).toString().padStart(2, '0') + 
+                  date.getDate().toString().padStart(2, '0')
+  
+  // 生成序列号：设备类型+顺序号+入库时间
+  return `${typeCode}${orderNumber}${dateStr}`
+}
+
 // 提交表单
 const handleSubmit = async () => {
   try {
@@ -380,13 +412,37 @@ const handleSubmit = async () => {
       throw new Error('设备ID不能为空')
     }
 
-    console.log('📦 开始提交收货数据...')
-    console.log('📦 设备数据:', props.equipmentData)
-    console.log('📦 表单数据:', formData)
-
-    // 构建收货请求数据
-    const receiptData: ReceiptRequest = {
-      // 收货特有信息
+    // 1. 获取采购阶段的设备信息
+    const procurementData = props.equipmentData
+    
+    // 2. 生成设备序列号
+    const equipmentSn = generateEquipmentSn(
+      procurementData.equipmentType || 'other',
+      formData.receiptTime || new Date().toISOString()
+    )
+    
+    // 3. 合并收货信息和设备信息
+    const equipmentData = {
+      // 采购阶段的数据（已有）
+      equipmentId: procurementData.equipmentId,
+      equipmentName: procurementData.equipmentName,
+      equipmentModel: procurementData.equipmentModel,
+      equipmentType: procurementData.equipmentType,
+      equipmentSn: equipmentSn, // 使用生成的序列号
+      brand: procurementData.brand,
+      specification: procurementData.specification,
+      assetCode: procurementData.assetCode,
+      
+      // 采购信息（已有）
+      purchaseOrder: procurementData.purchaseOrder,
+      supplierName: procurementData.supplierName,
+      purchasePrice: procurementData.purchasePrice,
+      purchaseTime: procurementData.purchaseTime,
+      quantity: procurementData.quantity,
+      unitPrice: procurementData.unitPrice,
+      totalPrice: procurementData.totalPrice,
+      
+      // 收货相关信息
       receiptTime: formData.receiptTime ? formatDateTime(formData.receiptTime) : formatDateTime(new Date()),
       receiptPerson: formData.receiptPerson,
       receiptQuantity: formData.receiptQuantity,
@@ -400,62 +456,31 @@ const handleSubmit = async () => {
       storageLocation: formData.storageLocation,
       storageManager: formData.storageManager,
       
-      // 设备基本信息（从采购数据继承）
-      equipmentName: props.equipmentData.equipmentName,
-      equipmentModel: props.equipmentData.equipmentModel,
-      equipmentType: props.equipmentData.equipmentType,
-      equipmentSn: props.equipmentData.equipmentSn,
-      brand: props.equipmentData.brand,
-      specification: props.equipmentData.specification,
-      assetCode: props.equipmentData.assetCode,
-      
-      // 采购信息（从采购数据继承）
-      purchaseOrder: props.equipmentData.purchaseOrder,
-      supplierName: props.equipmentData.supplierName,
-      purchasePrice: props.equipmentData.purchasePrice,
-      purchaseTime: props.equipmentData.purchaseTime,
-      quantity: props.equipmentData.quantity,
-      unitPrice: props.equipmentData.unitPrice,
-      totalPrice: props.equipmentData.totalPrice,
-      
-      // 入库信息
-      inStockTime: formData.receiptTime ? formatDateTime(formData.receiptTime) : formatDateTime(new Date()),
-      physicalLocation: formData.storageLocation,
-      locationStatus: 'in_stock',
-      responsiblePerson: formData.storageManager,
-      inventoryBarcode: props.equipmentData.inventoryBarcode || generateInventoryBarcode(),
-      
-      // 状态信息
+      // 系统默认数据
       equipmentStatus: 'normal',
-      useStatus: '0',
-      healthStatus: 'good',
-      receiptStatus: 'RECEIVED',
-      
-      // 其他管理信息
-      depreciationMethod: props.equipmentData.depreciationMethod || 'straight_line',
-      depreciationYears: props.equipmentData.depreciationYears || 5,
-      salvageValue: props.equipmentData.salvageValue || 0,
-      currentNetValue: props.equipmentData.purchasePrice || 0,
-      
-      // 系统字段
-      createTime: formatDateTime(new Date()),
-      updateTime: formatDateTime(new Date())
+      useStatus: '0', // 空闲中
+      locationStatus: 'in_stock', // 库存中
+      healthStatus: 'excellent',
+      responsiblePerson: formData.storageManager,
+      physicalLocation: formData.storageLocation,
+      inStockTime: formData.receiptTime ? formatDateTime(formData.receiptTime) : formatDateTime(new Date()),
+      inventoryBarcode: `BC${Date.now()}${Math.random().toString(36).substr(2, 4).toUpperCase()}`,
+      depreciationMethod: 'straight_line',
+      warrantyExpireDate: procurementData.warrantyExpireDate,
+      assetRemark: `设备已收货入库，收货人：${formData.receiptPerson}，入库时间：${formData.receiptTime}`
     }
-
-    console.log('📦 构建的收货数据:', receiptData)
-
-    // 调用收货API
-    await equipmentProcurementApi.receiveGoods(
-      props.equipmentData.equipmentId, 
-      receiptData
-    )
     
-    Message.success('收货成功，设备已自动入库')
+    console.log('📦 准备提交收货数据:', equipmentData)
+    
+    // 4. 调用收货API
+    await equipmentProcurementApi.receiveGoods(procurementData.equipmentId, equipmentData)
+    
+    Message.success('收货成功！设备已自动入库')
     emit('success')
-    emit('update:visible', false)
+    
   } catch (error: any) {
     console.error('收货失败:', error)
-    Message.error(error?.message || '收货失败，请检查表单信息')
+    Message.error(error?.message || '收货失败，请重试')
   } finally {
     loading.value = false
   }
diff --git a/src/views/system-resource/device-management/procurement/index.vue b/src/views/system-resource/device-management/procurement/index.vue
index 91f57f1..2ed8c52 100644
--- a/src/views/system-resource/device-management/procurement/index.vue
+++ b/src/views/system-resource/device-management/procurement/index.vue
@@ -201,6 +201,8 @@
             <a-button type="text" size="small" @click="handleEdit(record)">
               编辑
             </a-button>
+            
+            <!-- 1. 采购相关操作 -->
             <!-- 申请采购按钮 - 只在特定状态下显示 -->
             <a-button 
               v-if="canApplyProcurement(record)"
@@ -210,6 +212,38 @@
             >
               申请采购
             </a-button>
+            
+            <!-- 2. 合同发票管理相关操作 -->
+            <!-- 管理合同发票按钮 - 在采购审批通过后显示 -->
+            <a-button 
+              v-if="canManageContractInvoice(record)"
+              type="outline" 
+              size="small" 
+              @click="handleManageContractInvoice(record)"
+            >
+              管理合同发票
+            </a-button>
+            
+            <!-- 3. 支付相关操作 -->
+            <!-- 申请付款按钮 -->
+            <a-button 
+              v-if="canMakePayment(record)"
+              type="outline" 
+              size="small" 
+              @click="handleMakePayment(record)"
+            >
+              申请付款
+            </a-button>
+            <a-button 
+              v-if="record.paymentStatus === 'PAID'"
+              type="text" 
+              size="small" 
+              @click="handleViewPayment(record)"
+            >
+              查看支付详情
+            </a-button>
+            
+            <!-- 4. 收货相关操作 -->
             <!-- 收货操作按钮 -->
             <a-button 
               v-if="canReceiveGoods(record)"
@@ -227,34 +261,56 @@
             >
               查看收货
             </a-button>
-            <!-- 支付操作按钮 -->
-            <a-button 
-              v-if="canMakePayment(record)"
-              type="outline" 
-              size="small" 
-              @click="handleMakePayment(record)"
-            >
-              付款
-            </a-button>
-            <a-button 
-              v-if="record.paymentStatus === 'PAID'"
-              type="text" 
-              size="small" 
-              @click="handleViewPayment(record)"
-            >
-              查看支付详情
-            </a-button>
-            <!-- 显示采购状态 - 优先显示采购状态 -->
+            
+
+            
+            <!-- 状态标签 - 按照要求的顺序排列 -->
+            <!-- 1. 采购状态 -->
             <a-tag 
               v-if="record.procurementStatus && record.procurementStatus !== 'NOT_STARTED'" 
               :color="getProcurementStatusColor(record.procurementStatus)"
             >
               {{ getProcurementStatusText(record.procurementStatus) }}
             </a-tag>
-            <!-- 显示审批状态 -->
-            <a-tag v-if="record.approvalStatus" :color="getApprovalStatusColor(record.approvalStatus)">
-              {{ getApprovalStatusText(record.approvalStatus) }}
+            
+            <!-- 2. 合同发票管理状态 -->
+            <a-tag 
+              v-if="hasContractInvoiceInfo(record)"
+              color="green"
+            >
+              已完善
             </a-tag>
+            <a-tag 
+              v-else-if="record.procurementStatus === 'APPROVED'"
+              color="orange"
+            >
+              待完善
+            </a-tag>
+            <a-tag 
+              v-else
+              color="gray"
+            >
+              未开始
+            </a-tag>
+            
+            <!-- 3. 支付状态 -->
+            <a-tag 
+              v-if="record.paymentStatus && record.paymentStatus !== 'NOT_PAID'" 
+              :color="getPaymentStatusColor(record.paymentStatus)"
+            >
+              {{ getPaymentStatusText(record.paymentStatus) }}
+            </a-tag>
+            <a-tag v-else color="gray">未支付</a-tag>
+            
+            <!-- 4. 收货状态 -->
+            <a-tag 
+              v-if="record.receiptStatus && record.receiptStatus !== 'NOT_RECEIVED'" 
+              :color="getReceiptStatusColor(record.receiptStatus)"
+            >
+              {{ getReceiptStatusText(record.receiptStatus) }}
+            </a-tag>
+            <a-tag v-else color="gray">未收货</a-tag>
+            
             <!-- 删除按钮 -->
             <a-popconfirm
               content="确定要删除这条记录吗？"
@@ -326,6 +382,13 @@
       :equipment-data="currentPaymentData"
       @success="handlePaymentSuccess"
     />
+
+    <!-- 合同发票管理弹窗 -->
+    <ContractInvoiceModal
+      v-model:visible="contractInvoiceModalVisible"
+      :equipment-data="currentContractInvoiceData"
+      @success="handleContractInvoiceSuccess"
+    />
   </div>
 </template>
 
@@ -349,6 +412,7 @@ import ReceiptDetailModal from './components/ReceiptDetailModal.vue'
 import PaymentDetailModal from './components/PaymentDetailModal.vue'
 import ReceiptModal from './components/ReceiptModal.vue'
 import PaymentModal from './components/PaymentModal.vue'
+import ContractInvoiceModal from './components/ContractInvoiceModal.vue'
 import { equipmentProcurementApi } from '@/apis/equipment/procurement'
 import { equipmentApprovalApi } from '@/apis/equipment/approval'
 import type { EquipmentListReq, EquipmentResp } from '@/apis/equipment/type'
@@ -397,6 +461,10 @@ const currentPaymentData = ref<EquipmentResp | null>(null)
 const receiptModalVisible = ref(false)
 const paymentModalVisible = ref(false)
 
+// 合同发票管理弹窗控制
+const contractInvoiceModalVisible = ref(false)
+const currentContractInvoiceData = ref<EquipmentResp | null>(null)
+
 // 表格选择
 const selectedRowKeys = ref<string[]>([])
 const rowSelection = reactive({
@@ -936,13 +1004,42 @@ const handleModalSuccess = () => {
 // 采购申请成功回调
 const handleApplicationSuccess = async () => {
   applicationModalVisible.value = false
-  console.log('采购申请成功，准备刷新数据...')
-  // 延迟刷新数据，确保后端状态更新完成
+  console.log('✅ 采购申请成功，准备更新本地数据...')
+  
+  // 立即更新本地数据，让申请采购按钮消失
+  if (currentApplicationData.value) {
+    const equipmentId = currentApplicationData.value.equipmentId
+    
+    // 找到对应的记录并更新采购状态
+    const recordIndex = tableData.value.findIndex(item => item.equipmentId === equipmentId)
+    if (recordIndex !== -1) {
+      // 立即更新本地状态为待审批
+      tableData.value[recordIndex] = {
+        ...tableData.value[recordIndex],
+        procurementStatus: 'PENDING_APPROVAL'
+      }
+      
+      console.log('✅ 本地数据已更新，申请采购按钮应该消失')
+      console.log('🔍 更新后的记录:', tableData.value[recordIndex])
+      
+      message.success('采购申请已提交，请等待审批')
+    } else {
+      console.warn('⚠️ 未找到对应的记录，无法更新本地状态')
+      message.warning('状态更新失败，请手动刷新页面')
+    }
+  }
+  
+  // 可选：延迟刷新数据以确保后端状态同步
   setTimeout(async () => {
-    console.log('开始刷新数据...')
-    await loadData(currentSearchParams.value)
-    message.success('采购申请已提交，请等待审批')
-  }, 1000)
+    try {
+      console.log('🔄 延迟刷新数据，确保后端状态同步...')
+      await loadData(currentSearchParams.value)
+      console.log('✅ 后端数据同步完成')
+    } catch (error) {
+      console.error('❌ 后端数据同步失败:', error)
+      // 不显示错误提示，因为本地状态已经更新
+    }
+  }, 1000) // 1秒后刷新
 }
 
 // 刷新数据
@@ -993,17 +1090,45 @@ const getTotalAmount = () => {
 // 检查是否可以申请采购
 const canApplyProcurement = (record: EquipmentResp) => {
   // 根据采购状态判断是否可以申请采购
-  // 只有未开始、已拒绝、已完成的设备可以重新申请采购
-  const allowedStatuses = ['NOT_STARTED', 'REJECTED', 'COMPLETED', null, undefined]
+  // 只有未开始、已拒绝的设备可以申请采购
+  // 待审批、已通过、已完成等状态不能重复申请
+  const allowedStatuses = ['NOT_STARTED', 'REJECTED', null, undefined]
   const canApply = allowedStatuses.includes(record.procurementStatus)
-  console.log(`设备 ${record.equipmentName} 采购状态: ${record.procurementStatus}, 可申请: ${canApply}`)
+  
+  // 添加详细的调试日志
+  console.log(`🔍 申请采购按钮显示检查 - 设备: ${record.equipmentName}`)
+  console.log(`🔍 当前采购状态: ${record.procurementStatus}`)
+  console.log(`🔍 允许申请的状态: ${allowedStatuses.join(', ')}`)
+  console.log(`🔍 是否显示按钮: ${canApply}`)
+  console.log(`🔍 完整记录:`, record)
+  
   return canApply
 }
 
 // 检查是否可以收货
 const canReceiveGoods = (record: EquipmentResp) => {
-  const receiptStatus = (record as any).receiptStatus
-  return receiptStatus === 'NOT_RECEIVED' || receiptStatus === 'PARTIALLY_RECEIVED'
+  // 只有在采购状态为已通过且收货状态为未收货时才显示确认收货按钮
+  // 同时需要确保合同发票信息已经完善
+  const procurementStatus = record.procurementStatus
+  const receiptStatus = record.receiptStatus
+  
+  // 检查是否有合同发票信息（这里可以根据实际业务逻辑调整）
+  // 暂时使用一个简单的判断，后续可以根据实际数据结构调整
+  const hasContractInvoice = true // 暂时设为true，后续根据实际业务逻辑调整
+  
+  console.log('🔍 canReceiveGoods 检查:', {
+    equipmentName: record.equipmentName,
+    procurementStatus,
+    receiptStatus,
+    hasContractInvoice,
+    canReceive: procurementStatus === 'APPROVED' && 
+               (receiptStatus === 'NOT_RECEIVED' || receiptStatus === 'PARTIALLY_RECEIVED') &&
+               hasContractInvoice
+  })
+  
+  return procurementStatus === 'APPROVED' && 
+         (receiptStatus === 'NOT_RECEIVED' || receiptStatus === 'PARTIALLY_RECEIVED') &&
+         hasContractInvoice
 }
 
 // 收货操作
@@ -1021,7 +1146,10 @@ const handleViewReceipt = (record: EquipmentResp) => {
 // 收货成功回调
 const handleReceiptSuccess = () => {
   receiptModalVisible.value = false
+  // 收货成功后，采购状态应该更新为已收货
+  // 重新加载数据以显示最新状态
   loadData(currentSearchParams.value)
+  message.success('收货成功！设备已自动入库')
 }
 
 // 检查是否可以付款
@@ -1072,6 +1200,57 @@ const getApprovalStatusText = (status: string) => {
   return textMap[status] || '未知'
 }
 
+// 手动刷新单条记录
+const handleRefreshRecord = async (record: EquipmentResp) => {
+  console.log('🔄 手动刷新记录:', record.equipmentId)
+  try {
+    // 显示加载提示
+    const loadingMessage = message.loading('正在刷新数据...')
+    
+    // 重新加载整个表格数据，确保获取最新状态
+    await loadData(currentSearchParams.value)
+    
+    // 清除加载提示
+    if (loadingMessage && typeof loadingMessage.close === 'function') {
+      loadingMessage.close()
+    }
+    message.success('记录状态已刷新')
+    
+    console.log('✅ 表格数据刷新完成')
+    
+  } catch (error: any) {
+    console.error('❌ 刷新失败:', error)
+    message.error(error?.message || '刷新失败')
+  }
+}
+
+// 检查是否可以管理合同发票
+const canManageContractInvoice = (record: EquipmentResp) => {
+  // 只有在采购状态为已通过时才显示管理合同发票按钮
+  return record.procurementStatus === 'APPROVED'
+}
+
+// 管理合同发票操作
+const handleManageContractInvoice = (record: EquipmentResp) => {
+  currentContractInvoiceData.value = { ...record }
+  contractInvoiceModalVisible.value = true
+}
+
+// 合同发票管理成功回调
+const handleContractInvoiceSuccess = () => {
+  contractInvoiceModalVisible.value = false
+  loadData(currentSearchParams.value)
+}
+
+// 检查是否有合同发票信息
+const hasContractInvoiceInfo = (record: EquipmentResp) => {
+  // 这里可以根据实际业务逻辑调整判断条件
+  // 暂时使用一个简单的判断，后续可以根据实际数据结构调整
+  // 例如：检查是否有合同编号、发票号码等字段
+  return record.procurementStatus === 'APPROVED' && 
+         (record.receiptStatus === 'RECEIVED' || record.paymentStatus === 'PAID')
+}
+
 onMounted(() => {
   loadData()
 })
@@ -1258,6 +1437,8 @@ onMounted(() => {
       }
     }
   }
+
+
 }
 
 // 响应式设计
diff --git a/src/views/tower-monitoring/clearance.vue b/src/views/tower-monitoring/clearance.vue
new file mode 100644
index 0000000..b3ff709
--- /dev/null
+++ b/src/views/tower-monitoring/clearance.vue
@@ -0,0 +1,498 @@
+<template>
+
+    <GiPageLayout>
+        <div class="raw-data-container">
+            <!-- 顶部按钮 -->
+            <div class="action-bar">
+                <div class="action-buttons">
+                    <a-button type="primary" @click="openUploadModal">
+                        <template #icon>
+                            <IconUpload />
+                        </template>
+                        上传视频
+                    </a-button>
+                </div>
+            </div>
+
+            <!-- 筛选 -->
+            <div class="filter-section">
+                <a-form :model="filterForm" layout="inline">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="filterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="filterForm.turbineId" placeholder="请选择机组" :options="turbineOptions"
+                            allow-clear :disabled="!filterForm.projectId" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button type="primary" @click="handleQuery">查询</a-button>
+                    </a-form-item>
+                </a-form>
+            </div>
+
+            <!-- 列表 -->
+            <a-table :columns="columns" :data="tableData" :pagination="pagination" :loading="loading"
+                :scroll="{ y: 'calc(100vh - 380px)' }">
+                <template #type="{ record }">
+                    <a-tag>{{ record.type === 'clearance' ? '净空' : '形变' }}</a-tag>
+                </template>
+                <template #status="{ record }">
+                    <a-tag :color="record.preTreatment ? 'green' : 'red'">
+                        {{ record.preTreatment ? '已处理' : '未处理' }}
+                    </a-tag>
+                </template>
+                <template #action="{ record }">
+                    <a-space>
+                        <a-button size="mini" @click="handlePreview(record)">预览</a-button>
+                        <a-button size="mini" @click="handleDownload(record)">下载</a-button>
+                        <a-popconfirm content="确认删除？" @ok="handleDelete(record)">
+                            <a-button size="mini" status="danger">删除</a-button>
+                        </a-popconfirm>
+                    </a-space>
+
+                </template>
+            </a-table>
+
+            <!-- 上传弹窗 -->
+            <a-modal v-model:visible="showUploadModal" title="上传原始视频" width="600px" :ok-loading="uploading"
+                @ok="handleUpload" @cancel="showUploadModal = false">
+                <a-form :model="uploadForm" layout="vertical">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="uploadForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="onProjectChangeUpload" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="uploadForm.turbineId" placeholder="请选择机组" :options="turbineOptionsUpload"
+                            allow-clear :disabled="!uploadForm.projectId" />
+                    </a-form-item>
+                    <a-form-item label="类型" required>
+                        <a-select v-model="uploadForm.type" placeholder="请选择类型" :options="typeOptions" />
+                    </a-form-item>
+                    <a-form-item label="视频文件" required>
+                        <a-upload v-model:file-list="uploadForm.fileList" :multiple="uploadMode === 'batch'"
+                            :limit="uploadMode === 'batch' ? 10 : 1" accept="video/*" :auto-upload="false"
+                            list-type="picture-card" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-radio-group v-model="uploadMode" type="button">
+                            <a-radio value="single">单文件</a-radio>
+                            <a-radio value="batch">批量</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </div>
+    </GiPageLayout>
+    <!-- 视频预览弹窗 -->
+    <a-modal v-model:visible="previewVisible" title="视频预览" width="800px" :footer="false"
+        @cancel="previewVisible = false">
+        <a-tabs v-model:active-key="activePreviewTab" @change="activePreviewTab = $event as any">
+            <!-- 原始视频 -->
+            <a-tab-pane key="video" title="原始视频">
+                <video v-if="previewUrl" :src="previewUrl" controls
+                    style="width: 100%; max-height: 60vh; border-radius: 4px"></video>
+            </a-tab-pane>
+
+            <!-- 处理结果 -->
+            <a-tab-pane key="result" title="处理结果">
+                <a-spin :loading="loadingResult">
+                    <a-space direction="vertical" size="medium" style="width: 100%">
+                        <!-- 图片 -->
+                        <img v-if="resultImgUrl" :src="resultImgUrl" style="max-width: 100%; border-radius: 4px"
+                            alt="last frame" />
+
+                        <!-- JSON 预览 -->
+                        <a-card title="results.json" size="small">
+                            <pre>{{ JSON.stringify(resultJson, null, 2) }}</pre>
+                        </a-card>
+                    </a-space>
+                </a-spin>
+            </a-tab-pane>
+        </a-tabs>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { TableColumnData } from '@arco-design/web-vue'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+    getProjectList,
+    getTurbineList
+} from '@/apis/industrial-image'
+import {
+    getVideoPage,
+    uploadBatchVideo,
+    uploadSingleVideo,
+    deleteVideo,
+    downloadVideo
+} from '@/apis/video-monitor'
+
+/* ---------------- 下拉 & 表单 ---------------- */
+const projectOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptions = ref<{ label: string; value: string }[]>([])       // 筛选用
+const turbineOptionsUpload = ref<{ label: string; value: string }[]>([]) // 上传弹窗用
+const typeOptions = [
+    { label: '净空', value: 'clearance' },
+    { label: '形变', value: 'deformation' }
+]
+
+const filterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+
+const uploadForm = reactive({
+    projectId: '',
+    turbineId: '',
+    type: '',
+    fileList: [] as any[]
+})
+
+const uploadMode = ref<'single' | 'batch'>('single')
+
+/* ---------------- 列表 ---------------- */
+const columns: TableColumnData[] = [
+    { title: '文件名', dataIndex: 'videoName', ellipsis: true, width: 220 },
+    // { title: '项目', dataIndex: 'projectName' },
+    // { title: '机组', dataIndex: 'turbineName' },
+    { title: '类型', slotName: 'type' },
+    { title: '上传时间', dataIndex: 'uploadTime' },
+    { title: '状态', slotName: 'status' },
+    { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
+]
+
+const tableData = ref<any[]>([])
+const loading = ref(false)
+const pagination = reactive({ current: 1, pageSize: 20, total: 0 })
+
+/* ---------------- 控制弹窗 ---------------- */
+const showUploadModal = ref(false)
+const uploading = ref(false)
+
+/* ---------------- 初始化 ---------------- */
+onMounted(async () => {
+    const { data } = await getProjectList({ page: 1, pageSize: 1000 })
+    projectOptions.value = data.map((p: any) => ({ label: p.projectName, value: p.projectId }))
+    handleQuery()
+})
+const activePreviewTab = ref<'video' | 'result'>('video')   // 当前标签页
+const resultImgUrl = ref('')
+const resultJson = ref<Record<string, any>>({})
+const loadingResult = ref(false)
+const resutlVideoUrl = ref('')
+async function loadResultFiles(row: any) {
+    if (!row.preTreatment) return
+    loadingResult.value = true
+    try {
+        const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+        // 图片
+        resultImgUrl.value = `${base}${row.preImagePath}/last_frame.jpg`
+        resutlVideoUrl.value = `${base}${row.preImagePath}/annotated_video.mp4`
+        // JSON
+        const jsonUrl = `${base}${row.preImagePath}/results.json`
+        const res = await fetch(jsonUrl)
+        resultJson.value = await res.json()
+    } catch (e) {
+        console.error(e)
+        resultJson.value = {}
+    } finally {
+        loadingResult.value = false
+    }
+    console.log('result', resultImgUrl.value)
+}
+/* 项目 -> 机组（筛选） */
+watch(
+    () => filterForm.projectId,
+    async (val) => {
+        filterForm.turbineId = ''
+        turbineOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineOptions.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+    }
+)
+const previewVisible = ref(false)
+const previewUrl = ref('')
+
+function handlePreview(row: any) {
+    const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+    previewUrl.value = new URL(row.videoPath.replace(/^\/+/, ''), base).href
+    previewVisible.value = true
+    activePreviewTab.value = 'video'     // 默认先显示视频
+    if (row.preTreatment) {
+        loadResultFiles(row)               // 预加载结果
+    }
+}
+/* 项目 -> 机组（上传弹窗） */
+async function onProjectChangeUpload(projectId: string) {
+    uploadForm.turbineId = ''
+    turbineOptionsUpload.value = []
+    if (!projectId) return
+    const { data } = await getTurbineList({ projectId })
+    turbineOptionsUpload.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+}
+
+/* ---------------- 查询 ---------------- */
+function handleQuery() {
+    pagination.current = 1
+    loadTable()
+}
+async function loadTable() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            projectId: filterForm.projectId,
+            turbineId: filterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        console.log(data)
+        tableData.value = data
+        pagination.total = data.length
+    } finally {
+        loading.value = false
+    }
+}
+
+/* ---------------- 上传 ---------------- */
+function openUploadModal() {
+    uploadForm.projectId = ''
+    uploadForm.turbineId = ''
+    uploadForm.type = ''
+    uploadForm.fileList = []
+    showUploadModal.value = true
+}
+async function handleUpload() {
+    if (!uploadForm.projectId || !uploadForm.type || !uploadForm.fileList.length) {
+        Message.warning('请完整填写')
+        return
+    }
+    uploading.value = true
+    try {
+        const files = uploadForm.fileList.map((f: any) => f.file)
+        if (uploadMode.value === 'single') {
+            await uploadSingleVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files[0]
+            )
+        } else {
+            await uploadBatchVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files
+            )
+        }
+        Message.success('上传成功')
+        showUploadModal.value = false
+        loadTable()
+    } finally {
+        uploading.value = false
+    }
+}
+
+/* ---------------- 下载 / 删除 ---------------- */
+async function handleDownload(row: any) {
+    const url = await downloadVideo(row.videoId)
+    window.open(url, '_blank')
+}
+async function handleDelete(row: any) {
+    await deleteVideo(row.videoId)
+    Message.success('删除成功')
+    loadTable()
+}
+</script>
+
+
+<style scoped lang="scss">
+.raw-data-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 20px;
+}
+
+.page-title {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #1d2129;
+}
+
+.page-subtitle {
+    font-size: 14px;
+    color: #86909c;
+    margin: 0;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .filter-section {
+        margin-left: 24px;
+    }
+}
+
+.project-sections {
+    .project-section {
+        margin-bottom: 32px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px #f0f1f2;
+        padding: 20px;
+
+        .project-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .project-title {
+                font-size: 20px;
+                font-weight: 600;
+            }
+
+            .project-stats {
+                display: flex;
+                gap: 16px;
+
+                .stat-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #86909c;
+                }
+            }
+        }
+
+        .units-grid {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+
+            .unit-card {
+                background: #fafbfc;
+                border-radius: 8px;
+                padding: 16px;
+                width: 360px;
+                margin-bottom: 16px;
+
+                .unit-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .unit-title {
+                        font-size: 16px;
+                        font-weight: 600;
+                    }
+
+                    .unit-actions {
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+
+                .videos-list {
+                    display: flex;
+                    gap: 12px;
+                    margin-bottom: 8px;
+
+                    .video-item {
+                        width: 100px;
+
+                        .video-thumbnail {
+                            position: relative;
+                            width: 100px;
+                            height: 60px;
+                            border-radius: 6px;
+                            overflow: hidden;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            .video-overlay {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: rgba(0, 0, 0, 0.2);
+                                opacity: 0;
+                                transition: opacity 0.2s;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        .video-info {
+                            margin-top: 4px;
+
+                            .video-name {
+                                font-size: 12px;
+                                font-weight: 500;
+                                color: #1d2129;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            .video-meta {
+                                font-size: 11px;
+                                color: #86909c;
+                                display: flex;
+                                gap: 4px;
+                            }
+
+                            .video-status {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+
+                .analysis-progress {
+                    margin-top: 8px;
+
+                    .progress-info {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        color: #86909c;
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.video-meta-info {
+    margin-top: 16px;
+    font-size: 13px;
+    color: #4e5969;
+
+    p {
+        margin: 2px 0;
+    }
+}
+</style>
diff --git a/src/views/tower-monitoring/deformation.vue b/src/views/tower-monitoring/deformation.vue
new file mode 100644
index 0000000..1152c74
--- /dev/null
+++ b/src/views/tower-monitoring/deformation.vue
@@ -0,0 +1,665 @@
+<template>
+    <GiPageLayout>
+        <div class="raw-data-container">
+            <!-- 顶部页签 -->
+            <a-tabs v-model:active-key="topTab" type="rounded" destroy-on-hide>
+                <!-- 原始数据 -->
+                <a-tab-pane key="data" title="原始数据">
+                    <!-- 顶部按钮 -->
+                    <div class="action-bar">
+                        <div class="action-buttons">
+                            <a-button type="primary" @click="openUploadModal">
+                                <template #icon>
+                                    <IconUpload />
+                                </template>
+                                上传视频
+                            </a-button>
+                        </div>
+                    </div>
+
+                    <!-- 筛选 -->
+                    <div class="filter-section">
+                        <a-form :model="filterForm" layout="inline">
+                            <a-form-item label="项目" required>
+                                <a-select v-model="filterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                                    allow-clear />
+                            </a-form-item>
+                            <a-form-item label="机组">
+                                <a-select v-model="filterForm.turbineId" placeholder="请选择机组" :options="turbineOptions"
+                                    allow-clear :disabled="!filterForm.projectId" />
+                            </a-form-item>
+                            <a-form-item>
+                                <a-button type="primary" @click="handleQuery">查询</a-button>
+                            </a-form-item>
+                        </a-form>
+                    </div>
+
+                    <!-- 列表 -->
+                    <a-table :columns="columns" :data="tableData" :pagination="pagination" :loading="loading"
+                        :scroll="{ y: 'calc(100vh - 380px)' }">
+                        <template #type="{ record }">
+                            <a-tag>{{ record.type === 'clearance' ? '净空' : '形变' }}</a-tag>
+                        </template>
+                        <template #status="{ record }">
+                            <a-tag :color="record.preTreatment ? 'green' : 'red'">
+                                {{ record.preTreatment ? '已处理' : '未处理' }}
+                            </a-tag>
+                        </template>
+                        <template #action="{ record }">
+                            <a-space>
+                                <a-button size="mini" @click="handlePreview(record)">预览</a-button>
+                                <a-button size="mini" @click="handleDownload(record)">下载</a-button>
+                                <a-popconfirm content="确认删除？" @ok="handleDelete(record)">
+                                    <a-button size="mini" status="danger">删除</a-button>
+                                </a-popconfirm>
+                            </a-space>
+                        </template>
+                    </a-table>
+                </a-tab-pane>
+
+                <!-- 净空报告 -->
+                <a-tab-pane key="report" title="净空报告">
+                    <!-- 筛选 -->
+                    <a-form :model="reportFilterForm" layout="inline" style="margin-bottom: 16px">
+                        <a-form-item label="项目">
+                            <a-select v-model="reportFilterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                                allow-clear />
+                        </a-form-item>
+                        <a-form-item label="机组">
+                            <a-select v-model="reportFilterForm.turbineId" placeholder="请选择机组"
+                                :options="turbineReportOptions" allow-clear :disabled="!reportFilterForm.projectId" />
+                        </a-form-item>
+                        <a-form-item>
+                            <a-button type="primary" @click="loadReportGrid">查询</a-button>
+                        </a-form-item>
+                    </a-form>
+
+                    <!-- 网格 -->
+                    <a-row :gutter="[24, 24]">
+                        <a-col v-for="item in reportGrid" :key="item.videoId" :xs="24" :sm="12" :md="8" :lg="6">
+                            <!-- 卡片内部 -->
+                            <a-card hoverable>
+                                <div @click="openReportDetail(item)" style="cursor: pointer">
+                                    <video :src="item.videoUrl"
+                                        style="width: 100%; height: 120px; object-fit: cover; border-radius: 4px" />
+                                    <div class="video-name">{{ item.videoName }}</div>
+                                </div>
+
+                                <a-row :gutter="8" style="margin-top: 8px">
+                                    <a-col :span="8">
+                                        <div class="stat-label">最小</div>
+                                        <div class="stat-value">{{ item.min }} m</div>
+                                    </a-col>
+                                    <a-col :span="8">
+                                        <div class="stat-label">最大</div>
+                                        <div class="stat-value">{{ item.max }} m</div>
+                                    </a-col>
+                                    <a-col :span="8">
+                                        <div class="stat-label">平均</div>
+                                        <div class="stat-value">{{ item.avg }} m</div>
+                                    </a-col>
+                                </a-row>
+
+                                <!-- 查看详情按钮 -->
+                                <a-button size="mini" style="margin-top: 8px; width: 100%"
+                                    @click="openReportDetail(item)">
+                                    查看详情
+                                </a-button>
+                            </a-card>
+
+                            <!-- 新增：报告详情模态框 -->
+                            <a-modal v-model:visible="reportDetailVisible" title="净空报告详情" width="900px" :footer="false"
+                                @cancel="reportDetailVisible = false">
+                                <a-tabs size="small">
+                                    <a-tab-pane key="trend" title="趋势数据">
+                                        <a-table :columns="trendColumns" :data="currentReportDetail?.trend" size="small"
+                                            :scroll="{ y: 400 }" row-key="frame" />
+                                    </a-tab-pane>
+                                    <a-tab-pane key="json" title="原始 JSON">
+                                        <pre style="max-height: 400px; overflow: auto">{{
+                                            JSON.stringify(currentReportDetail?.rawJson, null, 2)
+                            }}</pre>
+                                    </a-tab-pane>
+                                </a-tabs>
+                            </a-modal>
+                        </a-col>
+                    </a-row>
+                </a-tab-pane>
+            </a-tabs>
+
+            <!-- 上传弹窗（已去掉处理结果） -->
+            <a-modal v-model:visible="showUploadModal" title="上传原始视频" width="600px" :ok-loading="uploading"
+                @ok="handleUpload" @cancel="showUploadModal = false">
+                <a-form :model="uploadForm" layout="vertical">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="uploadForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="onProjectChangeUpload" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="uploadForm.turbineId" placeholder="请选择机组" :options="turbineOptionsUpload"
+                            allow-clear :disabled="!uploadForm.projectId" />
+                    </a-form-item>
+                    <a-form-item label="类型" required>
+                        <a-select v-model="uploadForm.type" placeholder="请选择类型" :options="typeOptions" />
+                    </a-form-item>
+                    <a-form-item label="视频文件" required>
+                        <a-upload v-model:file-list="uploadForm.fileList" :multiple="uploadMode === 'batch'"
+                            :limit="uploadMode === 'batch' ? 10 : 1" accept="video/*" :auto-upload="false"
+                            list-type="picture-card" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-radio-group v-model="uploadMode" type="button">
+                            <a-radio value="single">单文件</a-radio>
+                            <a-radio value="batch">批量</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </div>
+
+        <!-- 视频预览弹窗（仅保留原始视频） -->
+        <a-modal v-model:visible="previewVisible" title="视频预览" width="800px" :footer="false"
+            @cancel="previewVisible = false">
+            <a-tabs v-model:active-key="activePreviewTab">
+                <a-tab-pane key="video" title="原始视频">
+                    <video v-if="previewUrl" :src="previewUrl" controls
+                        style="width: 100%; max-height: 60vh; border-radius: 4px"></video>
+                </a-tab-pane>
+            </a-tabs>
+        </a-modal>
+    </GiPageLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { TableColumnData } from '@arco-design/web-vue'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+    getProjectList,
+    getTurbineList
+} from '@/apis/industrial-image'
+import {
+    getVideoPage,
+    uploadBatchVideo,
+    uploadSingleVideo,
+    deleteVideo,
+    downloadVideo
+} from '@/apis/video-monitor'
+
+/* ---------------- 下拉 & 表单 ---------------- */
+const projectOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptionsUpload = ref<{ label: string; value: string }[]>([])
+const typeOptions = [
+    { label: '净空', value: 'clearance' },
+    { label: '形变', value: 'deformation' }
+]
+
+const filterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+const uploadForm = reactive({
+    projectId: '',
+    turbineId: '',
+    type: '',
+    fileList: [] as any[]
+})
+const uploadMode = ref<'single' | 'batch'>('single')
+const reportDetailVisible = ref(false)
+const currentReportDetail = ref<ReportItem | null>(null)
+
+function openReportDetail(item: ReportItem) {
+    currentReportDetail.value = item
+    reportDetailVisible.value = true
+}
+/* ---------------- 列表 ---------------- */
+const columns: TableColumnData[] = [
+    { title: '文件名', dataIndex: 'videoName', ellipsis: true, width: 220 },
+    { title: '类型', slotName: 'type' },
+    { title: '上传时间', dataIndex: 'uploadTime' },
+    { title: '状态', slotName: 'status' },
+    { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
+]
+const tableData = ref<any[]>([])
+const loading = ref(false)
+const pagination = reactive({ current: 1, pageSize: 20, total: 0 })
+
+/* ---------------- 顶部 Tab ---------------- */
+const topTab = ref<'data' | 'report'>('data')
+
+/* ---------------- 报告筛选 ---------------- */
+const reportFilterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+const turbineReportOptions = ref<{ label: string; value: string }[]>([])
+
+watch(
+    () => reportFilterForm.projectId,
+    async (val) => {
+        reportFilterForm.turbineId = ''
+        turbineReportOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineReportOptions.value = data.map((t: any) => ({
+            label: t.turbineName,
+            value: t.turbineId
+        }))
+    }
+)
+
+/* ---------------- 报告网格 ---------------- */
+interface ReportItem {
+    videoId: string
+    videoName: string
+    videoUrl: string
+    min: string
+    max: string
+    avg: string
+    trend: any[]
+    rawJson: any
+    _activeKey?: string[]
+}
+const reportGrid = ref<ReportItem[]>([])
+
+async function loadReportGrid() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: 1,
+            pageSize: 1000,
+            projectId: reportFilterForm.projectId,
+            turbineId: reportFilterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        const rows = data.filter(
+            (r: any) => r.type === 'clearance' && r.preTreatment
+        )
+        const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+
+        reportGrid.value = await Promise.all(
+            rows.map(async (r: any) => {
+                const jsonUrl = `${base}${r.preImagePath}/results.json`
+                const json = await (await fetch(jsonUrl)).json()
+
+                const all = Object.values(json.clearance_history || {})
+                    .flat()
+                    .filter((v: any) => typeof v === 'number')
+                const min = Math.min(...all)
+                const max = Math.max(...all)
+                const avg = all.reduce((a: number, b: number) => a + b, 0) / all.length
+
+                const { tip0, tip1, tip2 } = json.clearance_history || {}
+                const len = Math.max(tip0?.length ?? 0, tip1?.length ?? 0, tip2?.length ?? 0)
+                const trend = Array.from({ length: len }, (_, i) => ({
+                    frame: i + 1,
+                    tip0: tip0?.[i]?.toFixed(3) ?? '-',
+                    tip1: tip1?.[i]?.toFixed(3) ?? '-',
+                    tip2: tip2?.[i]?.toFixed(3) ?? '-'
+                }))
+
+                return {
+                    videoId: r.videoId,
+                    videoName: r.videoName,
+                    videoUrl: new URL(r.videoPath.replace(/^\/+/, ''), base).href,
+                    min: min.toFixed(2),
+                    max: max.toFixed(2),
+                    avg: avg.toFixed(2),
+                    trend,
+                    rawJson: json,
+                    _activeKey: []
+                }
+            })
+        )
+    } finally {
+        loading.value = false
+    }
+}
+
+function toggleDetail(item: ReportItem) {
+    item._activeKey = item._activeKey?.length ? [] : ['detail']
+}
+
+/* ---------------- 原列表逻辑 ---------------- */
+onMounted(async () => {
+    const { data } = await getProjectList({ page: 1, pageSize: 1000 })
+    projectOptions.value = data.map((p: any) => ({
+        label: p.projectName,
+        value: p.projectId
+    }))
+    handleQuery()
+})
+
+watch(
+    () => filterForm.projectId,
+    async (val) => {
+        filterForm.turbineId = ''
+        turbineOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineOptions.value = data.map((t: any) => ({
+            label: t.turbineName,
+            value: t.turbineId
+        }))
+    }
+)
+
+/* ---------------- 列表查询 ---------------- */
+function handleQuery() {
+    pagination.current = 1
+    loadTable()
+}
+async function loadTable() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            projectId: filterForm.projectId,
+            turbineId: filterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        tableData.value = data
+        pagination.total = data.length
+    } finally {
+        loading.value = false
+    }
+}
+
+/* ---------------- 上传 ---------------- */
+const showUploadModal = ref(false)
+const uploading = ref(false)
+
+function openUploadModal() {
+    uploadForm.projectId = ''
+    uploadForm.turbineId = ''
+    uploadForm.type = ''
+    uploadForm.fileList = []
+    showUploadModal.value = true
+}
+
+async function onProjectChangeUpload(projectId: string) {
+    uploadForm.turbineId = ''
+    turbineOptionsUpload.value = []
+    if (!projectId) return
+    const { data } = await getTurbineList({ projectId })
+    turbineOptionsUpload.value = data.map((t: any) => ({
+        label: t.turbineName,
+        value: t.turbineId
+    }))
+}
+
+async function handleUpload() {
+    if (!uploadForm.projectId || !uploadForm.type || !uploadForm.fileList.length) {
+        Message.warning('请完整填写')
+        return
+    }
+    uploading.value = true
+    try {
+        const files = uploadForm.fileList.map((f: any) => f.file)
+        if (uploadMode.value === 'single') {
+            await uploadSingleVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files[0]
+            )
+        } else {
+            await uploadBatchVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files
+            )
+        }
+        Message.success('上传成功')
+        showUploadModal.value = false
+        loadTable()
+        // 如果当前在报告页，顺带刷新
+        if (topTab.value === 'report') await loadReportGrid()
+    } finally {
+        uploading.value = false
+    }
+}
+
+/* ---------------- 下载 / 删除 ---------------- */
+async function handleDownload(row: any) {
+    const url = await downloadVideo(row.videoId)
+    window.open(url, '_blank')
+}
+async function handleDelete(row: any) {
+    await deleteVideo(row.videoId)
+    Message.success('删除成功')
+    loadTable()
+    if (topTab.value === 'report') await loadReportGrid()
+}
+
+/* ---------------- 预览 ---------------- */
+const previewVisible = ref(false)
+const previewUrl = ref('')
+const activePreviewTab = ref<'video' | 'result'>('video')
+
+function handlePreview(row: any) {
+    const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+    previewUrl.value = new URL(row.videoPath.replace(/^\/+/, ''), base).href
+    previewVisible.value = true
+    activePreviewTab.value = 'video'
+}
+
+/* ---------------- 趋势表格列 ---------------- */
+const trendColumns = [
+    { title: '帧', dataIndex: 'frame', width: 70 },
+    { title: 'tip0 (m)', dataIndex: 'tip0' },
+    { title: 'tip1 (m)', dataIndex: 'tip1' },
+    { title: 'tip2 (m)', dataIndex: 'tip2' }
+]
+</script>
+
+
+<style scoped lang="scss">
+.raw-data-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 20px;
+}
+
+.page-title {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #1d2129;
+}
+
+.page-subtitle {
+    font-size: 14px;
+    color: #86909c;
+    margin: 0;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .filter-section {
+        margin-left: 24px;
+    }
+}
+
+.project-sections {
+    .project-section {
+        margin-bottom: 32px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px #f0f1f2;
+        padding: 20px;
+
+        .project-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .project-title {
+                font-size: 20px;
+                font-weight: 600;
+            }
+
+            .project-stats {
+                display: flex;
+                gap: 16px;
+
+                .stat-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #86909c;
+                }
+            }
+        }
+
+        .units-grid {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+
+            .unit-card {
+                background: #fafbfc;
+                border-radius: 8px;
+                padding: 16px;
+                width: 360px;
+                margin-bottom: 16px;
+
+                .unit-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .unit-title {
+                        font-size: 16px;
+                        font-weight: 600;
+                    }
+
+                    .unit-actions {
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+
+                .videos-list {
+                    display: flex;
+                    gap: 12px;
+                    margin-bottom: 8px;
+
+                    .video-item {
+                        width: 100px;
+
+                        .video-thumbnail {
+                            position: relative;
+                            width: 100px;
+                            height: 60px;
+                            border-radius: 6px;
+                            overflow: hidden;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            .video-overlay {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: rgba(0, 0, 0, 0.2);
+                                opacity: 0;
+                                transition: opacity 0.2s;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        .video-info {
+                            margin-top: 4px;
+
+                            .video-name {
+                                font-size: 12px;
+                                font-weight: 500;
+                                color: #1d2129;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            .video-meta {
+                                font-size: 11px;
+                                color: #86909c;
+                                display: flex;
+                                gap: 4px;
+                            }
+
+                            .video-status {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+
+                .analysis-progress {
+                    margin-top: 8px;
+
+                    .progress-info {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        color: #86909c;
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.video-meta-info {
+    margin-top: 16px;
+    font-size: 13px;
+    color: #4e5969;
+
+    p {
+        margin: 2px 0;
+    }
+}
+
+.video-name {
+    margin-top: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: #86909c;
+}
+
+.stat-value {
+    font-size: 16px;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tower-monitoring/vibration.vue b/src/views/tower-monitoring/vibration.vue
new file mode 100644
index 0000000..07d9e49
--- /dev/null
+++ b/src/views/tower-monitoring/vibration.vue
@@ -0,0 +1,497 @@
+<template>
+    <GiPageLayout>
+        <div class="raw-data-container">
+            <!-- 顶部按钮 -->
+            <div class="action-bar">
+                <div class="action-buttons">
+                    <a-button type="primary" @click="openUploadModal">
+                        <template #icon>
+                            <IconUpload />
+                        </template>
+                        上传视频
+                    </a-button>
+                </div>
+            </div>
+
+            <!-- 筛选 -->
+            <div class="filter-section">
+                <a-form :model="filterForm" layout="inline">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="filterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="filterForm.turbineId" placeholder="请选择机组" :options="turbineOptions"
+                            allow-clear :disabled="!filterForm.projectId" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button type="primary" @click="handleQuery">查询</a-button>
+                    </a-form-item>
+                </a-form>
+            </div>
+
+            <!-- 列表 -->
+            <a-table :columns="columns" :data="tableData" :pagination="pagination" :loading="loading"
+                :scroll="{ y: 'calc(100vh - 380px)' }">
+                <template #type="{ record }">
+                    <a-tag>{{ record.type === 'clearance' ? '净空' : '形变' }}</a-tag>
+                </template>
+                <template #status="{ record }">
+                    <a-tag :color="record.preTreatment ? 'green' : 'red'">
+                        {{ record.preTreatment ? '已处理' : '未处理' }}
+                    </a-tag>
+                </template>
+                <template #action="{ record }">
+                    <a-space>
+                        <a-button size="mini" @click="handlePreview(record)">预览</a-button>
+                        <a-button size="mini" @click="handleDownload(record)">下载</a-button>
+                        <a-popconfirm content="确认删除？" @ok="handleDelete(record)">
+                            <a-button size="mini" status="danger">删除</a-button>
+                        </a-popconfirm>
+                    </a-space>
+
+                </template>
+            </a-table>
+
+            <!-- 上传弹窗 -->
+            <a-modal v-model:visible="showUploadModal" title="上传原始视频" width="600px" :ok-loading="uploading"
+                @ok="handleUpload" @cancel="showUploadModal = false">
+                <a-form :model="uploadForm" layout="vertical">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="uploadForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="onProjectChangeUpload" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="uploadForm.turbineId" placeholder="请选择机组" :options="turbineOptionsUpload"
+                            allow-clear :disabled="!uploadForm.projectId" />
+                    </a-form-item>
+                    <a-form-item label="类型" required>
+                        <a-select v-model="uploadForm.type" placeholder="请选择类型" :options="typeOptions" />
+                    </a-form-item>
+                    <a-form-item label="视频文件" required>
+                        <a-upload v-model:file-list="uploadForm.fileList" :multiple="uploadMode === 'batch'"
+                            :limit="uploadMode === 'batch' ? 10 : 1" accept="video/*" :auto-upload="false"
+                            list-type="picture-card" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-radio-group v-model="uploadMode" type="button">
+                            <a-radio value="single">单文件</a-radio>
+                            <a-radio value="batch">批量</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </div>
+    </GiPageLayout>
+    <!-- 视频预览弹窗 -->
+    <a-modal v-model:visible="previewVisible" title="视频预览" width="800px" :footer="false"
+        @cancel="previewVisible = false">
+        <a-tabs v-model:active-key="activePreviewTab" @change="activePreviewTab = $event as any">
+            <!-- 原始视频 -->
+            <a-tab-pane key="video" title="原始视频">
+                <video v-if="previewUrl" :src="previewUrl" controls
+                    style="width: 100%; max-height: 60vh; border-radius: 4px"></video>
+            </a-tab-pane>
+
+            <!-- 处理结果 -->
+            <a-tab-pane key="result" title="处理结果">
+                <a-spin :loading="loadingResult">
+                    <a-space direction="vertical" size="medium" style="width: 100%">
+                        <!-- 图片 -->
+                        <img v-if="resultImgUrl" :src="resultImgUrl" style="max-width: 100%; border-radius: 4px"
+                            alt="last frame" />
+
+                        <!-- JSON 预览 -->
+                        <a-card title="results.json" size="small">
+                            <pre>{{ JSON.stringify(resultJson, null, 2) }}</pre>
+                        </a-card>
+                    </a-space>
+                </a-spin>
+            </a-tab-pane>
+        </a-tabs>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { TableColumnData } from '@arco-design/web-vue'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+    getProjectList,
+    getTurbineList
+} from '@/apis/industrial-image'
+import {
+    getVideoPage,
+    uploadBatchVideo,
+    uploadSingleVideo,
+    deleteVideo,
+    downloadVideo
+} from '@/apis/video-monitor'
+
+/* ---------------- 下拉 & 表单 ---------------- */
+const projectOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptions = ref<{ label: string; value: string }[]>([])       // 筛选用
+const turbineOptionsUpload = ref<{ label: string; value: string }[]>([]) // 上传弹窗用
+const typeOptions = [
+    { label: '净空', value: 'clearance' },
+    { label: '形变', value: 'deformation' }
+]
+
+const filterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+
+const uploadForm = reactive({
+    projectId: '',
+    turbineId: '',
+    type: '',
+    fileList: [] as any[]
+})
+
+const uploadMode = ref<'single' | 'batch'>('single')
+
+/* ---------------- 列表 ---------------- */
+const columns: TableColumnData[] = [
+    { title: '文件名', dataIndex: 'videoName', ellipsis: true, width: 220 },
+    // { title: '项目', dataIndex: 'projectName' },
+    // { title: '机组', dataIndex: 'turbineName' },
+    { title: '类型', slotName: 'type' },
+    { title: '上传时间', dataIndex: 'uploadTime' },
+    { title: '状态', slotName: 'status' },
+    { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
+]
+
+const tableData = ref<any[]>([])
+const loading = ref(false)
+const pagination = reactive({ current: 1, pageSize: 20, total: 0 })
+
+/* ---------------- 控制弹窗 ---------------- */
+const showUploadModal = ref(false)
+const uploading = ref(false)
+
+/* ---------------- 初始化 ---------------- */
+onMounted(async () => {
+    const { data } = await getProjectList({ page: 1, pageSize: 1000 })
+    projectOptions.value = data.map((p: any) => ({ label: p.projectName, value: p.projectId }))
+    handleQuery()
+})
+const activePreviewTab = ref<'video' | 'result'>('video')   // 当前标签页
+const resultImgUrl = ref('')
+const resultJson = ref<Record<string, any>>({})
+const loadingResult = ref(false)
+
+async function loadResultFiles(row: any) {
+    if (!row.preTreatment) return
+    loadingResult.value = true
+    try {
+        const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+        // 图片
+        resultImgUrl.value = `${base}${row.preImagePath}/last_frame.jpg`
+
+        // JSON
+        const jsonUrl = `${base}${row.preImagePath}/results.json`
+        const res = await fetch(jsonUrl)
+        resultJson.value = await res.json()
+    } catch (e) {
+        console.error(e)
+        resultJson.value = {}
+    } finally {
+        loadingResult.value = false
+    }
+    console.log('result', resultImgUrl.value)
+}
+/* 项目 -> 机组（筛选） */
+watch(
+    () => filterForm.projectId,
+    async (val) => {
+        filterForm.turbineId = ''
+        turbineOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineOptions.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+    }
+)
+const previewVisible = ref(false)
+const previewUrl = ref('')
+
+function handlePreview(row: any) {
+    const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+    previewUrl.value = new URL(row.videoPath.replace(/^\/+/, ''), base).href
+    previewVisible.value = true
+    activePreviewTab.value = 'video'     // 默认先显示视频
+    if (row.preTreatment) {
+        loadResultFiles(row)               // 预加载结果
+    }
+}
+/* 项目 -> 机组（上传弹窗） */
+async function onProjectChangeUpload(projectId: string) {
+    uploadForm.turbineId = ''
+    turbineOptionsUpload.value = []
+    if (!projectId) return
+    const { data } = await getTurbineList({ projectId })
+    turbineOptionsUpload.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+}
+
+/* ---------------- 查询 ---------------- */
+function handleQuery() {
+    pagination.current = 1
+    loadTable()
+}
+async function loadTable() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            projectId: filterForm.projectId,
+            turbineId: filterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        console.log(data)
+        tableData.value = data
+        pagination.total = data.length
+    } finally {
+        loading.value = false
+    }
+}
+
+/* ---------------- 上传 ---------------- */
+function openUploadModal() {
+    uploadForm.projectId = ''
+    uploadForm.turbineId = ''
+    uploadForm.type = ''
+    uploadForm.fileList = []
+    showUploadModal.value = true
+}
+async function handleUpload() {
+    if (!uploadForm.projectId || !uploadForm.type || !uploadForm.fileList.length) {
+        Message.warning('请完整填写')
+        return
+    }
+    uploading.value = true
+    try {
+        const files = uploadForm.fileList.map((f: any) => f.file)
+        if (uploadMode.value === 'single') {
+            await uploadSingleVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files[0]
+            )
+        } else {
+            await uploadBatchVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files
+            )
+        }
+        Message.success('上传成功')
+        showUploadModal.value = false
+        loadTable()
+    } finally {
+        uploading.value = false
+    }
+}
+
+/* ---------------- 下载 / 删除 ---------------- */
+async function handleDownload(row: any) {
+    const url = await downloadVideo(row.videoId)
+    window.open(url, '_blank')
+}
+async function handleDelete(row: any) {
+    await deleteVideo(row.videoId)
+    Message.success('删除成功')
+    loadTable()
+}
+</script>
+
+
+<style scoped lang="scss">
+.raw-data-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 20px;
+}
+
+.page-title {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #1d2129;
+}
+
+.page-subtitle {
+    font-size: 14px;
+    color: #86909c;
+    margin: 0;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .filter-section {
+        margin-left: 24px;
+    }
+}
+
+.project-sections {
+    .project-section {
+        margin-bottom: 32px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px #f0f1f2;
+        padding: 20px;
+
+        .project-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .project-title {
+                font-size: 20px;
+                font-weight: 600;
+            }
+
+            .project-stats {
+                display: flex;
+                gap: 16px;
+
+                .stat-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #86909c;
+                }
+            }
+        }
+
+        .units-grid {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+
+            .unit-card {
+                background: #fafbfc;
+                border-radius: 8px;
+                padding: 16px;
+                width: 360px;
+                margin-bottom: 16px;
+
+                .unit-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .unit-title {
+                        font-size: 16px;
+                        font-weight: 600;
+                    }
+
+                    .unit-actions {
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+
+                .videos-list {
+                    display: flex;
+                    gap: 12px;
+                    margin-bottom: 8px;
+
+                    .video-item {
+                        width: 100px;
+
+                        .video-thumbnail {
+                            position: relative;
+                            width: 100px;
+                            height: 60px;
+                            border-radius: 6px;
+                            overflow: hidden;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            .video-overlay {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: rgba(0, 0, 0, 0.2);
+                                opacity: 0;
+                                transition: opacity 0.2s;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        .video-info {
+                            margin-top: 4px;
+
+                            .video-name {
+                                font-size: 12px;
+                                font-weight: 500;
+                                color: #1d2129;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            .video-meta {
+                                font-size: 11px;
+                                color: #86909c;
+                                display: flex;
+                                gap: 4px;
+                            }
+
+                            .video-status {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+
+                .analysis-progress {
+                    margin-top: 8px;
+
+                    .progress-info {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        color: #86909c;
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.video-meta-info {
+    margin-top: 16px;
+    font-size: 13px;
+    color: #4e5969;
+
+    p {
+        margin: 2px 0;
+    }
+}
+</style>
diff --git a/src/views/tower-monitoring/whistle.vue b/src/views/tower-monitoring/whistle.vue
new file mode 100644
index 0000000..07d9e49
--- /dev/null
+++ b/src/views/tower-monitoring/whistle.vue
@@ -0,0 +1,497 @@
+<template>
+    <GiPageLayout>
+        <div class="raw-data-container">
+            <!-- 顶部按钮 -->
+            <div class="action-bar">
+                <div class="action-buttons">
+                    <a-button type="primary" @click="openUploadModal">
+                        <template #icon>
+                            <IconUpload />
+                        </template>
+                        上传视频
+                    </a-button>
+                </div>
+            </div>
+
+            <!-- 筛选 -->
+            <div class="filter-section">
+                <a-form :model="filterForm" layout="inline">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="filterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="filterForm.turbineId" placeholder="请选择机组" :options="turbineOptions"
+                            allow-clear :disabled="!filterForm.projectId" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button type="primary" @click="handleQuery">查询</a-button>
+                    </a-form-item>
+                </a-form>
+            </div>
+
+            <!-- 列表 -->
+            <a-table :columns="columns" :data="tableData" :pagination="pagination" :loading="loading"
+                :scroll="{ y: 'calc(100vh - 380px)' }">
+                <template #type="{ record }">
+                    <a-tag>{{ record.type === 'clearance' ? '净空' : '形变' }}</a-tag>
+                </template>
+                <template #status="{ record }">
+                    <a-tag :color="record.preTreatment ? 'green' : 'red'">
+                        {{ record.preTreatment ? '已处理' : '未处理' }}
+                    </a-tag>
+                </template>
+                <template #action="{ record }">
+                    <a-space>
+                        <a-button size="mini" @click="handlePreview(record)">预览</a-button>
+                        <a-button size="mini" @click="handleDownload(record)">下载</a-button>
+                        <a-popconfirm content="确认删除？" @ok="handleDelete(record)">
+                            <a-button size="mini" status="danger">删除</a-button>
+                        </a-popconfirm>
+                    </a-space>
+
+                </template>
+            </a-table>
+
+            <!-- 上传弹窗 -->
+            <a-modal v-model:visible="showUploadModal" title="上传原始视频" width="600px" :ok-loading="uploading"
+                @ok="handleUpload" @cancel="showUploadModal = false">
+                <a-form :model="uploadForm" layout="vertical">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="uploadForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="onProjectChangeUpload" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="uploadForm.turbineId" placeholder="请选择机组" :options="turbineOptionsUpload"
+                            allow-clear :disabled="!uploadForm.projectId" />
+                    </a-form-item>
+                    <a-form-item label="类型" required>
+                        <a-select v-model="uploadForm.type" placeholder="请选择类型" :options="typeOptions" />
+                    </a-form-item>
+                    <a-form-item label="视频文件" required>
+                        <a-upload v-model:file-list="uploadForm.fileList" :multiple="uploadMode === 'batch'"
+                            :limit="uploadMode === 'batch' ? 10 : 1" accept="video/*" :auto-upload="false"
+                            list-type="picture-card" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-radio-group v-model="uploadMode" type="button">
+                            <a-radio value="single">单文件</a-radio>
+                            <a-radio value="batch">批量</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </div>
+    </GiPageLayout>
+    <!-- 视频预览弹窗 -->
+    <a-modal v-model:visible="previewVisible" title="视频预览" width="800px" :footer="false"
+        @cancel="previewVisible = false">
+        <a-tabs v-model:active-key="activePreviewTab" @change="activePreviewTab = $event as any">
+            <!-- 原始视频 -->
+            <a-tab-pane key="video" title="原始视频">
+                <video v-if="previewUrl" :src="previewUrl" controls
+                    style="width: 100%; max-height: 60vh; border-radius: 4px"></video>
+            </a-tab-pane>
+
+            <!-- 处理结果 -->
+            <a-tab-pane key="result" title="处理结果">
+                <a-spin :loading="loadingResult">
+                    <a-space direction="vertical" size="medium" style="width: 100%">
+                        <!-- 图片 -->
+                        <img v-if="resultImgUrl" :src="resultImgUrl" style="max-width: 100%; border-radius: 4px"
+                            alt="last frame" />
+
+                        <!-- JSON 预览 -->
+                        <a-card title="results.json" size="small">
+                            <pre>{{ JSON.stringify(resultJson, null, 2) }}</pre>
+                        </a-card>
+                    </a-space>
+                </a-spin>
+            </a-tab-pane>
+        </a-tabs>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { TableColumnData } from '@arco-design/web-vue'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+    getProjectList,
+    getTurbineList
+} from '@/apis/industrial-image'
+import {
+    getVideoPage,
+    uploadBatchVideo,
+    uploadSingleVideo,
+    deleteVideo,
+    downloadVideo
+} from '@/apis/video-monitor'
+
+/* ---------------- 下拉 & 表单 ---------------- */
+const projectOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptions = ref<{ label: string; value: string }[]>([])       // 筛选用
+const turbineOptionsUpload = ref<{ label: string; value: string }[]>([]) // 上传弹窗用
+const typeOptions = [
+    { label: '净空', value: 'clearance' },
+    { label: '形变', value: 'deformation' }
+]
+
+const filterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+
+const uploadForm = reactive({
+    projectId: '',
+    turbineId: '',
+    type: '',
+    fileList: [] as any[]
+})
+
+const uploadMode = ref<'single' | 'batch'>('single')
+
+/* ---------------- 列表 ---------------- */
+const columns: TableColumnData[] = [
+    { title: '文件名', dataIndex: 'videoName', ellipsis: true, width: 220 },
+    // { title: '项目', dataIndex: 'projectName' },
+    // { title: '机组', dataIndex: 'turbineName' },
+    { title: '类型', slotName: 'type' },
+    { title: '上传时间', dataIndex: 'uploadTime' },
+    { title: '状态', slotName: 'status' },
+    { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
+]
+
+const tableData = ref<any[]>([])
+const loading = ref(false)
+const pagination = reactive({ current: 1, pageSize: 20, total: 0 })
+
+/* ---------------- 控制弹窗 ---------------- */
+const showUploadModal = ref(false)
+const uploading = ref(false)
+
+/* ---------------- 初始化 ---------------- */
+onMounted(async () => {
+    const { data } = await getProjectList({ page: 1, pageSize: 1000 })
+    projectOptions.value = data.map((p: any) => ({ label: p.projectName, value: p.projectId }))
+    handleQuery()
+})
+const activePreviewTab = ref<'video' | 'result'>('video')   // 当前标签页
+const resultImgUrl = ref('')
+const resultJson = ref<Record<string, any>>({})
+const loadingResult = ref(false)
+
+async function loadResultFiles(row: any) {
+    if (!row.preTreatment) return
+    loadingResult.value = true
+    try {
+        const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+        // 图片
+        resultImgUrl.value = `${base}${row.preImagePath}/last_frame.jpg`
+
+        // JSON
+        const jsonUrl = `${base}${row.preImagePath}/results.json`
+        const res = await fetch(jsonUrl)
+        resultJson.value = await res.json()
+    } catch (e) {
+        console.error(e)
+        resultJson.value = {}
+    } finally {
+        loadingResult.value = false
+    }
+    console.log('result', resultImgUrl.value)
+}
+/* 项目 -> 机组（筛选） */
+watch(
+    () => filterForm.projectId,
+    async (val) => {
+        filterForm.turbineId = ''
+        turbineOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineOptions.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+    }
+)
+const previewVisible = ref(false)
+const previewUrl = ref('')
+
+function handlePreview(row: any) {
+    const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+    previewUrl.value = new URL(row.videoPath.replace(/^\/+/, ''), base).href
+    previewVisible.value = true
+    activePreviewTab.value = 'video'     // 默认先显示视频
+    if (row.preTreatment) {
+        loadResultFiles(row)               // 预加载结果
+    }
+}
+/* 项目 -> 机组（上传弹窗） */
+async function onProjectChangeUpload(projectId: string) {
+    uploadForm.turbineId = ''
+    turbineOptionsUpload.value = []
+    if (!projectId) return
+    const { data } = await getTurbineList({ projectId })
+    turbineOptionsUpload.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+}
+
+/* ---------------- 查询 ---------------- */
+function handleQuery() {
+    pagination.current = 1
+    loadTable()
+}
+async function loadTable() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            projectId: filterForm.projectId,
+            turbineId: filterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        console.log(data)
+        tableData.value = data
+        pagination.total = data.length
+    } finally {
+        loading.value = false
+    }
+}
+
+/* ---------------- 上传 ---------------- */
+function openUploadModal() {
+    uploadForm.projectId = ''
+    uploadForm.turbineId = ''
+    uploadForm.type = ''
+    uploadForm.fileList = []
+    showUploadModal.value = true
+}
+async function handleUpload() {
+    if (!uploadForm.projectId || !uploadForm.type || !uploadForm.fileList.length) {
+        Message.warning('请完整填写')
+        return
+    }
+    uploading.value = true
+    try {
+        const files = uploadForm.fileList.map((f: any) => f.file)
+        if (uploadMode.value === 'single') {
+            await uploadSingleVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files[0]
+            )
+        } else {
+            await uploadBatchVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files
+            )
+        }
+        Message.success('上传成功')
+        showUploadModal.value = false
+        loadTable()
+    } finally {
+        uploading.value = false
+    }
+}
+
+/* ---------------- 下载 / 删除 ---------------- */
+async function handleDownload(row: any) {
+    const url = await downloadVideo(row.videoId)
+    window.open(url, '_blank')
+}
+async function handleDelete(row: any) {
+    await deleteVideo(row.videoId)
+    Message.success('删除成功')
+    loadTable()
+}
+</script>
+
+
+<style scoped lang="scss">
+.raw-data-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 20px;
+}
+
+.page-title {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #1d2129;
+}
+
+.page-subtitle {
+    font-size: 14px;
+    color: #86909c;
+    margin: 0;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .filter-section {
+        margin-left: 24px;
+    }
+}
+
+.project-sections {
+    .project-section {
+        margin-bottom: 32px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px #f0f1f2;
+        padding: 20px;
+
+        .project-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .project-title {
+                font-size: 20px;
+                font-weight: 600;
+            }
+
+            .project-stats {
+                display: flex;
+                gap: 16px;
+
+                .stat-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #86909c;
+                }
+            }
+        }
+
+        .units-grid {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+
+            .unit-card {
+                background: #fafbfc;
+                border-radius: 8px;
+                padding: 16px;
+                width: 360px;
+                margin-bottom: 16px;
+
+                .unit-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .unit-title {
+                        font-size: 16px;
+                        font-weight: 600;
+                    }
+
+                    .unit-actions {
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+
+                .videos-list {
+                    display: flex;
+                    gap: 12px;
+                    margin-bottom: 8px;
+
+                    .video-item {
+                        width: 100px;
+
+                        .video-thumbnail {
+                            position: relative;
+                            width: 100px;
+                            height: 60px;
+                            border-radius: 6px;
+                            overflow: hidden;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            .video-overlay {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: rgba(0, 0, 0, 0.2);
+                                opacity: 0;
+                                transition: opacity 0.2s;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        .video-info {
+                            margin-top: 4px;
+
+                            .video-name {
+                                font-size: 12px;
+                                font-weight: 500;
+                                color: #1d2129;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            .video-meta {
+                                font-size: 11px;
+                                color: #86909c;
+                                display: flex;
+                                gap: 4px;
+                            }
+
+                            .video-status {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+
+                .analysis-progress {
+                    margin-top: 8px;
+
+                    .progress-info {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        color: #86909c;
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.video-meta-info {
+    margin-top: 16px;
+    font-size: 13px;
+    color: #4e5969;
+
+    p {
+        margin: 2px 0;
+    }
+}
+</style>