From f6702ddf985da1a61689b79813bc53eef75b9fbc Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Wed, 19 Nov 2025 00:03:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=9C=AC=E5=9C=B0js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mini/capi/biz/domain/BizFileFolders.java  |    6 +-
 .../capi/biz/mapper/BizFileFoldersMapper.java |    2 +-
 .../com/mini/capi/biz/viewController.java     |   16 +-
 .../com/mini/capi/model/info/FolderTree.java  |   26 +
 src/main/java/com/mini/capi/mybatis/demo.java |    2 +-
 src/main/resources/templates/file.html        | 1110 ++++++-----------
 6 files changed, 418 insertions(+), 744 deletions(-)
 create mode 100644 src/main/java/com/mini/capi/model/info/FolderTree.java

diff --git a/src/main/java/com/mini/capi/biz/domain/BizFileFolders.java b/src/main/java/com/mini/capi/biz/domain/BizFileFolders.java
index ae9c2e7..914accd 100644
--- a/src/main/java/com/mini/capi/biz/domain/BizFileFolders.java
+++ b/src/main/java/com/mini/capi/biz/domain/BizFileFolders.java
@@ -15,7 +15,7 @@ import lombok.Setter;
  * </p>
  *
  * @author gaoxq
- * @since 2025-11-16
+ * @since 2025-11-18
  */
 @Getter
 @Setter
