fix: operation items render issue in theme list (#4563)

#### 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 #4559 #### Special notes for your reviewer: 测试方式： 1. 安装若干主题，测试每一项主题的更多操作按钮是否可以正常打开。 2. 删除某一个主题，测试每一项主题的更多操作按钮是否可以正常打开。 #### Does this PR introduce a user-facing change? ```release-note 修复 Console 端主题管理列表的更多操作项在某些情况下无法打开的问题。 ```
halo-dev · Sep 7, 2023 · eea575c · eea575c
1 parent a1ea355
commit eea575c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import { VButton, IconMore } from "@halo-dev/components";
+</script>
+
+<template>
+  <VButton size="sm"><IconMore /></VButton>
+</template>