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={[
-