Skip to content

Commit 79bcd4e

Browse files
windbyteswindbytes
committed
feat(工作台): 添加最近访问时间和优化提醒组件样式
1 parent 7368cbd commit 79bcd4e

3 files changed

Lines changed: 121 additions & 27 deletions

File tree

‎src/views/dashboard/Workbench/components/RecentVisits/index.tsx‎

Lines changed: 55 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { useQuery } from '@tanstack/react-query';
33
import {
44
MonitorOutlined,
55
BookOutlined,
6-
SettingOutlined
6+
SettingOutlined,
7+
ClockCircleOutlined,
8+
RightOutlined
79
} from '@ant-design/icons';
810
import type { RecentVisit } from '../../mockData';
911

@@ -17,19 +19,22 @@ const fetchRecentVisitsData = async (): Promise<RecentVisit[]> => {
1719
icon: React.createElement(MonitorOutlined, { className: "text-blue-500" }),
1820
title: '流程监控',
1921
description: '实时监控页面',
20-
link: '/workflow/monitor'
22+
link: '/workflow/monitor',
23+
visitTime: '2分钟前'
2124
},
2225
{
2326
icon: React.createElement(BookOutlined, { className: "text-green-500" }),
2427
title: '流程模板库',
2528
description: '模板管理页面',
26-
link: '/workflow/templates'
29+
link: '/workflow/templates',
30+
visitTime: '15分钟前'
2731
},
2832
{
2933
icon: React.createElement(SettingOutlined, { className: "text-orange-500" }),
3034
title: '节点管理',
3135
description: '节点配置页面',
32-
link: '/workflow/nodes'
36+
link: '/workflow/nodes',
37+
visitTime: '1小时前'
3338
}
3439
];
3540
};
@@ -43,10 +48,10 @@ export const RecentVisits: React.FC = () => {
4348

4449
if (isLoading) {
4550
return (
46-
<div className="space-y-3">
51+
<div className="space-y-4">
4752
{[1, 2, 3].map((index) => (
4853
<div key={index} className="animate-pulse">
49-
<div className="h-16 bg-gray-200 rounded-lg"></div>
54+
<div className="h-20 bg-gray-200 rounded-xl"></div>
5055
</div>
5156
))}
5257
</div>
@@ -55,26 +60,60 @@ export const RecentVisits: React.FC = () => {
5560

5661
if (!recentVisits || recentVisits.length === 0) {
5762
return (
58-
<div className="text-center py-8 text-gray-500">
59-
暂无最近访问数据
63+
<div className="text-center py-12 text-gray-500">
64+
<div className="text-4xl mb-3">📋</div>
65+
<div className="text-sm">暂无最近访问数据</div>
6066
</div>
6167
);
6268
}
6369

6470
return (
65-
<div className="space-y-3">
71+
<div className="space-y-4">
6672
{recentVisits.map((item, index) => (
6773
<div
6874
key={`recent-${item.title}-${index}`}
69-
className="flex items-center p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors duration-200"
75+
className="group relative overflow-hidden rounded-xl border border-gray-200 bg-white hover:border-blue-300 hover:shadow-lg transition-all duration-300 cursor-pointer"
7076
>
71-
<div className="text-lg mr-3">
72-
{item.icon}
73-
</div>
74-
<div className="flex-1">
75-
<div className="font-medium text-gray-800 text-sm">{item.title}</div>
76-
<div className="text-xs text-gray-500">{item.description}</div>
77+
{/* 左侧渐变装饰条 */}
78+
<div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-400 via-purple-400 to-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
79+
80+
{/* 主要内容 */}
81+
<div className="flex items-center p-4 relative">
82+
{/* 图标容器 */}
83+
<div className="relative mr-4">
84+
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center group-hover:from-blue-100 group-hover:to-blue-200 transition-all duration-300">
85+
<div className="text-xl">
86+
{item.icon}
87+
</div>
88+
</div>
89+
{/* 访问时间指示器 */}
90+
<div className="absolute -top-1 -right-1 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
91+
<ClockCircleOutlined className="text-white text-xs" />
92+
</div>
93+
</div>
94+
95+
{/* 内容区域 */}
96+
<div className="flex-1 min-w-0">
97+
<div className="flex items-center justify-between mb-2">
98+
<h3 className="font-semibold text-gray-800 text-base group-hover:text-blue-600 transition-colors duration-200 truncate">
99+
{item.title}
100+
</h3>
101+
<div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
102+
<RightOutlined className="text-blue-400 text-sm" />
103+
</div>
104+
</div>
105+
<p className="text-sm text-gray-600 mb-2 leading-relaxed">
106+
{item.description}
107+
</p>
108+
<div className="flex items-center text-xs text-gray-400">
109+
<ClockCircleOutlined className="mr-1" />
110+
<span>{item.visitTime || '刚刚'}</span>
111+
</div>
112+
</div>
77113
</div>
114+
115+
{/* 悬停时的背景光效 */}
116+
<div className="absolute inset-0 bg-gradient-to-r from-blue-50/30 to-purple-50/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
78117
</div>
79118
))}
80119
</div>

‎src/views/dashboard/Workbench/components/TodoReminders/index.tsx‎

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import type React from 'react';
22
import { useQuery } from '@tanstack/react-query';
33
import { Tag } from 'antd';
44
import { WarningOutlined, ExclamationCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
@@ -70,6 +70,49 @@ export const TodoReminders: React.FC = () => {
7070
}
7171
};
7272

73+
// 根据类型和优先级获取背景样式
74+
const getBackgroundStyle = (type: string, priority: string) => {
75+
// 高优先级使用更深的背景色
76+
if (priority === 'high') {
77+
switch (type) {
78+
case 'error':
79+
return 'bg-gradient-to-r from-red-50 to-red-100 border-red-200 hover:border-red-300';
80+
case 'warning':
81+
return 'bg-gradient-to-r from-orange-50 to-orange-100 border-orange-200 hover:border-orange-300';
82+
case 'info':
83+
return 'bg-gradient-to-r from-blue-50 to-blue-100 border-blue-200 hover:border-blue-300';
84+
default:
85+
return 'bg-gradient-to-r from-gray-50 to-gray-100 border-gray-200 hover:border-gray-300';
86+
}
87+
}
88+
89+
// 中优先级使用中等深度的背景色
90+
if (priority === 'medium') {
91+
switch (type) {
92+
case 'error':
93+
return 'bg-gradient-to-r from-red-25 to-red-75 border-red-150 hover:border-red-250';
94+
case 'warning':
95+
return 'bg-gradient-to-r from-orange-25 to-orange-75 border-orange-150 hover:border-orange-250';
96+
case 'info':
97+
return 'bg-gradient-to-r from-blue-25 to-blue-75 border-blue-150 hover:border-blue-250';
98+
default:
99+
return 'bg-gradient-to-r from-gray-25 to-gray-75 border-gray-150 hover:border-gray-250';
100+
}
101+
}
102+
103+
// 低优先级使用最浅的背景色
104+
switch (type) {
105+
case 'error':
106+
return 'bg-gradient-to-r from-red-25 to-red-50 border-red-100 hover:border-red-200';
107+
case 'warning':
108+
return 'bg-gradient-to-r from-orange-25 to-orange-50 border-orange-100 hover:border-orange-200';
109+
case 'info':
110+
return 'bg-gradient-to-r from-blue-25 to-blue-50 border-blue-100 hover:border-blue-200';
111+
default:
112+
return 'bg-gradient-to-r from-gray-25 to-gray-50 border-gray-100 hover:border-gray-200';
113+
}
114+
};
115+
73116
if (isLoading) {
74117
return (
75118
<div className="space-y-3">
@@ -91,19 +134,27 @@ export const TodoReminders: React.FC = () => {
91134
{todoReminders.map((item) => (
92135
<div
93136
key={item.id}
94-
className="p-3 rounded-lg border border-gray-200 hover:border-orange-300 transition-colors duration-200"
137+
className={`p-4 rounded-xl border transition-all duration-300 hover:shadow-md ${getBackgroundStyle(item.type, item.priority)}`}
95138
>
96-
<div className="flex items-start justify-between mb-2">
139+
<div className="flex items-start justify-between mb-3">
97140
<div className="flex items-center">
98-
{getIcon(item.type)}
99-
<span className="ml-2 font-medium text-gray-800 text-sm">{item.title}</span>
141+
<div className="p-2 rounded-full bg-white/60 backdrop-blur-sm">
142+
{getIcon(item.type)}
143+
</div>
144+
<span className="ml-3 font-semibold text-gray-800 text-sm">{item.title}</span>
100145
</div>
101-
<Tag color={getPriorityColor(item.priority)}>
146+
<Tag
147+
color={getPriorityColor(item.priority)}
148+
className="font-medium shadow-sm"
149+
>
102150
{item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}
103151
</Tag>
104152
</div>
105-
<div className="text-xs text-gray-600 mb-2">{item.description}</div>
106-
<div className="text-xs text-gray-400">{item.time}</div>
153+
<div className="text-sm text-gray-700 mb-3 leading-relaxed">{item.description}</div>
154+
<div className="text-xs text-gray-500 flex items-center">
155+
<span className="inline-block w-2 h-2 rounded-full bg-current mr-2 opacity-60"></span>
156+
{item.time}
157+
</div>
107158
</div>
108159
))}
109160
</div>

‎src/views/dashboard/Workbench/mockData.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export interface RecentVisit {
5353
title: string;
5454
description: string;
5555
link: string;
56+
visitTime?: string;
5657
}
5758

5859
export interface TodoReminder {
@@ -242,19 +243,22 @@ export const mockWorkbenchData = async (): Promise<WorkbenchData> => {
242243
icon: React.createElement(MonitorOutlined, { className: "text-blue-500" }),
243244
title: '流程监控',
244245
description: '实时监控页面',
245-
link: '/workflow/monitor'
246+
link: '/workflow/monitor',
247+
visitTime: '2分钟前'
246248
},
247249
{
248250
icon: React.createElement(BookOutlined, { className: "text-green-500" }),
249251
title: '流程模板库',
250252
description: '模板管理页面',
251-
link: '/workflow/templates'
253+
link: '/workflow/templates',
254+
visitTime: '15分钟前'
252255
},
253256
{
254257
icon: React.createElement(SettingOutlined, { className: "text-orange-500" }),
255258
title: '节点管理',
256259
description: '节点配置页面',
257-
link: '/workflow/nodes'
260+
link: '/workflow/nodes',
261+
visitTime: '1小时前'
258262
}
259263
],
260264
todoReminders: [

0 commit comments

Comments
 (0)