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
Ryan Wang 2024-09-01 22:07:34 +08:00 committed by GitHub
parent 9a0ebdad25
commit f6747327e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 63 additions and 23 deletions

View File

@ -1,5 +1,4 @@
<script lang="ts" setup>
import H2WarningAlert from "@/components/alerts/H2WarningAlert.vue";
import LocaleChange from "@/components/common/LocaleChange.vue";
import { useGlobalInfoStore } from "@/stores/global-info";
import type { SystemInitializationRequest } from "@halo-dev/api-client";
@ -51,8 +50,6 @@ const inputClasses = {
<IconLogo class="mb-8 flex-none" />
<div class="flex w-72 flex-col">
<H2WarningAlert class="mb-3" />
<FormKit
id="setup-form"
v-model="formState"

View File

@ -1,6 +1,8 @@
<script lang="ts" setup>
import H2WarningAlert from "@/components/alerts/H2WarningAlert.vue";
import { useGlobalInfoStore } from "@/stores/global-info";
import { useUserStore } from "@/stores/user";
import type { Info } from "@/types";
import {
consoleApiClient,
coreApiClient,
@ -10,9 +12,10 @@ import {
type SinglePageRequest,
type Tag,
} from "@halo-dev/api-client";
import { VLoading } from "@halo-dev/components";
import { useMutation } from "@tanstack/vue-query";
import { onMounted, ref } from "vue";
import { VButton, VLoading } from "@halo-dev/components";
import { useMutation, useQuery } from "@tanstack/vue-query";
import axios from "axios";
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import category from "./setup-data/category.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 { 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 () => {
await globalInfoStore.fetchGlobalInfo();
if (
globalInfoStore.globalInfo &&
globalInfoStore.globalInfo.dataInitialized === false &&
!userStore.isAnonymous
) {
setupInitialData();
if (userStore.isAnonymous) {
window.location.href = "/";
return;
}
router.push({ name: "Dashboard" });
if (globalInfoStore.globalInfo?.dataInitialized) {
router.push({ name: "Dashboard" });
return;
}
});
</script>
<template>
<div class="flex h-screen flex-col items-center justify-center">
<VLoading />
<div v-if="processing" class="text-xs text-gray-600">
{{ $t("core.setup.operations.setup_initial_data.loading") }}
</div>
<template v-if="info?.database.name.startsWith('H2') && !processing">
<H2WarningAlert class="max-w-md">
<template #actions>
<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>
</template>

View File

@ -26,5 +26,8 @@ const { data: info } = useQuery<Info>({
<template #description>
{{ $t("core.components.h2_warning_alert.description") }}
</template>
<template #actions>
<slot name="actions" />
</template>
</VAlert>
</template>

View File

@ -1785,6 +1785,7 @@ core:
revoke: Revoke
disable: Disable
enable: Enable
continue: Continue
radio:
"yes": "Yes"
"no": "No"

View File

@ -1694,6 +1694,7 @@ core:
revoke: 撤销
disable: 禁用
enable: 启用
continue: 继续
radio:
"yes":
"no":

View File

@ -1651,6 +1651,7 @@ core:
revoke: 撤銷
disable: 禁用
enable: 启用
continue: 繼續
radio:
"yes":
"no":