Initial commit: Complete工时统计系统 implementation
This commit is contained in:
262
docs/1.md
Normal file
262
docs/1.md
Normal file
@@ -0,0 +1,262 @@
|
||||
|
||||
# 🧭 工时统计系统 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 />`
|
||||
|
||||
所有交互（保存、查询、导出）应以统一的消息提示组件反馈。
|
||||
|
||||
---
|
||||
|
||||
|
||||
148
docs/2.md
Normal file
148
docs/2.md
Normal file
@@ -0,0 +1,148 @@
|
||||
# 🧭 工时统计系统 Web UI 设计文档
|
||||
|
||||
## 一、页面流转逻辑（Page Flow）
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[登录页 /login] --> B[首页 /dashboard]
|
||||
B --> C[工时录入 /timesheet]
|
||||
B --> D[工时查询 /records]
|
||||
B --> E[统计报表 /reports]
|
||||
B --> F[个人设置 /settings]
|
||||
|
||||
C --> B
|
||||
D --> G[记录详情 /records/:id]
|
||||
G --> D
|
||||
E --> H[导出报表 /reports/export]
|
||||
H --> E
|
||||
F --> B
|
||||
```
|
||||
|
||||
### 页面说明
|
||||
|
||||
* **登录页**：用户输入账号密码后跳转到首页。
|
||||
* **首页**：展示个人本周工时概览和快捷入口。
|
||||
* **工时录入页**：填写日期、项目、任务内容和时长。
|
||||
* **工时查询页**：查看历史工时，可筛选、分页、导出。
|
||||
* **统计报表页**：按项目、成员或时间段汇总展示。
|
||||
* **个人设置页**：修改密码、偏好、通知等。
|
||||
|
||||
---
|
||||
|
||||
## 二、组件层级结构（Component Hierarchy）
|
||||
|
||||
### 1. 顶层布局
|
||||
|
||||
```plaintext
|
||||
<AppLayout>
|
||||
├── <Header /> # 顶部导航栏（系统名 + 用户信息 + 退出按钮）
|
||||
├── <Sidebar /> # 左侧菜单栏（首页/录入/查询/报表/设置）
|
||||
├── <MainContent /> # 主内容区（根据路由动态切换）
|
||||
└── <Footer /> # 底部版本信息
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. 页面结构与组件拆分
|
||||
|
||||
#### 首页（/dashboard）
|
||||
|
||||
```plaintext
|
||||
<DashboardPage>
|
||||
├── <SummaryCardGroup>
|
||||
│ ├── <Card title="本周总工时" value="36h" icon="clock" />
|
||||
│ ├── <Card title="项目数量" value="5" icon="folder" />
|
||||
│ ├── <Card title="未提交天数" value="1" icon="alert" />
|
||||
│
|
||||
├── <RecentActivitiesTable /> # 最近录入的工时记录（简表）
|
||||
└── <QuickActionsPanel /> # 快捷入口：录入工时 / 查看报表
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 工时录入页（/timesheet）
|
||||
|
||||
```plaintext
|
||||
<TimesheetPage>
|
||||
├── <DatePicker label="日期" />
|
||||
├── <SelectProject label="项目" />
|
||||
├── <InputText label="任务内容" multiline />
|
||||
├── <InputNumber label="时长 (小时)" />
|
||||
├── <TagSelector label="任务类型" />
|
||||
├── <ButtonGroup>
|
||||
│ ├── <Button type="primary">保存</Button>
|
||||
│ ├── <Button>重置</Button>
|
||||
│ └── <Button variant="ghost">返回</Button>
|
||||
└── <Toast /> # 提交结果提示
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 工时查询页（/records）
|
||||
|
||||
```plaintext
|
||||
<RecordsPage>
|
||||
├── <FilterBar>
|
||||
│ ├── <DateRangePicker />
|
||||
│ ├── <SelectProject />
|
||||
│ ├── <SelectMember />
|
||||
│ └── <Button type="primary">查询</Button>
|
||||
│
|
||||
├── <DataTable>
|
||||
│ ├── columns: 日期 | 项目 | 任务内容 | 工时 | 提交人 | 状态
|
||||
│ ├── 支持排序 / 分页 / 导出 CSV
|
||||
│ ├── 行点击 => <RecordDetailModal />
|
||||
│
|
||||
└── <Pagination />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 统计报表页（/reports）
|
||||
|
||||
```plaintext
|
||||
<ReportsPage>
|
||||
├── <ReportFilterBar>
|
||||
│ ├── <SelectReportType /> # 按项目/成员/时间维度
|
||||
│ ├── <DateRangePicker />
|
||||
│ ├── <Button type="primary">生成</Button>
|
||||
│
|
||||
├── <ChartArea>
|
||||
│ ├── <BarChart /> # 工时分布图
|
||||
│ ├── <PieChart /> # 项目占比图
|
||||
│
|
||||
└── <ExportPanel>
|
||||
├── <Button>导出PDF</Button>
|
||||
├── <Button>导出Excel</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 个人设置页（/settings）
|
||||
|
||||
```plaintext
|
||||
<SettingsPage>
|
||||
├── <ProfileSection>
|
||||
│ ├── <AvatarUploader />
|
||||
│ ├── <InputText label="姓名" />
|
||||
│ ├── <InputEmail label="邮箱" />
|
||||
│
|
||||
├── <PreferenceSection>
|
||||
│ ├── <Toggle label="邮件提醒" />
|
||||
│ ├── <SelectTheme />
|
||||
│
|
||||
├── <SecuritySection>
|
||||
│ ├── <ChangePasswordForm />
|
||||
│
|
||||
└── <Button type="primary">保存更改</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、设计重点（UI/UX建议）
|
||||
|
||||
* **视觉风格**：扁平化 + 浅色主题，使用蓝灰调主色，次色调橙色。
|
||||
* **数据呈现**：尽量图表化展示（Bar、Pie、Line）增强可读性。
|
||||
* **交互反馈**：录入与报表生成提供 Toast、Modal、Loading 状态。
|
||||
* **响应式布局**：主内容区栅格化（2/3主视图 + 1/3侧卡片）。
|
||||
* **可访问性**：表单控件具备清晰标签与焦点状态。
|
||||
179
docs/3.md
Normal file
179
docs/3.md
Normal file
@@ -0,0 +1,179 @@
|
||||
## 🧩 工时统计系统 UI 蓝图（JSON）
|
||||
|
||||
```json
|
||||
{
|
||||
"app": {
|
||||
"name": "工时统计系统",
|
||||
"layout": {
|
||||
"type": "AppLayout",
|
||||
"children": [
|
||||
{
|
||||
"type": "Header",
|
||||
"props": {
|
||||
"title": "工时统计系统",
|
||||
"userMenu": ["个人设置", "退出登录"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Sidebar",
|
||||
"menu": [
|
||||
{ "label": "首页", "route": "/dashboard", "icon": "home" },
|
||||
{ "label": "工时录入", "route": "/timesheet", "icon": "edit" },
|
||||
{ "label": "工时查询", "route": "/records", "icon": "table" },
|
||||
{ "label": "统计报表", "route": "/reports", "icon": "chart" },
|
||||
{ "label": "个人设置", "route": "/settings", "icon": "user" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "MainContent",
|
||||
"router": true
|
||||
},
|
||||
{
|
||||
"type": "Footer",
|
||||
"props": {
|
||||
"text": "© 2025 IBM 工程部 | 版本 v1.0.0"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
"pages": {
|
||||
"/login": {
|
||||
"title": "登录",
|
||||
"components": [
|
||||
{ "type": "Logo", "props": { "src": "/logo.svg" } },
|
||||
{ "type": "InputText", "label": "用户名" },
|
||||
{ "type": "InputPassword", "label": "密码" },
|
||||
{ "type": "Button", "props": { "text": "登录", "action": "submit" } }
|
||||
]
|
||||
},
|
||||
|
||||
"/dashboard": {
|
||||
"title": "首页",
|
||||
"components": [
|
||||
{
|
||||
"type": "SummaryCardGroup",
|
||||
"children": [
|
||||
{ "type": "Card", "props": { "title": "本周总工时", "value": "36h", "icon": "clock" } },
|
||||
{ "type": "Card", "props": { "title": "项目数量", "value": "5", "icon": "folder" } },
|
||||
{ "type": "Card", "props": { "title": "未提交天数", "value": "1", "icon": "alert" } }
|
||||
]
|
||||
},
|
||||
{ "type": "RecentActivitiesTable" },
|
||||
{ "type": "QuickActionsPanel" }
|
||||
]
|
||||
},
|
||||
|
||||
"/timesheet": {
|
||||
"title": "工时录入",
|
||||
"components": [
|
||||
{ "type": "DatePicker", "label": "日期" },
|
||||
{ "type": "SelectProject", "label": "项目" },
|
||||
{ "type": "InputText", "label": "任务内容", "props": { "multiline": true } },
|
||||
{ "type": "InputNumber", "label": "时长 (小时)" },
|
||||
{ "type": "TagSelector", "label": "任务类型" },
|
||||
{
|
||||
"type": "ButtonGroup",
|
||||
"children": [
|
||||
{ "type": "Button", "props": { "text": "保存", "variant": "primary" } },
|
||||
{ "type": "Button", "props": { "text": "重置" } },
|
||||
{ "type": "Button", "props": { "text": "返回", "variant": "ghost" } }
|
||||
]
|
||||
},
|
||||
{ "type": "Toast" }
|
||||
]
|
||||
},
|
||||
|
||||
"/records": {
|
||||
"title": "工时查询",
|
||||
"components": [
|
||||
{
|
||||
"type": "FilterBar",
|
||||
"children": [
|
||||
{ "type": "DateRangePicker" },
|
||||
{ "type": "SelectProject" },
|
||||
{ "type": "SelectMember" },
|
||||
{ "type": "Button", "props": { "text": "查询", "variant": "primary" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "DataTable",
|
||||
"props": {
|
||||
"columns": ["日期", "项目", "任务内容", "工时", "提交人", "状态"],
|
||||
"features": ["排序", "分页", "导出 CSV"]
|
||||
}
|
||||
},
|
||||
{ "type": "Pagination" },
|
||||
{ "type": "RecordDetailModal", "trigger": "rowClick" }
|
||||
]
|
||||
},
|
||||
|
||||
"/reports": {
|
||||
"title": "统计报表",
|
||||
"components": [
|
||||
{
|
||||
"type": "ReportFilterBar",
|
||||
"children": [
|
||||
{ "type": "SelectReportType" },
|
||||
{ "type": "DateRangePicker" },
|
||||
{ "type": "Button", "props": { "text": "生成", "variant": "primary" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "ChartArea",
|
||||
"children": [
|
||||
{ "type": "BarChart", "props": { "title": "工时分布" } },
|
||||
{ "type": "PieChart", "props": { "title": "项目占比" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "ExportPanel",
|
||||
"children": [
|
||||
{ "type": "Button", "props": { "text": "导出PDF" } },
|
||||
{ "type": "Button", "props": { "text": "导出Excel" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
"/settings": {
|
||||
"title": "个人设置",
|
||||
"components": [
|
||||
{
|
||||
"type": "ProfileSection",
|
||||
"children": [
|
||||
{ "type": "AvatarUploader" },
|
||||
{ "type": "InputText", "label": "姓名" },
|
||||
{ "type": "InputEmail", "label": "邮箱" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "PreferenceSection",
|
||||
"children": [
|
||||
{ "type": "Toggle", "label": "邮件提醒" },
|
||||
{ "type": "SelectTheme", "label": "主题风格" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "SecuritySection",
|
||||
"children": [
|
||||
{ "type": "ChangePasswordForm" }
|
||||
]
|
||||
},
|
||||
{ "type": "Button", "props": { "text": "保存更改", "variant": "primary" } }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 说明与建议
|
||||
|
||||
* **路由结构**：前端框架可直接用该 JSON 的键值作为路由定义。
|
||||
* **组件系统**：建议 Claude 基于 UI 框架（React + shadcn/ui 或 Vue + Element Plus）生成组件树。
|
||||
* **状态管理**：可使用 Zustand（React）或 Pinia（Vue）统一管理全局状态（用户、工时记录、报表）。
|
||||
* **数据接口**：每页留出 `useEffect` / `onMounted` 钩子与后端 API 对接。
|
||||
* **视觉风格**：蓝灰主题、圆角 2xl、浅阴影、响应式网格布局。
|
||||
Reference in New Issue
Block a user