搭建项目架构
目录结构
bash
project-root/
├── public/ # 静态资源（不经过构建，原样拷贝到 dist）
│ └── vite.svg
├── src/
│ ├── api/ # 接口请求层：按模块划分 API 请求函数
│ │ ├── request.ts # axios 实例封装（拦截器、错误处理、token 注入）
│ │ └── modules/ # 各业务模块的接口定义
│ ├── assets/ # 需要构建处理的静态资源
│ │ ├── images/ # 图片
│ │ ├── icons/ # 图标
│ │ └── styles/ # 全局样式、变量、主题
│ ├── components/ # 全局通用组件（与业务无关）
│ │ ├── common/ # 基础组件（按钮、弹窗封装等）
│ │ └── business/ # 跨页面复用的业务组件
│ ├── config/ # 全局配置（站点信息、常量、环境映射）
│ ├── constants/ # 常量定义（枚举、字典、正则）
│ ├── hooks/ # 自定义 Hooks
│ ├── layouts/ # 布局组件（BasicLayout 侧边栏+头部+内容区）
│ ├── router/ # 路由配置
│ │ ├── index.tsx # 路由入口
│ │ └── routes.tsx # 路由表（含懒加载、权限标记）
│ ├── store/ # 状态管理（Zustand / Redux Toolkit）
│ │ ├── index.ts # store 入口
│ │ └── modules/ # 按模块划分 store
│ ├── types/ # 全局 TypeScript 类型声明（.d.ts）
│ ├── utils/ # 工具函数（格式化、校验、storage 封装等）
│ ├── views/ # 页面组件（与路由一一对应）
│ │ ├── login/ # 登录页
│ │ ├── dashboard/ # 首页/工作台
│ │ ├── system/ # 系统管理（用户/角色/菜单）
│ │ └── error/ # 403 / 404 等错误页
│ ├── App.tsx # 根组件（挂载路由、全局 Provider）
│ ├── main.tsx # 应用入口（ReactDOM 渲染）
│ └── vite-env.d.ts # Vite 环境变量类型声明
├── .husky/ # Git 钩子（commit-msg 校验提交信息）
├── .editorconfig # 编辑器统一编码风格
├── .prettierrc # Prettier 代码美化规则
├── .prettierignore # Prettier 忽略文件
├── .gitignore # Git 忽略文件
├── commitlint.config.js # 提交信息校验规则
├── eslint.config.js # ESLint 代码检查规则
├── index.html # HTML 模板入口
├── package.json # 依赖与脚本
├── pnpm-lock.yaml # pnpm 锁文件
├── tsconfig.json # TS 根配置（引用各子配置）
├── tsconfig.app.json # 应用代码 TS 配置（含路径别名 @）
├── tsconfig.node.json # 构建工具代码 TS 配置
└── vite.config.ts # Vite 配置（插件、别名、代理）目录说明
| 目录 | 职责 | 说明 |
|---|---|---|
| public | 静态资源 | 不经过构建，原样拷贝到 dist |
| src/api | 接口层 | 统一管理后端请求，页面不直接写 axios |
| src/api/modules | 接口模块 | 按业务模块划分 API 请求函数 |
| src/assets | 静态资源 | 会被 Vite 打包处理（hash、压缩） |
| src/assets/images | 图片资源 | 项目中使用的图片文件 |
| src/assets/icons | 图标资源 | SVG 图标或自定义图标库 |
| src/assets/styles | 样式资源 | 全局样式、CSS 变量、主题配置 |
| src/components | 通用组件 | 不含业务逻辑，可在任意页面复用 |
| src/components/common | 基础组件 | 与业务无关的 UI 组件（按钮、弹窗、表单控件等封装） |
| src/components/business | 业务组件 | 跨多个页面复用的业务组件（用户选择器、部门树等） |
| src/config | 全局配置 | 站点信息、常量、环境映射 |
| src/constants | 常量定义 | 枚举、字典、正则表达式 |
| src/hooks | 自定义 Hooks | 封装可复用的状态逻辑（usePermission、useTable 等） |
| src/layouts | 布局 | 管理后台的骨架：侧边栏、头部、面包屑、内容区 |
| src/router | 路由 | 集中式路由表，配合懒加载与权限控制 |
| src/router/index.tsx | 路由入口 | 路由组件挂载与导出 |
| src/router/routes.tsx | 路由表 | 路由配置数组，含懒加载、权限标记 |
| src/store | 状态管理 | 按模块拆分，避免单一 store 膨胀 |
| src/store/modules | 状态模块 | 按业务模块拆分 store（user、app、permission 等） |
| src/types | 类型声明 | 全局接口、枚举类型统一管理（.d.ts） |
| src/utils | 工具函数 | 纯函数，不依赖 React（格式化、校验、storage 封装等） |
| src/views | 页面 | 业务页面，目录结构与路由路径保持一致 |
| src/views/login | 登录页 | 用户登录、注册、忘记密码 |
| src/views/dashboard | 工作台 | 首页数据概览、快捷入口 |
| src/views/system | 系统管理 | 用户管理、角色管理、菜单管理、权限配置 |
| src/views/error | 错误页 | 403 无权限、404 页面不存在、500 服务器错误 |
| .husky | Git 钩子 | 配置 commit-msg 等钩子，校验提交信息 |
| src/App.tsx | 根组件 | 挂载路由、全局 Provider（主题、国际化、状态管理） |
| src/main.tsx | 应用入口 | ReactDOM 渲染，挂载到 index.html |
| src/vite-env.d.ts | 类型声明 | Vite 环境变量类型定义 |
命名约定
- 目录：小写 + 中划线（kebab-case），如
user-manage/ - 组件文件：大驼峰（PascalCase），如
UserTable.tsx - 工具/hooks/普通 ts 文件：小驼峰（camelCase），如
usePermission.ts - 常量：全大写 + 下划线，如
API_BASE_URL