MicroCommunityWeb/docs/项目架构图.md

物业管理系统 - 项目架构图

🏗️ 整体架构

┌─────────────────────────────────────────────────────────────┐
│                        前端应用层                            │
├─────────────────────────────────────────────────────────────┤
│  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. 代理配置

// 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. 权限检查实现

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. 代码分割

// 路由懒加载
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. 错误监控

// 全局错误处理
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. 环境配置

// 环境变量配置
NODE_ENV=development  // 开发环境
NODE_ENV=production   // 生产环境

// API 地址配置
BASE_API=http://localhost:8008  // 开发环境
BASE_API=https://api.example.com  // 生产环境

---

这个架构图展示了项目的整体结构和技术实现，帮助开发者快速理解项目的组织方式和各个模块之间的关系。