feat: update page title when route change

Close https://github.com/halo-dev/halo/issues/2431

src/App.vue

@@ -1,6 +1,24 @@
 <script lang="ts" setup>
-import { RouterView } from "vue-router";
+import { RouterView, useRoute } from "vue-router";
 import { VDialogProvider } from "@halo-dev/components";
+import { watch } from "vue";
+import { useTitle } from "@vueuse/core";
+
+const AppName = "Halo";
+const route = useRoute();
+const title = useTitle();
+
+watch(
+  () => route.name,
+  () => {
+    const { title: routeTitle } = route.meta;
+    if (routeTitle) {
+      title.value = `${routeTitle} - ${AppName}`;
+      return;
+    }
+    title.value = AppName;
+  }
+);
 </script>
 
 <template>

src/modules/contents/attachments/module.ts

@@ -15,6 +15,9 @@ export default definePlugin({
           path: "",
           name: "Attachments",
           component: AttachmentList,
+          meta: {
+            title: "附件",
+          },
         },
       ],
     },

src/modules/contents/comments/module.ts

@@ -14,6 +14,9 @@ export default definePlugin({
           path: "",
           name: "Comments",
           component: CommentList,
+          meta: {
+            title: "评论",
+          },
         },
       ],
     },

src/modules/contents/pages/module.ts

@@ -25,6 +25,9 @@ export default definePlugin({
               path: "",
               name: "FunctionalPages",
               component: FunctionalPageList,
+              meta: {
+                title: "功能页面",
+              },
             },
           ],
         },
@@ -40,6 +43,9 @@ export default definePlugin({
                   path: "",
                   name: "SinglePages",
                   component: SinglePageList,
+                  meta: {
+                    title: "自定义页面",
+                  },
                 },
               ],
             },
@@ -51,6 +57,9 @@ export default definePlugin({
                   path: "",
                   name: "SinglePageEditor",
                   component: SinglePageEditor,
+                  meta: {
+                    title: "页面编辑",
+                  },
                 },
               ],
             },

src/modules/contents/posts/module.ts

@@ -17,11 +17,17 @@ export default definePlugin({
           path: "",
           name: "Posts",
           component: PostList,
+          meta: {
+            title: "文章",
+          },
         },
         {
           path: "editor",
           name: "PostEditor",
           component: PostEditor,
+          meta: {
+            title: "文章编辑",
+          },
         },
         {
           path: "categories",
@@ -31,6 +37,9 @@ export default definePlugin({
               path: "",
               name: "Categories",
               component: CategoryList,
+              meta: {
+                title: "文章分类",
+              },
             },
           ],
         },
@@ -42,6 +51,9 @@ export default definePlugin({
               path: "",
               name: "Tags",
               component: TagList,
+              meta: {
+                title: "文章标签",
+              },
             },
           ],
         },

src/modules/dashboard/module.ts

@@ -33,6 +33,9 @@ export default definePlugin({
           path: "dashboard",
           name: "Dashboard",
           component: Dashboard,
+          meta: {
+            title: "仪表盘",
+          },
         },
       ],
     },

src/modules/interface/menus/module.ts

@@ -14,6 +14,9 @@ export default definePlugin({
           path: "",
           name: "Menus",
           component: Menus,
+          meta: {
+            title: "菜单",
+          },
         },
       ],
     },

src/modules/interface/themes/module.ts

@@ -17,11 +17,17 @@ export default definePlugin({
           path: "",
           name: "ThemeDetail",
           component: ThemeDetail,
+          meta: {
+            title: "主题",
+          },
         },
         {
           path: "settings/:group",
           name: "ThemeSetting",
           component: ThemeSetting,
+          meta: {
+            title: "主题设置",
+          },
         },
       ],
     },
@@ -33,6 +39,9 @@ export default definePlugin({
           path: "",
           name: "ThemeVisual",
           component: Visual,
+          meta: {
+            title: "可视化编辑",
+          },
         },
       ],
     },

src/modules/system/plugins/module.ts

@@ -22,6 +22,7 @@ export default definePlugin({
               name: "Plugins",
               component: PluginList,
               meta: {
+                title: "插件",
                 permissions: ["system:plugins:view"],
               },
             },
@@ -35,11 +36,17 @@ export default definePlugin({
               path: "detail",
               name: "PluginDetail",
               component: PluginDetail,
+              meta: {
+                title: "插件详情",
+              },
             },
             {
               path: "settings/:group",
               name: "PluginSetting",
               component: PluginSetting,
+              meta: {
+                title: "插件设置",
+              },
             },
           ],
         },

src/modules/system/roles/module.ts

@@ -15,6 +15,7 @@ export default definePlugin({
           name: "Roles",
           component: RoleList,
           meta: {
+            title: "角色",
             permissions: ["system:roles:view"],
           },
         },
@@ -23,6 +24,7 @@ export default definePlugin({
           name: "RoleDetail",
           component: RoleDetail,
           meta: {
+            title: "角色详情",
             permissions: ["system:roles:view"],
           },
         },

src/modules/system/settings/module.ts

@@ -16,6 +16,9 @@ export default definePlugin({
           path: ":group",
           name: "SystemSetting",
           component: SystemSetting,
+          meta: {
+            title: "系统设置",
+          },
         },
       ],
     },

src/modules/system/users/module.ts

@@ -28,6 +28,7 @@ export default definePlugin({
               name: "Users",
               component: UserList,
               meta: {
+                title: "用户",
                 permissions: ["system:users:view"],
               },
             },
@@ -42,11 +43,17 @@ export default definePlugin({
               path: "detail",
               name: "UserDetail",
               component: UserDetail,
+              meta: {
+                title: "用户详情",
+              },
             },
             {
               path: "tokens",
               name: "PersonalAccessTokens",
               component: PersonalAccessTokens,
+              meta: {
+                title: "个人令牌",
+              },
             },
           ],
         },