# apartment-management-web **Repository Path**: itweiwei/apartment-management-web ## Basic Information - **Project Name**: apartment-management-web - **Description**: 公寓管理端 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-08-10 - **Last Updated**: 2025-08-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 公寓管理Web端 (Apartment Management Web) ## 项目概述 己悦生活平台 - 公寓管理端系统，专为小型公寓运营公司设计的一体化房源和业务管理平台。 ## 产品定位 专为小型公寓运营公司设计的一体化房源和业务管理平台，提供房源管理、租赁管理、维修工单、财务管理等核心功能。 ## 核心功能模块 ### 1. 房源管理模块 - 房源信息管理 - 房源状态管理 - 房源图片管理 - 房源推广管理 ### 2. 租赁管理模块 - 租客合同管理 - 业主合同管理 - 租客租金管理 - 业主房租管理 - 续租管理 - 退租管理 ### 3. 维修工单模块 - 维修工单管理 - 工单状态维护 - 维修记录管理 ### 4. 财务管理模块 - 账单管理 - 收支统计 - 财务报表 - 对账管理 ### 5. 租客信息模块 - 租客信息管理 - 客户标签管理 - 基础记录管理 ### 6. 数据报表模块 - 运营统计报表 - 房源统计报表 - 合约统计报表 - 财务统计报表 - 业绩统计报表 ### 7. 商城消费提成管理模块 - 提成规则配置 - 提成计算与记录 - 提成收入统计 ### 8. 系统设置模块 - 账号管理 - 权限控制 - 外部提佣管理 - 系统参数设置 - 数据备份 - 操作日志 ## 目标用户 - **主要用户**: 公寓运营公司管理者（30-50岁，大专及以上学历） - **次要用户**: 公寓运营公司员工（25-40岁，房源专员、财务人员、客服人员） ## 技术栈 - **框架**: Vue 3.x + TypeScript - **构建工具**: Vite 4.x - **UI组件库**: Element Plus - **状态管理**: Pinia - **路由管理**: Vue Router 4.x - **HTTP客户端**: Axios - **图表库**: ECharts - **地图服务**: 高德地图 / 百度地图 - **富文本编辑器**: Quill / TinyMCE - **文件上传**: Vue-Upload-Component - **表格组件**: Vue3-Table-Lite - **日期处理**: Day.js - **工具库**: Lodash - **CSS预处理器**: Sass/SCSS - **代码规范**: ESLint + Prettier - **测试框架**: Vitest + Vue Test Utils ## 目录结构 ``` apartment-management-web/ ├── public/ # 静态资源目录 │ ├── favicon.ico # 网站图标 │ ├── logo.png # 网站Logo │ ├── images/ # 图片资源 │ └── icons/ # 图标资源 ├── src/ # 源代码目录 │ ├── api/ # API接口 │ │ ├── auth.ts # 认证接口 │ │ ├── property.ts # 房源接口 │ │ ├── tenant.ts # 租客接口 │ │ ├── contract.ts # 合同接口 │ │ ├── payment.ts # 支付接口 │ │ ├── maintenance.ts # 维修接口 │ │ ├── report.ts # 报表接口 │ │ ├── notification.ts # 通知接口 │ │ ├── file.ts # 文件接口 │ │ └── index.ts # API统一导出 │ ├── assets/ # 资源文件 │ │ ├── images/ # 图片资源 │ │ ├── icons/ # 图标资源 │ │ ├── fonts/ # 字体资源 │ │ └── styles/ # 样式文件 │ │ ├── variables.scss # SCSS变量 │ │ ├── mixins.scss # SCSS混入 │ │ ├── global.scss # 全局样式 │ │ ├── reset.scss # 重置样式 │ │ └── themes/ # 主题样式 │ │ ├── default.scss # 默认主题 │ │ └── dark.scss # 暗色主题 │ ├── components/ # 公共组件 │ │ ├── common/ # 通用组件 │ │ │ ├── AppHeader.vue # 应用头部 │ │ │ ├── AppSidebar.vue # 侧边栏 │ │ │ ├── AppFooter.vue # 应用底部 │ │ │ ├── Breadcrumb.vue # 面包屑导航 │ │ │ ├── Loading.vue # 加载组件 │ │ │ ├── Empty.vue # 空状态组件 │ │ │ ├── ErrorBoundary.vue # 错误边界 │ │ │ └── BackToTop.vue # 返回顶部 │ │ ├── form/ # 表单组件 │ │ │ ├── FormBuilder.vue # 表单构建器 │ │ │ ├── SearchForm.vue # 搜索表单 │ │ │ ├── FilterForm.vue # 筛选表单 │ │ │ ├── UploadImage.vue # 图片上传 │ │ │ ├── UploadFile.vue # 文件上传 │ │ │ ├── DatePicker.vue # 日期选择器 │ │ │ ├── AddressPicker.vue # 地址选择器 │ │ │ └── RichEditor.vue # 富文本编辑器 │ │ ├── table/ # 表格组件 │ │ │ ├── DataTable.vue # 数据表格 │ │ │ ├── TableColumn.vue # 表格列 │ │ │ ├── TablePagination.vue # 分页组件 │ │ │ ├── TableFilter.vue # 表格筛选 │ │ │ └── TableExport.vue # 表格导出 │ │ ├── chart/ # 图表组件 │ │ │ ├── LineChart.vue # 折线图 │ │ │ ├── BarChart.vue # 柱状图 │ │ │ ├── PieChart.vue # 饼图 │ │ │ ├── AreaChart.vue # 面积图 │ │ │ ├── ScatterChart.vue # 散点图 │ │ │ └── MapChart.vue # 地图图表 │ │ ├── dialog/ # 弹窗组件 │ │ │ ├── ConfirmDialog.vue # 确认弹窗 │ │ │ ├── InfoDialog.vue # 信息弹窗 │ │ │ ├── FormDialog.vue # 表单弹窗 │ │ │ └── ImagePreview.vue # 图片预览 │ │ ├── layout/ # 布局组件 │ │ │ ├── GridLayout.vue # 网格布局 │ │ │ ├── FlexLayout.vue # 弹性布局 │ │ │ ├── CardLayout.vue # 卡片布局 │ │ │ └── TabLayout.vue # 标签布局 │ │ └── business/ # 业务组件 │ │ ├── PropertyCard.vue # 房源卡片 │ │ ├── TenantCard.vue # 租客卡片 │ │ ├── ContractCard.vue # 合同卡片 │ │ ├── PaymentCard.vue # 支付卡片 │ │ ├── MaintenanceCard.vue # 维修卡片 │ │ ├── PropertyMap.vue # 房源地图 │ │ ├── PropertyGallery.vue # 房源相册 │ │ ├── ContractPreview.vue # 合同预览 │ │ ├── PaymentChart.vue # 支付图表 │ │ └── StatisticsCard.vue # 统计卡片 │ ├── composables/ # 组合式函数 │ │ ├── useAuth.ts # 认证相关 │ │ ├── useApi.ts # API相关 │ │ ├── useTable.ts # 表格相关 │ │ ├── useForm.ts # 表单相关 │ │ ├── useChart.ts # 图表相关 │ │ ├── useUpload.ts # 上传相关 │ │ ├── usePermission.ts # 权限相关 │ │ ├── useTheme.ts # 主题相关 │ │ ├── useStorage.ts # 存储相关 │ │ ├── useWebSocket.ts # WebSocket相关 │ │ └── useUtils.ts # 工具函数 │ ├── directives/ # 自定义指令 │ │ ├── permission.ts # 权限指令 │ │ ├── loading.ts # 加载指令 │ │ ├── lazy.ts # 懒加载指令 │ │ ├── copy.ts # 复制指令 │ │ ├── debounce.ts # 防抖指令 │ │ ├── throttle.ts # 节流指令 │ │ └── index.ts # 指令统一导出 │ ├── layouts/ # 布局组件 │ │ ├── DefaultLayout.vue # 默认布局 │ │ ├── AuthLayout.vue # 认证布局 │ │ ├── BlankLayout.vue # 空白布局 │ │ └── PrintLayout.vue # 打印布局 │ ├── pages/ # 页面组件 │ │ ├── auth/ # 认证页面 │ │ │ ├── Login.vue # 登录页面 │ │ │ ├── Register.vue # 注册页面 │ │ │ ├── ForgotPassword.vue # 忘记密码 │ │ │ ├── ResetPassword.vue # 重置密码 │ │ │ └── Profile.vue # 个人资料 │ │ ├── dashboard/ # 仪表板 │ │ │ ├── Overview.vue # 概览页面 │ │ │ ├── Statistics.vue # 统计页面 │ │ │ ├── Analytics.vue # 分析页面 │ │ │ └── Reports.vue # 报表页面 │ │ ├── property/ # 房源管理 │ │ │ ├── PropertyList.vue # 房源列表 │ │ │ ├── PropertyDetail.vue # 房源详情 │ │ │ ├── PropertyForm.vue # 房源表单 │ │ │ ├── PropertyImages.vue # 房源图片 │ │ │ ├── PropertyFacilities.vue # 房源设施 │ │ │ ├── PropertyPricing.vue # 房源定价 │ │ │ └── PropertyStatus.vue # 房源状态 │ │ ├── tenant/ # 租客管理 │ │ │ ├── TenantList.vue # 租客列表 │ │ │ ├── TenantDetail.vue # 租客详情 │ │ │ ├── TenantForm.vue # 租客表单 │ │ │ ├── TenantHistory.vue # 租客历史 │ │ │ └── TenantVerification.vue # 租客认证 │ │ ├── contract/ # 合同管理 │ │ │ ├── ContractList.vue # 合同列表 │ │ │ ├── ContractDetail.vue # 合同详情 │ │ │ ├── ContractForm.vue # 合同表单 │ │ │ ├── ContractTemplate.vue # 合同模板 │ │ │ ├── ContractSign.vue # 合同签署 │ │ │ ├── ContractRenewal.vue # 合同续签 │ │ │ └── ContractTermination.vue # 合同终止 │ │ ├── payment/ # 财务管理 │ │ │ ├── PaymentList.vue # 支付列表 │ │ │ ├── PaymentDetail.vue # 支付详情 │ │ │ ├── PaymentForm.vue # 支付表单 │ │ │ ├── PaymentStatistics.vue # 支付统计 │ │ │ ├── BillManagement.vue # 账单管理 │ │ │ ├── RefundManagement.vue # 退款管理 │ │ │ └── FinancialReports.vue # 财务报表 │ │ ├── maintenance/ # 维修管理 │ │ │ ├── MaintenanceList.vue # 维修列表 │ │ │ ├── MaintenanceDetail.vue # 维修详情 │ │ │ ├── MaintenanceForm.vue # 维修表单 │ │ │ ├── MaintenanceSchedule.vue # 维修排期 │ │ │ ├── MaintenanceWorkers.vue # 维修工人 │ │ │ └── MaintenanceReports.vue # 维修报表 │ │ ├── notification/ # 通知管理 │ │ │ ├── NotificationList.vue # 通知列表 │ │ │ ├── NotificationDetail.vue # 通知详情 │ │ │ ├── NotificationForm.vue # 通知表单 │ │ │ ├── NotificationTemplate.vue # 通知模板 │ │ │ └── NotificationSettings.vue # 通知设置 │ │ ├── system/ # 系统管理 │ │ │ ├── UserManagement.vue # 用户管理 │ │ │ ├── RoleManagement.vue # 角色管理 │ │ │ ├── PermissionManagement.vue # 权限管理 │ │ │ ├── SystemSettings.vue # 系统设置 │ │ │ ├── LogManagement.vue # 日志管理 │ │ │ └── BackupRestore.vue # 备份恢复 │ │ └── error/ # 错误页面 │ │ ├── 404.vue # 404页面 │ │ ├── 403.vue # 403页面 │ │ ├── 500.vue # 500页面 │ │ └── NetworkError.vue # 网络错误 │ ├── plugins/ # 插件配置 │ │ ├── element-plus.ts # Element Plus配置 │ │ ├── echarts.ts # ECharts配置 │ │ ├── axios.ts # Axios配置 │ │ ├── dayjs.ts # Day.js配置 │ │ ├── lodash.ts # Lodash配置 │ │ └── index.ts # 插件统一导出 │ ├── router/ # 路由配置 │ │ ├── index.ts # 路由主文件 │ │ ├── routes.ts # 路由定义 │ │ ├── guards.ts # 路由守卫 │ │ ├── modules/ # 路由模块 │ │ │ ├── auth.ts # 认证路由 │ │ │ ├── dashboard.ts # 仪表板路由 │ │ │ ├── property.ts # 房源路由 │ │ │ ├── tenant.ts # 租客路由 │ │ │ ├── contract.ts # 合同路由 │ │ │ ├── payment.ts # 支付路由 │ │ │ ├── maintenance.ts # 维修路由 │ │ │ ├── notification.ts # 通知路由 │ │ │ └── system.ts # 系统路由 │ │ └── types.ts # 路由类型定义 │ ├── stores/ # 状态管理 │ │ ├── index.ts # Store主文件 │ │ ├── auth.ts # 认证状态 │ │ ├── user.ts # 用户状态 │ │ ├── property.ts # 房源状态 │ │ ├── tenant.ts # 租客状态 │ │ ├── contract.ts # 合同状态 │ │ ├── payment.ts # 支付状态 │ │ ├── maintenance.ts # 维修状态 │ │ ├── notification.ts # 通知状态 │ │ ├── system.ts # 系统状态 │ │ ├── app.ts # 应用状态 │ │ └── types.ts # 状态类型定义 │ ├── types/ # 类型定义 │ │ ├── api.ts # API类型 │ │ ├── auth.ts # 认证类型 │ │ ├── property.ts # 房源类型 │ │ ├── tenant.ts # 租客类型 │ │ ├── contract.ts # 合同类型 │ │ ├── payment.ts # 支付类型 │ │ ├── maintenance.ts # 维修类型 │ │ ├── notification.ts # 通知类型 │ │ ├── common.ts # 通用类型 │ │ └── index.ts # 类型统一导出 │ ├── utils/ # 工具函数 │ │ ├── request.ts # 请求工具 │ │ ├── auth.ts # 认证工具 │ │ ├── storage.ts # 存储工具 │ │ ├── format.ts # 格式化工具 │ │ ├── validate.ts # 验证工具 │ │ ├── date.ts # 日期工具 │ │ ├── file.ts # 文件工具 │ │ ├── url.ts # URL工具 │ │ ├── crypto.ts # 加密工具 │ │ ├── permission.ts # 权限工具 │ │ ├── constants.ts # 常量定义 │ │ └── index.ts # 工具统一导出 │ ├── App.vue # 根组件 │ ├── main.ts # 应用入口 │ └── env.d.ts # 环境变量类型 ├── tests/ # 测试文件 │ ├── unit/ # 单元测试 │ │ ├── components/ # 组件测试 │ │ ├── composables/ # 组合函数测试 │ │ ├── utils/ # 工具函数测试 │ │ └── stores/ # 状态管理测试 │ ├── integration/ # 集成测试 │ │ ├── api/ # API测试 │ │ ├── pages/ # 页面测试 │ │ └── workflows/ # 工作流测试 │ ├── e2e/ # 端到端测试 │ │ ├── auth.spec.ts # 认证测试 │ │ ├── property.spec.ts # 房源测试 │ │ ├── tenant.spec.ts # 租客测试 │ │ └── contract.spec.ts # 合同测试 │ ├── fixtures/ # 测试数据 │ │ ├── users.json # 用户数据 │ │ ├── properties.json # 房源数据 │ │ └── contracts.json # 合同数据 │ └── helpers/ # 测试辅助 │ ├── setup.ts # 测试设置 │ ├── mocks.ts # Mock数据 │ └── utils.ts # 测试工具 ├── docs/ # 文档目录 │ ├── development.md # 开发文档 │ ├── deployment.md # 部署文档 │ ├── api.md # API文档 │ ├── components.md # 组件文档 │ ├── style-guide.md # 样式指南 │ └── troubleshooting.md # 故障排除 ├── .env # 环境变量 ├── .env.development # 开发环境变量 ├── .env.production # 生产环境变量 ├── .gitignore # Git忽略文件 ├── .eslintrc.js # ESLint配置 ├── .prettierrc # Prettier配置 ├── tsconfig.json # TypeScript配置 ├── vite.config.ts # Vite配置 ├── package.json # 项目配置 ├── pnpm-lock.yaml # 依赖锁定文件 └── README.md # 项目说明 ``` ## 核心功能 ### 房源管理 - **房源列表**: 房源信息展示、搜索、筛选、排序 - **房源详情**: 房源基本信息、图片、设施、位置等 - **房源发布**: 房源信息录入、图片上传、设施配置 - **房源编辑**: 房源信息修改、状态更新、价格调整 - **房源统计**: 房源数量、出租率、收益统计 ### 租客管理 - **租客列表**: 租客信息展示、搜索、筛选 - **租客详情**: 租客基本信息、租住历史、信用记录 - **租客审核**: 租客身份验证、资质审核 - **租客沟通**: 在线消息、通知推送 - **租客评价**: 租客评分、评价管理 ### 合同管理 - **合同列表**: 合同信息展示、状态筛选 - **合同详情**: 合同条款、签署状态、履行情况 - **合同创建**: 合同模板选择、条款编辑、电子签署 - **合同续签**: 合同到期提醒、续签流程 - **合同终止**: 合同解除、押金退还 ### 财务管理 - **收支明细**: 租金收入、费用支出明细 - **账单管理**: 租金账单、水电费账单生成 - **支付记录**: 支付流水、支付状态跟踪 - **财务报表**: 收益分析、成本分析、利润统计 - **退款管理**: 押金退款、违约金处理 ### 维修管理 - **维修工单**: 维修申请、工单分派、进度跟踪 - **维修人员**: 维修工人管理、技能评级 - **维修记录**: 维修历史、费用记录 - **预防性维护**: 设备保养计划、定期检查 - **维修统计**: 维修频率、费用统计 ### 数据分析 - **经营概览**: 关键指标展示、趋势分析 - **房源分析**: 出租率、收益率、空置率分析 - **租客分析**: 租客画像、行为分析 - **财务分析**: 收入趋势、成本分析、利润分析 - **市场分析**: 区域对比、价格趋势 ## 页面功能 ### 仪表板页面 - **数据概览**: 关键业务指标卡片展示 - **图表分析**: 收益趋势、出租率变化图表 - **待办事项**: 待处理工单、到期合同提醒 - **快捷操作**: 常用功能快速入口 - **消息通知**: 系统通知、租客消息 ### 房源管理页面 - **房源列表**: 支持多条件搜索和筛选 - **房源卡片**: 房源图片、基本信息、状态展示 - **批量操作**: 批量修改状态、价格调整 - **地图视图**: 房源地理位置展示 - **导入导出**: Excel批量导入导出 ### 租客管理页面 - **租客档案**: 租客详细信息管理 - **租住历史**: 租客历史租住记录 - **信用评估**: 租客信用评分和评价 - **沟通记录**: 与租客的沟通历史 - **黑名单管理**: 问题租客标记和管理 ### 合同管理页面 - **合同流程**: 合同创建到终止的完整流程 - **电子签署**: 在线合同签署功能 - **模板管理**: 合同模板创建和编辑 - **到期提醒**: 合同到期自动提醒 - **法律条款**: 标准法律条款库 ### 财务管理页面 - **收支统计**: 收入支出统计图表 - **账单生成**: 自动生成各类账单 - **支付跟踪**: 支付状态实时跟踪 - **财务报表**: 多维度财务分析报表 - **税务管理**: 税务计算和申报 ## 开发指南 ### 环境准备 ```bash # 安装Node.js 18+ node --version # 安装pnpm npm install -g pnpm # 克隆项目 git clone cd apartment-management-web # 安装依赖 pnpm install # 配置环境变量 cp .env.example .env ``` ### 开发模式 ```bash # 启动开发服务器 pnpm dev # 代码检查 pnpm lint # 代码格式化 pnpm format # 类型检查 pnpm type-check # 运行测试 pnpm test # 运行E2E测试 pnpm test:e2e ``` ### 构建部署 ```bash # 构建生产版本 pnpm build # 预览构建结果 pnpm preview # 分析构建包 pnpm analyze # 部署到服务器 pnpm deploy ``` ## 开发规范 ### 代码规范 - 使用TypeScript进行类型检查 - 遵循ESLint和Prettier代码规范 - 使用Vue 3 Composition API - 组件命名采用PascalCase - 文件命名采用kebab-case ### 组件规范 - 组件职责单一，可复用性强 - Props定义明确的类型和默认值 - 事件命名采用kebab-case - 使用组合式函数抽取逻辑 - 添加必要的注释和文档 ### 样式规范 - 使用SCSS预处理器 - 采用BEM命名规范 - 使用CSS变量定义主题 - 响应式设计适配多端 - 优化性能避免重绘重排 ### API规范 - 统一的错误处理机制 - 请求响应拦截器 - 接口类型定义 - 加载状态管理 - 缓存策略优化 ## 性能优化 ### 构建优化 - 代码分割和懒加载 - Tree Shaking去除无用代码 - 资源压缩和优化 - CDN加速静态资源 - 浏览器缓存策略 ### 运行时优化 - 虚拟滚动处理大列表 - 图片懒加载和压缩 - 防抖节流优化交互 - 内存泄漏检测和修复 - 首屏加载时间优化 ### 用户体验优化 - 骨架屏和加载动画 - 错误边界和降级处理 - 离线缓存和PWA - 无障碍访问支持 - 多语言国际化 ## 部署配置 ### 环境配置 - 开发环境：本地开发调试 - 测试环境：功能测试验证 - 预发环境：生产前验证 - 生产环境：正式线上环境 ### 部署流程 1. 代码提交和审查 2. 自动化测试验证 3. 构建生产版本 4. 部署到目标环境 5. 健康检查和监控 ### 监控告警 - 页面性能监控 - 错误日志收集 - 用户行为分析 - 业务指标监控 - 异常告警通知 ## 注意事项 1. 确保数据安全和用户隐私保护 2. 做好权限控制和访问限制 3. 优化移动端适配和响应式设计 4. 考虑SEO优化和搜索引擎友好 5. 建立完善的错误处理和日志记录 6. 定期更新依赖包和安全补丁