27 KiB

Raw Permalink Blame History

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 模块

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

3.2 需要新增的 API 模块

// 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 绑定:

// 加载仪表盘数据
this.$api.statistics.getDashboard()

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

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

功能模块:

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

API 绑定:

// 获取房源列表
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 绑定:

// 获取房源详情
apartmentApi.getDetail(id)

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

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

功能模块:

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

API 绑定:

// 获取租赁列表
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 绑定:

// 获取租赁详情
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 绑定:

// 获取公寓列表（用于选择）
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 绑定:

// 获取租客列表
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 绑定:

// 获取账单列表
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 绑定:

// 获取抄表列表
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 绑定:

// 获取仪表盘统计
statisticsApi.getDashboardStats()

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

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

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

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

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

功能模块:

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

API 绑定:

// 页面跳转处理
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 绑定:

// 获取用户信息
authApi.getUserInfo()

// 退出登录
authApi.logout()

五、组件设计规范

5.1 通用组件

EmptyState 空状态组件

<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 加载状态组件

<template>
  <view class="loading-state">
    <view class="loading-spinner"></view>
    <text class="loading-text">{{text}}</text>
  </view>
</template>

StatusTag 状态标签组件

<template>
  <view class="status-tag" :class="type">
    <text>{{text}}</text>
  </view>
</template>

5.2 业务组件

PropertyCard 房源卡片

<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 租赁卡片

<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 颜色系统

: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 间距系统

/* 基础单位 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 圆角系统

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

6.4 字体系统

/* 字号 */
--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 页面转场

/* 页面进入动画 */
.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 按钮状态

/* 默认状态 */
.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 列表加载

// 加载更多逻辑
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 状态管理

// 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 列表优化

// 虚拟列表（长列表）
<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 图片优化

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

9.3 请求优化

// 防抖搜索
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 代码规范

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

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

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

10.3 注释规范

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

十一、页面路由配置

11.1 pages.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 - 核心功能（必须实现）

✅ 登录/注册
✅ 首页仪表盘
✅ 房源列表/添加/详情
⭐ 租赁记录列表/详情/添加
✅ 快捷添加页面
✅ 个人中心

P1 - 重要功能（建议实现）

⭐ 租客管理（列表/详情/添加）
⭐ 账单管理（列表/详情）
⭐ 统计报表
房间管理（列表/详情）

P2 - 扩展功能（可选实现）

抄表记录
续租/退租流程
消息通知
数据导出

十三、总结

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

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

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

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

27 KiB Raw Permalink Blame History Unescape Escape

RentEase App 功能页面设计规范

一、项目概述

1.1 产品定位

1.2 技术栈

1.3 设计原则

二、页面架构设计

2.1 页面清单

2.2 TabBar 结构

三、API 接口绑定

3.1 现有 API 模块

3.2 需要新增的 API 模块

四、核心页面设计

4.1 首页 (pages/home/home)

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

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

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

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

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

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

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

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

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

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

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

五、组件设计规范

5.1 通用组件

EmptyState 空状态组件

LoadingState 加载状态组件

StatusTag 状态标签组件

5.2 业务组件

PropertyCard 房源卡片

RentalCard 租赁卡片

六、样式规范

6.1 颜色系统

6.2 间距系统

6.3 圆角系统

6.4 字体系统

七、交互规范

7.1 页面转场

7.2 按钮状态

7.3 列表加载

八、数据流设计

8.1 页面数据流

8.2 状态管理

九、性能优化

9.1 列表优化

9.2 图片优化

9.3 请求优化

十、开发规范

10.1 文件命名

10.2 代码规范

10.3 注释规范

十一、页面路由配置

11.1 pages.json 完整配置

十二、实现优先级

P0 - 核心功能（必须实现）

P1 - 重要功能（建议实现）

P2 - 扩展功能（可选实现）

十三、总结

27 KiB

Raw Permalink Blame History