|
|
import React, { useState } from 'react';
|
|
|
import { Button, Space } from '@arco-design/web-react';
|
|
|
import { downloadEnvConfigFile, testEnv } from '@/api/componentDeployEnv';
|
|
|
|
|
|
const EnvExtra = ({ currentEnvData }) => {
|
|
|
const [testLoading, setTestLoading] = useState(false);
|
|
|
|
|
|
// 模拟下载配置证书文件
|
|
|
const handleDownloadConfig = () => {
|
|
|
// 这里可以添加实际的下载逻辑
|
|
|
downloadEnvConfigFile(currentEnvData.id);
|
|
|
};
|
|
|
|
|
|
// 模拟查看环境配置教程
|
|
|
const handleViewTutorial = () => {
|
|
|
console.log('查看环境配置教程');
|
|
|
// 这里可以打开一个新的页面或弹窗显示教程内容
|
|
|
};
|
|
|
|
|
|
// 模拟点击测试环境可用性
|
|
|
const handleTestAvailability = async () => {
|
|
|
setTestLoading(true);
|
|
|
const res = await testEnv(currentEnvData.id);
|
|
|
console.log('res:', res);
|
|
|
setTestLoading(false);
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div style={{ padding: '20px', borderRadius: 8 }}>
|
|
|
<div style={{ marginBottom: 20 }}>
|
|
|
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
|
|
|
<span style={{ fontSize: 14, fontWeight: 500 }}>环境配置文件：</span>
|
|
|
<Button
|
|
|
type="text"
|
|
|
onClick={handleDownloadConfig}
|
|
|
>
|
|
|
下载配置证书文件
|
|
|
</Button>
|
|
|
</div>
|
|
|
<div style={{ display: 'flex', alignItems: 'center', marginLeft: 15 }}>
|
|
|
<span style={{ color: '#FFA500', marginRight: 8 }}>●</span>
|
|
|
<span style={{ fontSize: 13, color: '#666' }}>可点击查看</span>
|
|
|
<Button
|
|
|
type="text"
|
|
|
onClick={handleViewTutorial}
|
|
|
style={{ marginLeft: 4 }}
|
|
|
>
|
|
|
环境配置教程
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
|
<span style={{ fontSize: 14, fontWeight: 500 }}>环境可用性：</span>
|
|
|
<Button
|
|
|
type="outline"
|
|
|
onClick={handleTestAvailability}
|
|
|
style={{ marginLeft: 16 }}
|
|
|
loading={testLoading}
|
|
|
>
|
|
|
点击测试
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default EnvExtra; |