mirror of
http://183.237.82.114:10086/kilo/leaser_front.git
synced 2026-10-23 20:05:24 +00:00
396 lines
No EOL
10 KiB
Markdown
396 lines
No EOL
10 KiB
Markdown
# 租赁管理系统 (Leaser Management System)
|
||
|
||
<div align="center">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
一个基于 Vue 3 + TypeScript + Arco Design 的现代化租赁管理系统
|
||
|
||
</div>
|
||
|
||
## 📖 项目介绍
|
||
|
||
本系统是一个功能完整的租赁管理平台，为物业管理公司、房地产企业提供全方位的租赁业务解决方案。系统采用现代化的前端技术栈，具有优秀的用户体验和高性能表现。
|
||
|
||
### ✨ 核心功能
|
||
|
||
- 🏢 **项目管理** - 商业综合体、写字楼、园区等项目的全生命周期管理
|
||
- 🏠 **空间管理** - 房源信息管理、房源剖视、可租面积统计
|
||
- 📋 **合同管理** - 租赁合同的创建、审批、归档和模板管理
|
||
- 👥 **租户管理** - 租客信息维护、联系人管理、租赁关系追踪
|
||
- 💰 **财务管理** - 账单生成、资金流水、收支统计
|
||
- 🏡 **物业管理** - 水电管理、预约服务、维修记录
|
||
- ⚙️ **系统设置** - 用户权限、角色管理、系统配置
|
||
|
||
## 🛠 技术栈
|
||
|
||
### 核心框架
|
||
- **Vue 3.2.40** - 渐进式 JavaScript 框架
|
||
- **TypeScript 4.8.4** - JavaScript 的超集，提供类型安全
|
||
- **Vite 3.2.5** - 下一代前端构建工具
|
||
|
||
### UI 组件库
|
||
- **Arco Design 2.44.7** - 字节跳动开源的企业级设计语言和React UI库
|
||
|
||
### 状态管理
|
||
- **Pinia 2.0.23** - Vue 3 的状态管理库
|
||
- **pinia-plugin-persistedstate** - 状态持久化插件
|
||
|
||
### 路由管理
|
||
- **Vue Router 4.0.14** - Vue.js 官方路由管理器
|
||
|
||
### 工具库
|
||
- **Axios 0.24.0** - HTTP 客户端
|
||
- **Day.js 1.11.5** - 轻量级日期处理库
|
||
- **Lodash 4.17.21** - JavaScript 实用工具库
|
||
- **ECharts 5.4.0** - 数据可视化图表库
|
||
|
||
### 开发工具
|
||
- **ESLint** - 代码质量检查
|
||
- **Prettier** - 代码格式化
|
||
- **Stylelint** - CSS 代码检查
|
||
- **Husky** - Git hooks 管理
|
||
- **Commitlint** - 提交信息规范
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
leaser_front/
|
||
├── 📁 config/ # 构建配置
|
||
│ ├── 📁 plugin/ # Vite 插件配置
|
||
│ ├── vite.config.base.ts # Vite 基础配置
|
||
│ ├── vite.config.dev.ts # 开发环境配置
|
||
│ └── vite.config.prod.ts # 生产环境配置
|
||
├── 📁 src/
|
||
│ ├── 📁 api/ # API 接口
|
||
│ ├── 📁 assets/ # 静态资源
|
||
│ ├── 📁 components/ # 公共组件
|
||
│ ├── 📁 constants/ # 常量定义
|
||
│ ├── 📁 directive/ # 自定义指令
|
||
│ ├── 📁 hooks/ # 组合式 API
|
||
│ ├── 📁 layout/ # 布局组件
|
||
│ ├── 📁 locale/ # 国际化
|
||
│ ├── 📁 router/ # 路由配置
|
||
│ ├── 📁 store/ # 状态管理
|
||
│ ├── 📁 types/ # TypeScript 类型定义
|
||
│ ├── 📁 utils/ # 工具函数
|
||
│ ├── 📁 views/ # 页面组件
|
||
│ ├── App.vue # 根组件
|
||
│ └── main.ts # 入口文件
|
||
├── 📄 .env.development # 开发环境变量
|
||
├── 📄 .env.production # 生产环境变量
|
||
├── 📄 .eslintrc.js # ESLint 配置
|
||
├── 📄 .stylelintrc.js # Stylelint 配置
|
||
├── 📄 commitlint.config.js # 提交规范配置
|
||
├── 📄 tsconfig.json # TypeScript 配置
|
||
└── 📄 package.json # 项目依赖
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- **Node.js** >= 14.0.0
|
||
- **pnpm** >= 7.0.0 (推荐)
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
# 克隆项目
|
||
git clone <repository-url>
|
||
cd leaser_front
|
||
|
||
# 安装依赖
|
||
pnpm install
|
||
```
|
||
|
||
### 开发环境
|
||
|
||
```bash
|
||
# 启动开发服务器
|
||
pnpm run dev
|
||
|
||
# 访问 http://localhost:5173
|
||
```
|
||
|
||
### 构建部署
|
||
|
||
```bash
|
||
# 类型检查
|
||
pnpm run type:check
|
||
|
||
# 构建生产版本
|
||
pnpm run build
|
||
|
||
# 预览构建结果
|
||
pnpm run preview
|
||
|
||
# 构建分析
|
||
pnpm run report
|
||
```
|
||
|
||
## 🔧 开发指南
|
||
|
||
### 代码规范
|
||
|
||
项目采用严格的代码规范，确保代码质量和团队协作效率：
|
||
|
||
```bash
|
||
# 代码检查
|
||
pnpm run lint
|
||
|
||
# 代码格式化
|
||
pnpm run format
|
||
|
||
# 提交前自动检查 (已配置 git hooks)
|
||
git commit -m "feat: 新功能"
|
||
```
|
||
|
||
### 提交规范
|
||
|
||
遵循 [Conventional Commits](https://conventionalcommits.org/) 规范：
|
||
|
||
```bash
|
||
# 功能开发
|
||
git commit -m "feat: 添加用户管理功能"
|
||
|
||
# 问题修复
|
||
git commit -m "fix: 修复登录状态异常问题"
|
||
|
||
# 文档更新
|
||
git commit -m "docs: 更新API文档"
|
||
|
||
# 样式调整
|
||
git commit -m "style: 调整按钮样式"
|
||
|
||
# 重构代码
|
||
git commit -m "refactor: 重构用户认证逻辑"
|
||
```
|
||
|
||
### 目录规范
|
||
|
||
#### 新增页面
|
||
```bash
|
||
src/views/
|
||
├── business/
|
||
│ ├── project/
|
||
│ │ ├── index.vue # 页面主文件
|
||
│ │ ├── components/ # 页面专用组件
|
||
│ │ └── hooks/ # 页面专用逻辑
|
||
```
|
||
|
||
#### 新增组件
|
||
```bash
|
||
src/components/
|
||
├── common/ # 通用组件
|
||
├── business/ # 业务组件
|
||
└── form/ # 表单组件
|
||
```
|
||
|
||
#### 类型定义
|
||
```bash
|
||
src/types/
|
||
├── api.ts # API 相关类型
|
||
├── business.ts # 业务相关类型
|
||
└── common.ts # 通用类型
|
||
```
|
||
|
||
### 状态管理
|
||
|
||
项目使用 Pinia 进行状态管理，并配置了持久化：
|
||
|
||
```typescript
|
||
// 创建新的 store
|
||
import { defineStore } from 'pinia'
|
||
|
||
export const useExampleStore = defineStore('example', {
|
||
state: () => ({
|
||
data: null,
|
||
}),
|
||
|
||
// 配置持久化
|
||
persist: {
|
||
key: 'example-store',
|
||
storage: localStorage,
|
||
pick: ['data'], // 只持久化必要数据
|
||
},
|
||
|
||
actions: {
|
||
async fetchData() {
|
||
// 异步操作
|
||
},
|
||
},
|
||
})
|
||
```
|
||
|
||
## 🌟 最新优化特性
|
||
|
||
### ⚡ 性能优化
|
||
|
||
- **智能路由预加载** - 基于用户角色和访问模式的智能预加载策略
|
||
- **代码分割优化** - 按功能模块进行精细化 chunk 分割
|
||
- **状态持久化** - 关键状态本地存储，减少重复请求
|
||
- **构建优化** - Terser 压缩，生产环境移除 console
|
||
|
||
### 🔒 类型安全
|
||
|
||
- **完整的 TypeScript 覆盖** - 业务逻辑、API 接口全面类型化
|
||
- **严格的类型检查** - 减少运行时错误，提升开发效率
|
||
- **枚举类型规范** - 业务状态、类型使用枚举管理
|
||
|
||
### 🎨 开发体验
|
||
|
||
- **ESLint + Prettier** - 统一的代码风格
|
||
- **Git Hooks** - 提交前自动检查和格式化
|
||
- **环境配置** - 开发/生产环境配置分离
|
||
- **热更新** - 开发过程中的快速反馈
|
||
|
||
## 🗂 核心模块
|
||
|
||
### 🏢 业务管理
|
||
- **项目管理** - 支持商业综合体、写字楼、园区等多种项目类型
|
||
- **空间管理** - 可视化房源管理，支持 CAD 图纸导入
|
||
- **合同管理** - 完整的合同生命周期管理
|
||
- **租户管理** - 租客档案、联系人信息维护
|
||
|
||
### 💰 财务模块
|
||
- **账单管理** - 自动生成租金、物业费等各类账单
|
||
- **资金管理** - 收支流水、财务报表
|
||
|
||
### 🏡 物业服务
|
||
- **设施管理** - 水电抄表、设备维护
|
||
- **服务预约** - 在线预约各类物业服务
|
||
|
||
### ⚙️ 系统管理
|
||
- **用户管理** - 多角色权限控制
|
||
- **系统设置** - 灵活的系统参数配置
|
||
|
||
## 🔐 权限管理
|
||
|
||
系统采用基于角色的权限控制（RBAC）：
|
||
|
||
```typescript
|
||
// 权限配置示例
|
||
{
|
||
path: '/business/project',
|
||
meta: {
|
||
requiresAuth: true,
|
||
roles: ['admin', 'manager'],
|
||
permissionKey: 'businessProject',
|
||
}
|
||
}
|
||
```
|
||
|
||
### 角色说明
|
||
- **admin** - 系统管理员，拥有全部权限
|
||
- **manager** - 业务管理员，可管理业务相关功能
|
||
- **user** - 普通用户，只能查看和操作被授权的内容
|
||
|
||
## 📱 响应式设计
|
||
|
||
系统采用响应式设计，支持多种设备：
|
||
|
||
- **桌面端** - 1920px 及以上
|
||
- **笔记本** - 1366px - 1920px
|
||
- **平板** - 768px - 1366px
|
||
- **手机** - 768px 以下
|
||
|
||
## 🌐 浏览器支持
|
||
|
||
- **Chrome** >= 88
|
||
- **Firefox** >= 85
|
||
- **Safari** >= 14
|
||
- **Edge** >= 88
|
||
|
||
## 📊 性能指标
|
||
|
||
经过优化后的性能表现：
|
||
|
||
- **首屏加载时间** - < 2s
|
||
- **页面切换** - < 500ms (预加载优化)
|
||
- **构建产物大小** - 优化后减少 30%
|
||
- **内存使用** - 稳定在 50MB 以下
|
||
|
||
## 🚢 部署指南
|
||
|
||
### 环境变量配置
|
||
|
||
```bash
|
||
# .env.production
|
||
VITE_APP_TITLE=租赁管理系统
|
||
VITE_APP_BASE_URL=https://api.yourdomain.com
|
||
VITE_APP_MODE=production
|
||
VITE_APP_DEBUG=false
|
||
```
|
||
|
||
### Docker 部署
|
||
|
||
```dockerfile
|
||
FROM nginx:alpine
|
||
|
||
COPY dist/ /usr/share/nginx/html/
|
||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||
|
||
EXPOSE 80
|
||
```
|
||
|
||
### Nginx 配置
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name localhost;
|
||
|
||
location / {
|
||
root /usr/share/nginx/html;
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
location /api {
|
||
proxy_pass http://backend:8080;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🤝 贡献指南
|
||
|
||
我们欢迎所有形式的贡献，包括但不限于：
|
||
|
||
1. **报告 Bug** - 通过 Issues 报告发现的问题
|
||
2. **提出需求** - 提出新功能建议
|
||
3. **代码贡献** - 提交 Pull Request
|
||
4. **文档优化** - 改进项目文档
|
||
|
||
### 贡献流程
|
||
|
||
1. Fork 本仓库
|
||
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
|
||
3. 提交更改 (`git commit -m 'feat: Add some AmazingFeature'`)
|
||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||
5. 创建 Pull Request
|
||
|
||
## 📝 更新日志
|
||
|
||
### v1.0.0 (2024-01-XX)
|
||
|
||
#### 🎉 新功能
|
||
- ✨ 完整的租赁管理系统基础功能
|
||
- 🎨 基于 Arco Design 的现代化 UI 界面
|
||
- 🔐 完善的权限管理体系
|
||
|
||
#### ⚡ 性能优化
|
||
- 🚀 智能路由预加载策略
|
||
- 💾 Pinia 状态持久化
|
||
- 📦 优化的代码分割和构建配置
|
||
- 🎯 TypeScript 类型安全全覆盖
|
||
|
||
#### 🛠 开发体验
|
||
- 📋 完整的代码规范和检查工具
|
||
- 🔧 环境配置优化
|
||
- 📚 完善的项目文档 |