# Popiart SkillHub 前端项目

PC 端企业级网站前端，面向桌面端浏览器（1280px 及以上分辨率），便于长期维护与团队协作。

## 技术栈

| 类别 | 选型 |
|------|------|
| 框架 | React 18（函数组件） |
| 构建 | Vite 5 |
| 语言 | TypeScript 5（strict，禁止 any，优先 interface） |
| UI | Arco Design |
| 样式 | Tailwind CSS v4（@tailwindcss/vite） |
| 路由 | React Router 6 |
| 状态 | Zustand |
| HTTP | Axios |

## 目录说明

```
src/
├── api/           # API 层：request 实例、通用类型、按业务拆分的 modules
├── assets/        # 静态资源：fonts、images、styles
├── components/    # 公共组件，按组件名建子目录
├── constants/     # 常量（路由路径、状态码等）
├── hooks/         # 自定义 Hooks
├── layouts/       # 布局组件
├── pages/         # 页面，按路由组织
├── router/        # 路由配置与守卫
├── store/         # Zustand store
├── types/         # 全局类型（业务实体、API 模型等）
├── utils/         # 工具函数
├── App.tsx
├── main.tsx
└── index.css      # 全局样式入口（Tailwind + 自定义）
```

## 安装与启动

```bash
# 安装依赖
npm install

# 开发环境，端口 5195
npm run dev

# 构建
npm run build          # 默认
npm run build:stage    # 预发
npm run build:prod     # 生产

# 预览构建产物
npm run preview
```

## 环境变量

根目录下维护 `.env`、`.env.stage`、`.env.prod`。所有以 `VITE_` 开头的变量会在构建时注入前端。

| 变量 | 说明 |
|------|------|
| VITE_API_URL | 后端 API 地址 |
| VITE_SKILLHUB_URL | SkillHub 跳转地址 |
| VITE_CANVAS_URL | Canvas 跳转地址 |

开发代理在 `vite.config.mts` 中维护，默认本地服务端口为 `5195`。

## 代码规范

- ESLint 9（flat config）+ TypeScript ESLint + React Hooks
- Prettier 与 ESLint 集成，保存时自动格式化
- 提交前由 Husky + lint-staged 执行 lint、format；commit 信息需符合 Conventional Commits（feat、fix、docs、style、refactor、chore 等）

详见 [CONTRIBUTING.md](./CONTRIBUTING.md)。

## 代理说明

开发环境下 `/api_client`、`/media`、`/resource` 会代理到后端，可在 `vite.config.mts` 的 `server.proxy` 中修改。

## 构建与脚本

- 路径别名：`@` 指向 `src`
- 开发端口：5195
- 生产构建使用 Vite/esbuild 压缩，按需通过 Rollup manual chunks 拆分依赖包