b53bbc10c2
Add user-facing documentation for the new homepage dashboard feature. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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`
|