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