179 lines
3.7 KiB
Markdown
179 lines
3.7 KiB
Markdown
|
# PromptForge 安装和设置指南
|
|||
|
|
|
|||
|
|
## 系统要求
|
|||
|
|
|
|||
|
|
在开始之前，请确保您的系统满足以下要求：
|
|||
|
|
|
|||
|
|
- **Node.js 18+** - [下载地址](https://nodejs.org/)
|
|||
|
|
- **npm 或 yarn** - 通常随Node.js一起安装
|
|||
|
|
|
|||
|
|
## 安装步骤
|
|||
|
|
|
|||
|
|
### 1. 安装 Node.js
|
|||
|
|
|
|||
|
|
访问 [Node.js 官网](https://nodejs.org/) 下载并安装最新的LTS版本。
|
|||
|
|
|
|||
|
|
安装完成后，验证安装：
|
|||
|
|
```bash
|
|||
|
|
node --version
|
|||
|
|
npm --version
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 克隆或下载项目
|
|||
|
|
|
|||
|
|
如果您有Git：
|
|||
|
|
```bash
|
|||
|
|
git clone <repository-url>
|
|||
|
|
cd promptforge
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
或者直接下载项目文件到本地目录。
|
|||
|
|
|
|||
|
|
### 3. 安装依赖
|
|||
|
|
|
|||
|
|
在项目根目录下运行：
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 启动开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
应用将在 http://localhost:3000 启动。
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
promptforge/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── app/ # Next.js 页面
|
|||
|
|
│ │ ├── page.tsx # 首页
|
|||
|
|
│ │ ├── templates/ # 模板库
|
|||
|
|
│ │ ├── editor/ # 编辑器
|
|||
|
|
│ │ └── layout.tsx # 根布局
|
|||
|
|
│ ├── components/ # React 组件
|
|||
|
|
│ │ ├── editor/ # 编辑器组件
|
|||
|
|
│ │ ├── layout/ # 布局组件
|
|||
|
|
│ │ └── providers.tsx # 状态管理
|
|||
|
|
│ ├── lib/ # 工具函数
|
|||
|
|
│ ├── store/ # Zustand 状态
|
|||
|
|
│ └── types/ # TypeScript 类型
|
|||
|
|
├── package.json # 项目配置
|
|||
|
|
├── tailwind.config.js # Tailwind 配置
|
|||
|
|
├── tsconfig.json # TypeScript 配置
|
|||
|
|
└── README.md # 项目说明
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### ✅ 已完成功能
|
|||
|
|
|
|||
|
|
1. **完整的项目架构**
|
|||
|
|
- Next.js 14 + TypeScript
|
|||
|
|
- Tailwind CSS 样式系统
|
|||
|
|
- Zustand 状态管理
|
|||
|
|
- 响应式设计
|
|||
|
|
|
|||
|
|
2. **核心页面**
|
|||
|
|
- 首页：展示平台特色和精选模板
|
|||
|
|
- 模板库：分类浏览、搜索、排序
|
|||
|
|
- 编辑器：结构化提示词编辑
|
|||
|
|
- 测试台：交互式测试界面
|
|||
|
|
- 部署面板：代码生成
|
|||
|
|
|
|||
|
|
3. **编辑器功能**
|
|||
|
|
- 结构化表单编辑
|
|||
|
|
- 变量管理系统
|
|||
|
|
- 约束条件管理
|
|||
|
|
- 实时预览
|
|||
|
|
- 代码生成
|
|||
|
|
|
|||
|
|
4. **UI/UX 设计**
|
|||
|
|
- 深色模式优先
|
|||
|
|
- 现代化界面
|
|||
|
|
- 流畅动画
|
|||
|
|
- 移动端适配
|
|||
|
|
|
|||
|
|
### 🚧 待完善功能
|
|||
|
|
|
|||
|
|
1. **后端集成**
|
|||
|
|
- API 路由实现
|
|||
|
|
- 数据库连接
|
|||
|
|
- 用户认证
|
|||
|
|
|
|||
|
|
2. **高级功能**
|
|||
|
|
- 真实的AI模型调用
|
|||
|
|
- 批量测试功能
|
|||
|
|
- 模板分享和社区
|
|||
|
|
|
|||
|
|
3. **部署优化**
|
|||
|
|
- 生产环境配置
|
|||
|
|
- 性能优化
|
|||
|
|
- SEO 优化
|
|||
|
|
|
|||
|
|
## 开发指南
|
|||
|
|
|
|||
|
|
### 添加新功能
|
|||
|
|
|
|||
|
|
1. 在 `src/types/` 中定义类型
|
|||
|
|
2. 在 `src/store/` 中添加状态管理
|
|||
|
|
3. 在 `src/components/` 中创建组件
|
|||
|
|
4. 在 `src/app/` 中添加页面路由
|
|||
|
|
|
|||
|
|
### 样式指南
|
|||
|
|
|
|||
|
|
- 使用 Tailwind CSS 类名
|
|||
|
|
- 遵循设计系统规范
|
|||
|
|
- 支持深色/浅色模式
|
|||
|
|
- 确保响应式设计
|
|||
|
|
|
|||
|
|
### 代码规范
|
|||
|
|
|
|||
|
|
- 使用 TypeScript
|
|||
|
|
- 遵循 ESLint 规则
|
|||
|
|
- 编写清晰的注释
|
|||
|
|
- 保持组件简洁
|
|||
|
|
|
|||
|
|
## 故障排除
|
|||
|
|
|
|||
|
|
### 常见问题
|
|||
|
|
|
|||
|
|
1. **npm install 失败**
|
|||
|
|
- 检查 Node.js 版本
|
|||
|
|
- 清除 npm 缓存：`npm cache clean --force`
|
|||
|
|
- 删除 node_modules 重新安装
|
|||
|
|
|
|||
|
|
2. **开发服务器启动失败**
|
|||
|
|
- 检查端口是否被占用
|
|||
|
|
- 确认所有依赖已安装
|
|||
|
|
- 查看控制台错误信息
|
|||
|
|
|
|||
|
|
3. **样式不生效**
|
|||
|
|
- 确认 Tailwind CSS 配置正确
|
|||
|
|
- 检查类名拼写
|
|||
|
|
- 重启开发服务器
|
|||
|
|
|
|||
|
|
## 下一步计划
|
|||
|
|
|
|||
|
|
1. **完善核心功能**
|
|||
|
|
- 实现真实的AI API调用
|
|||
|
|
- 添加用户认证系统
|
|||
|
|
- 完善模板管理功能
|
|||
|
|
|
|||
|
|
2. **性能优化**
|
|||
|
|
- 代码分割和懒加载
|
|||
|
|
- 图片优化
|
|||
|
|
- 缓存策略
|
|||
|
|
|
|||
|
|
3. **部署准备**
|
|||
|
|
- 生产环境配置
|
|||
|
|
- CI/CD 流程
|
|||
|
|
- 监控和分析
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
如有问题，请查看 [README.md](README.md) 或提交 Issue。
|