wuye / webui

Commit fe9e5fc57dbd635c4dc5e8289b530e4d929f2254

Authored by wuxw
1 parent bf647815

v1.9 加入一些开发相关说明，方便大家快速上手

Inline Side-by-side
Showing 4 changed files with 1273 additions and 0 deletions
docs/README.md 0 → 100644
  View file @fe9e5fc
  1 +# HC物业管理系统 - 开发文档
  2 +
  3 +欢迎来到物业管理系统开发文档！这里包含了小白开发者快速上手所需的所有信息。
  4 +
  5 +## 📚 文档目录
  6 +
  7 +### 🚀 快速上手
  8 +- **[开发者快速上手指南](./开发者快速上手指南.md)** - 项目概述、技术栈、开发规范
  9 +- **[项目架构图](./项目架构图.md)** - 整体架构、目录结构、技术架构详解
  10 +- **[开发环境配置指南](./开发环境配置指南.md)** - 环境搭建、配置详解、常见问题解决
  11 +
  12 +## 🎯 适合人群
  13 +
  14 +- **前端新手** - 刚接触 Vue 的开发者
  15 +- **项目新人** - 刚加入团队需要了解项目的开发者
  16 +- **技术调研** - 需要了解项目技术架构的人员
  17 +
  18 +## 🏗️ 项目简介
  19 +
  20 +**物业管理系统** 是一个基于 Vue 2 的企业级 Web 应用，提供完整的物业管理功能：
  21 +
  22 +- 🏠 **社区管理** - 小区、楼栋、房屋管理
  23 +- 👥 **业主管理** - 业主信息、家庭成员、车辆管理
  24 +- 💰 **费用管理** - 物业费、水电费、停车费管理
  25 +- 🔧 **工单管理** - 维修、投诉、巡检工单
  26 +- 📱 **设备管理** - 门禁、监控、充电桩管理
  27 +- 📊 **报表统计** - 各类数据统计和报表
  28 +
  29 +## 🛠️ 技术栈
  30 +
  31 +- **前端框架**: Vue 2.6.14
  32 +- **UI 组件库**: Element UI 2.15.6
  33 +- **路由管理**: Vue Router 3.5.1
  34 +- **HTTP 客户端**: Axios 0.21.1
  35 +- **国际化**: Vue I18n 8.26.7
  36 +- **图表库**: ECharts 5.6.0
  37 +- **构建工具**: Vue CLI 4.5.0
  38 +
  39 +## 🚀 快速开始
  40 +
  41 +### 1. 环境要求
  42 +- Node.js >= 12.0.0
  43 +- npm >= 6.0.0
  44 +- Vue CLI >= 4.5.0
  45 +
  46 +### 2. 安装启动
  47 +```bash
  48 +# 克隆项目
  49 +git clone [项目地址]
  50 +cd MicroCommunityWeb
  51 +
  52 +# 安装依赖
  53 +npm install
  54 +
  55 +# 启动开发服务器
  56 +npm run dev
  57 +```
  58 +
  59 +### 3. 访问应用
  60 +- 开发地址: http://localhost:3000
  61 +- 自动打开浏览器: 是
  62 +
  63 +## 📖 学习路径
  64 +
  65 +### 第一阶段：环境搭建
  66 +1. 阅读 [开发环境配置指南](./开发环境配置指南.md)
  67 +2. 安装必要的开发工具
  68 +3. 配置开发环境
  69 +4. 成功启动项目
  70 +
  71 +### 第二阶段：项目了解
  72 +1. 阅读 [项目架构图](./项目架构图.md)
  73 +2. 了解项目目录结构
  74 +3. 理解技术架构
  75 +4. 熟悉开发规范
  76 +
  77 +### 第三阶段：开始开发
  78 +1. 阅读 [开发者快速上手指南](./开发者快速上手指南.md)
  79 +2. 学习 Vue 2 基础语法
  80 +3. 熟悉 Element UI 组件
  81 +4. 开始编写代码
  82 +
  83 +## 🔍 常见问题
  84 +
  85 +### 新手常见问题
  86 +- **Q: 如何修改页面标题？**
  87 + A: 参考 [开发者快速上手指南](./开发者快速上手指南.md) 中的页面标题设置部分
  88 +
  89 +- **Q: 下拉框不显示内容怎么办？**
  90 + A: 参考 [开发者快速上手指南](./开发者快速上手指南.md) 中的常见问题部分
  91 +
  92 +- **Q: 如何添加新的页面？**
  93 + A: 参考 [开发者快速上手指南](./开发者快速上手指南.md) 中的开发流程部分
  94 +
  95 +### 环境配置问题
  96 +- **Q: npm install 失败怎么办？**
  97 + A: 参考 [开发环境配置指南](./开发环境配置指南.md) 中的依赖安装问题部分
  98 +
  99 +- **Q: 开发服务器启动失败？**
  100 + A: 参考 [开发环境配置指南](./开发环境配置指南.md) 中的开发服务器问题部分
  101 +
  102 +## 📞 获取帮助
  103 +
  104 +### 文档资源
  105 +- 项目 README: [../README.md](../README.md)
  106 +- 安装说明: [../install.md](../install.md)
  107 +- 官方文档: [Vue 2 官方文档](https://v2.vuejs.org/)
  108 +
  109 +### 团队支持
  110 +- 遇到问题先查看本文档
  111 +- 搜索现有 issue 避免重复
  112 +- 联系团队成员获取帮助
  113 +
  114 +## 🎉 开始你的开发之旅
  115 +
  116 +现在你已经了解了项目的基本情况，建议按照以下顺序阅读文档：
  117 +
  118 +1. **[开发环境配置指南](./开发环境配置指南.md)** - 先搭建好开发环境
  119 +2. **[项目架构图](./项目架构图.md)** - 了解项目整体结构
  120 +3. **[开发者快速上手指南](./开发者快速上手指南.md)** - 学习开发规范和流程
  121 +
  122 +**祝您开发愉快！** 🚀
  123 +
  124 +---
  125 +
  126 +*最后更新时间: 2024年*
  127 +*文档维护: 开发团队*
0 \ No newline at end of file 128 \ No newline at end of file
docs/开发环境配置指南.md 0 → 100644
  View file @fe9e5fc
  1 +# HC物业管理系统 - 开发环境配置指南
  2 +
  3 +## 🚀 环境搭建
  4 +
  5 +### 1. 基础环境要求
  6 +
  7 +#### Node.js 环境
  8 +```bash
  9 +# 推荐版本
  10 +Node.js >= 12.0.0
  11 +npm >= 6.0.0
  12 +
  13 +# 检查版本
  14 +node --version
  15 +npm --version
  16 +```
  17 +
  18 +#### 包管理器
  19 +```bash
  20 +# 使用 npm (推荐)
  21 +npm install
  22 +
  23 +# 或使用 yarn
  24 +yarn install
  25 +
  26 +# 或使用 pnpm
  27 +pnpm install
  28 +```
  29 +
  30 +#### 开发工具
  31 +- **VS Code** (推荐)
  32 +- **WebStorm**
  33 +- **Chrome DevTools**
  34 +- **Vue DevTools**
  35 +
  36 +### 2. 项目初始化
  37 +
  38 +```bash
  39 +# 克隆项目
  40 +git clone [项目地址]
  41 +cd MicroCommunityWeb
  42 +
  43 +# 安装依赖
  44 +npm install
  45 +
  46 +# 启动开发服务器
  47 +npm run dev
  48 +```
  49 +
  50 +## ⚙️ 配置文件详解
  51 +
  52 +### 1. package.json
  53 +
  54 +```json
  55 +{
  56 + "name": "property_web",
  57 + "version": "1.0.0",
  58 + "scripts": {
  59 + "dev": "vue-cli-service serve", // 开发环境
  60 + "build": "vue-cli-service build", // 生产构建
  61 + "lint": "vue-cli-service lint" // 代码检查
  62 + },
  63 + "dependencies": {
  64 + "vue": "^2.6.14", // Vue 2 核心
  65 + "element-ui": "^2.15.6", // UI 组件库
  66 + "vue-router": "^3.5.1", // 路由管理
  67 + "axios": "^0.21.1", // HTTP 客户端
  68 + "vue-i18n": "^8.26.7", // 国际化
  69 + "echarts": "^5.6.0" // 图表库
  70 + }
  71 +}
  72 +```
  73 +
  74 +### 2. vue.config.js
  75 +
  76 +```javascript
  77 +module.exports = {
  78 + devServer: {
  79 + port: 3000, // 开发服务器端口
  80 + open: true, // 自动打开浏览器
  81 + proxy: { // 代理配置
  82 + '/app': {
  83 + target: 'http://demo.homecommunity.cn/app',
  84 + changeOrigin: true,
  85 + pathRewrite: { '^/app': '' }
  86 + }
  87 + }
  88 + }
  89 +}
  90 +```
  91 +
  92 +### 3. .eslintrc.js
  93 +
  94 +```javascript
  95 +module.exports = {
  96 + root: true,
  97 + env: {
  98 + node: true
  99 + },
  100 + extends: [
  101 + 'plugin:vue/essential',
  102 + 'eslint:recommended'
  103 + ],
  104 + rules: {
  105 + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  106 + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  107 + }
  108 +}
  109 +```
  110 +
  111 +## 🔧 开发环境配置
  112 +
  113 +### 1. VS Code 配置
  114 +
  115 +#### 推荐扩展
  116 +```json
  117 +{
  118 + "recommendations": [
  119 + "Vue.volar", // Vue 2 支持
  120 + "Vue.vscode-typescript-vue-plugin",
  121 + "bradlc.vscode-tailwindcss", // Tailwind CSS
  122 + "esbenp.prettier-vscode", // 代码格式化
  123 + "ms-vscode.vscode-typescript-next",
  124 + "formulahendry.auto-rename-tag", // 自动重命名标签
  125 + "christian-kohler.path-intellisense", // 路径智能提示
  126 + "ms-vscode.vscode-json" // JSON 支持
  127 + ]
  128 +}
  129 +```
  130 +
  131 +#### 工作区设置
  132 +```json
  133 +{
  134 + "editor.formatOnSave": true,
  135 + "editor.tabSize": 2,
  136 + "editor.insertSpaces": true,
  137 + "files.autoSave": "afterDelay",
  138 + "emmet.includeLanguages": {
  139 + "vue-html": "html",
  140 + "vue": "html"
  141 + }
  142 +}
  143 +```
  144 +
  145 +### 2. 浏览器配置
  146 +
  147 +#### Chrome DevTools
  148 +- 安装 Vue DevTools 扩展
  149 +- 启用网络面板监控
  150 +- 配置断点调试
  151 +
  152 +#### 开发模式
  153 +```javascript
  154 +// 在 main.js 中
  155 +Vue.config.devtools = true
  156 +Vue.config.productionTip = false
  157 +```
  158 +
  159 +### 3. 环境变量配置
  160 +
  161 +#### .env 文件
  162 +```bash
  163 +# .env.development
  164 +NODE_ENV=development
  165 +VUE_APP_BASE_API=http://localhost:8008
  166 +VUE_APP_TITLE=物业管理系统(开发环境)
  167 +
  168 +# .env.production
  169 +NODE_ENV=production
  170 +VUE_APP_BASE_API=https://api.example.com
  171 +VUE_APP_TITLE=物业管理系统
  172 +```
  173 +
  174 +#### 使用环境变量
  175 +```javascript
  176 +// 在组件中使用
  177 +console.log(process.env.VUE_APP_BASE_API)
  178 +console.log(process.env.VUE_APP_TITLE)
  179 +```
  180 +
  181 +## 🚨 常见问题解决
  182 +
  183 +### 1. 依赖安装问题
  184 +
  185 +#### 问题：npm install 失败
  186 +```bash
  187 +# 清除 npm 缓存
  188 +npm cache clean --force
  189 +
  190 +# 删除 node_modules 和 package-lock.json
  191 +rm -rf node_modules package-lock.json
  192 +
  193 +# 重新安装
  194 +npm install
  195 +
  196 +# 或使用淘宝镜像
  197 +npm install --registry=https://registry.npmmirror.com
  198 +```
  199 +
  200 +#### 问题：版本冲突
  201 +```bash
  202 +# 检查依赖版本
  203 +npm ls
  204 +
  205 +# 强制安装
  206 +npm install --force
  207 +
  208 +# 或使用 npm-check-updates 更新
  209 +npx npm-check-updates -u
  210 +npm install
  211 +```
  212 +
  213 +### 2. 开发服务器问题
  214 +
  215 +#### 问题：端口被占用
  216 +```bash
  217 +# 查看端口占用
  218 +netstat -ano | findstr :3000
  219 +
  220 +# 杀死进程
  221 +taskkill /PID [进程ID] /F
  222 +
  223 +# 或修改端口
  224 +# vue.config.js
  225 +devServer: {
  226 + port: 3001
  227 +}
  228 +```
  229 +
  230 +#### 问题：代理不工作
  231 +```javascript
  232 +// 检查代理配置
  233 +devServer: {
  234 + proxy: {
  235 + '/api': {
  236 + target: 'http://localhost:8008',
  237 + changeOrigin: true,
  238 + pathRewrite: { '^/api': '' },
  239 + logLevel: 'debug' // 添加调试日志
  240 + }
  241 + }
  242 +}
  243 +```
  244 +
  245 +### 3. 构建问题
  246 +
  247 +#### 问题：构建失败
  248 +```bash
  249 +# 清理构建缓存
  250 +npm run build -- --clean
  251 +
  252 +# 检查构建日志
  253 +npm run build --verbose
  254 +
  255 +# 或使用生产模式构建
  256 +NODE_ENV=production npm run build
  257 +```
  258 +
  259 +#### 问题：文件过大
  260 +```javascript
  261 +// vue.config.js 配置代码分割
  262 +configureWebpack: {
  263 + optimization: {
  264 + splitChunks: {
  265 + chunks: 'all',
  266 + cacheGroups: {
  267 + vendor: {
  268 + name: 'chunk-vendors',
  269 + test: /[\\/]node_modules[\\/]/,
  270 + priority: 10,
  271 + chunks: 'initial'
  272 + }
  273 + }
  274 + }
  275 + }
  276 +}
  277 +```
  278 +
  279 +### 4. 代码质量问题
  280 +
  281 +#### 问题：ESLint 错误
  282 +```bash
  283 +# 自动修复
  284 +npm run lint -- --fix
  285 +
  286 +# 检查特定文件
  287 +npm run lint src/views/room/roomList.vue
  288 +
  289 +# 忽略特定规则
  290 +// eslint-disable-next-line no-console
  291 +console.log('debug info')
  292 +```
  293 +
  294 +#### 问题：Prettier 格式化
  295 +```bash
  296 +# 安装 Prettier
  297 +npm install --save-dev prettier
  298 +
  299 +# 格式化代码
  300 +npx prettier --write "src/**/*.{js,vue,css,scss}"
  301 +```
  302 +
  303 +## 🔍 调试技巧
  304 +
  305 +### 1. 控制台调试
  306 +
  307 +#### Vue 组件调试
  308 +```javascript
  309 +// 在组件中添加
  310 +mounted() {
  311 + console.log('组件挂载完成:', this.$data)
  312 + console.log('组件属性:', this.$props)
  313 + console.log('组件方法:', this.$options.methods)
  314 +}
  315 +```
  316 +
  317 +#### 网络请求调试
  318 +```javascript
  319 +// 在 request.js 中添加
  320 +service.interceptors.request.use(
  321 + config => {
  322 + console.log('请求配置:', config)
  323 + return config
  324 + },
  325 + error => {
  326 + console.error('请求错误:', error)
  327 + return Promise.reject(error)
  328 + }
  329 +)
  330 +```
  331 +
  332 +### 2. 断点调试
  333 +
  334 +#### 浏览器断点
  335 +```javascript
  336 +// 在代码中添加 debugger
  337 +methods: {
  338 + handleSubmit() {
  339 + debugger; // 浏览器会在这里暂停
  340 + // 业务逻辑
  341 + }
  342 +}
  343 +```
  344 +
  345 +#### 条件断点
  346 +```javascript
  347 +// 只在特定条件下暂停
  348 +if (this.formData.id) {
  349 + debugger; // 只在编辑模式下暂停
  350 +}
  351 +```
  352 +
  353 +### 3. 性能调试
  354 +
  355 +#### 性能监控
  356 +```javascript
  357 +// 监控方法执行时间
  358 +methods: {
  359 + async fetchData() {
  360 + const startTime = performance.now()
  361 +
  362 + try {
  363 + const data = await this.api.getData()
  364 + console.log('数据获取成功:', data)
  365 + } catch (error) {
  366 + console.error('数据获取失败:', error)
  367 + } finally {
  368 + const endTime = performance.now()
  369 + console.log(`方法执行时间: ${endTime - startTime}ms`)
  370 + }
  371 + }
  372 +}
  373 +```
  374 +
  375 +## 📱 移动端开发
  376 +
  377 +### 1. 响应式设计
  378 +
  379 +#### 媒体查询
  380 +```scss
  381 +// 移动端样式
  382 +@media (max-width: 768px) {
  383 + .table-container {
  384 + overflow-x: auto;
  385 + }
  386 +
  387 + .form-item {
  388 + margin-bottom: 15px;
  389 + }
  390 +}
  391 +```
  392 +
  393 +#### Element UI 响应式
  394 +```vue
  395 +<template>
  396 + <el-row :gutter="20">
  397 + <el-col :xs="24" :sm="12" :md="8" :lg="6">
  398 + <!-- 响应式列 -->
  399 + </el-col>
  400 + </el-row>
  401 +</template>
  402 +```
  403 +
  404 +### 2. 触摸优化
  405 +
  406 +#### 触摸事件
  407 +```javascript
  408 +// 添加触摸支持
  409 +mounted() {
  410 + if ('ontouchstart' in window) {
  411 + this.isMobile = true
  412 + this.initTouchEvents()
  413 + }
  414 +},
  415 +
  416 +methods: {
  417 + initTouchEvents() {
  418 + // 触摸事件处理
  419 + }
  420 +}
  421 +```
  422 +
  423 +## 🚀 性能优化
  424 +
  425 +### 1. 代码分割
  426 +
  427 +#### 路由懒加载
  428 +```javascript
  429 +// 路由配置
  430 +{
  431 + path: '/room/list',
  432 + component: () => import('@/views/room/roomList.vue')
  433 +}
  434 +```
  435 +
  436 +#### 组件懒加载
  437 +```javascript
  438 +// 组件注册
  439 +components: {
  440 + RoomTree: () => import('@/components/room/roomTree.vue')
  441 +}
  442 +```
  443 +
  444 +### 2. 缓存策略
  445 +
  446 +#### 数据缓存
  447 +```javascript
  448 +// 使用 localStorage 缓存
  449 +methods: {
  450 + getCachedData(key) {
  451 + const cached = localStorage.getItem(key)
  452 + if (cached) {
  453 + return JSON.parse(cached)
  454 + }
  455 + return null
  456 + },
  457 +
  458 + setCachedData(key, data) {
  459 + localStorage.setItem(key, JSON.stringify(data))
  460 + }
  461 +}
  462 +```
  463 +
  464 +#### 组件缓存
  465 +```vue
  466 +<template>
  467 + <keep-alive>
  468 + <router-view />
  469 + </keep-alive>
  470 +</template>
  471 +```
  472 +
  473 +## 📚 学习资源
  474 +
  475 +### 1. 官方文档
  476 +- [Vue 2 官方文档](https://v2.vuejs.org/)
  477 +- [Element UI 文档](https://element.eleme.cn/)
  478 +- [Vue Router 文档](https://router.vuejs.org/)
  479 +
  480 +### 2. 社区资源
  481 +- [Vue.js 社区](https://vuejs.org/community/)
  482 +- [Element UI 社区](https://github.com/ElemeFE/element)
  483 +- [掘金 Vue 专栏](https://juejin.cn/tag/Vue.js)
  484 +
  485 +### 3. 工具推荐
  486 +- [Vue DevTools](https://github.com/vuejs/devtools)
  487 +- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
  488 +- [Vue Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
  489 +
  490 +---
  491 +
  492 +**配置完成后，你就可以开始愉快的开发之旅了！** 🎉
  493 +
  494 +如果遇到其他问题，请查看项目文档或联系团队成员。
0 \ No newline at end of file 495 \ No newline at end of file
docs/开发者快速上手指南.md 0 → 100644
  View file @fe9e5fc
  1 +# HC物业管理系统 - 开发者快速上手指南
  2 +
  3 +## 📖 项目概述
  4 +
  5 +**项目名称**: 物业管理系统 (MicroCommunityWeb)
  6 +**技术栈**: Vue 2 + Element UI + Vue Router + Vuex + Axios
  7 +**项目类型**: 企业级物业管理 Web 应用
  8 +**版本**: v1.9
  9 +
  10 +这是一个基于 Vue 2 的物业管理系统，提供完整的物业管理功能，包括业主管理、费用管理、工单管理、设备管理等。
  11 +
  12 +## 🚀 快速开始
  13 +
  14 +### 环境要求
  15 +- Node.js >= 12.0.0
  16 +- npm >= 6.0.0
  17 +- Vue CLI >= 4.5.0
  18 +
  19 +### 安装依赖
  20 +```bash
  21 +# 安装项目依赖
  22 +npm install
  23 +
  24 +# 启动开发服务器
  25 +npm run dev
  26 +
  27 +# 构建生产版本
  28 +npm run build
  29 +```
  30 +
  31 +### 开发服务器配置
  32 +- 端口: 3000
  33 +- 自动打开浏览器: 是
  34 +- 代理配置: 已配置后端 API 代理
  35 +
  36 +## 🏗️ 项目架构
  37 +
  38 +### 目录结构
  39 +```
  40 +src/
  41 +├── api/ # API 接口层
  42 +├── components/ # 公共组件
  43 +├── conf/ # 配置文件
  44 +├── i18n/ # 国际化配置
  45 +├── router/ # 路由配置
  46 +├── utils/ # 工具函数
  47 +├── views/ # 页面组件
  48 +├── App.vue # 根组件
  49 +└── main.js # 入口文件
  50 +```
  51 +
  52 +### 核心模块
  53 +- **用户管理**: 员工、角色、权限管理
  54 +- **社区管理**: 小区、楼栋、房屋管理
  55 +- **业主管理**: 业主信息、家庭成员、车辆管理
  56 +- **费用管理**: 物业费、水电费、停车费管理
  57 +- **工单管理**: 维修、投诉、巡检工单
  58 +- **设备管理**: 门禁、监控、充电桩管理
  59 +- **报表统计**: 各类数据统计和报表
  60 +
  61 +## 🛠️ 技术特性
  62 +
  63 +### 前端技术栈
  64 +- **Vue 2.6.14**: 渐进式 JavaScript 框架
  65 +- **Element UI 2.15.6**: 基于 Vue 的组件库
  66 +- **Vue Router 3.5.1**: 官方路由管理器
  67 +- **Axios 0.21.1**: HTTP 客户端
  68 +- **Vue I18n 8.26.7**: 国际化插件
  69 +- **ECharts 5.6.0**: 数据可视化图表库
  70 +
  71 +### 开发工具
  72 +- **Vue CLI 4.5.0**: Vue 项目脚手架
  73 +- **ESLint**: 代码质量检查
  74 +- **Sass**: CSS 预处理器
  75 +- **Babel**: JavaScript 编译器
  76 +
  77 +## 📱 页面结构
  78 +
  79 +### 主要页面模块
  80 +```
  81 +views/
  82 +├── index/ # 首页仪表板
  83 +├── user/ # 用户登录相关
  84 +├── layout/ # 主布局框架
  85 +├── staff/ # 员工管理
  86 +├── community/ # 社区管理
  87 +├── room/ # 房屋管理
  88 +├── owner/ # 业主管理
  89 +├── fee/ # 费用管理
  90 +├── work/ # 工单管理
  91 +├── resource/ # 资源管理
  92 +├── system/ # 系统管理
  93 +├── report/ # 报表统计
  94 +└── ...
  95 +```
  96 +
  97 +### 路由配置
  98 +项目使用模块化路由配置，主要路由文件：
  99 +- `src/router/index.js` - 主路由配置
  100 +- `src/router/feeRouter.js` - 费用管理路由
  101 +- `src/router/workRouter.js` - 工单管理路由
  102 +- `src/router/communityRouter.js` - 社区管理路由
  103 +
  104 +## 🔧 开发规范
  105 +
  106 +### 组件命名规范
  107 +- 页面组件: 使用 PascalCase，如 `RoomList.vue`
  108 +- 公共组件: 使用 PascalCase，如 `RoomTree.vue`
  109 +- 组件名: 使用 kebab-case，如 `room-list`
  110 +
  111 +### 文件命名规范
  112 +- 页面文件: 以 `List.vue`、`Detail.vue`、`Add.vue` 等结尾
  113 +- API 文件: 以 `Api.js` 结尾
  114 +- 语言文件: 以 `Lang.js` 结尾
  115 +
  116 +### 代码风格
  117 +- 使用 ESLint 进行代码检查
  118 +- 遵循 Vue 官方风格指南
  119 +- 使用 2 空格缩进
  120 +- 使用单引号
  121 +
  122 +## 🌐 国际化支持
  123 +
  124 +### 多语言配置
  125 +项目支持中英文双语，语言文件位于 `src/i18n/` 目录：
  126 +- `commonLang.js` - 通用语言包
  127 +- `feeI18n.js` - 费用管理语言包
  128 +- `workI18n.js` - 工单管理语言包
  129 +- 等等...
  130 +
  131 +### 使用方式
  132 +```javascript
  133 +// 在模板中使用
  134 +{{ $t('common.save') }}
  135 +
  136 +// 在 JavaScript 中使用
  137 +this.$t('common.save')
  138 +```
  139 +
  140 +## 🔌 API 接口
  141 +
  142 +### 接口配置
  143 +- 基础 URL: 通过代理配置到后端服务
  144 +- 超时时间: 15 秒
  145 +- 请求拦截器: 自动添加认证头信息
  146 +- 响应拦截器: 统一错误处理
  147 +
  148 +### 接口调用示例
  149 +```javascript
  150 +import { getDict } from '@/api/community/communityApi'
  151 +
  152 +// 获取字典数据
  153 +const data = await getDict('tableName', 'columnName')
  154 +```
  155 +
  156 +### 常用 API 模块
  157 +- `communityApi.js` - 社区相关接口
  158 +- `feeApi.js` - 费用相关接口
  159 +- `workApi.js` - 工单相关接口
  160 +- `userApi.js` - 用户相关接口
  161 +
  162 +## 🎨 UI 组件使用
  163 +
  164 +### Element UI 组件
  165 +项目大量使用 Element UI 组件，常用组件：
  166 +- `el-table` - 数据表格
  167 +- `el-form` - 表单组件
  168 +- `el-dialog` - 对话框
  169 +- `el-select` - 下拉选择器
  170 +- `el-button` - 按钮组件
  171 +
  172 +### 自定义组件
  173 +项目包含多个自定义组件：
  174 +- `RoomTree` - 房屋树形选择器
  175 +- `UploadImage` - 图片上传组件
  176 +- `ChooseOrgTree` - 组织树选择器
  177 +
  178 +## 📊 数据管理
  179 +
  180 +### 状态管理
  181 +- 使用 Vue 的响应式数据管理
  182 +- 局部状态存储在组件内部
  183 +- 全局状态通过 Vue.prototype 挂载
  184 +
  185 +### 数据流
  186 +1. 组件调用 API 接口
  187 +2. 接口返回数据
  188 +3. 组件更新本地状态
  189 +4. 视图自动更新
  190 +
  191 +## 🔐 权限控制
  192 +
  193 +### 权限检查
  194 +```javascript
  195 +// 检查用户权限
  196 +if (this.hasPrivilege('502020082453087940')) {
  197 + // 有权限的操作
  198 +}
  199 +```
  200 +
  201 +### 权限配置
  202 +权限通过后端接口返回，存储在 localStorage 中：
  203 +- `hc_staff_privilege`: 用户权限列表
  204 +- `user`: 用户信息
  205 +
  206 +## 🚨 常见问题
  207 +
  208 +### 1. 下拉框不显示内容
  209 +**问题**: `el-select` 下拉选项不显示
  210 +**解决**: 检查数据格式，确保 `key` 和 `value` 属性一致
  211 +
  212 +### 2. 表格选择功能不工作
  213 +**问题**: `el-table` 的 `type="selection"` 不工作
  214 +**解决**: 添加 `@selection-change` 事件处理
  215 +
  216 +### 3. 路由跳转失败
  217 +**问题**: 页面跳转后显示空白
  218 +**解决**: 检查路由配置和组件导入路径
  219 +
  220 +### 4. API 请求失败
  221 +**问题**: 接口调用返回错误
  222 +**解决**: 检查网络代理配置和接口地址
  223 +
  224 +## 📝 开发流程
  225 +
  226 +### 1. 创建新页面
  227 +```bash
  228 +# 在 src/views/ 下创建新目录
  229 +mkdir src/views/newModule
  230 +
  231 +# 创建页面组件
  232 +touch src/views/newModule/NewModuleList.vue
  233 +```
  234 +
  235 +### 2. 配置路由
  236 +在对应的路由文件中添加新路由：
  237 +```javascript
  238 +{
  239 + path: '/views/newModule/newModuleList',
  240 + name: 'NewModuleList',
  241 + component: () => import('@/views/newModule/NewModuleList.vue')
  242 +}
  243 +```
  244 +
  245 +### 3. 创建 API 接口
  246 +在 `src/api/` 下创建对应的 API 文件：
  247 +```javascript
  248 +import request from '@/utils/request'
  249 +
  250 +export function getNewModuleList(params) {
  251 + return request({
  252 + url: '/newModule/list',
  253 + method: 'get',
  254 + params
  255 + })
  256 +}
  257 +```
  258 +
  259 +### 4. 添加国际化支持
  260 +在对应的语言文件中添加翻译：
  261 +```javascript
  262 +export const messages = {
  263 + zh: {
  264 + newModule: {
  265 + title: '新模块管理',
  266 + add: '新增'
  267 + }
  268 + }
  269 +}
  270 +```
  271 +
  272 +## 🎯 最佳实践
  273 +
  274 +### 1. 组件设计
  275 +- 保持组件单一职责
  276 +- 合理使用 props 和 emit
  277 +- 避免组件间过度耦合
  278 +
  279 +### 2. 性能优化
  280 +- 使用 `v-if` 和 `v-show` 合理控制显示
  281 +- 避免在模板中使用复杂表达式
  282 +- 合理使用计算属性和监听器
  283 +
  284 +### 3. 错误处理
  285 +- 添加 try-catch 错误捕获
  286 +- 提供用户友好的错误提示
  287 +- 记录错误日志便于调试
  288 +
  289 +### 4. 代码复用
  290 +- 提取公共逻辑到 mixins
  291 +- 创建可复用的工具函数
  292 +- 使用公共组件减少重复代码
  293 +
  294 +## 📚 学习资源
  295 +
  296 +### Vue 2 官方文档
  297 +- [Vue 2 指南](https://v2.vuejs.org/v2/guide/)
  298 +- [Vue 2 API 参考](https://v2.vuejs.org/v2/api/)
  299 +
  300 +### Element UI 文档
  301 +- [Element UI 组件库](https://element.eleme.cn/#/zh-CN)
  302 +
  303 +### 项目相关
  304 +- 查看现有组件代码了解项目风格
  305 +- 参考相似功能的页面实现
  306 +- 阅读 API 接口文档
  307 +
  308 +## 🤝 团队协作
  309 +
  310 +### 代码提交
  311 +- 使用清晰的提交信息
  312 +- 提交前进行代码检查
  313 +- 及时同步最新代码
  314 +
  315 +### 问题反馈
  316 +- 遇到问题先查看本文档
  317 +- 搜索现有 issue 避免重复
  318 +- 提供详细的错误信息和复现步骤
  319 +
  320 +---
  321 +
  322 +**祝您开发愉快！** 🎉
  323 +
  324 +如有问题，请查看项目文档或联系团队成员。
0 \ No newline at end of file 325 \ No newline at end of file
docs/项目架构图.md 0 → 100644
  View file @fe9e5fc
  1 +# 物业管理系统 - 项目架构图
  2 +
  3 +## 🏗️ 整体架构
  4 +
  5 +```
  6 +┌─────────────────────────────────────────────────────────────┐
  7 +│ 前端应用层 │
  8 +├─────────────────────────────────────────────────────────────┤
  9 +│ Vue 2 + Element UI + Vue Router + Vuex + Axios │
  10 +├─────────────────────────────────────────────────────────────┤
  11 +│ 业务逻辑层 │
  12 +├─────────────────────────────────────────────────────────────┤
  13 +│ 用户管理 │ 社区管理 │ 费用管理 │ 工单管理 │ 设备管理 │
  14 +├─────────────────────────────────────────────────────────────┤
  15 +│ 数据访问层 │
  16 +├─────────────────────────────────────────────────────────────┤
  17 +│ HTTP 请求 │ 本地存储 │ 权限验证 │ 错误处理 │
  18 +├─────────────────────────────────────────────────────────────┤
  19 +│ 后端服务层 │
  20 +└─────────────────────────────────────────────────────────────┘
  21 +```
  22 +
  23 +## 📁 目录结构详解
  24 +
  25 +### 1. 源码目录 (src/)
  26 +
  27 +```
  28 +src/
  29 +├── api/ # API 接口层
  30 +│ ├── community/ # 社区管理接口
  31 +│ ├── fee/ # 费用管理接口
  32 +│ ├── work/ # 工单管理接口
  33 +│ ├── user/ # 用户管理接口
  34 +│ ├── room/ # 房屋管理接口
  35 +│ ├── owner/ # 业主管理接口
  36 +│ ├── resource/ # 资源管理接口
  37 +│ ├── system/ # 系统管理接口
  38 +│ └── ...
  39 +├── components/ # 公共组件库
  40 +│ ├── common/ # 通用组件
  41 +│ ├── fee/ # 费用相关组件
  42 +│ ├── room/ # 房屋相关组件
  43 +│ ├── upload/ # 上传组件
  44 +│ └── ...
  45 +├── views/ # 页面组件
  46 +│ ├── index/ # 首页仪表板
  47 +│ ├── layout/ # 主布局框架
  48 +│ ├── user/ # 用户相关页面
  49 +│ ├── community/ # 社区管理页面
  50 +│ ├── fee/ # 费用管理页面
  51 +│ ├── work/ # 工单管理页面
  52 +│ └── ...
  53 +├── router/ # 路由配置
  54 +│ ├── index.js # 主路由配置
  55 +│ ├── feeRouter.js # 费用管理路由
  56 +│ ├── workRouter.js # 工单管理路由
  57 +│ └── ...
  58 +├── i18n/ # 国际化配置
  59 +│ ├── index.js # 国际化主配置
  60 +│ ├── commonLang.js # 通用语言包
  61 +│ ├── feeI18n.js # 费用管理语言包
  62 +│ └── ...
  63 +├── utils/ # 工具函数
  64 +│ ├── request.js # HTTP 请求封装
  65 +│ ├── dateUtil.js # 日期工具函数
  66 +│ ├── moneyUtil.js # 金额工具函数
  67 +│ └── ...
  68 +├── conf/ # 配置文件
  69 +│ └── config.js # 应用配置
  70 +├── App.vue # 根组件
  71 +└── main.js # 应用入口
  72 +```
  73 +
  74 +### 2. 配置文件
  75 +
  76 +```
  77 +项目根目录/
  78 +├── package.json # 项目依赖配置
  79 +├── vue.config.js # Vue CLI 配置
  80 +├── .eslintrc.js # ESLint 配置
  81 +├── .gitignore # Git 忽略文件
  82 +└── README.md # 项目说明
  83 +```
  84 +
  85 +## 🔄 数据流架构
  86 +
  87 +### 1. 单向数据流
  88 +
  89 +```
  90 +用户操作 → 组件事件 → API 调用 → 数据更新 → 视图渲染
  91 + ↓ ↓ ↓ ↓ ↓
  92 + 触发事件 事件处理 后端接口 状态变更 响应式更新
  93 +```
  94 +
  95 +### 2. 组件通信
  96 +
  97 +```
  98 +父组件 ←→ 子组件
  99 + ↓ ↓
  100 +Props Events
  101 + ↓ ↓
  102 +数据传递 事件通知
  103 +```
  104 +
  105 +### 3. 状态管理
  106 +
  107 +```
  108 +组件内部状态 (data) ←→ 全局状态 (Vue.prototype)
  109 + ↓ ↓
  110 + 响应式数据 全局方法/属性
  111 + ↓ ↓
  112 + 自动更新视图 权限检查/工具函数
  113 +```
  114 +
  115 +## 🌐 网络架构
  116 +
  117 +### 1. 请求流程
  118 +
  119 +```
  120 +前端组件 → Axios 实例 → 请求拦截器 → 后端 API → 响应拦截器 → 组件
  121 + ↓ ↓ ↓ ↓ ↓ ↓
  122 + 发起请求 统一配置 添加认证头 处理业务 统一处理 更新状态
  123 +```
  124 +
  125 +### 2. 代理配置
  126 +
  127 +```javascript
  128 +// vue.config.js
  129 +proxy: {
  130 + '/app': {
  131 + target: 'http://demo.homecommunity.cn/app',
  132 + changeOrigin: true,
  133 + pathRewrite: { '^/app': '' }
  134 + },
  135 + '/callComponent': {
  136 + target: 'http://demo.homecommunity.cn/callComponent',
  137 + changeOrigin: true,
  138 + pathRewrite: { '^/callComponent': '' }
  139 + }
  140 +}
  141 +```
  142 +
  143 +## 🔐 权限架构
  144 +
  145 +### 1. 权限控制流程
  146 +
  147 +```
  148 +用户登录 → 获取权限列表 → 存储到 localStorage → 组件权限检查 → 功能控制
  149 + ↓ ↓ ↓ ↓ ↓
  150 + 身份验证 后端返回权限 本地缓存权限 调用 hasPrivilege 显示/隐藏
  151 +```
  152 +
  153 +### 2. 权限检查实现
  154 +
  155 +```javascript
  156 +Vue.prototype.hasPrivilege = function(_privaleges) {
  157 + const privilegesToCheck = Array.isArray(_privaleges) ? _privaleges : [_privaleges];
  158 + let userPrivileges = localStorage.getItem('hc_staff_privilege');
  159 +
  160 + if (userPrivileges) {
  161 + userPrivileges = userPrivileges.split(',');
  162 + } else {
  163 + return false;
  164 + }
  165 +
  166 + return privilegesToCheck.some(item => userPrivileges.includes(item));
  167 +}
  168 +```
  169 +
  170 +## 🎨 UI 架构
  171 +
  172 +### 1. 组件层次结构
  173 +
  174 +```
  175 +App.vue (根组件)
  176 + ↓
  177 +Layout.vue (主布局)
  178 + ↓
  179 +Router View (路由视图)
  180 + ↓
  181 +页面组件 (如 RoomList.vue)
  182 + ↓
  183 +业务组件 (如 RoomTree.vue)
  184 + ↓
  185 +Element UI 组件 (如 el-table, el-form)
  186 +```
  187 +
  188 +### 2. 样式架构
  189 +
  190 +```
  191 +全局样式 (App.vue)
  192 + ↓
  193 +Element UI 主题样式
  194 + ↓
  195 +页面级样式 (scoped)
  196 + ↓
  197 +组件级样式 (scoped)
  198 +```
  199 +
  200 +## 📱 响应式架构
  201 +
  202 +### 1. 移动端适配
  203 +
  204 +- 使用 Element UI 的响应式栅格系统
  205 +- 媒体查询适配不同屏幕尺寸
  206 +- 触摸友好的交互设计
  207 +
  208 +### 2. 浏览器兼容性
  209 +
  210 +- 支持现代浏览器 (Chrome, Firefox, Safari, Edge)
  211 +- 使用 Babel 转译 ES6+ 语法
  212 +- Polyfill 支持旧版本浏览器
  213 +
  214 +## 🚀 性能优化架构
  215 +
  216 +### 1. 代码分割
  217 +
  218 +```javascript
  219 +// 路由懒加载
  220 +component: () => import('@/views/room/roomList.vue')
  221 +
  222 +// 组件懒加载
  223 +components: {
  224 + RoomTree: () => import('@/components/room/roomTree.vue')
  225 +}
  226 +```
  227 +
  228 +### 2. 资源优化
  229 +
  230 +- 图片懒加载
  231 +- CSS/JS 压缩
  232 +- 静态资源 CDN 加速
  233 +- 浏览器缓存策略
  234 +
  235 +### 3. 运行时优化
  236 +
  237 +- Vue 虚拟 DOM 优化
  238 +- 计算属性缓存
  239 +- 事件委托
  240 +- 防抖节流处理
  241 +
  242 +## 🔧 开发工具架构
  243 +
  244 +### 1. 构建工具
  245 +
  246 +```
  247 +Vue CLI 4.5.0
  248 + ↓
  249 +Webpack 4
  250 + ↓
  251 +Babel + ESLint + Sass
  252 + ↓
  253 +开发/生产环境构建
  254 +```
  255 +
  256 +### 2. 代码质量
  257 +
  258 +- ESLint: 代码规范检查
  259 +- Prettier: 代码格式化
  260 +- Git Hooks: 提交前检查
  261 +- 代码审查流程
  262 +
  263 +### 3. 调试工具
  264 +
  265 +- Vue DevTools: Vue 组件调试
  266 +- Chrome DevTools: 浏览器调试
  267 +- 控制台日志: 开发调试
  268 +- 网络面板: API 调试
  269 +
  270 +## 📊 监控架构
  271 +
  272 +### 1. 错误监控
  273 +
  274 +```javascript
  275 +// 全局错误处理
  276 +Vue.config.errorHandler = function(err, vm, info) {
  277 + console.error('Vue Error:', err, info);
  278 + // 上报错误信息
  279 +}
  280 +```
  281 +
  282 +### 2. 性能监控
  283 +
  284 +- 页面加载时间
  285 +- API 响应时间
  286 +- 用户交互响应时间
  287 +- 内存使用情况
  288 +
  289 +### 3. 用户行为监控
  290 +
  291 +- 页面访问统计
  292 +- 功能使用统计
  293 +- 错误操作统计
  294 +- 用户反馈收集
  295 +
  296 +## 🔄 部署架构
  297 +
  298 +### 1. 开发环境
  299 +
  300 +```
  301 +本地开发 → 热重载 → 代理转发 → 后端服务
  302 + ↓ ↓ ↓ ↓
  303 + npm run dev 实时更新 本地代理 测试环境
  304 +```
  305 +
  306 +### 2. 生产环境
  307 +
  308 +```
  309 +代码构建 → 资源优化 → 静态部署 → CDN 加速
  310 + ↓ ↓ ↓ ↓
  311 + npm run build 压缩优化 服务器部署 全球加速
  312 +```
  313 +
  314 +### 3. 环境配置
  315 +
  316 +```javascript
  317 +// 环境变量配置
  318 +NODE_ENV=development // 开发环境
  319 +NODE_ENV=production // 生产环境
  320 +
  321 +// API 地址配置
  322 +BASE_API=http://localhost:8008 // 开发环境
  323 +BASE_API=https://api.example.com // 生产环境
  324 +```
  325 +
  326 +---
  327 +
  328 +这个架构图展示了项目的整体结构和技术实现，帮助开发者快速理解项目的组织方式和各个模块之间的关系。
0 \ No newline at end of file 329 \ No newline at end of file