From 7b3007ec9f73024a6d8435b750c55fe06ab8fd27 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 20 Feb 2023 16:00:20 +0800
Subject: [PATCH 1/7] feat: add supports for download log file in actuator page
 (#867)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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/3188

#### Screenshots:

<img width="1676" alt="image" src="https://user-images.githubusercontent.com/21301288/220023373-44616cd3-b42a-466a-a928-9abce78cc16d.png">

#### Special notes for your reviewer:

测试方式：

1. 进入系统概览页面，点击运行日志的下载按钮。
2. 检查是否成功下载了日志文件。

#### Does this PR introduce a user-facing change?

```release-note
Console 端的系统概览页面支持下载运行日志。
```
---
 src/modules/system/actuator/Actuator.vue | 32 ++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/modules/system/actuator/Actuator.vue b/src/modules/system/actuator/Actuator.vue
index 81fbf013..09a5288b 100644
--- a/src/modules/system/actuator/Actuator.vue
+++ b/src/modules/system/actuator/Actuator.vue
@@ -85,6 +85,28 @@ const handleCopy = () => {
 
   Toast.success("复制成功");
 };
+
+const handleDownloadLogfile = () => {
+  axios
+    .get(`${import.meta.env.VITE_API_URL}/actuator/logfile`)
+    .then((response) => {
+      const blob = new Blob([response.data]);
+      const downloadElement = document.createElement("a");
+      const href = window.URL.createObjectURL(blob);
+      downloadElement.href = href;
+      downloadElement.download = `halo-log-${formatDatetime(new Date())}.log`;
+      document.body.appendChild(downloadElement);
+      downloadElement.click();
+      document.body.removeChild(downloadElement);
+      window.URL.revokeObjectURL(href);
+
+      Toast.success("下载成功");
+    })
+    .catch((e) => {
+      Toast.error("下载失败");
+      console.log("Failed to download log file.", e);
+    });
+};
 </script>
 
 <template>
@@ -233,6 +255,16 @@ const handleCopy = () => {
                 {{ info.os.name }} {{ info.os.version }} / {{ info.os.arch }}
               </dd>
             </div>
+            <div
+              class="items-center bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+            >
+              <dt class="text-sm font-medium text-gray-900">运行日志</dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                <VButton size="sm" @click="handleDownloadLogfile()">
+                  下载
+                </VButton>
+              </dd>
+            </div>
           </dl>
         </div>
       </div>

From 56e7c2f379e61839c86bebe707a6e9b786565fb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BA=90?=
 <73240868+JustinLiang522@users.noreply.github.com>
Date: Mon, 20 Feb 2023 21:14:20 +0800
Subject: [PATCH 2/7] fix: hide the ghost user from the user list (#866)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

What type of PR is this?
/kind bug

What this PR does / why we need it:
将ghost用户从用户列表隐藏。

Which issue(s) this PR fixes:
Fixes https://github.com/halo-dev/halo/issues/3317

```release-note
NONE
```
---
 src/modules/system/users/UserList.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index e59f0e0d..d095a7da 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -65,6 +65,7 @@ const userStore = useUserStore();
 const roleStore = useRoleStore();
 
 const ANONYMOUSUSER_NAME = "anonymousUser";
+const DELETEDUSER_NAME = "ghost";
 
 const handleFetchUsers = async (options?: {
   mute?: boolean;
@@ -85,7 +86,10 @@ const handleFetchUsers = async (options?: {
       page: users.value.page,
       size: users.value.size,
       keyword: keyword.value,
-      fieldSelector: [`name!=${ANONYMOUSUSER_NAME}`],
+      fieldSelector: [
+        `name!=${ANONYMOUSUSER_NAME}`,
+        `name!=${DELETEDUSER_NAME}`,
+      ],
       sort: [selectedSortItem.value?.value].filter(
         (item) => !!item
       ) as string[],

From 4dd959274818ecd49ff5868b5abd966dcb34eb6a Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 21 Feb 2023 11:14:09 +0800
Subject: [PATCH 3/7] feat: prompt to upgrade plugin when installing existing
 plugin (#871)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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/3164

#### Screenshots:

<img width="1411" alt="image" src="https://user-images.githubusercontent.com/21301288/220118697-12fbd7a7-57e6-47bb-a03b-b9c280571687.png">

#### Special notes for your reviewer:

测试方式：

1. Halo 需要切换到 https://github.com/halo-dev/halo/pull/3350 分支。
2. 在插件为 deployment 模式下启动 Halo。
3. 安装任意一个插件，然后继续上传安装相同插件。
4. 观察是否提示升级此插件。

#### Does this PR introduce a user-facing change?

```release-note
Console 端安装已存在插件时，支持提示并升级插件。
```
---
 src/components/upload/UppyUpload.vue          |  5 +++
 .../plugins/components/PluginUploadModal.vue  | 40 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/upload/UppyUpload.vue b/src/components/upload/UppyUpload.vue
index 756dadb9..8fb1d156 100644
--- a/src/components/upload/UppyUpload.vue
+++ b/src/components/upload/UppyUpload.vue
@@ -36,6 +36,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (event: "uploaded", response: SuccessResponse): void;
+  (event: "error", file, response): void;
 }>();
 
 const uppy = computed(() => {
@@ -72,6 +73,10 @@ uppy.value.on("upload-success", (_, response: SuccessResponse) => {
   emit("uploaded", response);
 });
 
+uppy.value.on("upload-error", (file, _, response) => {
+  emit("error", file, response);
+});
+
 onUnmounted(() => {
   uppy.value.close({ reason: "unmount" });
 });
diff --git a/src/modules/system/plugins/components/PluginUploadModal.vue b/src/modules/system/plugins/components/PluginUploadModal.vue
index 63fe9794..f8ef69d4 100644
--- a/src/modules/system/plugins/components/PluginUploadModal.vue
+++ b/src/modules/system/plugins/components/PluginUploadModal.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { VModal, Dialog } from "@halo-dev/components";
+import { VModal, Dialog, Toast } from "@halo-dev/components";
 import UppyUpload from "@/components/upload/UppyUpload.vue";
 import { apiClient } from "@/utils/api-client";
 import type { Plugin } from "@halo-dev/api-client";
 import { computed, ref, watch } from "vue";
-import type { SuccessResponse } from "@uppy/core";
+import type { SuccessResponse, ErrorResponse } from "@uppy/core";
+import type { UppyFile } from "@uppy/utils";
 
 const props = withDefaults(
   defineProps<{
@@ -76,6 +77,40 @@ const onUploaded = async (response: SuccessResponse) => {
   });
 };
 
+interface PluginInstallationErrorResponse {
+  detail: string;
+  instance: string;
+  pluginName: string;
+  requestId: string;
+  status: number;
+  timestamp: string;
+  title: string;
+  type: string;
+}
+
+const PLUGIN_ALREADY_EXISTS_TYPE =
+  "https://halo.run/probs/plugin-alreay-exists";
+
+const onError = (file: UppyFile<unknown>, response: ErrorResponse) => {
+  const body = response.body as PluginInstallationErrorResponse;
+  if (body.type === PLUGIN_ALREADY_EXISTS_TYPE) {
+    Dialog.info({
+      title: "插件已存在",
+      description: "当前安装的插件已存在，是否升级？",
+      onConfirm: async () => {
+        await apiClient.plugin.upgradePlugin({
+          name: body.pluginName,
+          file: file.data as File,
+        });
+
+        Toast.success("升级成功");
+
+        window.location.reload();
+      },
+    });
+  }
+};
+
 watch(
   () => props.visible,
   (newValue) => {
@@ -106,6 +141,7 @@ watch(
       :endpoint="endpoint"
       auto-proceed
       @uploaded="onUploaded"
+      @error="onError"
     />
   </VModal>
 </template>

From 43702ed126e1bd2f4272d2b55f5182862012b66f Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 21 Feb 2023 11:36:10 +0800
Subject: [PATCH 4/7] feat: add supports for display database info in actuator
 page (#872)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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/3263

#### Screenshots:

<img width="1413" alt="image" src="https://user-images.githubusercontent.com/21301288/220119998-dcf58a6e-cbe5-46ed-9fda-67d0ce5b85c1.png">

#### Special notes for your reviewer:

测试方式：

1. Halo 需要切换到 https://github.com/halo-dev/halo/pull/3351 分支。
2. 进入系统概览页面，检查是否有数据库信息。

#### Does this PR introduce a user-facing change?

```release-note
Console 端的系统概览页面支持显示数据库信息
```
---
 src/modules/system/actuator/Actuator.vue   | 9 +++++++++
 src/modules/system/actuator/types/index.ts | 6 ++++++
 2 files changed, 15 insertions(+)

diff --git a/src/modules/system/actuator/Actuator.vue b/src/modules/system/actuator/Actuator.vue
index 09a5288b..ea40e281 100644
--- a/src/modules/system/actuator/Actuator.vue
+++ b/src/modules/system/actuator/Actuator.vue
@@ -78,6 +78,7 @@ const handleCopy = () => {
 - 构建时间：${formatDatetime(info.value?.build?.time)}
 - Git Commit：${info.value?.git?.commit.id}
 - Java：${info.value?.java.runtime.name} / ${info.value?.java.runtime.version}
+- 数据库：${info.value?.database.name} / ${info.value?.database.version}
 - 操作系统：${info.value?.os.name} / ${info.value?.os.version}
   `;
 
@@ -247,6 +248,14 @@ const handleDownloadLogfile = () => {
                 {{ info.java.runtime.name }} / {{ info.java.runtime.version }}
               </dd>
             </div>
+            <div
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+            >
+              <dt class="text-sm font-medium text-gray-900">数据库</dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                {{ [info.database.name, info.database.version].join(" / ") }}
+              </dd>
+            </div>
             <div
               class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
             >
diff --git a/src/modules/system/actuator/types/index.ts b/src/modules/system/actuator/types/index.ts
index 7cccd5b1..e6cb4cda 100644
--- a/src/modules/system/actuator/types/index.ts
+++ b/src/modules/system/actuator/types/index.ts
@@ -12,6 +12,12 @@ export interface Info {
   build?: Build;
   java: Java;
   os: Os;
+  database: Database;
+}
+
+export interface Database {
+  name: string;
+  version: string;
 }
 
 export interface Commit {

From cf34b86540d81bedfcd08810200d6cb5c5ea4564 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 21 Feb 2023 11:46:10 +0800
Subject: [PATCH 5/7] perf: improve the layout of post tags (#869)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

优化文章管理列表的标签布局，改为单独占用一行。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2926
Fixes https://github.com/halo-dev/halo/issues/3301

#### Screenshots:

<img width="1408" alt="image" src="https://user-images.githubusercontent.com/21301288/220048436-aed6e0b1-8fc7-4365-98c9-db4aef29205e.png">

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端文章管理的标签布局
```
---
 .../contents/posts/DeletedPostList.vue        | 56 +++++++--------
 src/modules/contents/posts/PostList.vue       | 72 ++++++++++---------
 2 files changed, 66 insertions(+), 62 deletions(-)

diff --git a/src/modules/contents/posts/DeletedPostList.vue b/src/modules/contents/posts/DeletedPostList.vue
index 7e8022b0..f81677b4 100644
--- a/src/modules/contents/posts/DeletedPostList.vue
+++ b/src/modules/contents/posts/DeletedPostList.vue
@@ -347,37 +347,37 @@ function handleClearKeyword() {
               </template>
               <template #start>
                 <VEntityField :title="post.post.spec.title" width="27rem">
-                  <template #extra>
-                    <VSpace class="mt-1 sm:mt-0">
-                      <PostTag
-                        v-for="(tag, tagIndex) in post.tags"
-                        :key="tagIndex"
-                        :tag="tag"
-                        route
-                      ></PostTag>
-                    </VSpace>
-                  </template>
                   <template #description>
-                    <VSpace class="flex-wrap !gap-y-1">
-                      <p
-                        v-if="post.categories.length"
-                        class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
-                      >
-                        分类：<span
-                          v-for="(category, categoryIndex) in post.categories"
-                          :key="categoryIndex"
-                          class="cursor-pointer hover:text-gray-900"
+                    <div class="flex flex-col gap-1.5">
+                      <VSpace class="flex-wrap !gap-y-1">
+                        <p
+                          v-if="post.categories.length"
+                          class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
                         >
-                          {{ category.spec.displayName }}
+                          分类：<span
+                            v-for="(category, categoryIndex) in post.categories"
+                            :key="categoryIndex"
+                            class="cursor-pointer hover:text-gray-900"
+                          >
+                            {{ category.spec.displayName }}
+                          </span>
+                        </p>
+                        <span class="text-xs text-gray-500">
+                          访问量 {{ post.stats.visit || 0 }}
                         </span>
-                      </p>
-                      <span class="text-xs text-gray-500">
-                        访问量 {{ post.stats.visit || 0 }}
-                      </span>
-                      <span class="text-xs text-gray-500">
-                        评论 {{ post.stats.totalComment || 0 }}
-                      </span>
-                    </VSpace>
+                        <span class="text-xs text-gray-500">
+                          评论 {{ post.stats.totalComment || 0 }}
+                        </span>
+                      </VSpace>
+                      <VSpace v-if="post.tags.length" class="flex-wrap">
+                        <PostTag
+                          v-for="(tag, tagIndex) in post.tags"
+                          :key="tagIndex"
+                          :tag="tag"
+                          route
+                        ></PostTag>
+                      </VSpace>
+                    </div>
                   </template>
                 </VEntityField>
               </template>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 000c596d..4f16a08e 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -783,12 +783,6 @@ const hasFilters = computed(() => {
                       >
                         <VStatusDot state="success" animate />
                       </RouterLink>
-                      <PostTag
-                        v-for="(tag, tagIndex) in post.tags"
-                        :key="tagIndex"
-                        :tag="tag"
-                        route
-                      ></PostTag>
                       <a
                         v-if="post.post.status?.permalink"
                         target="_blank"
@@ -801,35 +795,45 @@ const hasFilters = computed(() => {
                     </VSpace>
                   </template>
                   <template #description>
-                    <VSpace class="flex-wrap !gap-y-1">
-                      <p
-                        v-if="post.categories.length"
-                        class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
-                      >
-                        分类：<a
-                          v-for="(category, categoryIndex) in post.categories"
-                          :key="categoryIndex"
-                          :href="category.status?.permalink"
-                          :title="category.status?.permalink"
-                          target="_blank"
-                          class="cursor-pointer hover:text-gray-900"
+                    <div class="flex flex-col gap-1.5">
+                      <VSpace class="flex-wrap !gap-y-1">
+                        <p
+                          v-if="post.categories.length"
+                          class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
                         >
-                          {{ category.spec.displayName }}
-                        </a>
-                      </p>
-                      <span class="text-xs text-gray-500">
-                        访问量 {{ post.stats.visit || 0 }}
-                      </span>
-                      <span class="text-xs text-gray-500">
-                        评论 {{ post.stats.totalComment || 0 }}
-                      </span>
-                      <span
-                        v-if="post.post.spec.pinned"
-                        class="text-xs text-gray-500"
-                      >
-                        已置顶
-                      </span>
-                    </VSpace>
+                          分类：<a
+                            v-for="(category, categoryIndex) in post.categories"
+                            :key="categoryIndex"
+                            :href="category.status?.permalink"
+                            :title="category.status?.permalink"
+                            target="_blank"
+                            class="cursor-pointer hover:text-gray-900"
+                          >
+                            {{ category.spec.displayName }}
+                          </a>
+                        </p>
+                        <span class="text-xs text-gray-500">
+                          访问量 {{ post.stats.visit || 0 }}
+                        </span>
+                        <span class="text-xs text-gray-500">
+                          评论 {{ post.stats.totalComment || 0 }}
+                        </span>
+                        <span
+                          v-if="post.post.spec.pinned"
+                          class="text-xs text-gray-500"
+                        >
+                          已置顶
+                        </span>
+                      </VSpace>
+                      <VSpace v-if="post.tags.length" class="flex-wrap">
+                        <PostTag
+                          v-for="(tag, tagIndex) in post.tags"
+                          :key="tagIndex"
+                          :tag="tag"
+                          route
+                        ></PostTag>
+                      </VSpace>
+                    </div>
                   </template>
                 </VEntityField>
               </template>

From d396337d5537bbe939aa0444c0ca0781fffbb14d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 21 Feb 2023 11:56:10 +0800
Subject: [PATCH 6/7] perf: add supports for storing navbar position (#865)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

支持保存侧板滚动条位置，防止切换路由时侧边栏的抖动。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3240

#### Screenshots:

before:

![2023-02-20 12 12 05](https://user-images.githubusercontent.com/21301288/220007834-12658cf2-e8a8-42ea-93b1-2c58419edbac.gif)


after:

![2023-02-20 12 11 19](https://user-images.githubusercontent.com/21301288/220007742-58471b69-cfd1-4576-babd-5516d2c0de1d.gif)


#### Special notes for your reviewer:

测试方式：

1. 调整浏览器高度，让侧边栏菜单区域出现滚动条。
2. 测试点击底部的任意菜单项，跳转页面之后，观察滚动条是否与之前的位置保持一致。

#### Does this PR introduce a user-facing change?


```release-note
Console 端侧边栏滚动条支持缓存位置，防止切换路由时重置滚动条位置。
```
---
 src/layouts/BasicLayout.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index cc2629e7..ff0f4031 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -18,7 +18,7 @@ import {
   useRouter,
   type RouteRecordRaw,
 } from "vue-router";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import axios from "axios";
 import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
 import LoginModal from "@/components/login/LoginModal.vue";
@@ -28,6 +28,8 @@ import { useRoleStore } from "@/stores/role";
 import { hasPermission } from "@/utils/permission";
 import { useUserStore } from "@/stores/user";
 import { rbacAnnotations } from "@/constants/annotations";
+import { useScroll } from "@vueuse/core";
+import { defineStore } from "pinia";
 
 const route = useRoute();
 const router = useRouter();
@@ -189,6 +191,31 @@ const generateMenus = () => {
 };
 
 onMounted(generateMenus);
+
+// store scroll position
+const navbarScroller = ref();
+const { y } = useScroll(navbarScroller);
+
+const useNavbarScrollStore = defineStore("navbar", {
+  state: () => ({
+    y: 0,
+  }),
+});
+
+const navbarScrollStore = useNavbarScrollStore();
+
+watch(
+  () => y.value,
+  () => {
+    navbarScrollStore.y = y.value;
+  }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    y.value = navbarScrollStore.y;
+  });
+});
 </script>
 
 <template>
@@ -203,7 +230,7 @@ onMounted(generateMenus);
           />
         </a>
       </div>
-      <div class="flex-1 overflow-y-auto">
+      <div ref="navbarScroller" class="flex-1 overflow-y-auto">
         <div class="px-3">
           <div
             class="flex cursor-pointer items-center rounded bg-gray-100 p-2 text-gray-400 transition-all hover:text-gray-900"

From c03ea64bf25de1b4b573627e86f6323f00ae861e Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 21 Feb 2023 13:16:10 +0800
Subject: [PATCH 7/7] feat: provide Chinese translation for the system's role
 template (#870)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 端为系统内提供的角色模板提供中文翻译
```
---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 53 ++++++++++++++
 src/locales/index.ts                          | 14 ++++
 src/locales/lang/zh.ts                        | 73 +++++++++++++++++++
 src/main.ts                                   |  2 +
 src/modules/system/roles/RoleDetail.vue       | 21 ++++--
 .../roles/components/RoleEditingModal.vue     | 23 ++++--
 7 files changed, 177 insertions(+), 10 deletions(-)
 create mode 100644 src/locales/index.ts
 create mode 100644 src/locales/lang/zh.ts

diff --git a/package.json b/package.json
index 80f4bff0..0c3e8838 100644
--- 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"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f0bbb23..9b9faaff 100644
--- 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:
diff --git a/src/locales/index.ts b/src/locales/index.ts
new file mode 100644
index 00000000..c67c56a8
--- /dev/null
+++ 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;
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
new file mode 100644
index 00000000..0168a0cd
--- /dev/null
+++ 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;
diff --git a/src/main.ts b/src/main.ts
index 1809e970..7944ecaa 100644
--- 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) {
diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index 76ce43e5..d91fc968 100644
--- 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">
                           {{
-                            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>
diff --git a/src/modules/system/roles/components/RoleEditingModal.vue b/src/modules/system/roles/components/RoleEditingModal.vue
index 6cdbdaa2..98175fc5 100644
--- 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">
                           {{
-                            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>