# 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
# 安装依赖（推荐 pnpm，也可 npm / yarn）
pnpm install

# 开发环境，端口 5180
pnpm dev

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

# 预览构建产物
pnpm preview
```

## 环境变量

根目录下复制 `.env.example` 为 `.env` 并填写实际值。所有以 `VITE_` 开头的变量会在构建时注入前端。

| 变量 | 说明 |
|------|------|
| VITE_APP_BASE_URL | 应用基础地址 |
| VITE_API_BASE_URL | 后端 API 基础路径，默认 `/api_client` |
| VITE_APP_TITLE | 应用标题 |

详见 `.env.example`。

## 代码规范

- 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` 会代理到后端（默认 `http://localhost:3000`），可在 `vite.config.ts` 的 `server.proxy` 中修改。

## 构建与脚本

- 路径别名：`@` 指向 `src`
- 开发端口：5180
- 生产构建启用 gzip 压缩（vite-plugin-compression）