From 4a4f8b655ddb9fd6118fef3c090b2b0393345bf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=9B=B0=E5=9B=B0=E9=B1=BC?= <89380218+chengzhongxue@users.noreply.github.com> Date: Mon, 5 Aug 2024 14:56:25 +0800 Subject: [PATCH] feat: make comment and reply list item operations extendable (#6438) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /area console /kind feature /milestone 2.18.x #### What this PR does / why we need it: 评论和回复管理列表项的操作按钮支持被插件扩展。 ![image](https://github.com/user-attachments/assets/20174eda-ec46-4ab2-b1d9-c27e4aaa6cba) ![image](https://github.com/user-attachments/assets/ac44c221-71f5-4077-8116-a92245c22697) #### Which issue(s) this PR fixes: Fixes #6392 #### Special notes for your reviewer: 需要评论和回复的关于列表的已有功能是否正常。 如果需要测试扩展点是否有效，可以使用此插件测试：[plugin-starter-1.0.0-SNAPSHOT.jar.zip](https://github.com/user-attachments/files/16482348/plugin-starter-1.0.0-SNAPSHOT.jar.zip) ``` export default definePlugin({ components: {}, routes: [], extensionPoints: { "comment:list-item:operation:create": (comment: Ref) => { return [ { priority: 21, component: markRaw(VDropdownItem), label: "测试评论菜单", visible: true, permissions: [], action: () => { console.log(comment) }, }, ]; }, "reply:list-item:operation:create": (reply: Ref) => { return [ { priority: 11, component: markRaw(VDropdownItem), label: "测试回复菜单", visible: true, permissions: [], action: () => { console.log(reply) }, }, ]; }, }, }); ``` #### Does this PR introduce a user-facing change? ```release-note Console 评论和回复管理列表项的操作按钮支持被插件扩展。 ``` --- .../comments/components/CommentListItem.vue | 57 ++++++++++++++----- .../comments/components/ReplyListItem.vue | 47 ++++++++++----- .../entity-listitem-operation.md | 2 + ui/packages/shared/src/types/plugin.ts | 10 ++++ 4 files changed, 88 insertions(+), 28 deletions(-) diff --git a/ui/console-src/modules/contents/comments/components/CommentListItem.vue b/ui/console-src/modules/contents/comments/components/CommentListItem.vue index 296902c5f..6927cacb1 100644 --- a/ui/console-src/modules/contents/comments/components/CommentListItem.vue +++ b/ui/console-src/modules/contents/comments/components/CommentListItem.vue @@ -29,12 +29,23 @@ 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 +61,8 @@ const props = withDefaults( } ); +const { comment } = toRefs(props); + const hoveredReply = ref(); const showReplies = ref(false); const replyModal = ref(false); @@ -293,6 +306,35 @@ const subjectRefResult = computed(() => { } return subjectRef.resolve(subject); }); + +const { operationItems } = useOperationItemExtensionPoint( + "comment:list-item:operation:create", + comment, + computed((): OperationItem[] => [ + { + 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, + }, + ]) +); diff --git a/ui/docs/extension-points/entity-listitem-operation.md b/ui/docs/extension-points/entity-listitem-operation.md index 3458b6c5e..ae747002e 100644 --- a/ui/docs/extension-points/entity-listitem-operation.md +++ b/ui/docs/extension-points/entity-listitem-operation.md @@ -9,6 +9,8 @@ 目前支持扩展的数据列表： - 文章：`"post:list-item:operation:create"?: (post: Ref) => | OperationItem[] | Promise[]>` +- 评论：`"comment:list-item:operation:create"?: (comment: Ref) => | OperationItem[] | Promise[]>` +- 回复：`"reply:list-item:operation:create"?: (reply: Ref) => | OperationItem[] | Promise[]>` - 插件：`"plugin:list-item:operation:create"?: (plugin: Ref) => | OperationItem[] | Promise[]>` - 备份：`"backup:list-item:operation:create"?: (backup: Ref) => | OperationItem[] | Promise[]>` - 主题：`"theme:list-item:operation:create"?: (theme: Ref) => | OperationItem[] | Promise[]>` diff --git a/ui/packages/shared/src/types/plugin.ts b/ui/packages/shared/src/types/plugin.ts index 91ef9da21..afaae30a8 100644 --- a/ui/packages/shared/src/types/plugin.ts +++ b/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 ) => OperationItem[]; + "comment:list-item:operation:create"?: ( + comment: Ref + ) => OperationItem[]; + + "reply:list-item:operation:create"?: ( + reply: Ref + ) => OperationItem[]; + "plugin:list-item:operation:create"?: ( plugin: Ref ) => OperationItem[];