feat: refine fields in theme detail page (#5723)

#### 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. 将 spec.website 字段改为 spec.homepage，并兼容 website。
2. 显示 spec.license 字段。
3. 显示 spec.description 字段。

<img width="794" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/13bf6ef8-4111-4889-bd10-8a8865e247e8">

#### 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
优化主题详情页面的字段显示
```

ui/console-src/modules/interface/themes/ThemeDetail.vue

@@ -1,25 +1,24 @@
 <script lang="ts" setup>
+// types
+import type { Ref } from "vue";
 // core libs
 import { inject, ref } from "vue";
 import { useThemeLifeCycle } from "./composables/use-theme";
 
 // components
 import {
-  VTag,
-  IconMore,
   Dialog,
-  VAvatar,
+  IconMore,
   Toast,
-  VStatusDot,
-  VDropdown,
-  VDropdownItem,
-  VDropdownDivider,
+  VAvatar,
   VDescription,
   VDescriptionItem,
+  VDropdown,
+  VDropdownDivider,
+  VDropdownItem,
+  VStatusDot,
+  VTag,
 } from "@halo-dev/components";
-
-// types
-import type { Ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 
 import { apiClient } from "@/utils/api-client";
@@ -124,26 +123,23 @@ const handleReloadTheme = async () => {
             :content="selectedTheme?.metadata.name"
           />
           <VDescriptionItem
-            :label="$t('core.theme.detail.fields.author')"
-            :content="selectedTheme?.spec.author.name"
-          />
-          <VDescriptionItem :label="$t('core.theme.detail.fields.website')">
+            :label="$t('core.theme.detail.fields.description')"
+            :content="
+              selectedTheme?.spec.description || $t('core.common.text.none')
+            "
+          ></VDescriptionItem>
+          <VDescriptionItem :label="$t('core.theme.detail.fields.author')">
             <a
-              :href="selectedTheme?.spec.website"
+              v-if="selectedTheme?.spec.author"
+              :href="selectedTheme.spec.author.website || '#'"
               class="hover:text-gray-600"
               target="_blank"
             >
-              {{ selectedTheme?.spec.website }}
-            </a>
-          </VDescriptionItem>
-          <VDescriptionItem :label="$t('core.theme.detail.fields.repo')">
-            <a
-              :href="selectedTheme?.spec.repo"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ selectedTheme?.spec.repo }}
+              {{ selectedTheme.spec.author.name }}
             </a>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
           </VDescriptionItem>
           <VDescriptionItem
             :label="$t('core.theme.detail.fields.version')"
@@ -153,6 +149,57 @@ const handleReloadTheme = async () => {
             :label="$t('core.theme.detail.fields.requires')"
             :content="selectedTheme?.spec.requires"
           />
+          <VDescriptionItem :label="$t('core.theme.detail.fields.homepage')">
+            <a
+              v-if="selectedTheme?.spec.homepage"
+              :href="selectedTheme.spec.homepage"
+              class="hover:text-gray-600"
+              target="_blank"
+            >
+              {{ selectedTheme.spec.homepage }}
+            </a>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
+          </VDescriptionItem>
+          <VDescriptionItem :label="$t('core.theme.detail.fields.repo')">
+            <a
+              v-if="selectedTheme?.spec.repo"
+              :href="selectedTheme.spec.repo"
+              class="hover:text-gray-600"
+              target="_blank"
+            >
+              {{ selectedTheme.spec.repo }}
+            </a>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
+          </VDescriptionItem>
+          <VDescriptionItem :label="$t('core.theme.detail.fields.license')">
+            <ul
+              v-if="
+                selectedTheme?.spec.license &&
+                selectedTheme?.spec.license.length
+              "
+              class="list-inside"
+              :class="{ 'list-disc': selectedTheme?.spec.license.length > 1 }"
+            >
+              <li
+                v-for="(license, index) in selectedTheme.spec.license"
+                :key="index"
+              >
+                <a v-if="license.url" :href="license.url" target="_blank">
+                  {{ license.name }}
+                </a>
+                <span v-else>
+                  {{ license.name }}
+                </span>
+              </li>
+            </ul>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
+          </VDescriptionItem>
           <VDescriptionItem
             :label="$t('core.theme.detail.fields.storage_location')"
             :content="selectedTheme?.status?.location"

ui/src/locales/en.yaml

@@ -712,12 +712,14 @@ core:
     detail:
       fields:
         author: Author
-        website: Website
+        homepage: Website
         repo: Source Repository
         version: Version
         requires: Requires
         storage_location: Storage Location
         plugin_requires: Plugin Requires
+        description: Description
+        license: License
     settings:
       title: Theme settings
     custom_templates:

ui/src/locales/zh-CN.yaml

@@ -682,12 +682,14 @@ core:
     detail:
       fields:
         author: 作者
-        website: 网站
+        homepage: 网站
         repo: 源码仓库
-        version: 当前版本
-        requires: 版本要求
+        version: 版本
+        requires: Halo 版本要求
         storage_location: 存储位置
         plugin_requires: 插件依赖
+        description: 描述
+        license: 协议
     settings:
       title: 主题设置
     custom_templates:

ui/src/locales/zh-TW.yaml

@@ -670,12 +670,14 @@ core:
     detail:
       fields:
         author: 作者
-        website: 網站
+        homepage: 網站
         repo: 源碼倉庫
-        version: 當前版本
-        requires: 版本要求
+        version: 版本
+        requires: Halo 版本要求
         storage_location: 存儲位置
         plugin_requires: 插件依賴
+        description: 描述
+        license: 協議
     settings:
       title: 主題設置
     custom_templates: