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。
|