From 571df5f865494256fa935034acf363b6aed1694e Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 19 Apr 2024 10:40:08 +0800
Subject: [PATCH] feat: refine fields in plugin detail page (#5724)
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.15.x

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

优化插件详情页面的字段显示，适配 https://github.com/halo-dev/halo/pull/4061

1. 显示 metadata.name。
2. 显示源码仓库地址（spec.repo）。
3. 显示网站地址（spec.homepage）。

<img width="663" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/a1b2a561-4351-4c18-b959-6b398532a9af">

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

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

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

```release-note
优化插件详情页面的字段显示
```
---
 .../modules/system/plugins/tabs/Detail.vue    | 49 +++++++++++++++----
 ui/src/locales/en.yaml                        |  4 +-
 ui/src/locales/zh-CN.yaml                     |  6 ++-
 ui/src/locales/zh-TW.yaml                     |  6 ++-
 4 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/ui/console-src/modules/system/plugins/tabs/Detail.vue b/ui/console-src/modules/system/plugins/tabs/Detail.vue
index bf587efa8..8a5179cf6 100644
--- a/ui/console-src/modules/system/plugins/tabs/Detail.vue
+++ b/ui/console-src/modules/system/plugins/tabs/Detail.vue
@@ -95,14 +95,24 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
       </div>
       <div class="border-t border-gray-200">
         <VDescription>
-          <VDescriptionItem
-            :label="$t('core.plugin.detail.fields.display_name')"
-            :content="plugin?.spec.displayName"
-          />
+          <VDescriptionItem label="ID" :content="plugin?.metadata.name" />
           <VDescriptionItem
             :label="$t('core.plugin.detail.fields.description')"
-            :content="plugin?.spec.description"
+            :content="plugin?.spec.description || $t('core.common.text.none')"
           />
+          <VDescriptionItem :label="$t('core.plugin.detail.fields.author')">
+            <a
+              v-if="plugin?.spec.author"
+              :href="plugin?.spec.author.website"
+              class="hover:text-gray-600"
+              target="_blank"
+            >
+              {{ plugin?.spec.author.name }}
+            </a>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
+          </VDescriptionItem>
           <VDescriptionItem
             :label="$t('core.plugin.detail.fields.version')"
             :content="plugin?.spec.version"
@@ -111,13 +121,27 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
             :label="$t('core.plugin.detail.fields.requires')"
             :content="plugin?.spec.requires"
           />
-          <VDescriptionItem :label="$t('core.plugin.detail.fields.author')">
+          <VDescriptionItem :label="$t('core.plugin.detail.fields.homepage')">
             <a
-              v-if="plugin?.spec.author"
-              :href="plugin?.spec.author.website"
+              v-if="plugin?.spec.homepage"
+              :href="plugin?.spec.homepage"
+              class="hover:text-gray-600"
               target="_blank"
             >
-              {{ plugin?.spec.author.name }}
+              {{ plugin?.spec.homepage }}
+            </a>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
+          </VDescriptionItem>
+          <VDescriptionItem :label="$t('core.plugin.detail.fields.repo')">
+            <a
+              v-if="plugin?.spec.repo"
+              :href="plugin.spec.repo"
+              class="hover:text-gray-600"
+              target="_blank"
+            >
+              {{ plugin.spec.repo }}
             </a>
             <span v-else>
               {{ $t("core.common.text.none") }}
@@ -138,6 +162,9 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
                 </span>
               </li>
             </ul>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
           </VDescriptionItem>
           <VDescriptionItem
             :label="$t('core.plugin.detail.fields.role_templates')"
@@ -201,6 +228,10 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
             :label="$t('core.plugin.detail.fields.last_starttime')"
             :content="formatDatetime(plugin?.status?.lastStartTime)"
           />
+          <VDescriptionItem
+            :label="$t('core.plugin.detail.fields.load_location')"
+            :content="plugin?.status?.loadLocation"
+          ></VDescriptionItem>
         </VDescription>
       </div>
     </div>
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index 8c9e99b95..f6f0e554f 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -862,7 +862,6 @@ core:
       header:
         title: Plugin information
       fields:
-        display_name: Display Name
         description: Description
         version: Version
         requires: Requires
@@ -870,6 +869,9 @@ core:
         license: License
         role_templates: Role Templates
         last_starttime: Last Start Time
+        homepage: Homepage
+        repo: Source Repository
+        load_location: Storage Location
     loader:
       toast:
         entry_load_failed: Failed to load plugins entry file
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index f3fbcb6c6..7e48d4c82 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -820,14 +820,16 @@ core:
       header:
         title: 插件信息
       fields:
-        display_name: 名称
         description: 描述
         version: 版本
         requires: Halo 版本要求
-        author: 提供方
+        author: 作者
         license: 协议
         role_templates: 权限模板
         last_starttime: 最近一次启动
+        homepage: 网站
+        repo: 源码仓库
+        load_location: 存储位置
     loader:
       toast:
         entry_load_failed: 加载插件入口文件失败
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 9a71d3463..d99e5ea57 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -808,14 +808,16 @@ core:
       header:
         title: 插件信息
       fields:
-        display_name: 名稱
         description: 描述
         version: 版本
         requires: Halo 版本要求
-        author: 提供方
+        author: 作者
         license: 協議
         role_templates: 權限模板
         last_starttime: 最近一次啟動
+        homepage: 網站
+        repo: 源碼倉庫
+        load_location: 存儲位置
     loader:
       toast:
         entry_load_failed: 讀取插件入口文件失敗