148 lines
4.3 KiB
Markdown
148 lines
4.3 KiB
Markdown
# 🧭 工时统计系统 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侧卡片）。
|
||
* **可访问性**：表单控件具备清晰标签与焦点状态。 |