Initial commit: Complete工时统计系统 implementation

2025-11-13 01:00:27 +08:00
commit b554c14ce6
47 changed files with 6040 additions and 0 deletions
--- a/docs/2.md
+++ b/docs/2.md
@@ -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侧卡片）。
+* **可访问性**：表单控件具备清晰标签与焦点状态。