70 lines
2.0 KiB
Markdown
70 lines
2.0 KiB
Markdown
|
# 首页工作台功能说明
|
|||
|
|
|
|||
|
|
## 功能概述
|
|||
|
|
|
|||
|
|
首页工作台为用户提供了一个快捷访问常用功能的工作台，包含：
|
|||
|
|
|
|||
|
|
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`
|