8.8 KiB
8.8 KiB
🧭 工时统计系统 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）
模块划分：
- 个人信息（可编辑姓名、邮箱、部门）
- 系统偏好（主题、语言、时间格式）
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 />
所有交互（保存、查询、导出）应以统一的消息提示组件反馈。