263 lines
8.8 KiB
Markdown
263 lines
8.8 KiB
Markdown
|
||
# 🧭 工时统计系统 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 层使用组件化设计：
|
||
|
||
* `<TimesheetTable />`
|
||
* `<WorktimeForm />`
|
||
* `<DashboardCards />`
|
||
* `<ReportCharts />`
|
||
* `<SettingsPanel />`
|
||
|
||
所有交互（保存、查询、导出）应以统一的消息提示组件反馈。
|
||
|
||
---
|
||
|
||
|