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 halo-dev/halo#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 端为系统内提供的角色模板提供中文翻译
```

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"
   },

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;

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;

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) {

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">
                           {{
-                            role.metadata.annotations?.[
-                              rbacAnnotations.DISPLAY_NAME
-                            ]
+                            $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>

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">
                           {{
-                            roleTemplate.metadata.annotations?.[
-                              rbacAnnotations.DISPLAY_NAME
-                            ]
+                            $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>