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

## 🏗️ 整体架构

```
┌─────────────────────────────────────────────────────────────┐
│                        前端应用层                            │
├─────────────────────────────────────────────────────────────┤
│  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  // 生产环境
```

---

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