wuye / webui

  # 物业管理系统 - 项目架构图
  
  ## 🏗️ 整体架构
  
  ```
  ┌─────────────────────────────────────────────────────────────┐
  │                        前端应用层                            │
  ├─────────────────────────────────────────────────────────────┤
  │  Vue 2 + Element UI + Vue Router + Vuex + Axios            │
  ├─────────────────────────────────────────────────────────────┤
  │                        业务逻辑层                            │
  ├─────────────────────────────────────────────────────────────┤
  │  用户管理 │ 社区管理 │ 费用管理 │ 工单管理 │ 设备管理        │
  ├─────────────────────────────────────────────────────────────┤
  │                        数据访问层                            │
  ├─────────────────────────────────────────────────────────────┤
  │  HTTP 请求 │ 本地存储 │ 权限验证 │ 错误处理                │
  ├─────────────────────────────────────────────────────────────┤
  │                        后端服务层                            │
  └─────────────────────────────────────────────────────────────┘
  ```
  
  ## 📁 目录结构详解
  
  ### 1. 源码目录 (src/)
  
  ```
  src/
  ├── api/                    # API 接口层
  │   ├── community/         # 社区管理接口
  │   ├── fee/              # 费用管理接口
  │   ├── work/             # 工单管理接口
  │   ├── user/             # 用户管理接口
  │   ├── room/             # 房屋管理接口
  │   ├── owner/            # 业主管理接口
  │   ├── resource/         # 资源管理接口
  │   ├── system/           # 系统管理接口
  │   └── ...
  ├── components/            # 公共组件库
  │   ├── common/           # 通用组件
  │   ├── fee/              # 费用相关组件
  │   ├── room/             # 房屋相关组件
  │   ├── upload/           # 上传组件
  │   └── ...
  ├── views/                 # 页面组件
  │   ├── index/            # 首页仪表板
  │   ├── layout/           # 主布局框架
  │   ├── user/             # 用户相关页面
  │   ├── community/        # 社区管理页面
  │   ├── fee/              # 费用管理页面
  │   ├── work/             # 工单管理页面
  │   └── ...
  ├── router/                # 路由配置
  │   ├── index.js          # 主路由配置
  │   ├── feeRouter.js      # 费用管理路由
  │   ├── workRouter.js     # 工单管理路由
  │   └── ...
  ├── i18n/                  # 国际化配置
  │   ├── index.js          # 国际化主配置
  │   ├── commonLang.js     # 通用语言包
  │   ├── feeI18n.js        # 费用管理语言包
  │   └── ...
  ├── utils/                 # 工具函数
  │   ├── request.js        # HTTP 请求封装
  │   ├── dateUtil.js       # 日期工具函数
  │   ├── moneyUtil.js      # 金额工具函数
  │   └── ...
  ├── conf/                  # 配置文件
  │   └── config.js         # 应用配置
  ├── App.vue               # 根组件
  └── main.js               # 应用入口
  ```
  
  ### 2. 配置文件
  
  ```
  项目根目录/
  ├── package.json          # 项目依赖配置
  ├── vue.config.js         # Vue CLI 配置
  ├── .eslintrc.js          # ESLint 配置
  ├── .gitignore            # Git 忽略文件
  └── README.md             # 项目说明
  ```
  
  ## 🔄 数据流架构
  
  ### 1. 单向数据流
  
  ```
  用户操作 → 组件事件 → API 调用 → 数据更新 → 视图渲染
      ↓           ↓         ↓         ↓         ↓
    触发事件   事件处理   后端接口   状态变更   响应式更新
  ```
  
  ### 2. 组件通信
  
  ```
  父组件 ←→ 子组件
     ↓         ↓
  Props    Events
     ↓         ↓
  数据传递   事件通知
  ```
  
  ### 3. 状态管理
  
  ```
  组件内部状态 (data) ←→ 全局状态 (Vue.prototype)
          ↓                      ↓
     响应式数据             全局方法/属性
          ↓                      ↓
     自动更新视图           权限检查/工具函数
  ```
  
  ## 🌐 网络架构
  
  ### 1. 请求流程
  
  ```
  前端组件 → Axios 实例 → 请求拦截器 → 后端 API → 响应拦截器 → 组件
      ↓           ↓           ↓           ↓           ↓         ↓
    发起请求   统一配置   添加认证头   处理业务   统一处理   更新状态
  ```
  
  ### 2. 代理配置
  
  ```javascript
  // vue.config.js
  proxy: {
    '/app': {
      target: 'http://demo.homecommunity.cn/app',
      changeOrigin: true,
      pathRewrite: { '^/app': '' }
    },
    '/callComponent': {
      target: 'http://demo.homecommunity.cn/callComponent',
      changeOrigin: true,
      pathRewrite: { '^/callComponent': '' }
    }
  }
  ```
  
  ## 🔐 权限架构
  
  ### 1. 权限控制流程
  
  ```
  用户登录 → 获取权限列表 → 存储到 localStorage → 组件权限检查 → 功能控制
      ↓           ↓              ↓              ↓           ↓
    身份验证   后端返回权限    本地缓存权限    调用 hasPrivilege   显示/隐藏
  ```
  
  ### 2. 权限检查实现
  
  ```javascript
  Vue.prototype.hasPrivilege = function(_privaleges) {
    const privilegesToCheck = Array.isArray(_privaleges) ? _privaleges : [_privaleges];
    let userPrivileges = localStorage.getItem('hc_staff_privilege');
    
    if (userPrivileges) {
      userPrivileges = userPrivileges.split(',');
    } else {
      return false;
    }
    
    return privilegesToCheck.some(item => userPrivileges.includes(item));
  }
  ```
  
  ## 🎨 UI 架构
  
  ### 1. 组件层次结构
  
  ```
  App.vue (根组件)
      ↓
  Layout.vue (主布局)
      ↓
  Router View (路由视图)
      ↓
  页面组件 (如 RoomList.vue)
      ↓
  业务组件 (如 RoomTree.vue)
      ↓
  Element UI 组件 (如 el-table, el-form)
  ```
  
  ### 2. 样式架构
  
  ```
  全局样式 (App.vue)
      ↓
  Element UI 主题样式
      ↓
  页面级样式 (scoped)
      ↓
  组件级样式 (scoped)
  ```
  
  ## 📱 响应式架构
  
  ### 1. 移动端适配
  
  - 使用 Element UI 的响应式栅格系统
  - 媒体查询适配不同屏幕尺寸
  - 触摸友好的交互设计
  
  ### 2. 浏览器兼容性
  
  - 支持现代浏览器 (Chrome, Firefox, Safari, Edge)
  - 使用 Babel 转译 ES6+ 语法
  - Polyfill 支持旧版本浏览器
  
  ## 🚀 性能优化架构
  
  ### 1. 代码分割
  
  ```javascript
  // 路由懒加载
  component: () => import('@/views/room/roomList.vue')
  
  // 组件懒加载
  components: {
    RoomTree: () => import('@/components/room/roomTree.vue')
  }
  ```
  
  ### 2. 资源优化
  
  - 图片懒加载
  - CSS/JS 压缩
  - 静态资源 CDN 加速
  - 浏览器缓存策略
  
  ### 3. 运行时优化
  
  - Vue 虚拟 DOM 优化
  - 计算属性缓存
  - 事件委托
  - 防抖节流处理
  
  ## 🔧 开发工具架构
  
  ### 1. 构建工具
  
  ```
  Vue CLI 4.5.0
      ↓
  Webpack 4
      ↓
  Babel + ESLint + Sass
      ↓
  开发/生产环境构建
  ```
  
  ### 2. 代码质量
  
  - ESLint: 代码规范检查
  - Prettier: 代码格式化
  - Git Hooks: 提交前检查
  - 代码审查流程
  
  ### 3. 调试工具
  
  - Vue DevTools: Vue 组件调试
  - Chrome DevTools: 浏览器调试
  - 控制台日志: 开发调试
  - 网络面板: API 调试
  
  ## 📊 监控架构
  
  ### 1. 错误监控
  
  ```javascript
  // 全局错误处理
  Vue.config.errorHandler = function(err, vm, info) {
    console.error('Vue Error:', err, info);
    // 上报错误信息
  }
  ```
  
  ### 2. 性能监控
  
  - 页面加载时间
  - API 响应时间
  - 用户交互响应时间
  - 内存使用情况
  
  ### 3. 用户行为监控
  
  - 页面访问统计
  - 功能使用统计
  - 错误操作统计
  - 用户反馈收集
  
  ## 🔄 部署架构
  
  ### 1. 开发环境
  
  ```
  本地开发 → 热重载 → 代理转发 → 后端服务
      ↓         ↓         ↓         ↓
    npm run dev  实时更新   本地代理   测试环境
  ```
  
  ### 2. 生产环境
  
  ```
  代码构建 → 资源优化 → 静态部署 → CDN 加速
      ↓         ↓         ↓         ↓
    npm run build  压缩优化   服务器部署   全球加速
  ```
  
  ### 3. 环境配置
  
  ```javascript
  // 环境变量配置
  NODE_ENV=development  // 开发环境
  NODE_ENV=production   // 生产环境
  
  // API 地址配置
  BASE_API=http://localhost:8008  // 开发环境
  BASE_API=https://api.example.com  // 生产环境
  ```
  
  ---
  
  这个架构图展示了项目的整体结构和技术实现，帮助开发者快速理解项目的组织方式和各个模块之间的关系。