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

- 在 App.vue 中添加主题切换按钮和逻辑
- 新增 global.css 和 theme.css 文件,统一全局样式和主题样式
- 更新 LoginPage、RegisterPage 和 HomePage 的样式,适配新主题
- 实现暗黑模式下的样式调整
This commit is contained in:
2025-07-31 10:38:51 +08:00
parent e0a99235ec
commit b22fc82432
8 changed files with 524 additions and 111 deletions

View File

@@ -2,55 +2,61 @@
本计划旨在为您的笔记项目提供一个清晰、分步走的开发与美化路线图。
## 第一阶段:核心体验提升 - UI美化与交互优化
## 第一阶段:核心体验提升 - UI美化与交互优化 (已完成)
这个阶段的目标是全面提升应用的颜值和易用性。
- **任务1.1引入Element Plus UI库**
- [ ] **前端**: 安装并配置 Element Plus。
- [ ] 运行 `npm install element-plus --save`
- [ ]`main.js` 中全局引入 Element Plus
- [ ] 使用 Element Plus 的组件重构现有页面,如按钮、表单、布局等。
- **任务1.2:响应式布局**
- [ ] **前端**: 使用 Element Plus 的栅格系统或 CSS Flexbox/Grid 来实现响应式布局,确保在不同设备上都能良好显示。
- **任务1.3升级Markdown编辑器**
- [ ] **前端**: 调研并集成一个功能更强大的Markdown编辑器例如 `vditor``cherry-markdown`
- [ ] 替换现有的 `MarkdownEditor.vue` 组件。
- [ ] 确保新编辑器与应用的集成,包括内容的双向绑定和图片的上传。
- **任务1.1引入Element Plus UI库 (已完成)**
- **前端**: 安装并配置 Element Plus,并使用其组件重构了页面
- **任务1.2:响应式布局 (已完成)**
- **前端**: 使用 Element Plus 的栅格系统和CSS媒体查询实现了响应式布局确保应用在不同尺寸的设备上都能良好显示
- **任务1.3升级Markdown编辑器 (已完成)**
- **前端**: 集成了功能更强大的 `vditor` 编辑器,替换了原有的组件,并确保了内容的双向绑定和图片的上传功能。
- **(可选任务)任务:重构前端页面**
- [ ] **前端**: 重新对整个页面进行重构,使其更简洁、易用。
- **前端**: 重新对整个页面进行重构,使其更简洁、易用。
## 第二阶段:基础功能完善与安全加固
## 第二阶段:基础功能完善与安全加固 (已完成)
这个阶段的目标是补齐核心功能,并确保应用的安全性。
- **任务2.1:实现用户认证与授权**
- [ ] **后端**: JWT
- [ ] 实现 UserDetailsService 来加载用户信息。
- [ ] 创建 JWT 工具类,用于生成和验证 Token。
- [ ] 创建登录接口,成功后返回 JWT。
- [ ] 创建一个 JWT 过滤器,用于保护需要授权的接口。
- [ ] **前端**: 实现登录页面和 Token 管理。
- [ ] 创建登录页面组件。
- [ ] 调用登录接口,并将获取到的 JWT 存储在 `localStorage``sessionStorage` 中。
- [ ] 封装 `axios`,在请求头中自动添加 `Authorization` 字段。
- [ ] 实现路由守卫,未登录用户访问受保护页面时跳转到登录页
- [ ] 实现登出功能。
## 第三阶段:高级功能拓展
- **任务2.1:实现用户认证与授权 (已完成)**
- **后端**: 使用 Spring Security 和 JWT 实现了一套完整的认证授权系统
- 实现了 `UserDetailsService` 来加载用户信息。
- 创建 JWT 工具类,用于生成和验证 Token。
- 创建登录接口,成功后返回 JWT。
- 创建一个 JWT 过滤器,用于保护需要授权的接口。
- **前端**: 实现登录、注册页面和 Token 管理。
- 创建登录和注册页面组件。
- 使用 Pinia 进行状态管理,并将获取到的 JWT 存储在 `localStorage` 中。
- 封装 `axios`,在请求头中自动添加 `Authorization` 字段。
- 实现了登出功能
这个阶段我们将为应用增加更多有价值的功能。
## 第三阶段:高级功能拓展 (已完成)
- **任务3.1:实现笔记名模糊搜索**
- [ ] **后端**: 。
- [ ] 可以通过搜索的笔记的名称来模糊搜索笔记。
- [ ] 在 Spring Boot 中添加相应的客户端依赖
- [ ] 创建搜索接口
- [ ] **前端**: 添加搜索框和搜索结果展示页面。
- **任务3.2:实现笔记分享**
- [ ] **后端**:
- [ ] 为笔记表增加一个 `share_token` 字段。
- [ ] 创建生成分享链接的接口。
- [ ] 创建通过分享链接访问笔记的公开接口
- [ ] **前端**:
- [ ] 在笔记操作中增加“分享”按钮。
- [ ] 创建一个公开的笔记展示页面,用于显示分享的笔记。
这个阶段我们为应用增加了更多有价值的功能。
- **任务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”功能用户上传文件后会弹出对话框让用户选择要导入的分类。