From f64c87a515d4f353e2c9d740c9ad7a8dd8f72bf9 Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Thu, 31 Oct 2024 17:17:33 +0800
Subject: [PATCH] fix(entities-plugins): custom plugins disappeared after page
 reload [KM-658]

---
 .../src/components/PluginIcon.vue                 |  1 +
 .../custom-plugins/PluginCustomGrid.vue           | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/entities/entities-plugins/src/components/PluginIcon.vue b/packages/entities/entities-plugins/src/components/PluginIcon.vue
index 6d5842ca1e..c0645aee6b 100644
--- a/packages/entities/entities-plugins/src/components/PluginIcon.vue
+++ b/packages/entities/entities-plugins/src/components/PluginIcon.vue
@@ -2,6 +2,7 @@
   <img
     ref="img"
     :alt="alt"
+    :height="size"
     :src="iconSrc"
     :width="size"
     @error="onError"
diff --git a/packages/entities/entities-plugins/src/components/custom-plugins/PluginCustomGrid.vue b/packages/entities/entities-plugins/src/components/custom-plugins/PluginCustomGrid.vue
index 0cd58bb88f..2b9abbb6b8 100644
--- a/packages/entities/entities-plugins/src/components/custom-plugins/PluginCustomGrid.vue
+++ b/packages/entities/entities-plugins/src/components/custom-plugins/PluginCustomGrid.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, onUnmounted } from 'vue'
+import { computed, nextTick, onMounted, ref, onBeforeUnmount, watch } from 'vue'
 import type { PropType } from 'vue'
 import {
   PluginGroup,
@@ -217,13 +217,18 @@ const setToggleVisibility = (): void => {
 
 onMounted(async () => {
   await nextTick()
-
-  tallestPluginCardHeight.value = getTallestPluginCardHeight(pluginCardRef.value!)
-  setToggleVisibility()
   window?.addEventListener('resize', handleResize)
 })
 
-onUnmounted(() => {
+watch(modifiedCustomPlugins, () => {
+  handleResize()
+}, {
+  immediate: true,
+  flush: 'post',
+  deep: false,
+})
+
+onBeforeUnmount(() => {
   window?.removeEventListener('resize', handleResize)
 })
 </script>