重构消息通知弹窗
This commit is contained in:
dengqichen
parent
a872e8d290
commit
d14f80ce51
@ -24,7 +24,6 @@ import {
|
|||||||
User,
|
User,
|
||||||
Calendar,
|
Calendar,
|
||||||
FileText,
|
FileText,
|
||||||
Package,
|
|
||||||
Clock,
|
Clock,
|
||||||
CheckCircle,
|
CheckCircle,
|
||||||
XCircle,
|
XCircle,
|
||||||
@ -148,14 +147,14 @@ export const PendingApprovalModal: React.FC<PendingApprovalModalProps> = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
<DialogContent className="max-w-5xl max-h-[85vh]">
|
<DialogContent className="max-w-2xl max-h-[80vh]">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle className="flex items-center gap-2">
|
<DialogTitle className="flex items-center gap-2">
|
||||||
<ClipboardCheck className="h-5 w-5 text-orange-600" />
|
<ClipboardCheck className="h-5 w-5" />
|
||||||
待审批列表
|
待审批列表
|
||||||
{!loading && (
|
{!loading && (
|
||||||
<Badge variant="secondary" className="ml-2 bg-orange-50 text-orange-700 border-orange-200">
|
<Badge variant="secondary" className="ml-2">
|
||||||
{approvalList.length} 条待审批
|
{approvalList.length} 条
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
@ -166,64 +165,47 @@ export const PendingApprovalModal: React.FC<PendingApprovalModalProps> = ({
|
|||||||
<DialogLoading />
|
<DialogLoading />
|
||||||
) : approvalList.length === 0 ? (
|
) : approvalList.length === 0 ? (
|
||||||
// 空状态
|
// 空状态
|
||||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||||
<div className="p-4 rounded-full bg-orange-50 mb-4">
|
<ClipboardCheck className="h-10 w-10 text-muted-foreground/50 mb-3" />
|
||||||
<ClipboardCheck className="h-12 w-12 text-orange-400" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold mb-2">暂无待审批任务</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
当前没有需要您审批的部署申请
|
暂无待审批任务
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
// 列表内容
|
// 列表内容 - 紧凑风格
|
||||||
<div className="space-y-3">
|
<div className="space-y-2">
|
||||||
{approvalList.map((task) => (
|
{approvalList.map((task) => (
|
||||||
<div
|
<div
|
||||||
key={task.taskId}
|
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 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">
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* 主要信息 */}
|
|
||||||
<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}
|
{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>
|
</span>
|
||||||
</div>
|
<Badge variant="outline" className="shrink-0 text-xs">
|
||||||
<div className="flex items-center gap-2 text-xs text-gray-600">
|
#{task.deployRecordId}
|
||||||
<code className="px-1.5 py-0.5 bg-gray-100 text-gray-700 rounded font-mono font-medium">
|
</Badge>
|
||||||
{task.applicationCode}
|
<Badge variant="secondary" className="shrink-0 text-xs">
|
||||||
</code>
|
{task.environmentName}
|
||||||
<span className="text-gray-400">•</span>
|
</Badge>
|
||||||
<span className="font-medium">{task.environmentName}</span>
|
|
||||||
<span className="text-gray-400">•</span>
|
|
||||||
<span className="font-medium">{task.teamName}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 右侧操作按钮 */}
|
{/* 操作按钮 */}
|
||||||
<div className="flex gap-2 shrink-0">
|
<div className="flex items-center gap-1.5 shrink-0">
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
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"
|
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)}
|
onClick={() => handleOpenApproval(task, ApprovalResult.APPROVED)}
|
||||||
>
|
>
|
||||||
<CheckCircle className="h-3.5 w-3.5 mr-1" />
|
<CheckCircle className="h-3.5 w-3.5 mr-1" />
|
||||||
@ -232,7 +214,7 @@ export const PendingApprovalModal: React.FC<PendingApprovalModalProps> = ({
|
|||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="outline"
|
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"
|
className="h-7 px-2.5 text-xs text-destructive border-destructive/50 hover:bg-destructive/10"
|
||||||
onClick={() => handleOpenApproval(task, ApprovalResult.REJECTED)}
|
onClick={() => handleOpenApproval(task, ApprovalResult.REJECTED)}
|
||||||
>
|
>
|
||||||
<XCircle className="h-3.5 w-3.5 mr-1" />
|
<XCircle className="h-3.5 w-3.5 mr-1" />
|
||||||
@ -241,59 +223,37 @@ export const PendingApprovalModal: React.FC<PendingApprovalModalProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
</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) && (
|
{(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">
|
<span className="truncate">
|
||||||
{task.approvalTitle && (
|
{task.approvalTitle}{task.approvalTitle && task.approvalContent && ' - '}{task.approvalContent}
|
||||||
<div className="font-semibold text-gray-900 mb-0.5 flex items-center gap-1.5 text-xs">
|
</span>
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 底部信息栏 */}
|
|
||||||
<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 && (
|
{task.deployRemark && (
|
||||||
<div className="flex items-start gap-1.5 p-2 bg-gray-50 border border-gray-200 rounded text-xs">
|
<span className="flex items-center gap-1 truncate">
|
||||||
<FileText className="h-3 w-3 text-gray-600 shrink-0 mt-0.5" />
|
<FileText className="h-3 w-3 shrink-0" />
|
||||||
<span className="text-gray-700 leading-relaxed">{task.deployRemark}</span>
|
{task.deployRemark}
|
||||||
</div>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user