# base-project

**Repository Path**: lhuabil/base-project

## Basic Information

- **Project Name**: base-project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: base-react-project
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-07
- **Last Updated**: 2026-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 主网工程全流程管控服务平台

基于 React + TypeScript + Vite 构建的现代化前端项目，提供电网工程建设的安全与质量管控服务。

## 环境要求

- Node.js >= 20.0.0 (推荐 v22.10.0)
- pnpm >= 10.0.0 (推荐包管理器)
- IDE: VSCode

> **为什么推荐 pnpm？** 得益于其独特的依赖缓存和管理模式，具有极快的下载速度，并且可以极大地节省磁盘空间。

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### 预览生产构建

```bash
pnpm preview
```

### 代码检查

```bash
pnpm lint
```

## 技术栈

- **核心框架**: React 19 + TypeScript 5.7
- **构建工具**: Vite 6
- **UI 组件库**: Ant Design 6 + @ant-design/icons
- **路由管理**: React Router 7
- **状态管理**: Zustand 5
- **HTTP 客户端**: Axios
- **样式方案**: Less + PostCSS (pxtorem) + amfe-flexible
- **代码规范**: ESLint + Prettier + Stylelint
- **Git 规范**: Husky + lint-staged + Commitlint

## 项目结构

```
src/
├── apis/                 # API 接口封装
│   ├── base/            # 基础请求配置
│   └── UserApi.ts       # 用户相关接口
├── assets/              # 静态资源
│   ├── fonts/          # 字体文件
│   ├── images/         # 图片资源
│   └── inject-js/      # 注入脚本
├── common/              # 公共常量与工具
├── components/          # 公共组件
│   ├── HOC/            # 高阶组件
│   └── Loading/        # 加载组件
├── declares/            # TypeScript 类型声明
├── layouts/             # 布局组件
│   └── Admin/          # 后台管理布局
├── pages/               # 页面组件
│   ├── Login/          # 登录页
│   ├── Home/           # 首页
│   ├── GeoMap/         # 地图页
│   ├── Database/       # 数据库页
│   ├── RiskControl/    # 风控页
│   ├── SafetyAssessment/ # 安全评估页
│   ├── AiAssistant/    # AI 助手页
│   └── NotFind/        # 404 页
├── router/              # 路由配置
├── stores/              # 状态管理 (Zustand)
├── styles/              # 全局样式
├── types/               # TypeScript 类型定义
└── utils/               # 工具函数
```

## 功能模块

| 模块     | 路由                       | 说明               |
| -------- | -------------------------- | ------------------ |
| 登录页   | `/login`                   | 用户认证入口       |
| 首页     | `/admin/home`              | 数据概览与快捷入口 |
| 地图服务 | `/admin/geo-map`           | 地理信息可视化展示 |
| 数据管理 | `/admin/database`          | 数据库管理与操作   |
| 安全评估 | `/admin/safety-assessment` | 工程安全风险评估   |
| 风控管理 | `/admin/risk-control`      | 风险控制与预警     |
| AI 助手  | `/admin/ai-assistant`      | 智能辅助决策支持   |

## 架构说明

### 状态管理

使用 Zustand 进行全局状态管理：

- `userStore`: 用户信息、登录状态、Token 管理

### API 接口

统一封装在 `src/apis/` 目录下：

- `base/http-client.ts`: HTTP 客户端基础配置
- `base/ApiBase.ts`: 基础 API 类封装
- `UserApi.ts`: 用户相关接口实现

### 路由

使用 `createHashRouter` 创建路由，页面组件采用 `React.lazy` 懒加载：

- 根路径重定向到 `/admin`
- `/login` 为独立登录页面
- `/admin` 为后台管理布局，包含所有子路由

### 样式方案

- Less 作为 CSS 预处理器
- 移动端适配采用 `amfe-flexible` + `postcss-pxtorem`（rootValue: 192，对应设计稿宽度 1920px）
- 组件样式使用 CSS Modules
- **行内样式必须使用 `pxToRem` 转换**：`postcss-pxtorem` 仅处理 CSS/Less 文件中的 `px`，无法处理 JSX 行内 `style` 中的 `px`，因此需要通过运行时函数转换

#### pxToRem 使用

项目提供了 `pxToRem` 工具函数，位于 `src/utils/index.ts`，用于将像素值转换为 `rem` 单位：

```ts
import { pxToRem } from '@/utils';

// 函数签名
pxToRem(px: number, rootValue?: number): string
// rootValue 默认值为 192，与项目 postcss-pxtorem 配置一致

// 示例
<div style={{ width: pxToRem(144), height: pxToRem(144) }} />
// 等价于: style="width: 0.75rem; height: 0.75rem;"

// 自定义 rootValue（一般不需要）
<div style={{ fontSize: pxToRem(24, 192) }} />
```

## 代码规范

### 提交规范

项目使用 Conventional Commits 规范，支持的类型：

| 类型       | 说明          |
| ---------- | ------------- |
| `feat`     | 新功能        |
| `fix`      | 修复 Bug      |
| `docs`     | 文档更新      |
| `style`    | 代码格式调整  |
| `refactor` | 重构          |
| `perf`     | 性能优化      |
| `test`     | 测试相关      |
| `chore`    | 构建/工具相关 |

示例：`feat(login): 重构登录页面，添加表单和样式`

### 提交前自动检查

项目配置了 Husky + lint-staged，提交前会自动执行：

- `*.{js,jsx,ts,tsx,md,html}` → ESLint 自动修复 + Prettier 格式化
- `*.{css,less,sass,scss}` → Stylelint 样式检查

## 浏览器支持

- Chrome >= 88
- Firefox >= 78
- Safari >= 14
- Edge >= 88