云文件管理系统上传组件优化

src/main/java/com/filesystem/config/SecurityConfig.java

@@ -50,6 +50,13 @@ public class SecurityConfig {
                 .requestMatchers("/files/avatar/**").permitAll()
                 .requestMatchers("/api/files/avatar/**").permitAll()
                 .requestMatchers("/api/messages/file/**").permitAll()
+                .requestMatchers("/webapp/**").permitAll()
+                .requestMatchers("/assets/**").permitAll()
+                .requestMatchers("/login", "/register").permitAll()
+                .requestMatchers("/").permitAll()
+                .requestMatchers("/desktop").permitAll()
+                .requestMatchers("/desktop/**").permitAll()
+                .requestMatchers("/favicon.ico").permitAll()
                 .anyRequest().authenticated()
             )
             .exceptionHandling(exception -> exception

src/main/java/com/filesystem/config/WebConfig.java

@@ -2,11 +2,13 @@ package com.filesystem.config;
 
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.http.CacheControl;
 import org.springframework.web.servlet.config.annotation.CorsRegistry;
 import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
 import java.nio.file.Paths;
+import java.util.concurrent.TimeUnit;
 
 @Configuration
 public class WebConfig implements WebMvcConfigurer {
@@ -24,7 +26,20 @@ public class WebConfig implements WebMvcConfigurer {
 
     @Override
     public void addResourceHandlers(ResourceHandlerRegistry registry) {
+        // 上传文件目录
         registry.addResourceHandler("/uploads/**")
                 .addResourceLocations("file:" + Paths.get(uploadDir).toAbsolutePath() + "/");
+        
+        // 前端静态资源（webapp 目录）
+        registry.addResourceHandler("/webapp/**")
+                .addResourceLocations("classpath:/webapp/")
+                .setCacheControl(CacheControl.noCache().mustRevalidate());
+        
+        registry.addResourceHandler("/assets/**")
+                .addResourceLocations("classpath:/webapp/assets/")
+                .setCacheControl(CacheControl.noCache().mustRevalidate());
+        
+        registry.addResourceHandler("/favicon.ico")
+                .addResourceLocations("classpath:/webapp/");
     }
 }

src/main/java/com/filesystem/controller/IndexController.java

@@ -0,0 +1,19 @@
+package com.filesystem.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class IndexController {
+
+    @GetMapping({"/", "/login", "/register"})
+    public String forward() {
+        return "forward:/webapp/index.html";
+    }
+
+    // 捕获所有前端路由，返回 index.html 让 Vue Router 处理
+    @GetMapping("/desktop/**")
+    public String desktop() {
+        return "forward:/webapp/index.html";
+    }
+}

src/main/java/com/filesystem/security/JwtAuthenticationFilter.java

@@ -32,7 +32,15 @@ public class JwtAuthenticationFilter extends OncePerRequestFilter {
         new AntPathRequestMatcher("/api/files/test"),
         new AntPathRequestMatcher("/ws/**"),
         new AntPathRequestMatcher("/api/files/avatar/**"),
-        new AntPathRequestMatcher("/api/messages/file/**")
+        new AntPathRequestMatcher("/api/messages/file/**"),
+        new AntPathRequestMatcher("/webapp/**"),
+        new AntPathRequestMatcher("/assets/**"),
+        new AntPathRequestMatcher("/favicon.ico"),
+        new AntPathRequestMatcher("/login"),
+        new AntPathRequestMatcher("/register"),
+        new AntPathRequestMatcher("/"),
+        new AntPathRequestMatcher("/desktop"),
+        new AntPathRequestMatcher("/desktop/**")
     );
     
     @Override

web-vue/src/views/files/index.vue

@@ -821,22 +821,22 @@ const getFileIconColor = (file) => {
 
 .grid-view {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 24px;
-  padding: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  padding: 16px;
   align-content: start;
 }
 
 .file-card {
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  padding: 16px;
   border: 1px solid #e4e7ed;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s;
   background: #fff;
-  min-height: 180px;
+  min-height: 140px;
 }
 
 .file-card:hover {
@@ -876,17 +876,23 @@ const getFileIconColor = (file) => {
 
 .file-card-actions {
   display: flex;
-  flex-wrap: nowrap;
-  gap: 6px;
+  gap: 4px;
   justify-content: center;
+  overflow: hidden;
 }
 
 .file-card-actions .el-button {
   font-size: 12px;
+  padding: 4px 8px;
+  min-width: 0;
+}
+
+.file-card-actions .el-button + .el-button {
+  margin-left: 0;
 }
 
 .file-card-actions .el-button span {
-  margin-left: 2px;
+  display: inline;
 }
 
 .pagination-wrapper {

web-vue/vite.config.js

@@ -1,6 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
 
 export default defineConfig({
   plugins: [vue()],
@@ -9,6 +13,11 @@ export default defineConfig({
       '@': path.resolve(__dirname, 'src')
     }
   },
+  base: '/',  // 绝对路径，打包后 HTML 引用 /assets/...
+  build: {
+    outDir: resolve(__dirname, '../src/main/resources/webapp'),
+    emptyOutDir: true
+  },
   server: {
     port: 5173,
     proxy: {