From ab2df12cce94cee4b8db6915aee145062cf163bb Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 6 Jan 2022 15:58:42 +0800
Subject: [PATCH] doc: update document title, close #5121

---
 site/index.html           |  2 +-
 site/src/layouts/Menu.vue | 24 ++++++++++++++++++++++--
 site/src/router/index.js  |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/site/index.html b/site/index.html
index 6a97a2bbd..3f37c8729 100644
--- a/site/index.html
+++ b/site/index.html
@@ -11,7 +11,7 @@
       name="description"
       content="An enterprise-class UI components based on Ant Design and Vue"
     />
-    <title>Ant Design Vue</title>
+    <title>Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js</title>
     <meta
       name="keywords"
       content="ant design vue,ant-design-vue,ant-design-vue admin,ant design pro,vue ant design,vue ant design pro,vue ant design admin,ant design vue官网,ant design vue中文文档,ant design vue文档"
diff --git a/site/src/layouts/Menu.vue b/site/src/layouts/Menu.vue
index c84e11092..afb5027f7 100644
--- a/site/src/layouts/Menu.vue
+++ b/site/src/layouts/Menu.vue
@@ -42,16 +42,36 @@
 </template>
 <script lang="ts">
 import { getLocalizedPathname } from '../utils/util';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, watch } from 'vue';
 import { useRoute } from 'vue-router';
 export default defineComponent({
   name: 'Menu',
   props: ['menus', 'isZhCN', 'activeMenuItem'],
-  setup() {
+  setup(props) {
     const route = useRoute();
     const showOverview = computed(() => {
       return route.path.indexOf('/components') === 0;
     });
+    watch(
+      [() => props.activeMenuItem, () => props.isZhCN, () => props.menus],
+      () => {
+        const menus = props.menus.reduce(
+          (pre, current) => [...pre, current, ...(current.children || [])],
+          [{ path: '/components/overview', title: '组件总览', enTitle: 'Components Overview' }],
+        );
+        const item = menus.find(m => m.path === props.activeMenuItem);
+        let title = props.isZhCN
+          ? 'Ant Design Vue - 一套企业级 Vue 组件库'
+          : 'Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js';
+        if (item && item.title) {
+          title = props.isZhCN
+            ? `${item.subtitle || ''} ${item.title} - Ant Design Vue`
+            : `${item.enTitle || item.title} - Ant Design Vue`;
+        }
+        document.title = title.trim();
+      },
+      { immediate: true, flush: 'post' },
+    );
     return {
       getLocalizedPathname,
       showOverview,
diff --git a/site/src/router/index.js b/site/src/router/index.js
index c4f0f9e6c..1e38c73bf 100644
--- a/site/src/router/index.js
+++ b/site/src/router/index.js
@@ -162,7 +162,7 @@ const routes = [
     ],
   },
   { path: '/debugger', component: () => import('../../debugger') },
-  { path: '/:lang(.*)', redirect: '/components/overview/' },
+  { path: '/:lang(.*)', redirect: '/components/overview' },
 ];
 
 export default createRouter({