Initial commit: Complete工时统计系统 implementation

docs/3.md

@@ -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、浅阴影、响应式网格布局。