实现记事本功能

2026-06-17 17:49:59 +08:00
parent 673b84a0b3
commit 4e1b30b3cc
14 changed files with 1383 additions and 214 deletions
@@ -0,0 +1,247 @@
+# 记事本模块使用说明
+
+## 功能概述
+
+这是一个完整的记事本应用模块，支持富文本编辑、笔记管理等功能。
+
+## 目录结构
+
+```
+notebook/
+├── index.vue                  # 主页面（列表+编辑器）
+├── components/
+│   ├── edit.vue              # 编辑器组件
+│   └── WangEditor.vue        # WangEditor富文本编辑器封装
+└── README.md                 # 说明文档
+```
+
+## 数据库
+
+### 表名
+`yz_platform_notebook`
+
+### 表结构
+- `id` - 主键ID
+- `title` - 笔记标题
+- `content` - 笔记内容（HTML格式）
+- `user_id` - 创建用户ID
+- `user_name` - 创建用户名
+- `is_deleted` - 是否删除（0-否 1-是）
+- `create_time` - 创建时间
+- `update_time` - 更新时间
+- `delete_time` - 删除时间
+
+### SQL文件位置
+`sql/yz_platform_notebook.sql`
+
+## 后端接口
+
+### 模型文件
+`go/models/platform_notebook.go`
+
+### 控制器文件
+`go/controllers/platform_notebook.go`
+
+### API端点
+
+1. **获取笔记列表**
+   - URL: `GET /platform/notebook/list`
+   - 参数: 
+     - `page`: 页码（默认1）
+     - `pageSize`: 每页数量（默认20，最大100）
+     - `keyword`: 搜索关键词（可选）
+   - 返回: 笔记列表和总数
+
+2. **获取笔记详情**
+   - URL: `GET /platform/notebook/detail/:id`
+   - 参数: `id` - 笔记ID
+   - 返回: 笔记详细信息
+
+3. **创建笔记**
+   - URL: `POST /platform/notebook/create`
+   - 参数:
+     ```json
+     {
+       "title": "笔记标题",
+       "content": "<p>笔记内容</p>"
+     }
+     ```
+   - 返回: 创建的笔记信息
+
+4. **更新笔记**
+   - URL: `POST /platform/notebook/update/:id`
+   - 参数:
+     ```json
+     {
+       "title": "更新的标题",
+       "content": "<p>更新的内容</p>"
+     }
+     ```
+   - 返回: 更新后的笔记信息
+
+5. **删除笔记**
+   - URL: `DELETE /platform/notebook/delete/:id`
+   - 参数: `id` - 笔记ID
+   - 返回: 删除结果
+
+## 前端API
+
+### API文件
+`platform/src/api/notebook.js`
+
+### 方法说明
+
+```javascript
+// 获取笔记列表
+getNotebookList({ page, pageSize, keyword })
+
+// 获取笔记详情
+getNotebookDetail(id)
+
+// 创建笔记
+createNotebook({ title, content })
+
+// 更新笔记
+updateNotebook(id, { title, content })
+
+// 删除笔记
+deleteNotebook(id)
+```
+
+## 使用步骤
+
+### 1. 初始化数据库
+```bash
+# 在MySQL中执行SQL文件
+mysql -u用户名 -p数据库名 < sql/yz_platform_notebook.sql
+```
+
+### 2. 启动后端服务
+后端已自动注册模型和路由，直接启动即可：
+```bash
+cd go
+go run main.go
+```
+
+### 3. 访问前端
+在浏览器中访问笔记本页面（路由需要在菜单中配置）
+
+## 功能特性
+
+### 列表功能
+- ✅ 显示所有笔记
+- ✅ 搜索笔记（按标题）
+- ✅ 创建新笔记
+- ✅ 删除笔记
+- ✅ 查看笔记预览
+- ✅ 显示更新时间
+
+### 编辑器功能
+- ✅ 富文本编辑（基于WangEditor）
+- ✅ 标题编辑
+- ✅ 内容编辑
+- ✅ 保存笔记
+- ✅ 自动识别新建/编辑模式
+- ✅ 加载状态显示
+
+### WangEditor支持的功能
+- 文本样式（加粗、斜体、下划线等）
+- 标题（H1-H6）
+- 引用
+- 代码块
+- 有序/无序列表
+- 表格
+- 链接
+- 图片上传（需配置上传接口）
+- 视频嵌入
+
+## 权限说明
+
+- 所有接口都需要平台用户登录（JWT Token验证）
+- 每个用户只能查看、编辑、删除自己创建的笔记
+- 删除操作为软删除，数据仍保留在数据库中
+
+## 扩展功能（可选）
+
+如需添加以下功能，可以扩展：
+
+1. **笔记分类**
+   - 添加分类表和分类字段
+   - 支持笔记分类管理
+
+2. **笔记标签**
+   - 添加标签表和关联表
+   - 支持多标签筛选
+
+3. **笔记分享**
+   - 添加分享链接生成功能
+   - 支持公开/私密设置
+
+4. **笔记导出**
+   - 支持导出为PDF
+   - 支持导出为Markdown
+
+5. **版本历史**
+   - 记录笔记的修改历史
+   - 支持版本回退
+
+6. **协作编辑**
+   - 支持多人协作编辑
+   - 实时同步功能
+
+## 注意事项
+
+1. 图片上传需要配置文件上传接口
+2. 富文本内容存储为HTML格式，注意XSS防护
+3. 数据库content字段使用longtext类型，支持大容量内容
+4. 建议定期清理软删除的数据
+5. 生产环境建议添加内容审核机制
+
+## 技术栈
+
+- **前端**: Vue 3 + Element Plus + WangEditor
+- **后端**: Go + Beego + MySQL
+- **编辑器**: WangEditor 5.x
+
+## 开发调试
+
+### 前端调试
+```bash
+cd platform
+npm run dev
+```
+
+### 后端调试
+```bash
+cd go
+go run main.go
+```
+
+### 查看API请求
+打开浏览器开发者工具 -> Network 标签页，查看API请求和响应
+
+## 问题排查
+
+1. **笔记列表为空**
+   - 检查数据库表是否创建成功
+   - 检查用户是否已登录
+   - 查看浏览器Console是否有错误
+
+2. **保存失败**
+   - 检查JWT Token是否有效
+   - 检查标题是否为空
+   - 查看后端日志
+
+3. **编辑器显示异常**
+   - 检查WangEditor是否正确安装
+   - 查看浏览器Console错误信息
+   - 检查CSS样式是否正确加载
+
+## 更新日志
+
+### v1.0.0 (2024)
+- ✅ 完成基础功能
+- ✅ 支持笔记CRUD操作
+- ✅ 集成WangEditor富文本编辑器
+- ✅ 响应式设计支持
+- ✅ 暗色模式支持