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 axios from 'axios';
|
|||
|
|
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 axios.get('/api/backup/auto/status');
|
|||
|
|
if (response.data?.success) {
|
|||
|
|
const data = response.data.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 axios.post('/api/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.data?.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 axios.post('/api/backup/auto/execute', {
|
|||
|
|
description: `手动触发 - ${new Date().toLocaleString('zh-CN')}`,
|
|||
|
|
includeFiles: settings.includeFiles,
|
|||
|
|
compress: settings.compress,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.data?.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;
|