From d14f80ce51af5f57ab3aaa0fc7ea3008055aaa73 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 28 Nov 2025 09:13:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=B6=88=E6=81=AF=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PendingApprovalModal.tsx       | 196 +++++++-----------
 1 file changed, 78 insertions(+), 118 deletions(-)

diff --git a/frontend/src/pages/Dashboard/components/PendingApprovalModal.tsx b/frontend/src/pages/Dashboard/components/PendingApprovalModal.tsx
index 109abeef..a9db13c1 100644
--- a/frontend/src/pages/Dashboard/components/PendingApprovalModal.tsx
+++ b/frontend/src/pages/Dashboard/components/PendingApprovalModal.tsx
@@ -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>
                                 ))}