From 76503c8864b5f8f4806b2e7f08552f745dfc3c45 Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <1152958806@qq.com> Date: Sun, 4 Aug 2024 01:23:30 +0800 Subject: [PATCH 1/3] make comment and reply list item operations extendable --- .../comments/components/CommentListItem.vue | 49 ++++++++++++++----- .../comments/components/ReplyListItem.vue | 47 ++++++++++++------ .../entity-listitem-operation.md | 2 + ui/packages/shared/src/types/plugin.ts | 10 ++++ 4 files changed, 80 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 296902c5f5..c7659a8ab6 100644 --- a/ui/console-src/modules/contents/comments/components/CommentListItem.vue +++ b/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(); const showReplies = ref(false); const replyModal = ref(false); @@ -293,6 +298,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 3458b6c5ea..ae747002e6 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 91ef9da219..29330b9cf2 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[]; From 038909cf93a875928862fd2155e29a81df9836a9 Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <1152958806@qq.com> Date: Mon, 5 Aug 2024 11:23:11 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/contents/comments/components/CommentListItem.vue | 2 +- .../modules/contents/comments/components/ReplyListItem.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/console-src/modules/contents/comments/components/CommentListItem.vue b/ui/console-src/modules/contents/comments/components/CommentListItem.vue index c7659a8ab6..f248da1f97 100644 --- a/ui/console-src/modules/contents/comments/components/CommentListItem.vue +++ b/ui/console-src/modules/contents/comments/components/CommentListItem.vue @@ -36,7 +36,7 @@ import { computed, onMounted, provide, ref, type Ref, toRefs, markRaw } from "vu 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 { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points"; import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue"; const { currentUserHasPermission } = usePermission(); diff --git a/ui/console-src/modules/contents/comments/components/ReplyListItem.vue b/ui/console-src/modules/contents/comments/components/ReplyListItem.vue index bea252fab4..395094f895 100644 --- a/ui/console-src/modules/contents/comments/components/ReplyListItem.vue +++ b/ui/console-src/modules/contents/comments/components/ReplyListItem.vue @@ -18,7 +18,7 @@ import { useQueryClient } from "@tanstack/vue-query"; 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 { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points"; import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue"; const { t } = useI18n(); From cb42bbc3f41ec28dc4de962897d316874a775ec7 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Mon, 5 Aug 2024 11:34:17 +0800 Subject: [PATCH 3/3] Fix ci Signed-off-by: Ryan Wang --- .../contents/comments/components/CommentListItem.vue | 12 ++++++++++-- .../contents/comments/components/ReplyListItem.vue | 4 ++-- ui/packages/shared/src/types/plugin.ts | 2 +- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/ui/console-src/modules/contents/comments/components/CommentListItem.vue b/ui/console-src/modules/contents/comments/components/CommentListItem.vue index f248da1f97..6927cacb1c 100644 --- a/ui/console-src/modules/contents/comments/components/CommentListItem.vue +++ b/ui/console-src/modules/contents/comments/components/CommentListItem.vue @@ -29,10 +29,18 @@ import { import type { CommentSubjectRefProvider, CommentSubjectRefResult, - OperationItem + OperationItem, } from "@halo-dev/console-shared"; import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query"; -import { computed, onMounted, provide, ref, type Ref, toRefs, markRaw } 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"; diff --git a/ui/console-src/modules/contents/comments/components/ReplyListItem.vue b/ui/console-src/modules/contents/comments/components/ReplyListItem.vue index 395094f895..9ea0a7eca3 100644 --- a/ui/console-src/modules/contents/comments/components/ReplyListItem.vue +++ b/ui/console-src/modules/contents/comments/components/ReplyListItem.vue @@ -133,7 +133,7 @@ const { operationItems } = useOperationItemExtensionPoint( priority: 0, component: markRaw(VDropdownItem), label: t("core.comment.operations.approve_reply.button"), - permissions: ['system:comments:manage'], + permissions: ["system:comments:manage"], action: handleApprove, hidden: props.reply?.reply.spec.approved, }, @@ -144,7 +144,7 @@ const { operationItems } = useOperationItemExtensionPoint( type: "danger", }, label: t("core.common.buttons.delete"), - permissions: ['system:comments:manage'], + permissions: ["system:comments:manage"], action: handleDelete, }, ]) diff --git a/ui/packages/shared/src/types/plugin.ts b/ui/packages/shared/src/types/plugin.ts index 29330b9cf2..afaae30a8c 100644 --- a/ui/packages/shared/src/types/plugin.ts +++ b/ui/packages/shared/src/types/plugin.ts @@ -12,7 +12,7 @@ import type { Plugin, Theme, ListedComment, - ListedReply + ListedReply, } from "@halo-dev/api-client"; import type { AnyExtension } from "@halo-dev/richtext-editor"; import type { Component, Ref } from "vue";