feat(ui): 优化

Author: 012012012-keke

README.md

@@ -9,52 +9,19 @@
 
 **现代化 S3 对象存储管理系统**
 
-一个美观、强大、易用的 Web 文件管理器，支持所有 S3 兼容存储
+一个基于 Spring Boot 和 Vue.js 构建的 Web 文件管理器，支持所有 S3 兼容的对象存储服务
 
-[✨ 特性](#-核心特性) • [🚀 快速开始](#-快速开始) • [📖 使用文档](#-功能详解) • [🔧 配置说明](#-配置说明)
+[🚀 快速开始](#-快速开始) • [🔧 配置说明](#-配置说明) • [🛠️ 技术栈](#️-技术栈)
 
 </div>
 
 ---
 
-## ✨ 核心特性
-
-### 🎨 现代化界面
-- **响应式设计** - 完美适配桌面端和移动端
-- **双视图模式** - 列表视图和网格视图自由切换
-- **深色模式支持** - 优雅的视觉体验
-- **流畅动画** - 精心设计的交互动效
-
-### 📁 文件管理
-- **基础操作** - 上传、下载、删除、重命名、新建文件夹
-- **批量操作** - 支持多选文件进行批量下载、移动、复制、删除
-- **右键菜单** - 快捷的上下文菜单操作
-- **拖拽上传** - 支持拖拽文件到浏览器上传
-- **文件预览** - 支持图片、视频、音频、文档、代码文件预览
-- **Markdown 渲染** - 实时渲染 Markdown 文件
-- **代码高亮** - 支持多种编程语言语法高亮
-
-### 🔍 搜索与筛选
-- **关键词搜索** - 快速查找文件
-- **高级筛选** - 按文件类型、时间范围筛选
-- **快捷日期选择** - 今天、最近7天、最近30天、最近一年
-
-### 🚀 高级功能
-- **跨 Bucket 复制** - 在不同存储桶之间复制文件
-- **文件夹移动** - 支持文件和文件夹移动到其他目录
-- **分享链接生成** - 生成带过期时间的文件分享链接
-- **文件夹大小计算** - 递归计算文件夹总大小
-- **懒加载文件夹树** - 按需加载子文件夹，优化性能
-- **分页加载** - 每页加载 50 项，提升大量文件时的性能
-- **Service Worker 缓存** - 离线访问和快速加载
-- **缩略图优化** - 图片懒加载和缓存机制
-
-### 🎯 用户体验
-- **面包屑导航** - 清晰的路径导航
-- **智能右键菜单** - 自动适配屏幕边界
-- **实时进度显示** - 上传、批量操作进度实时反馈
-- **Toast 通知** - 优雅的操作反馈提示
-- **可调节侧边栏** - 自由调整侧边栏宽度
+## 📖 项目简介
+
+S3 File Nexus 是一个轻量级的 Web 文件管理系统，提供了类似操作系统文件管理器的用户体验。通过标准的 S3 协议与对象存储服务通信，无需额外的存储代理或中间层，可以直接管理您的云端文件。
+
+
 
 ## 🚀 快速开始
 
@@ -92,90 +59,17 @@ mvn spring-boot:run -Dspring-boot.run.profiles=storage
 3. 点击"测试连接"验证配置
 4. 保存配置并返回首页
 
-## 📖 功能详解
-
-### 文件操作
-
-#### 单文件操作
-- **右键菜单**：右键点击文件，选择操作
-  - 预览 - 支持图片、视频、音频、文档、代码
-  - 下载 - 直接下载文件
-  - 重命名 - 修改文件名
-  - 移动到... - 移动到其他文件夹
-  - 复制到... - 复制到其他 Bucket
-  - 生成分享链接 - 创建临时访问链接
-  - 删除 - 删除文件
-
-#### 批量操作
-1. 点击顶部工具栏的批量操作按钮（复选框图标）
-2. 选择多个文件（支持 Ctrl/Shift 多选）
-3. 使用底部浮动工具栏进行操作：
-   - 批量下载
-   - 批量移动
-   - 批量复制到其他 Bucket
-   - 批量删除
-
-### 文件预览
-
-支持以下文件类型的在线预览：
-
-- **图片**：PNG, JPG, JPEG, GIF, BMP, WebP, SVG
-  - 缩放、旋转、压缩显示
-- **视频**：MP4, WebM, OGG, AVI, MOV, WMV, FLV, MKV
-- **音频**：MP3, WAV, FLAC, AAC, M4A, WMA, OGG
-- **文档**：PDF, TXT, Markdown
-- **代码**：JavaScript, TypeScript, Python, Java, Go, Rust, C/C++, HTML, CSS, JSON, YAML 等
-  - 语法高亮显示
-- **Office 文档**：DOC, DOCX, XLS, XLSX, PPT, PPTX
-  - 通过 Google Docs Viewer 或 Microsoft Office Online 预览
-
-### 搜索与筛选
-
-#### 快速搜索
-在顶部搜索框输入关键词，按回车搜索
-
-#### 高级筛选
-1. 点击"筛选"按钮展开筛选面板
-2. 设置筛选条件：
-   - **文件类型**：文件夹、图片、视频、音频、文档、压缩包、代码、其他
-   - **时间范围**：自定义开始和结束日期
-   - **快速选择**：今天、最近7天、最近30天、最近一年
-
-### 分享链接
-
-1. 右键点击文件，选择"生成分享链接"
-2. 设置过期时间（1小时、6小时、1天、3天、7天）
-3. 点击"生成链接"
-4. 复制链接分享给他人
-
-## 🔧 配置说明
-
-### 存储后端配置
-
-配置文件位置：`src/main/resources/application-storage.yml`
-
-```yaml
-storage:
-  default-backend: minio  # 默认使用的存储后端
-  backends:
-    minio:
-      enabled: true
-      type: s3
-      endpoint: http://localhost:9000
-      access-key: your-access-key
-      secret-key: your-secret-key
-      region: us-east-1
-      bucket-name: your-bucket
-```
 
 ### 支持的存储服务
 
 本系统基于标准 S3 协议开发，理论上支持所有兼容 S3 协议的对象存储服务。
 
 **已测试：**
+
 - ✅ **自有 S3 协议的 OSS** - 已验证可用
 
 **理论支持（S3 兼容）：**
+
 - 📦 **AWS S3** - Amazon Simple Storage Service
 - 📦 **MinIO** - 开源对象存储服务
 - 📦 **阿里云 OSS** - Alibaba Cloud Object Storage Service（S3 兼容模式）
@@ -184,56 +78,8 @@ storage:
 - 📦 **七牛云 Kodo** - Qiniu Cloud Object Storage（S3 兼容模式）
 
 > 💡 **提示**：只要您的对象存储服务支持标准 S3 API，就可以使用本系统进行管理。如遇到兼容性问题，欢迎提 Issue 反馈。
+>
 
-### 多后端配置
-
-支持同时配置多个存储后端，在配置页面动态切换：
-
-```yaml
-storage:
-  default-backend: minio
-  backends:
-    minio:
-      enabled: true
-      type: s3
-      # ... MinIO 配置
-    aws:
-      enabled: true
-      type: s3
-      # ... AWS S3 配置
-    aliyun:
-      enabled: true
-      type: s3
-      # ... 阿里云 OSS 配置
-```
-
-## 🛠️ 技术栈
-
-### 后端
-- **Spring Boot 3.4.8** - Java 应用框架
-- **AWS SDK for Java 2.x** - S3 客户端
-- **Spring Cache** - 缓存支持
-- **Caffeine** - 高性能缓存库
-
-### 前端
-- **Vue.js 3.4** - 渐进式 JavaScript 框架
-- **Tailwind CSS 3.4** - 原子化 CSS 框架
-- **Axios** - HTTP 客户端
-- **Marked.js** - Markdown 解析器
-- **Highlight.js** - 代码语法高亮
-- **Bootstrap Icons** - 图标库
-
-## 📝 开发计划
-
-- [ ] 支持文件拖拽上传
-- [ ] 支持断点续传
-- [ ] 支持文件夹打包下载
-- [ ] 支持图片编辑功能
-- [ ] 支持在线编辑文本文件
-- [ ] 支持文件版本管理
-- [ ] 支持用户权限管理
-- [ ] 支持文件标签和分类
-- [ ] Docker 一键部署
 
 ## 📄 开源协议
 

src/main/java/com/all/in/one/agent/storage/controller/OptimizedStorageController.java

@@ -15,7 +15,6 @@
 import java.util.ArrayList;
 import java.util.Comparator;
 import java.util.List;
-import java.util.concurrent.CompletableFuture;
 import java.util.stream.Collectors;
 
 /**
@@ -152,24 +151,12 @@ private FileListResponse loadFromS3(String bucket, String prefix, String continu
             log.info("S3响应 - bucket: {}, prefix: '{}', CommonPrefixes: {}, Contents: {}",
                     bucket, prefix, response.commonPrefixes().size(), response.contents().size());
 
-            // 添加文件夹（CommonPrefixes）
+            // 添加文件夹（CommonPrefixes）- 不计算统计信息以提升性能
             for (CommonPrefix commonPrefix : response.commonPrefixes()) {
-                // 异步计算文件夹统计信息（不阻塞主流程）
-                FolderStats stats = FolderStats.builder()
-                        .calculating(true)
-                        .build();
-
-                // 启动异步任务计算统计信息
                 String folderPrefix = commonPrefix.prefix();
-                CompletableFuture.runAsync(() -> {
-                    try {
-                        calculateFolderStats(backendKey, bucket, folderPrefix);
-                    } catch (Exception e) {
-                        log.warn("计算文件夹统计信息失败: {}", folderPrefix, e);
-                    }
-                });
-
-                items.add(FileItem.folder(folderPrefix, stats));
+
+                // 不计算统计信息，直接添加文件夹（性能优化）
+                items.add(FileItem.folder(folderPrefix, null));
             }
 
             // 添加文件
@@ -252,16 +239,15 @@ public FolderStats calculateFolderStats(String backendKey, String bucket, String
     }
 
     /**
-     * 智能排序：文件夹优先，然后按时间倒序（最新的在前）
+     * 智能排序：文件夹优先，然后按名称排序
      */
     private List<FileItem> sortItems(List<FileItem> items) {
         return items.stream()
                 .sorted(Comparator
-                        // 1. 文件夹优先
+                        // 1. 文件夹优先（true > false，所以文件夹排在前面）
                         .comparing(FileItem::isFolder, Comparator.reverseOrder())
-                        // 2. 按最后修改时间倒序（最新的在前，null值放最后）
-                        .thenComparing(FileItem::getLastModified,
-                                Comparator.nullsLast(Comparator.reverseOrder())))
+                        // 2. 按名称排序（忽略大小写）
+                        .thenComparing(item -> item.getName().toLowerCase()))
                 .collect(Collectors.toList());
     }
 

src/main/java/com/all/in/one/agent/storage/service/impl/StorageServiceImpl.java

@@ -463,19 +463,89 @@ public void deleteFile(String backendName, String bucketName, String objectKey)
             S3Client s3Client = s3ClientUtil.createS3Client(backend);
             String actualBucketName = bucketName != null ? bucketName : backend.getDefaultBucket();
 
-            DeleteObjectRequest deleteObjectRequest = DeleteObjectRequest.builder()
-                    .bucket(actualBucketName)
-                    .key(objectKey)
-                    .build();
+            // 如果是文件夹（以/结尾），需要递归删除所有子文件
+            if (objectKey.endsWith("/")) {
+                deleteFolderRecursively(s3Client, actualBucketName, objectKey);
+            } else {
+                // 普通文件直接删除
+                DeleteObjectRequest deleteObjectRequest = DeleteObjectRequest.builder()
+                        .bucket(actualBucketName)
+                        .key(objectKey)
+                        .build();
 
-            s3Client.deleteObject(deleteObjectRequest);
+                s3Client.deleteObject(deleteObjectRequest);
+            }
 
         } catch (Exception e) {
             log.error("文件删除失败 - backend: {}, bucket: {}, key: {}", backendName, bucketName, objectKey, e);
             throw new RuntimeException("文件删除失败: " + e.getMessage());
         }
     }
 
