Skip to main content

前端开发指南

环境准备​

# 安装依赖（从项目根目录）
npm install

# 启动前端开发服务器
npm -w frontend run dev
# 或
npm run dev:frontend

前端运行在 http://localhost:5173，API 请求通过 Vite 代理转发到后端。

目录结构​

apps/frontend/
├── src/
│   ├── components/      # 通用 UI 组件
│   ├── editor/          # React Flow 工作流编辑器
│   ├── dashboard/       # 项目管理仪表盘
│   ├── assistant/       # LLM 对话助手
│   ├── api/             # API 请求封装
│   ├── hooks/           # 自定义 React Hooks
│   ├── stores/          # Zustand 状态管理
│   ├── i18n/            # 国际化配置
│   └── test/            # 测试配置
├── public/
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json

开发规范​

组件开发​

  • 使用函数组件 + Hooks
  • 使用 TypeScript 严格类型
  • 组件文件使用 PascalCase 命名
  • 使用 Tailwind CSS 编写样式

状态管理​

使用 Zustand 管理全局状态：

import { create } from 'zustand';

interface ProjectStore {
  currentProject: Project | null;
  setCurrentProject: (project: Project) => void;
}

const useProjectStore = create<ProjectStore>((set) => ({
  currentProject: null,
  setCurrentProject: (project) => set({ currentProject: project }),
}));

API 请求​

API 封装在 src/api/ 目录，使用 fetch + 统一错误处理：

const response = await fetch('/api/projects', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
  },
});

路径别名​

@/ 映射到 ./src/：

import { Button } from '@/components/Button';

常用命令​

npm -w frontend run dev        # 启动开发服务器
npm -w frontend run build      # 构建生产版本
npm -w frontend run lint       # ESLint 检查
npm -w frontend test           # Vitest 测试
npm -w frontend run test:watch # 测试监听模式

构建与部署​

# 构建生产版本
npm -w frontend run build

# 输出到 apps/frontend/dist/
# 使用 nginx 或其他静态服务器托管