# 供水管理系统前端项目

基于 Vue3 + TypeScript + Element Plus + Vite 构建的智慧供水管理系统前端项目。

## 技术栈

- **框架**: Vue 3.5.x
- **语言**: TypeScript 5.9.x
- **UI 组件**: Element Plus 2.8.x
- **构建工具**: Vite 5.4.x
- **状态管理**: Pinia 2.2.x
- **路由**: Vue Router 4.4.x
- **HTTP 客户端**: Axios 1.7.x
- **图表库**: ECharts 5.5.x
- **地图库**: Leaflet 1.9.x
- **CSS 预处理器**: Sass 1.77.x
- **代码规范**: ESLint + Prettier

## 项目结构

```
src/
├── api/                 # API 接口
│   ├── auth.ts        # 认证相关 API
│   ├── system.ts      # 系统管理 API
│   ├── user.ts        # 用户相关 API
│   ├── dashboard.ts   # 仪表盘 API
│   └── wxhall.ts      # 微信网厅 API
├── assets/            # 静态资源
│   └── style.scss     # 全局样式
├── components/        # 公共组件
│   ├── layout/        # 布局组件
│   │   └── MainLayout.vue
│   └── charts/        # 图表组件
│       ├── BaseChart.vue
│       └── ECharts.vue
├── router/            # 路由配置
│   └── index.ts
├── store/             # 状态管理
├── utils/             # 工具函数
│   └── request.ts     # Axios 封装
├── views/             # 页面组件
│   ├── login/         # 登录相关页面
│   │   ├── LoginView.vue
│   │   ├── RegisterView.vue
│   │   └── ForgotPasswordView.vue
│   ├── dashboard/     # 仪表盘页面
│   │   ├── DashboardView.vue
│   │   ├── OperationDashboard.vue
│   │   └── WaterSupplySpecialScreen.vue
│   ├── system/        # 系统管理页面
│   │   ├── user/UserList.vue
│   │   ├── role/RoleList.vue
│   │   └── menu/MenuList.vue
│   ├── profile/       # 个人中心页面
│   │   └── ProfileView.vue
│   └── ...            # 其他页面
├── App.vue            # 根组件
└── main.ts            # 入口文件
```

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 开发环境

```bash
npm run dev
```

项目将在 http://localhost:3000 启动。

### 生产环境构建

```bash
npm run build
```

构建产物位于 `dist` 目录。

### 代码检查

```bash
# 检查代码规范
npm run lint

# 自动修复代码规范
npm run lint:fix

# TypeScript 类型检查
npm run type-check
```

## 主要功能

### 1. 用户认证系统
- 用户登录/注册
- 忘记密码
- Token 认证
- 权限控制

### 2. 系统管理
- 用户管理
- 角色管理
- 菜单管理
- 部门管理

### 3. 仪表盘
- 工作台总览
- 供水运营总览
- 供水总览大屏（数据可视化）

### 4. 菜单系统
- 动态路由
- 权限控制
- 面包屑导航

### 5. 组件库
- 通用布局组件
- 图表组件封装
- 表单组件
- 对话框组件

## 开发规范

### 代码组织

1. **组件命名**
   - 使用 PascalCase 命名组件
   - 组件文件名与组件名一致

2. **文件结构**
   - 相关文件放在同一目录下
   - 按功能模块组织代码

3. **代码风格**
   - 使用 TypeScript 编写代码
   - 遵循 ESLint 和 Prettier 规范
   - 使用 Vue 3 组合式 API

### 组件开发

1. **Props 定义**
   - 明确的类型定义
   - 必要的参数默认值

2. **事件定义**
   - 清晰的事件命名
   - 事件参数类型定义

3. **Slot 定义**
   - 使用具名插槽
   - 插槽内容类型说明

### API 调用

1. **请求封装**
   - 统一的错误处理
   - Token 自动添加
   - 请求/响应拦截

2. **接口设计**
   - RESTful 风格
   - 统一的响应格式

## 部署说明

### 环境配置

```bash
# 开发环境
NODE_ENV=development

# 生产环境
NODE_ENV=production
```

### 静态资源部署

1. 构建生成静态文件
2. 配置 Nginx/Apache
3. 设置正确的 MIME 类型
4. 配置 Gzip 压缩

### Docker 部署

```dockerfile
FROM node:16-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
```

## 常见问题

### 1. 构建失败

检查 Node.js 版本和依赖安装情况。

### 2. 热更新不生效

检查 Vite 配置和开发服务器配置。

### 3. 样式不生效

检查 CSS 预处理器配置和样式导入路径。

## 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交代码
4. 提交 Pull Request

## 许可证

MIT License