d8d-admin-mobile-starter-public/client/admin/pages_settings.tsx

import React, { useEffect } from 'react';
import { 
  Button,Space,
  Form, Input, Select, message, Modal,
  Card, Spin, Typography,
  Switch, Tabs, Alert, InputNumber
} from 'antd';
import {
  ReloadOutlined,
  SaveOutlined,
} from '@ant-design/icons';
import { 
  useQuery,
  useMutation,
  useQueryClient,
} from '@tanstack/react-query';
import dayjs from 'dayjs';
import weekday from 'dayjs/plugin/weekday';
import localeData from 'dayjs/plugin/localeData';
import 'dayjs/locale/zh-cn';
import type { 
  SystemSetting, SystemSettingValue
} from '../share/types.ts';

import {
  SystemSettingGroup,
  SystemSettingKey,
  AllowedFileType
} from '../share/types.ts';



import {
  SystemAPI
} from './api/index.ts';

import { useTheme } from './hooks_sys.tsx';
import { validateUrl, validateAuthHeader } from './utils.ts';

import { Uploader } from './components_uploader.tsx';

// 配置 dayjs 插件
dayjs.extend(weekday);
dayjs.extend(localeData);

// 设置 dayjs 语言
dayjs.locale('zh-cn');

const { Title } = Typography;

// 分组标题映射
const GROUP_TITLES: Record<typeof SystemSettingGroup[keyof typeof SystemSettingGroup], string> = {
  [SystemSettingGroup.BASIC]: '基础设置',
  [SystemSettingGroup.FEATURE]: '功能设置',
  [SystemSettingGroup.UPLOAD]: '上传设置',
  [SystemSettingGroup.NOTIFICATION]: '通知设置'
};

// 分组描述映射
const GROUP_DESCRIPTIONS: Record<typeof SystemSettingGroup[keyof typeof SystemSettingGroup], string> = {
  [SystemSettingGroup.BASIC]: '配置站点的基本信息',
  [SystemSettingGroup.FEATURE]: '配置系统功能的开启状态',
  [SystemSettingGroup.UPLOAD]: '配置文件上传相关的参数',
  [SystemSettingGroup.NOTIFICATION]: '配置系统通知的触发条件'
};

