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

🧩 工时统计系统 UI 蓝图（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、浅阴影、响应式网格布局。