@@ -46,13 +46,13 @@ public class BizFileFolders implements Serializable {
      * 父文件夹ID（0表示根目录）
      */
     @TableField("parent_id")
-    private Integer parentId;
+    private String parentId;
 
     /**
      * 创建人ID（关联用户表）
      */
     @TableField("creator_id")
-    private Integer creatorId;
+    private String creatorId;
 
     /**
      * 更新时间
diff --git a/src/main/java/com/mini/capi/biz/mapper/BizFileFoldersMapper.java b/src/main/java/com/mini/capi/biz/mapper/BizFileFoldersMapper.java
index 9c4b6a2..94ba1b7 100644
--- a/src/main/java/com/mini/capi/biz/mapper/BizFileFoldersMapper.java
+++ b/src/main/java/com/mini/capi/biz/mapper/BizFileFoldersMapper.java
@@ -9,7 +9,7 @@ import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  * </p>
  *
  * @author gaoxq
- * @since 2025-11-16
+ * @since 2025-11-18
  */
 public interface BizFileFoldersMapper extends BaseMapper<BizFileFolders> {
 
diff --git a/src/main/java/com/mini/capi/biz/viewController.java b/src/main/java/com/mini/capi/biz/viewController.java
index ab2e7c9..3f4aca3 100644
--- a/src/main/java/com/mini/capi/biz/viewController.java
+++ b/src/main/java/com/mini/capi/biz/viewController.java
@@ -4,6 +4,7 @@ import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.mini.capi.api.service.sysService;
 import com.mini.capi.biz.domain.*;
 import com.mini.capi.biz.service.*;
+import com.mini.capi.model.info.FolderTree;
 import com.mini.capi.model.info.RunInfo;
 import com.mini.capi.utils.DateUtils;
 import com.mini.capi.utils.SqlUtils;
@@ -14,6 +15,7 @@ import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 
+import java.util.ArrayList;
 import java.util.Collections;
 import java.util.Comparator;
 import java.util.List;
@@ -152,10 +154,18 @@ public class viewController {
     @GetMapping("/biz/dataDoc")
     public String getDataDox(Model model) {
         List<BizFiles> files = filesService.list();
-        List<BizFileFolders> folders = foldersService.list();
-
+        List<FolderTree> folderTrees = new ArrayList<>();
+        QueryWrapper<BizFileFolders> parentWrapper = new QueryWrapper<>();
+        parentWrapper.eq("parent_id", "0");
+        List<BizFileFolders> folders = foldersService.list(parentWrapper);
+        for (BizFileFolders fileFolder : folders) {
+            QueryWrapper<BizFileFolders> childWrapper = new QueryWrapper<>();
+            childWrapper.eq("parent_id", fileFolder.getFolderId());
+            List<BizFileFolders> childFolders = foldersService.list(childWrapper);
+            folderTrees.add(new FolderTree(fileFolder, childFolders));
+        }
         model.addAttribute("files", files);
-        model.addAttribute("folders", folders);
+        model.addAttribute("folderTrees", folderTrees);
         return "file";
     }
 
diff --git a/src/main/java/com/mini/capi/model/info/FolderTree.java b/src/main/java/com/mini/capi/model/info/FolderTree.java
new file mode 100644
index 0000000..074f54b
--- /dev/null
+++ b/src/main/java/com/mini/capi/model/info/FolderTree.java
@@ -0,0 +1,26 @@
+package com.mini.capi.model.info;
+
+import com.mini.capi.biz.domain.BizFileFolders;
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.List;
+
+@Data
+public class FolderTree implements Serializable {
+
+    private BizFileFolders folder;
+
+    private List<BizFileFolders> childFolders;
+
+
+    public FolderTree() {
+    }
+
+
+    public FolderTree(BizFileFolders folder, List<BizFileFolders> childFolders) {
+        this.folder = folder;
+        this.childFolders = childFolders;
+    }
+
+}
diff --git a/src/main/java/com/mini/capi/mybatis/demo.java b/src/main/java/com/mini/capi/mybatis/demo.java
index 7b4daca..7d765f9 100644
--- a/src/main/java/com/mini/capi/mybatis/demo.java
+++ b/src/main/java/com/mini/capi/mybatis/demo.java
@@ -29,7 +29,7 @@ public class demo {
                             .pathInfo(Collections.singletonMap(OutputFile.xml, System.getProperty("user.dir") + "/src/main/resources/mapper"));
                 })
                 .strategyConfig(builder -> {
-                    builder.addInclude("data_table_info,data_table_field")
+                    builder.addInclude("biz_file_folders")
                             .addTablePrefix("biz_,erp_")
                             .entityBuilder()
                             .enableLombok()
diff --git a/src/main/resources/templates/file.html b/src/main/resources/templates/file.html
index 49d3975..20d28f0 100644
--- a/src/main/resources/templates/file.html
+++ b/src/main/resources/templates/file.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>文档中心</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <script th:src="@{/css/tailwindcss.css}"></script>
+    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
 
     <!-- 配置Tailwind自定义颜色 -->
     <script>
@@ -13,13 +13,9 @@
             theme: {
                 extend: {
                     colors: {
-                        primary: '#e3f2fd',
-                        secondary: '#bbdefb',
-                        accent: '#64b5f6',
-                        dark: '#1976d2'
-                    },
-                    fontFamily: {
-                        sans: ['Inter', 'system-ui', 'sans-serif'],
+                        primary: '#3B82F6',
+                        secondary: '#DBEAFE',
+                        neutral: '#F3F4F6',
                     },
                 }
             }
@@ -31,288 +27,121 @@
             .content-auto {
                 content-visibility: auto;
             }
+
             .scrollbar-thin {
                 scrollbar-width: thin;
             }
-            .scrollbar-thumb-rounded {
-                scrollbar-color: rgba(100, 181, 246, 0.5) transparent;
+
+            .scrollbar-thin::-webkit-scrollbar {
+                width: 6px;
             }
-            .transition-height {
-                transition: max-height 0.3s ease-out;
+
+            .scrollbar-thin::-webkit-scrollbar-thumb {
+                background-color: rgba(156, 163, 175, 0.5);
+                border-radius: 3px;
             }
-            .alert-modal-enter {
-                opacity: 0;
-                transform: scale(0.9);
+
+            .fade-out {
+                animation: fadeOut 3s forwards;
             }
-            .alert-modal-enter-active {
-                opacity: 1;
-                transform: scale(1);
-                transition: opacity 300ms, transform 300ms;
-            }
-            .alert-modal-exit {
-                opacity: 1;
-            }
-            .alert-modal-exit-active {
-                opacity: 0;
-                transform: scale(0.9);
-                transition: opacity 300ms, transform 300ms;
+
+            @keyframes fadeOut {
+                0% {
+                    opacity: 1;
+                }
+                70% {
+                    opacity: 1;
+                }
+                100% {
+                    opacity: 0;
+                }
             }
         }
     </style>
 </head>
-<body class="bg-gray-50 min-h-screen flex flex-col">
+<body class="bg-gray-100 min-h-screen flex flex-col">
 <!-- 主容器 -->
-<div class="flex-1 flex flex-col md:flex-row p-4 pb-[5px] gap-4">
-    <!-- 左侧文件夹区域 -->
-    <div class="bg-primary rounded-lg shadow-md flex-1 md:flex-none md:w-64 lg:w-72 flex flex-col h-[calc(100vh-2.5rem)] max-h-[calc(100vh-2.5rem)]">
-        <!-- 文件夹搜索 -->
-        <div class="p-4 border-b border-secondary">
-            <div class="relative">
-                <input type="text" id="folderSearch" placeholder="搜索文件夹..."
-                       class="w-full pl-10 pr-4 py-2 rounded-lg border border-secondary focus:outline-none focus:ring-2 focus:ring-accent transition-all">
-                <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
+<div class="flex-1 p-4 pb-[10px]">
+    <div class="flex h-full gap-4">
+        <!-- 左侧文件夹区域 -->
+        <div class="w-1/4 bg-white rounded-lg shadow-md overflow-hidden flex flex-col h-[calc(100vh-2.5rem)]">
+            <!-- 文件夹搜索 -->
+            <div class="p-4 bg-secondary">
+                <div class="relative">
+                    <input type="text" id="folderSearch" placeholder="搜索文件夹..."
+                           class="w-full pl-10 pr-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
+                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                </div>
+            </div>
+
+            <!-- 文件夹列表 -->
+            <div class="flex-1 overflow-y-auto scrollbar-thin p-2">
+                <!-- 文件夹分组1 -->
+                <div class="mb-2" th:each=" folders : ${folderTrees}">
+                    <div class="folder-group-header bg-secondary/70 rounded-md p-2 cursor-pointer flex items-center justify-between"
+                         th:onclick="toggleFolderGroup('project')">
+                        <span class="font-medium" th:text="${folders.getFolder().getFolderName()}"></span>
+                        <i id="project-icon" class="fa fa-chevron-right text-sm transition-transform duration-300"></i>
+                    </div>
+                    <div id="project" class="folder-group hidden pl-4 mt-1 space-y-1"
+                         th:each="childFolder : ${folders.getChildFolders()}">
+                        <div class="folder-item p-2 rounded hover:bg-gray-100 cursor-pointer flex items-center"
+                             th:onclick="showFilesInFolder([[${childFolder.getFolderId()}]])">
+                            <i class="fa fa-folder text-yellow-500 mr-2"></i>
+                            <span th:text="${childFolder.getFolderName()}"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 创建文件夹按钮 -->
+            <div class="p-4 border-t border-gray-200">
+                <button id="createFolderBtn"
+                        class="w-full bg-primary text-white py-2 rounded-md hover:bg-primary/90 flex items-center justify-center transition-colors"
+                        onclick="openCreateFolderModal()">
+                    <i class="fa fa-plus mr-2"></i> 创建文件夹
+                </button>
             </div>
         </div>
 
-        <!-- 文件夹列表 -->
-        <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-rounded p-2" id="folderList">
-            <!-- 文件夹分组1 -->
-            <div class="mb-2 folder-group">
-                <div class="folder-group-header flex items-center justify-between p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                     onclick="toggleFolderGroup(this)">
-                    <div class="flex items-center">
-                        <i class="fa fa-folder-o mr-2 text-accent transition-transform duration-300"></i>
-                        <span>项目文档</span>
-                    </div>
-                    <i class="fa fa-chevron-down text-xs text-gray-500 transition-transform duration-300"></i>
-                </div>
-                <div class="folder-group-content ml-6 mt-1 max-h-0 overflow-hidden transition-height">
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'project_docs_1')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>需求文档</span>
-                    </div>
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'project_docs_2')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>设计文档</span>
-                    </div>
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'project_docs_3')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>测试报告</span>
-                    </div>
+        <!-- 右侧文件区域 -->
+        <div class="w-3/4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg shadow-md overflow-hidden flex flex-col h-[calc(100vh-2.5rem)]">
+            <!-- 文件操作栏 -->
+            <div class="p-4 bg-secondary/80 flex flex-col sm:flex-row gap-3">
+                <!-- 文件搜索 -->
+                <div class="relative flex-1">
+                    <input type="text" id="fileSearch" placeholder="搜索文件..."
+                           class="w-full pl-10 pr-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
+                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                 </div>
+
+                <!-- 上传按钮 -->
+                <button id="uploadBtn"
+                        class="bg-primary text-white py-2 px-4 rounded-md hover:bg-primary/90 flex items-center transition-colors"
+                        onclick="openUploadModal()">
+                    <i class="fa fa-upload mr-2"></i> 上传文件
+                </button>
             </div>
 
-            <!-- 文件夹分组2 -->
-            <div class="mb-2 folder-group">
-                <div class="folder-group-header flex items-center justify-between p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                     onclick="toggleFolderGroup(this)">
-                    <div class="flex items-center">
-                        <i class="fa fa-folder-o mr-2 text-accent transition-transform duration-300"></i>
-                        <span>会议记录</span>
-                    </div>
-                    <i class="fa fa-chevron-down text-xs text-gray-500 transition-transform duration-300"></i>
-                </div>
-                <div class="folder-group-content ml-6 mt-1 max-h-0 overflow-hidden transition-height">
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'meeting_1')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>周例会</span>
-                    </div>
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'meeting_2')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>项目评审会</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 文件夹分组3 -->
-            <div class="mb-2 folder-group">
-                <div class="folder-group-header flex items-center justify-between p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                     onclick="toggleFolderGroup(this)">
-                    <div class="flex items-center">
-                        <i class="fa fa-folder-o mr-2 text-accent transition-transform duration-300"></i>
-                        <span>培训资料</span>
-                    </div>
-                    <i class="fa fa-chevron-down text-xs text-gray-500 transition-transform duration-300"></i>
-                </div>
-                <div class="folder-group-content ml-6 mt-1 max-h-0 overflow-hidden transition-height">
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'training_1')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>技术培训</span>
-                    </div>
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'training_2')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>产品培训</span>
-                    </div>
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'training_3')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>新员工入职</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 文件夹分组4 -->
-            <div class="mb-2 folder-group">
-                <div class="folder-group-header flex items-center justify-between p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                     onclick="toggleFolderGroup(this)">
-                    <div class="flex items-center">
-                        <i class="fa fa-folder-o mr-2 text-accent transition-transform duration-300"></i>
-                        <span>个人文档</span>
-                    </div>
-                    <i class="fa fa-chevron-down text-xs text-gray-500 transition-transform duration-300"></i>
-                </div>
-                <div class="folder-group-content ml-6 mt-1 max-h-0 overflow-hidden transition-height">
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'personal_1')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>工作笔记</span>
-                    </div>
-                    <div class="folder-item p-2 rounded-md hover:bg-secondary cursor-pointer transition-colors"
-                         onclick="selectFolder(this, 'personal_2')">
-                        <i class="fa fa-file-o mr-2 text-gray-500"></i>
-                        <span>学习资料</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 创建文件夹按钮 -->
-        <div class="p-4 border-t border-secondary">
-            <button id="createFolderBtn" class="w-full bg-accent hover:bg-dark text-white py-2 px-4 rounded-lg transition-colors flex items-center justify-center">
-                <i class="fa fa-plus mr-2"></i>
-                <span>创建文件夹</span>
-            </button>
-        </div>
-    </div>
-
-    <!-- 右侧文件区域 -->
-    <div class="bg-primary rounded-lg shadow-md flex-1 flex flex-col h-[calc(100vh-2.5rem)] max-h-[calc(100vh-2.5rem)]">
-        <!-- 搜索和上传区域 -->
-        <div class="p-4 border-b border-secondary flex flex-col sm:flex-row gap-4">
-            <div class="relative flex-1">
-                <input type="text" id="fileSearch" placeholder="搜索文件..."
-                       class="w-full pl-10 pr-4 py-2 rounded-lg border border-secondary focus:outline-none focus:ring-2 focus:ring-accent transition-all">
-                <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
-            </div>
-            <button id="uploadBtn" class="bg-accent hover:bg-dark text-white py-2 px-4 rounded-lg transition-colors flex items-center justify-center whitespace-nowrap">
-                <i class="fa fa-upload mr-2"></i>
-                <span>上传文件</span>
-            </button>
-        </div>
-
-        <!-- 文件列表区域 -->
-        <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-rounded p-4" id="fileList">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                <!-- 文件项1 -->
-                <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow file-item" data-name="项目需求文档">
-                    <div class="flex items-center justify-between">
+            <!-- 文件列表 -->
+            <div class="flex-1 overflow-y-auto scrollbar-thin p-4">
+                <div id="allFiles" class="file-list">
+                    <!-- 需求文档 -->
+                    <div class="file-item bg-white rounded-lg p-3 mb-3 shadow-sm hover:shadow-md transition-shadow flex items-center justify-between"
+                         th:each="file: ${files}" th:data-folder="${file.getFolderId()}">
                         <div class="flex items-center">
                             <div class="w-10 h-10 bg-red-100 rounded flex items-center justify-center mr-3">
