# Creative Studio Frontend

基于 React 18 + TypeScript + Vite 的前端应用。

## 快速开始

详细的快速启动指南请参考项目根目录的 [README.md](../README.md)。

### 安装依赖

```bash
npm install
```

### 配置环境变量

创建 `.env.local` 文件：

```env
VITE_API_BASE_URL=http://localhost:8000
```

### 启动开发服务器

```bash
npm run dev
```

应用将运行在 `http://localhost:5173`

### 构建生产版本

```bash
npm run build
```

## 技术栈

- React 18
- TypeScript
- Vite
- Ant Design 5
- Zustand (状态管理)
- React Router
- Axios
- Tailwind CSS

## 主要功能

- Skill 管理界面
- 项目管理界面
- 记忆系统可视化
- 审核系统配置和结果展示
- 执行监控

## 开发指南

完整的开发指南请参考 [DEVELOPMENT_GUIDE.md](../DEVELOPMENT_GUIDE.md)。

## 项目结构

```
frontend/
├── src/
│   ├── pages/             # 页面组件
│   │   ├── HomePage.tsx           # 首页
│   │   ├── SkillManagement.tsx    # Skill 管理
│   │   ├── AgentManagement.tsx    # Agent 管理
│   │   ├── ProjectList.tsx        # 项目列表
│   │   ├── ProjectCreate.tsx      # 创建项目
│   │   ├── ProjectDetail.tsx      # 项目详情
│   │   ├── MemorySystem.tsx       # 记忆系统
│   │   ├── ReviewConfig.tsx       # 审核配置
│   │   └── ReviewResults.tsx      # 审核结果
│   │
│   ├── components/        # 通用组件
│   ├── stores/            # Zustand 状态管理
│   ├── services/          # API 服务
│   ├── hooks/             # 自定义 Hooks
│   ├── types/             # TypeScript 类型
│   └── utils/             # 工具函数
│
├── index.html
├── package.json
├── vite.config.ts
└── tsconfig.json
```

## 可用脚本

```bash
# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 运行测试
npm run test

# 代码检查
npm run lint
```

## 环境变量

| 变量名 | 说明 | 默认值 |
|-------|------|-------|
| `VITE_API_BASE_URL` | 后端 API 地址 | `http://localhost:8000` |

## 常见问题

### 如何添加新页面？

1. 在 `src/pages/` 下创建页面组件
2. 在 `src/App.tsx` 中添加路由
3. 在导航菜单中添加链接

### 如何使用 Ant Design 组件？

```tsx
import { Button, Table } from 'antd';

export function MyComponent() {
  return (
    <div>
      <Button type="primary">点击</Button>
    </div>
  );
}
```

### 如何进行状态管理？

使用 Zustand：

```typescript
import { create } from 'zustand';

interface MyStore {
  count: number;
  increment: () => void;
}

export const useMyStore = create<MyStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}));
```

## 许可证

MIT License