重构消息通知弹窗
This commit is contained in:
dengqichen
parent
a872e8d290
commit
d14f80ce51
@ -24,7 +24,6 @@ import {
|
||||
User,
|
||||
Calendar,
|
||||
FileText,
|
||||
Package,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
@ -148,14 +147,14 @@ export const PendingApprovalModal: React.FC<PendingApprovalModalProps> = ({
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-5xl max-h-[85vh]">
|
||||
<DialogContent className="max-w-2xl max-h-[80vh]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-orange-600" />
|
||||
<ClipboardCheck className="h-5 w-5" />
|
||||
待审批列表
|
||||
{!loading && (
|
||||
<Badge variant="secondary" className="ml-2 bg-orange-50 text-orange-700 border-orange-200">
|
||||
{approvalList.length} 条待审批
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{approvalList.length} 条
|
||||
</Badge>
|
||||
)}
|
||||
</DialogTitle>
|
||||
@ -166,134 +165,95 @@ export const PendingApprovalModal: React.FC<PendingApprovalModalProps> = ({
|
||||
<DialogLoading />
|
||||
) : approvalList.length === 0 ? (
|
||||
// 空状态
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<div className="p-4 rounded-full bg-orange-50 mb-4">
|
||||
<ClipboardCheck className="h-12 w-12 text-orange-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">暂无待审批任务</h3>
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<ClipboardCheck className="h-10 w-10 text-muted-foreground/50 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
当前没有需要您审批的部署申请
|
||||
暂无待审批任务
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
// 列表内容
|
||||
<div className="space-y-3">
|
||||
// 列表内容 - 紧凑风格
|
||||
<div className="space-y-2">
|
||||
{approvalList.map((task) => (
|
||||
<div
|
||||
key={task.taskId}
|
||||
className="group relative p-4 border border-gray-200/80 rounded-xl hover:border-orange-300 hover:shadow-lg transition-all duration-300 bg-gradient-to-br from-white to-orange-50/30 overflow-hidden"
|
||||
className="group p-3 border border-border rounded-lg hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
{/* 装饰性渐变背景 */}
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-orange-100/40 to-transparent rounded-full blur-2xl -z-0" />
|
||||
|
||||
{/* 左侧内容区 */}
|
||||
<div className="flex gap-3 relative z-10">
|
||||
{/* 应用图标 */}
|
||||
<div className="shrink-0">
|
||||
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-lg shadow-orange-500/30">
|
||||
<Package className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
{/* 主要信息行 */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1">
|
||||
<span className="font-medium text-foreground truncate">
|
||||
{task.applicationName}
|
||||
</span>
|
||||
<Badge variant="outline" className="shrink-0 text-xs">
|
||||
#{task.deployRecordId}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="shrink-0 text-xs">
|
||||
{task.environmentName}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 px-2 text-xs"
|
||||
onClick={() => handleViewDetail(task)}
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-7 px-2.5 text-xs"
|
||||
onClick={() => handleOpenApproval(task, ApprovalResult.APPROVED)}
|
||||
>
|
||||
<CheckCircle className="h-3.5 w-3.5 mr-1" />
|
||||
通过
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 px-2.5 text-xs text-destructive border-destructive/50 hover:bg-destructive/10"
|
||||
onClick={() => handleOpenApproval(task, ApprovalResult.REJECTED)}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5 mr-1" />
|
||||
拒绝
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主要信息 */}
|
||||
<div className="flex-1 min-w-0 space-y-1.5">
|
||||
{/* 标题行 */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-base font-bold text-gray-900 truncate">
|
||||
{task.applicationName}
|
||||
</h3>
|
||||
<span className="shrink-0 text-xs px-1.5 py-0.5 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded font-semibold shadow-sm">
|
||||
#{task.deployRecordId}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-600">
|
||||
<code className="px-1.5 py-0.5 bg-gray-100 text-gray-700 rounded font-mono font-medium">
|
||||
{task.applicationCode}
|
||||
</code>
|
||||
<span className="text-gray-400">•</span>
|
||||
<span className="font-medium">{task.environmentName}</span>
|
||||
<span className="text-gray-400">•</span>
|
||||
<span className="font-medium">{task.teamName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧操作按钮 */}
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-8 px-3 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white shadow-md shadow-green-500/30 hover:shadow-lg hover:shadow-green-500/40 transition-all duration-200 font-semibold text-xs"
|
||||
onClick={() => handleOpenApproval(task, ApprovalResult.APPROVED)}
|
||||
>
|
||||
<CheckCircle className="h-3.5 w-3.5 mr-1" />
|
||||
通过
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-8 px-3 border-2 border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 hover:border-red-400 font-semibold transition-all duration-200 text-xs"
|
||||
onClick={() => handleOpenApproval(task, ApprovalResult.REJECTED)}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5 mr-1" />
|
||||
拒绝
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 审批内容 */}
|
||||
{/* 次要信息行 */}
|
||||
<div className="mt-1.5 flex items-center justify-between text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{(task.approvalTitle || task.approvalContent) && (
|
||||
<div className="p-2.5 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200/60 rounded-lg text-sm shadow-sm">
|
||||
{task.approvalTitle && (
|
||||
<div className="font-semibold text-gray-900 mb-0.5 flex items-center gap-1.5 text-xs">
|
||||
<div className="w-1 h-3 bg-orange-500 rounded-full" />
|
||||
{task.approvalTitle}
|
||||
</div>
|
||||
)}
|
||||
{task.approvalContent && (
|
||||
<div className="text-xs text-gray-600 leading-relaxed pl-2.5">
|
||||
{task.approvalContent}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="truncate">
|
||||
{task.approvalTitle}{task.approvalTitle && task.approvalContent && ' - '}{task.approvalContent}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* 底部信息栏 */}
|
||||
<div className="flex items-center justify-between pt-1">
|
||||
<div className="flex items-center gap-3 text-xs">
|
||||
<div className="flex items-center gap-1 text-gray-600">
|
||||
<User className="h-3 w-3 text-blue-600" />
|
||||
<span className="font-medium">{task.deployBy}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-gray-600">
|
||||
<Calendar className="h-3 w-3 text-purple-600" />
|
||||
<span className="font-medium">{formatTime(task.deployStartTime)}</span>
|
||||
</div>
|
||||
{task.pendingDuration && (
|
||||
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-amber-100 rounded">
|
||||
<Clock className="h-3 w-3 text-amber-600" />
|
||||
<span className="text-amber-700 font-semibold">等待 {formatDuration(task.pendingDuration)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 px-2 text-xs text-orange-600 hover:text-orange-700 hover:bg-orange-50 opacity-0 group-hover:opacity-100 transition-all duration-200 font-medium"
|
||||
onClick={() => handleViewDetail(task)}
|
||||
>
|
||||
查看详情 →
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 备注（如果有） */}
|
||||
{task.deployRemark && (
|
||||
<div className="flex items-start gap-1.5 p-2 bg-gray-50 border border-gray-200 rounded text-xs">
|
||||
<FileText className="h-3 w-3 text-gray-600 shrink-0 mt-0.5" />
|
||||
<span className="text-gray-700 leading-relaxed">{task.deployRemark}</span>
|
||||
</div>
|
||||
<span className="flex items-center gap-1 truncate">
|
||||
<FileText className="h-3 w-3 shrink-0" />
|
||||
{task.deployRemark}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{task.pendingDuration && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatDuration(task.pendingDuration)}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<User className="h-3 w-3" />
|
||||
{task.deployBy}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{formatTime(task.deployStartTime)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user