-                                <i class="fa fa-file-word-o text-red-500 text-xl"></i>
+                                <i class="fa fa-file-word-o text-red-600 text-xl"></i>
                             </div>
                             <div>
-                                <h3 class="font-medium text-gray-800 truncate max-w-[160px]">项目需求文档.docx</h3>
-                                <p class="text-xs text-gray-500">2.4MB · 2023-06-15</p>
+                                <div class="font-medium" th:text="${file.getFileName()}"></div>
+                                <div class="text-sm text-gray-500"><span th:text="${file.getFileSize()}"></span> <span
+                                        th:text="${file.getFilePath()}"></span> <span
+                                        th:text="${file.getUploadTime()}"></span></div>
                             </div>
                         </div>
-                        <button class="text-accent hover:text-dark transition-colors" onclick="downloadFile('doc12345')">
-                            <i class="fa fa-download"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- 文件项2 -->
-                <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow file-item" data-name="系统设计图">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 bg-blue-100 rounded flex items-center justify-center mr-3">
-                                <i class="fa fa-file-image-o text-blue-500 text-xl"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium text-gray-800 truncate max-w-[160px]">系统设计图.png</h3>
-                                <p class="text-xs text-gray-500">5.7MB · 2023-06-18</p>
-                            </div>
-                        </div>
-                        <button class="text-accent hover:text-dark transition-colors" onclick="downloadFile('img7890')">
-                            <i class="fa fa-download"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- 文件项3 -->
-                <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow file-item" data-name="数据库设计">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 bg-green-100 rounded flex items-center justify-center mr-3">
-                                <i class="fa fa-file-excel-o text-green-500 text-xl"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium text-gray-800 truncate max-w-[160px]">数据库设计.xlsx</h3>
-                                <p class="text-xs text-gray-500">1.2MB · 2023-06-20</p>
-                            </div>
-                        </div>
-                        <button class="text-accent hover:text-dark transition-colors" onclick="downloadFile('xls1357')">
-                            <i class="fa fa-download"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- 文件项4 -->
-                <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow file-item" data-name="API接口文档">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 bg-purple-100 rounded flex items-center justify-center mr-3">
-                                <i class="fa fa-file-pdf-o text-purple-500 text-xl"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium text-gray-800 truncate max-w-[160px]">API接口文档.pdf</h3>
-                                <p class="text-xs text-gray-500">3.8MB · 2023-06-22</p>
-                            </div>
-                        </div>
-                        <button class="text-accent hover:text-dark transition-colors" onclick="downloadFile('pdf2468')">
-                            <i class="fa fa-download"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- 文件项5 -->
-                <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow file-item" data-name="周例会记录">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 bg-red-100 rounded flex items-center justify-center mr-3">
-                                <i class="fa fa-file-word-o text-red-500 text-xl"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium text-gray-800 truncate max-w-[160px]">周例会记录.docx</h3>
-                                <p class="text-xs text-gray-500">980KB · 2023-06-25</p>
-                            </div>
-                        </div>
-                        <button class="text-accent hover:text-dark transition-colors" onclick="downloadFile('doc9876')">
-                            <i class="fa fa-download"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- 文件项6 -->
-                <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow file-item" data-name="前端开发规范">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 bg-yellow-100 rounded flex items-center justify-center mr-3">
-                                <i class="fa fa-file-code-o text-yellow-500 text-xl"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium text-gray-800 truncate max-w-[160px]">前端开发规范.md</h3>
-                                <p class="text-xs text-gray-500">560KB · 2023-06-28</p>
-                            </div>
-                        </div>
-                        <button class="text-accent hover:text-dark transition-colors" onclick="downloadFile('code5432')">
+                        <button class="text-primary hover:text-primary/80 transition-colors"
+                                th:onclick="downloadFile([[${file.getFileId()}]])">
                             <i class="fa fa-download"></i>
                         </button>
                     </div>
