loom/frontend

Loom Frontend

React 18 + Vite 5 + Ant Design 5 + Zustand + Tailwind（仅原子工具类）。

本地开发

pnpm i        # 或 npm i / yarn
pnpm dev      # http://localhost:5173（/api 代理到 localhost:8000）

构建

pnpm build
# 产物：frontend/dist，由 docker-compose frontend 服务托管

目录

src/
├── main.tsx              入口，挂载 ConfigProvider + Ant App
├── App.tsx               顶层 RouterProvider
├── router/               路由表 / 守卫
├── layouts/              BasicLayout（管理后台）、BlankLayout（登录）
├── pages/                页面（P2 起按模块补齐 19 页）
├── components/           公共业务组件
├── stores/               zustand（auth、menu、app）
├── api/                  axios 实例 + 业务 API
├── hooks/                useAuth / usePerm / usePageTable
├── utils/                token / tree / download
├── styles/               全局 css + AntD theme token
└── constants/            状态枚举 / 字典

设计原则

• 配色沿用原型（docs/原型agent_task_system_merged.html）：主色 #6366f1、深色 Sider #1e293b、浅灰背景 #f1f5f9。所有色值集中在 src/styles/tokens.ts。
• Tailwind 作为原子工具类：关闭 preflight、加 tw- 前缀；不覆盖 AntD。
• 权限联动：useAuthStore.hasPerm() + <PermGuard code="...">；路由守卫 AuthGuard 统一处理未登录跳转。