water-management-system/frontend

供水管理系统前端项目

基于 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

安装依赖

npm install

开发环境

npm run dev

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

生产环境构建

npm run build

构建产物位于 dist 目录。

代码检查

# 检查代码规范
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 风格
   • 统一的响应格式

部署说明

环境配置

# 开发环境
NODE_ENV=development

# 生产环境
NODE_ENV=production

静态资源部署

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

Docker 部署

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