629 lines
21 KiB
React
629 lines
21 KiB
React
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||
import {
|
||
Card,
|
||
Row,
|
||
Col,
|
||
Button,
|
||
Switch,
|
||
InputNumber,
|
||
Input,
|
||
Space,
|
||
Tag,
|
||
Alert,
|
||
Modal,
|
||
message,
|
||
Descriptions,
|
||
Divider,
|
||
Typography,
|
||
Spin,
|
||
Radio,
|
||
} from 'antd';
|
||
import {
|
||
ClockCircleOutlined,
|
||
DatabaseOutlined,
|
||
CheckCircleOutlined,
|
||
PlayCircleOutlined,
|
||
SaveOutlined,
|
||
SettingOutlined,
|
||
InfoCircleOutlined,
|
||
ArrowLeftOutlined,
|
||
ThunderboltOutlined,
|
||
SafetyOutlined,
|
||
CloudDownloadOutlined,
|
||
FileProtectOutlined,
|
||
} from '@ant-design/icons';
|
||
import api from '../api';
|
||
import { useNavigate } from 'react-router-dom';
|
||
|
||
const { Title, Text, Paragraph } = Typography;
|
||
|
||
const AutoBackupSettings = () => {
|
||
const navigate = useNavigate();
|
||
const [loading, setLoading] = useState(false);
|
||
const [status, setStatus] = useState(null);
|
||
const [settings, setSettings] = useState({
|
||
enabled: false,
|
||
hour: 2,
|
||
minute: 0,
|
||
includeFiles: true,
|
||
compress: true,
|
||
maxCount: 30,
|
||
maxAgeDays: 90,
|
||
});
|
||
const [modified, setModified] = useState(false);
|
||
const isInitialMount = useRef(true);
|
||
const isFetching = useRef(false);
|
||
|
||
useEffect(() => {
|
||
if (isInitialMount.current) {
|
||
fetchStatus();
|
||
isInitialMount.current = false;
|
||
}
|
||
}, []);
|
||
|
||
const fetchStatus = useCallback(async () => {
|
||
if (isFetching.current) return;
|
||
|
||
try {
|
||
setLoading(true);
|
||
isFetching.current = true;
|
||
const response = await api.get('/backup/auto/status');
|
||
if (response?.success) {
|
||
const data = response.data;
|
||
setStatus(data);
|
||
|
||
// 解析 Cron 表达式获取小时和分钟
|
||
if (data.cronExpression) {
|
||
const parts = data.cronExpression.split(' ');
|
||
const minute = parseInt(parts[0]);
|
||
const hour = parseInt(parts[1]);
|
||
|
||
setSettings(prev => ({
|
||
...prev,
|
||
enabled: data.enabled || false,
|
||
hour: isNaN(hour) ? 2 : hour,
|
||
minute: isNaN(minute) ? 0 : minute,
|
||
includeFiles: data.includeFiles !== undefined ? data.includeFiles : true,
|
||
compress: data.compress !== undefined ? data.compress : true,
|
||
maxCount: data.maxCount || 30,
|
||
maxAgeDays: data.maxAgeDays || 90,
|
||
}));
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取自动备份状态失败:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
isFetching.current = false;
|
||
}
|
||
}, []);
|
||
|
||
const handleSave = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await api.post('/backup/auto/settings', {
|
||
enabled: settings.enabled,
|
||
hour: settings.hour,
|
||
minute: settings.minute,
|
||
includeFiles: settings.includeFiles,
|
||
compress: settings.compress,
|
||
maxCount: settings.maxCount,
|
||
maxAgeDays: settings.maxAgeDays,
|
||
});
|
||
|
||
if (response?.success) {
|
||
message.success('自动备份设置已保存');
|
||
setModified(false);
|
||
// 不需要立即刷新，因为保存成功后状态已经是最新的
|
||
}
|
||
} catch (error) {
|
||
message.error('保存失败：' + (error.response?.data?.message || error.message));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleExecuteNow = async () => {
|
||
Modal.confirm({
|
||
title: (
|
||
<Space>
|
||
<div style={{
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: '12px',
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}>
|
||
<PlayCircleOutlined style={{ color: '#fff', fontSize: 20 }} />
|
||
</div>
|
||
<span>立即执行备份</span>
|
||
</Space>
|
||
),
|
||
content: '确定要立即执行一次备份吗？这将在后台创建一个新的备份文件。',
|
||
okText: '立即备份',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await api.post('/backup/auto/execute', {
|
||
description: `手动触发 - ${new Date().toLocaleString('zh-CN')}`,
|
||
includeFiles: settings.includeFiles,
|
||
compress: settings.compress,
|
||
});
|
||
|
||
if (response?.success) {
|
||
message.success('备份执行成功！');
|
||
}
|
||
} catch (error) {
|
||
message.error('执行失败：' + (error.response?.data?.message || error.message));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
const formatTime = (hour, minute) => {
|
||
return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
|
||
};
|
||
|
||
const formatNextRun = (nextRun) => {
|
||
if (!nextRun) return '未知';
|
||
return new Date(nextRun).toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
};
|
||
|
||
const getStatusColor = () => {
|
||
if (!status) return 'default';
|
||
if (status.enabled && status.isActive) return 'success';
|
||
if (status.enabled && !status.isActive) return 'warning';
|
||
return 'default';
|
||
};
|
||
|
||
const getStatusText = () => {
|
||
if (!status) return '加载中...';
|
||
if (status.enabled && status.isActive) return '自动备份运行中';
|
||
if (status.enabled && !status.isActive) return '自动备份已启用但未运行';
|
||
return '自动备份已禁用';
|
||
};
|
||
|
||
// 状态卡片组件
|
||
const StatusCard = ({ icon, title, value, subtitle, gradient }) => (
|
||
<div style={{
|
||
padding: '20px',
|
||
borderRadius: '16px',
|
||
background: gradient,
|
||
color: '#fff',
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
minHeight: '120px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'space-between',
|
||
}}>
|
||
<div style={{ position: 'absolute', right: -20, top: -20, opacity: 0.1 }}>
|
||
{React.cloneElement(icon, { style: { fontSize: 120 } })}
|
||
</div>
|
||
<div>
|
||
<Text style={{ fontSize: 13, opacity: 0.9, fontWeight: 500 }}>{title}</Text>
|
||
<div style={{ fontSize: 28, fontWeight: 700, marginTop: 8 }}>{value}</div>
|
||
</div>
|
||
{subtitle && <Text style={{ fontSize: 12, opacity: 0.8 }}>{subtitle}</Text>}
|
||
</div>
|
||
);
|
||
|
||
// 设置项组件
|
||
const SettingItem = ({ title, description, children, bordered = true }) => (
|
||
<div style={{
|
||
padding: '16px 0',
|
||
borderBottom: bordered ? '1px solid #f0f0f0' : 'none',
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontWeight: 500, fontSize: 14, color: '#1f2937', marginBottom: 4 }}>
|
||
{title}
|
||
</div>
|
||
{description && (
|
||
<Paragraph style={{ margin: 0, fontSize: 12, color: '#6b7280', lineHeight: 1.5 }}>
|
||
{description}
|
||
</Paragraph>
|
||
)}
|
||
</div>
|
||
<div style={{ flexShrink: 0 }}>{children}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
if (loading && !status) {
|
||
return (
|
||
<div style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
minHeight: '100vh',
|
||
background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
|
||
}}>
|
||
<Spin size="large" tip="加载设置中..." />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{
|
||
minHeight: '100vh',
|
||
background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
|
||
padding: '24px',
|
||
}}>
|
||
<div style={{ maxWidth: 1400, margin: '0 auto' }}>
|
||
{/* 页面头部 */}
|
||
<div style={{ marginBottom: 32 }}>
|
||
<Button
|
||
icon={<ArrowLeftOutlined />}
|
||
onClick={() => navigate('/backup')}
|
||
style={{ marginBottom: 16 }}
|
||
>
|
||
返回备份管理
|
||
</Button>
|
||
|
||
<div style={{
|
||
background: '#fff',
|
||
padding: '24px 32px',
|
||
borderRadius: '20px',
|
||
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
|
||
marginBottom: 24,
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
|
||
<div>
|
||
<Title level={2} style={{
|
||
margin: '0 0 8px 0',
|
||
fontSize: '28px',
|
||
fontWeight: 700,
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent',
|
||
backgroundClip: 'text',
|
||
}}>
|
||
<SettingOutlined style={{ marginRight: 12, verticalAlign: 'middle' }} />
|
||
自动备份设置
|
||
</Title>
|
||
<Paragraph style={{ margin: 0, fontSize: 14, color: '#6b7280' }}>
|
||
配置定时自动备份，确保数据安全无忧
|
||
</Paragraph>
|
||
</div>
|
||
<Space size="middle">
|
||
<Button
|
||
icon={<PlayCircleOutlined />}
|
||
onClick={handleExecuteNow}
|
||
loading={loading}
|
||
size="large"
|
||
style={{
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
border: 'none',
|
||
color: '#fff',
|
||
fontWeight: 500,
|
||
borderRadius: '12px',
|
||
padding: '8px 24px',
|
||
}}
|
||
>
|
||
立即备份
|
||
</Button>
|
||
<Button
|
||
icon={<SaveOutlined />}
|
||
type="primary"
|
||
onClick={handleSave}
|
||
disabled={!modified || loading}
|
||
loading={loading}
|
||
size="large"
|
||
style={{
|
||
borderRadius: '12px',
|
||
padding: '8px 24px',
|
||
fontWeight: 500,
|
||
}}
|
||
>
|
||
保存设置
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 状态概览 */}
|
||
<div style={{ marginBottom: 32 }}>
|
||
<Title level={4} style={{ margin: '0 0 16px 0', color: '#1f2937', fontWeight: 600 }}>
|
||
<ThunderboltOutlined style={{ marginRight: 8 }} />
|
||
状态概览
|
||
</Title>
|
||
<Row gutter={[20, 20]}>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<StatusCard
|
||
icon={<CheckCircleOutlined />}
|
||
title="当前状态"
|
||
value={getStatusText()}
|
||
gradient={status?.enabled && status.isActive ?
|
||
'linear-gradient(135deg, #10b981 0%, #34d399 100%)' :
|
||
'linear-gradient(135deg, #6b7280 0%, #9ca3af 100%)'}
|
||
/>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<StatusCard
|
||
icon={<ClockCircleOutlined />}
|
||
title="下次执行时间"
|
||
value={formatNextRun(status?.nextRun)}
|
||
gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
||
/>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<StatusCard
|
||
icon={<CloudDownloadOutlined />}
|
||
title="备份时间"
|
||
value={formatTime(settings.hour, settings.minute)}
|
||
gradient="linear-gradient(135deg, #10b981 0%, #34d399 100%)"
|
||
/>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<StatusCard
|
||
icon={<FileProtectOutlined />}
|
||
title="保留策略"
|
||
value={`${settings.maxCount}个 / ${settings.maxAgeDays}天`}
|
||
gradient="linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)"
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
|
||
{/* 设置卡片 */}
|
||
<Row gutter={[24, 24]}>
|
||
{/* 基本设置 */}
|
||
<Col xs={24} lg={12}>
|
||
<Card
|
||
title={
|
||
<Space>
|
||
<div style={{
|
||
width: 36,
|
||
height: 36,
|
||
borderRadius: '10px',
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}>
|
||
<SettingOutlined style={{ color: '#fff', fontSize: 18 }} />
|
||
</div>
|
||
<span style={{ fontSize: 16, fontWeight: 600 }}>基本设置</span>
|
||
</Space>
|
||
}
|
||
style={{
|
||
borderRadius: '20px',
|
||
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
|
||
height: '100%',
|
||
}}
|
||
>
|
||
<SettingItem
|
||
title="启用自动备份"
|
||
description="开启后系统会按照设定时间自动执行备份任务"
|
||
>
|
||
<Switch
|
||
checked={settings.enabled}
|
||
onChange={(checked) => {
|
||
setSettings({ ...settings, enabled: checked });
|
||
setModified(true);
|
||
}}
|
||
size="default"
|
||
checkedChildren="开启"
|
||
unCheckedChildren="关闭"
|
||
/>
|
||
</SettingItem>
|
||
|
||
<SettingItem
|
||
title="备份时间"
|
||
description="每天自动执行备份的时间，建议设置在业务低峰期"
|
||
>
|
||
<Space>
|
||
<InputNumber
|
||
min={0}
|
||
max={23}
|
||
value={settings.hour}
|
||
onChange={(value) => {
|
||
setSettings({ ...settings, hour: value });
|
||
setModified(true);
|
||
}}
|
||
addonAfter="时"
|
||
disabled={!settings.enabled}
|
||
style={{ width: 100 }}
|
||
/>
|
||
<InputNumber
|
||
min={0}
|
||
max={59}
|
||
value={settings.minute}
|
||
onChange={(value) => {
|
||
setSettings({ ...settings, minute: value });
|
||
setModified(true);
|
||
}}
|
||
addonAfter="分"
|
||
disabled={!settings.enabled}
|
||
style={{ width: 100 }}
|
||
/>
|
||
</Space>
|
||
</SettingItem>
|
||
</Card>
|
||
</Col>
|
||
|
||
{/* 高级设置 */}
|
||
<Col xs={24} lg={12}>
|
||
<Card
|
||
title={
|
||
<Space>
|
||
<div style={{
|
||
width: 36,
|
||
height: 36,
|
||
borderRadius: '10px',
|
||
background: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}>
|
||
<ThunderboltOutlined style={{ color: '#fff', fontSize: 18 }} />
|
||
</div>
|
||
<span style={{ fontSize: 16, fontWeight: 600 }}>高级设置</span>
|
||
</Space>
|
||
}
|
||
style={{
|
||
borderRadius: '20px',
|
||
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
|
||
height: '100%',
|
||
}}
|
||
>
|
||
<SettingItem
|
||
title="包含文件"
|
||
description="备份时包含上传的文件（如用户头像等）"
|
||
>
|
||
<Switch
|
||
checked={settings.includeFiles}
|
||
onChange={(checked) => {
|
||
setSettings({ ...settings, includeFiles: checked });
|
||
setModified(true);
|
||
}}
|
||
disabled={!settings.enabled}
|
||
checkedChildren="包含"
|
||
unCheckedChildren="不包含"
|
||
/>
|
||
</SettingItem>
|
||
|
||
<SettingItem
|
||
title="压缩备份"
|
||
description="使用 gzip 压缩备份文件，可节省约 60-80% 磁盘空间"
|
||
>
|
||
<Switch
|
||
checked={settings.compress}
|
||
onChange={(checked) => {
|
||
setSettings({ ...settings, compress: checked });
|
||
setModified(true);
|
||
}}
|
||
disabled={!settings.enabled}
|
||
checkedChildren="压缩"
|
||
unCheckedChildren="不压缩"
|
||
/>
|
||
</SettingItem>
|
||
|
||
<SettingItem
|
||
title="最大备份数量"
|
||
description="保留最近的备份数量，超过后会自动删除旧备份"
|
||
>
|
||
<InputNumber
|
||
min={1}
|
||
max={100}
|
||
value={settings.maxCount}
|
||
onChange={(value) => {
|
||
setSettings({ ...settings, maxCount: value });
|
||
setModified(true);
|
||
}}
|
||
addonAfter="个"
|
||
disabled={!settings.enabled}
|
||
style={{ width: 120 }}
|
||
/>
|
||
</SettingItem>
|
||
|
||
<SettingItem
|
||
title="最长保存天数"
|
||
description="备份文件的最长保存天数，超过后会自动删除"
|
||
bordered={false}
|
||
>
|
||
<InputNumber
|
||
min={1}
|
||
max={365}
|
||
value={settings.maxAgeDays}
|
||
onChange={(value) => {
|
||
setSettings({ ...settings, maxAgeDays: value });
|
||
setModified(true);
|
||
}}
|
||
addonAfter="天"
|
||
disabled={!settings.enabled}
|
||
style={{ width: 120 }}
|
||
/>
|
||
</SettingItem>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
|
||
{/* 提示信息 */}
|
||
<div style={{ marginTop: 24 }}>
|
||
<Alert
|
||
message={
|
||
<Space>
|
||
<InfoCircleOutlined style={{ color: '#3b82f6' }} />
|
||
<span style={{ fontWeight: 500 }}>最佳实践建议</span>
|
||
</Space>
|
||
}
|
||
description={
|
||
<div style={{ marginTop: 12 }}>
|
||
<div style={{ display: 'grid', gap: 8 }}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
|
||
<CheckCircleOutlined style={{ color: '#10b981', marginTop: 2, flexShrink: 0 }} />
|
||
<Text style={{ color: '#4b5563' }}>
|
||
<strong>备份时间：</strong>建议设置在凌晨 2-4 点业务低峰期，避免影响正常使用
|
||
</Text>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
|
||
<CheckCircleOutlined style={{ color: '#10b981', marginTop: 2, flexShrink: 0 }} />
|
||
<Text style={{ color: '#4b5563' }}>
|
||
<strong>保留策略：</strong>开发环境建议 7 个/7 天，生产环境建议 30 个/90 天
|
||
</Text>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
|
||
<CheckCircleOutlined style={{ color: '#10b981', marginTop: 2, flexShrink: 0 }} />
|
||
<Text style={{ color: '#4b5563' }}>
|
||
<strong>压缩备份：</strong>强烈建议开启，可显著减少磁盘空间占用
|
||
</Text>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
|
||
<CheckCircleOutlined style={{ color: '#10b981', marginTop: 2, flexShrink: 0 }} />
|
||
<Text style={{ color: '#4b5563' }}>
|
||
<strong>定期测试：</strong>每月至少手动执行一次备份，验证功能正常
|
||
</Text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
type="info"
|
||
showIcon={false}
|
||
style={{
|
||
borderRadius: '16px',
|
||
border: '1px solid #dbeafe',
|
||
background: 'linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)',
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* 安全提示 */}
|
||
<div style={{ marginTop: 24 }}>
|
||
<Alert
|
||
message={
|
||
<Space>
|
||
<SafetyOutlined style={{ color: '#f59e0b' }} />
|
||
<span style={{ fontWeight: 500 }}>安全提示</span>
|
||
</Space>
|
||
}
|
||
description="自动备份功能需要服务器持续运行。如果服务器重启，自动备份任务会自动恢复。请确保服务器时间设置正确。"
|
||
type="warning"
|
||
showIcon={false}
|
||
style={{
|
||
borderRadius: '16px',
|
||
border: '1px solid #fef3c7',
|
||
background: 'linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)',
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AutoBackupSettings;
|