feat: 实现笔记编辑器的自动保存功能与UI优化

refactor: 重构用户登录注册逻辑与数据验证

fix: 修复图片上传安全漏洞与路径处理问题

perf: 优化笔记列表分页加载与滚动性能

style: 改进侧边栏菜单的视觉设计与交互体验

chore: 更新环境变量与数据库连接配置

docs: 添加用户信息视图对象的Swagger文档

test: 增加用户注册登录的输入验证测试

ci: 配置JWT密钥环境变量与安全设置

build: 调整前端构建配置与模块加载方式

biji-houdaun/src/main/java/com/test/bijihoudaun/common/advice/GlobalExceptionHandler.java

@@ -17,81 +17,63 @@ import org.springframework.web.multipart.MaxUploadSizeExceededException;
 import java.util.List;
 import java.util.stream.Collectors;
 
-/**
- * 全局异常处理器
- */
 @RestControllerAdvice
 public class GlobalExceptionHandler {
-    // 打印日志
     private static final Logger log = LoggerFactory.getLogger(GlobalExceptionHandler.class);
 
-    /**
-     * 处理业务异常
-     */
     @ExceptionHandler(BaseException.class)
     public R<Void> handleBaseException(BaseException e, HttpServletRequest request) {
+        log.warn("Business exception at {}: {}", request.getRequestURI(), e.getMessage());
         return R.fail(e.getResultCode().getCode(), e.getMessage());
     }
 
-    /**
-     * 处理注册异常
-     */
     @ExceptionHandler(RegistrationException.class)
-    public R<String> handleRegistrationException(RegistrationException e) {
+    public R<String> handleRegistrationException(RegistrationException e, HttpServletRequest request) {
-        log.warn("Registration attempt failed: {}", e.getMessage());
+        log.warn("Registration failed at {}: {}", request.getRequestURI(), e.getMessage());
         return R.fail(e.getMessage());
     }
 
-    /**
-     * 处理文件大小超出限制异常
-     */
     @ExceptionHandler(MaxUploadSizeExceededException.class)
-    public R<String> handleFileSizeLimitExceeded() {
+    public R<String> handleFileSizeLimitExceeded(HttpServletRequest request) {
-        log.error("文件大小超出限制");
+        log.warn("File size exceeded at {}", request.getRequestURI());
         return R.fail("文件大小超过限制");
     }
 
-    /**
-     * 处理参数校验异常
-     */
     @ExceptionHandler(MethodArgumentNotValidException.class)
-    public R<List<String>> handleMethodArgumentNotValidException(MethodArgumentNotValidException e) {
+    public R<List<String>> handleMethodArgumentNotValidException(MethodArgumentNotValidException e, HttpServletRequest request) {
         List<String> errors = e.getBindingResult().getFieldErrors()
                 .stream()
                 .map(FieldError::getDefaultMessage)
                 .collect(Collectors.toList());
-        log.error("参数校验异常：{}", errors.get(0));
+        log.warn("Validation failed at {}: {}", request.getRequestURI(), errors.get(0));
         return R.fail(ResultCode.VALIDATE_FAILED.getCode(), errors.get(0));
     }
 
-    /**
-     * 处理绑定异常
-     */
     @ExceptionHandler(BindException.class)
-    public R<List<String>> handleBindException(BindException e) {
+    public R<List<String>> handleBindException(BindException e, HttpServletRequest request) {
         List<String> errors = e.getBindingResult().getFieldErrors()
                 .stream()
                 .map(FieldError::getDefaultMessage)
                 .collect(Collectors.toList());
-        log.error("参数校验异常：{}", errors.get(0));
+        log.warn("Bind exception at {}: {}", request.getRequestURI(), errors.get(0));
         return R.fail(ResultCode.VALIDATE_FAILED.getCode(), errors.get(0));
     }
 
-    /**
-     * 处理请求体格式错误异常 (例如JSON格式错误)
-     */
     @ExceptionHandler(org.springframework.http.converter.HttpMessageNotReadableException.class)
-    public R<String> handleHttpMessageNotReadableException(org.springframework.http.converter.HttpMessageNotReadableException e) {
+    public R<String> handleHttpMessageNotReadableException(HttpServletRequest request) {
-        log.error("请求参数格式不正确: {}", e.getMessage());
+        log.warn("Invalid request body at {}", request.getRequestURI());
         return R.fail(ResultCode.VALIDATE_FAILED.getCode(), "请求参数格式不正确");
     }
 
-    /**
+    @ExceptionHandler(IllegalArgumentException.class)
-     * 处理其他所有未捕获的异常
+    public R<Void> handleIllegalArgumentException(IllegalArgumentException e, HttpServletRequest request) {
-     */
+        log.warn("Illegal argument at {}: {}", request.getRequestURI(), e.getMessage());
+        return R.fail(ResultCode.VALIDATE_FAILED.getCode(), "参数错误");
+    }
+
     @ExceptionHandler(Exception.class)
-    public R<Void> handleException(Exception e) {
+    public R<Void> handleException(Exception e, HttpServletRequest request) {
-        log.error("系统异常：", e); // 打印完整的堆栈信息
+        log.error("Unexpected error at {} - Error type: {}", request.getRequestURI(), e.getClass().getSimpleName());
         return R.fail(ResultCode.FAILED.getCode(), "系统繁忙，请稍后再试");
     }
 }

biji-houdaun/src/main/java/com/test/bijihoudaun/config/SecurityConfig.java

@@ -90,11 +90,7 @@ public class SecurityConfig {
                         .requestMatchers(org.springframework.http.HttpMethod.GET,
                                 "/api/groupings/**",          // 获取分组
                                 "/api/images/preview/**",      // 预览图片
-                                "/api/markdown/files",         // 获取所有文件
+                                "/api/markdown/**",            // 所有Markdown相关的GET请求
-                                "/api/markdown/search",        // 搜索文件
-                                "/api/markdown/grouping/**",   // 按分组获取文件
-                                "/api/markdown/recent",        // 获取最近文件
-                                "/api/markdown/{id}",          // 获取单个文件内容
                                 "/api/system/registration/status" // 检查注册是否开启
                         ).permitAll()
 

biji-houdaun/src/main/java/com/test/bijihoudaun/config/WebConfig.java

@@ -1,7 +1,10 @@
 package com.test.bijihoudaun.config;
 
+import com.test.bijihoudaun.interceptor.RateLimitInterceptor;
+import com.test.bijihoudaun.interceptor.XSSInterceptor;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
 import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@@ -11,24 +14,28 @@ public class WebConfig implements WebMvcConfigurer {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**")
-                .allowedOriginPatterns("*") // 允许所有源
+                .allowedOriginPatterns("*")
                 .allowedMethods("*")
                 .allowedHeaders("*")
-                .allowCredentials(false) // 不允许凭证，否则与通配符冲突
+                .allowCredentials(false)
-                .maxAge(3600); // 预检请求缓存时间
+                .maxAge(3600);
     }
 
-/**
- * 重写父类方法，配置静态资源处理器
- * 该方法用于配置静态资源的访问路径和实际存储位置
- *
- * @param registry 资源处理器注册对象，用于注册静态资源处理器
- */
     @Override
     public void addResourceHandlers(ResourceHandlerRegistry registry) {
-    // 添加资源处理器，配置"/uploads/**"路径下的请求
-    // 将这些请求映射到服务器的"uploads/"目录
         registry.addResourceHandler("/uploads/**")
                 .addResourceLocations("file:uploads/");
     }
+    
+    @Override
+    public void addInterceptors(InterceptorRegistry registry) {
+        registry.addInterceptor(new RateLimitInterceptor())
+                .addPathPatterns("/**")
+                .order(1);
+        
+        registry.addInterceptor(new XSSInterceptor())
+                .addPathPatterns("/**")
+                .excludePathPatterns("/api/markdown/**", "/api/images/**", "/doc.html", "/webjars/**", "/v3/api-docs/**")
+                .order(2);
+    }
 }

biji-houdaun/src/main/java/com/test/bijihoudaun/controller/ImageController.java

@@ -5,6 +5,7 @@ import cn.hutool.core.util.StrUtil;
 import com.test.bijihoudaun.common.response.R;
 import com.test.bijihoudaun.entity.Image;
 import com.test.bijihoudaun.service.ImageService;
+import com.test.bijihoudaun.util.SecurityUtil;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
 import jakarta.servlet.http.HttpServletResponse;
@@ -17,9 +18,11 @@ import org.springframework.web.multipart.MultipartFile;
 import java.io.File;
 import java.io.FileInputStream;
 import java.io.IOException;
+import java.nio.file.Path;
+import java.nio.file.Paths;
 import java.util.List;
 
-@Tag(name = "markdown接口")
+@Tag(name = "图片接口")
 @RestController
 @RequestMapping("/api/images")
 public class ImageController {
@@ -48,6 +51,9 @@ public class ImageController {
     @Operation(summary = "根据id删除图片")
     @PostMapping("/{id}")
     public R<Void> deleteImage(@PathVariable Long id) {
+        if (!SecurityUtil.isUserAuthenticated()) {
+            return R.fail("请先登录");
+        }
         boolean result = imageService.deleteImage(id);
         if (result) {
             return R.success();
@@ -56,38 +62,63 @@ public class ImageController {
         }
     }
 
-    /**
-     * 在线预览（图片、视频、音频、pdf 等浏览器可直接识别的类型）
-     */
-    @GetMapping("/preview/{url}")
     @Operation(summary = "在线预览", description = "浏览器直接打开文件流")
+    @GetMapping("/preview/{url}")
     public void preview(@PathVariable String url, HttpServletResponse resp) throws IOException {
         if (StrUtil.isBlank(url)) {
             resp.setStatus(404);
             resp.getWriter().write("{\"code\":404,\"msg\":\"文件不存在\",\"data\":null}");
             return;
         }
-        File file = new File(rootPath + File.separator + url);
+        
-        if (!file.exists()) {
+        String sanitizedUrl = sanitizeFileName(url);
+        if (sanitizedUrl == null) {
+            resp.setStatus(403);
+            resp.getWriter().write("{\"code\":403,\"msg\":\"非法文件路径\",\"data\":null}");
+            return;
+        }
+        
+        Path basePath = Paths.get(rootPath).normalize().toAbsolutePath();
+        Path filePath = basePath.resolve(sanitizedUrl).normalize();
+        
+        if (!filePath.startsWith(basePath)) {
+            resp.setStatus(403);
+            resp.getWriter().write("{\"code\":403,\"msg\":\"非法文件路径\",\"data\":null}");
+            return;
+        }
+        
+        File file = filePath.toFile();
+        if (!file.exists() || !file.isFile()) {
             resp.setStatus(404);
             resp.getWriter().write("{\"code\":404,\"msg\":\"文件不存在\",\"data\":null}");
             return;
         }
+        
         String contentTypeFromFileExtension = getContentTypeFromFileExtension(url);
-        // 设置正确的 MIME
         resp.setContentType(contentTypeFromFileExtension);
-        // 设置文件长度，支持断点续传
         resp.setContentLengthLong(file.length());
-        // 写出文件流
         try (FileInputStream in = new FileInputStream(file)) {
             StreamUtils.copy(in, resp.getOutputStream());
         }
     }
+    
+    private String sanitizeFileName(String fileName) {
+        if (StrUtil.isBlank(fileName)) {
+            return null;
+        }
+        if (fileName.contains("..") || fileName.contains("/") || fileName.contains("\\") || fileName.contains(":")) {
+            return null;
+        }
+        return fileName;
+    }
 
 
     @Operation(summary = "根据url删除图片")
     @PostMapping("/deleteByUrl")
     public R<Void> deleteImageByUrl(@RequestParam String url) {
+        if (!SecurityUtil.isUserAuthenticated()) {
+            return R.fail("请先登录");
+        }
         boolean result = imageService.deleteImageByUrl(url);
         if (result) {
             return R.success();
@@ -99,6 +130,9 @@ public class ImageController {
     @Operation(summary = "根据url批量删除图片")
     @PostMapping("/batch")
     public R<Void> deleteImageByUrls(@RequestBody List<String> urls) {
+        if (!SecurityUtil.isUserAuthenticated()) {
+            return R.fail("请先登录");
+        }
         boolean result = imageService.deleteImageByUrls(urls);
         if (result) {
             return R.success();
@@ -108,11 +142,6 @@ public class ImageController {
     }
 
 
-    /**
-     * 根据文件扩展名获取内容类型
-     * @param fileName 文件名
-     * @return 对应的MIME类型
-     */
     private String getContentTypeFromFileExtension(String fileName) {
         if (StrUtil.isBlank(fileName) || !StrUtil.contains(fileName, '.')) {
             return "application/octet-stream";

biji-houdaun/src/main/java/com/test/bijihoudaun/controller/MarkdownController.java

@@ -108,8 +108,8 @@ public class MarkdownController {
 
     @Operation(summary = "获取最近更新的笔记")
     @GetMapping("/recent")
-    public R<List<MarkdownFileVO>> getRecentFiles() {
+    public R<List<MarkdownFileVO>> getRecentFiles(@RequestParam(defaultValue = "16") int limit) {
-        List<MarkdownFileVO> files = markdownFileService.getRecentFiles(12);
+        List<MarkdownFileVO> files = markdownFileService.getRecentFiles(limit);
         return R.success(files);
     }
 

biji-houdaun/src/main/java/com/test/bijihoudaun/controller/UserController.java

@@ -4,6 +4,7 @@ import com.test.bijihoudaun.bo.UpdatePasswordBo;
 import cn.hutool.core.util.ObjectUtil;
 import com.test.bijihoudaun.common.response.R;
 import com.test.bijihoudaun.entity.User;
+import com.test.bijihoudaun.entity.UserVO;
 import com.test.bijihoudaun.service.RegistrationCodeService;
 import com.test.bijihoudaun.service.SystemSettingService;
 import com.test.bijihoudaun.service.UserService;
@@ -11,6 +12,7 @@ import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.Parameters;
 import io.swagger.v3.oas.annotations.tags.Tag;
+import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.core.context.SecurityContextHolder;
 import org.springframework.security.authentication.BadCredentialsException;
@@ -41,14 +43,18 @@ public class UserController {
             @Parameter(name = "registrationCode", description = "注册码", required = true)
     })
     @PostMapping("/register")
-    public R<User> register(String username, String password, String email, String registrationCode){
+    public R<UserVO> register(String username, String password, String email, String registrationCode){
         if (!systemSettingService.isRegistrationEnabled()) {
             return R.fail("注册功能已关闭");
         }
         if (!registrationCodeService.validateCode(registrationCode)) {
             return R.fail("无效或已过期的注册码");
         }
-        return R.success(userService.register(username,password,email));
+        User user = userService.register(username, password, email);
+        UserVO userVO = new UserVO();
+        BeanUtils.copyProperties(user, userVO);
+        userVO.setId(String.valueOf(user.getId()));
+        return R.success(userVO);
     }
 
     @Operation(summary = "用户登录")
@@ -57,12 +63,21 @@ public class UserController {
             @Parameter(name = "password", description = "密码",required = true)
     })
     @PostMapping("/login")
-    public R<Map<String, String>> login(String username, String password){
+    public R<Map<String, Object>> login(String username, String password){
         try {
             String token = userService.login(username, password);
-            Map<String, String> tokenMap = new HashMap<>();
+            User user = userService.getOne(new com.baomidou.mybatisplus.core.conditions.query.QueryWrapper<User>().eq("username", username));
-            tokenMap.put("token", token);
+            
-            return R.success(tokenMap);
+            Map<String, Object> result = new HashMap<>();
+            result.put("token", token);
+            
+            Map<String, Object> userInfo = new HashMap<>();
+            userInfo.put("id", String.valueOf(user.getId()));
+            userInfo.put("username", user.getUsername());
+            userInfo.put("email", user.getEmail());
+            result.put("userInfo", userInfo);
+            
+            return R.success(result);
         } catch (BadCredentialsException e) {
             return R.fail("用户名或密码错误");
         }

biji-houdaun/src/main/java/com/test/bijihoudaun/entity/UserVO.java

@@ -0,0 +1,29 @@
+package com.test.bijihoudaun.entity;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.Date;
+
+@Data
+@Schema(description = "用户信息视图对象")
+public class UserVO implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    @Schema(description = "用户id")
+    private String id;
+
+    @Schema(description = "用户名")
+    private String username;
+
+    @Schema(description = "邮箱")
+    private String email;
+
+    @Schema(description = "用户创建时间")
+    private Date createdAt;
+
+    @Schema(description = "用户更新时间")
+    private Date updatedAt;
+}

biji-houdaun/src/main/java/com/test/bijihoudaun/interceptor/RateLimitInterceptor.java

@@ -0,0 +1,84 @@
+package com.test.bijihoudaun.interceptor;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.test.bijihoudaun.common.response.R;
+import com.test.bijihoudaun.common.response.ResultCode;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.springframework.web.servlet.HandlerInterceptor;
+
+import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.atomic.AtomicInteger;
+
+public class RateLimitInterceptor implements HandlerInterceptor {
+
+    private static final int MAX_REQUESTS_PER_MINUTE = 60;
+    private static final int MAX_LOGIN_REQUESTS_PER_MINUTE = 5;
+    private static final long WINDOW_SIZE_MS = 60_000;
+
+    private final Map<String, RequestCounter> requestCounters = new ConcurrentHashMap<>();
+    private final Map<String, RequestCounter> loginCounters = new ConcurrentHashMap<>();
+
+    private static class RequestCounter {
+        AtomicInteger count;
+        long windowStart;
+
+        RequestCounter() {
+            this.count = new AtomicInteger(1);
+            this.windowStart = System.currentTimeMillis();
+        }
+
+        boolean incrementAndCheck(int maxRequests) {
+            long now = System.currentTimeMillis();
+            if (now - windowStart > WINDOW_SIZE_MS) {
+                synchronized (this) {
+                    if (now - windowStart > WINDOW_SIZE_MS) {
+                        count.set(1);
+                        windowStart = now;
+                        return true;
+                    }
+                }
+            }
+            return count.incrementAndGet() <= maxRequests;
+        }
+    }
+
+    @Override
+    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
+        String clientIp = getClientIp(request);
+        String requestUri = request.getRequestURI();
+        
+        boolean isLoginRequest = "/api/user/login".equals(requestUri);
+        Map<String, RequestCounter> counters = isLoginRequest ? loginCounters : requestCounters;
+        int maxRequests = isLoginRequest ? MAX_LOGIN_REQUESTS_PER_MINUTE : MAX_REQUESTS_PER_MINUTE;
+
+        RequestCounter counter = counters.computeIfAbsent(clientIp, k -> new RequestCounter());
+
+        if (!counter.incrementAndCheck(maxRequests)) {
+            response.setContentType("application/json;charset=UTF-8");
+            response.setStatus(429);
+            ObjectMapper mapper = new ObjectMapper();
+            response.getWriter().write(mapper.writeValueAsString(
+                    R.fail(ResultCode.FAILED.getCode(), isLoginRequest ? "登录请求过于频繁，请稍后再试" : "请求过于频繁，请稍后再试")
+            ));
+            return false;
+        }
+
+        return true;
+    }
+
+    private String getClientIp(HttpServletRequest request) {
+        String ip = request.getHeader("X-Forwarded-For");
+        if (ip == null || ip.isEmpty() || "unknown".equalsIgnoreCase(ip)) {
+            ip = request.getHeader("X-Real-IP");
+        }
+        if (ip == null || ip.isEmpty() || "unknown".equalsIgnoreCase(ip)) {
+            ip = request.getRemoteAddr();
+        }
+        if (ip != null && ip.contains(",")) {
+            ip = ip.split(",")[0].trim();
+        }
+        return ip;
+    }
+}

biji-houdaun/src/main/java/com/test/bijihoudaun/mapper/MarkdownFileMapper.java

@@ -48,6 +48,12 @@ public interface MarkdownFileMapper extends BaseMapper<MarkdownFile> {
      * 获取所有笔记ID
      * @return 所有笔记ID列表
      */
-    @Select("SELECT id FROM `markdown_file` WHERE is_deleted = 0")
+    @Select("SELECT id, grouping_id, `title`, file_name, `content`, created_at, updated_at, is_deleted, deleted_at, deleted_by, is_private FROM `markdown_file` WHERE is_deleted = 0")
     List<Integer> findAllIds();
+
+    @Select("SELECT mf.id, mf.grouping_id, mf.`title`, mf.file_name, mf.`content`, mf.created_at, mf.updated_at, mf.is_deleted, mf.deleted_at, mf.deleted_by, mf.is_private, g.`grouping` as groupingName " +
+            "FROM `markdown_file` mf " +
+            "LEFT JOIN `grouping` g ON mf.grouping_id = g.id " +
+            "WHERE mf.id = #{id} AND mf.is_deleted = 0")
+    MarkdownFileVO selectByIdWithGrouping(@Param("id") Long id);
 }

biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/ImageServiceImpl.java

@@ -1,11 +1,11 @@
 package com.test.bijihoudaun.service.impl;
 
 import cn.hutool.core.collection.CollUtil;
-import cn.hutool.core.stream.CollectorUtil;
 import cn.hutool.core.util.ObjectUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.test.bijihoudaun.common.exception.BusinessException;
 import com.test.bijihoudaun.entity.Image;
 import com.test.bijihoudaun.mapper.ImageMapper;
 import com.test.bijihoudaun.service.ImageService;
@@ -19,9 +19,9 @@ import java.io.IOException;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
-import java.time.LocalDateTime;
 import java.util.Date;
 import java.util.List;
+import java.util.Set;
 import java.util.UUID;
 
 @Service
@@ -30,6 +30,12 @@ public class ImageServiceImpl
         extends ServiceImpl<ImageMapper, Image>
         implements ImageService {
 
+    private static final Set<String> ALLOWED_EXTENSIONS = Set.of(
+            ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp", ".svg"
+    );
+    
+    private static final long MAX_FILE_SIZE = 10 * 1024 * 1024;
+
     @Value("${file.upload-dir}")
     private String uploadDir;
     @Resource
@@ -37,28 +43,50 @@ public class ImageServiceImpl
 
     @Override
     public Image uploadImage( MultipartFile file, Long userId, Long markdownId) throws IOException {
-        // 创建上传目录
+        if (file == null || file.isEmpty()) {
+            throw new BusinessException("上传文件不能为空");
+        }
+        
+        String originalFilename = file.getOriginalFilename();
+        if (originalFilename == null || originalFilename.isEmpty()) {
+            throw new BusinessException("文件名无效");
+        }
+        
+        if (file.getSize() > MAX_FILE_SIZE) {
+            throw new BusinessException("文件大小超过限制（最大10MB）");
+        }
+        
+        int lastDotIndex = originalFilename.lastIndexOf(".");
+        if (lastDotIndex == -1) {
+            throw new BusinessException("文件缺少扩展名");
+        }
+        
+        String extension = originalFilename.substring(lastDotIndex).toLowerCase();
+        if (!ALLOWED_EXTENSIONS.contains(extension)) {
+            throw new BusinessException("不支持的文件类型，仅支持图片文件");
+        }
+        
+        String contentType = file.getContentType();
+        if (contentType == null || !contentType.startsWith("image/")) {
+            throw new BusinessException("文件内容类型无效");
+        }
+
         Path uploadPath = Paths.get(uploadDir);
         if (!Files.exists(uploadPath)) {
             Files.createDirectories(uploadPath);
         }
 
-        // 生成唯一文件名
-        String originalFilename = file.getOriginalFilename();
-        String extension = originalFilename.substring(originalFilename.lastIndexOf("."));
         String storedName = UUID.randomUUID() + extension;
 
-        // 保存文件
         Path filePath = uploadPath.resolve(storedName);
         Files.copy(file.getInputStream(), filePath);
 
-        // 创建图片实体
         Image image = new Image();
         image.setOriginalName(originalFilename);
         image.setStoredName(storedName);
         image.setUrl("/api/images/preview/" + storedName);
         image.setSize(file.getSize());
-        image.setContentType(file.getContentType());
+        image.setContentType(contentType);
         image.setCreatedAt(new Date());
         image.setMarkdownId(markdownId);
 
@@ -73,11 +101,9 @@ public class ImageServiceImpl
             return false;
         }
         try {
-            // 删除文件系统中的图片
             Path filePath = Paths.get(uploadDir, image.getStoredName());
             Files.deleteIfExists(filePath);
 
-            // 删除数据库记录
             this.removeById(id);
             return true;
         } catch (IOException e) {
@@ -92,11 +118,9 @@ public class ImageServiceImpl
             return false;
         }
         try {
-            // 删除文件系统中的图片
             Path filePath = Paths.get(uploadDir, image.getStoredName());
             Files.deleteIfExists(filePath);
 
-            // 删除数据库记录
             this.removeById(image.getId());
             return true;
         } catch (IOException e) {

biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/MarkdownFileServiceImpl.java

@@ -40,21 +40,24 @@ public class MarkdownFileServiceImpl
     public MarkdownFile updateMarkdownContent(MarkdownFile markdownFile) {
         long id;
         markdownFile.setUpdatedAt(new Date());
-        // 如果ID为空或0，则视为新文件
         if (ObjectUtil.isNull(markdownFile.getId()) || markdownFile.getId() == 0L) {
             long l = snowflakeIdGenerator.nextId();
             markdownFile.setId(l);
             markdownFile.setCreatedAt(new Date());
-            this.save(markdownFile); // 使用MyBatis-Plus的save方法
+            this.save(markdownFile);
             id=l;
         } else {
-            this.updateById(markdownFile); // 使用MyBatis-Plus的updateById方法
+            this.updateById(markdownFile);
             id=markdownFile.getId();
         }
 
         List<String> strings = MarkdownImageExtractor.extractImageFilenames(markdownFile.getContent());
-        // 异步处理图片文件名同步
         syncImageNames(id, strings);
+        
+        MarkdownFileVO result = markdownFileMapper.selectByIdWithGrouping(id);
+        if (result != null) {
+            return result;
+        }
         return markdownFile;
     }
     

biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/UserServiceImpl.java

@@ -22,38 +22,46 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
 import java.util.ArrayList;
-import java.util.Calendar;
 import java.util.Date;
 
 @Service
 @Transactional
 public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService, UserDetailsService {
 
+    private static final int MIN_USERNAME_LENGTH = 2;
+    private static final int MAX_USERNAME_LENGTH = 8;
+    private static final int MIN_PASSWORD_LENGTH = 6;
+    private static final int MAX_PASSWORD_LENGTH = 12;
+
     @Autowired
     private UserMapper userMapper;
 
-/**
- * 重写Spring Security的loadUserByUsername方法，用于用户认证
- * @param username 用户名
- * @return UserDetails 用户详细信息
- * @throws UsernameNotFoundException 当用户未找到时抛出此异常
- */
     @Override
     public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
-    // 根据用户名从数据库查询用户信息
         User user = userMapper.findByUsername(username);
-    // 判断用户是否存在，如果不存在则抛出异常
         if (ObjectUtil.isNull(user)) {
             throw new UsernameNotFoundException("User not found with username: " + username);
         }
-    // 返回UserDetails对象，包含用户名、密码和权限列表
+        return new org.springframework.security.core.userdetails.User(user.getUsername(), user.getPassword(), new ArrayList<>());
-    // 这里使用Spring Security提供的User类实现UserDetails接口
-    // 参数分别为：用户名，密码，权限集合（这里使用空集合表示无额外权限）
-        return new org.springframework.security.core.userdetails.User(user.getUsername(), user.getPassword(), new ArrayList<>()); // 账号，密码，权限
     }
 
     @Override
     public User register(String username, String password, String email) {
+        if (username == null || username.trim().isEmpty()) {
+            throw new RegistrationException("用户名不能为空");
+        }
+        username = username.trim();
+        if (username.length() < MIN_USERNAME_LENGTH || username.length() > MAX_USERNAME_LENGTH) {
+            throw new RegistrationException("用户名长度必须在" + MIN_USERNAME_LENGTH + "-" + MAX_USERNAME_LENGTH + "位之间");
+        }
+        
+        if (password == null || password.isEmpty()) {
+            throw new RegistrationException("密码不能为空");
+        }
+        if (password.length() < MIN_PASSWORD_LENGTH || password.length() > MAX_PASSWORD_LENGTH) {
+            throw new RegistrationException("密码长度必须在" + MIN_PASSWORD_LENGTH + "-" + MAX_PASSWORD_LENGTH + "位之间");
+        }
+        
         String encrypt = PasswordUtils.encrypt(password);
         LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
         queryWrapper.eq(User::getUsername, username);
@@ -69,7 +77,6 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
         user.setUsername(username);
         user.setPassword(encrypt);
         user.setEmail(email);
-        // user.setCreatedAt(new Date()); // Let the database handle the default value
         userMapper.insert(user);
         return user;
     }
@@ -97,7 +104,6 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
         queryWrapper.eq(User::getId, id)
                 .eq(User::getToken, token);
         User user = getOne(queryWrapper);
-        // 修改过期检查逻辑
         return ObjectUtil.isNotNull(user) && new Date().before(user.getTokenEnddata());
     }
 
@@ -107,11 +113,19 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
         if (ObjectUtil.isNull(user)) {
             throw new BusinessException("用户不存在");
         }
+        
+        String newPassword = updatePasswordBo.getNewPassword();
+        if (newPassword == null || newPassword.isEmpty()) {
+            throw new BusinessException("新密码不能为空");
+        }
+        if (newPassword.length() < MIN_PASSWORD_LENGTH || newPassword.length() > MAX_PASSWORD_LENGTH) {
+            throw new BusinessException("密码长度必须在" + MIN_PASSWORD_LENGTH + "-" + MAX_PASSWORD_LENGTH + "位之间");
+        }
+        
         if (!PasswordUtils.verify(updatePasswordBo.getOldPassword(), user.getPassword())) {
             throw new BusinessException("旧密码不正确");
         }
-        String newPassword = PasswordUtils.encrypt(updatePasswordBo.getNewPassword());
+        user.setPassword(PasswordUtils.encrypt(newPassword));
-        user.setPassword(newPassword);
         updateById(user);
     }
 }

biji-houdaun/src/main/resources/application-dev.yml

@@ -13,7 +13,7 @@ spring:
 #
 
     driver-class-name: com.mysql.cj.jdbc.Driver
-    url: jdbc:mysql://hdy16-16.311169.xyz:20001/biji_db?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
+    url: jdbc:mysql://hdy-hk-8-8.311169.xyz:3306/biji_db?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
     username: biji_user
     password: Ll12331100
   jpa:

biji-houdaun/src/main/resources/application.yml

@@ -33,7 +33,7 @@ datacenter:
 
 # JWT 配置
 jwt:
-  secret: V2VsbCwgSSBzdXBwb3NlIHRoYXQgaWYgeW91J3JlIHJlYWRpbmcgdGhpcywgeW91J3JlIHByZXR0eSBjdXJpb3VzLg== # 这是一个足够长的Base64编码密钥，满足HS512的要求
+  secret: ${JWT_SECRET:V2VsbCwgSSBzdXBwb3NlIHRoYXQgaWYgeW91J3JlIHJlYWRpbmcgdGhpcywgeW91J3JlIHByZXR0eSBjdXJpb3VzLg==}
-  expiration: 86400 # token有效期，单位秒，这里是24小时
+  expiration: 86400
-  header: Authorization # JWT存储的请求头
+  header: Authorization
-  tokenHead: "Bearer " # JWT负载中拿到开头
+  tokenHead: "Bearer "

biji-qianduan/.env.development

@@ -1 +1 @@
-VITE_API_BASE_URL=http://localhost:80
+VITE_API_BASE_URL=http://localhost:8084

biji-qianduan/index.html

@@ -28,6 +28,6 @@
   </style>
   <body>
     <div id="app"></div>
-    <script src="/src/main.js"></script>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

biji-qianduan/src/api/CommonApi.js

@@ -95,7 +95,7 @@ export const updateMarkdownTitle = (id, newName) => {
 }
 
 // 获取最近更新的笔记
-export const getRecentFiles = () => axiosApi.get('/api/markdown/recent');
+export const getRecentFiles = (limit = 16) => axiosApi.get(`/api/markdown/recent?limit=${limit}`);
 
 
 

biji-qianduan/src/components/HomePage.vue

@@ -56,12 +56,19 @@
               @upload-markdown="handleMarkdownUpload"
               @toggle-collapse="isCollapsed = !isCollapsed"
           />
-          <div class="note-list-wrapper">
+          <div class="note-list-wrapper" ref="noteListWrapper" @scroll="handleScroll">
             <NoteList
-                :files="groupMarkdownFiles"
+                :files="displayedFiles"
                 :is-user-logged-in="userStore.isLoggedIn"
                 @preview="previewFile"
             />
+            <div v-if="isLoadingMore" class="loading-more">
+              <el-icon class="is-loading"><Loading /></el-icon>
+              <span>加载中...</span>
+            </div>
+            <div v-else-if="hasMoreFiles && !showEditor && !selectedFile" class="load-more-trigger">
+              <el-button @click="loadMoreFiles" type="primary" plain>加载更多</el-button>
+            </div>
           </div>
         </div>
       </el-main>
@@ -157,7 +164,7 @@ import MoveNoteDialog from './home/dialogs/MoveNoteDialog.vue';
 import SystemSettingsDialog from './home/dialogs/SystemSettingsDialog.vue';
 import UpdatePasswordDialog from './home/dialogs/UpdatePasswordDialog.vue';
 import PrivacyDialog from './home/dialogs/PrivacyDialog.vue';
-import { Plus } from "@element-plus/icons-vue";
+import { Plus, Loading } from "@element-plus/icons-vue";
 
 // Basic Setup
 const userStore = useUserStore();
@@ -167,6 +174,11 @@ const router = useRouter();
 const searchKeyword = ref('');
 const categoryTree = ref([]);
 const groupMarkdownFiles = ref([]);
+const displayedFiles = ref([]);
+const currentPage = ref(0);
+const pageSize = ref(16);
+const isLoadingMore = ref(false);
+const noteListWrapper = ref(null);
 const showEditor = ref(false);
 const selectedFile = ref(null);
 const editData = ref(null);
@@ -188,6 +200,10 @@ const showPrivacyDialog = ref(false);
 const itemToRename = ref(null);
 const fileToImport = ref(null);
 
+const hasMoreFiles = computed(() => {
+  return displayedFiles.value.length < groupMarkdownFiles.value.length;
+});
+
 const resetEdit = () => {
   editData.value = null;
 };
@@ -234,11 +250,38 @@ const resetToHomeView = async () => {
   showEditor.value = false;
   searchKeyword.value = '';
   activeMenu.value = 'all';
+  currentPage.value = 0;
   try {
-    groupMarkdownFiles.value = await getRecentFiles() || [];
+    groupMarkdownFiles.value = await getRecentFiles(100) || [];
+    updateDisplayedFiles();
   } catch (error) {
     ElMessage.error('获取最近文件失败: ' + error.message);
     groupMarkdownFiles.value = [];
+    displayedFiles.value = [];
+  }
+};
+
+const updateDisplayedFiles = () => {
+  const start = 0;
+  const end = (currentPage.value + 1) * pageSize.value;
+  displayedFiles.value = groupMarkdownFiles.value.slice(start, end);
+};
+
+const loadMoreFiles = () => {
+  if (isLoadingMore.value || !hasMoreFiles.value) return;
+  isLoadingMore.value = true;
+  
+  setTimeout(() => {
+    currentPage.value++;
+    updateDisplayedFiles();
+    isLoadingMore.value = false;
+  }, 300);
+};
+
+const handleScroll = (e) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollHeight - scrollTop - clientHeight < 100 && hasMoreFiles.value && !isLoadingMore.value) {
+    loadMoreFiles();
   }
 };
 
@@ -248,12 +291,15 @@ const handleSelectFile = async (data) => {
   try {
     const files = await markdownList(data.id);
     groupMarkdownFiles.value = files || [];
+    currentPage.value = 0;
+    updateDisplayedFiles();
     selectedFile.value = null;
     showEditor.value = false;
     activeMenu.value = `group-${data.id}`;
   } catch (error) {
     ElMessage.error('获取笔记列表失败: ' + error.message);
     groupMarkdownFiles.value = [];
+    displayedFiles.value = [];
   }
 };
 
@@ -272,30 +318,45 @@ const handleCreateNote = (payload) => {
 
 const handleEditorBack = (data) => {
   showEditor.value = false;
-  previewFile(data);
+  if (data && data.id) {
+    const fileWithGrouping = {
+      ...data,
+      groupingName: data.groupingName || getCategoryName(data.groupingId)
+    };
+    selectedFile.value = fileWithGrouping;
+  } else {
+    selectedFile.value = null;
+    resetToHomeView();
+  }
+};
+
+const getCategoryName = (groupId) => {
+  if (!groupId) return '';
+  const findName = (items) => {
+    for (const item of items) {
+      if (item.id === groupId) return item.grouping;
+      if (item.children) {
+        const name = findName(item.children);
+        if (name) return name;
+      }
+    }
+    return null;
+  };
+  return findName(categoryTree.value) || '';
 };
 
 const handleSaveSuccess = (updatedFile) => {
   selectedFile.value = updatedFile;
-  // 修复：保存成功后不退出编辑页面
-  // showEditor.value = false;
 
   const index = groupMarkdownFiles.value.findIndex(f => f.id === updatedFile.id);
   if (index !== -1) {
     groupMarkdownFiles.value[index] = updatedFile;
   } else {
-    // 如果是新创建的笔记（之前ID为null），添加到列表开头
     groupMarkdownFiles.value.unshift(updatedFile);
   }
-
+  
+  updateDisplayedFiles();
   fetchGroupings();
-
-  // 延迟清空 editData，确保所有响应式更新完成后再清理状态
-  // Delay clearing editData to ensure all reactive updates are complete before cleaning up the state.
-  setTimeout(() => {
-    // 修复：保存成功后不清空editData，保持编辑状态
-    // resetEdit();
-  }, 100); // A short delay is usually sufficient
 };
 
 const previewFile = async (file) => {
@@ -390,6 +451,8 @@ const handleSearch = async () => {
   }
   try {
     groupMarkdownFiles.value = await searchMarkdown(searchKeyword.value) || [];
+    currentPage.value = 0;
+    updateDisplayedFiles();
     selectedFile.value = null;
     showEditor.value = false;
     activeMenu.value = 'search';
@@ -569,4 +632,19 @@ watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
   height: 56px;
   box-shadow: 0 4px 12px rgba(0,0,0,.15);
 }
+
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  gap: 8px;
+  color: var(--text-color-secondary);
+}
+
+.load-more-trigger {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
 </style>

biji-qianduan/src/components/RegisterPage.vue

@@ -76,8 +76,14 @@ const validatePass = (rule, value, callback) => {
 };
 
 const registerRules = {
-  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  username: [
-  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 2, max: 8, message: '用户名长度必须在2-8位之间', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 12, message: '密码长度必须在6-12位之间', trigger: 'blur' }
+  ],
   confirmPassword: [{ validator: validatePass, trigger: 'blur' }],
   registrationCode: [{ required: true, message: '请输入注册码', trigger: 'blur' }],
 };

biji-qianduan/src/components/home/NoteEditor.vue

@@ -3,7 +3,7 @@
     <el-header class="editor-header">
       <h2 class="editor-title">{{ editData.title }}</h2>
       <div class="actions">
-        <el-button type="primary" @click="$emit('back', editData)">返回</el-button>
+        <el-button type="primary" @click="handleBack">返回</el-button>
         <el-button type="success" @click="save">保存</el-button>
         <span class="save-status">{{ saveStatus }}</span>
       </div>
@@ -29,13 +29,18 @@ const props = defineProps({
 const emit = defineEmits(['back', 'update:editData']);
 
 const vditor = ref(null);
-const bijiId=ref(null);
+const currentId = ref(null);
-
+const isInitialized = ref(false);
 const saveStatus = ref('');
 let saveTimeout = null;
-const isProgrammaticChange = ref(false);
+let lastSavedContent = ref('');
+let isSaving = ref(false);
 
 const initVditor = () => {
+  if (vditor.value) {
+    vditor.value.destroy();
+  }
+  
   vditor.value = new Vditor('vditor-editor', {
     height: 'calc(100vh - 120px)',
     mode: 'ir',
@@ -43,23 +48,26 @@ const initVditor = () => {
       enable: false,
     },
     after: () => {
-    if (props.editData && props.editData.content) {
+      isInitialized.value = true;
-    isProgrammaticChange.value = true;
+      if (props.editData && props.editData.content) {
-    vditor.value.setValue(props.editData.content);
+        vditor.value.setValue(props.editData.content);
-    isProgrammaticChange.value = false;
+        lastSavedContent.value = props.editData.content;
-    }
+      }
-    vditor.value.focus();
+      if (props.editData && props.editData.id) {
+        currentId.value = props.editData.id;
+      }
+      vditor.value.focus();
     },
     input: (value) => {
-      if (isProgrammaticChange.value) {
+      if (!isInitialized.value) return;
-        return;
+      
-      }
-      // 启动定时器，延迟5秒后执行保存
       clearTimeout(saveTimeout);
       saveStatus.value = '正在输入...';
       saveTimeout = setTimeout(() => {
-        save(value);
+        if (!isSaving.value && value !== lastSavedContent.value) {
-      }, 5000);
+          save(value);
+        }
+      }, 3000);
     },
     upload: {
       accept: 'image/*',
@@ -69,7 +77,6 @@ const initVditor = () => {
 
         uploadImage(file).then(res => {
           const url = res.url;
-          // 使用 file.name 替代 files.name 保证一致性
           const baseUrl = import.meta.env.VITE_API_BASE_URL || '';
           vditor.value.insertValue(`![${file.name}](${baseUrl}${url})`);
         }).catch(() => {
@@ -81,33 +88,72 @@ const initVditor = () => {
 };
 
 const save = async (value) => {
+  if (isSaving.value) return;
+  
   clearTimeout(saveTimeout);
   const content = typeof value === 'string' ? value : vditor.value.getValue();
+  
+  if (content === lastSavedContent.value && currentId.value) {
+    return;
+  }
+  
+  isSaving.value = true;
   try {
     saveStatus.value = '正在保存...';
-    // 发送完整的笔记对象，确保包含所有必要字段
+    
-    const response = await updateMarkdown({ 
+    const payload = { 
-      id: props.editData.id? props.editData.id : bijiId.value,
+      id: currentId.value || props.editData.id || null,
       content: content,
       title: props.editData.title,
       groupingId: props.editData.groupingId,
       fileName: props.editData.fileName,
       isPrivate: props.editData.isPrivate
-    });
+    };
-    // 确保获取到后端返回的数据，包括可能的新ID
+    
-
+    const response = await updateMarkdown(payload);
-    bijiId.value = response.id;
+    
-    // 保存成功，更新状态
+    if (response && response.id) {
-    saveStatus.value = '已保存';
+      currentId.value = response.id;
-    // 发送更新后的笔记数据（包含可能的新ID）
+      lastSavedContent.value = content;
-    emit('update:editData', { ...props.editData, content: content });
+      
+      const updatedFile = {
+        ...props.editData,
+        id: response.id,
+        content: content,
+        groupingId: response.groupingId,
+        groupingName: response.groupingName,
+        title: response.title,
+        isPrivate: response.isPrivate
+      };
+      
+      emit('update:editData', updatedFile);
+      saveStatus.value = '已保存';
+    }
   } catch (error) {
-    // 保存失败，更新状态并显示错误消息
     saveStatus.value = '保存失败';
     ElMessage.error('保存失败: ' + (error.message || '未知错误'));
+  } finally {
+    isSaving.value = false;
   }
 };
 
+const handleBack = async () => {
+  const content = vditor.value ? vditor.value.getValue() : '';
+  if (content !== lastSavedContent.value && !isSaving.value) {
+    await save(content);
+  }
+  
+  const returnData = {
+    ...props.editData,
+    id: currentId.value || props.editData.id,
+    content: content,
+    groupingId: props.editData.groupingId,
+    groupingName: props.editData.groupingName
+  };
+  
+  emit('back', returnData);
+};
+
 onMounted(() => {
   initVditor();
 });
@@ -116,27 +162,17 @@ onBeforeUnmount(() => {
   clearTimeout(saveTimeout);
   if (vditor.value) {
     vditor.value.destroy();
+    vditor.value = null;
   }
-  if (bijiId.value){
+  currentId.value = null;
-    // 发送完整的笔记对象，确保包含所有必要字段
+  isInitialized.value = false;
-    updateMarkdown({ 
-      id: bijiId.value,
-      content: vditor.value.getValue(),
-      title: props.editData.title,
-      groupingId: props.editData.groupingId,
-      fileName: props.editData.fileName,
-      isPrivate: props.editData.isPrivate
-    });
-  }
-  // 离开页面后清空 bijiId.value 变量
-  bijiId.value = null;
 });
 
 watch(() => props.editData, (newVal, oldVal) => {
-  if (vditor.value && newVal && newVal.id !== oldVal?.id) {
+  if (vditor.value && isInitialized.value && newVal && newVal.id !== oldVal?.id) {
-    isProgrammaticChange.value = true;
     vditor.value.setValue(newVal.content || '');
-    isProgrammaticChange.value = false;
+    lastSavedContent.value = newVal.content || '';
+    currentId.value = newVal.id;
     saveStatus.value = '';
   }
 }, { deep: true });

biji-qianduan/src/components/home/SidebarMenu.vue

@@ -1,74 +1,75 @@
 <template>
-  <el-aside class="sidebar" :width="isCollapsed ? (isMobile ? '0' : '64px') : '250px'">
+  <el-aside class="sidebar" :class="{ 'is-collapsed': isCollapsed }" :width="isCollapsed ? (isMobile ? '0' : '72px') : '260px'">
     <div class="sidebar-header">
-      <span v-if="!isCollapsed" style="margin-right: 15px; font-weight: bold;">笔记分类</span>
+      <div class="header-left">
-      <el-button v-if="!isCollapsed" type="primary" size="small" @click="$emit('show-create-group')" circle>
+        <transition name="fade">
-        <el-icon><Plus /></el-icon>
+          <span v-if="!isCollapsed" class="sidebar-title">笔记分类</span>
-      </el-button>
+        </transition>
-      <el-button @click="$emit('toggle-collapse')" type="primary" size="small" circle v-if="!isMobile">
+      </div>
-        <el-icon>
+      <div class="header-actions">
-          <Fold v-if="!isCollapsed" />
+        <el-tooltip content="新建分类" placement="top" :disabled="isCollapsed && !isMobile">
-          <Expand v-else />
+          <el-button v-if="!isCollapsed || isMobile" type="primary" size="small" @click="$emit('show-create-group')" circle class="action-btn">
-        </el-icon>
+            <el-icon><Plus /></el-icon>
-      </el-button>
+          </el-button>
+        </el-tooltip>
+        <el-tooltip :content="isCollapsed ? '展开' : '收起'" placement="top" v-if="!isMobile">
+          <el-button @click="$emit('toggle-collapse')" type="primary" size="small" circle class="action-btn toggle-btn">
+            <el-icon :class="{ 'rotate-180': isCollapsed }">
+              <Fold />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </div>
     </div>
 
-    <!-- Desktop Menu -->
+    <div class="sidebar-content">
-    <el-menu
+      <el-menu
-        v-if="!isMobile"
+          :default-active="activeMenu"
-        :default-active="activeMenu"
+          class="el-menu-vertical-demo"
-        class="el-menu-vertical-demo"
+          :collapse="isCollapsed && !isMobile"
-        :collapse="isCollapsed"
+          popper-effect="light"
-        popper-effect="light"
+          :collapse-transition="true"
-        :collapse-transition="false"
+      >
-    >
+        <div class="menu-section" v-if="isMobile">
-      <template v-for="menu in categoryTree" :key="menu.id">
+          <div v-if="userStore.isLoggedIn" class="user-info">
-        <component :is="renderMenu(menu)" />
+            <el-avatar :size="40" class="user-avatar">{{ userStore.userInfo?.username?.charAt(0)?.toUpperCase() }}</el-avatar>
-      </template>
+            <span class="username">{{ userStore.userInfo?.username }}</span>
-      <ElMenuItem index="trash" @click="goToTrash">
+          </div>
-        <ElIcon><Delete /></ElIcon>
+          <div v-else class="guest-info">
-        <template #title>回收站</template>
+            <el-button type="primary" @click="goToLogin">登录</el-button>
-      </ElMenuItem>
+            <el-button @click="goToRegister">注册</el-button>
-    </el-menu>
+          </div>
-
-    <!-- Mobile Menu -->
-    <el-menu
-        v-if="isMobile"
-        :default-active="activeMenu"
-        class="el-menu-vertical-demo"
-        :collapse="isCollapsed"
-        :collapse-transition="false"
-    >
-      <div class="mobile-menu-header">
-        <div v-if="userStore.isLoggedIn" class="user-info">
-          <span class="username">欢迎, {{ userStore.userInfo?.username }}</span>
         </div>
-        <div v-else class="guest-info">
-          <el-button type="primary" @click="goToLogin">登录</el-button>
-          <el-button @click="goToRegister">注册</el-button>
-        </div>
-      </div>
 
-      <template v-for="menu in categoryTree" :key="menu.id">
+        <div class="menu-section">
-        <component :is="renderMenu(menu)" />
+          <div class="section-title" v-if="!isCollapsed">分类列表</div>
-      </template>
+          <template v-for="menu in categoryTree" :key="menu.id">
-      <ElMenuItem index="trash" @click="goToTrash">
+            <component :is="renderMenu(menu)" />
-        <ElIcon><Delete /></ElIcon>
+          </template>
-        <template #title>回收站</template>
+        </div>
-      </ElMenuItem>
+
-      <ElMenuItem v-if="userStore.isLoggedIn" index="system-settings" @click="$emit('show-system-settings')">
+        <div class="menu-section menu-footer">
-        <ElIcon><setting /></ElIcon>
+          <ElMenuItem index="trash" @click="goToTrash" class="menu-item-trash">
-        <template #title>系统管理</template>
+            <ElIcon><Delete /></ElIcon>
-      </ElMenuItem>
+            <template #title>回收站</template>
-      <ElMenuItem v-if="userStore.isLoggedIn" index="update-password" @click="$emit('show-update-password')">
+          </ElMenuItem>
-        <ElIcon><lock /></ElIcon>
+          <template v-if="isMobile && userStore.isLoggedIn">
-        <template #title>修改密码</template>
+            <ElMenuItem index="system-settings" @click="$emit('show-system-settings')">
-      </ElMenuItem>
+              <ElIcon><Setting /></ElIcon>
-      <ElMenuItem v-if="userStore.isLoggedIn" index="logout" @click="$emit('logout')">
+              <template #title>系统管理</template>
-        <ElIcon><SwitchButton /></ElIcon>
+            </ElMenuItem>
-        <template #title>退出登录</template>
+            <ElMenuItem index="update-password" @click="$emit('show-update-password')">
-      </ElMenuItem>
+              <ElIcon><Lock /></ElIcon>
-    </el-menu>
+              <template #title>修改密码</template>
+            </ElMenuItem>
+            <ElMenuItem index="logout" @click="$emit('logout')" class="menu-item-logout">
+              <ElIcon><SwitchButton /></ElIcon>
+              <template #title>退出登录</template>
+            </ElMenuItem>
+          </template>
+        </div>
+      </el-menu>
+    </div>
   </el-aside>
 </template>
 
@@ -161,17 +162,24 @@ const renderMenu = (item) => {
 
 <style scoped>
 .sidebar {
-  background-color: rgba(255, 255, 255, 0.8);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(24px);
-  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
-  transition: width 0.3s ease; /* Apply transition to width */
+  transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   display: flex;
   flex-direction: column;
+  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
+  position: relative;
+  z-index: 10;
+}
+
+.sidebar.is-collapsed {
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.04);
 }
 
 .dark-theme .sidebar {
-  background-color: rgba(23, 23, 39, 0.8);
+  background: linear-gradient(180deg, rgba(23, 23, 39, 0.98) 0%, rgba(18, 18, 32, 0.98) 100%);
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .sidebar-header {
@@ -180,34 +188,183 @@ const renderMenu = (item) => {
   justify-content: space-between;
   padding: 1rem;
   flex-shrink: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  min-height: 64px;
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.sidebar.is-collapsed .sidebar-header {
+  padding: 1rem 0.5rem;
+  justify-content: center;
+}
+
+.header-left {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.sidebar.is-collapsed .header-left {
+  display: none;
+}
+
+.dark-theme .sidebar-header {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.sidebar-title {
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--text-color);
+  letter-spacing: 0.3px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-light) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.sidebar.is-collapsed .header-actions {
+  flex-direction: column;
+  gap: 12px;
+}
+
+.action-btn {
+  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.toggle-btn .el-icon {
+  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.toggle-btn .el-icon.rotate-180 {
+  transform: rotate(180deg);
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .el-menu {
   border-right: none;
   background: transparent;
-  flex-grow: 1;
+  flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  transition: none !important; /* Disable built-in transitions */
+  padding: 0.75rem 0.25rem;
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.el-menu::-webkit-scrollbar {
+  width: 4px;
+}
+
+.el-menu::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+}
+
+.el-menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.menu-section {
+  padding: 0 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.section-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-color-secondary);
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  padding: 0.75rem 1rem 0.5rem;
+  opacity: 0.6;
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.sidebar.is-collapsed .section-title {
+  display: none;
+}
+
+.menu-footer {
+  margin-top: auto;
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  padding-top: 0.75rem;
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.dark-theme .menu-footer {
+  border-top-color: rgba(255, 255, 255, 0.06);
 }
 
 :deep(.el-menu-item), :deep(.el-sub-menu__title) {
-  height: 48px;
+  height: 46px;
-  line-height: 48px;
+  line-height: 46px;
-  border-radius: var(--border-radius);
+  border-radius: 12px;
-  margin: 0.25rem 0.5rem;
+  margin: 2px 0.5rem;
   color: var(--text-color-secondary);
+  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  position: relative;
+}
+
+:deep(.el-menu-item::before), :deep(.el-sub-menu__title::before) {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  background: var(--primary-color);
+  border-radius: 0 3px 3px 0;
+  transition: height 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+:deep(.el-menu-item:hover::before), :deep(.el-sub-menu__title:hover::before) {
+  height: 20px;
 }
 
 :deep(.el-menu-item.is-active) {
-  background-color: var(--primary-color);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-light) 100%);
   color: #fff;
   font-weight: 600;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
+}
+
+:deep(.el-menu-item.is-active::before) {
+  height: 24px;
+  background: #fff;
 }
 
 :deep(.el-menu-item:hover), :deep(.el-sub-menu__title:hover) {
-  background-color: var(--primary-color-light);
+  background-color: rgba(64, 158, 255, 0.08);
   color: var(--primary-color);
+  transform: translateX(2px);
+}
+
+.dark-theme :deep(.el-menu-item:hover),
+.dark-theme :deep(.el-sub-menu__title:hover) {
+  background-color: rgba(64, 158, 255, 0.15);
 }
 
 .menu-item-title {
@@ -215,7 +372,7 @@ const renderMenu = (item) => {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  gap: 5px;
+  gap: 8px;
 }
 
 .menu-item-text {
@@ -223,16 +380,22 @@ const renderMenu = (item) => {
   overflow: hidden;
   text-overflow: ellipsis;
   flex-grow: 1;
-  transition: opacity 0.2s ease; /* Add transition for smooth fade */
+  font-size: 14px;
-  opacity: 1;
+  font-weight: 500;
 }
 
 .menu-item-actions {
   display: none;
   align-items: center;
-  gap: 5px;
+  gap: 4px;
-  transition: opacity 0.2s ease;
+  padding: 4px;
-  opacity: 1;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+  backdrop-filter: blur(8px);
+}
+
+.dark-theme .menu-item-actions {
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .el-menu:not(.el-menu--collapse) .el-menu-item:hover .menu-item-actions,
@@ -242,27 +405,83 @@ const renderMenu = (item) => {
 
 .el-menu--collapse .menu-item-text,
 .el-menu--collapse .menu-item-actions {
-  opacity: 0; /* Fade out instead of just disappearing */
+  opacity: 0;
-  width: 0; /* Ensure it takes no space */
+  width: 0;
 }
 
 .edit-icon, .delete-icon {
   cursor: pointer;
   color: var(--text-color-secondary);
+  padding: 6px;
+  border-radius: 6px;
+  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.edit-icon:hover, .delete-icon:hover {
+.edit-icon:hover {
   color: var(--primary-color);
+  background: rgba(64, 158, 255, 0.12);
+  transform: scale(1.1);
 }
 
-.mobile-menu-header {
+.delete-icon:hover {
-  padding: 20px;
+  color: #f56c6c;
-  text-align: center;
+  background: rgba(245, 108, 108, 0.12);
-  border-bottom: 1px solid #e0e0e0;
+  transform: scale(1.1);
 }
 
-.mobile-menu-header .username {
+.user-info {
-  font-weight: bold;
+  display: flex;
-  font-size: 16px;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.25rem 1rem;
+  gap: 0.75rem;
+  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1) 0%, rgba(64, 158, 255, 0.05) 100%);
+  border-radius: 16px;
+  margin: 0.5rem;
+  border: 1px solid rgba(64, 158, 255, 0.1);
+}
+
+.user-avatar {
+  background: linear-gradient(135deg, var(--primary-color) 0%, #66b1ff 100%);
+  color: #fff;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+.username {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--text-color);
+}
+
+.guest-info {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  justify-content: center;
+}
+
+.menu-item-trash {
+  color: var(--text-color-secondary) !important;
+}
+
+.menu-item-trash:hover {
+  color: #e6a23c !important;
+  background-color: rgba(230, 162, 60, 0.12) !important;
+}
+
+.menu-item-logout:hover {
+  color: #f56c6c !important;
+  background-color: rgba(245, 108, 108, 0.12) !important;
+}
+
+.sidebar.is-collapsed :deep(.el-menu-item),
+.sidebar.is-collapsed :deep(.el-sub-menu__title) {
+  margin: 4px 0.25rem;
+  justify-content: center;
+}
+
+.sidebar.is-collapsed :deep(.el-icon) {
+  font-size: 20px;
 }
 </style>

biji-qianduan/src/stores/user.js

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { login as loginApi } from '../api/CommonApi';
-import { login as loginApi } from '../api/CommonApi'; // 假设你的API调用函数是这样组织的
 
 export const useUserStore = defineStore('user', {
   state: () => ({
@@ -13,8 +12,9 @@ export const useUserStore = defineStore('user', {
         const response = await loginApi({ username, password });
         if (response && response.token) {
           this.token = response.token;
-          // 你可能还需要一个接口来获取用户信息
+          if (response.userInfo) {
-          // this.userInfo = await getUserInfo();
+            this.userInfo = response.userInfo;
+          }
           return true;
         }
         return false;

docker/.env

@@ -1,3 +1,4 @@
 DB_URL=jdbc:mysql://panel-jp.998521.xyz:37857/biji_db?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
 DB_USERNAME=biji_user
-DB_PASSWORD=Ll12331100
+DB_PASSWORD=Ll12331100
+JWT_SECRET=eW91ci1zdXBlci1zZWN1cmUtand0LXNlY3JldC1rZXktZm9yLXByb2R1Y3Rpb24tdXNlLW9ubHk=