# CPMS 运营平台 (cpms_web_admin_pc)

基于 **Vue 3 + Vite 5 + TypeScript + Ant Design Vue 4** 搭建的中后台管理项目骨架,采用 **TSX 写法**(不使用 `.vue` 单文件组件)。

## 技术栈

| 技术                   | 版本   | 说明                            |
| ---------------------- | ------ | ------------------------------- |
| Vue                    | ^3.3.0 | 渐进式前端框架                  |
| Vite                   | ^5.0.0 | 下一代构建工具                  |
| TypeScript             | ^5.3.0 | 类型系统                        |
| Vue Router             | ^4.2.0 | 官方路由                        |
| Ant Design Vue         | ^4.0.0 | UI 组件库                       |
| Less                   | ^4.6.4 | CSS 预处理器                    |
| @vitejs/plugin-vue-jsx | ^4.0.0 | TSX/JSX 编译插件                |
| CSS Modules            | -      | 组件级样式隔离(`*.module.less`) |
| ESLint + Prettier      | -      | 代码规范与格式化                |
| Husky + Commitlint     | -      | Git 提交规范                    |

## 目录结构

```
cpms_operation_platform/
├── public/                 # 静态资源(不参与编译)
│   └── favicon.svg
├── src/
│   ├── api/                # 接口请求层
│   ├── assets/             # 静态资源(参与编译)
│   │   └── styles/         # 全局样式
│   ├── components/         # 公共组件 (.tsx)
│   ├── layouts/            # 布局组件 (.tsx + .module.less)
│   ├── router/             # 路由配置
│   ├── types/              # 全局类型定义
│   ├── utils/              # 工具函数
│   ├── views/              # 页面视图 (.tsx + .module.less)
│   ├── App.tsx             # 根组件
│   ├── main.ts            # 应用入口
│   └── env.d.ts           # 环境变量类型声明
├── .env                    # 公共环境变量
├── .env.development        # 开发环境
├── .env.test               # 测试环境
├── .env.production         # 生产环境
├── .eslintrc.cjs           # ESLint 配置
├── .prettierrc             # Prettier 配置
├── commitlint.config.js    # 提交规范配置
├── index.html              # HTML 模板
├── package.json
├── tsconfig.json           # TypeScript 配置
├── vite.config.ts          # Vite 配置
└── start-debug.js          # 本地调试服务(express)
```

## 快速开始

### 安装依赖

```bash
npm install
# 或
pnpm install
```

### 开发

```bash
npm run dev      # 启动开发服务器
```

### 构建

```bash
npm run build:dev   # 开发环境构建
npm run build:test  # 测试环境构建
npm run build:prod  # 生产环境构建
```

### 预览构建产物

```bash
npm run preview
```

### 本地调试(基于 express)

先构建产物,再用 express 托管:

```bash
npm run build:dev && npm run local
```

### 代码检查与格式化

```bash
npm run lint        # ESLint 检查
npm run lint:fix    # ESLint 自动修复
npm run format      # Prettier 格式化
npm run type-check  # TypeScript 类型检查
```

## Git 提交规范

本项目使用 [Conventional Commits](https://www.conventionalcommits.org/) 规范,由 commitlint 强制校验。

提交格式:

```
<type>(<scope>): <subject>
```

常用 type:

| type     | 说明                 |
| -------- | -------------------- |
| feat     | 新功能               |
| fix      | 修复 Bug             |
| docs     | 文档变更             |
| style    | 代码格式(不影响功能) |
| refactor | 重构                 |
| perf     | 性能优化             |
| test     | 测试                 |
| build    | 构建系统/依赖变更    |
| ci       | CI 配置              |
| chore    | 杂项                 |
| revert   | 回滚                 |

示例:

```bash
git commit -m "feat(dashboard): 新增工作台数据统计卡片"
```

## 环境变量

通过 `.env` 系列文件管理环境配置,Vite 中以 `VITE_` 开头的变量会暴露到 `import.meta.env`。

| 变量              | 说明           |
| ----------------- | -------------- |
| VITE_APP_TITLE    | 应用标题       |
| VITE_BASE_URL     | 部署基础路径   |
| VITE_PORT         | 开发服务器端口 |
| VITE_API_BASE_URL | 接口基础地址   |
| VITE_API_PREFIX   | 接口路径前缀   |