refactor(web): systemSetting component to enhance UI structure and add new configuration options

- Wrapped form sections in Card components for better visual separation
- Added new configuration options for payment settings, email domain whitelist, SMTP, OIDC, GitHub OAuth, Linux DO OAuth, WeChat, and Telegram
- Improved layout with responsive design using Row and Col components
- Updated button actions for saving settings in new sections

web/src/components/OtherSetting.js

@@ -7,6 +7,7 @@ import {
   Row,
   Modal,
   Space,
+  Card,
 } from '@douyinfe/semi-ui';
 import { API, showError, showSuccess, timestamp2string } from '../helpers';
 import { marked } from 'marked';
@@ -244,15 +245,25 @@ const OtherSetting = () => {
 
   return (
     <Row>
-      <Col span={24}>
+      <Col
+        span={24}
+        style={{
+          marginTop: '10px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '10px',
+        }}
+      >
         {/* 版本信息 */}
-        <Form style={{ marginBottom: 15 }}>
+        <Form>
+          <Card>
             <Form.Section text={t('系统信息')}>
               <Row>
                 <Col span={16}>
                   <Space>
                     <Text>
-                    {t('当前版本')}：{statusState?.status?.version || t('未知')}
+                      {t('当前版本')}：
+                      {statusState?.status?.version || t('未知')}
                     </Text>
                     <Button
                       type='primary'
@@ -272,17 +283,20 @@ const OtherSetting = () => {
                 </Col>
               </Row>
             </Form.Section>
+          </Card>
         </Form>
         {/* 通用设置 */}
         <Form
           values={inputs}
           getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)}
-          style={{ marginBottom: 15 }}
         >
+          <Card>
             <Form.Section text={t('通用设置')}>
               <Form.TextArea
                 label={t('公告')}
-              placeholder={t('在此输入新的公告内容，支持 Markdown & HTML 代码')}
+                placeholder={t(
+                  '在此输入新的公告内容，支持 Markdown & HTML 代码',
+                )}
                 field={'Notice'}
                 onChange={handleInputChange}
                 style={{ fontFamily: 'JetBrains Mono, Consolas' }}
@@ -292,13 +306,14 @@ const OtherSetting = () => {
                 {t('设置公告')}
               </Button>
             </Form.Section>
+          </Card>
         </Form>
         {/* 个性化设置 */}
         <Form
           values={inputs}
           getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)}
-          style={{ marginBottom: 15 }}
         >
+          <Card>
             <Form.Section text={t('个性化设置')}>
               <Form.Input
                 label={t('系统名称')}
