pay-admin/docs/superpowers/specs/2026-04-01-enhanced-homepage-design.md

增强版首页设计方案

日期: 2026-04-01 状态: 设计阶段 优先级: 高

一、需求概述

1.1 业务背景

当前首页功能过于简单，仅显示欢迎语和3个快捷按钮，无法满足业务发展需求。用户需要：

• 更多的快捷操作入口（从3个扩展到6个）
• 统计数据和报表展示能力
• 为未来功能扩展预留空间

1.2 核心目标

• 扩展快捷操作功能到6个（添加机构、导入项目、导入员工、导入楼栋、创建收费标准、登记审核）
• 为统计数据和报表预留约2/3屏幕高度的空间
• 优化布局结构，支持未来扩展
• 保持良好的用户体验和响应式设计

1.3 功能定位

首页作为工作台，分为两个区域：

• 快捷操作区（约1/3高度）：6个大卡片按钮，快速访问核心功能
• 数据展示区（约2/3高度）：预留空间，未来展示统计数据、图表、报表等

二、用户场景

2.1 典型用户流程

1. 用户登录系统 → 进入增强版首页
2. 查看统计数据（未来：数字、图表、趋势）
3. 快速访问常用功能（6个快捷卡片）
4. 点击卡片跳转到对应功能页面

2.2 快捷功能列表

序号	功能名称	图标	主题色	跳转路径	说明
1	添加机构	BuildOutlined	#1890ff (蓝)	/company/list	快速创建新的机构
2	导入项目	ImportOutlined	#52c41a (绿)	/asset/list	批量导入项目数据
3	导入员工	TeamOutlined	#fa8c16 (橙)	/company/employees	批量导入员工数据
4	导入楼栋	BuildColumnsOutlined	#722ed1 (紫)	/asset/houses	批量导入楼栋数据
5	创建收费标准	DollarOutlined	#13c2c2 (青)	/charge/standard	创建费用收费标准
6	登记审核	AuditOutlined	#f5222d (红)	/examine/house_registers_audit	审核登记申请

三、设计方案

3.1 整体布局

┌─────────────────────────────────────────────┐
│  欢迎回来，[用户名]！                        │  ← 欢迎语区域（顶部）
│  这里是您的快捷工作台，点击下方卡片快速开始  │     约 10vh 高度
├─────────────────────────────────────────────┤
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│  │ 图标 │ │ 图标 │ │ 图标 │ │ 图标 │ │ 图标 │ │ 图标 │ │  ← 快捷按钮区域
│  │ 标题 │ │ 标题 │ │ 标题 │ │ 标题 │ │ 标题 │ │ 标题 │ │    约 30vh 高度
│  │ 描述 │ │ 描述 │ │ 描述 │ │ 描述 │ │ 描述 │ │ 描述 │ │
│  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │
├─────────────────────────────────────────────┤
│                                             │  ← 统计数据预留区域
│          （统计数据区域 - 预留）              │     约 60vh 高度
│                                             │     未来扩展：
│                                             │     - 数据卡片
│                                             │     - 趋势图表
│                                             │     - 报表展示
│                                             │     - 实时数据更新
└─────────────────────────────────────────────┘

3.2 快捷按钮区域设计

3.2.1 卡片样式

卡片尺寸：

• 桌面端 (>1200px): 宽度约 180px，高度约 160px
• 平板端 (768-1200px): 宽度约 220px，高度约 160px
• 移动端 (<768px): 宽度 100%，高度约 140px

卡片内容结构：

┌──────────────┐
│   [图标48px]  │  ← 顶部：大图标
│              │
│   [标题18px]  │  ← 中间：标题（加粗）
│              │
│ [描述14px灰]  │  ← 底部：描述文字
└──────────────┘

主题色配置：

