ikmkj/biji

Files

ikmkj 9c232c1586 docs(development_plan): 更新开发计划文档

- 补充了后端接口返回数据结构的改动说明
- 更新了前端页面的数据显示逻辑
- 添加了关于系统表和注册码功能的建议

2025-08-01 00:15:19 +08:00

7.9 KiB

Raw Blame History

项目开发与美化计划

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

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

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

任务1.1：引入Element Plus UI库 (已完成)
- 前端: 安装并配置 Element Plus，并使用其组件重构了页面。
任务1.2：响应式布局 (已完成)
- 前端: 使用 Element Plus 的栅格系统和CSS媒体查询实现了响应式布局，确保应用在不同尺寸的设备上都能良好显示。
任务1.3：升级Markdown编辑器 (已完成)
- 前端: 集成了功能更强大的 vditor 编辑器，替换了原有的组件，并确保了内容的双向绑定和图片的上传功能。
(可选任务)任务：重构前端页面 (已完成)
- 前端: 对所有核心页面（登录、注册、主页）进行了全面的UI和UX重构。
  - 主题系统: 建立了基于CSS变量的动态主题系统，支持浅色/深色模式一键切换，并能记忆用户偏好。
  - 视觉美化: 统一了应用的视觉风格，包括颜色、字体、间距和阴影，使界面更具现代感和层次感。
  - 交互动效: 为按钮、列表、卡片和对话框等元素添加了平滑的过渡动画和即时视觉反馈（如悬停、点击效果），提升了操作的流畅度和愉悦感。
  - 性能优化: 优先使用CSS动画以利用硬件加速，确保了动态效果的流畅性。

第二阶段：基础功能完善与安全加固 (已完成)

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

任务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”功能，用户上传文件后会弹出对话框，让用户选择要导入的分类。

第五阶段：系统优化与BUG修复 (已完成)

这个阶段我们对系统进行了深入的优化和问题修复，提升了应用的稳定性和健壮性。

任务5.1：修复JWT安全漏洞 (已完成)
- 后端: 解决了因签名密钥长度不足而导致的安全风险。通过更新密钥并采用 jjwt 库的最佳实践重构了 JwtTokenUtil，确保了认证系统的安全性。
任务5.2：重构分类系统 (已完成)
- 前端: 彻底重构了分类的数据结构和UI，实现了支持无限层级的树状分类系统。使用级联选择器 (el-cascader) 优化了新建笔记和分类的体验。
任务5.3：修复笔记保存逻辑 (已完成)
- 后端: 重构了笔记保存的业务逻辑，将“新建”和“更新”操作统一到一个接口中，通过判断笔记ID是否存在来智能执行插入或更新，解决了数据重复创建的问题。
- 前端: 修复了新建笔记时，后续自动保存操作会重复创建记录的BUG。
任务5.4：修复Markdown预览问题 (已完成)
- 前端: 解决了Vditor预览时因DOM异步更新和数据处理不当导致的渲染崩溃及内容截断问题，确保了预览功能的稳定性。

第六阶段：首页体验优化与数据一致性重构 (已完成)

这个阶段我们专注于提升应用的初始加载体验，并对后端数据结构进行了重构，以确保前端UI的数据一致性。

任务6.1：优化首页默认视图 (已完成)
- 需求: 解决首页在未选择任何分类时显示空白的问题。
- 后端:
  - 新增了 /api/markdown/recent 接口，用于获取指定数量的、按修改时间倒序排列的笔记。
  - 修复了因 pom.xml 中 Mybatis-Plus 依赖版本号错误 (3.5.12 -> 3.5.7) 导致的编译失败和无法启动的问题。
  - 修复了因缺少 Mybatis-Plus 分页插件配置而导致的分页查询失效问题。
- 前端:
  - 在 HomePage.vue 的 onMounted 生命周期钩子中调用新接口，实现了在应用加载时默认显示最新的12篇笔记。
  - 修改了“我的笔记”标题的点击事件，使其恢复到显示最新笔记的默认视图。
任务6.2：实现数据驱动的分类名显示 (已完成)
- 需求: 解决首页“最近笔记”列表和分类筛选后列表均无法显示笔记所属分类名称的问题。
- 后端:
  - 创建了 MarkdownFileVO (View Object) 类，在 MarkdownFile 实体类的基础上增加了 groupingName 字段。
  - 使用 @Select 注解和原生 JOIN SQL 查询重构了 MarkdownFileMapper，创建了 selectRecentWithGrouping 和 selectByGroupingIdWithGrouping 两个新方法。
  - 全面更新了 MarkdownFileService 和 MarkdownController，将 /api/markdown/recent 和 /api/markdown/grouping/{groupingId} 两个接口的返回数据统一升级为包含分类名的 MarkdownFileVO 对象列表。
- 前端:
  - 修改了 HomePage.vue 中的笔记卡片模板，使其直接从每个笔记对象中获取并显示 groupingName 属性，取代了之前错误的全局变量方案。

能不能设计一个表，叫做系统表，设置一个值，只有登录的用户能控制注册按钮关闭和打开，并且注册需要一个注册码，只有已经登录过的用户才能生成一个注册码，注册码有效期只有一天。只有用户注册就把注册码和注册码过期时间从数据表中删除了，若是用户注册填的注册码过期了，就把注册码和注册码过期时间从数据表中删除。

7.9 KiB Raw Blame History Unescape Escape