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