docs: add enhanced homepage design spec
Add comprehensive design specification for enhanced homepage with 6 quick action buttons and statistics placeholder area. Layout includes welcome section, quick action grid (6 cards), and 60vh statistics area for future expansion. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Your Name
parent
b53bbc10c2
commit
25f8711161
319
docs/superpowers/specs/2026-04-01-enhanced-homepage-design.md
Normal file
319
docs/superpowers/specs/2026-04-01-enhanced-homepage-design.md
Normal file
@ -0,0 +1,319 @@
|
|||||||
|
# 增强版首页设计方案
|
||||||
|
|
||||||
|
**日期**: 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 数据流
|
||||||
|
|
||||||
|
**快捷按钮配置：**
|
||||||
|
```typescript
|
||||||
|
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 系统首页
|
||||||
Loading…
x
Reference in New Issue
Block a user