ikmkj/biji

Files

黄孟 b22fc82432 feat(frontend): 实现主题切换功能并优化全局样式

- 在 App.vue 中添加主题切换按钮和逻辑
- 新增 global.css 和 theme.css 文件，统一全局样式和主题样式
- 更新 LoginPage、RegisterPage 和 HomePage 的样式，适配新主题
- 实现暗黑模式下的样式调整

2025-07-31 10:38:51 +08:00

项目开发与美化计划

本计划旨在为您的笔记项目提供一个清晰、分步走的开发与美化路线图。

第一阶段：核心体验提升 - UI美化与交互优化 (已完成)

这个阶段的目标是全面提升应用的颜值和易用性。

任务1.1：引入Element Plus UI库 (已完成)
- 前端: 安装并配置 Element Plus，并使用其组件重构了页面。
任务1.2：响应式布局 (已完成)
- 前端: 使用 Element Plus 的栅格系统和CSS媒体查询实现了响应式布局，确保应用在不同尺寸的设备上都能良好显示。
任务1.3：升级Markdown编辑器 (已完成)
- 前端: 集成了功能更强大的 vditor 编辑器，替换了原有的组件，并确保了内容的双向绑定和图片的上传功能。
(可选任务)任务：重构前端页面
- 前端: 重新对整个页面进行重构，使其更简洁、易用。

这个阶段的目标是补齐核心功能，并确保应用的安全性。

任务2.1：实现用户认证与授权 (已完成)
- 后端: 使用 Spring Security 和 JWT 实现了一套完整的认证授权系统。
  - 实现了 UserDetailsService 来加载用户信息。
  - 创建了 JWT 工具类，用于生成和验证 Token。
  - 创建了登录接口，成功后返回 JWT。
  - 创建了一个 JWT 过滤器，用于保护需要授权的接口。
- 前端: 实现了登录、注册页面和 Token 管理。
  - 创建了登录和注册页面组件。
  - 使用 Pinia 进行状态管理，并将获取到的 JWT 存储在 localStorage 中。
  - 封装了 axios，在请求头中自动添加 Authorization 字段。
  - 实现了登出功能。

这个阶段我们为应用增加了更多有价值的功能。

任务3.1：实现笔记名模糊搜索 (已完成)
- 后端: 在 MarkdownController 中添加了 /search 接口，使用 Mybatis-Plus 的 like 查询实现标题的模糊搜索。
- 前端: 在主页添加了搜索框，并实现了调用后端接口进行搜索和展示结果的逻辑。
~~任务3.2：实现笔记分享~~ (已取消)
- 根据您的要求，此任务已取消。

这个阶段我们进一步强化了应用的核心功能，提升了用户体验。

任务4.1：实现编辑/新增时自动保存 (已完成)
- 前端: 在 HomePage.vue 中，通过监听编辑器内容变化并结合防抖（debounce）技术，实现了在用户停止输入2秒后自动保存笔记的功能，并提供了实时的保存状态提示。
任务4.2：实现修改文件名和分类名 (已完成)
- 后端:
  - 在 GroupingController 中利用现有接口实现了修改分类名称的功能。
  - 在 MarkdownController 中添加了新的 PUT 接口，用于修改笔记标题。
- 前端:
  - 在分类和笔记标题旁添加了编辑图标。
  - 实现了点击编辑图标后弹出对话框，让用户可以输入新名称并保存的功能。
任务4.3：实现单文件导入/导出 (已完成)
- 后端: 删除了原有的批量导入/导出接口。
- 前端:
  - 移除了批量导入/导出的UI。
  - 在笔记预览页面添加了“导出为.md”按钮，可将当前笔记内容直接下载为 Markdown 文件。
  - 优化了“上传Markdown”功能，用户上传文件后会弹出对话框，让用户选择要导入的分类。