feat: make comment and reply list item operations extendable

ui/console-src/modules/contents/comments/components/CommentListItem.vue

@@ -29,12 +29,15 @@ import {
 import type {
   CommentSubjectRefProvider,
   CommentSubjectRefResult,
+  OperationItem
 } from "@halo-dev/console-shared";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
-import { computed, onMounted, provide, ref, type Ref } from "vue";
+import { computed, onMounted, provide, ref, type Ref, toRefs, markRaw } from "vue";
 import { useI18n } from "vue-i18n";
 import ReplyCreationModal from "./ReplyCreationModal.vue";
 import ReplyListItem from "./ReplyListItem.vue";
+import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
+import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -50,6 +53,8 @@ const props = withDefaults(
   }
 );
 
+const { comment } = toRefs(props);
+
 const hoveredReply = ref<ListedReply>();
 const showReplies = ref(false);
 const replyModal = ref(false);
@@ -293,6 +298,35 @@ const subjectRefResult = computed(() => {
   }
   return subjectRef.resolve(subject);
 });
+
+const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
+  "comment:list-item:operation:create",
+  comment,
+  computed((): OperationItem<ListedComment>[] => [
+    {
+      priority: 0,
+      component: markRaw(VDropdownItem),
+      label: t("core.comment.operations.approve_comment_in_batch.button"),
+      action: handleApprove,
+      hidden: props.comment?.comment.spec.approved,
+    },
+    {
+      priority: 10,
+      component: markRaw(VDropdownItem),
+      label: t("core.comment.operations.approve_applies_in_batch.button"),
+      action: handleApproveReplyInBatch,
+    },
+    {
+      priority: 20,
+      component: markRaw(VDropdownItem),
+      props: {
+        type: "danger",
+      },
+      label: t("core.common.buttons.delete"),
+      action: handleDelete,
+    },
+  ])
+);
 </script>
 
 <template>
@@ -419,18 +453,7 @@ const subjectRefResult = computed(() => {
       v-if="currentUserHasPermission(['system:comments:manage'])"
       #dropdownItems
     >
-      <VDropdownItem
-        v-if="!comment?.comment.spec.approved"
-        @click="handleApprove"
-      >
-        {{ $t("core.comment.operations.approve_comment_in_batch.button") }}
-      </VDropdownItem>
-      <VDropdownItem @click="handleApproveReplyInBatch">
-        {{ $t("core.comment.operations.approve_applies_in_batch.button") }}
-      </VDropdownItem>
-      <VDropdownItem type="danger" @click="handleDelete">
-        {{ $t("core.common.buttons.delete") }}
-      </VDropdownItem>
+      <EntityDropdownItems :dropdown-items="operationItems" :item="comment" />
     </template>
 
     <template v-if="showReplies" #footer>

ui/console-src/modules/contents/comments/components/ReplyListItem.vue

@@ -13,10 +13,13 @@ import {
   VStatusDot,
   VTag,
 } from "@halo-dev/components";
+import type { OperationItem } from "@halo-dev/console-shared";
 import { useQueryClient } from "@tanstack/vue-query";
-import { computed, inject, ref, type Ref } from "vue";
+import { computed, inject, ref, type Ref, toRefs, markRaw } from "vue";
 import { useI18n } from "vue-i18n";
 import ReplyCreationModal from "./ReplyCreationModal.vue";
+import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
+import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue";
 
 const { t } = useI18n();
 const queryClient = useQueryClient();
@@ -33,6 +36,8 @@ const props = withDefaults(
   }
 );
 
+const { reply } = toRefs(props);
+
 const quoteReply = computed(() => {
   const { quoteReply: replyName } = props.reply.reply.spec;
 
@@ -119,6 +124,31 @@ function onReplyCreationModalClose() {
   });
   replyModal.value = false;
 }
+
+const { operationItems } = useOperationItemExtensionPoint<ListedReply>(
+  "reply:list-item:operation:create",
+  reply,
+  computed((): OperationItem<ListedReply>[] => [
+    {
+      priority: 0,
+      component: markRaw(VDropdownItem),
+      label: t("core.comment.operations.approve_reply.button"),
+      permissions: ['system:comments:manage'],
+      action: handleApprove,
+      hidden: props.reply?.reply.spec.approved,
+    },
+    {
+      priority: 10,
+      component: markRaw(VDropdownItem),
+      props: {
+        type: "danger",
+      },
+      label: t("core.common.buttons.delete"),
+      permissions: ['system:comments:manage'],
+      action: handleDelete,
+    },
+  ])
+);
 </script>
 
 <template>
@@ -214,20 +244,7 @@ function onReplyCreationModalClose() {
       </VEntityField>
     </template>
     <template #dropdownItems>
-      <VDropdownItem
-        v-if="!reply?.reply.spec.approved"
-        v-permission="['system:comments:manage']"
-        @click="handleApprove"
-      >
-        {{ $t("core.comment.operations.approve_reply.button") }}
-      </VDropdownItem>
-      <VDropdownItem
-        v-permission="['system:comments:manage']"
-        type="danger"
-        @click="handleDelete"
-      >
-        {{ $t("core.common.buttons.delete") }}
-      </VDropdownItem>
+      <EntityDropdownItems :dropdown-items="operationItems" :item="reply" />
     </template>
   </VEntity>
 </template>

ui/docs/extension-points/entity-listitem-operation.md

@@ -9,6 +9,8 @@
 目前支持扩展的数据列表：
 
 - 文章：`"post:list-item:operation:create"?: (post: Ref<ListedPost>) => | OperationItem<ListedPost>[] | Promise<OperationItem<ListedPost>[]>`
+- 评论：`"comment:list-item:operation:create"?: (comment: Ref<ListedComment>) => | OperationItem<ListedComment>[] | Promise<OperationItem<ListedComment>[]>`
+- 回复：`"reply:list-item:operation:create"?: (reply: Ref<ListedReply>) => | OperationItem<ListedReply>[] | Promise<OperationItem<ListedReply>[]>`
 - 插件：`"plugin:list-item:operation:create"?: (plugin: Ref<Plugin>) => | OperationItem<Plugin>[] | Promise<OperationItem<Plugin>[]>`
 - 备份：`"backup:list-item:operation:create"?: (backup: Ref<Backup>) => | OperationItem<Backup>[] | Promise<OperationItem<Backup>[]>`
 - 主题：`"theme:list-item:operation:create"?: (theme: Ref<Theme>) => | OperationItem<Theme>[] | Promise<OperationItem<Theme>[]>`

ui/packages/shared/src/types/plugin.ts

@@ -11,6 +11,8 @@ import type {
   ListedPost,
   Plugin,
   Theme,
+  ListedComment,
+  ListedReply
 } from "@halo-dev/api-client";
 import type { AnyExtension } from "@halo-dev/richtext-editor";
 import type { Component, Ref } from "vue";
@@ -52,6 +54,14 @@ export interface ExtensionPoint {
     post: Ref<ListedPost>
   ) => OperationItem<ListedPost>[];
 
+  "comment:list-item:operation:create"?: (
+    comment: Ref<ListedComment>
+  ) => OperationItem<ListedComment>[];
+
+  "reply:list-item:operation:create"?: (
+    reply: Ref<ListedReply>
+  ) => OperationItem<ListedReply>[];
+
   "plugin:list-item:operation:create"?: (
     plugin: Ref<Plugin>
   ) => OperationItem<Plugin>[];