180 lines
5.5 KiB
Markdown
180 lines
5.5 KiB
Markdown
## 🧩 工时统计系统 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、浅阴影、响应式网格布局。
|