ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2024-12-26 16:47:06 +08:00
parent ceb37dfe8b
commit 53c61ad0c8
2 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx
View File

@ -104,9 +104,13 @@ const EnvironmentModal: React.FC<EnvironmentModalProps> = ({
const typeInfo = getBuildTypeInfo(type);
return (
<Select.Option key={type} value={type}>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', color: typeInfo.color }}>
{typeInfo.icon}
{typeInfo.label}
<div style={{
display: 'inline-flex',
alignItems: 'center',
gap: '4px',
}}>
<span style={{ color: typeInfo.color }}>{typeInfo.icon}</span>
<span style={{ color: typeInfo.color }}>{typeInfo.label}</span>
</div>
</Select.Option>
);
@ -124,9 +128,13 @@ const EnvironmentModal: React.FC<EnvironmentModalProps> = ({
const typeInfo = getDeployTypeInfo(type);
return (
<Select.Option key={type} value={type}>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', color: typeInfo.color }}>
{typeInfo.icon}
{typeInfo.label}
<div style={{
display: 'inline-flex',
alignItems: 'center',
gap: '4px',
}}>
<span style={{ color: typeInfo.color }}>{typeInfo.icon}</span>
<span style={{ color: typeInfo.color }}>{typeInfo.label}</span>
</div>
</Select.Option>
);

77
frontend/src/pages/Deploy/Environment/List/index.tsx
View File

@ -1,6 +1,6 @@
import React, {useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, message, Popconfirm, Space, Tag} from 'antd';
import {Button, message, Popconfirm, Tag} from 'antd';
import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';
import {getEnvironmentPage, deleteEnvironment} from './service';
import type {Environment, EnvironmentQueryParams} from './types';
@ -35,6 +35,25 @@ const EnvironmentList: React.FC = () => {
setModalVisible(true);
};
const renderTag = (icon: React.ReactNode, label: string, color: string) => (
<div style={{
display: 'inline-flex',
alignItems: 'center',
padding: '0 7px',
fontSize: '14px',
lineHeight: '22px',
whiteSpace: 'nowrap',
background: color + '10',
border: `1px solid ${color}`,
borderRadius: '4px',
cursor: 'default',
gap: '4px',
}}>
{icon}
<span style={{ color }}>{label}</span>
</div>
);
const columns: ProColumns<Environment>[] = [
{
title: '环境编码',
@ -63,12 +82,7 @@ const EnvironmentList: React.FC = () => {
render: (buildType) => {
if (!buildType) return '-';
const typeInfo = getBuildTypeInfo(buildType as BuildTypeEnum);
return (
<Tag color={typeInfo.color} style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
{typeInfo.icon}
{typeInfo.label}
</Tag>
);
return renderTag(typeInfo.icon, typeInfo.label, typeInfo.color);
},
filters: [
{text: 'Jenkins构建', value: BuildTypeEnum.JENKINS},
@ -85,12 +99,7 @@ const EnvironmentList: React.FC = () => {
render: (deployType) => {
if (!deployType) return '-';
const typeInfo = getDeployTypeInfo(deployType as DeployTypeEnum);
return (
<Tag color={typeInfo.color} style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
{typeInfo.icon}
{typeInfo.label}
</Tag>
);
return renderTag(typeInfo.icon, typeInfo.label, typeInfo.color);
},
filters: [
{text: 'Kubernetes集群部署', value: DeployTypeEnum.K8S},
@ -114,30 +123,32 @@ const EnvironmentList: React.FC = () => {
valueType: 'option',
fixed: 'right',
align: 'center',
render: (_, record) => [
<Button
key="edit"
type="link"
icon={<EditOutlined/>}
onClick={() => handleEdit(record)}
>
编辑
</Button>,
<Popconfirm
key="delete"
title="确定要删除该环境吗？"
description="删除后将无法恢复，请谨慎操作"
onConfirm={() => handleDelete(record.id)}
>
render: (_, record) => (
<div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
<Button
type="link"
danger
icon={<DeleteOutlined/>}
size="small"
style={{ padding: 0 }}
onClick={() => handleEdit(record)}
>
删除
<EditOutlined /> 编辑
</Button>
</Popconfirm>
],
<Popconfirm
title="确定要删除该环境吗？"
description="删除后将无法恢复，请谨慎操作"
onConfirm={() => handleDelete(record.id)}
>
<Button
type="link"
size="small"
danger
style={{ padding: 0 }}
>
<DeleteOutlined /> 删除
</Button>
</Popconfirm>
</div>
),
},
];