export const SettingsPage = () => {
  const [form] = Form.useForm();
  const queryClient = useQueryClient();
  const { isDark } = useTheme();

  // 获取系统设置
  const { data: settingsData, isLoading: isLoadingSettings } = useQuery({
    queryKey: ['systemSettings'],
    queryFn: SystemAPI.getSettings,
  });

  // 更新系统设置
  const updateSettingsMutation = useMutation({
    mutationFn: (values: Partial<SystemSetting>[]) => SystemAPI.updateSettings(values),
    onSuccess: () => {
      message.success('基础设置已更新');
      queryClient.invalidateQueries({ queryKey: ['systemSettings'] });
    },
    onError: (error) => {
      message.error('更新基础设置失败');
      console.error('更新基础设置失败:', error);
    },
  });

  // 重置系统设置
  const resetSettingsMutation = useMutation({
    mutationFn: SystemAPI.resetSettings,
    onSuccess: () => {
      message.success('基础设置已重置');
      queryClient.invalidateQueries({ queryKey: ['systemSettings'] });
    },
    onError: (error) => {
      message.error('重置基础设置失败');
      console.error('重置基础设置失败:', error);
    },
  });

  // 初始化表单数据
  useEffect(() => {
    if (settingsData) {
      const formValues = settingsData.reduce((acc: Record<string, any>, group) => {
        group.settings.forEach(setting => {
          // 根据值的类型进行转换
          let value = setting.value;
          if (typeof value === 'string') {
            if (value === 'true' || value === 'false') {
              value = value === 'true';
            } else if (!isNaN(Number(value)) && !value.includes('.')) {
              value = parseInt(value, 10);
            } else if (setting.key === SystemSettingKey.ALLOWED_FILE_TYPES) {
              value = (value ? (value as string).split(',') : []) as unknown as string;
            }
          }
          acc[setting.key] = value;
        });
        return acc;
      }, {});
      form.setFieldsValue(formValues);
    }
  }, [settingsData, form]);

  // 处理表单提交
  const handleSubmit = async (values: Record<string, SystemSettingValue>) => {
    const settings = Object.entries(values).map(([key, value]) => ({
      key: key as typeof SystemSettingKey[keyof typeof SystemSettingKey],
      value: String(value),
      group: key.startsWith('SITE_') ? SystemSettingGroup.BASIC :
             key.startsWith('ENABLE_') || key.includes('LOGIN_') || key.includes('SESSION_') ? SystemSettingGroup.FEATURE :
             key.includes('UPLOAD_') || key.includes('FILE_') || key.includes('IMAGE_') ? SystemSettingGroup.UPLOAD :
             SystemSettingGroup.NOTIFICATION
    }));
    updateSettingsMutation.mutate(settings);
  };

  // 处理重置
  const handleReset = () => {
    Modal.confirm({
      title: '确认重置',
      content: '确定要将所有设置重置为默认值吗？此操作不可恢复。',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        resetSettingsMutation.mutate();
      },
    });
  };

  // 根据设置类型渲染不同的输入控件
  const renderSettingInput = (setting: SystemSetting) => {
    const value = setting.value;
    
    if (typeof value === 'boolean' || value === 'true' || value === 'false') {
      return <Switch checkedChildren="开启" unCheckedChildren="关闭" />;
    }
    
    if (setting.key === SystemSettingKey.ALLOWED_FILE_TYPES) {
      return <Select
        mode="tags"
        placeholder="请输入允许的文件类型"
        tokenSeparators={[',']}
        options={Object.values(AllowedFileType).map(type => ({
          label: type.toUpperCase(),
          value: type
        }))}
      />;
    }
    
    if (setting.key.includes('MAX_SIZE') || setting.key.includes('ATTEMPTS') ||
        setting.key.includes('TIMEOUT') || setting.key.includes('MAX_WIDTH') ||
        setting.key === 'SMS_API_TIMEOUT' || setting.key === 'SMS_API_RETRY') {
      return <InputNumber min={1} style={{ width: '100%' }} />;
    }
    
    if (setting.key === SystemSettingKey.SITE_LOGO || setting.key === SystemSettingKey.SITE_FAVICON) {
      return (
        <div>
          {value && <img src={String(value)} alt="图片" style={{ width: 100, height: 100, objectFit: 'contain', marginBottom: 8 }} />}
          <div style={{ width: 100 }}>
            <Uploader
              maxSize={2 * 1024 * 1024}
              prefix={setting.key === SystemSettingKey.SITE_LOGO ? 'logo/' : 'favicon/'}
              allowedTypes={['image/jpeg', 'image/png', 'image/svg+xml', 'image/x-icon']}
              onSuccess={(fileUrl) => {
                form.setFieldValue(setting.key, fileUrl);
                updateSettingsMutation.mutate([{
                  key: setting.key,
                  value: fileUrl,
                  group: SystemSettingGroup.BASIC
                }]);
              }}
              onError={(error) => {
                message.error(`上传失败：${error.message}`);
              }}
            />
          </div>
        </div>
      );
    }

    if (setting.key === 'SMS_API_URL') {
      return <Input placeholder="请输入短信接口URL" />;
    }

    if (setting.key === 'SMS_API_AUTH') {
      return <Input.Password placeholder="请输入Basic Auth认证信息" />;
    }
    
    return <Input placeholder={`请输入${setting.description || setting.key}`} />;
  };

  return (
    <div>
      <Card
        title={
          <Space>
            <Title level={2} style={{ margin: 0 }}>系统设置</Title>
          </Space>
        }
        extra={
          <Space>
            <Button 
              icon={<ReloadOutlined />}
              onClick={handleReset}
              loading={resetSettingsMutation.isPending}
            >
              重置默认
            </Button>
          </Space>
        }
      >
        <Spin spinning={isLoadingSettings || updateSettingsMutation.isPending}>
          <Tabs
            type="card"
            items={Object.values(SystemSettingGroup).map(group => ({
              key: group,
              label: String(GROUP_TITLES[group]),
                children: (
                  <div>
                    <Alert
                    message={GROUP_DESCRIPTIONS[group]}
                      type="info"
                      showIcon
                      style={{ marginBottom: 24 }}
                    />
                    <Form
                      form={form}
                      layout="vertical"
                      onFinish={handleSubmit}
                    >
                    {settingsData
                      ?.find(g => g.name === group)
                      ?.settings.map(setting => (
                      <Form.Item
                          key={setting.key}
                          label={setting.description || setting.key}
                          name={setting.key}
                          rules={[
                            { required: true, message: `请输入${setting.description || setting.key}` },
                            ...(setting.key === 'SMS_API_URL' ? [{
                              validator: (_: unknown, value: string) =>
                                validateUrl(value) ? Promise.resolve() : Promise.reject(new Error('请输入有效的URL'))
                            }] : []),
                            ...(setting.key === 'SMS_API_AUTH' ? [{
                              validator: (_: unknown, value: string) =>
                                validateAuthHeader(value) ? Promise.resolve() : Promise.reject(new Error('格式应为Basic base64字符串'))
                            }] : [])
                          ]}
                        >
                          {renderSettingInput(setting)}
                      </Form.Item>
                      ))}
                      <Form.Item>
                        <Button
                          type="primary"
                          htmlType="submit"
                          icon={<SaveOutlined />}
                          loading={updateSettingsMutation.isPending}
                        >
                          保存设置
                        </Button>
                      </Form.Item>
                    </Form>
                  </div>
                )
            }))}
          />
        </Spin>
      </Card>
    </div>
  );
};