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

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

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