From 25f8711161ebcd5eba712137fa602f063fc18708 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 1 Apr 2026 10:20:53 +0800 Subject: [PATCH] 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 --- .../2026-04-01-enhanced-homepage-design.md | 319 ++++++++++++++++++ 1 file changed, 319 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-01-enhanced-homepage-design.md diff --git a/docs/superpowers/specs/2026-04-01-enhanced-homepage-design.md b/docs/superpowers/specs/2026-04-01-enhanced-homepage-design.md new file mode 100644 index 0000000..71188bf --- /dev/null +++ b/docs/superpowers/specs/2026-04-01-enhanced-homepage-design.md @@ -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: , + 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 系统首页