mirror of https://github.com/halo-dev/halo
refactor: add warning alert for H2 database on data initialization page (#6564)
#### What type of PR is this? /area ui /kind improvement /milestone 2.19.0 #### What this PR does / why we need it: 将 H2 数据库使用警告放置在数据初始化页面,之前放在初始化表单页面无法正确判断,因为没有登录,无法调用 /actuator/info 接口获取数据库数据。 <img width="638" alt="image" src="https://github.com/user-attachments/assets/18868104-321a-4146-a893-5babf4573146"> Fixes https://github.com/halo-dev/halo/issues/6561 #### Special notes for your reviewer: 需要使用此 PR 测试使用 H2 数据库全新安装,观察是否在数据初始化页面有 H2 数据库的使用提示。 #### Does this PR introduce a user-facing change? ```release-note None ```pull/6566/head
parent
9a0ebdad25
commit
f6747327e9
|
@ -1,5 +1,4 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import H2WarningAlert from "@/components/alerts/H2WarningAlert.vue";
|
|
||||||
import LocaleChange from "@/components/common/LocaleChange.vue";
|
import LocaleChange from "@/components/common/LocaleChange.vue";
|
||||||
import { useGlobalInfoStore } from "@/stores/global-info";
|
import { useGlobalInfoStore } from "@/stores/global-info";
|
||||||
import type { SystemInitializationRequest } from "@halo-dev/api-client";
|
import type { SystemInitializationRequest } from "@halo-dev/api-client";
|
||||||
|
@ -51,8 +50,6 @@ const inputClasses = {
|
||||||
<IconLogo class="mb-8 flex-none" />
|
<IconLogo class="mb-8 flex-none" />
|
||||||
|
|
||||||
<div class="flex w-72 flex-col">
|
<div class="flex w-72 flex-col">
|
||||||
<H2WarningAlert class="mb-3" />
|
|
||||||
|
|
||||||
<FormKit
|
<FormKit
|
||||||
id="setup-form"
|
id="setup-form"
|
||||||
v-model="formState"
|
v-model="formState"
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import H2WarningAlert from "@/components/alerts/H2WarningAlert.vue";
|
||||||
import { useGlobalInfoStore } from "@/stores/global-info";
|
import { useGlobalInfoStore } from "@/stores/global-info";
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
|
import type { Info } from "@/types";
|
||||||
import {
|
import {
|
||||||
consoleApiClient,
|
consoleApiClient,
|
||||||
coreApiClient,
|
coreApiClient,
|
||||||
|
@ -10,9 +12,10 @@ import {
|
||||||
type SinglePageRequest,
|
type SinglePageRequest,
|
||||||
type Tag,
|
type Tag,
|
||||||
} from "@halo-dev/api-client";
|
} from "@halo-dev/api-client";
|
||||||
import { VLoading } from "@halo-dev/components";
|
import { VButton, VLoading } from "@halo-dev/components";
|
||||||
import { useMutation } from "@tanstack/vue-query";
|
import { useMutation, useQuery } from "@tanstack/vue-query";
|
||||||
import { onMounted, ref } from "vue";
|
import axios from "axios";
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import category from "./setup-data/category.json";
|
import category from "./setup-data/category.json";
|
||||||
import menuItems from "./setup-data/menu-items.json";
|
import menuItems from "./setup-data/menu-items.json";
|
||||||
|
@ -128,38 +131,72 @@ async function setupInitialData() {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
processing.value = false;
|
|
||||||
|
// Reload page to fetch plugin's bundle files
|
||||||
|
window.location.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
await globalInfoStore.fetchGlobalInfo();
|
|
||||||
|
|
||||||
// Reload page to fetch plugin's bundle files
|
|
||||||
window.location.reload();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const { data: info } = useQuery<Info>({
|
||||||
|
queryKey: ["system-info"],
|
||||||
|
queryFn: async () => {
|
||||||
|
const { data } = await axios.get<Info>(`/actuator/info`, {
|
||||||
|
withCredentials: true,
|
||||||
|
});
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
retry: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => info.value,
|
||||||
|
(value) => {
|
||||||
|
if (!value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!value.database.name.startsWith("H2")) {
|
||||||
|
setupInitialData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await globalInfoStore.fetchGlobalInfo();
|
await globalInfoStore.fetchGlobalInfo();
|
||||||
|
|
||||||
if (
|
if (userStore.isAnonymous) {
|
||||||
globalInfoStore.globalInfo &&
|
window.location.href = "/";
|
||||||
globalInfoStore.globalInfo.dataInitialized === false &&
|
|
||||||
!userStore.isAnonymous
|
|
||||||
) {
|
|
||||||
setupInitialData();
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
router.push({ name: "Dashboard" });
|
if (globalInfoStore.globalInfo?.dataInitialized) {
|
||||||
|
router.push({ name: "Dashboard" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex h-screen flex-col items-center justify-center">
|
<div class="flex h-screen flex-col items-center justify-center">
|
||||||
<VLoading />
|
<template v-if="info?.database.name.startsWith('H2') && !processing">
|
||||||
<div v-if="processing" class="text-xs text-gray-600">
|
<H2WarningAlert class="max-w-md">
|
||||||
{{ $t("core.setup.operations.setup_initial_data.loading") }}
|
<template #actions>
|
||||||
</div>
|
<VButton type="secondary" size="sm" @click="setupInitialData()">
|
||||||
|
{{ $t("core.common.buttons.continue") }}
|
||||||
|
</VButton>
|
||||||
|
</template>
|
||||||
|
</H2WarningAlert>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="processing">
|
||||||
|
<VLoading />
|
||||||
|
<div class="text-xs text-gray-600">
|
||||||
|
{{ $t("core.setup.operations.setup_initial_data.loading") }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -26,5 +26,8 @@ const { data: info } = useQuery<Info>({
|
||||||
<template #description>
|
<template #description>
|
||||||
{{ $t("core.components.h2_warning_alert.description") }}
|
{{ $t("core.components.h2_warning_alert.description") }}
|
||||||
</template>
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<slot name="actions" />
|
||||||
|
</template>
|
||||||
</VAlert>
|
</VAlert>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1785,6 +1785,7 @@ core:
|
||||||
revoke: Revoke
|
revoke: Revoke
|
||||||
disable: Disable
|
disable: Disable
|
||||||
enable: Enable
|
enable: Enable
|
||||||
|
continue: Continue
|
||||||
radio:
|
radio:
|
||||||
"yes": "Yes"
|
"yes": "Yes"
|
||||||
"no": "No"
|
"no": "No"
|
||||||
|
|
|
@ -1694,6 +1694,7 @@ core:
|
||||||
revoke: 撤销
|
revoke: 撤销
|
||||||
disable: 禁用
|
disable: 禁用
|
||||||
enable: 启用
|
enable: 启用
|
||||||
|
continue: 继续
|
||||||
radio:
|
radio:
|
||||||
"yes": 是
|
"yes": 是
|
||||||
"no": 否
|
"no": 否
|
||||||
|
|
|
@ -1651,6 +1651,7 @@ core:
|
||||||
revoke: 撤銷
|
revoke: 撤銷
|
||||||
disable: 禁用
|
disable: 禁用
|
||||||
enable: 启用
|
enable: 启用
|
||||||
|
continue: 繼續
|
||||||
radio:
|
radio:
|
||||||
"yes": 是
|
"yes": 是
|
||||||
"no": 否
|
"no": 否
|
||||||
|
|
Loading…
Reference in New Issue