@@ -372,6 +387,7 @@ const OtherSetting = () => {
                 {t('设置页脚')}
               </Button>
             </Form.Section>
+          </Card>
         </Form>
       </Col>
       <Modal

web/src/components/SystemSetting.js

@@ -9,6 +9,7 @@ import {
   Banner,
   TagInput,
   Spin,
+  Card,
 } from '@douyinfe/semi-ui';
 const { Text } = Typography;
 import {
@@ -489,7 +490,7 @@ const SystemSetting = () => {
   };
 
   return (
-    <div style={{ padding: '20px' }}>
+    <div>
       {isLoaded ? (
         <Form
           initValues={inputs}
@@ -497,7 +498,15 @@ const SystemSetting = () => {
           getFormApi={(api) => (formApiRef.current = api)}
         >
           {({ formState, values, formApi }) => (
-            <>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '10px',
+                marginTop: '10px',
+              }}
+            >
+              <Card>
                 <Form.Section text='通用设置'>
                   <Form.Input
                     field='ServerAddress'
@@ -507,7 +516,8 @@ const SystemSetting = () => {
                   />
                   <Button onClick={submitServerAddress}>更新服务器地址</Button>
                 </Form.Section>
-
+              </Card>
+              <Card>
                 <Form.Section text='代理设置'>
                   <Text>
                     （支持{' '}
@@ -541,7 +551,9 @@ const SystemSetting = () => {
                   </Row>
                   <Button onClick={submitWorker}>更新Worker设置</Button>
                 </Form.Section>
+              </Card>
 
+              <Card>
                 <Form.Section text='支付设置'>
                   <Text>
                     （当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
@@ -607,7 +619,9 @@ const SystemSetting = () => {
                   />
                   <Button onClick={submitPayAddress}>更新支付设置</Button>
                 </Form.Section>
+              </Card>
 
+              <Card>
                 <Form.Section text='配置登录注册'>
                   <Row
                     gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
@@ -699,14 +713,18 @@ const SystemSetting = () => {
                       <Form.Checkbox
                         field='oidc.enabled'
                         noLabel
-                      onChange={(e) => handleCheckboxChange('oidc.enabled', e)}
+                        onChange={(e) =>
+                          handleCheckboxChange('oidc.enabled', e)
+                        }
                       >
                         允许通过 OIDC 进行登录
                       </Form.Checkbox>
                     </Col>
                   </Row>
                 </Form.Section>
+              </Card>
 
+              <Card>
                 <Form.Section text='配置邮箱域名白名单'>
                   <Text>用以防止恶意用户利用临时邮箱批量注册</Text>
                   <Row
@@ -717,7 +735,10 @@ const SystemSetting = () => {
                         field='EmailDomainRestrictionEnabled'
                         noLabel
                         onChange={(e) =>
-                        handleCheckboxChange('EmailDomainRestrictionEnabled', e)
+                          handleCheckboxChange(
+                            'EmailDomainRestrictionEnabled',
+                            e,
+                          )
                         }
                       >
                         启用邮箱域名白名单
@@ -728,7 +749,10 @@ const SystemSetting = () => {
                         field='EmailAliasRestrictionEnabled'
                         noLabel
                         onChange={(e) =>
-                        handleCheckboxChange('EmailAliasRestrictionEnabled', e)
+                          handleCheckboxChange(
+                            'EmailAliasRestrictionEnabled',
+                            e,
+                          )
                         }
                       >
                         启用邮箱别名限制
@@ -748,7 +772,8 @@ const SystemSetting = () => {
                     保存邮箱域名白名单设置
                   </Button>
                 </Form.Section>
-
+              </Card>
+              <Card>
                 <Form.Section text='配置 SMTP'>
                   <Text>用以支持系统的邮件发送</Text>
                   <Row
@@ -793,7 +818,8 @@ const SystemSetting = () => {
                   </Row>
                   <Button onClick={submitSMTP}>保存 SMTP 设置</Button>
                 </Form.Section>
-
+              </Card>
+              <Card>
                 <Form.Section text='配置 OIDC'>
                   <Text>
                     用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的
@@ -865,7 +891,9 @@ const SystemSetting = () => {
                   </Row>
                   <Button onClick={submitOIDCSettings}>保存 OIDC 设置</Button>
                 </Form.Section>
+              </Card>
 
+              <Card>
                 <Form.Section text='配置 GitHub OAuth App'>
                   <Text>用以支持通过 GitHub 进行登录注册</Text>
                   <Banner
@@ -895,6 +923,8 @@ const SystemSetting = () => {
                     保存 GitHub OAuth 设置
                   </Button>
                 </Form.Section>
+              </Card>
+              <Card>
                 <Form.Section text='配置 Linux DO OAuth'>
                   <Text>
                     用以支持通过 Linux DO 进行登录注册
@@ -940,6 +970,9 @@ const SystemSetting = () => {
                     保存 Linux DO OAuth 设置
                   </Button>
                 </Form.Section>
+              </Card>
+
+              <Card>
                 <Form.Section text='配置 WeChat Server'>
                   <Text>用以支持通过微信进行登录注册</Text>
                   <Row
@@ -966,8 +999,13 @@ const SystemSetting = () => {
                       />
                     </Col>
                   </Row>
-                <Button onClick={submitWeChat}>保存 WeChat Server 设置</Button>
+                  <Button onClick={submitWeChat}>
+                    保存 WeChat Server 设置
+                  </Button>
                 </Form.Section>
+              </Card>
+
+              <Card>
                 <Form.Section text='配置 Telegram 登录'>
                   <Text>用以支持通过 Telegram 进行登录注册</Text>
                   <Row
@@ -992,6 +1030,9 @@ const SystemSetting = () => {
                     保存 Telegram 登录设置
                   </Button>
                 </Form.Section>
+              </Card>
+
+              <Card>
                 <Form.Section text='配置 Turnstile'>
                   <Text>用以支持用户校验</Text>
                   <Row
@@ -1014,6 +1055,7 @@ const SystemSetting = () => {
                   </Row>
                   <Button onClick={submitTurnstile}>保存 Turnstile 设置</Button>
                 </Form.Section>
+              </Card>
 
               <Modal
                 title='确认取消密码登录'
@@ -1028,7 +1070,7 @@ const SystemSetting = () => {
               >
                 <p>您确定要取消密码登录功能吗？这可能会影响用户的登录方式。</p>
               </Modal>
-            </>
+            </div>
           )}
         </Form>
       ) : (