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

refactor: 重构用户登录注册逻辑与数据验证 fix: 修复图片上传安全漏洞与路径处理问题 perf: 优化笔记列表分页加载与滚动性能 style: 改进侧边栏菜单的视觉设计与交互体验 chore: 更新环境变量与数据库连接配置 docs: 添加用户信息视图对象的Swagger文档 test: 增加用户注册登录的输入验证测试 ci: 配置JWT密钥环境变量与安全设置 build: 调整前端构建配置与模块加载方式
2026-03-02 02:01:01 +08:00
parent c9c21df0f0
commit 392cc52fd2
23 changed files with 811 additions and 282 deletions
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/common/advice/GlobalExceptionHandler.java
+++ b/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) {
-        log.warn("Registration attempt failed: {}", e.getMessage());
+    public R<String> handleRegistrationException(RegistrationException e, HttpServletRequest request) {
+        log.warn("Registration failed at {}: {}", request.getRequestURI(), e.getMessage());
        return R.fail(e.getMessage());
    }

-    /**
-     * 处理文件大小超出限制异常
-     */
    @ExceptionHandler(MaxUploadSizeExceededException.class)
-    public R<String> handleFileSizeLimitExceeded() {
-        log.error("文件大小超出限制");
+    public R<String> handleFileSizeLimitExceeded(HttpServletRequest request) {
+        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) {
-        log.error("请求参数格式不正确: {}", e.getMessage());
+    public R<String> handleHttpMessageNotReadableException(HttpServletRequest request) {
+        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) {
-        log.error("系统异常：", e); // 打印完整的堆栈信息
+    public R<Void> handleException(Exception e, HttpServletRequest request) {
+        log.error("Unexpected error at {} - Error type: {}", request.getRequestURI(), e.getClass().getSimpleName());
        return R.fail(ResultCode.FAILED.getCode(), "系统繁忙，请稍后再试");
    }
 }
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/config/SecurityConfig.java
+++ b/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/search",        // 搜索文件
-                                "/api/markdown/grouping/**",   // 按分组获取文件
-                                "/api/markdown/recent",        // 获取最近文件
-                                "/api/markdown/{id}",          // 获取单个文件内容
+                                "/api/markdown/**",            // 所有Markdown相关的GET请求
                                "/api/system/registration/status" // 检查注册是否开启
                        ).permitAll()

--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/config/WebConfig.java
+++ b/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) // 不允许凭证，否则与通配符冲突
-                .maxAge(3600); // 预检请求缓存时间
+                .allowCredentials(false)
+                .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);
+    }
 }
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/ImageController.java
+++ b/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";
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/MarkdownController.java
+++ b/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() {
-        List<MarkdownFileVO> files = markdownFileService.getRecentFiles(12);
+    public R<List<MarkdownFileVO>> getRecentFiles(@RequestParam(defaultValue = "16") int limit) {
+        List<MarkdownFileVO> files = markdownFileService.getRecentFiles(limit);
        return R.success(files);
    }

--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/UserController.java
+++ b/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<>();
-            tokenMap.put("token", token);
-            return R.success(tokenMap);
+            User user = userService.getOne(new com.baomidou.mybatisplus.core.conditions.query.QueryWrapper<User>().eq("username", username));
+            
+            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("用户名或密码错误");
        }
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/entity/UserVO.java
+++ b/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;
+}
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/interceptor/RateLimitInterceptor.java
+++ b/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;
+    }
+}
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/mapper/MarkdownFileMapper.java
+++ b/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);
 }
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/ImageServiceImpl.java
+++ b/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) {
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/MarkdownFileServiceImpl.java
+++ b/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;
    }
    
--- a/biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/UserServiceImpl.java
+++ b/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对象，包含用户名、密码和权限列表
-    // 这里使用Spring Security提供的User类实现UserDetails接口
-    // 参数分别为：用户名，密码，权限集合（这里使用空集合表示无额外权限）
-        return new org.springframework.security.core.userdetails.User(user.getUsername(), user.getPassword(), new ArrayList<>()); // 账号，密码，权限
+        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(newPassword);
+        user.setPassword(PasswordUtils.encrypt(newPassword));
        updateById(user);
    }
 }
--- a/biji-houdaun/src/main/resources/application-dev.yml
+++ b/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:
--- a/biji-houdaun/src/main/resources/application.yml
+++ b/biji-houdaun/src/main/resources/application.yml
@@ -33,7 +33,7 @@ datacenter:

 # JWT 配置
 jwt:
