import React, { useState } from 'react';
|
import { Card, Form, Input, Button, Switch, InputNumber, Select, Row, Col, message, Divider } from 'antd';
|
import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';
|
|
const { Option } = Select;
|
const { TextArea } = Input;
|
|
const SystemSettings = () => {
|
const [form] = Form.useForm();
|
const [loading, setLoading] = useState(false);
|
|
const onFinish = async (values) => {
|
try {
|
setLoading(true);
|
console.log('保存设置:', values);
|
message.success('设置保存成功！');
|
} catch (error) {
|
message.error('保存失败，请重试');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
const handleReset = () => {
|
form.resetFields();
|
message.info('已重置为默认设置');
|
};
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">系统设置</h1>
|
<p className="page-description">配置系统基本参数和功能设置</p>
|
</div>
|
|
<Form
|
form={form}
|
layout="vertical"
|
onFinish={onFinish}
|
initialValues={{
|
systemName: '志愿者服务管理系统',
|
systemVersion: 'v1.0.0',
|
maxFileSize: 10,
|
enableEmailNotification: true,
|
enableSMSNotification: false,
|
pointsExpireDays: 365,
|
maxActivitiesPerDay: 5,
|
enableAutoApproval: false,
|
systemDescription: '志愿者服务管理系统，提供积分管理、活动发布、志愿者管理等功能。',
|
}}
|
>
|
<Row gutter={[24, 0]}>
|
<Col xs={24} lg={12}>
|
<Card title="基本设置" style={{ marginBottom: 24 }}>
|
<Form.Item
|
name="systemName"
|
label="系统名称"
|
rules={[{ required: true, message: '请输入系统名称' }]}
|
>
|
<Input placeholder="请输入系统名称" />
|
</Form.Item>
|
|
<Form.Item
|
name="systemVersion"
|
label="系统版本"
|
rules={[{ required: true, message: '请输入系统版本' }]}
|
>
|
<Input placeholder="请输入系统版本" />
|
</Form.Item>
|
|
<Form.Item
|
name="systemDescription"
|
label="系统描述"
|
>
|
<TextArea rows={4} placeholder="请输入系统描述" />
|
</Form.Item>
|
|
<Form.Item
|
name="adminEmail"
|
label="管理员邮箱"
|
rules={[
|
{ required: true, message: '请输入管理员邮箱' },
|
{ type: 'email', message: '请输入正确的邮箱地址' }
|
]}
|
>
|
<Input placeholder="请输入管理员邮箱" />
|
</Form.Item>
|
</Card>
|
</Col>
|
|
<Col xs={24} lg={12}>
|
<Card title="功能设置" style={{ marginBottom: 24 }}>
|
<Form.Item
|
name="enableEmailNotification"
|
label="启用邮件通知"
|
valuePropName="checked"
|
>
|
<Switch />
|
</Form.Item>
|
|
<Form.Item
|
name="enableSMSNotification"
|
label="启用短信通知"
|
valuePropName="checked"
|
>
|
<Switch />
|
</Form.Item>
|
|
<Form.Item
|
name="enableAutoApproval"
|
label="启用自动审核"
|
valuePropName="checked"
|
>
|
<Switch />
|
</Form.Item>
|
|
<Form.Item
|
name="enablePointsExpire"
|
label="启用积分过期"
|
valuePropName="checked"
|
>
|
<Switch />
|
</Form.Item>
|
</Card>
|
</Col>
|
</Row>
|
|
<Row gutter={[24, 0]}>
|
<Col xs={24} lg={12}>
|
<Card title="积分设置" style={{ marginBottom: 24 }}>
|
<Form.Item
|
name="pointsExpireDays"
|
label="积分过期天数"
|
rules={[{ required: true, message: '请输入积分过期天数' }]}
|
>
|
<InputNumber
|
min={0}
|
max={3650}
|
style={{ width: '100%' }}
|
placeholder="请输入积分过期天数"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="maxPointsPerActivity"
|
label="单次活动最大积分"
|
rules={[{ required: true, message: '请输入单次活动最大积分' }]}
|
>
|
<InputNumber
|
min={1}
|
max={1000}
|
style={{ width: '100%' }}
|
placeholder="请输入单次活动最大积分"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="minPointsForRedemption"
|
label="积分兑换最低限额"
|
rules={[{ required: true, message: '请输入积分兑换最低限额' }]}
|
>
|
<InputNumber
|
min={1}
|
style={{ width: '100%' }}
|
placeholder="请输入积分兑换最低限额"
|
/>
|
</Form.Item>
|
</Card>
|
</Col>
|
|
<Col xs={24} lg={12}>
|
<Card title="活动设置" style={{ marginBottom: 24 }}>
|
<Form.Item
|
name="maxActivitiesPerDay"
|
label="每日最大活动数"
|
rules={[{ required: true, message: '请输入每日最大活动数' }]}
|
>
|
<InputNumber
|
min={1}
|
max={50}
|
style={{ width: '100%' }}
|
placeholder="请输入每日最大活动数"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="maxParticipantsPerActivity"
|
label="单次活动最大参与人数"
|
rules={[{ required: true, message: '请输入单次活动最大参与人数' }]}
|
>
|
<InputNumber
|
min={1}
|
max={1000}
|
style={{ width: '100%' }}
|
placeholder="请输入单次活动最大参与人数"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="activityRegistrationDeadline"
|
label="活动报名截止时间（小时）"
|
rules={[{ required: true, message: '请输入活动报名截止时间' }]}
|
>
|
<InputNumber
|
min={1}
|
max={168}
|
style={{ width: '100%' }}
|
placeholder="请输入活动报名截止时间"
|
/>
|
</Form.Item>
|
</Card>
|
</Col>
|
</Row>
|
|
<Row gutter={[24, 0]}>
|
<Col xs={24} lg={12}>
|
<Card title="文件设置" style={{ marginBottom: 24 }}>
|
<Form.Item
|
name="maxFileSize"
|
label="最大文件大小（MB）"
|
rules={[{ required: true, message: '请输入最大文件大小' }]}
|
>
|
<InputNumber
|
min={1}
|
max={100}
|
style={{ width: '100%' }}
|
placeholder="请输入最大文件大小"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="allowedFileTypes"
|
label="允许的文件类型"
|
rules={[{ required: true, message: '请选择允许的文件类型' }]}
|
>
|
<Select
|
mode="multiple"
|
placeholder="请选择允许的文件类型"
|
style={{ width: '100%' }}
|
>
|
<Option value="jpg">JPG</Option>
|
<Option value="png">PNG</Option>
|
<Option value="gif">GIF</Option>
|
<Option value="pdf">PDF</Option>
|
<Option value="doc">DOC</Option>
|
<Option value="docx">DOCX</Option>
|
<Option value="xls">XLS</Option>
|
<Option value="xlsx">XLSX</Option>
|
</Select>
|
</Form.Item>
|
</Card>
|
</Col>
|
|
<Col xs={24} lg={12}>
|
<Card title="安全设置" style={{ marginBottom: 24 }}>
|
<Form.Item
|
name="passwordMinLength"
|
label="密码最小长度"
|
rules={[{ required: true, message: '请输入密码最小长度' }]}
|
>
|
<InputNumber
|
min={6}
|
max={20}
|
style={{ width: '100%' }}
|
placeholder="请输入密码最小长度"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="sessionTimeout"
|
label="会话超时时间（分钟）"
|
rules={[{ required: true, message: '请输入会话超时时间' }]}
|
>
|
<InputNumber
|
min={10}
|
max={1440}
|
style={{ width: '100%' }}
|
placeholder="请输入会话超时时间"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="maxLoginAttempts"
|
label="最大登录尝试次数"
|
rules={[{ required: true, message: '请输入最大登录尝试次数' }]}
|
>
|
<InputNumber
|
min={3}
|
max={10}
|
style={{ width: '100%' }}
|
placeholder="请输入最大登录尝试次数"
|
/>
|
</Form.Item>
|
</Card>
|
</Col>
|
</Row>
|
|
<Card>
|
<div style={{ textAlign: 'center' }}>
|
<Button
|
type="primary"
|
htmlType="submit"
|
icon={<SaveOutlined />}
|
loading={loading}
|
size="large"
|
style={{ marginRight: 16 }}
|
>
|
保存设置
|
</Button>
|
<Button
|
icon={<ReloadOutlined />}
|
onClick={handleReset}
|
size="large"
|
>
|
重置设置
|
</Button>
|
</div>
|
</Card>
|
</Form>
|
</div>
|
);
|
};
|
|
export default SystemSettings;
|
