fix: system settings and plugin settings panels cannot be displayed (#4222)

#### What type of PR is this?

/area console
/kind bug
/milestone 2.8.x

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

修复系统设置面板和插件设置面板无法正常显示的问题,此问题由 https://github.com/halo-dev/halo/pull/4102 中升级了 `@vueuse/router` 导致。

#### Which issue(s) this PR fixes:

Fixes #4221 

#### Special notes for your reviewer:

需要测试:

1. 测试系统设置能否正常工作。
2. 测试插件的设置能否正常工作。

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

```release-note
None
```
pull/4249/head
Ryan Wang 2023-07-16 23:34:17 +08:00 committed by GitHub
parent b1a6fe3446
commit ad9b0dfb21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 25 deletions

View File

@ -37,11 +37,9 @@ const initialTabs = ref<PluginTab[]>([
const route = useRoute();
const tabs = ref<PluginTab[]>(cloneDeep(initialTabs.value));
const activeTab = useRouteQuery<string>("tab", tabs.value[0].id, {
mode: "push",
});
const activeTab = useRouteQuery<string>("tab", tabs.value[0].id);
provide<Ref<string | undefined>>("activeTab", activeTab);
provide<Ref<string>>("activeTab", activeTab);
const { data: plugin } = useQuery({
queryKey: ["plugin", route.params.name],

View File

@ -11,7 +11,6 @@ import { Toast, VButton } from "@halo-dev/components";
// types
import type { ConfigMap, Plugin, Setting } from "@halo-dev/api-client";
import { useRouteQuery } from "@vueuse/router";
import { useI18n } from "vue-i18n";
import { useQuery, useQueryClient } from "@tanstack/vue-query";
import { toRaw } from "vue";
@ -19,8 +18,7 @@ import { toRaw } from "vue";
const { t } = useI18n();
const queryClient = useQueryClient();
const group = useRouteQuery<string>("tab", undefined, { mode: "push" });
const group = inject<Ref<string>>("activeTab", ref("basic"));
const plugin = inject<Ref<Plugin | undefined>>("plugin");
const setting = inject<Ref<Setting | undefined>>("setting", ref());
const saving = ref(false);

View File

@ -18,11 +18,8 @@ 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;
@ -38,7 +35,8 @@ const tabs = ref<Tab[]>([
},
]);
const activeTab = useRouteQuery<string>("tab", undefined, { mode: "push" });
const activeTab = useRouteQuery<string>("tab", "basic");
provide<Ref<string>>("activeTab", activeTab);
const { data: setting } = useQuery({
queryKey: ["system-setting"],
@ -66,18 +64,6 @@ const { data: setting } = useQuery({
},
});
watch(
() => activeTab.value,
(value) => {
if (!value) {
router.replace({
name: "SystemSetting",
query: { tab: tabs.value[0].id },
});
}
}
);
provide<Ref<Setting | undefined>>("setting", setting);
</script>
<template>

View File

@ -7,7 +7,6 @@ import { Toast, VButton } from "@halo-dev/components";
// hooks
import { useSettingFormConvert } from "@/composables/use-setting-form";
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,7 +19,7 @@ const { t } = useI18n();
const systemConfigMapStore = useSystemConfigMapStore();
const queryClient = useQueryClient();
const group = useRouteQuery<string>("tab", undefined, { mode: "push" });
const group = inject<Ref<string>>("activeTab", ref("basic"));
const setting = inject<Ref<Setting | undefined>>("setting", ref());
const saving = ref(false);