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 + 自定义）

安装与启动

# 安装依赖（推荐 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。

代理说明

开发环境下 /api_client 会代理到后端（默认 http://localhost:3000），可在 vite.config.ts 的 server.proxy 中修改。

构建与脚本

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