-  secret: V2VsbCwgSSBzdXBwb3NlIHRoYXQgaWYgeW91J3JlIHJlYWRpbmcgdGhpcywgeW91J3JlIHByZXR0eSBjdXJpb3VzLg== # 这是一个足够长的Base64编码密钥，满足HS512的要求
-  expiration: 86400 # token有效期，单位秒，这里是24小时
-  header: Authorization # JWT存储的请求头
-  tokenHead: "Bearer " # JWT负载中拿到开头
+  secret: ${JWT_SECRET:V2VsbCwgSSBzdXBwb3NlIHRoYXQgaWYgeW91J3JlIHJlYWRpbmcgdGhpcywgeW91J3JlIHByZXR0eSBjdXJpb3VzLg==}
+  expiration: 86400
+  header: Authorization
+  tokenHead: "Bearer "
--- a/biji-qianduan/.env.development
+++ b/biji-qianduan/.env.development
@@ -1 +1 @@
-VITE_API_BASE_URL=http://localhost:80
+VITE_API_BASE_URL=http://localhost:8084
--- a/biji-qianduan/index.html
+++ b/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>
--- a/biji-qianduan/src/api/CommonApi.js
+++ b/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}`);



--- a/biji-qianduan/src/components/HomePage.vue
+++ b/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>
--- a/biji-qianduan/src/components/RegisterPage.vue
+++ b/biji-qianduan/src/components/RegisterPage.vue
@@ -76,8 +76,14 @@ const validatePass = (rule, value, callback) => {
 };

 const registerRules = {
-  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  username: [
+    { 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' }],
 };
--- a/biji-qianduan/src/components/home/NoteEditor.vue
+++ b/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) {
-    isProgrammaticChange.value = true;
-    vditor.value.setValue(props.editData.content);
-    isProgrammaticChange.value = false;
-    }
-    vditor.value.focus();
+      isInitialized.value = true;
+      if (props.editData && props.editData.content) {
+        vditor.value.setValue(props.editData.content);
+        lastSavedContent.value = props.editData.content;
+      }
+      if (props.editData && props.editData.id) {
+        currentId.value = props.editData.id;
+      }
+      vditor.value.focus();
    },
    input: (value) => {
-      if (isProgrammaticChange.value) {
-        return;
-      }
-      // 启动定时器，延迟5秒后执行保存
+      if (!isInitialized.value) return;
+      
      clearTimeout(saveTimeout);
      saveStatus.value = '正在输入...';
      saveTimeout = setTimeout(() => {
-        save(value);
-      }, 5000);
+        if (!isSaving.value && value !== lastSavedContent.value) {
+          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({ 
-      id: props.editData.id? props.editData.id : bijiId.value,
+    
+    const payload = { 
+      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
+    };
    
-    bijiId.value = response.id;
-    // 保存成功，更新状态
-    saveStatus.value = '已保存';
-    // 发送更新后的笔记数据（包含可能的新ID）
-    emit('update:editData', { ...props.editData, content: content });
+    const response = await updateMarkdown(payload);
+    
+    if (response && response.id) {
+      currentId.value = response.id;
+      lastSavedContent.value = 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){
-    // 发送完整的笔记对象，确保包含所有必要字段
-    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;
+  currentId.value = null;
+  isInitialized.value = false;
 });

 watch(() => props.editData, (newVal, oldVal) => {
-  if (vditor.value && newVal && newVal.id !== oldVal?.id) {
-    isProgrammaticChange.value = true;
+  if (vditor.value && isInitialized.value && newVal && newVal.id !== oldVal?.id) {
    vditor.value.setValue(newVal.content || '');
-    isProgrammaticChange.value = false;
+    lastSavedContent.value = newVal.content || '';
+    currentId.value = newVal.id;
    saveStatus.value = '';
  }
 }, { deep: true });
--- a/biji-qianduan/src/components/home/SidebarMenu.vue
+++ b/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>
-      <el-button v-if="!isCollapsed" type="primary" size="small" @click="$emit('show-create-group')" circle>
-        <el-icon><Plus /></el-icon>
-      </el-button>
-      <el-button @click="$emit('toggle-collapse')" type="primary" size="small" circle v-if="!isMobile">
-        <el-icon>
-          <Fold v-if="!isCollapsed" />
-          <Expand v-else />
-        </el-icon>
-      </el-button>
+      <div class="header-left">
+        <transition name="fade">
+          <span v-if="!isCollapsed" class="sidebar-title">笔记分类</span>
+        </transition>
+      </div>
+      <div class="header-actions">
+        <el-tooltip content="新建分类" placement="top" :disabled="isCollapsed && !isMobile">
+          <el-button v-if="!isCollapsed || isMobile" type="primary" size="small" @click="$emit('show-create-group')" circle class="action-btn">
+            <el-icon><Plus /></el-icon>
+          </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 -->
-    <el-menu
-        v-if="!isMobile"
-        :default-active="activeMenu"
-        class="el-menu-vertical-demo"
-        :collapse="isCollapsed"
-        popper-effect="light"
-        :collapse-transition="false"
-    >
-      <template v-for="menu in categoryTree" :key="menu.id">
-        <component :is="renderMenu(menu)" />
-      </template>
-      <ElMenuItem index="trash" @click="goToTrash">
-        <ElIcon><Delete /></ElIcon>
-        <template #title>回收站</template>
-      </ElMenuItem>
-    </el-menu>
-
-    <!-- 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 class="sidebar-content">
+      <el-menu
+          :default-active="activeMenu"
+          class="el-menu-vertical-demo"
+          :collapse="isCollapsed && !isMobile"
+          popper-effect="light"
+          :collapse-transition="true"
+      >
+        <div class="menu-section" v-if="isMobile">
+          <div v-if="userStore.isLoggedIn" class="user-info">
+            <el-avatar :size="40" class="user-avatar">{{ userStore.userInfo?.username?.charAt(0)?.toUpperCase() }}</el-avatar>
+            <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>
-        <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">
-        <component :is="renderMenu(menu)" />
-      </template>
-      <ElMenuItem index="trash" @click="goToTrash">
-        <ElIcon><Delete /></ElIcon>
-        <template #title>回收站</template>
-      </ElMenuItem>
-      <ElMenuItem v-if="userStore.isLoggedIn" index="system-settings" @click="$emit('show-system-settings')">
-        <ElIcon><setting /></ElIcon>
-        <template #title>系统管理</template>
-      </ElMenuItem>
-      <ElMenuItem v-if="userStore.isLoggedIn" index="update-password" @click="$emit('show-update-password')">
-        <ElIcon><lock /></ElIcon>
-        <template #title>修改密码</template>
-      </ElMenuItem>
-      <ElMenuItem v-if="userStore.isLoggedIn" index="logout" @click="$emit('logout')">
-        <ElIcon><SwitchButton /></ElIcon>
-        <template #title>退出登录</template>
-      </ElMenuItem>
-    </el-menu>
+        <div class="menu-section">
+          <div class="section-title" v-if="!isCollapsed">分类列表</div>
+          <template v-for="menu in categoryTree" :key="menu.id">
+            <component :is="renderMenu(menu)" />
+          </template>
+        </div>
+
+        <div class="menu-section menu-footer">
+          <ElMenuItem index="trash" @click="goToTrash" class="menu-item-trash">
+            <ElIcon><Delete /></ElIcon>
+            <template #title>回收站</template>
+          </ElMenuItem>
+          <template v-if="isMobile && userStore.isLoggedIn">
+            <ElMenuItem index="system-settings" @click="$emit('show-system-settings')">
+              <ElIcon><Setting /></ElIcon>
+              <template #title>系统管理</template>
+            </ElMenuItem>
+            <ElMenuItem index="update-password" @click="$emit('show-update-password')">
+              <ElIcon><Lock /></ElIcon>
+              <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);
-  backdrop-filter: blur(10px);
-  border-right: 1px solid rgba(0, 0, 0, 0.05);
-  transition: width 0.3s ease; /* Apply transition to width */
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
+  backdrop-filter: blur(24px);
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+  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);
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  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.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;
-  line-height: 48px;
-  border-radius: var(--border-radius);
-  margin: 0.25rem 0.5rem;
+  height: 46px;
+  line-height: 46px;
+  border-radius: 12px;
+  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 */
-  opacity: 1;
+  font-size: 14px;
+  font-weight: 500;
 }

 .menu-item-actions {
  display: none;
  align-items: center;
-  gap: 5px;
-  transition: opacity 0.2s ease;
-  opacity: 1;
+  gap: 4px;
+  padding: 4px;
+  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 */
-  width: 0; /* Ensure it takes no space */
+  opacity: 0;
+  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 {
-  padding: 20px;
-  text-align: center;
-  border-bottom: 1px solid #e0e0e0;
+.delete-icon:hover {
+  color: #f56c6c;
+  background: rgba(245, 108, 108, 0.12);
+  transform: scale(1.1);
 }

-.mobile-menu-header .username {
-  font-weight: bold;
-  font-size: 16px;
+.user-info {
+  display: flex;
+  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>
--- a/biji-qianduan/src/stores/user.js
+++ b/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'; // 假设你的API调用函数是这样组织的
+import { login as loginApi } from '../api/CommonApi';

 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;
-          // 你可能还需要一个接口来获取用户信息
-          // this.userInfo = await getUserInfo();
+          if (response.userInfo) {
+            this.userInfo = response.userInfo;
+          }
          return true;
        }
        return false;
--- a/docker/.env
+++ b/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
+JWT_SECRET=eW91ci1zdXBlci1zZWN1cmUtand0LXNlY3JldC1rZXktZm9yLXByb2R1Y3Rpb24tdXNlLW9ubHk=