feat: provide Chinese translation for the system's role template (#870)

#### What type of PR is this? /kind feature #### What this PR does / why we need it: 为系统内提供的角色模板提供中文翻译。 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2848 #### Screenshots: <img width="1414" alt="image" src="https://user-images.githubusercontent.com/21301288/220069394-6af6922b-28b2-4818-ab58-dcfb69b6b53b.png"> #### Special notes for your reviewer: 测试方式： 1. 需要 `pnpm install` 2. 检查角色详情页面和新建页面的角色模板描述是否为中文。 #### Does this PR introduce a user-facing change? ```release-note Console 端为系统内提供的角色模板提供中文翻译 ```
2023-02-21 13:16:10 +08:00 · 2023-02-21 13:16:10 +08:00 · c03ea64bf2
parent d396337d55
commit c03ea64bf2
7 changed files with 177 additions and 10 deletions
--- a/package.json
+++ b/package.json
@ -78,6 +78,7 @@
    "transliteration": "^2.3.5",
    "vue": "^3.2.45",
    "vue-grid-layout": "3.0.0-beta1",
+    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6",
    "vuedraggable": "^4.1.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -98,6 +98,7 @@ importers:
      vitest: ^0.25.3
      vue: ^3.2.45
      vue-grid-layout: 3.0.0-beta1
+      vue-i18n: ^9.2.2
      vue-router: ^4.1.6
      vue-tsc: ^1.0.24
      vuedraggable: ^4.1.0
@ -147,6 +148,7 @@ importers:
      transliteration: 2.3.5
      vue: 3.2.45
      vue-grid-layout: 3.0.0-beta1_farzh4kmmmdsqeu7trbjloi3zi
+      vue-i18n: 9.2.2_vue@3.2.45
      vue-router: 4.1.6_vue@3.2.45
      vuedraggable: 4.1.0_vue@3.2.45
    devDependencies:
@ -2632,6 +2634,44 @@ packages:
    resolution: {integrity: sha512-sZAW08CkqgvqRjUIaLRjScjObcCzN9D75yekLA21EClYAZIhi4A+GEt2z/WqOCOksTaEPLYmQyhkpXcboc0LhQ==}
    dev: false

+  /@intlify/core-base/9.2.2:
+    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/devtools-if': 9.2.2
+      '@intlify/message-compiler': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+    dev: false
+
+  /@intlify/devtools-if/9.2.2:
+    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+    dev: false
+
+  /@intlify/message-compiler/9.2.2:
+    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+      source-map: 0.6.1
+    dev: false
+
+  /@intlify/shared/9.2.2:
+    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    engines: {node: '>= 14'}
+    dev: false
+
+  /@intlify/vue-devtools/9.2.2:
+    resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+    dev: false
+
  /@istanbuljs/schema/0.1.3:
    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
    engines: {node: '>=8'}
@ -11029,6 +11069,19 @@ packages:
      - '@interactjs/utils'
    dev: false

