157 lines
2.9 KiB
Markdown
157 lines
2.9 KiB
Markdown
# 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
|