@@ -323,550 +152,359 @@
 </div>
 
 <!-- 创建文件夹弹窗 -->
-<div id="createFolderModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-    <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 transform transition-all">
-        <h3 class="text-lg font-semibold text-gray-800 mb-4">创建新文件夹</h3>
+<div id="createFolderModal" class="fixed inset-0 bg-black/50 flex items-center justify-center hidden z-50">
+    <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6">
+        <h3 class="text-lg font-semibold mb-4">创建新文件夹</h3>
         <div class="space-y-4">
             <div>
-                <label for="folderName" class="block text-sm font-medium text-gray-700 mb-1">文件夹名称</label>
-                <input type="text" id="folderName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent">
+                <label class="block text-sm font-medium text-gray-700 mb-1">文件夹名称</label>
+                <input type="text" id="folderName"
+                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
             </div>
             <div>
-                <label for="folderGroup" class="block text-sm font-medium text-gray-700 mb-1">所属分组</label>
-                <select id="folderGroup" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent">
-                    <option value="project">项目文档</option>
-                    <option value="meeting">会议记录</option>
-                    <option value="training">培训资料</option>
-                    <option value="personal">个人文档</option>
+                <label class="block text-sm font-medium text-gray-700 mb-1">所属分组</label>
+                <select id="folderGroup"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
+                    <option th:each="folder :${folderTrees}" th:value="${folder.getFolder().getFolderId()}"
+                            th:text="${folder.getFolder().getFolderName()}"></option>
                 </select>
             </div>
             <div class="flex justify-end gap-3 pt-2">
-                <button onclick="closeCreateFolderModal()" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors">取消</button>
-                <button onclick="createFolder()" class="px-4 py-2 bg-accent text-white rounded-md hover:bg-dark transition-colors">创建</button>
+                <button onclick="closeCreateFolderModal()"
+                        class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">取消
+                </button>
+                <button onclick="createFolder()"
+                        class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">创建
+                </button>
             </div>
         </div>
     </div>
 </div>
 
 <!-- 上传文件弹窗 -->
-<div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-    <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl p-6 transform transition-all max-h-[90vh] overflow-hidden flex flex-col">
-        <div class="flex justify-between items-center mb-4">
-            <h3 class="text-lg font-semibold text-gray-800">上传文件</h3>
-            <button onclick="closeUploadModal()" class="text-gray-500 hover:text-gray-700">
-                <i class="fa fa-times"></i>
-            </button>
-        </div>
+<div id="uploadModal" class="fixed inset-0 bg-black/50 flex items-center justify-center hidden z-50">
+    <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl p-6">
+        <h3 class="text-lg font-semibold mb-4">上传文件</h3>
+        <div class="space-y-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">选择文件夹</label>
+                <select id="uploadFolder"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
+                    <option th:each="folder :${folderTrees}" th:value="${folder.getFolder().getFolderId()}"
+                            th:text="${folder.getFolder().getFolderName()}"></option>
+                </select>
+            </div>
 
-        <div class="mb-4">
-            <label for="targetFolder" class="block text-sm font-medium text-gray-700 mb-1">上传至</label>
-            <select id="targetFolder" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent">
-                <option value="project_docs_1">项目文档 / 需求文档</option>
-                <option value="project_docs_2">项目文档 / 设计文档</option>
-                <option value="project_docs_3">项目文档 / 测试报告</option>
-                <option value="meeting_1">会议记录 / 周例会</option>
-                <option value="meeting_2">会议记录 / 项目评审会</option>
-                <!-- 更多文件夹选项 -->
-            </select>
-        </div>
+            <div id="dropArea"
+                 class="border-2 border-dashed border-gray-300 rounded-md p-8 text-center hover:border-primary transition-colors cursor-pointer">
+                <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-2"></i>
+                <p class="text-gray-500">拖拽文件到此处或 <span class="text-primary">点击上传</span></p>
+                <input type="file" id="fileInput" class="hidden" multiple>
+            </div>
 
