refactor: simplify the logic of the system settings tab (#4196)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.8.x

#### What this PR does / why we need it:

简化系统设置页面，选项卡的状态管理逻辑，放弃动态路由的模式，改为使用路由查询参数代替。

原由：https://github.com/halo-dev/halo/pull/4041#issuecomment-1622921084

#### Special notes for your reviewer:

需要测试：

1. 测试系统设置页面能否正常工作即可。

#### Does this PR introduce a user-facing change?

```release-note
重构 Console 端系统设置页面的路由结构
```

console/src/modules/system/settings/SystemSettings.vue

@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+// core libs
+import { ref, type Ref, provide } from "vue";
+
+// components
+import {
+  VCard,
+  VPageHeader,
+  VTabbar,
+  IconSettings,
+} from "@halo-dev/components";
+import type { Setting, SettingForm } from "@halo-dev/api-client";
+import { useQuery } from "@tanstack/vue-query";
+import { apiClient } from "@/utils/api-client";
+import { useI18n } from "vue-i18n";
+import type { Raw } from "vue";
+import type { Component } from "vue";
+import { markRaw } from "vue";
+import SettingTab from "./tabs/Setting.vue";
+import { useRouteQuery } from "@vueuse/router";
+import { watch } from "vue";
+import { useRouter } from "vue-router";
+
+const { t } = useI18n();
+const router = useRouter();
+
+interface Tab {
+  id: string;
+  label: string;
+  component: Raw<Component>;
+}
+
+const tabs = ref<Tab[]>([
+  {
+    id: "loading",
+    label: t("core.common.status.loading"),
+    component: markRaw(SettingTab),
+  },
+]);
+
+const activeTab = useRouteQuery<string>("tab", undefined, { mode: "push" });
+
+const { data: setting } = useQuery({
+  queryKey: ["system-setting"],
+  queryFn: async () => {
+    const { data } = await apiClient.extension.setting.getv1alpha1Setting({
+      name: "system",
+    });
+    return data;
+  },
+  async onSuccess(data) {
+    if (data) {
+      const { forms } = data.spec;
+      tabs.value = forms.map((item: SettingForm) => {
+        return {
+          id: item.group,
+          label: item.label || "",
+          component: markRaw(SettingTab),
+        };
+      });
+
+      if (!activeTab.value) {
+        activeTab.value = tabs.value[0].id;
+      }
+    }
+  },
+});
+
+watch(
+  () => activeTab.value,
+  (value) => {
+    if (!value) {
+      router.replace({
+        name: "SystemSetting",
+        query: { tab: tabs.value[0].id },
+      });
+    }
+  }
+);
+
+provide<Ref<Setting | undefined>>("setting", setting);
+</script>
+<template>
+  <VPageHeader :title="$t('core.setting.title')">
+    <template #icon>
+      <IconSettings class="mr-2 self-center" />
+    </template>
+  </VPageHeader>
+
+  <div class="m-0 md:m-4">
+    <VCard :body-class="['!p-0']">
+      <template #header>
+        <VTabbar
+          v-model:active-id="activeTab"
+          :items="tabs.map((item) => ({ id: item.id, label: item.label }))"
+          class="w-full !rounded-none"
+          type="outline"
+        ></VTabbar>
+      </template>
+      <div class="bg-white">
+        <template v-for="tab in tabs" :key="tab.id">
+          <component :is="tab.component" v-if="activeTab === tab.id" />
+        </template>
+      </div>
+    </VCard>
+  </div>
+</template>

console/src/modules/system/settings/layouts/SystemSettingsLayout.vue

@@ -1,140 +0,0 @@
-<script lang="ts" setup>
-// core libs
-import { nextTick, ref, watch, type Ref, provide } from "vue";
-import { useRoute, useRouter } from "vue-router";
-
-// types
-import BasicLayout from "@/layouts/BasicLayout.vue";
-
-// components
-import {
-  VCard,
-  VPageHeader,
-  VTabbar,
-  IconSettings,
-  VLoading,
-} from "@halo-dev/components";
-import type { Setting, SettingForm } from "@halo-dev/api-client";
-import { useQuery } from "@tanstack/vue-query";
-import { apiClient } from "@/utils/api-client";
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
-
-interface SettingTab {
-  id: string;
-  label: string;
-  route: {
-    name: string;
-    params?: Record<string, string>;
-  };
-}
-
-const tabs = ref<SettingTab[]>([
-  {
-    id: "loading",
-    label: t("core.common.status.loading"),
-    route: { name: "SystemSetting" },
-  },
-]);
-const activeTab = ref(tabs.value[0].id);
-
-const route = useRoute();
-const router = useRouter();
-
-const { data: setting } = useQuery({
-  queryKey: ["system-setting"],
-  queryFn: async () => {
-    const { data } = await apiClient.extension.setting.getv1alpha1Setting({
-      name: "system",
-    });
-    return data;
-  },
-  async onSuccess(data) {
-    if (data) {
-      const { forms } = data.spec;
-      tabs.value = forms.map((item: SettingForm) => {
-        return {
-          id: item.group,
-          label: item.label || "",
-          route: {
-            name: "SystemSetting",
-            params: {
-              group: item.group,
-            },
-          },
-        };
-      });
-    }
-
-    await nextTick();
-
-    handleTriggerTabChange();
-  },
-});
-
-provide<Ref<Setting | undefined>>("setting", setting);
-
-const handleTabChange = (id: string) => {
-  const tab = tabs.value.find((item) => item.id === id);
-  if (tab) {
-    activeTab.value = tab.id;
-    router.push(tab.route);
-  }
-};
-
-const handleTriggerTabChange = () => {
-  const tab = tabs.value.find((tab) => {
-    return (
-      tab.route.name === route.name &&
-      tab.route.params?.group === route.params.group
-    );
-  });
-
-  if (tab) {
-    activeTab.value = tab.id;
-    return;
-  }
-
-  activeTab.value = tabs.value[0].id;
-};
-
-watch([() => route.name, () => route.params], async () => {
-  handleTriggerTabChange();
-});
-</script>
-<template>
-  <BasicLayout>
-    <VPageHeader :title="$t('core.setting.title')">
-      <template #icon>
-        <IconSettings class="mr-2 self-center" />
-      </template>
-    </VPageHeader>
-
-    <div class="m-0 md:m-4">
-      <VCard :body-class="['!p-0']">
-        <template #header>
-          <VTabbar
-            v-model:active-id="activeTab"
-            :items="tabs.map((item) => ({ id: item.id, label: item.label }))"
-            class="w-full !rounded-none"
-            type="outline"
-            @change="handleTabChange"
-          ></VTabbar>
-        </template>
-        <div class="bg-white">
-          <RouterView :key="activeTab" v-slot="{ Component }">
-            <template v-if="Component">
-              <Suspense>
-                <component :is="Component"></component>
-                <template #fallback>
-                  <VLoading />
-                </template>
-              </Suspense>
-            </template>
-          </RouterView>
-        </div>
-      </VCard>
-    </div>
-  </BasicLayout>
-</template>

console/src/modules/system/settings/module.ts

@@ -1,31 +1,30 @@
 import { definePlugin } from "@halo-dev/console-shared";
-import SystemSettingsLayout from "./layouts/SystemSettingsLayout.vue";
-import SystemSetting from "./SystemSetting.vue";
+import SystemSettings from "./SystemSettings.vue";
 import { IconSettings } from "@halo-dev/components";
 import { markRaw } from "vue";
+import BasicLayout from "@/layouts/BasicLayout.vue";
 
 export default definePlugin({
   components: {},
   routes: [
     {
       path: "/settings",
-      component: SystemSettingsLayout,
-      redirect: "/settings/basic",
-      meta: {
-        title: "core.setting.title",
-        permissions: ["system:settings:view"],
-        menu: {
-          name: "core.sidebar.menu.items.settings",
-          group: "system",
-          icon: markRaw(IconSettings),
-          priority: 2,
-        },
-      },
+      component: BasicLayout,
       children: [
         {
-          path: ":group",
+          path: "",
           name: "SystemSetting",
-          component: SystemSetting,
+          component: SystemSettings,
+          meta: {
+            title: "core.setting.title",
+            permissions: ["system:settings:view"],
+            menu: {
+              name: "core.sidebar.menu.items.settings",
+              group: "system",
+              icon: markRaw(IconSettings),
+              priority: 2,
+            },
+          },
         },
       ],
     },

console/src/modules/system/settings/tabs/Setting.vue

@@ -7,7 +7,7 @@ import { Toast, VButton } from "@halo-dev/components";
 
 // hooks
 import { useSettingFormConvert } from "@/composables/use-setting-form";
-import { useRouteParams } from "@vueuse/router";
+import { useRouteQuery } from "@vueuse/router";
 import { useSystemConfigMapStore } from "@/stores/system-configmap";
 import type { ConfigMap, Setting } from "@halo-dev/api-client";
 import { useQuery, useQueryClient } from "@tanstack/vue-query";
@@ -20,11 +20,11 @@ const { t } = useI18n();
 const systemConfigMapStore = useSystemConfigMapStore();
 const queryClient = useQueryClient();
 
-const saving = ref(false);
-const group = useRouteParams<string>("group");
+const group = useRouteQuery<string>("tab", undefined, { mode: "push" });
 const setting = inject<Ref<Setting | undefined>>("setting", ref());
+const saving = ref(false);
 
-const { data: configMap, suspense } = useQuery<ConfigMap>({
+const { data: configMap } = useQuery<ConfigMap>({
   queryKey: ["system-configMap"],
   queryFn: async () => {
     const { data } = await apiClient.extension.configMap.getv1alpha1ConfigMap({
@@ -64,8 +64,6 @@ const handleSaveConfigMap = async () => {
 
   saving.value = false;
 };
-
-await suspense();
 </script>
 <template>
   <Transition mode="out-in" name="fade">