From d92bb4398e09c57a5a394e91a7372e4c6d23c5cd Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 1 Jul 2024 14:43:17 +0800
Subject: [PATCH] refactor: refine extension settings page (#6231)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.17.x

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

完善插件扩展设置页面：

1. 完善 i18n。
2. 将入口移动至插件页面右上角的操作按钮区域。

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

```release-note
None
```
---
 .../plugins/PluginExtensionPointSettings.vue  | 22 +++++++++++--
 .../modules/system/plugins/PluginList.vue     | 32 +++++++++++++------
 .../ExtensionDefinitionMultiInstanceView.vue  |  6 +++-
 .../ExtensionDefinitionSingletonView.vue      |  6 +++-
 .../modules/system/plugins/module.ts          |  8 ++---
 ui/src/locales/en.yaml                        |  9 ++++++
 ui/src/locales/zh-CN.yaml                     |  9 ++++++
 ui/src/locales/zh-TW.yaml                     |  9 ++++++
 8 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/ui/console-src/modules/system/plugins/PluginExtensionPointSettings.vue b/ui/console-src/modules/system/plugins/PluginExtensionPointSettings.vue
index 829ead635..6debe0cf9 100644
--- a/ui/console-src/modules/system/plugins/PluginExtensionPointSettings.vue
+++ b/ui/console-src/modules/system/plugins/PluginExtensionPointSettings.vue
@@ -1,6 +1,11 @@
 <script lang="ts" setup>
 import { coreApiClient } from "@halo-dev/api-client";
-import { IconSettings, VCard, VPageHeader } from "@halo-dev/components";
+import {
+  IconSettings,
+  VButton,
+  VCard,
+  VPageHeader,
+} from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 import { useRouteQuery } from "@vueuse/router";
 import { computed, watch } from "vue";
@@ -41,10 +46,15 @@ watch(
 </script>
 
 <template>
-  <VPageHeader title="扩展点设置">
+  <VPageHeader :title="$t('core.plugin.extension-settings.title')">
     <template #icon>
       <IconSettings class="mr-2 self-center" />
     </template>
+    <template #actions>
+      <VButton size="sm" @click="$router.back()">
+        {{ $t("core.common.buttons.back") }}
+      </VButton>
+    </template>
   </VPageHeader>
 
   <div class="m-0 md:m-4">
@@ -57,7 +67,13 @@ watch(
           <div
             class="sticky top-0 z-10 flex h-12 items-center border-b bg-white px-4"
           >
-            <h2 class="font-semibold text-gray-900">扩展点定义</h2>
+            <h2 class="font-semibold text-gray-900">
+              {{
+                $t(
+                  "core.plugin.extension-settings.extension-point-definition.title"
+                )
+              }}
+            </h2>
           </div>
           <ul
             class="box-border h-full w-full divide-y divide-gray-100 overflow-auto"
diff --git a/ui/console-src/modules/system/plugins/PluginList.vue b/ui/console-src/modules/system/plugins/PluginList.vue
index 28daed86d..688a0fd5e 100644
--- a/ui/console-src/modules/system/plugins/PluginList.vue
+++ b/ui/console-src/modules/system/plugins/PluginList.vue
@@ -10,6 +10,7 @@ import {
   IconAddCircle,
   IconPlug,
   IconRefreshLine,
+  IconSettings,
   VButton,
   VCard,
   VDropdown,
@@ -160,16 +161,27 @@ onMounted(() => {
       <IconPlug class="mr-2 self-center" />
     </template>
     <template #actions>
-      <VButton
-        v-permission="['system:plugins:manage']"
-        type="secondary"
-        @click="pluginInstallationModalVisible = true"
-      >
-        <template #icon>
-          <IconAddCircle class="h-full w-full" />
-        </template>
-        {{ $t("core.common.buttons.install") }}
-      </VButton>
+      <VSpace>
+        <VButton
+          size="sm"
+          @click="$router.push({ name: 'PluginExtensionPointSettings' })"
+        >
+          <template #icon>
+            <IconSettings class="h-full w-full" />
+          </template>
+          {{ $t("core.plugin.actions.extension-point-settings") }}
+        </VButton>
+        <VButton
+          v-permission="['system:plugins:manage']"
+          type="secondary"
+          @click="pluginInstallationModalVisible = true"
+        >
+          <template #icon>
+            <IconAddCircle class="h-full w-full" />
+          </template>
+          {{ $t("core.common.buttons.install") }}
+        </VButton>
+      </VSpace>
     </template>
   </VPageHeader>
 
diff --git a/ui/console-src/modules/system/plugins/components/extension-points/ExtensionDefinitionMultiInstanceView.vue b/ui/console-src/modules/system/plugins/components/extension-points/ExtensionDefinitionMultiInstanceView.vue
index 88eb84419..8334a8f86 100644
--- a/ui/console-src/modules/system/plugins/components/extension-points/ExtensionDefinitionMultiInstanceView.vue
+++ b/ui/console-src/modules/system/plugins/components/extension-points/ExtensionDefinitionMultiInstanceView.vue
@@ -25,7 +25,11 @@ const { data: extensionDefinitions, isLoading } = useExtensionDefinitionFetch(
       appear
       name="fade"
     >
-      <VEmpty title="当前没有扩展点实现"></VEmpty>
+      <VEmpty
+        :title="
+          $t('core.plugin.extension-settings.extension-definition.empty.title')
+        "
+      ></VEmpty>
     </Transition>
     <Transition v-else name="fade" appear>
       <ul
diff --git a/ui/console-src/modules/system/plugins/components/extension-points/ExtensionDefinitionSingletonView.vue b/ui/console-src/modules/system/plugins/components/extension-points/ExtensionDefinitionSingletonView.vue
index fab9fff1a..e1457d028 100644
--- a/ui/console-src/modules/system/plugins/components/extension-points/ExtensionDefinitionSingletonView.vue
+++ b/ui/console-src/modules/system/plugins/components/extension-points/ExtensionDefinitionSingletonView.vue
@@ -113,7 +113,11 @@ async function onExtensionChange(e: Event) {
       appear
       name="fade"
     >
-      <VEmpty title="当前没有扩展点实现"></VEmpty>
+      <VEmpty
+        :title="
+          $t('core.plugin.extension-settings.extension-definition.empty.title')
+        "
+      ></VEmpty>
     </Transition>
     <Transition v-else name="fade" appear>
       <ul
diff --git a/ui/console-src/modules/system/plugins/module.ts b/ui/console-src/modules/system/plugins/module.ts
index 5c9bcb5ca..8dd94c5bd 100644
--- a/ui/console-src/modules/system/plugins/module.ts
+++ b/ui/console-src/modules/system/plugins/module.ts
@@ -1,5 +1,5 @@
 import BasicLayout from "@console/layouts/BasicLayout.vue";
-import { IconPlug, IconSettings } from "@halo-dev/components";
+import { IconPlug } from "@halo-dev/components";
 import { definePlugin } from "@halo-dev/console-shared";
 import { markRaw } from "vue";
 import type { RouteRecordRaw } from "vue-router";
@@ -36,12 +36,8 @@ export default definePlugin({
           name: "PluginExtensionPointSettings",
           component: PluginExtensionPointSettings,
           meta: {
-            title: "扩展点设置",
+            title: "core.plugin.extension-settings.title",
             hideFooter: true,
-            menu: {
-              name: "扩展点设置",
-              icon: markRaw(IconSettings),
-            },
           },
         },
         {
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index 0980d0213..1757a21fe 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -1003,6 +1003,15 @@ core:
         reason: Reason
         message: Message
         last_transition_time: Last transition time
+    extension-settings:
+      title: Extension settings
+      extension-point-definition:
+        title: Extension point definitions
+      extension-definition:
+        empty:
+          title: There is currently no extension point implemented
+    actions:
+      extension-point-settings: Extension settings
   user:
     title: Users
     actions:
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index 6e77cb66e..222bde873 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -937,6 +937,15 @@ core:
         reason: 原因
         message: 信息
         last_transition_time: 时间
+    extension-settings:
+      title: 扩展配置
+      extension-point-definition:
+        title: 扩展点定义
+      extension-definition:
+        empty:
+          title: 当前没有扩展点实现
+    actions:
+      extension-point-settings: 扩展配置
   user:
     title: 用户
     actions:
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 9e384b65e..2fac839b5 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -917,6 +917,15 @@ core:
         reason: 原因
         message: 訊息
         last_transition_time: 時間
+    extension-settings:
+      title: 擴展配置
+      extension-point-definition:
+        title: 擴展點定義
+      extension-definition:
+        empty:
+          title: 當前沒有擴展點實現
+    actions:
+      extension-point-settings: 擴展配置
   user:
     title: 用戶
     actions: