From 36bb28cd0ee6a39f3a08e3f38d48e0f79a42e271 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 22 Sep 2022 12:16:11 +0800
Subject: [PATCH] feat: update page title when route change

Close https://github.com/halo-dev/halo/issues/2431
---
 src/App.vue                                | 20 +++++++++++++++++++-
 src/modules/contents/attachments/module.ts |  3 +++
 src/modules/contents/comments/module.ts    |  3 +++
 src/modules/contents/pages/module.ts       |  9 +++++++++
 src/modules/contents/posts/module.ts       | 12 ++++++++++++
 src/modules/dashboard/module.ts            |  3 +++
 src/modules/interface/menus/module.ts      |  3 +++
 src/modules/interface/themes/module.ts     |  9 +++++++++
 src/modules/system/plugins/module.ts       |  7 +++++++
 src/modules/system/roles/module.ts         |  2 ++
 src/modules/system/settings/module.ts      |  3 +++
 src/modules/system/users/module.ts         |  7 +++++++
 12 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 580a6501..953d184c 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/modules/contents/attachments/module.ts b/src/modules/contents/attachments/module.ts
index 440f48fe..3ed44de4 100644
--- a/src/modules/contents/attachments/module.ts
+++ b/src/modules/contents/attachments/module.ts
@@ -15,6 +15,9 @@ export default definePlugin({
           path: "",
           name: "Attachments",
           component: AttachmentList,
+          meta: {
+            title: "附件",
+          },
         },
       ],
     },
diff --git a/src/modules/contents/comments/module.ts b/src/modules/contents/comments/module.ts
index c8fa93d0..8f6c3304 100644
--- a/src/modules/contents/comments/module.ts
+++ b/src/modules/contents/comments/module.ts
@@ -14,6 +14,9 @@ export default definePlugin({
           path: "",
           name: "Comments",
           component: CommentList,
+          meta: {
+            title: "评论",
+          },
         },
       ],
     },
diff --git a/src/modules/contents/pages/module.ts b/src/modules/contents/pages/module.ts
index 128f65f3..6b994a87 100644
--- a/src/modules/contents/pages/module.ts
+++ b/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: "页面编辑",
+                  },
                 },
               ],
             },
diff --git a/src/modules/contents/posts/module.ts b/src/modules/contents/posts/module.ts
index c99b2509..712cd7a0 100644
--- a/src/modules/contents/posts/module.ts
+++ b/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: "文章标签",
+              },
             },
           ],
         },
diff --git a/src/modules/dashboard/module.ts b/src/modules/dashboard/module.ts
index ea93b28d..955de3e1 100644
--- a/src/modules/dashboard/module.ts
+++ b/src/modules/dashboard/module.ts
@@ -33,6 +33,9 @@ export default definePlugin({
           path: "dashboard",
           name: "Dashboard",
           component: Dashboard,
+          meta: {
+            title: "仪表盘",
+          },
         },
       ],
     },
diff --git a/src/modules/interface/menus/module.ts b/src/modules/interface/menus/module.ts
index f1848faf..602b6331 100644
--- a/src/modules/interface/menus/module.ts
+++ b/src/modules/interface/menus/module.ts
@@ -14,6 +14,9 @@ export default definePlugin({
           path: "",
           name: "Menus",
           component: Menus,
+          meta: {
+            title: "菜单",
+          },
         },
       ],
     },
diff --git a/src/modules/interface/themes/module.ts b/src/modules/interface/themes/module.ts
index bb345b69..feec9957 100644
--- a/src/modules/interface/themes/module.ts
+++ b/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: "可视化编辑",
+          },
         },
       ],
     },
diff --git a/src/modules/system/plugins/module.ts b/src/modules/system/plugins/module.ts
index 72a9319a..a0472624 100644
--- a/src/modules/system/plugins/module.ts
+++ b/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: "插件设置",
+              },
             },
           ],
         },
diff --git a/src/modules/system/roles/module.ts b/src/modules/system/roles/module.ts
index f6cead65..62fa37c7 100644
--- a/src/modules/system/roles/module.ts
+++ b/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"],
           },
         },
diff --git a/src/modules/system/settings/module.ts b/src/modules/system/settings/module.ts
index c4630eaf..93e5c5d1 100644
--- a/src/modules/system/settings/module.ts
+++ b/src/modules/system/settings/module.ts
@@ -16,6 +16,9 @@ export default definePlugin({
           path: ":group",
           name: "SystemSetting",
           component: SystemSetting,
+          meta: {
+            title: "系统设置",
+          },
         },
       ],
     },
diff --git a/src/modules/system/users/module.ts b/src/modules/system/users/module.ts
index d4f69430..646764d7 100644
--- a/src/modules/system/users/module.ts
+++ b/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: "个人令牌",
+              },
             },
           ],
         },