-        <!-- 拖拽上传区域 -->
-        <div id="dropArea" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4 hover:border-accent transition-colors cursor-pointer">
-            <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-2"></i>
-            <p class="text-gray-600">拖拽文件到此处上传，或 <span class="text-accent">点击选择文件</span></p>
-            <input type="file" id="fileInput" class="hidden" multiple>
-        </div>
+            <!-- 上传进度 -->
+            <div id="uploadProgress" class="hidden">
+                <div class="text-sm font-medium mb-1">上传中...</div>
+                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                    <div id="progressBar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
+                </div>
+            </div>
 
-        <!-- 上传进度和文件列表 -->
-        <div class="flex-1 overflow-y-auto">
-            <h4 class="text-sm font-medium text-gray-700 mb-2">上传列表</h4>
-            <div id="uploadList" class="space-y-2">
-                <!-- 上传项将动态添加到这里 -->
+            <!-- 上传文件列表 -->
+            <div id="uploadFilesList" class="hidden">
+                <div class="text-sm font-medium mb-2">上传文件列表:</div>
+                <div id="uploadFiles" class="space-y-1 max-h-32 overflow-y-auto scrollbar-thin"></div>
+            </div>
+
+            <div class="flex justify-end gap-3 pt-2">
+                <button onclick="closeUploadModal()"
+                        class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">取消
+                </button>
+                <button onclick="startUpload()"
+                        class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">开始上传
+                </button>
             </div>
         </div>
-
-        <div class="mt-4 pt-4 border-t border-gray-200 flex justify-end gap-3">
-            <button onclick="closeUploadModal()" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors">取消</button>
-            <button onclick="startUpload()" class="px-4 py-2 bg-accent text-white rounded-md hover:bg-dark transition-colors">开始上传</button>
-        </div>
     </div>
 </div>
 
-<!-- 提示弹窗 - 优化版本 -->
-<div id="alertModal" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50 hidden">
-    <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 transform transition-all duration-300 ease-in-out scale-95 opacity-0" id="alertModalContent">
-        <div class="text-center mb-4">
-            <i id="alertIcon" class="fa fa-info-circle text-4xl text-accent mb-3"></i>
-            <h3 id="alertTitle" class="text-lg font-semibold text-gray-800">提示</h3>
-        </div>
-        <p id="alertMessage" class="text-gray-600 mb-6 text-center"></p>
-    </div>
-</div>
+<!-- 消息提示 -->
+<div id="messageAlert"
+     class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-3 rounded-md shadow-lg opacity-0 pointer-events-none transition-opacity z-50"></div>
 
 <script>
-    // 全局变量
-    let selectedFolderId = null;
-    let alertTimeout = null; // 用于存储自动关闭的定时器
-
-    // 页面加载完成后初始化
-    document.addEventListener('DOMContentLoaded', function() {
-        // 绑定创建文件夹按钮事件
-        document.getElementById('createFolderBtn').addEventListener('click', openCreateFolderModal);
-
-        // 绑定上传按钮事件
-        document.getElementById('uploadBtn').addEventListener('click', openUploadModal);
-
-        // 绑定文件搜索事件
-        document.getElementById('fileSearch').addEventListener('input', searchFiles);
-
-        // 绑定文件夹搜索事件
-        document.getElementById('folderSearch').addEventListener('input', searchFolders);
-
-        // 绑定拖拽上传区域事件
-        const dropArea = document.getElementById('dropArea');
-        const fileInput = document.getElementById('fileInput');
-
-        dropArea.addEventListener('click', () => fileInput.click());
-
-        fileInput.addEventListener('change', (e) => {
-            handleFiles(e.target.files);
-        });
-
-        // 拖拽事件
-        dropArea.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            dropArea.classList.add('border-accent', 'bg-primary/30');
-        });
-
-        dropArea.addEventListener('dragleave', () => {
-            dropArea.classList.remove('border-accent', 'bg-primary/30');
-        });
-
-        dropArea.addEventListener('drop', (e) => {
-            e.preventDefault();
-            dropArea.classList.remove('border-accent', 'bg-primary/30');
-            handleFiles(e.dataTransfer.files);
-        });
-    });
-
-    // 提示弹窗控制函数 - 优化版本
-    function showAlert(message, title = '提示', isError = false) {
-        // 清除之前的定时器
-        if (alertTimeout) {
-            clearTimeout(alertTimeout);
-        }
-
-        const modal = document.getElementById('alertModal');
-        const modalContent = document.getElementById('alertModalContent');
-        const titleElement = document.getElementById('alertTitle');
-        const messageElement = document.getElementById('alertMessage');
-        const iconElement = document.getElementById('alertIcon');
-
-        titleElement.textContent = title;
-        messageElement.textContent = message;
-
-        // 设置图标和颜色
-        if (isError) {
-            iconElement.className = 'fa fa-exclamation-circle text-4xl text-red-500 mb-3';
-        } else {
-            iconElement.className = 'fa fa-check-circle text-4xl text-green-500 mb-3';
-        }
-
-        // 显示弹窗并添加动画
-        modal.classList.remove('hidden');
-        // 强制回流以触发动画
-        void modalContent.offsetWidth;
-        modalContent.classList.remove('scale-95', 'opacity-0');
-        modalContent.classList.add('scale-100', 'opacity-100');
-
-        // 3秒后自动关闭
-        alertTimeout = setTimeout(() => {
-            closeAlertModal();
-        }, 3000);
-    }
-
-    function closeAlertModal() {
-        const modal = document.getElementById('alertModal');
-        const modalContent = document.getElementById('alertModalContent');
-
-        // 添加关闭动画
-        modalContent.classList.remove('scale-100', 'opacity-100');
-        modalContent.classList.add('scale-95', 'opacity-0');
-
-        // 动画结束后隐藏弹窗
-        setTimeout(() => {
-            modal.classList.add('hidden');
-            // 清除定时器
-            if (alertTimeout) {
-                clearTimeout(alertTimeout);
-                alertTimeout = null;
-            }
-        }, 300);
-    }
-
     // 文件夹分组展开/折叠
