租赁管理系统 (Leaser Management System)

一个基于 Vue 3 + TypeScript + Arco Design 的现代化租赁管理系统

📖 项目介绍

本系统是一个功能完整的租赁管理平台，为物业管理公司、房地产企业提供全方位的租赁业务解决方案。系统采用现代化的前端技术栈，具有优秀的用户体验和高性能表现。

✨ 核心功能

• 🏢 项目管理 - 商业综合体、写字楼、园区等项目的全生命周期管理
• 🏠 空间管理 - 房源信息管理、房源剖视、可租面积统计
• 📋 合同管理 - 租赁合同的创建、审批、归档和模板管理
• 👥 租户管理 - 租客信息维护、联系人管理、租赁关系追踪
• 💰 财务管理 - 账单生成、资金流水、收支统计
• 🏡 物业管理 - 水电管理、预约服务、维修记录
• ⚙️ 系统设置 - 用户权限、角色管理、系统配置

🛠 技术栈

核心框架

• 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 (推荐)

安装依赖

# 克隆项目
git clone <repository-url>
cd leaser_front

# 安装依赖
pnpm install

开发环境

# 启动开发服务器
pnpm run dev

# 访问 http://localhost:5173

构建部署

# 类型检查
pnpm run type:check

# 构建生产版本
pnpm run build

# 预览构建结果
pnpm run preview

# 构建分析
pnpm run report

🔧 开发指南

代码规范

项目采用严格的代码规范，确保代码质量和团队协作效率：

# 代码检查
pnpm run lint

# 代码格式化
pnpm run format

# 提交前自动检查 (已配置 git hooks)
git commit -m "feat: 新功能"

提交规范

遵循 Conventional Commits 规范：

# 功能开发
git commit -m "feat: 添加用户管理功能"

# 问题修复
git commit -m "fix: 修复登录状态异常问题"

# 文档更新
git commit -m "docs: 更新API文档"

# 样式调整
git commit -m "style: 调整按钮样式"

# 重构代码
git commit -m "refactor: 重构用户认证逻辑"

目录规范

新增页面

src/views/
├── business/
│   ├── project/
│   │   ├── index.vue           # 页面主文件
│   │   ├── components/         # 页面专用组件
│   │   └── hooks/             # 页面专用逻辑

新增组件

src/components/
├── common/                     # 通用组件
├── business/                   # 业务组件
└── form/                      # 表单组件

类型定义

src/types/
├── api.ts                     # API 相关类型
├── business.ts                # 业务相关类型
└── common.ts                  # 通用类型

状态管理

项目使用 Pinia 进行状态管理，并配置了持久化：

// 创建新的 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）：

// 权限配置示例
{
  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 以下

🚢 部署指南

环境变量配置

# .env.production
VITE_APP_TITLE=租赁管理系统
VITE_APP_BASE_URL=https://api.yourdomain.com
VITE_APP_MODE=production
VITE_APP_DEBUG=false

Docker 部署

FROM nginx:alpine

COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

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 类型安全全覆盖

🛠 开发体验

• 📋 完整的代码规范和检查工具
• 🔧 环境配置优化
• 📚 完善的项目文档