mirror of https://github.com/halo-dev/halo
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
parent
b1a6fe3446
commit
ad9b0dfb21
|
@ -37,11 +37,9 @@ const initialTabs = ref<PluginTab[]>([
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
const tabs = ref<PluginTab[]>(cloneDeep(initialTabs.value));
|
const tabs = ref<PluginTab[]>(cloneDeep(initialTabs.value));
|
||||||
const activeTab = useRouteQuery<string>("tab", tabs.value[0].id, {
|
const activeTab = useRouteQuery<string>("tab", tabs.value[0].id);
|
||||||
mode: "push",
|
|
||||||
});
|
|
||||||
|
|
||||||
provide<Ref<string | undefined>>("activeTab", activeTab);
|
provide<Ref<string>>("activeTab", activeTab);
|
||||||
|
|
||||||
const { data: plugin } = useQuery({
|
const { data: plugin } = useQuery({
|
||||||
queryKey: ["plugin", route.params.name],
|
queryKey: ["plugin", route.params.name],
|
||||||
|
|
|
@ -11,7 +11,6 @@ import { Toast, VButton } from "@halo-dev/components";
|
||||||
|
|
||||||
// types
|
// types
|
||||||
import type { ConfigMap, Plugin, Setting } from "@halo-dev/api-client";
|
import type { ConfigMap, Plugin, Setting } from "@halo-dev/api-client";
|
||||||
import { useRouteQuery } from "@vueuse/router";
|
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useQuery, useQueryClient } from "@tanstack/vue-query";
|
import { useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||||
import { toRaw } from "vue";
|
import { toRaw } from "vue";
|
||||||
|
@ -19,8 +18,7 @@ import { toRaw } from "vue";
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const queryClient = useQueryClient();
|
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 plugin = inject<Ref<Plugin | undefined>>("plugin");
|
||||||
const setting = inject<Ref<Setting | undefined>>("setting", ref());
|
const setting = inject<Ref<Setting | undefined>>("setting", ref());
|
||||||
const saving = ref(false);
|
const saving = ref(false);
|
||||||
|
|
|
@ -18,11 +18,8 @@ import type { Component } from "vue";
|
||||||
import { markRaw } from "vue";
|
import { markRaw } from "vue";
|
||||||
import SettingTab from "./tabs/Setting.vue";
|
import SettingTab from "./tabs/Setting.vue";
|
||||||
import { useRouteQuery } from "@vueuse/router";
|
import { useRouteQuery } from "@vueuse/router";
|
||||||
import { watch } from "vue";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
interface Tab {
|
interface Tab {
|
||||||
id: string;
|
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({
|
const { data: setting } = useQuery({
|
||||||
queryKey: ["system-setting"],
|
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);
|
provide<Ref<Setting | undefined>>("setting", setting);
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -7,7 +7,6 @@ import { Toast, VButton } from "@halo-dev/components";
|
||||||
|
|
||||||
// hooks
|
// hooks
|
||||||
import { useSettingFormConvert } from "@/composables/use-setting-form";
|
import { useSettingFormConvert } from "@/composables/use-setting-form";
|
||||||
import { useRouteQuery } from "@vueuse/router";
|
|
||||||
import { useSystemConfigMapStore } from "@/stores/system-configmap";
|
import { useSystemConfigMapStore } from "@/stores/system-configmap";
|
||||||
import type { ConfigMap, Setting } from "@halo-dev/api-client";
|
import type { ConfigMap, Setting } from "@halo-dev/api-client";
|
||||||
import { useQuery, useQueryClient } from "@tanstack/vue-query";
|
import { useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||||
|
@ -20,7 +19,7 @@ const { t } = useI18n();
|
||||||
const systemConfigMapStore = useSystemConfigMapStore();
|
const systemConfigMapStore = useSystemConfigMapStore();
|
||||||
const queryClient = useQueryClient();
|
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 setting = inject<Ref<Setting | undefined>>("setting", ref());
|
||||||
const saving = ref(false);
|
const saving = ref(false);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue