style: add Card wrapper for system config

server/admin/src/client/routes/system/index.tsx

@@ -10,6 +10,7 @@ import {
   Form,
   Upload,
   useTranslation,
+  Card,
 } from 'tushan';
 import { IconCheck, IconClose, IconDelete } from 'tushan/icon';
 import { TailchatImage } from '../../components/TailchatImage';
@@ -97,66 +98,68 @@ export const SystemConfig: React.FC = React.memo(() => {
   }
 
   return (
-    <Form>
+    <Card>
-      <Form.Item label={t('custom.config.uploadFileLimit')}>
+      <Form>
-        {config.uploadFileLimit}
+        <Form.Item label={t('custom.config.uploadFileLimit')}>
-      </Form.Item>
+          {config.uploadFileLimit}
-
+        </Form.Item>
-      <Form.Item label={t('custom.config.emailVerification')}>
+
-        {config.emailVerification ? <IconCheck /> : <IconClose />}
+        <Form.Item label={t('custom.config.emailVerification')}>
-      </Form.Item>
+          {config.emailVerification ? <IconCheck /> : <IconClose />}
-
+        </Form.Item>
-      <Form.Item label={t('custom.config.allowGuestLogin')}>
+
-        {!config.disableGuestLogin ? <IconCheck /> : <IconClose />}
+        <Form.Item label={t('custom.config.allowGuestLogin')}>
-      </Form.Item>
+          {!config.disableGuestLogin ? <IconCheck /> : <IconClose />}
-
+        </Form.Item>
-      <Form.Item label={t('custom.config.allowUserRegister')}>
+
-        {!config.disableUserRegister ? <IconCheck /> : <IconClose />}
+        <Form.Item label={t('custom.config.allowUserRegister')}>
-      </Form.Item>
+          {!config.disableUserRegister ? <IconCheck /> : <IconClose />}
-
+        </Form.Item>
-      <Form.Item label={t('custom.config.serverName')}>
+
-        <Input
+        <Form.Item label={t('custom.config.serverName')}>
-          value={serverName}
+          <Input
-          onChange={(val) => setServerName(val)}
+            value={serverName}
-          onBlur={() => saveServerName()}
+            onChange={(val) => setServerName(val)}
-          placeholder="Tailchat"
+            onBlur={() => saveServerName()}
-        />
+            placeholder="Tailchat"
-      </Form.Item>
+          />
-
+        </Form.Item>
-      <Form.Item label={t('custom.config.serverEntryImage')}>
+
-        <div>
+        <Form.Item label={t('custom.config.serverEntryImage')}>
-          {config?.serverEntryImage ? (
+          <div>
-            <div style={{ marginTop: 10 }}>
+            {config?.serverEntryImage ? (
-              <div>
+              <div style={{ marginTop: 10 }}>
-                <TailchatImage
+                <div>
-                  style={{
+                  <TailchatImage
-                    maxWidth: '100%',
+                    style={{
-                    maxHeight: 360,
+                      maxWidth: '100%',
-                    overflow: 'hidden',
+                      maxHeight: 360,
-                    marginBottom: 4,
+                      overflow: 'hidden',
-                  }}
+                      marginBottom: 4,
-                  src={config?.serverEntryImage}
+                    }}
-                />
+                    src={config?.serverEntryImage}
+                  />
+                </div>
+
+                <Button
+                  type="primary"
+                  icon={<IconDelete />}
+                  onClick={() => handleChangeServerEntryImage(null)}
+                >
+                  Delete
+                </Button>
               </div>
-
+            ) : (
-              <Button
+              <Upload
-                type="primary"
+                onChange={(_, file) => {
-                icon={<IconDelete />}
+                  handleChangeServerEntryImage(file.originFile);
-                onClick={() => handleChangeServerEntryImage(null)}
+                }}
-              >
+              />
-                Delete
+            )}
-              </Button>
+          </div>
-            </div>
+        </Form.Item>
-          ) : (
+      </Form>
-            <Upload
+    </Card>
-              onChange={(_, file) => {
-                handleChangeServerEntryImage(file.originFile);
-              }}
-            />
-          )}
-        </div>
-      </Form.Item>
-    </Form>
   );
 });
 SystemConfig.displayName = 'SystemConfig';