new-api/web/src/components/SystemSetting.js

import React, { useEffect, useState, useRef } from 'react';
import {
  Button,
  Form,
  Row,
  Col,
  Typography,
  Modal,
  Banner,
  TagInput,
  Spin,
} from '@douyinfe/semi-ui';
const { Text } = Typography;
import {
  removeTrailingSlash,
  showError,
  showSuccess,
  verifyJSON,
} from '../helpers/utils';
import { API } from '../helpers/api';

const SystemSetting = () => {
  let [inputs, setInputs] = useState({
    PasswordLoginEnabled: '',
    PasswordRegisterEnabled: '',
    EmailVerificationEnabled: '',
    GitHubOAuthEnabled: '',
    GitHubClientId: '',
    GitHubClientSecret: '',
    'oidc.enabled': '',
    'oidc.client_id': '',
    'oidc.client_secret': '',
    'oidc.well_known': '',
    'oidc.authorization_endpoint': '',
    'oidc.token_endpoint': '',
    'oidc.user_info_endpoint': '',
    Notice: '',
    SMTPServer: '',
    SMTPPort: '',
    SMTPAccount: '',
    SMTPFrom: '',
    SMTPToken: '',
    ServerAddress: '',
    WorkerUrl: '',
    WorkerValidKey: '',
    EpayId: '',
    EpayKey: '',
    Price: 7.3,
    MinTopUp: 1,
    TopupGroupRatio: '',
    PayAddress: '',
    CustomCallbackAddress: '',
    Footer: '',
    WeChatAuthEnabled: '',
    WeChatServerAddress: '',
    WeChatServerToken: '',
    WeChatAccountQRCodeImageURL: '',
    TurnstileCheckEnabled: '',
    TurnstileSiteKey: '',
    TurnstileSecretKey: '',
    RegisterEnabled: '',
    EmailDomainRestrictionEnabled: '',
    EmailAliasRestrictionEnabled: '',
    SMTPSSLEnabled: '',
    EmailDomainWhitelist: [],
    // telegram login
    TelegramOAuthEnabled: '',
    TelegramBotToken: '',
    TelegramBotName: '',
    LinuxDOOAuthEnabled: '',
    LinuxDOClientId: '',
    LinuxDOClientSecret: '',
  });

  const [originInputs, setOriginInputs] = useState({});
  const [loading, setLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const formApiRef = useRef(null);
  const [emailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
  const [showPasswordLoginConfirmModal, setShowPasswordLoginConfirmModal] = useState(false);
  const [linuxDOOAuthEnabled, setLinuxDOOAuthEnabled] = useState(false);

  const getOptions = async () => {
    setLoading(true);
    const res = await API.get('/api/option/');
    const { success, message, data } = res.data;
    if (success) {
      let newInputs = {};
      data.forEach((item) => {
        switch (item.key) {
          case 'TopupGroupRatio':
            item.value = JSON.stringify(JSON.parse(item.value), null, 2);
            break;
          case 'EmailDomainWhitelist':
            setEmailDomainWhitelist(item.value ? item.value.split(',') : []);
            break;
          case 'PasswordLoginEnabled':
          case 'PasswordRegisterEnabled':
          case 'EmailVerificationEnabled':
          case 'GitHubOAuthEnabled':
          case 'WeChatAuthEnabled':
          case 'TelegramOAuthEnabled':
          case 'RegisterEnabled':
          case 'TurnstileCheckEnabled':
          case 'EmailDomainRestrictionEnabled':
          case 'EmailAliasRestrictionEnabled':
          case 'SMTPSSLEnabled':
          case 'LinuxDOOAuthEnabled':
          case 'oidc.enabled':
            item.value = item.value === 'true';
            break;
          case 'Price':
          case 'MinTopUp':
            item.value = parseFloat(item.value);
            break;
          default:
            break;
        }
        newInputs[item.key] = item.value;
      });
      setInputs(newInputs);
      setOriginInputs(newInputs);
      if (formApiRef.current) {
        formApiRef.current.setValues(newInputs);
      }
      setIsLoaded(true);
    } else {
      showError(message);
    }
    setLoading(false);
  };

  useEffect(() => {
    getOptions();
  }, []);

  const updateOptions = async (options) => {
    setLoading(true);
    try {
      // 分离 checkbox 类型的选项和其他选项
      const checkboxOptions = options.filter(opt => 
        opt.key.toLowerCase().endsWith('enabled')
      );
      const otherOptions = options.filter(opt => 
        !opt.key.toLowerCase().endsWith('enabled')
      );

      // 处理 checkbox 类型的选项
      for (const opt of checkboxOptions) {
        const res = await API.put('/api/option/', {
          key: opt.key,
          value: opt.value.toString()
        });
        if (!res.data.success) {
          showError(res.data.message);
          return;
        }
      }

      // 处理其他选项
      if (otherOptions.length > 0) {
        const requestQueue = otherOptions.map(opt => 
          API.put('/api/option/', {
            key: opt.key,
            value: typeof opt.value === 'boolean' ? opt.value.toString() : opt.value
          })
        );

        const results = await Promise.all(requestQueue);
        
        // 检查所有请求是否成功
        const errorResults = results.filter(res => !res.data.success);
        errorResults.forEach(res => {
          showError(res.data.message);
        });
      }

      showSuccess('更新成功');
      // 更新本地状态
      const newInputs = { ...inputs };
      options.forEach(opt => {
        newInputs[opt.key] = opt.value;
      });
      setInputs(newInputs);
    } catch (error) {
      showError('更新失败');
    }
    setLoading(false);
  };

  const handleFormChange = (values) => {
    setInputs(values);
  };

  const submitServerAddress = async () => {
    let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
    await updateOptions([{ key: 'ServerAddress', value: ServerAddress }]);
  };

  const submitWorker = async () => {
    let WorkerUrl = removeTrailingSlash(inputs.WorkerUrl);
    await updateOptions([
      { key: 'WorkerUrl', value: WorkerUrl },
      { key: 'WorkerValidKey', value: inputs.WorkerValidKey }
    ]);
  };

  const submitPayAddress = async () => {
    if (inputs.ServerAddress === '') {
      showError('请先填写服务器地址');
      return;
    }
    if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
      if (!verifyJSON(inputs.TopupGroupRatio)) {
        showError('充值分组倍率不是合法的 JSON 字符串');
        return;
      }
    }
    
    const options = [
      { key: 'PayAddress', value: removeTrailingSlash(inputs.PayAddress) }
    ];
    
    if (inputs.EpayId !== '') {
      options.push({ key: 'EpayId', value: inputs.EpayId });
    }
    if (inputs.EpayKey !== undefined && inputs.EpayKey !== '') {
      options.push({ key: 'EpayKey', value: inputs.EpayKey });
    }
    if (inputs.Price !== '') {
      options.push({ key: 'Price', value: inputs.Price.toString() });
    }
    if (inputs.MinTopUp !== '') {
      options.push({ key: 'MinTopUp', value: inputs.MinTopUp.toString() });
    }
    if (inputs.CustomCallbackAddress !== '') {
      options.push({ key: 'CustomCallbackAddress', value: inputs.CustomCallbackAddress });
    }
    if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
      options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
    }
    
    await updateOptions(options);
  };

  const submitSMTP = async () => {
    const options = [];
    
    if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
      options.push({ key: 'SMTPServer', value: inputs.SMTPServer });
    }
    if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
      options.push({ key: 'SMTPAccount', value: inputs.SMTPAccount });
    }
    if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) {
      options.push({ key: 'SMTPFrom', value: inputs.SMTPFrom });
    }
    if (originInputs['SMTPPort'] !== inputs.SMTPPort && inputs.SMTPPort !== '') {
      options.push({ key: 'SMTPPort', value: inputs.SMTPPort });
    }
    if (originInputs['SMTPToken'] !== inputs.SMTPToken && inputs.SMTPToken !== '') {
      options.push({ key: 'SMTPToken', value: inputs.SMTPToken });
    }
    
    if (options.length > 0) {
      await updateOptions(options);
    }
  };

  const submitEmailDomainWhitelist = async () => {
    if (Array.isArray(emailDomainWhitelist)) {
      await updateOptions([{ 
        key: 'EmailDomainWhitelist', 
        value: emailDomainWhitelist.join(',') 
      }]);
    } else {
      showError('邮箱域名白名单格式不正确');
    }
  };

  const submitWeChat = async () => {
    const options = [];
    
    if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
      options.push({ 
        key: 'WeChatServerAddress', 
        value: removeTrailingSlash(inputs.WeChatServerAddress) 
      });
    }
    if (originInputs['WeChatAccountQRCodeImageURL'] !== inputs.WeChatAccountQRCodeImageURL) {
      options.push({ 
        key: 'WeChatAccountQRCodeImageURL', 
        value: inputs.WeChatAccountQRCodeImageURL 
      });
    }
    if (originInputs['WeChatServerToken'] !== inputs.WeChatServerToken && inputs.WeChatServerToken !== '') {
      options.push({ key: 'WeChatServerToken', value: inputs.WeChatServerToken });
    }
    
    if (options.length > 0) {
      await updateOptions(options);
    }
  };

  const submitGitHubOAuth = async () => {
    const options = [];
    
    if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
      options.push({ key: 'GitHubClientId', value: inputs.GitHubClientId });
    }
    if (originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret && inputs.GitHubClientSecret !== '') {
      options.push({ key: 'GitHubClientSecret', value: inputs.GitHubClientSecret });
    }
    
    if (options.length > 0) {
      await updateOptions(options);
    }
  };

  const submitOIDCSettings = async () => {
    if (inputs['oidc.well_known'] !== '') {
      if (!inputs['oidc.well_known'].startsWith('http://') && !inputs['oidc.well_known'].startsWith('https://')) {
        showError('Well-Known URL 必须以 http:// 或 https:// 开头');
        return;
      }
      try {
        const res = await API.get(inputs['oidc.well_known']);
        inputs['oidc.authorization_endpoint'] = res.data['authorization_endpoint'];
        inputs['oidc.token_endpoint'] = res.data['token_endpoint'];
        inputs['oidc.user_info_endpoint'] = res.data['userinfo_endpoint'];
        showSuccess('获取 OIDC 配置成功！');
      } catch (err) {
        console.error(err);
        showError("获取 OIDC 配置失败，请检查网络状况和 Well-Known URL 是否正确");
        return;
      }
    }

    const options = [];
    
    if (originInputs['oidc.well_known'] !== inputs['oidc.well_known']) {
      options.push({ key: 'oidc.well_known', value: inputs['oidc.well_known'] });
    }
    if (originInputs['oidc.client_id'] !== inputs['oidc.client_id']) {
      options.push({ key: 'oidc.client_id', value: inputs['oidc.client_id'] });
    }
    if (originInputs['oidc.client_secret'] !== inputs['oidc.client_secret'] && inputs['oidc.client_secret'] !== '') {
      options.push({ key: 'oidc.client_secret', value: inputs['oidc.client_secret'] });
    }
    if (originInputs['oidc.authorization_endpoint'] !== inputs['oidc.authorization_endpoint']) {
      options.push({ key: 'oidc.authorization_endpoint', value: inputs['oidc.authorization_endpoint'] });
    }
    if (originInputs['oidc.token_endpoint'] !== inputs['oidc.token_endpoint']) {
      options.push({ key: 'oidc.token_endpoint', value: inputs['oidc.token_endpoint'] });
    }
    if (originInputs['oidc.user_info_endpoint'] !== inputs['oidc.user_info_endpoint']) {
      options.push({ key: 'oidc.user_info_endpoint', value: inputs['oidc.user_info_endpoint'] });
    }
    
    if (options.length > 0) {
      await updateOptions(options);
    }
  };

  const submitTelegramSettings = async () => {
    const options = [
      { key: 'TelegramBotToken', value: inputs.TelegramBotToken },
      { key: 'TelegramBotName', value: inputs.TelegramBotName }
    ];
    await updateOptions(options);
  };

  const submitTurnstile = async () => {
    const options = [];
    
    if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
      options.push({ key: 'TurnstileSiteKey', value: inputs.TurnstileSiteKey });
    }
    if (originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey && inputs.TurnstileSecretKey !== '') {
      options.push({ key: 'TurnstileSecretKey', value: inputs.TurnstileSecretKey });
    }
    
    if (options.length > 0) {
      await updateOptions(options);
    }
  };

  const submitLinuxDOOAuth = async () => {
    const options = [];
    
    if (originInputs['LinuxDOClientId'] !== inputs.LinuxDOClientId) {
      options.push({ key: 'LinuxDOClientId', value: inputs.LinuxDOClientId });
    }
    if (originInputs['LinuxDOClientSecret'] !== inputs.LinuxDOClientSecret && inputs.LinuxDOClientSecret !== '') {
      options.push({ key: 'LinuxDOClientSecret', value: inputs.LinuxDOClientSecret });
    }
    
    if (options.length > 0) {
      await updateOptions(options);
    }
  };

  const handleCheckboxChange = async (optionKey, event) => {
    const value = event.target.checked;
    
    if (optionKey === 'PasswordLoginEnabled' && !value) {
      setShowPasswordLoginConfirmModal(true);
    } else {
      await updateOptions([{ key: optionKey, value }]);
    }
    if (optionKey === 'LinuxDOOAuthEnabled') {
      setLinuxDOOAuthEnabled(value);
    }
  };

  const handlePasswordLoginConfirm = async () => {
    await updateOptions([{ key: 'PasswordLoginEnabled', value: false }]);
    setShowPasswordLoginConfirmModal(false);
  };

  return (
    <div style={{ padding: '20px' }}>
      {isLoaded ? (
        <Form
          initValues={inputs}
          onValueChange={handleFormChange}
          getFormApi={(api) => (formApiRef.current = api)}
        >
          {({ formState, values, formApi }) => (
            <>
              <Form.Section text='通用设置'>
                <Form.Input
                  field='ServerAddress'
                  label='服务器地址'
                  placeholder='例如：https://yourdomain.com'
                  style={{ width: '100%' }}
                />
                <Button onClick={submitServerAddress}>更新服务器地址</Button>
              </Form.Section>

              <Form.Section text='代理设置'>
                <Text>
                  （支持{' '}
                  <a
                    href='https://github.com/Calcium-Ion/new-api-worker'
                    target='_blank'
                    rel='noreferrer'
                  >
                    new-api-worker
                  </a>
                  ）
                </Text>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='WorkerUrl'
                      label='Worker地址'
                      placeholder='例如：https://workername.yourdomain.workers.dev'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='WorkerValidKey'
                      label='Worker密钥'
                      placeholder='敏感信息不会发送到前端显示'
                      type='password'
                    />
                  </Col>
                </Row>
                <Button onClick={submitWorker}>更新Worker设置</Button>
              </Form.Section>

              <Form.Section text='支付设置'>
                <Text>
                  （当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
                </Text>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input
                      field='PayAddress'
                      label='支付地址'
                      placeholder='例如：https://yourdomain.com'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input
                      field='EpayId'
                      label='易支付商户ID'
                      placeholder='例如：0001'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input
                      field='EpayKey'
                      label='易支付商户密钥'
                      placeholder='敏感信息不会发送到前端显示'
                      type='password'
                    />
                  </Col>
                </Row>
                <Row
                  gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
                  style={{ marginTop: 16 }}
                >
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input
                      field='CustomCallbackAddress'
                      label='回调地址'
                      placeholder='例如：https://yourdomain.com'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.InputNumber
                      field='Price'
                      precision={2}
                      label='充值价格（x元/美金）'
                      placeholder='例如：7，就是7元/美金'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.InputNumber
                      field='MinTopUp'
                      label='最低充值美元数量'
                      placeholder='例如：2，就是最低充值2$'
                    />
                  </Col>
                </Row>
                <Form.TextArea
                  field='TopupGroupRatio'
                  label='充值分组倍率'
                  placeholder='为一个 JSON 文本，键为组名称，值为倍率'
                  autosize
                />
                <Button onClick={submitPayAddress}>更新支付设置</Button>
              </Form.Section>

              <Form.Section text='配置登录注册'>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Checkbox
                      field='PasswordLoginEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('PasswordLoginEnabled', e)
                      }
                    >
                      允许通过密码进行登录
                    </Form.Checkbox>
                    <Form.Checkbox
                      field='PasswordRegisterEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('PasswordRegisterEnabled', e)
                      }
                    >
                      允许通过密码进行注册
                    </Form.Checkbox>
                    <Form.Checkbox
                      field='EmailVerificationEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('EmailVerificationEnabled', e)
                      }
                    >
                      通过密码注册时需要进行邮箱验证
                    </Form.Checkbox>
                    <Form.Checkbox
                      field='RegisterEnabled'
                      noLabel
                      onChange={(e) => handleCheckboxChange('RegisterEnabled', e)}
                    >
                      允许新用户注册
                    </Form.Checkbox>
                    <Form.Checkbox
                      field='TurnstileCheckEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('TurnstileCheckEnabled', e)
                      }
                    >
                      启用 Turnstile 用户校验
                    </Form.Checkbox>
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Checkbox
                      field='GitHubOAuthEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('GitHubOAuthEnabled', e)
                      }
                    >
                      允许通过 GitHub 账户登录 & 注册
                    </Form.Checkbox>
                    <Form.Checkbox
                      field='LinuxDOOAuthEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('LinuxDOOAuthEnabled', e)
                      }
                    >
                      允许通过 Linux DO 账户登录 & 注册
                    </Form.Checkbox>
                    <Form.Checkbox
                      field='WeChatAuthEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('WeChatAuthEnabled', e)
                      }
                    >
                      允许通过微信登录 & 注册
                    </Form.Checkbox>
                    <Form.Checkbox
                      field='TelegramOAuthEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('TelegramOAuthEnabled', e)
                      }
                    >
                      允许通过 Telegram 进行登录
                    </Form.Checkbox>
                    <Form.Checkbox
                      field='oidc.enabled'
                      noLabel
                      onChange={(e) => handleCheckboxChange('oidc.enabled', e)}
                    >
                      允许通过 OIDC 进行登录
                    </Form.Checkbox>
                  </Col>
                </Row>
              </Form.Section>

              <Form.Section text='配置邮箱域名白名单'>
                <Text>用以防止恶意用户利用临时邮箱批量注册</Text>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Checkbox
                      field='EmailDomainRestrictionEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('EmailDomainRestrictionEnabled', e)
                      }
                    >
                      启用邮箱域名白名单
                    </Form.Checkbox>
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Checkbox
                      field='EmailAliasRestrictionEnabled'
                      noLabel
                      onChange={(e) =>
                        handleCheckboxChange('EmailAliasRestrictionEnabled', e)
                      }
                    >
                      启用邮箱别名限制
                    </Form.Checkbox>
                  </Col>
                </Row>
                <TagInput
                  value={emailDomainWhitelist}
                  onChange={setEmailDomainWhitelist}
                  placeholder='输入域名后回车'
                  style={{ width: '100%', marginTop: 16 }}
                />
                <Button
                  onClick={submitEmailDomainWhitelist}
                  style={{ marginTop: 10 }}
                >
                  保存邮箱域名白名单设置
                </Button>
              </Form.Section>

              <Form.Section text='配置 SMTP'>
                <Text>用以支持系统的邮件发送</Text>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input field='SMTPServer' label='SMTP 服务器地址' />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input field='SMTPPort' label='SMTP 端口' />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input field='SMTPAccount' label='SMTP 账户' />
                  </Col>
                </Row>
                <Row
                  gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
                  style={{ marginTop: 16 }}
                >
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input field='SMTPFrom' label='SMTP 发送者邮箱' />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input
                      field='SMTPToken'
                      label='SMTP 访问凭证'
                      type='password'
                      placeholder='敏感信息不会发送到前端显示'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Checkbox
                      field='SMTPSSLEnabled'
                      noLabel
                      onChange={(e) => handleCheckboxChange('SMTPSSLEnabled', e)}
                    >
                      启用SMTP SSL
                    </Form.Checkbox>
                  </Col>
                </Row>
                <Button onClick={submitSMTP}>保存 SMTP 设置</Button>
              </Form.Section>

              <Form.Section text='配置 OIDC'>
                <Text>用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP</Text>
                <Banner
                  type='info'
                  description={`主页链接填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，重定向 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/oidc`}
                  style={{ marginBottom: 20, marginTop: 16 }}
                />
                <Text>若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置</Text>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='oidc.well_known'
                      label='Well-Known URL'
                      placeholder='请输入 OIDC 的 Well-Known URL'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='oidc.client_id'
                      label='Client ID'
                      placeholder='输入 OIDC 的 Client ID'
                    />
                  </Col>
                </Row>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='oidc.client_secret'
                      label='Client Secret'
                      type='password'
                      placeholder='敏感信息不会发送到前端显示'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='oidc.authorization_endpoint'
                      label='Authorization Endpoint'
                      placeholder='输入 OIDC 的 Authorization Endpoint'
                    />
                  </Col>
                </Row>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='oidc.token_endpoint'
                      label='Token Endpoint'
                      placeholder='输入 OIDC 的 Token Endpoint'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='oidc.user_info_endpoint'
                      label='User Info Endpoint'
                      placeholder='输入 OIDC 的 Userinfo Endpoint'
                    />
                  </Col>
                </Row>
                <Button onClick={submitOIDCSettings}>保存 OIDC 设置</Button>
              </Form.Section>

              <Form.Section text='配置 GitHub OAuth App'>
                <Text>用以支持通过 GitHub 进行登录注册</Text>
                <Banner
                  type='info'
                  description={`Homepage URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，Authorization callback URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/github`}
                  style={{ marginBottom: 20, marginTop: 16 }}
                />
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input field='GitHubClientId' label='GitHub Client ID' />
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='GitHubClientSecret'
                      label='GitHub Client Secret'
                      type='password'
                      placeholder='敏感信息不会发送到前端显示'
                    />
                  </Col>
                </Row>
                <Button onClick={submitGitHubOAuth}>
                  保存 GitHub OAuth 设置
                </Button>
              </Form.Section>
              <Form.Section text='配置 Linux DO OAuth'>
                <Text>
                  用以支持通过 Linux DO 进行登录注册
                  <a
                    href='https://connect.linux.do/'
                    target='_blank'
                    rel='noreferrer'
                    style={{ display: 'inline-block', marginLeft: 4, marginRight: 4 }}
                  >
                    点击此处
                  </a>
                  管理你的 LinuxDO OAuth App
                </Text>
                <Banner
                  type='info'
                  description={`回调 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/linuxdo`}
                  style={{ marginBottom: 20, marginTop: 16 }}
                />
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input 
                      field='LinuxDOClientId' 
                      label='Linux DO Client ID'
                      placeholder='输入你注册的 LinuxDO OAuth APP 的 ID'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='LinuxDOClientSecret'
                      label='Linux DO Client Secret'
                      type='password'
                      placeholder='敏感信息不会发送到前端显示'
                    />
                  </Col>
                </Row>
                <Button onClick={submitLinuxDOOAuth}>
                  保存 Linux DO OAuth 设置
                </Button>
              </Form.Section>
              <Form.Section text='配置 WeChat Server'>
                <Text>用以支持通过微信进行登录注册</Text>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input
                      field='WeChatServerAddress'
                      label='WeChat Server 服务器地址'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input
                      field='WeChatServerToken'
                      label='WeChat Server 访问凭证'
                      type='password'
                      placeholder='敏感信息不会发送到前端显示'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <Form.Input
                      field='WeChatAccountQRCodeImageURL'
                      label='微信公众号二维码图片链接'
                    />
                  </Col>
                </Row>
                <Button onClick={submitWeChat}>保存 WeChat Server 设置</Button>
              </Form.Section>
              <Form.Section text='配置 Telegram 登录'>
                <Text>用以支持通过 Telegram 进行登录注册</Text>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='TelegramBotToken'
                      label='Telegram Bot Token'
                      placeholder='敏感信息不会发送到前端显示'
                      type='password'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='TelegramBotName'
                      label='Telegram Bot 名称'
                    />
                  </Col>
                </Row>
                <Button onClick={submitTelegramSettings}>
                  保存 Telegram 登录设置
                </Button>
              </Form.Section>
              <Form.Section text='配置 Turnstile'>
                <Text>用以支持用户校验</Text>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='TurnstileSiteKey'
                      label='Turnstile Site Key'
                    />
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                    <Form.Input
                      field='TurnstileSecretKey'
                      label='Turnstile Secret Key'
                      type='password'
                      placeholder='敏感信息不会发送到前端显示'
                    />
                  </Col>
                </Row>
                <Button onClick={submitTurnstile}>保存 Turnstile 设置</Button>
              </Form.Section>
            
              <Modal
                title="确认取消密码登录"
                visible={showPasswordLoginConfirmModal}
                onOk={handlePasswordLoginConfirm}
                onCancel={() => {
                  setShowPasswordLoginConfirmModal(false);
                  formApiRef.current.setValue('PasswordLoginEnabled', true);
                }}
                okText="确认"
                cancelText="取消"
              >
                <p>您确定要取消密码登录功能吗？这可能会影响用户的登录方式。</p>
              </Modal>
            </>
          )}
        </Form>
      ) : (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
          <Spin size="large" />
        </div>
      )}
    </div>
  );
};

export default SystemSetting;