414 lines
12 KiB
TypeScript
414 lines
12 KiB
TypeScript
/**
|
||
* .env配置同步功能组件
|
||
* @author MHXY Development Team
|
||
* @version 1.0.0
|
||
*/
|
||
|
||
import React, { useState } from 'react';
|
||
import { Modal, Form, Button, Space, Alert, Typography, Divider, Checkbox, Progress } from 'antd';
|
||
import {
|
||
SyncOutlined,
|
||
FileTextOutlined,
|
||
CheckCircleOutlined,
|
||
ExclamationCircleOutlined,
|
||
DownloadOutlined
|
||
} from '@ant-design/icons';
|
||
import { SystemConfig } from '../types/systemConfig';
|
||
import systemConfigService from '../services/systemConfigService';
|
||
|
||
const { Text, Paragraph } = Typography;
|
||
const { confirm } = Modal;
|
||
|
||
interface EnvSyncModalProps {
|
||
visible: boolean;
|
||
configs: SystemConfig[];
|
||
onClose: () => void;
|
||
onSync?: () => void;
|
||
}
|
||
|
||
const EnvSyncModal: React.FC<EnvSyncModalProps> = ({
|
||
visible,
|
||
configs,
|
||
onClose,
|
||
onSync
|
||
}) => {
|
||
const [form] = Form.useForm();
|
||
const [loading, setLoading] = useState<boolean>(false);
|
||
const [progress, setProgress] = useState<number>(0);
|
||
const [syncResult, setSyncResult] = useState<{
|
||
success: boolean;
|
||
message: string;
|
||
details?: string[];
|
||
} | null>(null);
|
||
|
||
// 准备.env文件内容
|
||
const generateEnvContent = (selectedConfigs: string[]): string => {
|
||
const envVars: Record<string, string> = {};
|
||
|
||
// 根据选择的配置生成环境变量
|
||
configs.forEach(config => {
|
||
if (selectedConfigs.includes(config.config_key)) {
|
||
switch (config.config_key) {
|
||
case 'jwt_secret':
|
||
envVars.JWT_SECRET = config.config_value;
|
||
break;
|
||
case 'jwt_expires_in':
|
||
envVars.JWT_EXPIRES_IN = config.config_value;
|
||
break;
|
||
case 'game_server_api':
|
||
envVars.GAME_SERVER_API = config.config_value;
|
||
break;
|
||
case 'game_server_psk':
|
||
envVars.GAME_SERVER_PSK = config.config_value;
|
||
break;
|
||
case 'game_server_timeout':
|
||
envVars.GAME_SERVER_TIMEOUT = config.config_value;
|
||
break;
|
||
case 'game_server_retry_count':
|
||
envVars.GAME_SERVER_RETRY_COUNT = config.config_value;
|
||
break;
|
||
case 'site_name':
|
||
envVars.SITE_NAME = config.config_value;
|
||
break;
|
||
case 'maintenance_mode':
|
||
envVars.MAINTENANCE_MODE = config.config_value;
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
|
||
// 生成.env文件内容
|
||
const envContent = [
|
||
'# .env文件 - 由系统配置自动生成',
|
||
`# 生成时间: ${new Date().toLocaleString('zh-CN')}`,
|
||
'# 警告: 请不要手动修改此文件，系统配置变更时此文件将被覆盖',
|
||
'',
|
||
'# === 系统基本信息 ===',
|
||
`SITE_NAME="${envVars.SITE_NAME || '梦幻西游运营管理系统'}"`,
|
||
`MAINTENANCE_MODE=${envVars.MAINTENANCE_MODE || '0'}`,
|
||
'',
|
||
'# === JWT安全配置 ===',
|
||
`JWT_SECRET="${envVars.JWT_SECRET || ''}"`,
|
||
`JWT_EXPIRES_IN=${envVars.JWT_EXPIRES_IN || '24'}`,
|
||
'',
|
||
'# === 游戏服务端配置 ===',
|
||
`GAME_SERVER_API="${envVars.GAME_SERVER_API || ''}"`,
|
||
`GAME_SERVER_PSK="${envVars.GAME_SERVER_PSK || ''}"`,
|
||
`GAME_SERVER_TIMEOUT=${envVars.GAME_SERVER_TIMEOUT || '30'}`,
|
||
`GAME_SERVER_RETRY_COUNT=${envVars.GAME_SERVER_RETRY_COUNT || '3'}`,
|
||
'',
|
||
'# === 其他配置 ===',
|
||
'# 请在此处添加其他环境变量',
|
||
''
|
||
].join('\n');
|
||
|
||
return envContent;
|
||
};
|
||
|
||
// 执行同步操作
|
||
const handleSync = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
const selectedConfigs = Object.keys(values).filter(key => values[key]);
|
||
|
||
if (selectedConfigs.length === 0) {
|
||
throw new Error('请至少选择一个配置项进行同步');
|
||
}
|
||
|
||
setLoading(true);
|
||
setProgress(0);
|
||
setSyncResult(null);
|
||
|
||
// 模拟同步进度
|
||
const progressSteps = [
|
||
{ percent: 20, message: '准备配置数据...' },
|
||
{ percent: 40, message: '生成.env文件内容...' },
|
||
{ percent: 60, message: '验证配置格式...' },
|
||
{ percent: 80, message: '执行同步操作...' },
|
||
{ percent: 100, message: '同步完成' }
|
||
];
|
||
|
||
for (const step of progressSteps) {
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
setProgress(step.percent);
|
||
}
|
||
|
||
// 准备环境配置数据
|
||
const envConfigs = selectedConfigs.reduce((acc, configKey) => {
|
||
const config = configs.find(c => c.config_key === configKey);
|
||
if (config) {
|
||
switch (configKey) {
|
||
case 'jwt_secret':
|
||
acc.JWT_SECRET = config.config_value;
|
||
break;
|
||
case 'jwt_expires_in':
|
||
acc.JWT_EXPIRES_IN = config.config_value;
|
||
break;
|
||
case 'game_server_api':
|
||
acc.GAME_SERVER_API = config.config_value;
|
||
break;
|
||
case 'game_server_psk':
|
||
acc.GAME_SERVER_PSK = config.config_value;
|
||
break;
|
||
}
|
||
}
|
||
return acc;
|
||
}, {} as any);
|
||
|
||
// 调用服务同步
|
||
const result = await systemConfigService.syncToEnvFile(envConfigs);
|
||
|
||
setSyncResult({
|
||
success: result.success,
|
||
message: result.message,
|
||
details: selectedConfigs
|
||
});
|
||
|
||
if (result.success) {
|
||
onSync?.();
|
||
}
|
||
|
||
} catch (error) {
|
||
setSyncResult({
|
||
success: false,
|
||
message: error instanceof Error ? error.message : '同步失败',
|
||
details: []
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 下载.env文件
|
||
const handleDownload = () => {
|
||
const selectedConfigs = ['jwt_secret', 'jwt_expires_in', 'game_server_api', 'game_server_psk'];
|
||
const envContent = generateEnvContent(selectedConfigs);
|
||
|
||
const blob = new Blob([envContent], { type: 'text/plain;charset=utf-8' });
|
||
const url = URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = '.env';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
URL.revokeObjectURL(url);
|
||
|
||
// 重置状态
|
||
setSyncResult(null);
|
||
setProgress(0);
|
||
};
|
||
|
||
// 关闭模态框
|
||
const handleClose = () => {
|
||
setSyncResult(null);
|
||
setProgress(0);
|
||
form.resetFields();
|
||
onClose();
|
||
};
|
||
|
||
// 可同步的配置项
|
||
const configOptions = [
|
||
{
|
||
key: 'jwt_secret',
|
||
label: 'JWT密钥',
|
||
description: 'JWT签名密钥，用于令牌验证',
|
||
sensitive: true,
|
||
envVar: 'JWT_SECRET'
|
||
},
|
||
{
|
||
key: 'jwt_expires_in',
|
||
label: 'JWT过期时间',
|
||
description: 'JWT访问令牌有效期（小时）',
|
||
sensitive: false,
|
||
envVar: 'JWT_EXPIRES_IN'
|
||
},
|
||
{
|
||
key: 'game_server_api',
|
||
label: '游戏服务端API',
|
||
description: '游戏服务端HTTP接口地址',
|
||
sensitive: false,
|
||
envVar: 'GAME_SERVER_API'
|
||
},
|
||
{
|
||
key: 'game_server_psk',
|
||
label: '游戏服务端PSK',
|
||
description: '游戏服务端预共享密钥',
|
||
sensitive: true,
|
||
envVar: 'GAME_SERVER_PSK'
|
||
},
|
||
{
|
||
key: 'game_server_timeout',
|
||
label: '请求超时时间',
|
||
description: '与游戏服务端通信超时时间（秒）',
|
||
sensitive: false,
|
||
envVar: 'GAME_SERVER_TIMEOUT'
|
||
},
|
||
{
|
||
key: 'game_server_retry_count',
|
||
label: '重试次数',
|
||
description: 'API请求失败时的重试次数',
|
||
sensitive: false,
|
||
envVar: 'GAME_SERVER_RETRY_COUNT'
|
||
}
|
||
];
|
||
|
||
// 默认选中的配置
|
||
const defaultChecked = ['jwt_secret', 'jwt_expires_in', 'game_server_api', 'game_server_psk'];
|
||
|
||
return (
|
||
<Modal
|
||
title={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
<SyncOutlined />
|
||
同步配置到.env文件
|
||
</div>
|
||
}
|
||
open={visible}
|
||
onCancel={handleClose}
|
||
width={600}
|
||
footer={[
|
||
<Button key="cancel" onClick={handleClose}>
|
||
取消
|
||
</Button>,
|
||
<Button
|
||
key="download"
|
||
icon={<DownloadOutlined />}
|
||
onClick={handleDownload}
|
||
disabled={loading}
|
||
>
|
||
下载.env文件
|
||
</Button>,
|
||
<Button
|
||
key="sync"
|
||
type="primary"
|
||
icon={<SyncOutlined />}
|
||
loading={loading}
|
||
onClick={handleSync}
|
||
disabled={syncResult?.success}
|
||
>
|
||
开始同步
|
||
</Button>
|
||
]}
|
||
>
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<Alert
|
||
message="配置同步说明"
|
||
description="选择要同步到.env文件的系统配置项，然后执行同步操作。敏感配置（如密钥）将被加密处理。"
|
||
type="info"
|
||
showIcon
|
||
style={{ marginBottom: '16px' }}
|
||
/>
|
||
</div>
|
||
|
||
{/* 同步进度 */}
|
||
{loading && (
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<Progress
|
||
percent={progress}
|
||
status="active"
|
||
strokeColor={{
|
||
'0%': '#108ee9',
|
||
'100%': '#87d068',
|
||
}}
|
||
/>
|
||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||
正在执行同步操作...
|
||
</Text>
|
||
</div>
|
||
)}
|
||
|
||
{/* 同步结果 */}
|
||
{syncResult && (
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<Alert
|
||
message={syncResult.success ? '同步成功' : '同步失败'}
|
||
description={syncResult.message}
|
||
type={syncResult.success ? 'success' : 'error'}
|
||
showIcon
|
||
action={
|
||
syncResult.success && (
|
||
<Button size="small" onClick={handleDownload}>
|
||
下载.env文件
|
||
</Button>
|
||
)
|
||
}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* 配置选择 */}
|
||
{!syncResult?.success && (
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
initialValues={{
|
||
configOptions: defaultChecked
|
||
}}
|
||
>
|
||
<Form.Item
|
||
name="configOptions"
|
||
label="选择要同步的配置项"
|
||
rules={[
|
||
{ required: true, message: '请至少选择一个配置项' }
|
||
]}
|
||
>
|
||
<Checkbox.Group style={{ width: '100%' }}>
|
||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||
{configOptions.map(option => (
|
||
<div
|
||
key={option.key}
|
||
style={{
|
||
padding: '12px',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '6px',
|
||
background: '#fafafa'
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
<Checkbox value={option.key}>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
<Text strong>{option.label}</Text>
|
||
{option.sensitive && (
|
||
<Text type="danger" style={{ fontSize: '12px' }}>
|
||
敏感
|
||
</Text>
|
||
)}
|
||
</div>
|
||
<Text type="secondary" style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}>
|
||
{option.description}
|
||
</Text>
|
||
<Text code style={{ fontSize: '11px', display: 'block', marginTop: '4px' }}>
|
||
{option.envVar}
|
||
</Text>
|
||
</div>
|
||
</Checkbox>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</Space>
|
||
</Checkbox.Group>
|
||
</Form.Item>
|
||
</Form>
|
||
)}
|
||
|
||
{/* 操作说明 */}
|
||
<Divider />
|
||
<div style={{ fontSize: '12px', color: '#666' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
|
||
<FileTextOutlined />
|
||
<strong>操作说明</strong>
|
||
</div>
|
||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||
<li>同步操作将把选中的配置写入项目的.env文件</li>
|
||
<li>敏感配置（如密钥、密码）将被加密或掩码处理</li>
|
||
<li>建议在同步前备份现有的.env文件</li>
|
||
<li>同步完成后需要重启应用程序以使配置生效</li>
|
||
</ul>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default EnvSyncModal; |