-    function toggleFolderGroup(element) {
-        const content = element.nextElementSibling;
-        const folderIcon = element.querySelector('.fa-folder-o, .fa-folder-open-o');
-        const chevronIcon = element.querySelector('.fa-chevron-down');
+    function toggleFolderGroup(groupId) {
+        const group = document.getElementById(groupId);
+        const icon = document.getElementById(`${groupId}-icon`);
 
-        if (content.style.maxHeight) {
-            content.style.maxHeight = null;
-            folderIcon.classList.remove('fa-folder-open-o');
-            folderIcon.classList.add('fa-folder-o');
-            chevronIcon.style.transform = 'rotate(0deg)';
-        } else {
-            content.style.maxHeight = content.scrollHeight + 'px';
-            folderIcon.classList.remove('fa-folder-o');
-            folderIcon.classList.add('fa-folder-open-o');
-            chevronIcon.style.transform = 'rotate(180deg)';
-        }
-    }
-
-    // 选择文件夹
-    function selectFolder(element, folderId) {
-        // 移除之前选中文件夹的样式
-        document.querySelectorAll('.folder-item.bg-secondary').forEach(item => {
-            item.classList.remove('bg-secondary');
-        });
-
-        // 添加当前选中文件夹的样式
-        element.classList.add('bg-secondary');
-        selectedFolderId = folderId;
-
-        // 关闭其他所有文件夹分组
-        document.querySelectorAll('.folder-group').forEach(group => {
-            const header = group.querySelector('.folder-group-header');
-            const content = group.querySelector('.folder-group-content');
-
-            if (content !== element.parentElement) {
-                content.style.maxHeight = null;
-                header.querySelector('.fa-folder-o, .fa-folder-open-o').classList.remove('fa-folder-open-o');
-                header.querySelector('.fa-folder-o, .fa-folder-open-o').classList.add('fa-folder-o');
-                header.querySelector('.fa-chevron-down').style.transform = 'rotate(0deg)';
+        // 关闭其他所有分组
+        document.querySelectorAll('.folder-group').forEach(item => {
+            if (item.id !== groupId) {
+                item.classList.add('hidden');
+                document.getElementById(`${item.id}-icon`).classList.remove('rotate-90');
+                document.getElementById(`${item.id}-icon`).classList.add('fa-chevron-right');
             }
         });
 
-        // 调用后端接口加载文件夹内容
-        loadFolderContent(folderId);
+        // 切换当前分组
+        group.classList.toggle('hidden');
+        if (!group.classList.contains('hidden')) {
+            icon.classList.remove('fa-chevron-right');
+            icon.classList.add('fa-chevron-down', 'rotate-90');
+        } else {
+            icon.classList.remove('fa-chevron-down', 'rotate-90');
+            icon.classList.add('fa-chevron-right');
+        }
     }
 
-    // 搜索文件
-    function searchFiles() {
-        const searchTerm = document.getElementById('fileSearch').value.toLowerCase();
+    // 显示文件夹下的文件
+    function showFilesInFolder(folderId) {
         const fileItems = document.querySelectorAll('.file-item');
 
         fileItems.forEach(item => {
-            const fileName = item.getAttribute('data-name').toLowerCase();
-            if (fileName.includes(searchTerm)) {
-                item.style.display = 'block';
+            if (item.dataset.folder === folderId || folderId === 'all') {
+                item.classList.remove('hidden');
             } else {
-                item.style.display = 'none';
+                item.classList.add('hidden');
             }
         });
+
+        showMessage(`已切换到文件夹: ${folderId}`);
     }
 
-    // 搜索文件夹
-    function searchFolders() {
-        const searchTerm = document.getElementById('folderSearch').value.toLowerCase();
-        const folderGroups = document.querySelectorAll('.folder-group');
+    // 文件夹搜索
+    document.getElementById('folderSearch').addEventListener('input', function (e) {
+        const searchTerm = e.target.value.toLowerCase();
+        const folderItems = document.querySelectorAll('.folder-item');
 
-        folderGroups.forEach(group => {
-            const groupName = group.querySelector('.folder-group-header span').textContent.toLowerCase();
-            const folderItems = group.querySelectorAll('.folder-item');
-            let hasMatch = groupName.includes(searchTerm);
-
-            folderItems.forEach(item => {
-                const folderName = item.querySelector('span').textContent.toLowerCase();
-                if (folderName.includes(searchTerm)) {
-                    item.style.display = 'block';
-                    hasMatch = true;
-                } else {
-                    item.style.display = 'none';
-                }
-            });
-
-            group.style.display = hasMatch ? 'block' : 'none';
+        folderItems.forEach(item => {
+            const folderName = item.textContent.toLowerCase();
+            if (folderName.includes(searchTerm)) {
+                item.classList.remove('hidden');
+            } else {
+                item.classList.add('hidden');
+            }
         });
-    }
+    });
 
-    // 处理选择的文件
-    function handleFiles(files) {
-        const uploadList = document.getElementById('uploadList');
-        uploadList.innerHTML = '';
+    // 文件搜索
+    document.getElementById('fileSearch').addEventListener('input', function (e) {
+        const searchTerm = e.target.value.toLowerCase();
+        const fileItems = document.querySelectorAll('.file-item');
 
-        Array.from(files).forEach(file => {
-            const fileSize = (file.size / (1024 * 1024)).toFixed(2);
-            const fileExtension = file.name.split('.').pop().toLowerCase();
-
-            const fileItem = document.createElement('div');
-            fileItem.className = 'flex items-center justify-between p-2 border rounded-md';
-            fileItem.setAttribute('data-file-name', file.name);
-
-            // 根据文件类型选择图标
-            let fileIcon = 'fa-file-o';
-            if (['doc', 'docx'].includes(fileExtension)) fileIcon = 'fa-file-word-o text-red-500';
-            else if (['xls', 'xlsx'].includes(fileExtension)) fileIcon = 'fa-file-excel-o text-green-500';
-            else if (['pdf'].includes(fileExtension)) fileIcon = 'fa-file-pdf-o text-purple-500';
-            else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) fileIcon = 'fa-file-image-o text-blue-500';
-            else if (['zip', 'rar', '7z'].includes(fileExtension)) fileIcon = 'fa-file-zip-o text-yellow-500';
-            else if (['js', 'html', 'css', 'java', 'py', 'php'].includes(fileExtension)) fileIcon = 'fa-file-code-o text-yellow-500';
-
-            fileItem.innerHTML = `
-                    <div class="flex items-center">
-                        <i class="fa ${fileIcon} mr-2"></i>
-                        <div>
-                            <p class="text-sm font-medium text-gray-800 truncate max-w-[200px]">${file.name}</p>
-                            <p class="text-xs text-gray-500">${fileSize}MB</p>
-                        </div>
-                    </div>
-                    <div class="flex items-center">
-                        <div class="w-24 h-2 bg-gray-200 rounded-full mr-2 overflow-hidden">
-                            <div class="upload-progress h-full bg-accent" style="width: 0%"></div>
-                        </div>
-                        <span class="upload-percentage text-xs text-gray-500">0%</span>
-                    </div>
-                `;
-
-            uploadList.appendChild(fileItem);
+        fileItems.forEach(item => {
+            const fileName = item.querySelector('.font-medium').textContent.toLowerCase();
+            if (fileName.includes(searchTerm)) {
+                item.classList.remove('hidden');
+            } else {
+                item.classList.add('hidden');
+            }
         });
-    }
+    });
 
-    // 开始上传
-    function startUpload() {
-        const folderId = document.getElementById('targetFolder').value;
-        const fileItems = document.querySelectorAll('#uploadList > div');
-
-        if (fileItems.length === 0) {
-            showAlert('请选择要上传的文件', '提示', true);
-            return;
-        }
-
-        // 模拟上传进度
-        fileItems.forEach((item, index) => {
-            const progressBar = item.querySelector('.upload-progress');
-            const percentageText = item.querySelector('.upload-percentage');
-            const fileName = item.getAttribute('data-file-name');
-
-            let progress = 0;
-            const interval = setInterval(() => {
-                progress += Math.random() * 10;
-                if (progress >= 100) {
-                    progress = 100;
-                    clearInterval(interval);
-
-                    // 上传完成后调用后端接口保存文件信息
-                    saveFileInfo(fileName, folderId);
-                }
-
-                progressBar.style.width = `${progress}%`;
-                percentageText.textContent = `${Math.round(progress)}%`;
-            }, 300);
-        });
-    }
-
-    // 打开创建文件夹弹窗
+    // 创建文件夹弹窗
     function openCreateFolderModal() {
         document.getElementById('createFolderModal').classList.remove('hidden');
     }
 
-    // 关闭创建文件夹弹窗
     function closeCreateFolderModal() {
         document.getElementById('createFolderModal').classList.add('hidden');
         document.getElementById('folderName').value = '';
     }
 
+    // 上传文件弹窗
+    function openUploadModal() {
+        document.getElementById('uploadModal').classList.remove('hidden');
+        document.getElementById('fileInput').value = '';
+        document.getElementById('uploadFilesList').classList.add('hidden');
+        document.getElementById('uploadFiles').innerHTML = '';
+        document.getElementById('uploadProgress').classList.add('hidden');
+        document.getElementById('progressBar').style.width = '0%';
+    }
+
+    function closeUploadModal() {
+        document.getElementById('uploadModal').classList.add('hidden');
+    }
+
+    // 拖拽上传
+    const dropArea = document.getElementById('dropArea');
+    const fileInput = document.getElementById('fileInput');
+
+    dropArea.addEventListener('click', () => fileInput.click());
+
+    fileInput.addEventListener('change', handleFiles);
+
+    dropArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropArea.classList.add('border-primary');
+    });
+
+    dropArea.addEventListener('dragleave', () => {
+        dropArea.classList.remove('border-primary');
+    });
+
+    dropArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropArea.classList.remove('border-primary');
+        handleFiles(e);
+    });
+
+    function handleFiles(e) {
+        const files = e.target.files || e.dataTransfer.files;
+        if (files.length > 0) {
+            const uploadFilesList = document.getElementById('uploadFiles');
+            uploadFilesList.innerHTML = '';
+
+            Array.from(files).forEach(file => {
+                const fileItem = document.createElement('div');
+                fileItem.className = 'flex items-center justify-between p-2 bg-gray-50 rounded';
+                fileItem.innerHTML = `
+                        <div class="flex items-center">
+                            <i class="fa fa-file-o mr-2 text-gray-500"></i>
+                            <span class="text-sm truncate max-w-[200px]">${file.name}</span>
+                        </div>
+                        <span class="text-xs text-gray-500">${formatFileSize(file.size)}</span>
+                    `;
+                uploadFilesList.appendChild(fileItem);
+            });
+
+            document.getElementById('uploadFilesList').classList.remove('hidden');
+        }
+    }
+
+    // 格式化文件大小
+    function formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+
+    // 消息提示
+    function showMessage(message) {
+        const alert = document.getElementById('messageAlert');
+        alert.textContent = message;
+        alert.classList.remove('opacity-0', 'pointer-events-none');
+        alert.classList.add('opacity-100', 'pointer-events-auto');
+
+        setTimeout(() => {
+            alert.classList.remove('opacity-100', 'pointer-events-auto');
+            alert.classList.add('opacity-0', 'pointer-events-none');
+        }, 3000);
+    }
+
+    // 与Spring Boot后端交互的方法
+
     // 创建文件夹
     function createFolder() {
         const folderName = document.getElementById('folderName').value.trim();
         const folderGroup = document.getElementById('folderGroup').value;
 
         if (!folderName) {
-            showAlert('请输入文件夹名称', '提示', true);
+            showMessage('请输入文件夹名称');
             return;
         }
 
-        // 调用后端接口创建文件夹
-        createFolderApi(folderName, folderGroup)
-            .then(response => {
-                if (response.success) {
-                    showAlert('文件夹创建成功', '成功');
+        // 模拟后端请求
+        setTimeout(() => {
+            // 实际项目中替换为真实的API调用
+            /*
+            fetch('/api/folders', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: folderName,
+                    groupId: folderGroup
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    showMessage('文件夹创建成功');
                     closeCreateFolderModal();
                     // 刷新文件夹列表
-                    refreshFolderList();
                 } else {
-                    showAlert('文件夹创建失败: ' + response.message, '错误', true);
+                    showMessage('创建失败: ' + data.message);
                 }
             })
             .catch(error => {
-                showAlert('请求失败: ' + error.message, '错误', true);
+                showMessage('创建失败: 网络错误');
             });
+            */
+
+            showMessage(`文件夹 "${folderName}" 创建成功`);
+            closeCreateFolderModal();
+        }, 800);
     }
 
-    // 打开上传文件弹窗
-    function openUploadModal() {
-        document.getElementById('uploadModal').classList.remove('hidden');
-        document.getElementById('uploadList').innerHTML = '';
-        document.getElementById('fileInput').value = '';
-    }
+    // 开始上传
+    function startUpload() {
+        const files = fileInput.files;
+        if (files.length === 0) {
+            showMessage('请选择要上传的文件');
+            return;
+        }
 
-    // 关闭上传文件弹窗
-    function closeUploadModal() {
-        document.getElementById('uploadModal').classList.add('hidden');
+        const folderId = document.getElementById('uploadFolder').value;
+
+        // 模拟上传进度
+        document.getElementById('uploadProgress').classList.remove('hidden');
+        let progress = 0;
+        const progressBar = document.getElementById('progressBar');
+
+        const interval = setInterval(() => {
+            progress += 5;
+            progressBar.style.width = `${progress}%`;
+
+            if (progress >= 100) {
+                clearInterval(interval);
+                setTimeout(() => {
+                    showMessage('文件上传成功');
+                    closeUploadModal();
+                }, 500);
+            }
+        }, 200);
+
+        // 实际项目中替换为真实的文件上传
+        /*
+        const formData = new FormData();
+        Array.from(files).forEach(file => {
+            formData.append('files', file);
+        });
+        formData.append('folderId', folderId);
+
+        fetch('/api/files/upload', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                showMessage('文件上传成功');
+                closeUploadModal();
+                // 刷新文件列表
+            } else {
+                showMessage('上传失败: ' + data.message);
+            }
+        })
+        .catch(error => {
+            showMessage('上传失败: 网络错误');
+        });
+        */
     }
 
     // 下载文件
     function downloadFile(fileId) {
-        downloadFileApi(fileId)
-            .catch(error => {
-                showAlert('下载失败: ' + error.message, '错误', true);
-            });
-    }
+        // 实际项目中替换为真实的下载链接
+        /*
+        window.location.href = `/api/files/download/${fileId}`;
+        */
 
-    // 与Spring Boot后端交互的API方法
-
-    /**
-     * 加载文件夹内容
-     * @param {string} folderId - 文件夹ID
-     */
-    function loadFolderContent(folderId) {
-        // 实际项目中替换为后端API地址
-        fetch(`/api/folders/${folderId}/files`, {
-            method: 'GET',
-            headers: {
-                'Content-Type': 'application/json',
-                // 可添加认证信息
-                // 'Authorization': 'Bearer ' + token
-            }
-        })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('加载文件夹内容失败');
-                }
-                return response.json();
-            })
-            .then(data => {
-                // 这里应该根据返回的文件数据更新文件列表
-                console.log('加载文件夹内容成功', data);
-                // 更新文件列表的代码...
-            })
-            .catch(error => {
-                showAlert('加载文件夹内容失败: ' + error.message, '错误', true);
-            });
-    }
-
-    /**
-     * 创建文件夹
-     * @param {string} folderName - 文件夹名称
-     * @param {string} groupId - 所属分组ID
-     * @returns {Promise}
-     */
-    function createFolderApi(folderName, groupId) {
-        return fetch('/api/folders', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                // 可添加认证信息
-                // 'Authorization': 'Bearer ' + token
-            },
-            body: JSON.stringify({
-                name: folderName,
-                groupId: groupId
-            })
-        })
-            .then(response => {
-                if (!response.ok) {
-                    return response.json().then(err => { throw err; });
-                }
-                return response.json();
-            });
-    }
-
-    /**
-     * 刷新文件夹列表
-     */
-    function refreshFolderList() {
-        fetch('/api/folders/groups', {
-            method: 'GET',
-            headers: {
-                'Content-Type': 'application/json',
-                // 可添加认证信息
-                // 'Authorization': 'Bearer ' + token
-            }
-        })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('刷新文件夹列表失败');
-                }
-                return response.json();
-            })
-            .then(data => {
-                console.log('刷新文件夹列表成功', data);
-                // 这里应该根据返回的数据重新渲染文件夹列表
-            })
-            .catch(error => {
-                showAlert('刷新文件夹列表失败: ' + error.message, '错误', true);
-            });
-    }
-
-    /**
-     * 保存文件信息
-     * @param {string} fileName - 文件名
-     * @param {string} folderId - 目标文件夹ID
-     */
-    function saveFileInfo(fileName, folderId) {
-        fetch('/api/files', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                // 可添加认证信息
-                // 'Authorization': 'Bearer ' + token
-            },
-            body: JSON.stringify({
-                name: fileName,
-                folderId: folderId,
-                // 可以添加更多文件信息，如大小、类型等
-            })
-        })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('保存文件信息失败');
-                }
-                return response.json();
-            })
-            .then(data => {
-                console.log('文件上传成功', data);
-                showAlert('文件上传成功', '成功');
-                // 可以刷新文件列表
-                if (selectedFolderId === folderId) {
-                    loadFolderContent(folderId);
-                }
-            })
-            .catch(error => {
-                showAlert('保存文件信息失败: ' + error.message, '错误', true);
-            });
-    }
-
-    /**
-     * 下载文件
-     * @param {string} fileId - 文件ID
-     */
-    function downloadFileApi(fileId) {
-        // 创建一个隐藏的a标签来触发下载
-        const link = document.createElement('a');
-        link.href = `/api/files/${fileId}/download`;
-        link.style.display = 'none';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-
-        // 返回一个Promise以便处理错误
-        return new Promise((resolve, reject) => {
-            // 这里可以添加下载超时检查等逻辑
-            setTimeout(() => {
-                resolve();
-            }, 1000);
-        });
+        showMessage('文件下载中...');
     }
 </script>
 </body>