creative_studio/frontend

Creative Studio Frontend

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

快速开始

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

安装依赖

npm install

配置环境变量

创建 .env.local 文件：

VITE_API_BASE_URL=http://localhost:8000

启动开发服务器

npm run dev

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

构建生产版本

npm run build

技术栈

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

主要功能

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

开发指南

完整的开发指南请参考 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

可用脚本

# 启动开发服务器
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 组件？

import { Button, Table } from 'antd';

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

如何进行状态管理？

使用 Zustand：

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