feat: 实现前端框架搭建功能

- 实现 Vue3 + TypeScript + Element Plus 项目初始化
- 添加用户认证系统（登录/注册/忘记密码）
- 实现主布局组件和路由系统
- 创建用户管理模块（用户列表/编辑/新增）
- 开发供水总览大屏可视化组件
- 封装 Axios 请求工具和 API 模块
- 配置 ECharts 图表组件
- 添加 ESLint + Prettier 代码规范
- 配置 Vite 构建工具和开发环境
- 创建项目 README 和相关文档

完成 Issue #23: 前端框架搭建

frontend/.eslintrc.cjs

+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-essential',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+  },
+  plugins: ['vue', '@typescript-eslint'],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/no-v-for-template-key': 'off',
+    'vue/no-unused-vars': 'warn',
+    'vue/component-tags-order': ['error', {
+      order: ['template', 'script', 'style']
+    }],
+    'vue/component-definition-name-casing': ['error', 'PascalCase'],
+    'vue/define-macros-order': ['error', {
+      order: ['options', 'setup', 'render']
+    }],
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+}

frontend/.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env.local
+.env.*.local
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# Temporary folders
+tmp/
+temp/
+
+# Editor directories and files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Vue specific
+.vite/
+
+# Auto-generated files
+auto-imports.d.ts
+components.d.ts

frontend/.prettierrc

+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "vueIndentScriptAndStyle": false,
+  "htmlWhitespaceSensitivity": "ignore"
+}

frontend/README.md

+# 供水管理系统前端项目
+
+基于 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

