# RentEase App 功能页面设计规范

## 一、项目概述

### 1.1 产品定位
RentEase 是一款面向房东和物业管理人员的智能租赁管理移动应用，支持 App 和微信小程序双端运行。

### 1.2 技术栈
- **框架**: uni-app (Vue 3)
- **UI组件**: uni-ui
- **样式**: SCSS + CSS变量
- **状态管理**: 全局存储 + Vuex
- **网络请求**: 封装 uni.request

### 1.3 设计原则
- **移动端优先**: 所有设计以手机端体验为核心
- **简洁高效**: 减少操作步骤，提高管理效率
- **视觉一致**: 统一的蓝色主题 (#2563EB)
- **反馈及时**: 操作后有明确的视觉和交互反馈

---

## 二、页面架构设计

### 2.1 页面清单

| 模块 | 页面路径 | 功能描述 | 优先级 |
|------|----------|----------|--------|
| **认证** | pages/login/login | 用户登录 | P0 |
| **认证** | pages/register/register | 用户注册 | P0 |
| **首页** | pages/home/home | 仪表盘、快捷入口 | P0 |
| **房源** | pages/properties/properties | 房源列表 | P0 |
| **房源** | pages/property-add/property-add | 添加/编辑房源 | P0 |
| **房源** | pages/property-detail/property-detail | 房源详情 | P0 |
| **房间** | pages/rooms/rooms | 房间列表 | P1 |
| **房间** | pages/room-detail/room-detail | 房间详情 | P1 |
| **租客** | pages/tenants/tenants | 租客列表 | P1 |
| **租客** | pages/tenant-detail/tenant-detail | 租客详情 | P1 |
| **租客** | pages/tenant-add/tenant-add | 添加/编辑租客 | P1 |
| **租赁** | pages/rentals/rentals | 租赁记录列表 | P0 |
| **租赁** | pages/rental-detail/rental-detail | 租赁详情 | P0 |
| **租赁** | pages/rental-add/rental-add | 新增租赁 | P0 |
| **租赁** | pages/rental-renew/rental-renew | 续租办理 | P1 |
| **账单** | pages/bills/bills | 账单列表 | P1 |
| **账单** | pages/bill-detail/bill-detail | 账单详情 | P1 |
| **抄表** | pages/meter-readings/meter-readings | 抄表记录 | P2 |
| **抄表** | pages/meter-reading-add/meter-reading-add | 添加抄表 | P2 |
| **统计** | pages/stats/stats | 数据统计 | P1 |
| **我的** | pages/profile/profile | 个人中心 | P0 |
| **通用** | pages/add-record/add-record | 快捷添加 | P0 |

### 2.2 TabBar 结构

```
┌─────────┬─────────┬─────────┬─────────┬─────────┐
│  首页   │  房源   │  添加   │  统计   │  我的   │
│  home   │property │   +     │  stats  │ profile │
└─────────┴─────────┴─────────┴─────────┴─────────┘
```

---

## 三、API 接口绑定

### 3.1 现有 API 模块

```javascript
// api/index.js
const api = {
  auth,       // 认证相关
  apartment,  // 公寓/房源管理
  room,       // 房间管理
  tenant,     // 租客管理
  rental,     // 租赁管理
  statistics  // 统计分析
}
```

### 3.2 需要新增的 API 模块

```javascript
// api/bill.js - 账单管理
export default {
  getList(params) {},      // 获取账单列表
  getDetail(id) {},        // 获取账单详情
  create(data) {},         // 创建账单
  update(id, data) {},     // 更新账单
  delete(id) {},           // 删除账单
  markPaid(id) {},         // 标记已支付
  getStatistics(params) {} // 获取账单统计
}

// api/meterReading.js - 抄表管理
export default {
  getList(params) {},      // 获取抄表列表
  getDetail(id) {},        // 获取抄表详情
  create(data) {},         // 创建抄表记录
  update(id, data) {},     // 更新抄表记录
  delete(id) {},           // 删除抄表记录
  getByRoom(roomId) {},    // 获取房间抄表历史
  getLatest(roomId) {}     // 获取最新读数
}

// api/renter.js - 租客管理（补充）
export default {
  getList(params) {},
  getDetail(id) {},
  create(data) {},
  update(id, data) {},
  delete(id) {},
  getOptions(params) {}    // 获取租客下拉选项
}
```

---

## 四、核心页面设计

### 4.1 首页 (pages/home/home)

**功能模块:**
- 顶部导航栏：位置选择、通知入口
- 欢迎卡片：用户信息、快捷统计（房源数/租客数/待办数）
- 快捷功能：房源管理、租客管理、合同管理、账单管理
- 待办事项：合同到期、待收租金、维修申请
- 最近动态：租金收入、新租客入住、合同续签

**API 绑定:**
```javascript
// 加载仪表盘数据
this.$api.statistics.getDashboard()

// 数据映射
{
  apartmentCount: data.apartmentCount,  // 房源数
  tenantCount: data.tenantCount,        // 租客数
  pendingTaskCount: data.pendingTaskCount // 待办数
}
```

---

### 4.2 房源列表 (pages/properties/properties)

**功能模块:**
- 自定义导航栏：标题、筛选、添加按钮
- 搜索栏：按名称/地址搜索
- 统计栏：全部/已出租/空置中
- 筛选标签：全部/已出租/空置中/即将到期
- 房源卡片网格：图片、状态标签、地址、租客、到期日、水电单价、租金
- 加载更多

**API 绑定:**
```javascript
// 获取房源列表
apartmentApi.getList({
  page: this.page,
  pageSize: this.pageSize,
  name: this.searchKeyword
})

// 数据映射
{
  id: item.id,
  name: item.name,
  address: item.address,
  status: item.status || 'vacant',
  statusText: item.status === 'rented' ? '已出租' : '空置中',
  waterPrice: item.waterPrice || 5.00,
  electricityPrice: item.electricityPrice || 1.00,
  rent: item.rent || 0,
  tenant: item.tenant,
  dueDate: item.dueDate,
  images: item.images
}
```

---

### 4.3 房源详情 (pages/property-detail/property-detail)

**功能模块:**
- 自定义导航栏：返回、编辑
- 房源图片轮播
- 基本信息：名称、标签、地址
- 费用标准卡片：水费单价、电费单价
- 租金信息卡片：月租金、租客、到期日
- 房源描述
- 操作按钮：编辑、删除
- 房间列表（子模块）

**API 绑定:**
```javascript
// 获取房源详情
apartmentApi.getDetail(id)

// 获取房源下的房间列表
roomApi.getList({ apartmentId: id })
```

---

### 4.4 租赁记录列表 (pages/rentals/rentals) ⭐ 新增

**功能模块:**
- 自定义导航栏：标题、筛选、搜索
- 筛选栏：公寓选择、状态筛选（在租/已到期/已终止）
- 统计卡片：在租数/即将到期/已到期
- 租赁卡片列表：
  - 公寓名称 + 房间号
  - 租客姓名 + 电话
  - 租期（开始-结束）
  - 付租方式标签
  - 月租金
  - 状态标签
  - 即将到期警告（7天内）
- 操作按钮：详情、续租、退租

**API 绑定:**
```javascript
// 获取租赁列表
rentalApi.getList({
  page: this.page,
  pageSize: this.pageSize,
  apartmentId: this.filterApartmentId,
  status: this.filterStatus,
  renterName: this.searchKeyword
})

// 数据映射
{
  id: item.id,
  apartmentName: item.Room?.Apartment?.name || '--',
  roomNumber: item.Room?.roomNumber || '--',
  renterName: item.Renter?.name || '--',
  renterPhone: item.Renter?.phone || '--',
  startDate: item.startDate,
  endDate: item.endDate,
  paymentType: item.paymentType,
  paymentTypeText: this.getPaymentTypeText(item.paymentType),
  rent: item.rent,
  deposit: item.deposit || 0,
  status: item.status,
  statusText: this.getStatusText(item.status),
  isExpiringSoon: this.isExpiringSoon(item.endDate) && item.status === 'active'
}

// 付租方式映射
paymentTypeMap: {
  monthly: { text: '月租', color: 'info' },
  quarterly: { text: '季租', color: 'warning' },
  half_year: { text: '半年租', color: '' },
  yearly: { text: '年租', color: 'success' }
}

// 状态映射
statusMap: {
  active: { text: '在租', color: 'success' },
  expired: { text: '已到期', color: 'info' },
  terminated: { text: '已终止', color: 'danger' }
}
```

---

### 4.5 租赁详情 (pages/rental-detail/rental-detail) ⭐ 新增

**功能模块:**
- 自定义导航栏：返回、编辑
- 租赁状态卡片：状态标签、租期进度条
- 房源信息：公寓、房间号
- 租客信息：姓名、电话、身份证号
- 租赁信息：
  - 付租方式
  - 开始日期
  - 结束日期
  - 月租金
  - 押金
  - 水表起始读数
  - 电表起始读数
- 操作按钮：
  - 在租状态：续租、退租
  - 其他状态：仅查看

**API 绑定:**
```javascript
// 获取租赁详情
rentalApi.getDetail(id)

// 续租
rentalApi.create({
  roomId: this.rental.roomId,
  renterId: this.rental.renterId,
  startDate: renewForm.startDate,
  endDate: renewForm.endDate,
  rent: renewForm.rent,
  deposit: this.rental.deposit,
  paymentType: this.rental.paymentType,
  remark: renewForm.remark
})
// 然后更新原租约状态
rentalApi.update(this.rental.id, { status: 'expired' })

// 退租
rentalApi.terminate(this.rental.id, {
  waterMeterEnd: terminateForm.waterMeterEnd,
  electricityMeterEnd: terminateForm.electricityMeterEnd,
  refundDeposit: terminateForm.refundDeposit,
  remark: terminateForm.remark
})
```

---

### 4.6 新增租赁 (pages/rental-add/rental-add) ⭐ 新增

**功能模块:**
- 自定义导航栏：返回、保存
- 分步表单：
  - 步骤1：选择房源和房间
  - 步骤2：选择或添加租客
  - 步骤3：填写租赁信息
- 表单字段：
  - 公寓（下拉选择）
  - 房间（级联下拉）
  - 租客（搜索选择或新增）
  - 付租方式（月租/季租/半年租/年租）
  - 开始日期
  - 结束日期
  - 月租金
  - 押金
  - 水表起始读数
  - 电表起始读数
  - 备注

**API 绑定:**
```javascript
// 获取公寓列表（用于选择）
apartmentApi.getList({ pageSize: 999 })

// 获取房间列表（根据公寓筛选）
roomApi.getList({ apartmentId: selectedApartmentId, pageSize: 999 })

// 获取租客选项
renterApi.getOptions({ keyword: searchKeyword })

// 创建租赁
rentalApi.create({
  roomId: form.roomId,
  renterId: form.renterId,
  paymentType: form.paymentType,
  startDate: form.startDate,
  endDate: form.endDate,
  rent: form.rent,
  deposit: form.deposit,
  waterMeterStart: form.waterMeterStart,
  electricityMeterStart: form.electricityMeterStart,
  remark: form.remark
})

// 或创建租赁同时创建租客
rentalApi.createWithRenter({
  roomId: form.roomId,
  paymentType: form.paymentType,
  startDate: form.startDate,
  endDate: form.endDate,
  rent: form.rent,
  deposit: form.deposit,
  renter: {
    name: form.renterName,
    phone: form.renterPhone,
    idCard: form.renterIdCard
  },
  remark: form.remark
})
```

---

### 4.7 租客列表 (pages/tenants/tenants) ⭐ 新增

**功能模块:**
- 自定义导航栏：标题、搜索、添加
- 搜索栏：按姓名/电话搜索
- 租客卡片列表：
  - 头像（默认头像）
  - 姓名
  - 电话
  - 身份证号（脱敏显示）
  - 在租房间数
  - 租赁历史数
- 操作：查看详情、编辑、删除

**API 绑定:**
```javascript
// 获取租客列表
renterApi.getList({
  page: this.page,
  pageSize: this.pageSize,
  keyword: this.searchKeyword
})

// 数据映射
{
  id: item.id,
  name: item.name,
  phone: item.phone,
  idCard: this.maskIdCard(item.idCard),
  avatar: item.avatar || '/static/default-avatar.png',
  activeRentals: item.activeRentals || 0,
  totalRentals: item.totalRentals || 0
}
```

---

### 4.8 账单列表 (pages/bills/bills) ⭐ 新增

**功能模块:**
- 自定义导航栏：标题、筛选、统计
- 筛选栏：月份选择、状态筛选（未付/已付/逾期）
- 统计卡片：本月应收/已收/未收
- 账单卡片列表：
  - 账单月份
  - 房源/房间信息
  - 租客姓名
  - 账单金额
  - 账单类型（租金/水费/电费/其他）
  - 状态标签
  - 到期日
- 操作：标记已付、查看详情、发送提醒

**API 绑定:**
```javascript
// 获取账单列表
billApi.getList({
  page: this.page,
  pageSize: this.pageSize,
  month: this.selectedMonth,
  status: this.filterStatus
})

// 获取账单统计
billApi.getStatistics({ month: this.selectedMonth })

// 标记已支付
billApi.markPaid(billId)

// 数据映射
{
  id: item.id,
  month: item.month,
  apartmentName: item.Room?.Apartment?.name || '--',
  roomNumber: item.Room?.roomNumber || '--',
  renterName: item.Renter?.name || '--',
  amount: item.amount,
  type: item.type,
  typeText: this.getBillTypeText(item.type),
  status: item.status,
  statusText: this.getBillStatusText(item.status),
  dueDate: item.dueDate
}
```

---

### 4.9 抄表记录 (pages/meter-readings/meter-readings) ⭐ 新增

**功能模块:**
- 自定义导航栏：标题、添加
- 筛选栏：公寓选择、月份选择
- 抄表卡片列表：
  - 房源/房间信息
  - 抄表日期
  - 水表读数（本期/上期/用量）
  - 电表读数（本期/上期/用量）
  - 费用计算
- 操作：查看详情、编辑

**API 绑定:**
```javascript
// 获取抄表列表
meterReadingApi.getList({
  page: this.page,
  pageSize: this.pageSize,
  apartmentId: this.filterApartmentId,
  month: this.selectedMonth
})

// 数据映射
{
  id: item.id,
  apartmentName: item.Room?.Apartment?.name || '--',
  roomNumber: item.Room?.roomNumber || '--',
  readingDate: item.readingDate,
  waterCurrent: item.waterCurrent,
  waterPrevious: item.waterPrevious,
  waterUsage: item.waterCurrent - item.waterPrevious,
  waterCost: (item.waterCurrent - item.waterPrevious) * item.waterPrice,
  electricityCurrent: item.electricityCurrent,
  electricityPrevious: item.electricityPrevious,
  electricityUsage: item.electricityCurrent - item.electricityPrevious,
  electricityCost: (item.electricityCurrent - item.electricityPrevious) * item.electricityPrice
}
```

---

### 4.10 统计页面 (pages/stats/stats)

**功能模块:**
- 自定义导航栏：标题
- 时间筛选：本月/本季度/本年
- 收入统计卡片：
  - 总租金收入
  - 水电费收入
  - 其他收入
  - 收入趋势图
- 房源统计：
  - 房源总数
  - 出租率
  - 空置房源数
- 租客统计：
  - 在租租客数
  - 即将到期数
  - 新入住数
- 图表展示：
  - 收入趋势折线图
  - 房源状态饼图
  - 收支对比柱状图

**API 绑定:**
```javascript
// 获取仪表盘统计
statisticsApi.getDashboardStats()

// 获取租金统计
statisticsApi.getRentStatistics()

// 获取房间状态统计
statisticsApi.getRoomStatus()

// 获取公寓房间状态
statisticsApi.getApartmentRoomStatusStats()

// 获取即将到期房间
statisticsApi.getSoonExpireRoomsByApartment()
```

---

### 4.11 快捷添加 (pages/add-record/add-record)

**功能模块:**
- 自定义导航栏：标题
- 快捷入口网格：
  - 添加房源
  - 添加房间
  - 添加租客
  - 办理入住（新增租赁）
  - 录入抄表
  - 生成账单
- 最近操作记录

**API 绑定:**
```javascript
// 页面跳转处理
navigateTo(page) {
  const routes = {
    property: '/pages/property-add/property-add',
    room: '/pages/room-add/room-add',
    tenant: '/pages/tenant-add/tenant-add',
    rental: '/pages/rental-add/rental-add',
    meter: '/pages/meter-reading-add/meter-reading-add',
    bill: '/pages/bill-generate/bill-generate'
  }
  uni.navigateTo({ url: routes[page] })
}
```

---

### 4.12 个人中心 (pages/profile/profile)

**功能模块:**
- 用户信息卡片：头像、姓名、手机号
- 功能菜单列表：
  - 我的房源
  - 我的租客
  - 账单管理
  - 抄表记录
  - 设置
  - 关于我们
  - 帮助与反馈
- 退出登录

**API 绑定:**
```javascript
// 获取用户信息
authApi.getUserInfo()

// 退出登录
authApi.logout()
```

---

## 五、组件设计规范

### 5.1 通用组件

#### EmptyState 空状态组件
```vue
<template>
  <view class="empty-state">
    <image class="empty-icon" :src="icon" />
    <text class="empty-title">{{title}}</text>
    <text class="empty-desc">{{description}}</text>
    <button v-if="showButton" class="empty-btn" @click="onAction">{{buttonText}}</button>
  </view>
</template>
```

#### LoadingState 加载状态组件
```vue
<template>
  <view class="loading-state">
    <view class="loading-spinner"></view>
    <text class="loading-text">{{text}}</text>
  </view>
</template>
```

#### StatusTag 状态标签组件
```vue
<template>
  <view class="status-tag" :class="type">
    <text>{{text}}</text>
  </view>
</template>
```

### 5.2 业务组件

#### PropertyCard 房源卡片
```vue
<template>
  <view class="property-card" @click="onClick">
    <image class="card-image" :src="property.images[0]" mode="aspectFill" />
    <view class="card-content">
      <view class="card-header">
        <text class="card-title">{{property.name}}</text>
        <status-tag :type="property.status" :text="property.statusText" />
      </view>
      <text class="card-address">{{property.address}}</text>
      <view class="card-footer">
        <text class="card-rent">¥{{property.rent}}/月</text>
        <text class="card-tenant">{{property.tenant || '待租'}}</text>
      </view>
    </view>
  </view>
</template>
```

#### RentalCard 租赁卡片
```vue
<template>
  <view class="rental-card" @click="onClick">
    <view class="card-header">
      <view class="room-info">
        <text class="apartment-name">{{rental.apartmentName}}</text>
        <text class="room-number">{{rental.roomNumber}}</text>
      </view>
      <status-tag :type="rental.status" :text="rental.statusText" />
    </view>
    <view class="renter-info">
      <text class="renter-name">{{rental.renterName}}</text>
      <text class="renter-phone">{{rental.renterPhone}}</text>
    </view>
    <view class="rental-info">
      <view class="info-item">
        <text class="label">租期</text>
        <text class="value">{{rental.startDate}} 至 {{rental.endDate}}</text>
      </view>
      <view class="info-item">
        <text class="label">租金</text>
        <text class="value price">¥{{rental.rent}}/月</text>
      </view>
    </view>
    <view v-if="rental.isExpiringSoon" class="expiring-warning">
      <uni-icons type="info-filled" size="14" color="#EF4444" />
      <text>即将到期（{{getRemainingDays(rental.endDate)}}天）</text>
    </view>
  </view>
</template>
```

---

## 六、样式规范

### 6.1 颜色系统

```css
:root {
  /* 主色调 */
  --primary: #2563EB;
  --primary-light: #3B82F6;
  --primary-dark: #1D4ED8;
  --primary-gradient: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  
  /* 功能色 */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #64748B;
  
  /* 中性色 */
  --background: #F8FAFC;
  --surface: #FFFFFF;
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  
  /* 阴影 */
  --shadow: 0 4rpx 20rpx rgba(37, 99, 235, 0.1);
  --shadow-lg: 0 8rpx 40rpx rgba(37, 99, 235, 0.15);
}
```

### 6.2 间距系统

```css
/* 基础单位 4rpx */
--space-1: 4rpx;
--space-2: 8rpx;
--space-3: 12rpx;
--space-4: 16rpx;
--space-5: 20rpx;
--space-6: 24rpx;
--space-8: 32rpx;
--space-10: 40rpx;
--space-12: 48rpx;
```

### 6.3 圆角系统

```css
--radius-sm: 12rpx;
--radius-md: 20rpx;
--radius-lg: 32rpx;
--radius-full: 9999rpx;
```

### 6.4 字体系统

```css
/* 字号 */
--text-xs: 22rpx;
--text-sm: 24rpx;
--text-base: 28rpx;
--text-lg: 32rpx;
--text-xl: 36rpx;
--text-2xl: 40rpx;
--text-3xl: 48rpx;

/* 字重 */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

---

## 七、交互规范

### 7.1 页面转场

```css
/* 页面进入动画 */
.page-enter {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30rpx);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 列表项进入动画 */
.list-item-enter {
  animation: fadeInUp 0.4s ease-out;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

### 7.2 按钮状态

```css
/* 默认状态 */
.btn {
  transition: all 0.2s ease;
}

/* 按下状态 */
.btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 禁用状态 */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 加载状态 */
.btn-loading {
  position: relative;
  color: transparent;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
```

### 7.3 列表加载

```javascript
// 加载更多逻辑
loadMore() {
  if (this.loadStatus === 'noMore') return
  this.loadStatus = 'loading'
  this.page++
  this.loadData().then(() => {
    this.loadStatus = this.hasMore ? 'more' : 'noMore'
  })
}
```

---

## 八、数据流设计

### 8.1 页面数据流

```
用户操作 → 调用API → 数据处理 → 更新视图 → 本地缓存（可选）
```

### 8.2 状态管理

```javascript
// store/user.js - 用户状态
export const userStore = {
  state: {
    token: uni.getStorageSync('token'),
    userInfo: uni.getStorageSync('userInfo')
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      uni.setStorageSync('token', token)
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
      uni.setStorageSync('userInfo', userInfo)
    }
  }
}

// store/cache.js - 数据缓存
export const cacheStore = {
  state: {
    apartments: [],
    lastUpdate: null
  },
  mutations: {
    setApartments(state, list) {
      state.apartments = list
      state.lastUpdate = Date.now()
    }
  }
}
```

---

## 九、性能优化

### 9.1 列表优化

```javascript
// 虚拟列表（长列表）
<recycle-list>
  <cell v-for="(item, index) in list" :key="index">
    <rental-card :rental="item" />
  </cell>
</recycle-list>

// 分页加载
pagination: {
  page: 1,
  pageSize: 20,
  hasMore: true
}
```

### 9.2 图片优化

```vue
<image 
  :src="item.image" 
  mode="aspectFill"
  lazy-load
  :fade-show="true"
/>
```

### 9.3 请求优化

```javascript
// 防抖搜索
import { debounce } from '@/utils/index.js'

onSearch: debounce(function(keyword) {
  this.searchKeyword = keyword
  this.page = 1
  this.loadData()
}, 300)

// 请求缓存
const cacheKey = `api_${url}_${JSON.stringify(params)}`
const cached = uni.getStorageSync(cacheKey)
if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
  return Promise.resolve(cached.data)
}
```

---

## 十、开发规范

### 10.1 文件命名

- 页面文件: `pages/page-name/page-name.vue`
- 组件文件: `components/component-name/component-name.vue`
- API文件: `api/module-name.js`
- 工具文件: `utils/util-name.js`

### 10.2 代码规范

```javascript
// 组件命名: 大驼峰
export default {
  name: 'RentalCard'
}

// 方法命名: 小驼峰
methods: {
  handleSearch() {},
  loadData() {},
  onRefresh() {}
}

// 数据命名: 语义化
data() {
  return {
    rentalList: [],      // 列表数据
    isLoading: false,    // 加载状态
    hasMore: true        // 是否有更多
  }
}
```

### 10.3 注释规范

```javascript
/**
 * 获取租赁列表
 * @param {Object} params - 查询参数
 * @param {number} params.page - 页码
 * @param {number} params.pageSize - 每页数量
 * @returns {Promise} 返回租赁列表数据
 */
async getRentalList(params) {
  // 实现代码
}
```

---

## 十一、页面路由配置

### 11.1 pages.json 完整配置

```json
{
  "pages": [
    { "path": "pages/login/login", "style": { "navigationStyle": "custom" } },
    { "path": "pages/register/register", "style": { "navigationStyle": "custom" } },
    { "path": "pages/home/home", "style": { "navigationStyle": "custom" } },
    { "path": "pages/properties/properties", "style": { "navigationStyle": "custom" } },
    { "path": "pages/property-add/property-add", "style": { "navigationStyle": "custom" } },
    { "path": "pages/property-detail/property-detail", "style": { "navigationStyle": "custom" } },
    { "path": "pages/rooms/rooms", "style": { "navigationStyle": "custom" } },
    { "path": "pages/room-detail/room-detail", "style": { "navigationStyle": "custom" } },
    { "path": "pages/tenants/tenants", "style": { "navigationStyle": "custom" } },
    { "path": "pages/tenant-detail/tenant-detail", "style": { "navigationStyle": "custom" } },
    { "path": "pages/tenant-add/tenant-add", "style": { "navigationStyle": "custom" } },
    { "path": "pages/rentals/rentals", "style": { "navigationStyle": "custom" } },
    { "path": "pages/rental-detail/rental-detail", "style": { "navigationStyle": "custom" } },
    { "path": "pages/rental-add/rental-add", "style": { "navigationStyle": "custom" } },
    { "path": "pages/rental-renew/rental-renew", "style": { "navigationStyle": "custom" } },
    { "path": "pages/bills/bills", "style": { "navigationStyle": "custom" } },
    { "path": "pages/bill-detail/bill-detail", "style": { "navigationStyle": "custom" } },
    { "path": "pages/meter-readings/meter-readings", "style": { "navigationStyle": "custom" } },
    { "path": "pages/meter-reading-add/meter-reading-add", "style": { "navigationStyle": "custom" } },
    { "path": "pages/stats/stats", "style": { "navigationStyle": "custom" } },
    { "path": "pages/profile/profile", "style": { "navigationStyle": "custom" } },
    { "path": "pages/add-record/add-record", "style": { "navigationStyle": "custom" } }
  ],
  "tabBar": {
    "color": "#94A3B8",
    "selectedColor": "#2563EB",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "white",
    "list": [
      { "pagePath": "pages/home/home", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home-active.png" },
      { "pagePath": "pages/properties/properties", "text": "房源", "iconPath": "static/tabbar/property.png", "selectedIconPath": "static/tabbar/property-active.png" },
      { "pagePath": "pages/add-record/add-record", "text": "添加", "iconPath": "static/tabbar/add.png", "selectedIconPath": "static/tabbar/add-active.png" },
      { "pagePath": "pages/stats/stats", "text": "统计", "iconPath": "static/tabbar/stats.png", "selectedIconPath": "static/tabbar/stats-active.png" },
      { "pagePath": "pages/profile/profile", "text": "我的", "iconPath": "static/tabbar/profile.png", "selectedIconPath": "static/tabbar/profile-active.png" }
    ]
  }
}
```

---

## 十二、实现优先级

### P0 - 核心功能（必须实现）
1. ✅ 登录/注册
2. ✅ 首页仪表盘
3. ✅ 房源列表/添加/详情
4. ⭐ 租赁记录列表/详情/添加
5. ✅ 快捷添加页面
6. ✅ 个人中心

### P1 - 重要功能（建议实现）
1. ⭐ 租客管理（列表/详情/添加）
2. ⭐ 账单管理（列表/详情）
3. ⭐ 统计报表
4. 房间管理（列表/详情）

### P2 - 扩展功能（可选实现）
1. 抄表记录
2. 续租/退租流程
3. 消息通知
4. 数据导出

---

## 十三、总结

本设计规范涵盖了 RentEase App 的完整功能架构，包括：

1. **22个功能页面** 的详细设计
2. **6个API模块** 的接口绑定
3. **统一的视觉规范**（颜色、间距、字体、圆角）
4. **完整的交互规范**（动画、状态、手势）
5. **性能优化方案**（列表、图片、请求）

所有页面采用 **自定义导航栏** 设计，保持视觉一致性。API 接口已根据现有后端设计进行绑定，可直接使用。

标记 ⭐ 的页面为需要新增的页面，其他页面已有基础实现需要完善。