• 添加机构：蓝色 (#1890ff)
• 导入项目：绿色 (#52c41a)
• 导入员工：橙色 (#fa8c16)
• 导入楼栋：紫色 (#722ed1)
• 创建收费标准：青色 (#13c2c2)
• 登记审核：红色 (#f5222d)

交互效果：

• 默认：阴影 box-shadow: 0 2px 8px rgba(0,0,0,0.1)
• hover：上浮 4px，阴影加深 box-shadow: 0 4px 16px rgba(0,0,0,0.2)
• 过渡动画：transition: all 0.3s ease

3.2.2 响应式布局

桌面端 (>1200px):

• Grid: grid-template-columns: repeat(6, 1fr)
• 6个卡片单行排列
• 卡片间距：gap: 16px

平板端 (768-1200px):

• Grid: grid-template-columns: repeat(3, 1fr)
• 2行3列布局
• 卡片间距：gap: 20px

移动端 (<768px):

• Grid: grid-template-columns: repeat(2, 1fr)
• 3行2列布局
• 卡片间距：gap: 12px

3.2.3 可访问性

每个卡片支持：

• tabIndex={0} - 键盘可聚焦
• role="button" - 语义化按钮角色
• onKeyDown - 支持 Enter 和 Space 键
• aria-label - 屏幕阅读器标签

3.3 统计数据预留区域设计

3.3.1 区域配置

高度：

• 桌面端：约 60vh（视口高度的60%）
• 最小高度：400px

背景：

• 延续页面背景色 #f0f2f5
• 内边距：24px

内容：

• 当前阶段：完全空白
• 未来扩展：
  • 数据统计卡片（数字、百分比、趋势）
  • 图表展示（折线图、柱状图、饼图）
  • 报表列表
  • 实时数据更新
  • 数据筛选和时间范围选择

3.3.2 未来扩展建议

第一优先级：

• 核心业务数据卡片（机构数、项目数、员工数、待审核数）
• 简单的趋势图（本月新增、增长趋势）

第二优先级：

• 详细的数据分析图表
• 报表导出功能
• 数据对比分析

第三优先级：

• 实时数据更新
• 自定义报表
• 数据预警和提醒

3.4 欢迎语区域

位置： 页面顶部

内容：

• 主标题："欢迎回来，{用户名}！"（32px，加粗）
• 副标题："这里是您的快捷工作台，点击下方卡片快速开始常用操作"（16px，灰色）

样式：

• 文本对齐：居中
• 底部间距：32px

四、技术实现要点

4.1 组件结构

src/pages/
├── index.tsx                           [修改] 首页主组件
└── components/
    ├── QuickActionCard.tsx             [保留] 快捷卡片组件
    ├── QuickActionsGrid.tsx            [新建] 6个按钮的网格布局组件
    └── StatisticsPlaceholder.tsx       [新建] 统计数据预留区域组件

4.2 数据流

快捷按钮配置：

const quickActions = [
  {
    icon: <BuildOutlined />,
    title: '添加机构',
    description: '快速创建新的机构',
    themeColor: '#1890ff',
    path: '/company/list'
  },
  // ... 其他5个
];

统计数据预留：

• 当前：返回空组件或占位符
• 未来：通过 props 接收统计数据配置

4.3 性能优化

• 使用 React.memo 优化卡片渲染
• 快捷按钮配置使用 useMemo 缓存
• 图片/图标按需加载

五、文件结构

src/
├── pages/
│   ├── index.tsx                              [修改] 重新设计为增强版首页
│   └── components/
│       ├── QuickActionCard.tsx                [保留] 快捷卡片组件
│       ├── QuickActionsGrid.tsx               [新建] 6按钮网格布局
│       └── StatisticsPlaceholder.tsx          [新建] 统计数据预留区域
└── common/
    └── components/
        └── layout/
            ├── QuickActionIcons.tsx           [保留] Header快捷图标
            └── CustomHeader.tsx               [保留] Header组件

六、实施计划

6.1 实施步骤

1. 修改首页布局 - 调整 index.tsx，增加统计数据预留区域
2. 扩展快捷按钮 - 从3个扩展到6个
3. 创建网格布局组件 - QuickActionsGrid.tsx
4. 创建预留区域组件 - StatisticsPlaceholder.tsx
5. 调整响应式样式 - 适配6个按钮的响应式布局
6. 测试和优化 - 测试不同屏幕尺寸下的显示效果

6.2 兼容性

保持与现有功能的兼容：

• Header 快捷图标保持不变
• 现有的3个快捷按钮功能正常
• 新增3个快捷按钮功能正常

七、验收标准

7.1 功能验收

• 首页显示6个快捷按钮
• 6个按钮能正确跳转到对应页面
• 桌面端6个按钮单行排列
• 平板端2行3列排列
• 移动端3行2列排列
• 统计数据区域留白显示
• hover 效果正常
• 键盘导航正常

7.2 视觉验收

• 6个卡片主题色正确
• 卡片间距合理
• 整体布局美观
• 响应式布局流畅

7.3 性能验收

• 页面加载速度正常
• 无明显卡顿
• 动画流畅（60fps）

八、风险评估

8.1 技术风险

• 低风险：基于现有组件扩展，技术实现简单
• 6个按钮布局：桌面端可能较紧凑，需要优化间距和卡片大小

8.2 用户体验风险

• 信息密度：6个按钮可能让用户感到拥挤，需要精心设计卡片大小和间距
• 移动端体验：3行2列布局可能导致滚动较多，需要优化

8.3 缓解措施

• 使用响应式设计，自适应不同屏幕
• 提供清晰的视觉层次和引导
• 未来可根据用户反馈调整布局

九、后续优化

9.1 短期优化

• 根据用户使用数据分析，调整按钮顺序和优先级
• 优化卡片文案和描述
• 添加微交互和动画效果

9.2 中期优化

• 实现统计数据区域（数据卡片）
• 添加数据可视化图表
• 支持自定义快捷按钮

9.3 长期优化

• 个性化推荐（根据用户行为推荐功能）
• 智能布局（自适应显示常用功能）
• 数据分析和洞察

十、参考设计

10.1 设计灵感

• Ant Design Pro 首页布局
• 企业级后台管理系统工作台
• SaaS 产品 dashboard 设计

10.2 类似实现

• 钉钉工作台
• 飞书工作台
• 各类 CRM/ERP 系统首页