+  /vue-i18n/9.2.2_vue@3.2.45:
+    resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+      '@vue/devtools-api': 6.4.5
+      vue: 3.2.45
+    dev: false
+
  /vue-resize/2.0.0-alpha.1_vue@3.2.45:
    resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
    peerDependencies:
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@ -0,0 +1,14 @@
+import { createI18n } from "vue-i18n";
+import zh from "./lang/zh";
+
+const messages = {
+  zh,
+};
+
+const i18n = createI18n({
+  legacy: false,
+  locale: "zh",
+  messages,
+});
+
+export default i18n;
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@ -0,0 +1,73 @@
+const zh = {
+  rbac: {
+    "Attachments Management": "附件",
+    "Attachment Manage": "附件管理",
+    "Attachment View": "附件查看",
+    "role-template-view-attachments": "附件查看",
+
+    "Comments Management": "评论",
+    "Comment Manage": "评论管理",
+    "Comment View": "评论查看",
+    "role-template-view-comments": "评论查看",
+
+    "ConfigMaps Management": "配置",
+    "ConfigMap Manage": "配置管理",
+    "ConfigMap View": "配置查看",
+    "role-template-view-configmaps": "配置查看",
+
+    "Menus Management": "菜单",
+    "Menu Manage": "菜单管理",
+    "Menu View": "菜单查看",
+    "role-template-view-menus": "菜单查看",
+
+    "Permissions Management": "权限",
+    "Permissions Manage": "权限管理",
+    "Permissions View": "权限查看",
+    "role-template-view-permissions": "权限查看",
+    "role-template-manage-permissions": "权限管理",
+
+    "Plugins Management": "插件",
+    "Plugin Manage": "插件管理",
+    "Plugin View": "插件查看",
+    "role-template-view-plugins": "插件查看",
+
+    "Posts Management": "文章",
+    "Post Manage": "文章管理",
+    "Post View": "文章查看",
+    "role-template-view-posts": "文章查看",
+    "role-template-manage-snaphosts": "版本管理",
+    "role-template-view-snaphosts": "版本查看",
+    "role-template-manage-tags": "标签管理",
+    "role-template-view-tags": "标签查看",
+    "role-template-manage-categories": "分类管理",
+    "role-template-view-categories": "分类查看",
+
+    "Roles Management": "角色",
+    "Role Manage": "角色管理",
+    "Role View": "角色查看",
+    "role-template-view-roles": "角色查看",
+
+    "Settings Management": "设置表单",
+    "Setting Manage": "设置表单管理",
+    "Setting View": "设置表单查看",
+    "role-template-view-settings": "设置表单查看",
+
+    "SinglePages Management": "页面",
+    "SinglePage Manage": "页面管理",
+    "SinglePage View": "页面查看",
+    "role-template-view-singlepages": "页面查看",
+
+    "Themes Management": "主题",
+    "Theme Manage": "主题管理",
+    "Theme View": "主题查看",
+    "role-template-view-themes": "主题查看",
+
+    "Users Management": "用户",
+    "User manage": "用户管理",
+    "User View": "用户查看",
+    "role-template-view-users": "用户查看",
+    "role-template-change-password": "修改密码",
+  },
+};
+
+export default zh;
--- a/src/main.ts
+++ b/src/main.ts
@ -20,12 +20,14 @@ import { useThemeStore } from "./stores/theme";
 import { useSystemStatesStore } from "./stores/system-states";
 import { useUserStore } from "./stores/user";
 import { useSystemConfigMapStore } from "./stores/system-configmap";
+import i18n from "./locales";

 const app = createApp(App);

 setupComponents(app);

 app.use(createPinia());
+app.use(i18n);

 function registerModule(pluginModule: PluginModule, core: boolean) {
  if (pluginModule.components) {
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@ -249,7 +249,7 @@ onMounted(() => {
            >
              <dt class="text-sm font-medium text-gray-900">
                <div>
-                  {{ group.module }}
+                  {{ $t(`rbac.${group.module}`, group.module as string) }}
                </div>
                <div
                  v-if="
@ -300,9 +300,16 @@ onMounted(() => {
                      <div class="flex flex-1 flex-col gap-y-3">
                        <span class="font-medium text-gray-900">
                          {{
+                            $t(
+                              `rbac.${
                                role.metadata.annotations?.[
                                  rbacAnnotations.DISPLAY_NAME
                                ]
+                              }`,
+                              role.metadata.annotations?.[
+                                rbacAnnotations.DISPLAY_NAME
+                              ] as string
+                            )
                          }}
                        </span>
                        <span
@ -319,7 +326,11 @@ onMounted(() => {
                              role.metadata.annotations?.[
                                rbacAnnotations.DEPENDENCIES
                              ]
-                            ).join(", ")
+                            )
+                              .map((item: string) =>
+                                $t(`rbac.${item}`, item as string)
+                              )
+                              .join("，")
                          }}
                        </span>
                      </div>
--- a/src/modules/system/roles/components/RoleEditingModal.vue
+++ b/src/modules/system/roles/components/RoleEditingModal.vue
@ -156,7 +156,9 @@ const handleResetForm = () => {
              class="flex flex-col gap-3 bg-white py-5 first:pt-0"
            >
              <dt class="text-sm font-medium text-gray-900">
-                <div>{{ group.module }}</div>
+                <div>
+                  {{ $t(`rbac.${group.module}`, group.module as string) }}
+                </div>
                <div
                  v-if="
                    group.roles.length &&
@ -197,9 +199,16 @@ const handleResetForm = () => {
                      <div class="flex flex-1 flex-col gap-y-3">
                        <span class="font-medium text-gray-900">
                          {{
+                            $t(
+                              `rbac.${
                                roleTemplate.metadata.annotations?.[
                                  rbacAnnotations.DISPLAY_NAME
                                ]
+                              }`,
+                              roleTemplate.metadata.annotations?.[
+                                rbacAnnotations.DISPLAY_NAME
+                              ] as string
+                            )
                          }}
                        </span>
                        <span
@ -216,7 +225,11 @@ const handleResetForm = () => {
                              roleTemplate.metadata.annotations?.[
                                rbacAnnotations.DEPENDENCIES
                              ]
-                            ).join(", ")
+                            )
+                              .map((item: string) =>
+                                $t(`rbac.${item}`, item as string)
+                              )
+                              .join("，")
                          }}
                        </span>
                      </div>