修复已知问题 (#13)

修改国际化布局, 更规范化
调整所有示例代码为国际化

Co-authored-by: zhangpan <zhangpan@uu898.com>

Author: zhangpan-soft

src/App.vue

@@ -9,6 +9,7 @@ import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import getPageTitle from '@/utils/get-page-title'
+import { onMounted } from 'vue'
 const store = useStore()
 const i18n = useI18n()
 const route = useRoute()
@@ -19,7 +20,7 @@ store.watch(
   (value) => {
     i18n.locale.value = value
     if (route.meta && route.meta.title) {
-      document.title = getPageTitle(i18n.t(route.meta.title as string))
+      document.title = getPageTitle(i18n.t((route.meta.title as string) || ''))
     }
   }
 )

src/components/Breadcrumb/index.vue

@@ -33,7 +33,9 @@ function getBreadcrumb() {
   let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
   const first = matched[0]
   if (!isDashboard(first)) {
-    matched = [{ path: '/dashboard', meta: { title: 'route.dashboard' } } as any].concat(matched)
+    matched = [
+      { path: '/dashboard', meta: { title: 'routes.dashboard.dashboard.title' } } as any
+    ].concat(matched)
   }
   breadcrumbs.value = matched.filter((item) => {
     return item.meta && item.meta.title && item.meta.breadcrumb !== false

src/layout/components/Navbar.vue

@@ -70,15 +70,19 @@ function logout() {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(() => {
-    store.dispatch('user/logout').then(() => {
-      router.push(`/login?redirect=${route.fullPath}`)
-    })
   })
+    .then(() => {
+      store.dispatch('user/logout').then(() => {
+        router.push(`/login?redirect=${route.fullPath}`)
+      })
+    })
+    .catch(() => {
+      // pass
+    })
 }
 
 function settings() {
-  router.push('/settings')
+  router.push('/system/settings')
 }
 </script>
 

src/layout/components/Sidebar/SidebarItem.vue

@@ -39,7 +39,7 @@ const onlyOneChild = ref() // 临时变量，唯一子路由
 function hasOneShowingChild(children = [], parent: any) {
   // 需要显示的子路由数组
   const showingChildren = children.filter((item: any) => {
-    if (item.meta?.hidden) {
+    if (item?.hidden) {
       return false // 过滤不显示的子路由
     } else {
       onlyOneChild.value = item // 唯一子路由赋值（多个子路由情况 onlyOneChild 变量是用不上的）

src/permission.ts

@@ -18,9 +18,7 @@ export default {
       NProgress.start()
 
       // set page title
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      document.title = getPageTitle(i18n.global.t(to.meta.title))
+      document.title = getPageTitle(i18n.global.t((to.meta.title as string) || ''))
 
       // determine whether the user has logged in
       const hasToken = getToken()

src/plugins/lang/package/en.ts

@@ -1,24 +1,186 @@
 export default {
   // 路由国际化
-  route: {
-    dashboard: 'Dashboard',
-    document: 'Document',
-    example: 'Example',
-    table: 'Table',
-    tree: 'Tree',
-    form: 'Form',
-    nested: 'Nested',
-    menu1: 'Menu1',
-    menu1_1: 'Menu1-1',
-    menu1_2: 'Menu1-2',
-    menu1_2_1: 'Menu1-2-1',
-    menu1_2_2: 'Menu1-2-2',
-    menu1_3: 'Menu1-3',
-    menu2: 'Menu2',
-    externalLink: 'External Link',
-    test1: 'Test1',
-    system: 'System',
-    settings: 'Settings'
+  routes: {
+    dashboard: {
+      dashboard: {
+        title: 'Dashboard'
+      }
+    },
+    example: {
+      title: 'Example',
+      table: {
+        title: 'Table'
+      },
+      tree: {
+        title: 'Tree'
+      }
+    },
+    form: {
+      form: {
+        title: 'Form'
+      }
+    },
+    nested: {
+      title: 'Nested',
+      menu1: {
+        title: 'Menu1',
+        menu1_1: {
+          title: 'Menu1-1'
+        },
+        menu1_2: {
+          title: 'Menu1-2',
+          menu1_2_1: {
+            title: 'Menu1-2-1'
+          },
+          menu1_2_2: {
+            title: 'Menu1-2-2'
+          }
+        },
+        menu1_3: {
+          title: 'Menu1-3'
+        }
+      },
+      menu2: {
+        title: 'Menu2'
+      }
+    },
+    externalLink: {
+      externalLink: {
+        title: 'External Link'
+      }
+    },
+    tests: {
+      test1: {
+        title: 'Test1'
+      }
+    },
+    system: {
+      title: 'System Management',
+      settings: {
+        title: 'System Settings'
+      }
+    }
+  },
+  // 页面国际化
+  views: {
+    dashboard: {},
+    form: {
+      activityName: 'Activity Name',
+      activityType: 'Activity Type',
+      activityTime: 'Activity Time',
+      activityAddress: 'Activity Address',
+      activityZone: 'Activity Zone',
+      activityZoneOptions: [
+        {
+          value: 'beijing',
+          label: 'Beijing'
+        },
+        {
+          value: 'shanghai',
+          label: 'Shanghai'
+        }
+      ],
+      activityZonePlaceholder: 'Please select your zone',
+      activityTimePlaceholder: 'Pick a time',
+      instantDelivery: 'Instant Delivery',
+      activityTypeChecks: [
+        {
+          label: 'Online Activity',
+          value: 1
+        },
+        {
+          label: 'Promotion Activity',
+          value: 2
+        },
+        {
+          label: 'Offline Activity',
+          value: 3
+        },
+        {
+          label: 'Pure Brand Exposure',
+          value: 4
+        }
+      ],
+      resources: 'Resources',
+      resourcesOptions: [
+        {
+          value: 'Sponsor',
+          label: 'Sponsor'
+        },
+        {
+          value: 'Venue',
+          label: 'Venue'
+        }
+      ],
+      activityDesc: 'Activity Description',
+      btn: {
+        submit: 'Create',
+        cancel: 'Cancel'
+      },
+      elMessages: {
+        submit: 'submit!',
+        cancel: 'cancel!'
+      }
+    },
+    login: {
+      title: 'Login',
+      usernamePlaceholder: 'Please enter your username',
+      passwordPlaceholder: 'Please enter your password',
+      btn: {
+        login: 'Login'
+      },
+      tips: {
+        username: 'Username:admin',
+        password: 'Password:any'
+      }
+    },
+    nested: {
+      menu1: {
+        menu1_1: {},
+        menu1_2: {
+          menu1_2_1: {},
+          menu1_2_2: {}
+        },
+        menu1_3: {}
+      },
+      menu2: {}
+    },
+    system: {
+      settings: {
+        languageTitle: 'Language Preference',
+        currentLanguage: 'Current Language',
+        languageOptions: [
+          {
+            value: 'zh-cn',
+            label: 'Chinese'
+          },
+          {
+            value: 'en',
+            label: 'English'
+          }
+        ],
+        changeLanguage: 'Change Language'
+      }
+    },
+    // 表格
+    table: {
+      id: 'ID',
+      title: 'Title',
+      author: 'Author',
+      pageviews: 'Pageviews',
+      createdAt: 'Created At',
+      status: 'Status'
+    },
+    tree: {
+      filterTextPlaceholder: 'Filter keyword'
+    },
+    notFount: {
+      // The webmaster said that you can not enter this page...
+      message: 'The webmaster said that you can not enter this page...',
+      bullshitInfo:
+        'Please check that the URL you entered is correct, or click the button below to return to the homepage.',
+      bullshitReturnHome: 'Back to home'
+    }
   },
   // 登录页面国际化
   login: {
@@ -36,21 +198,6 @@ export default {
     github: 'Github',
     settings: 'Settings'
   },
-  settings: {
-    languageTitle: 'Language Preference',
-    currentLanguage: 'Current Language',
-    languageOptions: [
-      {
-        value: 'zh-cn',
-        label: 'Chinese'
-      },
-      {
-        value: 'en',
-        label: 'English'
-      }
-    ],
-    changeLanguage: 'Change Language'
-  },
   language: {
     'zh-cn': 'Chinese',
     en: 'English'