feat(project): support dynamic title

apps/antd-view/package.json

@@ -35,6 +35,7 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@vueuse/core": "^10.9.0",
     "ant-design-vue": "^4.2.1",
     "axios": "^1.7.1",
     "dayjs": "^1.11.11",

apps/antd-view/src/router/guard/index.ts

@@ -1,7 +1,9 @@
 import type { Router } from 'vue-router';
 
+import { $t } from '@vben/locales';
 import { preference } from '@vben/preference';
 import { startProgress, stopProgress } from '@vben/utils';
+import { useTitle } from '@vueuse/core';
 
 import { configAccessGuard } from './access';
 
@@ -26,6 +28,12 @@ function configCommonGuard(router: Router) {
     if (preference.pageProgress) {
       stopProgress();
     }
+
+    // 动态修改标题
+    if (preference.dynamicTitle) {
+      const { title } = to.meta;
+      useTitle(`${$t(title)} - ${preference.appName}`);
+    }
   });
 }
 

apps/antd-view/vite.config.mts

@@ -18,7 +18,7 @@ export default defineConfig({
         { name: 'vue-demi' },
       ],
     },
-    visualizer: true,
+    visualizer: false,
   },
   vite: {
     server: {

packages/@vben-core/shared/design-tokens/src/dark/index.scss

@@ -1,4 +1,4 @@
-.dark {
+:root.dark {
   /* 基础背景颜色颜色 */
 
   /* --color-background: 240 6% 18%; */

packages/@vben-core/shared/typings/src/preference.ts

@@ -55,6 +55,8 @@ interface Preference {
   copyright: string;
   /** 应用默认头像 */
   defaultAvatar: string;
+  /** 开启动态标题 */
+  dynamicTitle: boolean;
   /** 页脚是否固定 */
   footerFixed: boolean;
   /** 页脚是否可见 */

packages/@vben-core/shared/typings/src/tools.ts

@@ -1,7 +1,7 @@
 import { type ComputedRef, type MaybeRef } from 'vue';
 
 /**
- * 深度部分类型
+ * 深层递归所有属性为可选
  */
 type DeepPartial<T> = T extends object
   ? {
@@ -9,6 +9,13 @@ type DeepPartial<T> = T extends object
     }
   : T;
 
+/**
+ * 深层递归所有属性为只读
+ */
+type DeepReadonly<T> = {
+  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
+};
+
 /**
  * 任意类型的异步函数
  */
@@ -78,6 +85,7 @@ export {
   type AnyNormalFunction,
   type AnyPromiseFunction,
   type DeepPartial,
+  type DeepReadonly,
   type IntervalHandle,
   type MaybeComputedRef,
   type MaybeReadonlyRef,

packages/@vben-core/uikit/shadcn-ui/src/components/logo/logo.vue

@@ -69,6 +69,7 @@ const logoClass = computed(() => {
       />
       <span v-if="!collapse" class="truncate text-nowrap">
         {{ text }}
+        <!-- <span class="text-primary ml-1 align-super text-[smaller]">Pro</span> -->
       </span>
     </a>
   </div>

packages/business/common-ui/package.json

@@ -42,6 +42,9 @@
       }
     }
   },
+  "peerDependencies": {
+    "@vben-core/design": "workspace:*"
+  },
   "dependencies": {
     "@vben-core/design": "workspace:*",
     "@vben-core/iconify": "workspace:*",

packages/business/common-ui/src/preference/blocks/general/general.vue

@@ -5,12 +5,14 @@ import { $t } from '@vben/locales';
 import { staticPreference } from '@vben/preference';
 
 import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
 
 defineOptions({
   name: 'PreferenceGeneralConfig',
 });
 
 const locale = defineModel<string>('locale');
+const dynamicTitle = defineModel<boolean>('dynamicTitle');
 
 const localeItems: SelectListItem[] = staticPreference.supportLanguages.map(
   (item) => ({
@@ -24,4 +26,7 @@ const localeItems: SelectListItem[] = staticPreference.supportLanguages.map(
   <SelectItem v-model="locale" :items="localeItems">
     {{ $t('preference.language') }}
   </SelectItem>
+  <SwitchItem v-model="dynamicTitle">
+    {{ $t('preference.dynamic-title') }}
+  </SwitchItem>
 </template>

packages/business/common-ui/src/preference/preference-widget.vue

@@ -46,6 +46,7 @@ function updateLocale(value: string) {
     :footer-fixed="preference.footerFixed"
     :header-mode="preference.headerMode"
     :theme="preference.theme"
+    :dynamic-title="preference.dynamicTitle"
     :breadcrumb-hide-only-one="preference.breadcrumbHideOnlyOne"
     :page-transition="preference.pageTransition"
     :page-progress="preference.pageProgress"
@@ -55,6 +56,7 @@ function updateLocale(value: string) {
     :side-collapse-show-title="preference.sideCollapseShowTitle"
     :page-transition-enable="preference.pageTransitionEnable"
     @update:navigation-style="(value) => handleUpdate('navigationStyle', value)"
+    @update:dynamic-title="(value) => handleUpdate('dynamicTitle', value)"
     @update:tabs-icon="(value) => handleUpdate('tabsIcon', value)"
     @update:side-collapse="(value) => handleUpdate('sideCollapse', value)"
     @update:locale="updateLocale"

packages/business/common-ui/src/preference/preference.vue

@@ -40,6 +40,7 @@ withDefaults(defineProps<{ colorPrimaryPresets: string[] }>(), {
 
 const theme = defineModel<string>('theme');
 const locale = defineModel<string>('locale');
+const dynamicTitle = defineModel<boolean>('dynamicTitle');
 const semiDarkMenu = defineModel<boolean>('semiDarkMenu');
 const breadcrumbVisible = defineModel<boolean>('breadcrumbVisible');
 const breadcrumbIcon = defineModel<boolean>('breadcrumbIcon');
@@ -210,7 +211,10 @@ function handleReset() {
           </template>
           <template #general>
             <Block :title="$t('preference.general')">
-              <General v-model:locale="locale" />
+              <General
+                v-model:locale="locale"
+                v-model:dynamic-title="dynamicTitle"
+              />
             </Block>
             <Block :title="$t('preference.navigation-menu')">
               <Navigation

packages/locales/src/langs/en-US.yaml

@@ -69,6 +69,7 @@ preference:
   gray-mode: Gray Mode
   animation: Animation
   language: Language
+  dynamic-title: Dynamic Title
   normal: Normal
   rounded: Rounded
   collapse: Collpase Menu

packages/locales/src/langs/zh-CN.yaml

@@ -51,6 +51,7 @@ preference:
   dark: 深色
   dark-menu: 深色菜单
   language: 语言
+  dynamic-title: 动态标题
   collapse: 折叠菜单
   collapse-show-title: 显示菜单名
   wide: 流式

packages/preference/src/config.ts

@@ -16,6 +16,7 @@ const defaultPreference: Preference = {
   copyright: 'Copyright © 2024 Vben Admin PRO',
   defaultAvatar:
     'https://cdn.jsdelivr.net/gh/vbenjs/vben-cdn-static@0.1.2/vben-admin/pro-avatar.webp',
+  dynamicTitle: true,
   footerFixed: true,
   footerVisible: true,
   headerMode: 'fixed',

pnpm-lock.yaml

@@ -126,6 +126,9 @@ importers:
       '@vben/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@vueuse/core':
+        specifier: ^10.9.0
+        version: 10.9.0(vue@3.4.27(typescript@5.4.5))
       ant-design-vue:
         specifier: ^4.2.1
         version: 4.2.1(vue@3.4.27(typescript@5.4.5))