# 🧭 工时统计系统 Web UI 设计建议（供实现参考）
## 一、总体设计思路
目标：
构建一个简洁、专业、响应式的企业级工时统计系统前端界面，满足以下目标：
* 清晰展示工时记录、统计趋势与项目分布；
* 操作流程自然，减少学习成本；
* 支持桌面端优先设计（Desktop-first），后续可拓展移动端适配。
整体风格参考 **IBM Carbon Design System** 与 **Material 3** 规范。
---
## 二、界面架构结构
**顶层结构（Layout Skeleton）**
```
┌───────────────────────────────────────────────────────┐
│ 顶部导航栏（Header / Navbar） │
├───────────────────────────────────────────────────────┤
│ 主内容区（Main Content） │
│ ├─ 侧边导航栏（可选） │
│ └─ 内容容器（根据页面不同加载不同模块） │
├───────────────────────────────────────────────────────┤
│ 页脚（Footer） │
└───────────────────────────────────────────────────────┘
```
---
## 三、导航栏设计（Header）
**内容结构**
```
[Logo 工时统计系统] 首页 | 工时记录 | 添加记录 | 报表 | 设置 [用户头像 ⬇]
```
**功能要求：**
* Logo + 系统标题在左侧。
* 中间为导航菜单，使用高亮（底部边框或字体加粗）指示当前页面。
* 右上角为用户区域，下拉菜单包含：个人信息、登出。
* 固定顶部（sticky header）。
**样式建议：**
* 背景：#0F62FE（IBM 蓝）或白底 + 蓝色字体
* 字体颜色：白色（深色模式）或深灰（亮色模式）
* 高度：64px
* 阴影：`box-shadow: 0 2px 4px rgba(0,0,0,0.1)`
---
## 四、主要页面设计
### 1️⃣ 首页（Dashboard）
**布局结构：**
```
┌──────────────────────────────────────────────────┐
│ 工时总览（Summary Cards） │
│ [本周工时] [本月工时] [平均每日工时] │
├──────────────────────────────────────────────────┤
│ 项目统计（Project Distribution） │
│ 条形图或环形图展示各项目工时占比 │
├──────────────────────────────────────────────────┤
│ 本月趋势（Trend Chart） │
│ 折线图：X轴=日期 / Y轴=工时 │
└──────────────────────────────────────────────────┘
```
**交互说明：**
* 图表悬浮时显示 Tooltip（项目名 + 工时数）。
* 点击项目可跳转至“工时记录”并自动筛选该项目。
**组件建议：**
* 使用 ECharts 或 Chart.js 实现可视化。
* 三列信息卡使用相同宽度与阴影，居中排列。
---
### 2️⃣ 工时记录页（Timesheet List）
**布局结构：**
```
筛选栏
┌─────────────────────────────┐
│ 日期范围 | 员工 | 项目 | 状态 | [查询] [重置] │
└─────────────────────────────┘
工时表格
┌────────────────────────────────────────────────────┐
│ 日期 | 员工 | 项目 | 工时 | 状态 | 备注 | 操作 │
├────────────────────────────────────────────────────┤
│ ... 数据 ... │
└────────────────────────────────────────────────────┘
操作区
[ 添加记录 ] [ 编辑选中 ] [ 删除选中 ] [ 导出 Excel ]
```
**交互说明：**
* 表格支持分页、排序、筛选。
* 点击行可展开详细信息。
* “导出 Excel”按钮执行文件下载。
---
### 3️⃣ 添加工时记录页（Form）
**布局：**
```
员工姓名: [___________] 日期: [YYYY-MM-DD]
项目选择: [___________ ▼] 工时(小时): [____]
备注: [__________________________________________]
[ 保存记录 ] [ 重置表单 ] [ 返回列表 ]
```
**交互逻辑：**
* 保存前表单验证：必填项（姓名、日期、项目、工时）；
* 保存成功后提示 “保存成功” Toast；
* 重置按钮清空输入；
* 返回列表跳转至工时记录页。
---
### 4️⃣ 报表页（Reports）
**布局建议：左右分栏结构**
```
┌──────────────┬──────────────────────────┐
│ 月度趋势图 │ 项目占比环形图 │
│ 折线图 │ 饼/环形图 │
│ 周1~周4数据 │ 各项目百分比 │
└──────────────┴──────────────────────────┘
[ 导出 PDF ] [ 返回首页 ]
```
**说明：**
* 图表均带 Hover Tooltip；
* 支持导出 PNG / PDF 报表。
---
### 5️⃣ 设置页（Settings）
**模块划分：**
1. 个人信息（可编辑姓名、邮箱、部门）
2. 系统偏好（主题、语言、时间格式）
**UI 布局：**
```
┌────────────────────────────────┐
│ 个人信息 │
│ 姓名: [张三] 邮箱: [zhang@ibm.com] │
│ 部门: [开发部] 角色: [管理员] │
└────────────────────────────────┘
┌────────────────────────────────┐
│ 系统设置 │
│ 语言: [中文 ▼] │
│ 主题: [亮色 ☐ 暗色 ☑] │
│ 时间显示: [24小时制 ☑] │
└────────────────────────────────┘
[ 保存设置 ]
```
---
## 五、页脚（Footer）
**内容：**
```
© 2025 工时统计系统 | Powered by IBM Engineering
```
固定在底部，字体较小、灰色，左右居中。
---
## 六、视觉规范（Visual Guideline）
| 元素类型 | 建议样式 |
| ---- | ----------------------------------- |
| 主色调 | IBM 蓝 #0F62FE |
| 辅助色 | 灰色背景 #F4F4F4 |
| 字体 | IBM Plex Sans, 14px, 400 weight |
| 卡片 | 白底 + 阴影 `0 1px 3px rgba(0,0,0,0.1)` |
| 按钮 | 圆角 6px，主按钮蓝底白字，次按钮灰底黑字 |
| 表格 | 条纹行、悬浮高亮行、分页控件底部对齐 |
| 表单控件 | 输入框圆角 4px，聚焦高亮边框蓝色 |
| 动效 | Hover、点击反馈 100ms ease-in-out |
---
## 七、响应式设计
* **≥1280px（桌面端）**：三列卡片布局，图表并列显示。
* **768px–1279px（平板端）**：卡片两列布局，图表堆叠。
* **≤767px（手机端）**：所有模块垂直排列，表格滚动横向显示。
---
## 八、交互与反馈
| 事件 | 响应 |
| ---- | ------------ |
| 保存成功 | Toast 弹窗提示 |
| 删除操作 | 二次确认对话框 |
| 表单错误 | 红色提示文本 |
| 导出操作 | 文件下载 |
| 数据加载 | Skeleton 骨架屏 |
---
## 九、技术栈建议（可选）
前端建议：
* 框架：React + Vite 或 Next.js
* UI 库：IBM Carbon Components / MUI
* 图表：ECharts / Chart.js
* 状态管理：Zustand 或 Redux Toolkit
* 样式：Tailwind / SCSS
---
## 十、补充说明
为方便后续扩展，建议在 UI 层使用组件化设计：
* ``
* ``
* ``
* ``
* ``
所有交互（保存、查询、导出）应以统一的消息提示组件反馈。
---