From 3f1240e9725098da165d38d8bce4021272bb9a1d Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Mon, 23 Dec 2024 21:51:09 +0800
Subject: [PATCH] 1

---
 .../pages/Deploy/ProjectGroup/List/index.less | 291 +++++++++---------
 .../pages/Deploy/ProjectGroup/List/index.tsx  | 216 +++++--------
 2 files changed, 232 insertions(+), 275 deletions(-)

diff --git a/frontend/src/pages/Deploy/ProjectGroup/List/index.less b/frontend/src/pages/Deploy/ProjectGroup/List/index.less
index bdaf050c..31030915 100644
--- a/frontend/src/pages/Deploy/ProjectGroup/List/index.less
+++ b/frontend/src/pages/Deploy/ProjectGroup/List/index.less
@@ -1,170 +1,187 @@
 .project-card {
   &:hover {
     transform: translateY(-4px);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  }
-
-  .ant-card-actions {
-    background: #fafafa;
-    border-top: 1px solid #f0f0f0;
-    
-    li {
-      margin: 12px 0;
-      
-      &:not(:last-child) {
-        border-right: 1px solid #f0f0f0;
-      }
-    }
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }
 
   .ant-card-body {
     padding: 0;
   }
 
-  .ant-tag {
-    border: none;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    
-    &:hover {
-      opacity: 0.8;
+  .project-content {
+    padding: 20px;
+  }
+
+  // 项目组头部
+  .project-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 16px;
+
+    .project-type {
+      margin: 0;
+      padding: 6px;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
     }
-  }
 
-  .ant-typography {
-    margin-bottom: 0;
-  }
+    .title-section {
+      flex: 1;
+      min-width: 0;
 
-  .ant-btn {
-    &:hover {
-      transform: scale(1.05);
-      transition: all 0.3s ease;
-    }
-  }
-
-  .ant-space {
-    .anticon {
-      font-size: 14px;
-    }
-  }
-
-  .environment-section {
-    .section-header {
-      margin-bottom: 16px;
-    }
-  }
-
-  .environment-list {
-    .environment-item {
-      background: #fff;
-      border-radius: 8px;
-      padding: 16px;
-      border: 1px solid #f0f0f0;
-      margin-bottom: 12px;
-      transition: all 0.3s ease;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-      
-      &:hover {
-        transform: translateX(4px);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-        border-color: #d9d9d9;
+      .project-name {
+        margin: 0;
+        font-size: 16px;
+        line-height: 1.4;
+        color: #1f1f1f;
       }
 
-      .env-header {
-        .env-title {
+      .project-code {
+        margin-top: 4px;
+        font-size: 13px;
+        color: #666;
+        font-family: 'monaco, monospace';
+      }
+    }
+  }
+
+  // 项目组描述
+  .project-desc {
+    color: #666;
+    font-size: 13px;
+    line-height: 1.6;
+    margin-bottom: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  // 项目组统计
+  .project-stats {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 20px;
+    padding: 12px;
+    background: #fafafa;
+    border-radius: 6px;
+
+    .stat-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: #666;
+      font-size: 13px;
+
+      .anticon {
+        font-size: 14px;
+        color: #8c8c8c;
+      }
+    }
+  }
+
+  // 环境列表
+  .environments-section {
+    margin-bottom: 20px;
+
+    .env-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .env-item {
+        padding: 12px;
+        background: #fafafa;
+        border-radius: 6px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: #f0f0f0;
+        }
+
+        .env-main {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 12px;
-        }
+          gap: 12px;
 
-        .env-tags {
-          display: flex;
-          gap: 6px;
-          
-          .env-tag {
-            margin: 0;
-            padding: 4px 8px;
-            border-radius: 4px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            
-            .anticon {
+          .env-info {
+            flex: 1;
+            min-width: 0;
+
+            .env-name {
+              display: block;
               font-size: 14px;
+              font-weight: 500;
+              color: #262626;
+              margin-bottom: 4px;
+            }
+
+            .env-code {
+              display: block;
+              font-size: 12px;
+              color: #666;
+              font-family: 'monaco, monospace';
+            }
+          }
+
+          .env-tags {
+            display: flex;
+            gap: 4px;
+            flex-shrink: 0;
+
+            .ant-tag {
+              margin: 0;
+              padding: 4px;
+              border: none;
+              border-radius: 4px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .anticon {
+                font-size: 12px;
+              }
             }
           }
         }
 
-        .env-meta {
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          
-          .env-code {
-            font-family: 'monaco, monospace';
-            color: #666;
-            background: #f5f5f5;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            margin: 0;
-          }
-          
-          .env-desc {
-            font-size: 12px;
-            color: #8c8c8c;
-            max-width: 200px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            cursor: help;
-          }
-        }
-      }
-
-      .env-footer {
-        margin-top: 12px;
-        padding-top: 12px;
-        border-top: 1px dashed #f0f0f0;
-        
-        .anticon {
-          opacity: 0.6;
+        .env-desc {
+          margin-top: 8px;
+          font-size: 12px;
+          color: #8c8c8c;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
       }
     }
   }
 
-  .info-section {
-    background: #f5f5f5;
-    border-radius: 8px;
-    padding: 16px;
-    margin-bottom: 16px;
-    transition: all 0.3s ease;
+  // 操作按钮
+  .project-actions {
+    display: flex;
+    gap: 8px;
+    padding-top: 16px;
+    border-top: 1px dashed #f0f0f0;
 
-    &:hover {
-      background: #f0f0f0;
-    }
-
-    .section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 12px;
-    }
-
-    .section-content {
-      background: #fff;
+    .ant-btn {
+      padding: 4px 12px;
+      height: 32px;
       border-radius: 4px;
-      border: 1px solid #f0f0f0;
-      padding: 8px;
-      
-      &.code {
-        font-family: 'monaco, monospace';
-        font-size: 14px;
-        color: #262626;
+
+      &:hover {
+        transform: translateY(-1px);
+        background: #fafafa;
+      }
+
+      &.ant-btn-dangerous:hover {
+        background: #fff1f0;
       }
     }
   }
diff --git a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
index 77b8ca49..1b39acef 100644
--- a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
+++ b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
@@ -138,148 +138,76 @@ const ProjectList: React.FC = () => {
         hoverable
         className="project-card"
         style={{
-          borderRadius: '12px',
+          borderRadius: '8px',
           overflow: 'hidden',
           height: '100%',
           transition: 'all 0.3s ease',
         }}
-        actions={[
-          <Tooltip title="编辑项目组">
-            <Button 
-              type="text" 
-              icon={<EditOutlined />}
-              onClick={() => handleEdit(project)}
-            >
-              编辑
-            </Button>
-          </Tooltip>,
-          <Tooltip title="删除项目组">
-            <Button 
-              type="text" 
-              danger 
-              icon={<DeleteOutlined />}
-              onClick={() => handleDelete(project.id)}
-            >
-              删除
-            </Button>
-          </Tooltip>,
-          <Tooltip title="管理成员">
-            <Button 
-              type="text"
-              icon={<TeamOutlined />}
-            >
-              成员
-            </Button>
-          </Tooltip>
-        ]}
       >
-        <div style={{ position: 'relative', padding: '16px' }}>
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: '16px'
-          }}>
-            <Title level={4} style={{ margin: 0 }}>
-              {project.projectGroupName}
-            </Title>
-            <Tooltip title={typeInfo.description}>
-              <Tag color={typeInfo.color} style={{ borderRadius: '12px', padding: '0 12px' }}>
-                {typeInfo.icon} {typeInfo.label}
-              </Tag>
-            </Tooltip>
-          </div>
-
-          <Text
-            type="secondary"
-            style={{
-              display: 'block',
-              marginBottom: '24px',
-              height: '40px',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: 'vertical',
-              display: '-webkit-box',
-            }}
-          >
-            {project.projectGroupDesc || '暂无描述'}
-          </Text>
-
-          <div className="info-section">
-            <div className="section-header">
-              <Text type="secondary">项目组编码</Text>
-            </div>
-            <div className="section-content code">
-              {project.projectGroupCode}
-            </div>
-          </div>
-
-          {project.environments && project.environments.length > 0 && (
-            <div className="info-section environment-section">
-              <div className="section-header">
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <Text type="secondary">关联环境</Text>
-                  <Tag color="blue" style={{ margin: 0, borderRadius: '10px' }}>
-                    {project.environments.length} 个环境
-                  </Tag>
-                </div>
-                <Tooltip title="查看更多">
-                  <Button type="link" size="small" style={{ padding: 0 }}>
-                    管理环境
-                  </Button>
-                </Tooltip>
+        <div className="project-content">
+          {/* 项目组标题和类型 */}
+          <div className="project-header">
+            <Tag className="project-type" color={typeInfo.color}>
+              {typeInfo.icon}
+            </Tag>
+            <div className="title-section">
+              <Title level={4} className="project-name">
+                {project.projectGroupName}
+              </Title>
+              <div className="project-code">
+                {project.projectGroupCode}
               </div>
-              <div className="environment-list">
+            </div>
+          </div>
+
+          {/* 项目组描述 */}
+          <div className="project-desc">
+            {project.projectGroupDesc || '暂无描述'}
+          </div>
+
+          {/* 项目组统计信息 */}
+          <div className="project-stats">
+            <div className="stat-item">
+              <EnvironmentOutlined />
+              <span>{project.environments?.length || 0} 个环境</span>
+            </div>
+            <div className="stat-item">
+              <TeamOutlined />
+              <span>5 个成员</span>
+            </div>
+            <div className="stat-item">
+              <ClockCircleOutlined />
+              <span>2小时前更新</span>
+            </div>
+          </div>
+
+          {/* 环境列表 */}
+          {project.environments && project.environments.length > 0 && (
+            <div className="environments-section">
+              <div className="env-list">
                 {project.environments.map(env => {
                   const buildType = buildTypeMap[env.buildType];
                   const deployType = deployTypeMap[env.deployType];
                   
                   return (
-                    <div key={env.id} className="environment-item">
-                      <div className="env-header">
-                        <div className="env-title">
-                          <Text strong style={{ fontSize: '15px' }}>{env.envName}</Text>
-                          <div className="env-tags">
-                            <Tooltip title={`构建方式：${buildType.label}`}>
-                              <Tag color={buildType.color} className="env-tag">
-                                {buildType.icon}
-                              </Tag>
-                            </Tooltip>
-                            <Tooltip title={`部署方式：${deployType.label}`}>
-                              <Tag color={deployType.color} className="env-tag">
-                                {deployType.icon}
-                              </Tag>
-                            </Tooltip>
-                          </div>
+                    <div key={env.id} className="env-item">
+                      <div className="env-main">
+                        <div className="env-info">
+                          <span className="env-name">{env.envName}</span>
+                          <span className="env-code">{env.envCode}</span>
                         </div>
-                        <div className="env-meta">
-                          <Tooltip title="环境编码">
-                            <Tag className="env-code">
-                              {env.envCode}
-                            </Tag>
+                        <div className="env-tags">
+                          <Tooltip title={buildType.label}>
+                            <Tag color={buildType.color}>{buildType.icon}</Tag>
+                          </Tooltip>
+                          <Tooltip title={deployType.label}>
+                            <Tag color={deployType.color}>{deployType.icon}</Tag>
                           </Tooltip>
-                          {env.envDesc && (
-                            <Tooltip title={env.envDesc}>
-                              <Text type="secondary" className="env-desc">
-                                {env.envDesc}
-                              </Text>
-                            </Tooltip>
-                          )}
                         </div>
                       </div>
-                      <div className="env-footer">
-                        <Space size={16}>
-                          <Text type="secondary" style={{ fontSize: '12px' }}>
-                            <ClockCircleOutlined style={{ marginRight: '4px' }} />
-                            最近部署：2小时前
-                          </Text>
-                          <Text type="secondary" style={{ fontSize: '12px' }}>
-                            <RocketOutlined style={{ marginRight: '4px' }} />
-                            部署次数：12次
-                          </Text>
-                        </Space>
-                      </div>
+                      {env.envDesc && (
+                        <div className="env-desc">{env.envDesc}</div>
+                      )}
                     </div>
                   );
                 })}
@@ -287,17 +215,29 @@ const ProjectList: React.FC = () => {
             </div>
           )}
 
-          <div style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginTop: '16px'
-          }}>
-            <Space>
-              <ClockCircleOutlined style={{ color: typeInfo.color }} />
-              <Text type="secondary">2小时前</Text>
-            </Space>
-            <Text type="secondary">排序: {project.sort}</Text>
+          {/* 操作按钮 */}
+          <div className="project-actions">
+            <Button 
+              type="text" 
+              icon={<EditOutlined />}
+              onClick={() => handleEdit(project)}
+            >
+              编辑
+            </Button>
+            <Button 
+              type="text" 
+              icon={<TeamOutlined />}
+            >
+              成员
+            </Button>
+            <Button 
+              type="text"
+              danger
+              icon={<DeleteOutlined />}
+              onClick={() => handleDelete(project.id)}
+            >
+              删除
+            </Button>
           </div>
         </div>
       </Card>