188 lines
4.8 KiB
Markdown
188 lines
4.8 KiB
Markdown
|
# 模板管理功能完善
|
||
|
|
|
||
|
|
## 🎯 功能概述
|
||
|
|
|
||
|
|
我们已经完善了 PromptForge 的模板管理功能，包括创建、编辑、分享和批量操作等核心功能。
|
||
|
|
|
||
|
|
## ✨ 主要功能
|
||
|
|
|
||
|
|
### 1. 模板创建与编辑
|
||
|
|
|
||
|
|
#### 编辑器页面 (`/editor`)
|
||
|
|
- **智能初始化**: 支持创建新模板或编辑现有模板
|
||
|
|
- **实时保存**: 自动保存到数据库，支持保存状态提示
|
||
|
|
- **多标签页**: 编辑器、预览、变量、测试、部署五个功能模块
|
||
|
|
- **分享功能**: 一键生成分享链接
|
||
|
|
|
||
|
|
#### 核心特性
|
||
|
|
- 支持从 URL 参数加载现有模板 (`/editor?template=id`)
|
||
|
|
- 自动关联当前用户为作者
|
||
|
|
- 实时保存状态反馈
|
||
|
|
- 分享链接生成和复制
|
||
|
|
|
||
|
|
### 2. 模板管理页面 (`/templates/manage`)
|
||
|
|
|
||
|
|
#### 批量操作功能
|
||
|
|
- **多选模式**: 支持选择多个模板进行批量操作
|
||
|
|
- **批量删除**: 一次性删除多个选中的模板
|
||
|
|
- **批量分享**: 生成多个模板的分享链接
|
||
|
|
- **视觉反馈**: 选中状态高亮显示
|
||
|
|
|
||
|
|
#### 搜索和筛选
|
||
|
|
- **实时搜索**: 按标题和描述搜索模板
|
||
|
|
- **分类筛选**: 按模板分类进行筛选
|
||
|
|
- **状态显示**: 显示模板的公开/私有状态
|
||
|
|
|
||
|
|
#### 单个模板操作
|
||
|
|
- **查看**: 跳转到模板详情页
|
||
|
|
- **编辑**: 在编辑器中打开模板
|
||
|
|
- **分享**: 生成分享链接
|
||
|
|
- **删除**: 删除模板（带确认对话框）
|
||
|
|
|
||
|
|
### 3. 模板详情页面 (`/templates/[id]`)
|
||
|
|
|
||
|
|
#### 信息展示
|
||
|
|
- **完整信息**: 显示模板的所有详细信息
|
||
|
|
- **统计信息**: 使用次数、评分、状态等
|
||
|
|
- **结构化展示**: 角色、任务、上下文、约束、变量等
|
||
|
|
|
||
|
|
#### 操作功能
|
||
|
|
- **分享**: 生成分享链接
|
||
|
|
- **复制**: 复制其他用户的公开模板到自己的账户
|
||
|
|
- **编辑**: 编辑自己的模板
|
||
|
|
- **删除**: 删除自己的模板
|
||
|
|
|
||
|
|
### 4. API 路由
|
||
|
|
|
||
|
|
#### 核心 API
|
||
|
|
- `POST /api/templates` - 创建/更新模板
|
||
|
|
- `GET /api/templates` - 获取模板列表
|
||
|
|
- `GET /api/templates/[id]` - 获取单个模板
|
||
|
|
- `DELETE /api/templates/[id]` - 删除模板
|
||
|
|
|
||
|
|
#### 新增 API
|
||
|
|
- `PATCH /api/templates/[id]/share` - 切换模板公开状态
|
||
|
|
- `POST /api/templates/[id]/copy` - 复制模板
|
||
|
|
|
||
|
|
## 🔧 技术实现
|
||
|
|
|
||
|
|
### 前端技术栈
|
||
|
|
- **Next.js 14**: App Router 架构
|
||
|
|
- **React 18**: Hooks 和状态管理
|
||
|
|
- **TypeScript**: 类型安全
|
||
|
|
- **Tailwind CSS**: 响应式设计
|
||
|
|
- **Lucide React**: 图标库
|
||
|
|
|
||
|
|
### 后端技术栈
|
||
|
|
- **Next.js API Routes**: 后端 API
|
||
|
|
- **MySQL**: 数据库存储
|
||
|
|
- **mysql2/promise**: 数据库连接
|
||
|
|
|
||
|
|
### 状态管理
|
||
|
|
- **React Context**: 用户认证状态
|
||
|
|
- **useState/useEffect**: 组件状态管理
|
||
|
|
- **Zustand**: 全局状态管理（可选）
|
||
|
|
|
||
|
|
## 🎨 用户体验
|
||
|
|
|
||
|
|
### 响应式设计
|
||
|
|
- 支持桌面端和移动端
|
||
|
|
- 自适应布局和组件
|
||
|
|
|
||
|
|
### 交互反馈
|
||
|
|
- 加载状态指示
|
||
|
|
- 操作成功/失败提示
|
||
|
|
- 确认对话框
|
||
|
|
- 实时状态更新
|
||
|
|
|
||
|
|
### 无障碍支持
|
||
|
|
- 语义化 HTML
|
||
|
|
- 键盘导航支持
|
||
|
|
- 屏幕阅读器友好
|
||
|
|
|
||
|
|
## 📱 功能流程
|
||
|
|
|
||
|
|
### 创建模板流程
|
||
|
|
1. 访问 `/editor` 页面
|
||
|
|
2. 填写模板信息（标题、分类、角色、任务等）
|
||
|
|
3. 添加变量和约束条件
|
||
|
|
4. 预览和测试模板
|
||
|
|
5. 保存到数据库
|
||
|
|
6. 可选择分享模板
|
||
|
|
|
||
|
|
### 编辑模板流程
|
||
|
|
1. 在管理页面点击"编辑"按钮
|
||
|
|
2. 或直接访问 `/editor?template=id`
|
||
|
|
3. 修改模板内容
|
||
|
|
4. 保存更改
|
||
|
|
|
||
|
|
### 分享模板流程
|
||
|
|
1. 点击"分享"按钮
|
||
|
|
2. 系统生成分享链接
|
||
|
|
3. 复制链接分享给他人
|
||
|
|
|
||
|
|
### 复制模板流程
|
||
|
|
1. 访问其他用户的公开模板
|
||
|
|
2. 点击"复制"按钮
|
||
|
|
3. 系统创建副本并跳转到新模板
|
||
|
|
|
||
|
|
## 🔒 权限控制
|
||
|
|
|
||
|
|
### 模板所有权
|
||
|
|
- 只有模板作者可以编辑和删除
|
||
|
|
- 其他用户可以查看和复制公开模板
|
||
|
|
- 私有模板只能被作者访问
|
||
|
|
|
||
|
|
### 数据安全
|
||
|
|
- 用户认证验证
|
||
|
|
- API 路由权限检查
|
||
|
|
- 数据库查询权限控制
|
||
|
|
|
||
|
|
## 🚀 未来扩展
|
||
|
|
|
||
|
|
### 计划功能
|
||
|
|
- 模板版本控制
|
||
|
|
- 模板评分和评论系统
|
||
|
|
- 模板标签和分类管理
|
||
|
|
- 模板使用统计和分析
|
||
|
|
- 模板导入/导出功能
|
||
|
|
- 团队协作功能
|
||
|
|
|
||
|
|
### 性能优化
|
||
|
|
- 分页加载
|
||
|
|
- 虚拟滚动
|
||
|
|
- 缓存优化
|
||
|
|
- 图片懒加载
|
||
|
|
|
||
|
|
## 📝 使用说明
|
||
|
|
|
||
|
|
### 开发者
|
||
|
|
1. 确保数据库连接正常
|
||
|
|
2. 运行 `npm run dev` 启动开发服务器
|
||
|
|
3. 访问 `http://localhost:3000` 查看应用
|
||
|
|
|
||
|
|
### 用户
|
||
|
|
1. 注册/登录账户
|
||
|
|
2. 访问模板库浏览现有模板
|
||
|
|
3. 使用编辑器创建新模板
|
||
|
|
4. 在管理页面管理自己的模板
|
||
|
|
5. 分享和复制模板
|
||
|
|
|
||
|
|
## 🐛 故障排除
|
||
|
|
|
||
|
|
### 常见问题
|
||
|
|
1. **模板保存失败**: 检查数据库连接和用户认证
|
||
|
|
2. **分享链接无效**: 确认模板 ID 正确
|
||
|
|
3. **复制功能异常**: 检查模板是否公开
|
||
|
|
4. **批量操作失败**: 确认选择了模板
|
||
|
|
|
||
|
|
### 调试方法
|
||
|
|
1. 检查浏览器控制台错误
|
||
|
|
2. 查看服务器日志
|
||
|
|
3. 验证数据库连接
|
||
|
|
4. 测试 API 端点
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
这个完善的模板管理系统为用户提供了完整的模板生命周期管理，从创建到分享，从编辑到删除，支持个人和协作使用场景。
|