+    /**
+     * 递归删除文件夹及其所有内容
+     */
+    private void deleteFolderRecursively(S3Client s3Client, String bucketName, String prefix) {
+        try {
+            log.info("开始递归删除文件夹: bucket={}, prefix={}", bucketName, prefix);
+
+            // 列出所有子对象（不使用delimiter，获取所有递归内容）
+            software.amazon.awssdk.services.s3.model.ListObjectsV2Request listRequest =
+                software.amazon.awssdk.services.s3.model.ListObjectsV2Request.builder()
+                    .bucket(bucketName)
+                    .prefix(prefix)
+                    .build();
+
+            software.amazon.awssdk.services.s3.model.ListObjectsV2Response listResponse;
+            int totalDeleted = 0;
+
+            do {
+                listResponse = s3Client.listObjectsV2(listRequest);
+                log.info("列出对象: 找到 {} 个对象", listResponse.contents().size());
+
+                if (!listResponse.contents().isEmpty()) {
+                    // 逐个删除，避免批量删除的URI问题
+                    for (software.amazon.awssdk.services.s3.model.S3Object s3Object : listResponse.contents()) {
+                        try {
+                            DeleteObjectRequest deleteRequest = DeleteObjectRequest.builder()
+                                    .bucket(bucketName)
+                                    .key(s3Object.key())
+                                    .build();
+
+                            s3Client.deleteObject(deleteRequest);
+                            totalDeleted++;
+
+                            if (totalDeleted % 10 == 0) {
+                                log.info("已删除 {} 个对象", totalDeleted);
+                            }
+                        } catch (Exception e) {
+                            log.error("删除对象失败: {}", s3Object.key(), e);
+                            // 继续删除其他文件
+                        }
+                    }
+                }
+
+                // 如果还有更多对象，继续删除
+                if (listResponse.isTruncated()) {
+                    listRequest = listRequest.toBuilder()
+                        .continuationToken(listResponse.nextContinuationToken())
+                        .build();
+                }
+            } while (listResponse.isTruncated());
+
+            log.info("文件夹删除完成，共删除 {} 个对象: {}", totalDeleted, prefix);
+
+            // 如果一个对象都没删除，说明文件夹可能是空的或不存在
+            if (totalDeleted == 0) {
+                log.warn("文件夹为空或不存在: {}", prefix);
+            }
+
+        } catch (Exception e) {
+            log.error("递归删除文件夹失败 - bucket: {}, prefix: {}", bucketName, prefix, e);
+            throw new RuntimeException("递归删除文件夹失败: " + e.getMessage());
+        }
+    }
+
     @Override
     public void previewFile(String backendName, String bucketName, String objectKey, HttpServletResponse response) {
         StorageConfigProperties.Backend backend = getBackend(backendName);