From fe9e5fc57dbd635c4dc5e8289b530e4d929f2254 Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Sat, 16 Aug 2025 11:43:58 +0800
Subject: [PATCH] v1.9 加入一些开发相关说明，方便大家快速上手
---
docs/README.md | 127 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
docs/开发环境配置指南.md | 494 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
docs/开发者快速上手指南.md | 324 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
docs/项目架构图.md | 328 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 1273 insertions(+), 0 deletions(-)
create mode 100644 docs/README.md
create mode 100644 docs/开发环境配置指南.md
create mode 100644 docs/开发者快速上手指南.md
create mode 100644 docs/项目架构图.md
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..b8c048b
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,127 @@
+# HC物业管理系统 - 开发文档
+
+欢迎来到物业管理系统开发文档！这里包含了小白开发者快速上手所需的所有信息。
+
+## 📚 文档目录
+
+### 🚀 快速上手
+- **[开发者快速上手指南](./开发者快速上手指南.md)** - 项目概述、技术栈、开发规范
+- **[项目架构图](./项目架构图.md)** - 整体架构、目录结构、技术架构详解
+- **[开发环境配置指南](./开发环境配置指南.md)** - 环境搭建、配置详解、常见问题解决
+
+## 🎯 适合人群
+
+- **前端新手** - 刚接触 Vue 的开发者
+- **项目新人** - 刚加入团队需要了解项目的开发者
+- **技术调研** - 需要了解项目技术架构的人员
+
+## 🏗️ 项目简介
+
+**物业管理系统** 是一个基于 Vue 2 的企业级 Web 应用，提供完整的物业管理功能：
+
+- 🏠 **社区管理** - 小区、楼栋、房屋管理
+- 👥 **业主管理** - 业主信息、家庭成员、车辆管理
+- 💰 **费用管理** - 物业费、水电费、停车费管理
+- 🔧 **工单管理** - 维修、投诉、巡检工单
+- 📱 **设备管理** - 门禁、监控、充电桩管理
+- 📊 **报表统计** - 各类数据统计和报表
+
+## 🛠️ 技术栈
+
+- **前端框架**: Vue 2.6.14
+- **UI 组件库**: Element UI 2.15.6
+- **路由管理**: Vue Router 3.5.1
+- **HTTP 客户端**: Axios 0.21.1
+- **国际化**: Vue I18n 8.26.7
+- **图表库**: ECharts 5.6.0
+- **构建工具**: Vue CLI 4.5.0
+
+## 🚀 快速开始
+
+### 1. 环境要求
+- Node.js >= 12.0.0
+- npm >= 6.0.0
+- Vue CLI >= 4.5.0
+
+### 2. 安装启动
+```bash
+# 克隆项目
+git clone [项目地址]
+cd MicroCommunityWeb
+
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+```
+
+### 3. 访问应用
+- 开发地址: http://localhost:3000
+- 自动打开浏览器: 是
+
+## 📖 学习路径
+
+### 第一阶段：环境搭建
+1. 阅读 [开发环境配置指南](./开发环境配置指南.md)
+2. 安装必要的开发工具
+3. 配置开发环境
+4. 成功启动项目
+
+### 第二阶段：项目了解
+1. 阅读 [项目架构图](./项目架构图.md)
+2. 了解项目目录结构
+3. 理解技术架构
+4. 熟悉开发规范
+
+### 第三阶段：开始开发
+1. 阅读 [开发者快速上手指南](./开发者快速上手指南.md)
+2. 学习 Vue 2 基础语法
+3. 熟悉 Element UI 组件
+4. 开始编写代码
+
+## 🔍 常见问题
+
+### 新手常见问题
+- **Q: 如何修改页面标题？**
+ A: 参考 [开发者快速上手指南](./开发者快速上手指南.md) 中的页面标题设置部分
+
+- **Q: 下拉框不显示内容怎么办？**
+ A: 参考 [开发者快速上手指南](./开发者快速上手指南.md) 中的常见问题部分
+
+- **Q: 如何添加新的页面？**
+ A: 参考 [开发者快速上手指南](./开发者快速上手指南.md) 中的开发流程部分
+
+### 环境配置问题
+- **Q: npm install 失败怎么办？**
+ A: 参考 [开发环境配置指南](./开发环境配置指南.md) 中的依赖安装问题部分
+
+- **Q: 开发服务器启动失败？**
+ A: 参考 [开发环境配置指南](./开发环境配置指南.md) 中的开发服务器问题部分
+
+## 📞 获取帮助
+
+### 文档资源
+- 项目 README: [../README.md](../README.md)
+- 安装说明: [../install.md](../install.md)
+- 官方文档: [Vue 2 官方文档](https://v2.vuejs.org/)
+
+### 团队支持
+- 遇到问题先查看本文档
+- 搜索现有 issue 避免重复
+- 联系团队成员获取帮助
+
+## 🎉 开始你的开发之旅
+
+现在你已经了解了项目的基本情况，建议按照以下顺序阅读文档：
+
+1. **[开发环境配置指南](./开发环境配置指南.md)** - 先搭建好开发环境
+2. **[项目架构图](./项目架构图.md)** - 了解项目整体结构
+3. **[开发者快速上手指南](./开发者快速上手指南.md)** - 学习开发规范和流程
+
+**祝您开发愉快！** 🚀
+
+---
+
+*最后更新时间: 2024年*
+*文档维护: 开发团队*
\ No newline at end of file
diff --git a/docs/开发环境配置指南.md b/docs/开发环境配置指南.md
new file mode 100644
index 0000000..6ad0b1b
--- /dev/null
+++ b/docs/开发环境配置指南.md
@@ -0,0 +1,494 @@
+# HC物业管理系统 - 开发环境配置指南
+
+## 🚀 环境搭建
+
+### 1. 基础环境要求
+
+#### Node.js 环境
+```bash
+# 推荐版本
+Node.js >= 12.0.0
+npm >= 6.0.0
+
+# 检查版本
+node --version
+npm --version
+```
+
+#### 包管理器
+```bash
+# 使用 npm (推荐)
+npm install
+
+# 或使用 yarn
+yarn install
+
+# 或使用 pnpm
+pnpm install
+```
+
+#### 开发工具
+- **VS Code** (推荐)
+- **WebStorm**
+- **Chrome DevTools**
+- **Vue DevTools**
+
+### 2. 项目初始化
+
+```bash
+# 克隆项目
+git clone [项目地址]
+cd MicroCommunityWeb
+
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+```
+
+## ⚙️ 配置文件详解
+
+### 1. package.json
+
+```json
+{
+ "name": "property_web",
+ "version": "1.0.0",
+ "scripts": {
+ "dev": "vue-cli-service serve", // 开发环境
+ "build": "vue-cli-service build", // 生产构建
+ "lint": "vue-cli-service lint" // 代码检查
+ },
+ "dependencies": {
+ "vue": "^2.6.14", // Vue 2 核心
+ "element-ui": "^2.15.6", // UI 组件库
+ "vue-router": "^3.5.1", // 路由管理
+ "axios": "^0.21.1", // HTTP 客户端
+ "vue-i18n": "^8.26.7", // 国际化
+ "echarts": "^5.6.0" // 图表库
+ }
+}
+```
+
+### 2. vue.config.js
+
+```javascript
+module.exports = {
+ devServer: {
+ port: 3000, // 开发服务器端口
+ open: true, // 自动打开浏览器
+ proxy: { // 代理配置
+ '/app': {
+ target: 'http://demo.homecommunity.cn/app',
+ changeOrigin: true,
+ pathRewrite: { '^/app': '' }
+ }
+ }
+ }
+}
+```
+
+### 3. .eslintrc.js
+
+```javascript
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ extends: [
+ 'plugin:vue/essential',
+ 'eslint:recommended'
+ ],
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
+```
+
+## 🔧 开发环境配置
+
+### 1. VS Code 配置
+
+#### 推荐扩展
+```json
+{
+ "recommendations": [
+ "Vue.volar", // Vue 2 支持
+ "Vue.vscode-typescript-vue-plugin",
+ "bradlc.vscode-tailwindcss", // Tailwind CSS
+ "esbenp.prettier-vscode", // 代码格式化
+ "ms-vscode.vscode-typescript-next",
+ "formulahendry.auto-rename-tag", // 自动重命名标签
+ "christian-kohler.path-intellisense", // 路径智能提示
+ "ms-vscode.vscode-json" // JSON 支持
+ ]
+}
+```
+
+#### 工作区设置
+```json
+{
+ "editor.formatOnSave": true,
+ "editor.tabSize": 2,
+ "editor.insertSpaces": true,
+ "files.autoSave": "afterDelay",
+ "emmet.includeLanguages": {
+ "vue-html": "html",
+ "vue": "html"
+ }
+}
+```
+
+### 2. 浏览器配置
+
+#### Chrome DevTools
+- 安装 Vue DevTools 扩展
+- 启用网络面板监控
+- 配置断点调试
+
+#### 开发模式
+```javascript
+// 在 main.js 中
+Vue.config.devtools = true
+Vue.config.productionTip = false
+```
+
+### 3. 环境变量配置
+
+#### .env 文件
+```bash
+# .env.development
+NODE_ENV=development
+VUE_APP_BASE_API=http://localhost:8008
+VUE_APP_TITLE=物业管理系统(开发环境)
+
+# .env.production
+NODE_ENV=production
+VUE_APP_BASE_API=https://api.example.com
+VUE_APP_TITLE=物业管理系统
+```
+
+#### 使用环境变量
+```javascript
+// 在组件中使用
+console.log(process.env.VUE_APP_BASE_API)
+console.log(process.env.VUE_APP_TITLE)
+```
+
+## 🚨 常见问题解决
+
+### 1. 依赖安装问题
+
+#### 问题：npm install 失败
+```bash
+# 清除 npm 缓存
+npm cache clean --force
+
+# 删除 node_modules 和 package-lock.json
+rm -rf node_modules package-lock.json
+
+# 重新安装
+npm install
+
+# 或使用淘宝镜像
+npm install --registry=https://registry.npmmirror.com
+```
+
+#### 问题：版本冲突
+```bash
+# 检查依赖版本
+npm ls
+
+# 强制安装
+npm install --force
+
+# 或使用 npm-check-updates 更新
+npx npm-check-updates -u
+npm install
+```
+
+### 2. 开发服务器问题
+
+#### 问题：端口被占用
+```bash
+# 查看端口占用
+netstat -ano | findstr :3000
+
+# 杀死进程
+taskkill /PID [进程ID] /F
+
+# 或修改端口
+# vue.config.js
+devServer: {
+ port: 3001
+}
+```
+
+#### 问题：代理不工作
+```javascript
+// 检查代理配置
+devServer: {
+ proxy: {
+ '/api': {
+ target: 'http://localhost:8008',
+ changeOrigin: true,
+ pathRewrite: { '^/api': '' },
+ logLevel: 'debug' // 添加调试日志
+ }
+ }
+}
+```
+
+### 3. 构建问题
+
+#### 问题：构建失败
+```bash
+# 清理构建缓存
+npm run build -- --clean
+
+# 检查构建日志
+npm run build --verbose
+
+# 或使用生产模式构建
+NODE_ENV=production npm run build
+```
+
+#### 问题：文件过大
+```javascript
+// vue.config.js 配置代码分割
+configureWebpack: {
+ optimization: {
+ splitChunks: {
+ chunks: 'all',
+ cacheGroups: {
+ vendor: {
+ name: 'chunk-vendors',
+ test: /[\\/]node_modules[\\/]/,
+ priority: 10,
+ chunks: 'initial'
+ }
+ }
+ }
+ }
+}
+```
+
+### 4. 代码质量问题
+
+#### 问题：ESLint 错误
+```bash
+# 自动修复
+npm run lint -- --fix
+
+# 检查特定文件
+npm run lint src/views/room/roomList.vue
+
+# 忽略特定规则
+// eslint-disable-next-line no-console
+console.log('debug info')
+```
+
+#### 问题：Prettier 格式化
+```bash
+# 安装 Prettier
+npm install --save-dev prettier
+
+# 格式化代码
+npx prettier --write "src/**/*.{js,vue,css,scss}"
+```
+
+## 🔍 调试技巧
+
+### 1. 控制台调试
+
+#### Vue 组件调试
+```javascript
+// 在组件中添加
+mounted() {
+ console.log('组件挂载完成:', this.$data)
+ console.log('组件属性:', this.$props)
+ console.log('组件方法:', this.$options.methods)
+}
+```
+
+#### 网络请求调试
+```javascript
+// 在 request.js 中添加
+service.interceptors.request.use(
+ config => {
+ console.log('请求配置:', config)
+ return config
+ },
+ error => {
+ console.error('请求错误:', error)
+ return Promise.reject(error)
+ }
+)
+```
+
+### 2. 断点调试
+
+#### 浏览器断点
+```javascript
+// 在代码中添加 debugger
+methods: {
+ handleSubmit() {
+ debugger; // 浏览器会在这里暂停
+ // 业务逻辑
+ }
+}
+```
+
+#### 条件断点
+```javascript
+// 只在特定条件下暂停
+if (this.formData.id) {
+ debugger; // 只在编辑模式下暂停
+}
+```
+
+### 3. 性能调试
+
+#### 性能监控
+```javascript
+// 监控方法执行时间
+methods: {
+ async fetchData() {
+ const startTime = performance.now()
+
+ try {
+ const data = await this.api.getData()
+ console.log('数据获取成功:', data)
+ } catch (error) {
+ console.error('数据获取失败:', error)
+ } finally {
+ const endTime = performance.now()
+ console.log(`方法执行时间: ${endTime - startTime}ms`)
+ }
+ }
+}
+```
+
+## 📱 移动端开发
+
+### 1. 响应式设计
+
+#### 媒体查询
+```scss
+// 移动端样式
+@media (max-width: 768px) {
+ .table-container {
+ overflow-x: auto;
+ }
+
+ .form-item {
+ margin-bottom: 15px;
+ }
+}
+```
+
+#### Element UI 响应式
+```vue
+
+
+
+
+
+
+
+```
+
+### 2. 触摸优化
+
+#### 触摸事件
+```javascript
+// 添加触摸支持
+mounted() {
+ if ('ontouchstart' in window) {
+ this.isMobile = true
+ this.initTouchEvents()
+ }
+},
+
+methods: {
+ initTouchEvents() {
+ // 触摸事件处理
+ }
+}
+```
+
+## 🚀 性能优化
+
+### 1. 代码分割
+
+#### 路由懒加载
+```javascript
+// 路由配置
+{
+ path: '/room/list',
+ component: () => import('@/views/room/roomList.vue')
+}
+```
+
+#### 组件懒加载
+```javascript
+// 组件注册
+components: {
+ RoomTree: () => import('@/components/room/roomTree.vue')
+}
+```
+
+### 2. 缓存策略
+
+#### 数据缓存
+```javascript
+// 使用 localStorage 缓存
+methods: {
+ getCachedData(key) {
+ const cached = localStorage.getItem(key)
+ if (cached) {
+ return JSON.parse(cached)
+ }
+ return null
+ },
+
+ setCachedData(key, data) {
+ localStorage.setItem(key, JSON.stringify(data))
+ }
+}
+```
+
+#### 组件缓存
+```vue
+
+
+
+
+
+```
+
+## 📚 学习资源
+
+### 1. 官方文档
+- [Vue 2 官方文档](https://v2.vuejs.org/)
+- [Element UI 文档](https://element.eleme.cn/)
+- [Vue Router 文档](https://router.vuejs.org/)
+
+### 2. 社区资源
+- [Vue.js 社区](https://vuejs.org/community/)
+- [Element UI 社区](https://github.com/ElemeFE/element)
+- [掘金 Vue 专栏](https://juejin.cn/tag/Vue.js)
+
+### 3. 工具推荐
+- [Vue DevTools](https://github.com/vuejs/devtools)
+- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
+- [Vue Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
+
+---
+
+**配置完成后，你就可以开始愉快的开发之旅了！** 🎉
+
+如果遇到其他问题，请查看项目文档或联系团队成员。
\ No newline at end of file
diff --git a/docs/开发者快速上手指南.md b/docs/开发者快速上手指南.md
new file mode 100644
index 0000000..d92172a
--- /dev/null
+++ b/docs/开发者快速上手指南.md
@@ -0,0 +1,324 @@
+# HC物业管理系统 - 开发者快速上手指南
+
+## 📖 项目概述
+
+**项目名称**: 物业管理系统 (MicroCommunityWeb)
+**技术栈**: Vue 2 + Element UI + Vue Router + Vuex + Axios
+**项目类型**: 企业级物业管理 Web 应用
+**版本**: v1.9
+
+这是一个基于 Vue 2 的物业管理系统，提供完整的物业管理功能，包括业主管理、费用管理、工单管理、设备管理等。
+
+## 🚀 快速开始
+
+### 环境要求
+- Node.js >= 12.0.0
+- npm >= 6.0.0
+- Vue CLI >= 4.5.0
+
+### 安装依赖
+```bash
+# 安装项目依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建生产版本
+npm run build
+```
+
+### 开发服务器配置
+- 端口: 3000
+- 自动打开浏览器: 是
+- 代理配置: 已配置后端 API 代理
+
+## 🏗️ 项目架构
+
+### 目录结构
+```
+src/
+├── api/ # API 接口层
+├── components/ # 公共组件
+├── conf/ # 配置文件
+├── i18n/ # 国际化配置
+├── router/ # 路由配置
+├── utils/ # 工具函数
+├── views/ # 页面组件
+├── App.vue # 根组件
+└── main.js # 入口文件
+```
+
+### 核心模块
+- **用户管理**: 员工、角色、权限管理
+- **社区管理**: 小区、楼栋、房屋管理
+- **业主管理**: 业主信息、家庭成员、车辆管理
+- **费用管理**: 物业费、水电费、停车费管理
+- **工单管理**: 维修、投诉、巡检工单
+- **设备管理**: 门禁、监控、充电桩管理
+- **报表统计**: 各类数据统计和报表
+
+## 🛠️ 技术特性
+
+### 前端技术栈
+- **Vue 2.6.14**: 渐进式 JavaScript 框架
+- **Element UI 2.15.6**: 基于 Vue 的组件库
+- **Vue Router 3.5.1**: 官方路由管理器
+- **Axios 0.21.1**: HTTP 客户端
+- **Vue I18n 8.26.7**: 国际化插件
+- **ECharts 5.6.0**: 数据可视化图表库
+
+### 开发工具
+- **Vue CLI 4.5.0**: Vue 项目脚手架
+- **ESLint**: 代码质量检查
+- **Sass**: CSS 预处理器
+- **Babel**: JavaScript 编译器
+
+## 📱 页面结构
+
+### 主要页面模块
+```
+views/
+├── index/ # 首页仪表板
+├── user/ # 用户登录相关
+├── layout/ # 主布局框架
+├── staff/ # 员工管理
+├── community/ # 社区管理
+├── room/ # 房屋管理
+├── owner/ # 业主管理
+├── fee/ # 费用管理
+├── work/ # 工单管理
+├── resource/ # 资源管理
+├── system/ # 系统管理
+├── report/ # 报表统计
+└── ...
+```
+
+### 路由配置
+项目使用模块化路由配置，主要路由文件：
+- `src/router/index.js` - 主路由配置
+- `src/router/feeRouter.js` - 费用管理路由
+- `src/router/workRouter.js` - 工单管理路由
+- `src/router/communityRouter.js` - 社区管理路由
+
+## 🔧 开发规范
+
+### 组件命名规范
+- 页面组件: 使用 PascalCase，如 `RoomList.vue`
+- 公共组件: 使用 PascalCase，如 `RoomTree.vue`
+- 组件名: 使用 kebab-case，如 `room-list`
+
+### 文件命名规范
+- 页面文件: 以 `List.vue`、`Detail.vue`、`Add.vue` 等结尾
+- API 文件: 以 `Api.js` 结尾
+- 语言文件: 以 `Lang.js` 结尾
+
+### 代码风格
+- 使用 ESLint 进行代码检查
+- 遵循 Vue 官方风格指南
+- 使用 2 空格缩进
+- 使用单引号
+
+## 🌐 国际化支持
+
+### 多语言配置
+项目支持中英文双语，语言文件位于 `src/i18n/` 目录：
+- `commonLang.js` - 通用语言包
+- `feeI18n.js` - 费用管理语言包
+- `workI18n.js` - 工单管理语言包
+- 等等...
+
+### 使用方式
+```javascript
+// 在模板中使用
+{{ $t('common.save') }}
+
+// 在 JavaScript 中使用
+this.$t('common.save')
+```
+
+## 🔌 API 接口
+
+### 接口配置
+- 基础 URL: 通过代理配置到后端服务
+- 超时时间: 15 秒
+- 请求拦截器: 自动添加认证头信息
+- 响应拦截器: 统一错误处理
+
+### 接口调用示例
+```javascript
+import { getDict } from '@/api/community/communityApi'
+
+// 获取字典数据
+const data = await getDict('tableName', 'columnName')
+```
+
+### 常用 API 模块
+- `communityApi.js` - 社区相关接口
+- `feeApi.js` - 费用相关接口
+- `workApi.js` - 工单相关接口
+- `userApi.js` - 用户相关接口
+
+## 🎨 UI 组件使用
+
+### Element UI 组件
+项目大量使用 Element UI 组件，常用组件：
+- `el-table` - 数据表格
+- `el-form` - 表单组件
+- `el-dialog` - 对话框
+- `el-select` - 下拉选择器
+- `el-button` - 按钮组件
+
+### 自定义组件
+项目包含多个自定义组件：
+- `RoomTree` - 房屋树形选择器
+- `UploadImage` - 图片上传组件
+- `ChooseOrgTree` - 组织树选择器
+
+## 📊 数据管理
+
+### 状态管理
+- 使用 Vue 的响应式数据管理
+- 局部状态存储在组件内部
+- 全局状态通过 Vue.prototype 挂载
+
+### 数据流
+1. 组件调用 API 接口
+2. 接口返回数据
+3. 组件更新本地状态
+4. 视图自动更新
+
+## 🔐 权限控制
+
+### 权限检查
+```javascript
+// 检查用户权限
+if (this.hasPrivilege('502020082453087940')) {
+ // 有权限的操作
+}
+```
+
+### 权限配置
+权限通过后端接口返回，存储在 localStorage 中：
+- `hc_staff_privilege`: 用户权限列表
+- `user`: 用户信息
+
+## 🚨 常见问题
+
+### 1. 下拉框不显示内容
+**问题**: `el-select` 下拉选项不显示
+**解决**: 检查数据格式，确保 `key` 和 `value` 属性一致
+
+### 2. 表格选择功能不工作
+**问题**: `el-table` 的 `type="selection"` 不工作
+**解决**: 添加 `@selection-change` 事件处理
+
+### 3. 路由跳转失败
+**问题**: 页面跳转后显示空白
+**解决**: 检查路由配置和组件导入路径
+
+### 4. API 请求失败
+**问题**: 接口调用返回错误
+**解决**: 检查网络代理配置和接口地址
+
+## 📝 开发流程
+
+### 1. 创建新页面
+```bash
+# 在 src/views/ 下创建新目录
+mkdir src/views/newModule
+
+# 创建页面组件
+touch src/views/newModule/NewModuleList.vue
+```
+
+### 2. 配置路由
+在对应的路由文件中添加新路由：
+```javascript
+{
+ path: '/views/newModule/newModuleList',
+ name: 'NewModuleList',
+ component: () => import('@/views/newModule/NewModuleList.vue')
+}
+```
+
+### 3. 创建 API 接口
+在 `src/api/` 下创建对应的 API 文件：
+```javascript
+import request from '@/utils/request'
+
+export function getNewModuleList(params) {
+ return request({
+ url: '/newModule/list',
+ method: 'get',
+ params
+ })
+}
+```
+
+### 4. 添加国际化支持
+在对应的语言文件中添加翻译：
+```javascript
+export const messages = {
+ zh: {
+ newModule: {
+ title: '新模块管理',
+ add: '新增'
+ }
+ }
+}
+```
+
+## 🎯 最佳实践
+
+### 1. 组件设计
+- 保持组件单一职责
+- 合理使用 props 和 emit
+- 避免组件间过度耦合
+
+### 2. 性能优化
+- 使用 `v-if` 和 `v-show` 合理控制显示
+- 避免在模板中使用复杂表达式
+- 合理使用计算属性和监听器
+
+### 3. 错误处理
+- 添加 try-catch 错误捕获
+- 提供用户友好的错误提示
+- 记录错误日志便于调试
+
+### 4. 代码复用
+- 提取公共逻辑到 mixins
+- 创建可复用的工具函数
+- 使用公共组件减少重复代码
+
+## 📚 学习资源
+
+### Vue 2 官方文档
+- [Vue 2 指南](https://v2.vuejs.org/v2/guide/)
+- [Vue 2 API 参考](https://v2.vuejs.org/v2/api/)
+
+### Element UI 文档
+- [Element UI 组件库](https://element.eleme.cn/#/zh-CN)
+
+### 项目相关
+- 查看现有组件代码了解项目风格
+- 参考相似功能的页面实现
+- 阅读 API 接口文档
+
+## 🤝 团队协作
+
+### 代码提交
+- 使用清晰的提交信息
+- 提交前进行代码检查
+- 及时同步最新代码
+
+### 问题反馈
+- 遇到问题先查看本文档
+- 搜索现有 issue 避免重复
+- 提供详细的错误信息和复现步骤
+
+---
+
+**祝您开发愉快！** 🎉
+
+如有问题，请查看项目文档或联系团队成员。
\ No newline at end of file
diff --git a/docs/项目架构图.md b/docs/项目架构图.md
new file mode 100644
index 0000000..f4d3e7d
--- /dev/null
+++ b/docs/项目架构图.md
@@ -0,0 +1,328 @@
+# 物业管理系统 - 项目架构图
+
+## 🏗️ 整体架构
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ 前端应用层 │
+├─────────────────────────────────────────────────────────────┤
+│ 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 // 生产环境
+```
+
+---
+
+这个架构图展示了项目的整体结构和技术实现，帮助开发者快速理解项目的组织方式和各个模块之间的关系。
\ No newline at end of file
--
libgit2 0.21.4