From f77ec61465239601c9fbae25ae89c12bf2f28767 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 24 Oct 2022 11:20:12 +0800
Subject: [PATCH] refactor: load the theme and plugin logos using the avatar
 component (#657)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/milestone 2.0

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

插件和主题管理的 Logo 改为使用 `Avatar` 组件。

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

测试方式：检查主题和插件相关的管理页面是否正常加载 Logo。

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

```release-note
插件和主题管理的 Logo 改为使用 `Avatar` 组件。
```
---
 src/modules/interface/themes/ThemeDetail.vue  | 19 ++++++++-----------
 .../plugins/components/PluginListItem.vue     | 13 ++++++-------
 .../system/plugins/layouts/PluginLayout.vue   | 16 ++++++++++++++--
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/modules/interface/themes/ThemeDetail.vue b/src/modules/interface/themes/ThemeDetail.vue
index 6cc91681..3d0fe939 100644
--- a/src/modules/interface/themes/ThemeDetail.vue
+++ b/src/modules/interface/themes/ThemeDetail.vue
@@ -11,6 +11,7 @@ import {
   IconMore,
   VButton,
   Dialog,
+  VAvatar,
 } from "@halo-dev/components";
 import ThemeUploadModal from "./components/ThemeUploadModal.vue";
 
@@ -56,17 +57,13 @@ const onUpgradeModalClose = () => {
 <template>
   <div class="bg-white px-4 py-4 sm:px-6">
     <div class="group flex items-center justify-between">
-      <div class="flex flex-row gap-3">
-        <div
-          class="h-12 w-12 overflow-hidden rounded border bg-white hover:shadow-sm"
-        >
-          <img
-            :key="selectedTheme?.metadata.name"
-            :alt="selectedTheme?.spec.displayName"
-            :src="selectedTheme?.spec.logo"
-            class="h-full w-full"
-          />
-        </div>
+      <div class="flex flex-row items-center gap-3">
+        <VAvatar
+          :key="selectedTheme?.metadata.name"
+          :alt="selectedTheme?.spec.displayName"
+          :src="selectedTheme?.spec.logo"
+          size="lg"
+        />
         <div>
           <h3 class="text-lg font-medium leading-6 text-gray-900">
             {{ selectedTheme?.spec.displayName }}
diff --git a/src/modules/system/plugins/components/PluginListItem.vue b/src/modules/system/plugins/components/PluginListItem.vue
index fad3488c..232e5822 100644
--- a/src/modules/system/plugins/components/PluginListItem.vue
+++ b/src/modules/system/plugins/components/PluginListItem.vue
@@ -7,6 +7,7 @@ import {
   VStatusDot,
   VEntity,
   VEntityField,
+  VAvatar,
 } from "@halo-dev/components";
 import { toRefs } from "vue";
 import { usePluginLifeCycle } from "../composables/use-plugin";
@@ -34,13 +35,11 @@ const { isStarted, changeStatus, uninstall } = usePluginLifeCycle(plugin);
     <template #start>
       <VEntityField>
         <template #description>
-          <div class="h-12 w-12 rounded border bg-white p-1 hover:shadow-sm">
-            <img
-              :alt="plugin?.metadata.name"
-              :src="plugin?.spec.logo"
-              class="h-full w-full"
-            />
-          </div>
+          <VAvatar
+            :alt="plugin?.spec.displayName"
+            :src="plugin?.spec.logo"
+            size="md"
+          ></VAvatar>
         </template>
       </VEntityField>
       <VEntityField
diff --git a/src/modules/system/plugins/layouts/PluginLayout.vue b/src/modules/system/plugins/layouts/PluginLayout.vue
index bcbe8530..bdae8f20 100644
--- a/src/modules/system/plugins/layouts/PluginLayout.vue
+++ b/src/modules/system/plugins/layouts/PluginLayout.vue
@@ -11,7 +11,13 @@ import cloneDeep from "lodash.clonedeep";
 import { useSettingForm } from "@/composables/use-setting-form";
 
 // components
-import { VButton, VCard, VPageHeader, VTabbar } from "@halo-dev/components";
+import {
+  VButton,
+  VCard,
+  VPageHeader,
+  VTabbar,
+  VAvatar,
+} from "@halo-dev/components";
 import BasicLayout from "@/layouts/BasicLayout.vue";
 
 // types
@@ -141,7 +147,13 @@ watch([() => route.name, () => route.params], () => {
   <BasicLayout>
     <VPageHeader :title="plugin?.spec?.displayName">
       <template #icon>
-        <img :src="plugin?.spec?.logo" class="mr-2 h-8 w-8" />
+        <VAvatar
+          v-if="plugin"
+          :src="plugin.spec.logo"
+          :alt="plugin.spec.displayName"
+          class="mr-2"
+          size="sm"
+        />
       </template>
       <template #actions>
         <VButton class="opacity-0" type="secondary">安装</VButton>