ef5b31c0e2
Add comprehensive user-facing documentation for the enhanced homepage with 6 quick action buttons and statistics placeholder. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
72 lines
2.0 KiB
Markdown
72 lines
2.0 KiB
Markdown
# 增强版首页功能说明
|
||
|
||
## 功能概述
|
||
|
||
增强版首页为用户提供了一个功能丰富的工作台，包含：
|
||
|
||
1. **快捷操作区**：6个大卡片按钮，快速访问核心功能
|
||
2. **统计数据预留区**：约60vh高度的预留空间，便于未来扩展
|
||
|
||
## 快捷功能
|
||
|
||
### 基础管理
|
||
- **添加机构** - 蓝色主题 (#1890ff)，快速创建新的机构
|
||
- **导入项目** - 绿色主题 (#52c41a)，批量导入项目数据
|
||
- **导入员工** - 橙色主题 (#fa8c16)，批量导入员工数据
|
||
|
||
### 高级功能
|
||
- **导入楼栋** - 紫色主题 (#722ed1)，批量导入楼栋数据
|
||
- **创建收费标准** - 青色主题 (#13c2c2)，创建费用收费标准
|
||
- **登记审核** - 红色主题 (#f5222d)，审核登记申请
|
||
|
||
## 响应式布局
|
||
|
||
- **桌面端** (>1200px): 6个按钮单行排列
|
||
- **平板端** (768-1200px): 2行3列布局
|
||
- **移动端** (<768px): 3行2列布局
|
||
|
||
## 统计数据区域
|
||
|
||
当前为预留状态（60vh高度），未来将展示：
|
||
- 数据统计卡片
|
||
- 趋势图表
|
||
- 报表展示
|
||
- 实时数据更新
|
||
|
||
## 使用方法
|
||
|
||
1. 登录系统后进入增强版首页
|
||
2. 查看6个快捷操作按钮
|
||
3. 点击按钮跳转到对应功能页面
|
||
4. 支持键盘导航（Tab、Enter、Space）
|
||
5. Header右上角也提供6个快捷图标
|
||
|
||
## 技术实现
|
||
|
||
### 组件位置
|
||
- `src/pages/index.tsx` - 首页主组件
|
||
- `src/pages/components/QuickActionCard.tsx` - 快捷卡片组件
|
||
- `src/pages/components/QuickActionsGrid.tsx` - 6按钮网格布局
|
||
- `src/pages/components/StatisticsPlaceholder.tsx` - 统计数据预留区域
|
||
- `src/common/components/layout/QuickActionIcons.tsx` - Header快捷图标
|
||
|
||
### 设计文档
|
||
详细设计文档请参考：`docs/superpowers/specs/2026-04-01-enhanced-homepage-design.md`
|
||
|
||
### 实施计划
|
||
详细实施计划请参考：`docs/superpowers/plans/2026-04-01-enhanced-homepage.md`
|
||
|
||
## 浏览器兼容性
|
||
|
||
- Chrome
|
||
- Firefox
|
||
- Safari
|
||
- Edge
|
||
|
||
## 可访问性
|
||
|
||
- 键盘导航支持（Tab、Enter、Space）
|
||
- ARIA 标签用于屏幕阅读器
|
||
- 语义化 HTML 结构
|
||
- 符合 WCAG 标准的颜色对比度
|