From eea575c1e2fac1e0d8fa0f81cc8647eb0bece802 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 7 Sep 2023 12:22:14 +0800
Subject: [PATCH] fix: operation items render issue in theme list (#4563)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind bug

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

修复主题管理列表的更多操作项在某些情况下无法打开的问题。

<img width="384" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/2bbea045-2e04-46bc-be55-d9499c87624b">


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

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

#### Special notes for your reviewer:

测试方式：

1. 安装若干主题，测试每一项主题的更多操作按钮是否可以正常打开。
2. 删除某一个主题，测试每一项主题的更多操作按钮是否可以正常打开。

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

```release-note
修复 Console 端主题管理列表的更多操作项在某些情况下无法打开的问题。
```
---
 .../themes/components/ThemeListItem.vue       | 23 ++++++-------------
 .../components/list-tabs/InstalledThemes.vue  |  2 +-
 .../operation/MoreOperationItem.vue           |  7 ++++++
 3 files changed, 15 insertions(+), 17 deletions(-)
 create mode 100644 console/src/modules/interface/themes/components/operation/MoreOperationItem.vue

diff --git a/console/src/modules/interface/themes/components/ThemeListItem.vue b/console/src/modules/interface/themes/components/ThemeListItem.vue
index 7cfbc14f3..959f1916e 100644
--- a/console/src/modules/interface/themes/components/ThemeListItem.vue
+++ b/console/src/modules/interface/themes/components/ThemeListItem.vue
@@ -8,7 +8,6 @@ import {
   VDropdownDivider,
   VButton,
   VSpace,
-  IconMore,
 } from "@halo-dev/components";
 import type { Theme } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
@@ -19,10 +18,10 @@ import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
 import { useOperationItemExtensionPoint } from "@/composables/use-operation-extension-points";
 import { markRaw } from "vue";
-import { defineComponent } from "vue";
 import UninstallOperationItem from "./operation/UninstallOperationItem.vue";
 import { computed } from "vue";
 import type { OperationItem } from "@halo-dev/console-shared";
+import MoreOperationItem from "./operation/MoreOperationItem.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -112,15 +111,7 @@ const { operationItems } = useOperationItemExtensionPoint<Theme>(
     },
     {
       priority: 30,
-      component: markRaw(
-        defineComponent({
-          components: {
-            VButton,
-            IconMore,
-          },
-          template: `<VButton size="sm"><IconMore /></VButton>`,
-        })
-      ),
+      component: markRaw(MoreOperationItem),
       permissions: ["system:themes:manage"],
       children: [
         {
@@ -238,13 +229,14 @@ const { operationItems } = useOperationItemExtensionPoint<Theme>(
         </div>
         <div>
           <VSpace v-if="installed">
-            <template v-for="(item, index) in operationItems" :key="index">
+            <template v-for="item in operationItems">
               <template v-if="!item.children?.length">
                 <component
                   :is="item.component"
                   v-if="
                     !item.hidden && currentUserHasPermission(item.permissions)
                   "
+                  :key="`${theme.metadata.name}-${item.label}-${item.priority}`"
                   v-bind="item.props"
                   @click="item.action?.(theme)"
                 >
@@ -256,6 +248,7 @@ const { operationItems } = useOperationItemExtensionPoint<Theme>(
                   v-if="
                     !item.hidden && currentUserHasPermission(item.permissions)
                   "
+                  :key="`${theme.metadata.name}-${item.label}-${item.priority}`"
                 >
                   <component
                     :is="item.component"
@@ -265,16 +258,14 @@ const { operationItems } = useOperationItemExtensionPoint<Theme>(
                     {{ item.label }}
                   </component>
                   <template #popper>
-                    <template
-                      v-for="(childItem, childIndex) in item.children"
-                      :key="`child-${childIndex}`"
-                    >
+                    <template v-for="childItem in item.children">
                       <component
                         :is="childItem.component"
                         v-if="
                           !childItem.hidden &&
                           currentUserHasPermission(childItem.permissions)
                         "
+                        :key="`${theme.metadata.name}-${childItem.label}-${childItem.priority}`"
                         v-bind="childItem.props"
                         @click="childItem.action?.(theme)"
                       >
diff --git a/console/src/modules/interface/themes/components/list-tabs/InstalledThemes.vue b/console/src/modules/interface/themes/components/list-tabs/InstalledThemes.vue
index d528517c2..f33fa62e0 100644
--- a/console/src/modules/interface/themes/components/list-tabs/InstalledThemes.vue
+++ b/console/src/modules/interface/themes/components/list-tabs/InstalledThemes.vue
@@ -95,7 +95,7 @@ const handleOpenPreview = (theme: Theme) => {
     </Transition>
     <Transition v-else appear name="fade">
       <ul class="box-border h-full w-full space-y-3" role="list">
-        <li v-for="(theme, index) in themes" :key="index">
+        <li v-for="theme in themes" :key="theme.metadata.name">
           <ThemeListItem
             :theme="theme"
             :is-selected="theme.metadata.name === selectedTheme?.metadata?.name"
diff --git a/console/src/modules/interface/themes/components/operation/MoreOperationItem.vue b/console/src/modules/interface/themes/components/operation/MoreOperationItem.vue
new file mode 100644
index 000000000..814876741
--- /dev/null
+++ b/console/src/modules/interface/themes/components/operation/MoreOperationItem.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import { VButton, IconMore } from "@halo-dev/components";
+</script>
+
+<template>
+  <VButton size="sm"><IconMore /></VButton>
+</template>