# property-web **Repository Path**: helloSk/property-web ## Basic Information - **Project Name**: property-web - **Description**: 物业管理系统是一个全面的数字化物业管理平台，旨在简化物业管理流程，提升服务效率。系统采用现代化前端技术栈，提供直观易用的界面和强大的功能支持。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-24 - **Last Updated**: 2026-02-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 物业管理系统 - Property Management System
Property Management System [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![Vue.js](https://img.shields.io/badge/Vue.js-3.x-brightgreen.svg)](https://vuejs.org/) [![TDesign](https://img.shields.io/badge/TDesign-VueNext-orange.svg)](https://tdesign.tencent.com/) [![Typescript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/) 一个现代化的物业管理系统前端解决方案，基于Vue 3、TypeScript和TDesign构建
## 🌟 系统概述 物业管理系统是一个全面的数字化物业管理平台，旨在简化物业管理流程，提升服务效率。系统采用现代化前端技术栈，提供直观易用的界面和强大的功能支持。 ### ✨ 核心特性 - **响应式设计**: 支持桌面端和移动端访问 - **国际化支持**: 支持中英文切换 - **权限管理**: 精细化的权限控制体系 - **数据可视化**: 图表展示关键业务数据 - **实时通知**: 消息推送功能 - **模块化架构**: 易于扩展和维护 ## 🚀 快速开始 ### 环境要求 - Node.js >= 18.18.0 - npm 或 yarn ### 安装步骤 1. 克隆项目 ```bash git clone cd property-web ``` 2. 安装依赖 ```bash npm install # 或者 yarn install ``` 3. 启动开发服务器 ```bash npm run dev # 或启动带Mock模式 npm run dev:mock ``` 4. 构建生产版本 ```bash npm run build ``` ## 🛠 技术栈 - **框架**: Vue 3.x (Composition API) - **语言**: TypeScript - **UI库**: TDesign Vue Next - **状态管理**: Pinia - **路由**: Vue Router 4.x - **构建工具**: Vite - **图表库**: AntV/G2 - **HTTP客户端**: Axios - **国际化**: Vue I18n ## 📁 项目结构 ``` property-web/ ├── public/ # 静态资源 ├── src/ │ ├── api/ # 接口定义 │ │ └── model/ # 接口模型定义 │ ├── assets/ # 静态资源 │ ├── components/ # 通用组件 │ ├── config/ # 配置文件 │ ├── constants/ # 常量定义 │ ├── hooks/ # Vue组合式函数 │ ├── layouts/ # 页面布局 │ ├── locales/ # 国际化配置 │ ├── pages/ # 页面组件 │ ├── router/ # 路由配置 │ ├── store/ # 状态管理 │ ├── types/ # 类型定义 │ ├── utils/ # 工具函数 │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── doc/ # 文档 │ └── readme_img/ # README相关图片 ├── .env.* # 环境变量配置 ├── vite.config.ts # Vite配置 ├── package.json # 项目配置 └── tsconfig.json # TypeScript配置 ``` ## 🔧 配置说明 ### 环境变量配置 项目使用 `.env` 文件进行环境配置： - `.env.development`: 开发环境配置 - `.env.release`: 生产环境配置 - `.env.test`: 测试环境配置 - `.env.site`: 站点环境配置 - `.env.mock`: Mock环境配置 主要配置项： - `VITE_BASE_URL`: 应用的基础路径 - `VITE_API_URL_PREFIX`: API接口前缀 - `VITE_IS_REQUEST_PROXY`: 是否启用请求代理 ### 代理配置 通过 [vite.config.ts](./vite.config.ts) 文件配置代理，将API请求转发到后端服务器： ```typescript server: { port: 3002, host: '127.0.0.1', proxy: VITE_IS_REQUEST_PROXY === 'true' ? { [VITE_API_URL_PREFIX]: 'http://127.0.0.1:8080/', } : undefined, } ``` ### 主题配置 系统支持多种主题模式： - 亮色主题 (Light) - 暗色主题 (Dark) - 自动模式 (Auto) 通过左侧设置面板可以调整布局、颜色等个性化设置。 ## 🧩 自定义组件 系统提供了多个可复用的自定义组件： ### 通用表格组件 ([common-table/index.vue](./src/components/common-table/index.vue)) 统一的表格展示组件，支持分页、排序、筛选等功能。 ### 图标选择组件 ([icon/iconSelect.vue](./src/components/icon/iconSelect.vue)) 集成TDesign图标库，提供便捷的图标选择功能。 ### 文件上传组件 ([oss-file/index.vue](./src/components/oss-file/index.vue)) 支持文件上传至对象存储服务，具备进度条、预览等功能。 ### 产品卡片组件 ([product-card/index.vue](./src/components/product-card/index.vue)) 用于展示产品信息的卡片组件，支持状态标记和操作菜单。 ### 结果页面组件 ([result/index.vue](./src/components/result/index.vue)) 统一的结果页面组件，适用于成功、失败、错误等场景。 ### 路由按钮权限组件 ([route-button-permission/index.vue](./src/components/route-button-permission/index.vue)) 根据路由权限动态控制按钮显示，实现精细化权限管理。 ### Cron表达式生成器 ([cron-generator/index.vue](./src/components/cron-generator/index.vue)) 可视化生成Cron表达式，用于定时任务配置。 ### 颜色选择器组件 ([color/index.vue](./src/components/color/index.vue)) 提供颜色选择功能，支持多种颜色格式。 ### 图表组件 ([g2-chart/](./src/components/g2-chart/)) 基于AntV/G2的图表组件集合，包括柱状图、折线图、多线图和堆叠柱状图。 ## 📊 功能模块 ### 仪表盘 ([dashboard/index.vue](./src/pages/dashboard/index.vue)) - 数据概览统计 - 关键指标展示 - 实时图表监控 ### 房屋管理 ([house/index.vue](./src/pages/house/index.vue)) - 房屋信息管理 - 房屋状态追踪 - 房屋分配管理 ### 业主管理 ([owner/index.vue](./src/pages/owner/index.vue)) - 业主信息维护 - 业主关系管理 - 业主服务记录 ### 巡检管理 ([inspection-plan/index.vue](./src/pages/inspection-plan/index.vue)) - 巡检计划制定 - 巡检任务分配 - 巡检结果跟踪 ### 报修管理 ([repair/index.vue](./src/pages/repair/index.vue)) - 报修申请提交 - 维修工单处理 - 维修进度跟踪 ### 我的巡检 ([my-inspection/index.vue](./src/pages/my-inspection/index.vue)) - 个人巡检任务 - 巡检记录查看 - 巡检报告生成 ### 我的报修 ([my-repair/index.vue](./src/pages/my-repair/index.vue)) - 个人报修记录 - 报修进度查询 - 服务质量评价 ### 公告管理 ([announcement/index.vue](./src/pages/announcement/index.vue)) - 公告发布管理 - 公告分类展示 - 公告阅读统计 ### 访客通行 ([access-card/index.vue](./src/pages/access-card/index.vue)) - 门禁卡管理 - 访客预约系统 - 访问记录追踪 ### 社区管理 ([community/index.vue](./src/pages/community/index.vue)) - 小区信息管理 - 区域划分设置 - 社区活动组织 ### 物业费管理 ([property-fee/index.vue](./src/pages/property-fee/index.vue)) - 物业费记录管理 - 费用统计分析 - 缴费提醒功能 ### 部门管理 ([department/index.vue](./src/pages/department/index.vue)) - 组织架构管理 - 部门权限分配 - 人员调配管理 ### 用户管理 ([user/index.vue](./src/pages/user/index.vue)) - 用户账号管理 - 角色权限配置 - 用户信息维护 ## 🎨 UI/UX 设计特色
Dashboard View

仪表盘界面 - 直观的数据展示

Table View

数据表格 - 清晰的信息组织

Form View

表单界面 - 简洁的操作体验

## 🔐 权限管理 系统实现了完善的权限管理体系： 1. **菜单权限**: 根据角色控制菜单访问权限 2. **按钮权限**: 精确到按钮级别的权限控制 3. **数据权限**: 控制数据访问范围 4. **操作权限**: 控制具体操作执行权限 ## 🌍 国际化 系统支持中英文切换： - 通过语言选择器快速切换 - 所有界面文本均支持国际化 - 日期、数字格式本地化处理 ## 📈 数据可视化 系统集成了多种图表类型： - 柱状图：用于对比分析 - 折线图：显示趋势变化 - 饼图：展示占比关系 - 散点图：分析相关性 ## 🔧 开发规范 ### 代码规范 - 使用ESLint和Prettier进行代码格式化 - 遵循TypeScript最佳实践 - 组件命名采用帕斯卡命名法 - 变量命名采用驼峰命名法 ### Git规范 - 使用Commitizen进行规范化提交 - 遵循Conventional Commits规范 - 提交信息包含类型、作用域和描述 ## 🚀 部署 ### 构建生产版本 ```bash npm run build ``` ### 预览构建结果 ```bash npm run preview ``` ### 部署到服务器 1. 将 `dist` 目录下的文件部署到Web服务器 2. 配置反向代理指向正确的API地址 3. 确保静态资源访问路径正确 ## 🤝 贡献指南 我们欢迎社区贡献！请遵循以下步骤： 1. Fork 仓库 2. 创建功能分支 3. 提交更改 4. 发起 Pull Request ## 📞 支持 如有问题或建议，请通过以下方式联系我们： - 提交Issue - 发送邮件 ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 ---
由 Vue.js、TDesign 和社区驱动的强大物业管理系统