# 首页工作台功能说明

## 功能概述

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

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`