pay-admin/README-HOMEPAGE.md

首页工作台功能说明

功能概述

首页工作台为用户提供了一个快捷访问常用功能的工作台，包含：

1. Header 快捷图标：在页面顶部 Header 右侧添加了三个快捷图标
2. 首页工作台：重新设计的首页，展示欢迎语和三个功能卡片

快捷功能

添加机构

• Header 图标：建筑图标
• 卡片主题：蓝色 (#1890ff)
• 跳转路径：/company/list
• 功能说明：快速创建新的机构

导入项目

• Header 图标：导入图标
• 卡片主题：绿色 (#52c41a)
• 跳转路径：/asset/list
• 功能说明：批量导入项目数据

导入员工

• Header 图标：团队图标
• 卡片主题：橙色 (#fa8c16)
• 跳转路径：/company/employees
• 功能说明：批量导入员工数据

使用方法

1. 登录系统后自动进入工作台首页
2. 点击任意快捷卡片或 Header 图标即可跳转到对应功能页面
3. 在任何页面都可以通过 Header 图标快速访问核心功能
4. 支持键盘导航：使用 Tab 键聚焦，Enter 或 Space 键激活

技术实现

组件位置

• src/pages/components/QuickActionCard.tsx：快捷卡片组件
• src/common/components/layout/QuickActionIcons.tsx：Header 快捷图标组件
• src/pages/index.tsx：首页工作台
• src/common/components/layout/CustomHeader.tsx：Header 组件

响应式支持

• 桌面端（>1200px）：卡片横向排列
• 平板端（768-1200px）：卡片横向排列，间距缩小
• 移动端（<768px）：卡片纵向单列排列

可访问性

• ✅ 键盘导航支持（Tab、Enter、Space）
• ✅ ARIA 标签用于屏幕阅读器
• ✅ 语义化 HTML 结构
• ✅ 符合 WCAG 标准的颜色对比度

浏览器兼容性

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge

设计文档

详细设计文档请参考：docs/superpowers/specs/2026-04-01-homepage-dashboard-design.md

实施计划

详细实施计划请参考：docs/superpowers/plans/2026-04-01-homepage-dashboard.md