chore：优化系统配置加载与切换问题

src/views/system/config/index.vue

@@ -1,27 +1,46 @@
 <template>
   <div class="gi_page">
     <a-card class="general-card" title="系统配置">
-      <a-tabs default-active-key="1" type="rounded">
-        <a-tab-pane key="1" title="基础配置">
-          <BasicSetting />
-        </a-tab-pane>
-        <a-tab-pane key="2" title="邮件配置">
-          <MailSetting />
-        </a-tab-pane>
-        <a-tab-pane key="3" title="安全配置">
-          <SecuritySetting />
-        </a-tab-pane>
+      <a-tabs v-model:active-key="activeKey" hide-content type="rounded" @change="change">
+        <a-tab-pane key="1" title="基础配置" />
+        <a-tab-pane key="2" title="邮件配置" />
+        <a-tab-pane key="3" title="安全配置" />
       </a-tabs>
+      <keep-alive>
+        <component :is="PanMap[activeKey]" />
+      </keep-alive>
     </a-card>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
 import BasicSetting from './components/BasicSetting.vue'
 import MailSetting from './components/MailSetting.vue'
 import SecuritySetting from './components/SecuritySetting.vue'
 
 defineOptions({ name: 'SystemConfig' })
+const PanMap: Record<string, Component> = {
+  1: BasicSetting,
+  2: MailSetting,
+  3: SecuritySetting
+}
+const route = useRoute()
+const router = useRouter()
+const activeKey = ref('1')
+watch(
+  () => route.query,
+  () => {
+    if (route.query.tabKey) {
+      activeKey.value = String(route.query.tabKey)
+    }
+  },
+  { immediate: true }
+)
+const change = (key: string | number) => {
+  activeKey.value = key as string
+  router.replace({ path: route.path, query: { tabKey: key } })
+}
 </script>
 
 <style scoped lang="less">