wuye / webui | GitLab

Browse Code »

Commit fe9e5fc57dbd635c4dc5e8289b530e4d929f2254

Authored by wuxw 2025-08-16 11:43:58 +0800

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	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	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	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	329	\ No newline at end of file
...	...