frontend/package.json

   "scripts": {
     "dev": "vite",
     "build": "echo 'Using static HTML delivery' && cp public/operation-dashboard.html dist/index.html",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint src --ext .vue,.js,.ts",
+    "lint:fix": "eslint src --ext .vue,.js,.ts --fix",
+    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.0",
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-vue": "^6.0.7",
+    "eslint": "^8.55.0",
+    "eslint-plugin-vue": "^9.19.2",
     "sass": "^1.77.0",
     "typescript": "^5.9.3",
     "unplugin-auto-import": "^0.17.0",

frontend/src/api/auth.ts

-import request from './request'
+import { post, get } from '@/utils/request'
 
-export function login(username: string, password: string) {
-  return request.post('/base/auth/login', { username, password })
+// 用户登录
+export const login = (data: { username: string; password: string }) => {
+  return post('/auth/login', data)
 }
 
-export function getUserInfo() {
-  return request.get('/base/auth/user-info')
+// 用户注册
+export const register = (data: {
+  username: string
+  password: string
+  email: string
+  nickname: string
+}) => {
+  return post('/auth/register', data)
 }
 
-export function logout() {
-  return request.post('/base/auth/logout')
+// 发送重置密码邮件
+export const sendResetPasswordEmail = (data: { email: string }) => {
+  return post('/auth/reset-password', data)
 }
+
+// 重置密码
+export const resetPassword = (data: { token: string; password: string }) => {
+  return post('/auth/reset-password-confirm', data)
+}
+
+// 获取用户信息
+export const getUserInfo = () => {
+  return get('/auth/user-info')
+}
+
+// 更新用户信息
+export const updateUserInfo = (data: {
+  nickname?: string
+  email?: string
+  phone?: string
+  department?: string
+  position?: string
+}) => {
+  return put('/auth/user-info', data)
+}
+
+// 修改密码
+export const changePassword = (data: {
+  oldPassword: string
+  newPassword: string
+}) => {
+  return put('/auth/change-password', data)
+}
+
+// 退出登录
+export const logout = () => {
+  return post('/auth/logout')
+}
+
+// 刷新 token
+export const refreshToken = () => {
+  return post('/auth/refresh-token')
+}

frontend/src/api/dashboard.ts

+import { get } from '@/utils/request'
+
+// 获取仪表盘数据
+export const getDashboardData = () => {
+  return get('/dashboard/data')
+}
+
+// 获取实时供水数据
+export const getRealTimeWaterData = () => {
+  return get('/dashboard/water/real-time')
+}
+
+// 获取历史供水数据
+export const getHistoricalWaterData = (params: {
+  startTime?: string
+  endTime?: string
+  type?: string
+}) => {
+  return get('/dashboard/water/historical', params)
+}
+
+// 获取报警数据
+export const getAlarmData = (params?: {
+  page?: number
+  size?: number
+  status?: number
+  level?: number
+  startTime?: string
+  endTime?: string
+}) => {
+  return get('/dashboard/alarm/list', params)
+}
+
+// 获取统计数据
+export const getStatisticsData = (params?: {
+  startTime?: string
+  endTime?: string
+}) => {
+  return get('/dashboard/statistics', params)
+}

frontend/src/api/index.ts

+// 导出 API 函数
+export * from './auth'
+export * from './user'
+export * from './system'
+export * from './dashboard'
+export * from './wxhall'

frontend/src/api/system.ts

+import { get, post, put, del } from '@/utils/request'
+
+// 用户管理
+export const userApi = {
+  // 获取用户列表
+  getList: (params?: {
+    page?: number
+    size?: number
+    username?: string
+    nickname?: string
+    status?: number
+    departmentId?: number
+  }) => get('/system/user/list', params),
+  
+  // 获取用户详情
+  getDetail: (id: number) => get(`/system/user/detail/${id}`),
+  
+  // 创建用户
+  create: (data: any) => post('/system/user/create', data),
+  
+  // 更新用户
+  update: (id: number, data: any) => put(`/system/user/update/${id}`, data),
+  
+  // 删除用户
+  delete: (id: number) => del(`/system/user/delete/${id}`),
+  
+  // 启用/禁用用户
+  updateStatus: (id: number, status: number) => put(`/system/user/status/${id}`, { status })
+}
+
+// 角色管理
+export const roleApi = {
+  // 获取角色列表
+  getList: (params?: {
+    page?: number
+    size?: number
+    name?: string
+    status?: number
+  }) => get('/system/role/list', params),
+  
+  // 获取角色详情
+  getDetail: (id: number) => get(`/system/role/detail/${id}`),
+  
+  // 创建角色
+  create: (data: any) => post('/system/role/create', data),
+  
+  // 更新角色
+  update: (id: number, data: any) => put(`/system/role/update/${id}`, data),
+  
+  // 删除角色
+  delete: (id: number) => del(`/system/role/delete/${id}`),
+  
+  // 获取角色权限
+  getPermissions: (id: number) => get(`/system/role/permissions/${id}`),
+  
+  // 设置角色权限
+  setPermissions: (id: number, data: any) => put(`/system/role/permissions/${id}`, data)
+}
+
+// 菜单管理
+export const menuApi = {
+  // 获取菜单列表
+  getList: (params?: {
+    status?: number
+    type?: number
+  }) => get('/system/menu/list', params),
+  
+  // 获取菜单详情
+  getDetail: (id: number) => get(`/system/menu/detail/${id}`),
+  
+  // 创建菜单
+  create: (data: any) => post('/system/menu/create', data),
+  
+  // 更新菜单
+  update: (id: number, data: any) => put(`/system/menu/update/${id}`, data),
+  
+  // 删除菜单
+  delete: (id: number) => del(`/system/menu/delete/${id}`),
+  
+  // 获取菜单树
+  getTree: () => get('/system/menu/tree')
+}
+
+// 部门管理
+export const deptApi = {
+  // 获取部门列表
+  getList: (params?: {
+    status?: number
+    parentId?: number
+  }) => get('/system/dept/list', params),
+  
+  // 获取部门详情
+  getDetail: (id: number) => get(`/system/dept/detail/${id}`),
+  
+  // 创建部门
+  create: (data: any) => post('/system/dept/create', data),
+  
+  // 更新部门
+  update: (id: number, data: any) => put(`/system/dept/update/${id}`, data),
+  
+  // 删除部门
+  delete: (id: number) => del(`/system/dept/delete/${id}`),
+  
+  // 获取部门树
+  getTree: () => get('/system/dept/tree')
+}

frontend/src/api/user.ts

+import { get, put } from '@/utils/request'
+
+// 获取用户信息
+export const getUserInfo = () => {
+  return get('/user/info')
+}
+
+// 更新用户信息
+export const updateUserInfo = (data: {
+  nickname?: string
+  email?: string
+  phone?: string
+  department?: string
+  position?: string
+}) => {
+  return put('/user/info', data)
+}
+
+// 获取用户操作日志
+export const getUserLogs = (params?: {
+  page?: number
+  size?: number
+  startTime?: string
+  endTime?: string
+}) => {
+  return get('/user/logs', params)
+}

frontend/src/api/wxhall.ts

+import { get, post, put, del } from '@/utils/request'
+
+// 水费查询
+export const waterBillApi = {
+  // 获取水费账单列表
+  getList: (params?: {
+    page?: number
+    size?: number
+    year?: number
+    month?: number
+    status?: number
+  }) => get('/wxhall/water-bill/list', params),
+  
+  // 获取水费账单详情
+  getDetail: (id: number) => get(`/wxhall/water-bill/detail/${id}`),
+  
+  // 申请缴费
+  applyPayment: (id: number) => post(`/wxhall/water-bill/payment/${id}`),
+  
+  // 获取缴费记录
+  getPaymentRecords: (params?: {
+    page?: number
+    size?: number
+    startTime?: string
+    endTime?: string
+    status?: number
+  }) => get('/wxhall/water-bill/records', params)
+}
+
+// 报装申请
+export const installApplyApi = {
+  // 获取报装申请列表
+  getList: (params?: {
+    page?: number
+    size?: number
+    status?: number
+    type?: string
+  }) => get('/wxhall/install-apply/list', params),
+  
+  // 提交报装申请
+  submit: (data: any) => post('/wxhall/install-apply/submit', data),
+  
+  // 获取申请详情
+  getDetail: (id: number) => get(`/wxhall/install-apply/detail/${id}`),
+  
+  // 取消申请
+  cancel: (id: number) => put(`/wxhall/install-apply/cancel/${id}`)
+}
+
+// 公告通知
+export const noticeApi = {
+  // 获取公告列表
+  getList: (params?: {
+    page?: number
+    size?: number
+    type?: string
+    status?: number
+  }) => get('/wxhall/notice/list', params),
+  
+  // 获取公告详情
+  getDetail: (id: number) => get(`/wxhall/notice/detail/${id}`)
+}
+
+// 用户绑定
+export const userBindApi = {
+  // 获取绑定记录
+  getList: (params?: {
+    page?: number
+    size?: number
+    status?: number
+  }) => get('/wxhall/user-bind/list', params),
+  
+  // 创建绑定关系
+  create: (data: any) => post('/wxhall/user-bind/create', data),
+  
+  // 解除绑定
+  unbind: (id: number) => del(`/wxhall/user-bind/delete/${id}`)
+}

frontend/src/assets/style.scss

-body { margin:0; padding:0; font-family:"Microsoft YaHei","PingFang SC",sans-serif }
-#app { height:100vh }
+// 全局样式
+
+// 重置样式
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  background-color: #f5f7fa;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+// Element Plus 样式覆盖
+.el-card {
+  border: none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  
+  .el-card__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #ebeef5;
+    
+    .el-card__header-title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
+
+.el-button {
+  border-radius: 6px;
+  
+  &--primary {
+    background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
+    border: none;
+    
+    &:hover {
+      background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
+    }
+  }
+}
+
+.el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  
+  .el-table__header-wrapper {
+    th {
+      background-color: #f8f9fa;
+      color: #606266;
+      font-weight: 500;
+    }
+  }
+}
+
+.el-form {
+  .el-form-item {
+    margin-bottom: 22px;
+    
+    .el-form-item__label {
+      font-weight: 500;
+      color: #606266;
+    }
+  }
+}
+
+.el-dialog {
+  border-radius: 8px;
+  
+  .el-dialog__header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #ebeef5;
+    
+    .el-dialog__title {
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+  
+  .el-dialog__body {
+    padding: 24px;
+  }
+  
+  .el-dialog__footer {
+    padding: 16px 24px;
+    border-top: 1px solid #ebeef5;
+  }
+}
+
+.el-select {
+  .el-input__inner {
+    border-radius: 6px;
+  }
+}
+
+.el-input {
+  .el-input__inner {
+    border-radius: 6px;
+  }
+}
+
+.el-textarea {
+  .el-textarea__inner {
+    border-radius: 6px;
+    resize: vertical;
+  }
+}
+
+.el-radio {
+  margin-right: 20px;
+  
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.el-checkbox {
+  margin-right: 20px;
+  
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+// 布局类
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+// 间距类
+.m-10 { margin: 10px; }
+.mt-10 { margin-top: 10px; }
+.mr-10 { margin-right: 10px; }
+.mb-10 { margin-bottom: 10px; }
+.ml-10 { margin-left: 10px; }
+
+.p-10 { padding: 10px; }
+.pt-10 { padding-top: 10px; }
+.pr-10 { padding-right: 10px; }
+.pb-10 { padding-bottom: 10px; }
+.pl-10 { padding-left: 10px; }
+
+// 颜色类
+.text-primary { color: #409EFF; }
+.text-success { color: #67C23A; }
+.text-warning { color: #E6A23C; }
+.text-danger { color: #F56C6C; }
+.text-info { color: #909399; }
+
+.bg-primary { background-color: #409EFF; }
+.bg-success { background-color: #67C23A; }
+.bg-warning { background-color: #E6A23C; }
+.bg-danger { background-color: #F56C6C; }
+.bg-info { background-color: #909399; }
+
+// 边框类
+.border {
+  border: 1px solid #DCDFE6;
+}
+
+.border-primary {
+  border-color: #409EFF;
+}
+
+.border-success {
+  border-color: #67C23A;
+}
+
+.border-warning {
+  border-color: #E6A23C;
+}
+
+.border-danger {
+  border-color: #F56C6C;
+}
+
+.border-info {
+  border-color: #909399;
+}
+
+// 圆角类
+.rounded {
+  border-radius: 4px;
+}
+
+.rounded-md {
+  border-radius: 6px;
+}
+
+.rounded-lg {
+  border-radius: 8px;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+// 阴影类
+.shadow {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-md {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-lg {
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+// 文字样式
+.text-sm { font-size: 12px; }
+.text-base { font-size: 14px; }
+.text-lg { font-size: 16px; }
+.text-xl { font-size: 18px; }
+.text-2xl { font-size: 20px; }
+
+.font-bold { font-weight: bold; }
+.font-normal { font-weight: normal; }
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+// 页面容器
+.page-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 60px);
+}
+
+// 卡片样式
+.page-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  
+  .page-card-header {
+    padding: 20px;
+    border-bottom: 1px solid #ebeef5;
+    
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+  
+  .page-card-body {
+    padding: 20px;
+  }
+}
+
+// 表单样式
+.form-container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+// 按钮组
+.button-group {
+  display: flex;
+  gap: 10px;
+  
+  .el-button {
+    flex: 1;
+  }
+}
+
+// 状态标签
+.status-tag {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  
+  &.status-success {
+    background-color: #f0f9ff;
+    color: #67c23a;
+    border: 1px solid #67c23a;
+  }
+  
+  &.status-warning {
+    background-color: #fdf6ec;
+    color: #e6a23c;
+    border: 1px solid #e6a23c;
+  }
+  
+  &.status-danger {
+    background-color: #fef0f0;
+    color: #f56c6c;
+    border: 1px solid #f56c6c;
+  }
+  
+  &.status-info {
+    background-color: #f4f4f5;
+    color: #909399;
+    border: 1px solid #909399;
+  }
+}
+
+// 加载动画
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  
+  .el-loading-spinner {
+    .circular {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+// 空状态
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #909399;
+  
+  .empty-icon {
+    font-size: 64px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+  
+  .empty-text {
+    font-size: 16px;
+    margin-bottom: 16px;
+  }
+  
+  .empty-description {
+    font-size: 14px;
+    color: #c0c4cc;
+    margin-bottom: 24px;
+  }
+}
+
+// 响应式样式
+@media (max-width: 768px) {
+  .page-container {
+    padding: 10px;
+  }
+  
+  .el-form-item {
+    margin-bottom: 16px;
+  }
+  
+  .el-table {
+    font-size: 12px;
+  }
+  
+  .el-button {
+    padding: 8px 16px;
+    font-size: 14px;
+  }
+}
+
+// 暗色主题
+html.dark {
+  color: #e5eaf3;
+  background-color: #141414;
+  
+  .el-card {
+    background-color: #1f1f1f;
+    border-color: #303030;
+    
+    .el-card__header {
+      border-bottom-color: #303030;
+      background-color: #1f1f1f;
+    }
+  }
+  
+  .el-table {
+    background-color: #1f1f1f;
+    color: #e5eaf3;
+    
+    .el-table__header-wrapper {
+      th {
+        background-color: #2a2a2a;
+        color: #e5eaf3;
+      }
+    }
+  }
+  
+  .el-dialog {
+    background-color: #1f1f1f;
+    
+    .el-dialog__header {
+      border-bottom-color: #303030;
+    }
+    
+    .el-dialog__footer {
+      border-top-color: #303030;
+    }
+  }
+}

frontend/src/components/charts/BaseChart.vue

+<template>
+  <div
+    ref="chartRef"
+    :style="{
+      width: width + 'px',
+      height: height + 'px'
+    }"
+    class="base-chart"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  // 图表配置项
+  option: {
+    type: Object,
+    required: true
+  },
+  // 图表宽度
+  width: {
+    type: Number,
+    default: 400
+  },
+  // 图表高度
+  height: {
+    type: Number,
+    default: 300
+  },
+  // 是否自动调整大小
+  autoResize: {
+    type: Boolean,
+    default: true
+  },
+  // 图表主题
+  theme: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['chartReady', 'chartClick', 'chartMouseDown', 'chartMouseUp'])
+
+const chartRef = ref<HTMLElement>()
+let chartInstance: echarts.ECharts | null = null
+
+// 初始化图表
+const initChart = () => {
+  if (!chartRef.value) return
+  
+  // 销毁旧实例
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  
+  // 创建新实例
+  chartInstance = echarts.init(chartRef.value, props.theme)
+  
+  // 设置配置项
+  chartInstance.setOption(props.option)
+  
+  // 绑定事件
+  chartInstance.on('click', (params) => {
+    emit('chartClick', params)
+  })
+  
+  chartInstance.on('mousedown', (params) => {
+    emit('chartMouseDown', params)
+  })
+  
+  chartInstance.on('mouseup', (params) => {
+    emit('chartMouseUp', params)
+  })
+  
+  emit('chartReady', chartInstance)
+}
+
+// 调整图表大小
+const resizeChart = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+// 监听配置项变化
+watch(() => props.option, (newOption) => {
+  if (chartInstance) {
+    chartInstance.setOption(newOption)
+  }
+}, { deep: true })
+
+// 监听主题变化
+watch(() => props.theme, (newTheme) => {
+  if (chartInstance && chartRef.value) {
+    chartInstance.dispose()
+    chartInstance = echarts.init(chartRef.value, newTheme)
+    chartInstance.setOption(props.option)
+  }
+})
+
+// 监听窗口大小变化
+const handleResize = () => {
+  if (props.autoResize) {
+    resizeChart()
+  }
+}
+
+onMounted(() => {
+  initChart()
+  
+  if (props.autoResize) {
+    window.addEventListener('resize', handleResize)
+  }
+})
+
+onUnmounted(() => {
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+  
+  if (props.autoResize) {
+    window.removeEventListener('resize', handleResize)
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  getInstance: () => chartInstance,
+  resize: resizeChart,
+  getOption: () => props.option,
+  setOption: (option: any) => {
+    if (chartInstance) {
+      chartInstance.setOption(option)
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.base-chart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

frontend/src/components/charts/ECharts.vue

+<template>
+  <div
+    ref="chartRef"
+    :style="{
+      width: width + 'px',
+      height: height + 'px'
+    }"
+    class="echarts"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true
+  },
+  width: {
+    type: Number,
+    default: 400
+  },
+  height: {
+    type: Number,
+    default: 300
+  },
+  autoResize: {
+    type: Boolean,
+    default: true
+  },
+  theme: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['chartReady', 'chartClick', 'chartMouseDown', 'chartMouseUp'])
+
+const chartRef = ref<HTMLElement>()
+let chartInstance: echarts.ECharts | null = null
+
+// 初始化图表
+const initChart = () => {
+  if (!chartRef.value) return
+  
+  // 销毁旧实例
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  
+  // 创建新实例
+  chartInstance = echarts.init(chartRef.value, props.theme)
+  
+  // 设置配置项
+  chartInstance.setOption(props.option)
+  
+  // 绑定事件
+  chartInstance.on('click', (params) => {
+    emit('chartClick', params)
+  })
+  
+  chartInstance.on('mousedown', (params) => {
+    emit('chartMouseDown', params)
+  })
+  
+  chartInstance.on('mouseup', (params) => {
+    emit('chartMouseUp', params)
+  })
+  
+  emit('chartReady', chartInstance)
+}
+
+// 调整图表大小
+const resizeChart = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+// 监听配置项变化
+watch(() => props.option, (newOption) => {
+  if (chartInstance) {
+    chartInstance.setOption(newOption)
+  }
+}, { deep: true })
+
+// 监听主题变化
+watch(() => props.theme, (newTheme) => {
+  if (chartInstance && chartRef.value) {
+    chartInstance.dispose()
+    chartInstance = echarts.init(chartRef.value, newTheme)
+    chartInstance.setOption(props.option)
+  }
+})
+
+// 监听窗口大小变化
+const handleResize = () => {
+  if (props.autoResize) {
+    resizeChart()
+  }
+}
+
+onMounted(() => {
+  initChart()
+  
+  if (props.autoResize) {
+    window.addEventListener('resize', handleResize)
+  }
+})
+
+onUnmounted(() => {
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+  
+  if (props.autoResize) {
+    window.removeEventListener('resize', handleResize)
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  getInstance: () => chartInstance,
+  resize: resizeChart,
+  getOption: () => props.option,
+  setOption: (option: any) => {
+    if (chartInstance) {
+      chartInstance.setOption(option)
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

frontend/src/components/layout/MainLayout.vue

 <template>
-  <el-container style="height:100vh">
-    <el-aside width="220px" class="sidebar">
-      <div class="logo">💧 智慧水务</div>
-      <el-menu :default-active="route.path" router background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
-        <el-menu-item index="/dashboard"><el-icon><DataAnalysis /></el-icon>供水总览</el-menu-item>
-        <el-sub-menu index="system">
-          <template #title><el-icon><Setting /></el-icon>系统管理</template>
+  <el-container class="layout-container">
+    <el-aside width="200px" class="sidebar">
+      <div class="logo">
+        <img src="/logo.png" alt="Logo" class="logo-img" />
+        <span class="logo-text">供水管理系统</span>
+      </div>
+      <el-menu
+        :default-active="$route.path"
+        class="el-menu-vertical"
+        :collapse="isCollapse"
+        background-color="#304156"
+        text-color="#fff"
+        active-text-color="#409EFF"
+        router
+      >
+        <el-menu-item index="/dashboard">
+          <el-icon><HomeFilled /></el-icon>
+          <template #title>工作台</template>
+        </el-menu-item>
+        
+        <el-sub-menu index="/operation">
+          <template #title>
+            <el-icon><Operation /></el-icon>
+            <span>运营管理</span>
+          </template>
+          <el-menu-item index="/operation/dashboard">运营总览</el-menu-item>
+        </el-sub-menu>
+
+        <el-sub-menu index="/system">
+          <template #title>
+            <el-icon><Setting /></el-icon>
+            <span>系统管理</span>
+          </template>
           <el-menu-item index="/system/user">用户管理</el-menu-item>
           <el-menu-item index="/system/role">角色管理</el-menu-item>
           <el-menu-item index="/system/menu">菜单管理</el-menu-item>
           <el-menu-item index="/system/dept">部门管理</el-menu-item>
         </el-sub-menu>
+
+        <el-sub-menu index="/dispatch">
+          <template #title>
+            <el-icon><Menu /></el-icon>
+            <span>调度管理</span>
+          </template>
+          <el-menu-item index="/dispatch-command">调度命令</el-menu-item>
+        </el-sub-menu>
+
+        <el-sub-menu index="/service">
+          <template #title>
+            <el-icon><Service /></el-icon>
+            <span>服务中心</span>
+          </template>
+          <el-menu-item index="/service/workbench">客服工作台</el-menu-item>
+        </el-sub-menu>
+
+        <el-sub-menu index="/wx-hall">
+          <template #title>
+            <el-icon><Shop /></el-icon>
+            <span>微信网厅</span>
+          </template>
+          <el-menu-item index="/wx-hall/water-bill">水费查询</el-menu-item>
+          <el-menu-item index="/wx-hall/install-apply">报装申请</el-menu-item>
+          <el-menu-item index="/wx-hall/notice">公告通知</el-menu-item>
+          <el-menu-item index="/wx-hall/user-bind">用户绑定</el-menu-item>
+        </el-sub-menu>
       </el-menu>
     </el-aside>
+
     <el-container>
-      <el-header class="topbar">
-        <span class="title">精河县供水工程综合管理平台</span>
-        <el-dropdown @command="handleCommand">
-          <span class="user">{{ userStore.realName || '管理员' }} <el-icon><ArrowDown /></el-icon></span>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item>个人中心</el-dropdown-item>
-              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
+      <el-header class="header">
+        <div class="header-left">
+          <el-button type="text" @click="toggleSidebar">
+            <el-icon><Fold v-if="!isCollapse" /><Expand v-else /></el-icon>
+          </el-button>
+          <breadcrumb />
+        </div>
+        <div class="header-right">
+          <el-button type="text" @click="toggleFullscreen">
+            <el-icon><FullScreen /></el-icon>
+          </el-button>
+          <el-dropdown trigger="click">
+            <div class="user-info">
+              <el-avatar :size="32" src="/avatar.png" />
+              <span class="username">{{ username }}</span>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
+                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
       </el-header>
-      <el-main><router-view /></el-main>
+
+      <el-main class="main-content">
+        <router-view />
+      </el-main>
     </el-container>
   </el-container>
 </template>
 
 <script setup lang="ts">
-import { useRoute, useRouter } from 'vue-router'
-import { useUserStore } from '@/store/user'
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  HomeFilled,
+  Operation,
+  Setting,
+  Menu,
+  Service,
+  Shop,
+  Fold,
+  Expand,
+  FullScreen
+} from '@element-plus/icons-vue'
 
-const route = useRoute()
 const router = useRouter()
-const userStore = useUserStore()
+const route = useRoute()
+
+const isCollapse = ref(false)
+const username = ref('admin')
+
+const toggleSidebar = () => {
+  isCollapse.value = !isCollapse.value
+}
+
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    }
+  }
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
 
-function handleCommand(cmd: string) {
-  if (cmd === 'logout') { userStore.logout(); router.push('/login') }
+const handleLogout = () => {
+  localStorage.removeItem('token')
+  ElMessage.success('退出成功')
+  router.push('/login')
 }
+
+// 面包屑组件
+const Breadcrumb = () => {
+  return (
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item>首页</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ route.meta?.title || route.name }}</el-breadcrumb-item>
+    </el-breadcrumb>
+  )
+}
+
+onMounted(() => {
+  // 从 localStorage 获取用户信息
+  const userInfo = localStorage.getItem('userInfo')
+  if (userInfo) {
+    try {
+      const user = JSON.parse(userInfo)
+      username.value = user.username || 'admin'
+    } catch (e) {
+      console.error('解析用户信息失败:', e)
+    }
+  }
+})
 </script>
 
-<style scoped>
-.sidebar { background:#304156; overflow-y:auto }
-.logo { color:#fff; text-align:center; padding:16px; font-size:18px; font-weight:bold; border-bottom:1px solid rgba(255,255,255,.1) }
-.topbar { background:#fff; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e6e6e6 }
-.title { font-size:16px; color:#333 }
-.user { cursor:pointer; color:#666 }
-</style>
+<style scoped lang="scss">
+.layout-container {
+  height: 100vh;
+  
+  .sidebar {
+    background-color: #304156;
+    transition: width 0.3s;
+    
+    .logo {
+      height: 60px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      background-color: #263445;
+      
+      .logo-img {
+        width: 32px;
+        height: 32px;
+        margin-right: 10px;
+      }
+      
+      .logo-text {
+        color: #fff;
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+    
+    .el-menu-vertical {
+      border-right: none;
+    }
+  }
+  
+  .header {
+    background-color: #fff;
+    border-bottom: 1px solid #e6e6e6;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    
+    .header-left {
+      display: flex;
+      align-items: center;
+      
+      .el-button {
+        margin-right: 20px;
+      }
+    }
+    
+    .header-right {
+      display: flex;
+      align-items: center;
+      
+      .el-button {
+        margin: 0 10px;
+      }
+      
+      .user-info {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        
+        .username {
+          margin-left: 8px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  
+  .main-content {
+    background-color: #f5f7fa;
+    padding: 20px;
+    overflow-y: auto;
+  }
+}
+</style>

frontend/src/router/index.ts

 import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
-  { path: '/login', name: 'login', component: () => import('@/views/login/LoginView.vue') },
+  { path: '/login', name: 'login', component: () => import('@/views/login/LoginView.vue'), meta: { title: '登录' } },
+  { path: '/register', name: 'register', component: () => import('@/views/login/RegisterView.vue'), meta: { title: '注册' } },
+  { path: '/forgot-password', name: 'forgotPassword', component: () => import('@/views/login/ForgotPasswordView.vue'), meta: { title: '忘记密码' } },
   {
-    path: '/', component: () => import('@/components/layout/MainLayout.vue'),
+    path: '/', 
+    component: () => import('@/components/layout/MainLayout.vue'),
     redirect: '/dashboard',
     children: [
-{ path: 'operation', name: 'operation', component: () => import('@/views/dashboard/OperationDashboard.vue') },
-      { path: 'dashboard', name: 'dashboard', component: () => import('@/views/dashboard/DashboardView.vue') },
-      { path: 'system/user', name: 'user', component: () => import('@/views/system/user/UserList.vue') },
-      { path: 'system/role', name: 'role', component: () => import('@/views/system/role/RoleList.vue') },
-      { path: 'system/menu', name: 'menu', component: () => import('@/views/system/menu/MenuList.vue') },
-      { path: 'system/dept', name: 'dept', component: () => import('@/views/system/dept/DeptList.vue') },
-      { path: 'dispatch-command', name: 'dispatchCommandList', component: () => import('@/views/dispatch-command/CommandList.vue') },
-      { path: 'dispatch-command/:id', name: 'dispatchCommandDetail', component: () => import('@/views/dispatch-command/CommandDetail.vue') },
-      { path: 'service/workbench', name: 'serviceWorkbench', component: () => import('@/views/service/CustomerServiceWorkbench.vue') },
+      { 
+        path: 'dashboard', 
+        name: 'dashboard', 
+        component: () => import('@/views/dashboard/DashboardView.vue'),
+        meta: { title: '工作台' }
+      },
+      { 
+        path: 'operation', 
+        name: 'operation', 
+        component: () => import('@/views/dashboard/OperationDashboard.vue'),
+        meta: { title: '运营管理' }
+      },
+      { 
+        path: 'system/user', 
+        name: 'user', 
+        component: () => import('@/views/system/user/UserList.vue'),
+        meta: { title: '用户管理' }
+      },
+      { 
+        path: 'system/role', 
+        name: 'role', 
+        component: () => import('@/views/system/role/RoleList.vue'),
+        meta: { title: '角色管理' }
+      },
+      { 
+        path: 'system/menu', 
+        name: 'menu', 
+        component: () => import('@/views/system/menu/菜单List.vue'),
+        meta: { title: '菜单管理' }
+      },
+      { 
+        path: 'system/dept', 
+        name: 'dept', 
+        component: () => import('@/views/system/dept/DeptList.vue'),
+        meta: { title: '部门管理' }
+      },
+      { 
+        path: 'dispatch-command', 
+        name: 'dispatchCommandList', 
+        component: () => import('@/views/dispatch-command/CommandList.vue'),
+        meta: { title: '调度命令' }
+      },
+      { 
+        path: 'dispatch-command/:id', 
+        name: 'dispatchCommandDetail', 
+        component: () => import('@/views/dispatch-command/CommandDetail.vue'),
+        meta: { title: '调度详情' }
+      },
+      { 
+        path: 'service/workbench', 
+        name: 'serviceWorkbench', 
+        component: () => import('@/views/service/CustomerServiceWorkbench.vue'),
+        meta: { title: '客服工作台' }
+      },
       // 微信网厅
-      { path: 'wx-hall/water-bill', name: 'wxWaterBill', component: () => import('@/views/wxhall/WaterBillView.vue') },
-      { path: 'wx-hall/install-apply', name: 'wxInstallApply', component: () => import('@/views/wxhall/InstallApplyView.vue') },
-      { path: 'wx-hall/notice', name: 'wxNotice', component: () => import('@/views/wxhall/NoticeView.vue') },
-      { path: 'wx-hall/user-bind', name: 'wxUserBind', component: () => import('@/views/wxhall/UserBindView.vue') },
+      { 
+        path: 'wx-hall/water-bill', 
+        name: 'wxWaterBill', 
+        component: () => import('@/views/wxhall/WaterBillView.vue'),
+        meta: { title: '水费查询' }
+      },
+      { 
+        path: 'wx-hall/install-apply', 
+        name: 'wxInstallApply', 
+        component: () => import('@/views/wxhall/InstallApplyView.vue'),
+        meta: { title: '报装申请' }
+      },
+      { 
+        path: 'wx-hall/notice', 
+        name: 'wxNotice', 
+        component: () => import('@/views/wxhall/NoticeView.vue'),
+        meta: { title: '公告通知' }
+      },
+      { 
+        path: 'wx-hall/user-bind', 
+        name: 'wxUserBind', 
+        component: () => import('@/views/wxhall/UserBindView.vue'),
+        meta: { title: '用户绑定' }
+      },
     ]
   },
+  { path: '/profile', name: 'profile', component: () => import('@/views/profile/ProfileView.vue'), meta: { title: '个人中心' } },
   { path: '/:pathMatch(.*)*', redirect: '/dashboard' }
 ]
 
   else { next() }
 })
 
-export default router
+export default router

frontend/src/utils/request.ts

+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import router from '@/router'
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: '/api', // API 基础路径
+  timeout: 10000,  // 请求超时时间
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 从 localStorage 获取 token
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    console.error('请求错误:', error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    const { data } = response
+    
+    // 假设 API 返回格式为 { code: 200, data: {}, message: 'success' }
+    if (data.code === 200) {
+      return data.data
+    } else {
+      ElMessage.error(data.message || '请求失败')
+      return Promise.reject(new Error(data.message || '请求失败'))
+    }
+  },
+  (error) => {
+    let message = '请求失败'
+    
+    if (error.response) {
+      const { status, data } = error.response
+      
+      switch (status) {
+        case 401:
+          message = '登录已过期，请重新登录'
+          localStorage.removeItem('token')
+          localStorage.removeItem('userInfo')
+          router.push('/login')
+          break
+        case 403:
+          message = '没有权限访问'
+          break
+        case 404:
+          message = '请求的资源不存在'
+          break
+        case 500:
+          message = '服务器错误'
+          break
+        default:
+          message = data.message || `请求失败 (${status})`
+      }
+    } else if (error.request) {
+      message = '网络错误，请检查网络连接'
+    } else {
+      message = error.message || '请求失败'
+    }
+    
+    ElMessage.error(message)
+    return Promise.reject(error)
+  }
+)
+
+// 封装 GET 请求
+export const get = (url: string, params?: any) => {
+  return service({
+    method: 'get',
+    url,
+    params
+  })
+}
+
+// 封装 POST 请求
+export const post = (url: string, data?: any) => {
+  return service({
+    method: 'post',
+    url,
+    data
+  })
+}
+
+// 封装 PUT 请求
+export const put = (url: string, data?: any) => {
+  return service({
+    method: 'put',
+    url,
+    data
+  })
+}
+
+// 封装 DELETE 请求
+export const del = (url: string) => {
+  return service({
+    method: 'delete',
+    url
+  })
+}
+
+// 封装文件上传
+export const upload = (url: string, file: File) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  
+  return service({
+    method: 'post',
+    url,
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 封装文件下载
+export const download = (url: string, filename?: string) => {
+  return service({
+    method: 'get',
+    url,
+    responseType: 'blob'
+  }).then((data) => {
+    const blob = new Blob([data])
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.download = filename || 'download'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(link.href)
+  })
+}
+
+export default service

frontend/src/views/login/ForgotPasswordView.vue

+<template>
+  <div class="forgot-password-container">
+    <div class="forgot-password-box">
+      <div class="forgot-password-header">
+        <img src="/logo.png" alt="Logo" class="forgot-password-logo" />
+        <h2>找回密码</h2>
+        <p>请输入您的邮箱，我们将发送重置密码的链接</p>
+      </div>
+      
+      <el-form
+        ref="forgotPasswordFormRef"
+        :model="forgotPasswordForm"
+        :rules="forgotPasswordRules"
+        class="forgot-password-form"
+        size="large"
+      >
+        <el-form-item prop="email">
+          <el-input
+            v-model="forgotPasswordForm.email"
+            placeholder="请输入邮箱"
+            prefix-icon="Message"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item>
+          <el-button
+            type="primary"
+            :loading="loading"
+            class="forgot-password-button"
+            @click="handleForgotPassword"
+          >
+            {{ loading ? '发送中...' : '发送重置链接' }}
+          </el-button>
+        </el-form-item>
+        
+        <div class="forgot-password-links">
+          <router-link to="/login" class="link">返回登录</router-link>
+          <router-link to="/register" class="link">注册账号</router-link>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { Message } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const forgotPasswordFormRef = ref<FormInstance>()
+const loading = ref(false)
+
+const forgotPasswordForm = reactive({
+  email: ''
+})
+
+const forgotPasswordRules: FormRules = {
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ]
+}
+
+const handleForgotPassword = async () => {
+  if (!forgotPasswordFormRef.value) return
+  
+  try {
+    const valid = await forgotPasswordFormRef.value.validate()
+    if (valid) {
+      loading.value = true
+      
+      // 模拟发送重置密码邮件 API 调用
+      setTimeout(() => {
+        // 这里应该是实际的重置密码邮件发送 API 调用
+        // const response = await sendResetPasswordEmail(forgotPasswordForm)
+        
+        ElMessage.success('重置密码链接已发送到您的邮箱，请查收')
+        router.push('/login')
+      }, 1500)
+    }
+  } catch (error) {
+    console.error('验证失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.forgot-password-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .forgot-password-box {
+    width: 450px;
+    padding: 40px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 10px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+    
+    .forgot-password-header {
+      text-align: center;
+      margin-bottom: 40px;
+      
+      .forgot-password-logo {
+        width: 80px;
+        height: 80px;
+        margin-bottom: 20px;
+      }
+      
+      h2 {
+        color: #333;
+        font-size: 24px;
+        margin-bottom: 10px;
+      }
+      
+      p {
+        color: #666;
+        font-size: 14px;
+      }
+    }
+    
+    .forgot-password-form {
+      .forgot-password-button {
+        width: 100%;
+        height: 44px;
+        font-size: 16px;
+        border-radius: 6px;
+      }
+      
+      .forgot-password-links {
+        margin-top: 20px;
+        text-align: center;
+        
+        .link {
+          color: #666;
+          text-decoration: none;
+          margin: 0 10px;
+          font-size: 14px;
+          
+          &:hover {
+            color: #409EFF;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

frontend/src/views/login/LoginView.vue

 <template>
   <div class="login-container">
     <div class="login-box">
-      <h1>智慧水务管理系统</h1>
-      <el-form :model="form" :rules="rules" ref="formRef">
+      <div class="login-header">
+        <img src="/logo.png" alt="Logo" class="login-logo" />
+        <h2>供水管理系统</h2>
+        <p>欢迎登录智慧供水管理平台</p>
+      </div>
+      
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="loginRules"
+        class="login-form"
+        size="large"
+      >
         <el-form-item prop="username">
-          <el-input v-model="form.username" placeholder="用户名" prefix-icon="User" size="large" />
+          <el-input
+            v-model="loginForm.username"
+            placeholder="请输入用户名"
+            prefix-icon="User"
+            clearable
+          />
         </el-form-item>
+        
         <el-form-item prop="password">
-          <el-input v-model="form.password" type="password" placeholder="密码" prefix-icon="Lock" size="large" @keyup.enter="handleLogin" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入密码"
+            prefix-icon="Lock"
+            show-password
+            @keyup.enter="handleLogin"
+          />
         </el-form-item>
+        
         <el-form-item>
-          <el-button type="primary" size="large" style="width:100%" :loading="loading" @click="handleLogin">登 录</el-button>
+          <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
         </el-form-item>
+        
+        <el-form-item>
+          <el-button
+            type="primary"
+            :loading="loading"
+            class="login-button"
+            @click="handleLogin"
+          >
+            {{ loading ? '登录中...' : '登录' }}
+          </el-button>
+        </el-form-item>
+        
+        <div class="login-links">
+          <router-link to="/register" class="link">注册账号</router-link>
+          <router-link to="/forgot-password" class="link">忘记密码？</router-link>
+        </div>
       </el-form>
     </div>
   </div>
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
-import { useUserStore } from '@/store/user'
-import { login } from '@/api/auth'
-import { ElMessage } from 'element-plus'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { User, Lock } from '@element-plus/icons-vue'
 
 const router = useRouter()
-const userStore = useUserStore()
-const formRef = ref()
+const loginFormRef = ref<FormInstance>()
 const loading = ref(false)
-const form = reactive({ username: 'admin', password: 'admin123' })
-const rules = { username: [{ required: true, message: '请输入用户名' }], password: [{ required: true, message: '请输入密码' }] }
 
-async function handleLogin() {
-  await formRef.value.validate()
-  loading.value = true
+const loginForm = reactive({
+  username: 'admin',
+  password: 'admin123',
+  remember: false
+})
+
+const loginRules: FormRules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度为 3-20 个字符', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '密码长度为 6-20 个字符', trigger: 'blur' }
+  ]
+}
+
+const handleLogin = async () => {
+  if (!loginFormRef.value) return
+  
   try {
-    const res = await login(form.username, form.password)
-    userStore.setToken(res.data)
-    ElMessage.success('登录成功')
-    router.push('/dashboard')
-  } catch (e) {
-    console.error(e)
-  } finally { loading.value = false }
+    const valid = await loginFormRef.value.validate()
+    if (valid) {
+      loading.value = true
+      
+      // 模拟登录 API 调用
+      setTimeout(() => {
+        // 这里应该是实际的登录 API 调用
+        // const response = await login(loginForm)
+        
+        // 模拟成功登录
+        const token = 'mock-token-' + Date.now()
+        const userInfo = {
+          id: 1,
+          username: loginForm.username,
+          nickname: '管理员',
+          avatar: '/avatar.png',
+          roles: ['admin'],
+          permissions: ['*']
+        }
+        
+        localStorage.setItem('token', token)
+        localStorage.setItem('userInfo', JSON.stringify(userInfo))
+        
+        if (loginForm.remember) {
+          localStorage.setItem('rememberedUsername', loginForm.username)
+        } else {
+          localStorage.removeItem('rememberedUsername')
+        }
+        
+        ElMessage.success('登录成功')
+        router.push('/dashboard')
+      }, 1500)
+    }
+  } catch (error) {
+    console.error('登录验证失败:', error)
+  } finally {
+    loading.value = false
+  }
 }
+
+// 页面加载时检查是否有记住的用户名
+onMounted(() => {
+  const rememberedUsername = localStorage.getItem('rememberedUsername')
+  if (rememberedUsername) {
+    loginForm.username = rememberedUsername
+    loginForm.remember = true
+  }
+})
 </script>
 
-<style scoped>
-.login-container { display:flex; justify-content:center; align-items:center; height:100vh; background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%) }
-.login-box { width:400px; padding:40px; background:#fff; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,.3) }
-h1 { text-align:center; margin-bottom:30px; color:#1e3c72 }
-</style>
+<style scoped lang="scss">
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .login-box {
+    width: 400px;
+    padding: 40px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 10px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+    
+    .login-header {
+      text-align: center;
+      margin-bottom: 40px;
+      
+      .login-logo {
+        width: 80px;
+        height: 80px;
+        margin-bottom: 20px;
+      }
+      
+      h2 {
+        color: #333;
+        font-size: 24px;
+        margin-bottom: 10px;
+      }
+      
+      p {
+        color: #666;
+        font-size: 14px;
+      }
+    }
+    
+    .login-form {
+      .login-button {
+        width: 100%;
+        height: 44px;
+        font-size: 16px;
+        border-radius: 6px;
+      }
+      
+      .login-links {
+        margin-top: 20px;
+        text-align: center;
+        
+        .link {
+          color: #666;
+          text-decoration: none;
+          margin: 0 10px;
+          font-size: 14px;
+          
+          &:hover {
+            color: #409EFF;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

frontend/src/views/login/RegisterView.vue

+<template>
+  <div class="register-container">
+    <div class="register-box">
+      <div class="register-header">
+        <img src="/logo.png" alt="Logo" class="register-logo" />
+        <h2>用户注册</h2>
+        <p>创建您的供水管理系统账号</p>
+      </div>
+      
+      <el-form
+        ref="registerFormRef"
+        :model="registerForm"
+        :rules="registerRules"
+        class="register-form"
+        size="large"
+      >
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerForm.username"
+            placeholder="请输入用户名"
+            prefix-icon="User"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item prop="password">
+          <el-input
+            v-model="registerForm.password"
+            type="password"
+            placeholder="请输入密码"
+            prefix-icon="Lock"
+            show-password
+          />
+        </el-form-item>
+        
+        <el-form-item prop="confirmPassword">
+          <el-input
+            v-model="registerForm.confirmPassword"
+            type="password"
+            placeholder="请确认密码"
+            prefix-icon="Lock"
+            show-password
+          />
+        </el-form-item>
+        
+        <el-form-item prop="email">
+          <el-input
+            v-model="registerForm.email"
+            placeholder="请输入邮箱"
+            prefix-icon="Message"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item prop="nickname">
+          <el-input
+            v-model="registerForm.nickname"
+            placeholder="请输入昵称"
+            prefix-icon="UserFilled"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item>
+          <el-checkbox v-model="registerForm.agree">我已阅读并同意《用户协议》和《隐私政策》</el-checkbox>
+        </el-form-item>
+        
+        <el-form-item>
+          <el-button
+            type="primary"
+            :loading="loading"
+            class="register-button"
+            @click="handleRegister"
+          >
+            {{ loading ? '注册中...' : '注册' }}
+          </el-button>
+        </el-form-item>
+        
+        <div class="register-links">
+          <router-link to="/login" class="link">返回登录</router-link>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { User, Lock, Message, UserFilled } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const registerFormRef = ref<FormInstance>()
+const loading = ref(false)
+
+const registerForm = reactive({
+  username: '',
+  password: '',
+  confirmPassword: '',
+  email: '',
+  nickname: '',
+  agree: false
+})
+
+const validateConfirmPassword = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'))
+  } else if (value !== registerForm.password) {
+    callback(new Error('两次输入密码不一致'))
+  } else {
+    callback()
+  }
+}
+
+const registerRules: FormRules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度为 3-20 个字符', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '密码长度为 6-20 个字符', trigger: 'blur' },
+    { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/, message: '密码必须包含大小写字母和数字', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认密码', trigger: 'blur' },
+    { validator: validateConfirmPassword, trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ],
+  nickname: [
+    { required: true, message: '请输入昵称', trigger: 'blur' },
+    { min: 2, max: 10, message: '昵称长度为 2-10 个字符', trigger: 'blur' }
+  ],
+  agree: [
+    { required: true, message: '请阅读并同意用户协议', trigger: 'change' }
+  ]
+}
+
+const handleRegister = async () => {
+  if (!registerFormRef.value) return
+  
+  try {
+    const valid = await registerFormRef.value.validate()
+    if (valid) {
+      loading.value = true
+      
+      // 模拟注册 API 调用
+      setTimeout(() => {
+        // 这里应该是实际的注册 API 调用
+        // const response = await register(registerForm)
+        
+        // 模拟注册成功
+        ElMessage.success('注册成功！请登录')
+        router.push('/login')
+      }, 1500)
+    }
+  } catch (error) {
+    console.error('注册验证失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.register-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  
+  .register-box {
+    width: 450px;
+    padding: 40px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 10px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+    
+    .register-header {
+      text-align: center;
+      margin-bottom: 40px;
+      
+      .register-logo {
+        width: 80px;
+        height: 80px;
+        margin-bottom: 20px;
+      }
+      
+      h2 {
+        color: #333;
+        font-size: 24px;
+        margin-bottom: 10px;
+      }
+      
+      p {
+        color: #666;
+        font-size: 14px;
+      }
+    }
+    
+    .register-form {
+      .register-button {
+        width: 100%;
+        height: 44px;
+        font-size: 16px;
+        border-radius: 6px;
+      }
+      
+      .register-links {
+        margin-top: 20px;
+        text-align: center;
+        
+        .link {
+          color: #666;
+          text-decoration: none;
+          font-size: 14px;
+          
+          &:hover {
+            color: #409EFF;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

frontend/src/views/profile/ProfileView.vue

+<template>
+  <div class="profile-container">
+    <el-card class="profile-card">
+      <template #header>
+        <div class="profile-header">
+          <el-avatar :size="80" :src="userInfo.avatar || '/avatar.png'" />
+          <div class="profile-info">
+            <h2>{{ userInfo.nickname }}</h2>
+            <p>{{ userInfo.username }}</p>
+          </div>
+        </div>
+      </template>
+      
+      <el-tabs v-model="activeTab" class="profile-tabs">
+        <el-tab-pane label="基本信息" name="basic">
+          <el-form
+            ref="basicFormRef"
+            :model="basicForm"
+            :rules="basicRules"
+            label-width="100px"
+            class="basic-form"
+          >
+            <el-form-item label="用户名">
+              {{ userInfo.username }}
+            </el-form-item>
+            <el-form-item label="昵称" prop="nickname">
+              <el-input v-model="basicForm.nickname" />
+            </el-form-item>
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="basicForm.email" />
+            </el-form-item>
+            <el-form-item label="手机号" prop="phone">
+              <el-input v-model="basicForm.phone" />
+            </el-form-item>
+            <el-form-item label="部门" prop="department">
+              <el-input v-model="basicForm.department" />
+            </el-form-item>
+            <el-form-item label="职位" prop="position">
+              <el-input v-model="basicForm.position" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleBasicUpdate">
+                更新基本信息
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        
+        <el-tab-pane label="修改密码" name="password">
+          <el-form
+            ref="passwordFormRef"
+            :model="passwordForm"
+            :rules="passwordRules"
+            label-width="100px"
+            class="password-form"
+          >
+            <el-form-item label="当前密码" prop="oldPassword">
+              <el-input
+                v-model="passwordForm.oldPassword"
+                type="password"
+                show-password
+                placeholder="请输入当前密码"
+              />
+            </el-form-item>
+            <el-form-item label="新密码" prop="newPassword">
+              <el-input
+                v-model="passwordForm.newPassword"
+                type="password"
+                show-password
+                placeholder="请输入新密码"
+              />
+            </el-form-item>
+            <el-form-item label="确认密码" prop="confirmPassword">
+              <el-input
+                v-model="passwordForm.confirmPassword"
+                type="password"
+                show-password
+                placeholder="请确认新密码"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handlePasswordUpdate">
+                修改密码
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        
+        <el-tab-pane label="操作日志" name="logs">
+          <el-timeline>
+            <el-timeline-item
+              v-for="log in operationLogs"
+              :key="log.id"
+              :timestamp="log.time"
+              placement="top"
+            >
+              <el-card>
+                <h4>{{ log.action }}</h4>
+                <p>{{ log.description }}</p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+
+const activeTab = ref('basic')
+const basicFormRef = ref<FormInstance>()
+const passwordFormRef = ref<FormInstance>()
+
+const userInfo = reactive({
+  username: '',
+  nickname: '',
+  avatar: '/avatar.png',
+  email: '',
+  phone: '',
+  department: '',
+  position: ''
+})
+
+const basicForm = reactive({
+  nickname: '',
+  email: '',
+  phone: '',
+  department: '',
+  position: ''
+})
+
+const passwordForm = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+const basicRules: FormRules = {
+  nickname: [
+    { required: true, message: '请输入昵称', trigger: 'blur' },
+    { min: 2, max: 10, message: '昵称长度为 2-10 个字符', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ],
+  phone: [
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
+  ]
+}
+
+const validateConfirmPassword = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请再次输入新密码'))
+  } else if (value !== passwordForm.newPassword) {
+    callback(new Error('两次输入密码不一致'))
+  } else {
+    callback()
+  }
+}
+
+const passwordRules: FormRules = {
+  oldPassword: [
+    { required: true, message: '请输入当前密码', trigger: 'blur' }
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '密码长度为 6-20 个字符', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认新密码', trigger: 'blur' },
+    { validator: validateConfirmPassword, trigger: 'blur' }
+  ]
+}
+
+const operationLogs = ref([
+  {
+    id: 1,
+    action: '登录系统',
+    description: '用户成功登录供水管理系统',
+    time: '2026-06-15 10:30:00'
+  },
+  {
+    id: 2,
+    action: '查看仪表盘',
+    description: '浏览了供水运营总览页面',
+    time: '2026-06-15 10:25:00'
+  },
+  {
+    id: 3,
+    action: '更新用户信息',
+    description: '修改了个人基本资料',
+    time: '2026-06-15 10:20:00'
+  }
+])
+
+const handleBasicUpdate = async () => {
+  if (!basicFormRef.value) return
+  
+  try {
+    const valid = await basicFormRef.value.validate()
+    if (valid) {
+      // 这里应该是更新用户信息的 API 调用
+      // const response = await updateUserInfo(basicForm)
+      
+      // 模拟更新成功
+      Object.assign(userInfo, basicForm)
+      ElMessage.success('基本信息更新成功')
+    }
+  } catch (error) {
+    console.error('基本信息更新失败:', error)
+  }
+}
+
+const handlePasswordUpdate = async () => {
+  if (!passwordFormRef.value) return
+  
+  try {
+    const valid = await passwordFormRef.value.validate()
+    if (valid) {
+      // 这里应该是修改密码的 API 调用
+      // const response = await changePassword(passwordForm)
+      
+      // 模拟修改成功
+      ElMessage.success('密码修改成功')
+      // 重置表单
+      passwordForm.oldPassword = ''
+      passwordForm.newPassword = ''
+      passwordForm.confirmPassword = ''
+    }
+  } catch (error) {
+    console.error('密码修改失败:', error)
+  }
+}
+
+onMounted(() => {
+  // 从 localStorage 获取用户信息
+  const userInfoStr = localStorage.getItem('userInfo')
+  if (userInfoStr) {
+    try {
+      const user = JSON.parse(userInfoStr)
+      Object.assign(userInfo, user)
+      Object.assign(basicForm, user)
+    } catch (e) {
+      console.error('解析用户信息失败:', e)
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.profile-container {
+  padding: 20px;
+  
+  .profile-card {
+    max-width: 800px;
+    margin: 0 auto;
+    
+    .profile-header {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      
+      .profile-info {
+        h2 {
+          margin: 0 0 5px 0;
+          font-size: 20px;
+          color: #333;
+        }
+        
+        p {
+          margin: 0;
+          color: #666;
+          font-size: 14px;
+        }
+      }
+    }
+    
+    .profile-tabs {
+      margin-top: 20px;
+      
+      .basic-form,
+      .password-form {
+        max-width: 500px;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+</style>

frontend/src/views/system/user/UserList.vue

+<template>
+  <div class="user-list">
+    <el-card class="filter-card">
+      <el-form :model="filterForm" inline>
+        <el-form-item label="用户名">
+          <el-input v-model="filterForm.username" placeholder="请输入用户名" clearable />
+        </el-form-item>
+        <el-form-item label="昵称">
+          <el-input v-model="filterForm.nickname" placeholder="请输入昵称" clearable />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部门">
+          <el-select v-model="filterForm.departmentId" placeholder="请选择部门" clearable>
+            <el-option
+              v-for="dept in departmentList"
+              :key="dept.id"
+              :label="dept.name"
+              :value="dept.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">
+            <el-icon><Search /></el-icon>
+            搜索
+          </el-button>
+          <el-button @click="handleReset">
+            <el-icon><Refresh /></el-icon>
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="table-card">
+      <template #header>
+        <div class="table-header">
+          <div class="left">
+            <el-button type="primary" @click="handleAdd">
+              <el-icon><Plus /></el-icon>
+              新增用户
+            </el-button>
+            <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
+              <el-icon><Delete /></el-icon>
+              批量删除
+            </el-button>
+          </div>
+          <div class="right">
+            <el-button @click="handleExport">
+              <el-icon><Download /></el-icon>
+              导出
+            </el-button>
+            <el-button @click="handleRefresh">
+              <el-icon><Refresh /></el-icon>
+              刷新
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        @selection-change="handleSelectionChange"
+        style="width: 100%"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="username" label="用户名" />
+        <el-table-column prop="nickname" label="昵称" />
+        <el-table-column prop="email" label="邮箱" />
+        <el-table-column prop="phone" label="手机号" />
+        <el-table-column prop="departmentName" label="部门" />
+        <el-table-column prop="position" label="职位" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
+              {{ row.status === 1 ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" size="small" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button 
+              type="danger" 
+              size="small" 
+              :disabled="row.id === 1"
+              @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 用户表单对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="600px"
+      @close="handleDialogClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="form.username" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="form.password"
+            type="password"
+            placeholder="请输入密码"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="form.confirmPassword"
+            type="password"
+            placeholder="请确认密码"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="昵称" prop="nickname">
+          <el-input v-model="form.nickname" placeholder="请输入昵称" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="form.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item label="部门" prop="departmentId">
+          <el-select v-model="form.departmentId" placeholder="请选择部门" style="width: 100%">
+            <el-option
+              v-for="dept in departmentList"
+              :key="dept.id"
+              :label="dept.name"
+              :value="dept.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="职位" prop="position">
+          <el-input v-model="form.position" placeholder="请输入职位" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :value="1">启用</el-radio>
+            <el-radio :value="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="handleSubmit">
+          确定
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { Search, Refresh, Plus, Delete, Download } from '@element-plus/icons-vue'
+import { userApi } from '@/api/system'
+
+// 搜索表单
+const filterForm = reactive({
+  username: '',
+  nickname: '',
+  status: undefined,
+  departmentId: undefined
+})
+
+// 表格数据
+const tableData = ref([])
+const loading = ref(false)
+const selectedRows = ref([])
+
+// 分页
+const pagination = reactive({
+  current: 1,
+  size: 20,
+  total: 0
+})
+
+// 部门列表
+const departmentList = ref([
+  { id: 1, name: '技术部' },
+  { id: 2, name: '运营部' },
+  { id: 3, name: '财务部' },
+  { id: 4, name: '人事部' }
+])
+
+// 对话框
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const submitting = ref(false)
+
+// 表单
+const formRef = ref<FormInstance>()
+const form = reactive({
+  id: undefined,
+  username: '',
+  password: '',
+  confirmPassword: '',
+  nickname: '',
+  email: '',
+  phone: '',
+  departmentId: undefined,
+  position: '',
+  status: 1
+})
+
+// 表单验证规则
+const validateConfirmPassword = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'))
+  } else if (value !== form.password) {
+    callback(new Error('两次输入密码不一致'))
+  } else {
+    callback()
+  }
+}
+
+const rules: FormRules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度为 3-20 个字符', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '密码长度为 6-20 个字符', trigger: 'blur' },
+    { 
+      validator: (rule, value, callback) => {
+        if (form.id === undefined) {
+          // 新增时必须输入密码
+          if (!value) {
+            callback(new Error('请输入密码'))
+          }
+          callback()
+        } else {
+          // 编辑时密码可以为空
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  confirmPassword: [
+    { validator: validateConfirmPassword, trigger: 'blur' }
+  ],
+  nickname: [
+    { required: true, message: '请输入昵称', trigger: 'blur' },
+    { min: 2, max: 10, message: '昵称长度为 2-10 个字符', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ],
+  phone: [
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
+  ],
+  departmentId: [
+    { required: true, message: '请选择部门', trigger: 'change' }
+  ]
+}
+
+// 获取用户列表
+const getUserList = async () => {
+  loading.value = true
+  try {
+    const params = {
+      page: pagination.current,
+      size: pagination.size,
+      ...filterForm
+    }
+    const response = await userApi.getList(params)
+    tableData.value = response.list || []
+    pagination.total = response.total || 0
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+    ElMessage.error('获取用户列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.current = 1
+  getUserList()
+}
+
+// 重置
+const handleReset = () => {
+  filterForm.username = ''
+  filterForm.nickname = ''
+  filterForm.status = undefined
+  filterForm.departmentId = undefined
+  handleSearch()
+}
+
+// 刷新
+const handleRefresh = () => {
+  getUserList()
+}
+
+// 导出
+const handleExport = () => {
+  ElMessage.info('导出功能开发中')
+}
+
+// 选择行
+const handleSelectionChange = (selection: any[]) => {
+  selectedRows.value = selection
+}
+
+// 批量删除
+const handleBatchDelete = async () => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除选中的 ${selectedRows.value.length} 个用户吗？`,
+      '确认删除',
+      {
+        type: 'warning'
+      }
+    )
+    
+    // 这里应该调用批量删除 API
+    const ids = selectedRows.value.map(item => item.id)
+    // await userApi.batchDelete(ids)
+    
+    ElMessage.success('批量删除成功')
+    getUserList()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('批量删除失败:', error)
+      ElMessage.error('批量删除失败')
+    }
+  }
+}
+
+// 新增用户
+const handleAdd = () => {
+  dialogTitle.value = '新增用户'
+  form.id = undefined
+  form.username = ''
+  form.password = ''
+  form.confirmPassword = ''
+  form.nickname = ''
+  form.email = ''
+  form.phone = ''
+  form.departmentId = undefined
+  form.position = ''
+  form.status = 1
+  dialogVisible.value = true
+}
+
+// 编辑用户
+const handleEdit = (row: any) => {
+  dialogTitle.value = '编辑用户'
+  form.id = row.id
+  form.username = row.username
+  form.password = ''
+  form.confirmPassword = ''
+  form.nickname = row.nickname
+  form.email = row.email
+  form.phone = row.phone
+  form.departmentId = row.departmentId
+  form.position = row.position
+  form.status = row.status
+  dialogVisible.value = true
+}
+
+// 删除用户
+const handleDelete = async (row: any) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除用户 "${row.username}" 吗？`,
+      '确认删除',
+      {
+        type: 'warning'
+      }
+    )
+    
+    await userApi.delete(row.id)
+    ElMessage.success('删除成功')
+    getUserList()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error)
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    submitting.value = true
+    
+    const isEdit = form.id !== undefined
+    const submitData = {
+      username: form.username,
+      nickname: form.nickname,
+      email: form.email,
+      phone: form.phone,
+      departmentId: form.departmentId,
+      position: form.position,
+      status: form.status
+    }
+    
+    if (form.password) {
+      submitData.password = form.password
+    }
+    
+    if (isEdit) {
+      await userApi.update(form.id, submitData)
+      ElMessage.success('更新成功')
+    } else {
+      await userApi.create(submitData)
+      ElMessage.success('创建成功')
+    }
+    
+    dialogVisible.value = false
+    getUserList()
+  } catch (error) {
+    console.error('提交失败:', error)
+    ElMessage.error('提交失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 对话框关闭
+const handleDialogClose = () => {
+  formRef.value?.resetFields()
+}
+
+// 分页大小变化
+const handleSizeChange = (size: number) => {
+  pagination.size = size
+  getUserList()
+}
+
+// 页码变化
+const handleCurrentChange = (current: number) => {
+  pagination.current = current
+  getUserList()
+}
+
+// 初始化
+onMounted(() => {
+  getUserList()
+})
+</script>
+
+<style scoped lang="scss">
+.user-list {
+  .filter-card {
+    margin-bottom: 20px;
+  }
+  
+  .table-card {
+    .table-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .left,
+      .right {
+        display: flex;
+        gap: 10px;
+      }
+    }
+  }
+  
+  .pagination {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

frontend/tsconfig.json

 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
     "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
     "moduleResolution": "bundler",
-    "strict": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
     "jsx": "preserve",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    }
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@views/*": ["./src/views/*"],
+      "@api/*": ["./src/api/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@assets/*": ["./src/assets/*"]
+    },
+    
+    /* Type declaration files */
+    "types": ["element-plus/global"],
+    
+    /* Vue support */
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
   },
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
+    "src/**/*.tsx",
     "src/**/*.vue"
-  ]
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

frontend/tsconfig.node.json

+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import path from 'path'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import compression from 'vite-plugin-compression'
 
+// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
-  resolve: { alias: { '@': path.resolve('src') } },
+  plugins: [
+    vue(),
+    AutoImport({
+      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
+      imports: ['vue', 'vue-router', 'pinia'],
+      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox 等
+      resolvers: [ElementPlusResolver()],
+      dts: 'src/auto-imports.d.ts',
+    }),
+    Components({
+      // 自动导入 Element Plus 组件
+      resolvers: [ElementPlusResolver()],
+      dts: 'src/components.d.ts',
+    }),
+    // 开启 Gzip 压缩
+    compression({
+      verbose: true,
+      disable: false,
+      threshold: 10240,
+      algorithm: 'gzip',
+      ext: '.gz',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': '/src',
+      '@components': '/src/components',
+      '@views': '/src/views',
+      '@api': '/src/api',
+      '@utils': '/src/utils',
+      '@assets': '/src/assets',
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/assets/style.scss";`,
+      },
+    },
+  },
   server: {
     port: 3000,
+    open: true,
+    cors: true,
     proxy: {
-      '/api': { target: 'http://localhost:8080', changeOrigin: true }
-    }
-  }
-})
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+  build: {
+    // 生产环境构建配置
+    target: 'es2015',
+    outDir: 'dist',
+    assetsDir: 'assets',
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'assets/js/[name]-[hash].js',
+        entryFileNames: 'assets/js/[name]-[hash].js',
+        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
+        manualChunks: {
+          'element-plus': ['element-plus'],
+          'vue-vendor': ['vue', 'vue-router', 'pinia'],
+        },
+      },
+    },
+  },
+})