From b807f856a5528c49d795f8c032b3e72e4a76c6f8 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 10 Jan 2025 17:30:17 +0800
Subject: [PATCH] 1

---
 .../pages/Deploy/ProjectGroup/List/index.tsx  | 126 ++++++++++++++----
 1 file changed, 98 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
index daaa5746..4cdb6d9c 100644
--- a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
+++ b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
@@ -328,37 +328,107 @@ const ProjectGroupList: React.FC = () => {
                 <CardHeader className="flex flex-row items-center justify-between">
                     <CardTitle>项目组列表</CardTitle>
                 </CardHeader>
-                <CardContent>
-                    <div className="rounded-md border">
-                        <Table>
-                            <TableHeader>
-                                <TableRow>
-                                    {columns.map((column) => (
-                                        <TableHead
-                                            key={column.accessorKey || column.id}
-                                            style={{width: column.size}}
+                <CardContent className="p-0">
+                    <div className="relative rounded-md border">
+                        <div className="overflow-auto">
+                            <Table>
+                                <TableHeader>
+                                    <TableRow>
+                                        <TableHead className="min-w-[140px]">项目组编码</TableHead>
+                                        <TableHead className="min-w-[140px]">项目组名称</TableHead>
+                                        <TableHead className="min-w-[200px]">项目组描述</TableHead>
+                                        <TableHead className="min-w-[120px]">项目组类型</TableHead>
+                                        <TableHead className="min-w-[100px]">环境数量</TableHead>
+                                        <TableHead className="min-w-[100px]">项目数量</TableHead>
+                                        <TableHead className="min-w-[80px]">状态</TableHead>
+                                        <TableHead className="min-w-[80px]">排序</TableHead>
+                                        <TableHead 
+                                            className="sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.2)] min-w-[160px]"
                                         >
-                                            {column.header}
+                                            操作
                                         </TableHead>
-                                    ))}
-                                </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                                {list.map((item) => (
-                                    <TableRow key={item.id}>
-                                        {columns.map((column) => (
-                                            <TableCell
-                                                key={column.accessorKey || column.id}
-                                            >
-                                                {column.cell
-                                                    ? column.cell({row: {original: item}})
-                                                    : item[column.accessorKey!]}
-                                            </TableCell>
-                                        ))}
                                     </TableRow>
-                                ))}
-                            </TableBody>
-                        </Table>
+                                </TableHeader>
+                                <TableBody>
+                                    {list.map((item) => (
+                                        <TableRow key={item.id}>
+                                            <TableCell>{item.projectGroupCode}</TableCell>
+                                            <TableCell>{item.projectGroupName}</TableCell>
+                                            <TableCell>{item.projectGroupDesc}</TableCell>
+                                            <TableCell>
+                                                {(() => {
+                                                    const typeInfo = getProjectTypeInfo(item.type);
+                                                    return (
+                                                        <Badge variant="outline" className="flex items-center gap-1">
+                                                            {typeInfo.icon}
+                                                            {typeInfo.label}
+                                                        </Badge>
+                                                    );
+                                                })()}
+                                            </TableCell>
+                                            <TableCell>
+                                                <div className="flex items-center gap-1">
+                                                    <EnvironmentOutlined/>
+                                                    <span>{item.totalEnvironments}</span>
+                                                </div>
+                                            </TableCell>
+                                            <TableCell>
+                                                <div className="flex items-center gap-1">
+                                                    <TeamOutlined/>
+                                                    <span>{item.totalApplications}</span>
+                                                </div>
+                                            </TableCell>
+                                            <TableCell>
+                                                <Badge variant={item.enabled ? "outline" : "secondary"}>
+                                                    {item.enabled ? '启用' : '禁用'}
+                                                </Badge>
+                                            </TableCell>
+                                            <TableCell>{item.sort}</TableCell>
+                                            <TableCell className="sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.2)]">
+                                                <div className="flex items-center gap-2">
+                                                    <Button
+                                                        variant="ghost"
+                                                        size="sm"
+                                                        onClick={() => handleEdit(item)}
+                                                    >
+                                                        <EditOutlined className="mr-1"/>
+                                                        编辑
+                                                    </Button>
+                                                    <AlertDialog>
+                                                        <AlertDialogTrigger asChild>
+                                                            <Button
+                                                                variant="ghost"
+                                                                size="sm"
+                                                                className="text-destructive"
+                                                            >
+                                                                <DeleteOutlined className="mr-1"/>
+                                                                删除
+                                                            </Button>
+                                                        </AlertDialogTrigger>
+                                                        <AlertDialogContent>
+                                                            <AlertDialogHeader>
+                                                                <AlertDialogTitle>确定要删除该项目组吗？</AlertDialogTitle>
+                                                                <AlertDialogDescription>
+                                                                    删除后将无法恢复，请谨慎操作
+                                                                </AlertDialogDescription>
+                                                            </AlertDialogHeader>
+                                                            <AlertDialogFooter>
+                                                                <AlertDialogCancel>取消</AlertDialogCancel>
+                                                                <AlertDialogAction
+                                                                    onClick={() => handleDelete(item.id)}
+                                                                >
+                                                                    确定
+                                                                </AlertDialogAction>
+                                                            </AlertDialogFooter>
+                                                        </AlertDialogContent>
+                                                    </AlertDialog>
+                                                </div>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </div>
                     </div>
                 </CardContent>
             </Card>