feat(config): update page layout

src/i18n/en.ts

@@ -91,4 +91,7 @@ export default {
   flushFakeIPData: 'Flush Fake-IP Data',
   tagClientSourceIPWithName: 'Tag Client Source IP With Name',
   tag: 'Tag',
+  coreConfig: 'Core Config',
+  xdConfig: 'XD Config',
+  version: 'Version',
 }

src/i18n/zh.ts

@@ -91,4 +91,7 @@ export default {
   flushFakeIPData: '清空 Fake-IP 数据',
   tagClientSourceIPWithName: '为客户端源 IP 地址添加名称标记',
   tag: '标记',
+  coreConfig: '核心配置',
+  xdConfig: 'XD 配置',
+  version: '版本',
 }

src/pages/Config.tsx

@@ -251,7 +251,19 @@ const ConfigForXd = () => {
   const [t, { locale }] = useI18n()
 
   return (
-    <div class="grid grid-cols-2 gap-4">
+    <div class="grid grid-cols-2 place-items-center gap-4">
+      <div class="col-span-2">
+        <Button
+          onClick={() => {
+            const curLocale = locale()
+
+            locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
+          }}
+        >
+          {t('switchLanguage')}
+        </Button>
+      </div>
+
       <div class="flex flex-col gap-4">
         <div>
           <ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
@@ -313,18 +325,6 @@ const ConfigForXd = () => {
           onChange={(e) => setUseTwemoji(e.target.checked)}
         />
       </div>
-
-      <div>
-        <Button
-          onClick={() => {
-            const curLocale = locale()
-
-            locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
-          }}
-        >
-          {t('switchLanguage')}
-        </Button>
-      </div>
     </div>
   )
 }
@@ -339,7 +339,7 @@ const Versions = () => {
   })
 
   return (
-    <div class="flex gap-4">
+    <div class="flex items-center justify-center gap-4">
       <kbd class="kbd">{import.meta.env.version}</kbd>
       <kbd class="kbd">{backendVersion()}</kbd>
     </div>
@@ -347,12 +347,24 @@ const Versions = () => {
 }
 
 export default () => {
+  const [t] = useI18n()
+
   return (
     <div class="mx-auto flex max-w-screen-md flex-col gap-4">
+      <ConfigTitle withDivider>{t('dnsQuery')}</ConfigTitle>
+
       <DNSQueryForm />
+
+      <ConfigTitle withDivider>{t('coreConfig')}</ConfigTitle>
+
       <ConfigForm />
+
+      <ConfigTitle withDivider>{t('xdConfig')}</ConfigTitle>
+
       <ConfigForXd />
 
+      <ConfigTitle withDivider>{t('version')}</ConfigTitle>
+
       <Versions />
     </div>
   )