feat: change the tab title to the site title of the website (#5696)

#### What type of PR is this?

/kind feature
/area ui
/area core
/milestone 2.15.x

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

将 Console 与 UC 页面的标签页标题改为网站实际标题

#### How to test it?

查看 Console 页面与 UC 页面的标题页标题是否变为网站实际标题

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

Fixes #5679 

#### Does this PR introduce a user-facing change?
```release-note
将 Console 与 UC 的标签页标题改为网站实际标题
```
pull/5697/head
Takagi 2024-04-12 17:48:08 +08:00 committed by GitHub
parent 6ed8cdf5bc
commit 60f113110b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 20 additions and 23 deletions

View File

@ -85,6 +85,8 @@ public class GlobalInfoEndpoint {
private List<SocialAuthProvider> socialAuthProviders; private List<SocialAuthProvider> socialAuthProviders;
private Boolean mustVerifyEmailOnRegistration; private Boolean mustVerifyEmailOnRegistration;
private String siteTitle;
} }
@Data @Data
@ -139,6 +141,7 @@ public class GlobalInfoEndpoint {
var basic = SystemSetting.get(configMap, Basic.GROUP, Basic.class); var basic = SystemSetting.get(configMap, Basic.GROUP, Basic.class);
if (basic != null) { if (basic != null) {
info.setFavicon(basic.getFavicon()); info.setFavicon(basic.getFavicon());
info.setSiteTitle(basic.getTitle());
} }
} }

View File

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch } from "vue"; import { computed } from "vue";
import LoginForm from "@/components/login/LoginForm.vue"; import LoginForm from "@/components/login/LoginForm.vue";
import { useRouteQuery } from "@vueuse/router"; import { useRouteQuery } from "@vueuse/router";
import SignupForm from "@/components/signup/SignupForm.vue"; import SignupForm from "@/components/signup/SignupForm.vue";
@ -32,16 +32,14 @@ function handleChangeType() {
const isLoginType = computed(() => type.value !== SIGNUP_TYPE); const isLoginType = computed(() => type.value !== SIGNUP_TYPE);
// page title useTitle(
const title = useTitle(); computed(() => {
watch( const siteTitle = globalInfo.value?.siteTitle || AppName;
() => type.value,
(value) => {
const routeTitle = t( const routeTitle = t(
`core.${value === SIGNUP_TYPE ? SIGNUP_TYPE : "login"}.title` `core.${type.value === SIGNUP_TYPE ? SIGNUP_TYPE : "login"}.title`
); );
title.value = [routeTitle, AppName].join(" - "); return [routeTitle, siteTitle].join(" - ");
} })
); );
</script> </script>
<template> <template>

View File

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { RouterView, useRoute } from "vue-router"; import { RouterView, useRoute } from "vue-router";
import { computed, watch, reactive, onMounted, inject } from "vue"; import { computed, reactive, onMounted, inject } from "vue";
import { useTitle } from "@vueuse/core"; import { useTitle } from "@vueuse/core";
import { useFavicon } from "@vueuse/core"; import { useFavicon } from "@vueuse/core";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
@ -12,30 +12,25 @@ import type { FormKitConfig } from "@formkit/core";
import { i18n } from "@/locales"; import { i18n } from "@/locales";
import { AppName } from "@/constants/app"; import { AppName } from "@/constants/app";
import { useGlobalInfoStore } from "@/stores/global-info"; import { useGlobalInfoStore } from "@/stores/global-info";
import { storeToRefs } from "pinia";
const { t } = useI18n(); const { t } = useI18n();
const globalInfoStore = useGlobalInfoStore(); const { globalInfo } = storeToRefs(useGlobalInfoStore());
const route = useRoute(); const route = useRoute();
const title = useTitle(); useTitle(
computed(() => {
watch(
() => route.name,
() => {
const { title: routeTitle } = route.meta; const { title: routeTitle } = route.meta;
if (routeTitle) { const siteTitle = globalInfo.value?.siteTitle || AppName;
title.value = `${t(routeTitle)} - ${AppName}`; return [t(routeTitle || ""), siteTitle].filter(Boolean).join(" - ");
return; })
}
title.value = AppName;
}
); );
// Favicon // Favicon
const defaultFavicon = "/console/favicon.ico"; const defaultFavicon = "/console/favicon.ico";
const favicon = computed(() => { const favicon = computed(() => {
return globalInfoStore.globalInfo?.favicon || defaultFavicon; return globalInfo.value?.favicon || defaultFavicon;
}); });
useFavicon(favicon); useFavicon(favicon);

View File

@ -14,6 +14,7 @@ export interface GlobalInfo {
favicon?: string; favicon?: string;
postSlugGenerationStrategy: ModeType; postSlugGenerationStrategy: ModeType;
mustVerifyEmailOnRegistration: boolean; mustVerifyEmailOnRegistration: boolean;
siteTitle: string;
} }
export interface Info { export interface Info {