time-tracking-system-nodejs/docs/2.md

🧭 工时统计系统 Web UI 设计文档

一、页面流转逻辑（Page Flow）

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. 顶层布局

<AppLayout>
 ├── <Header />              # 顶部导航栏（系统名 + 用户信息 + 退出按钮）
 ├── <Sidebar />             # 左侧菜单栏（首页/录入/查询/报表/设置）
 ├── <MainContent />         # 主内容区（根据路由动态切换）
 └── <Footer />              # 底部版本信息

---

2. 页面结构与组件拆分

首页（/dashboard）

<DashboardPage>
 ├── <SummaryCardGroup>
 │     ├── <Card title="本周总工时" value="36h" icon="clock" />
 │     ├── <Card title="项目数量" value="5" icon="folder" />
 │     ├── <Card title="未提交天数" value="1" icon="alert" />
 │
 ├── <RecentActivitiesTable />     # 最近录入的工时记录（简表）
 └── <QuickActionsPanel />         # 快捷入口：录入工时 / 查看报表

---

工时录入页（/timesheet）

<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）

<RecordsPage>
 ├── <FilterBar>
 │     ├── <DateRangePicker />
 │     ├── <SelectProject />
 │     ├── <SelectMember />
 │     └── <Button type="primary">查询</Button>
 │
 ├── <DataTable>
 │     ├── columns: 日期 | 项目 | 任务内容 | 工时 | 提交人 | 状态
 │     ├── 支持排序 / 分页 / 导出 CSV
 │     ├── 行点击 => <RecordDetailModal />
 │
 └── <Pagination />

---

统计报表页（/reports）

<ReportsPage>
 ├── <ReportFilterBar>
 │     ├── <SelectReportType />  # 按项目/成员/时间维度
 │     ├── <DateRangePicker />
 │     ├── <Button type="primary">生成</Button>
 │
 ├── <ChartArea>
 │     ├── <BarChart />          # 工时分布图
 │     ├── <PieChart />          # 项目占比图
 │
 └── <ExportPanel>
       ├── <Button>导出PDF</Button>
       ├── <Button>导出Excel</Button>

---

个人设置页（/settings）

<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侧卡片）。
• 可访问性：表单控件具备清晰标签与焦点状态。