import React from 'react'; import { Button, Dropdown, Menu, Message } from '@arco-design/web-react'; import { ComponentItem } from '@/api/interface'; import { componentStatusConstant, publicStatus, publishStatusConstant } from '@/const/isdp/componentBase'; interface HandleButtonGroupProps { row: ComponentItem; index: number; permission?: string; // 协作权限:admin, write, read isCollaborator?: boolean; // 是否为协作组件 onHandlePublishComponent: (row: ComponentItem) => void; onGoToReview: (row: ComponentItem) => void; onPublishOrRevokeComponent: (action: 'publish' | 'revoke', identifier: string, version: string) => void; onSourceCodeView: (row: ComponentItem) => void; onShowEdit: (row: ComponentItem, index: number) => void; onCopyHandler: (row: ComponentItem) => void; onShareCollaboration: (row: ComponentItem) => void; onExportComponent: (row: ComponentItem) => void; onStopComponentShow: (row: ComponentItem) => void; onRowDel: (row: ComponentItem) => void; onCancelPublish?: (row: ComponentItem) => void; } const HandleButtonGroup: React.FC = ({ row, index, permission = 'write', isCollaborator = false, onHandlePublishComponent, onGoToReview, onPublishOrRevokeComponent, onSourceCodeView, onShowEdit, onCopyHandler, onShareCollaboration, onExportComponent, onStopComponentShow, onRowDel, onCancelPublish }) => { // 检查组件状态是否符合条件 const isEligible = (eligibleStatuses: string[], currentStatus: string) => { return eligibleStatuses.includes(currentStatus.toLowerCase()); }; // 权限检查函数 - 只在协作组件时才应用权限控制 const canWrite = !isCollaborator || permission === 'write' || permission === 'admin'; const canAdmin = !isCollaborator || permission === 'admin'; const isReadOnly = isCollaborator && permission === 'read'; // 构建更多操作菜单 const renderDropdownMenu = () => { const items = []; // 分享协作 - 我的组件中所有人都可以分享,协同组件中只有admin权限可以分享 if (!isEligible([componentStatusConstant.DESIGN, componentStatusConstant.DEFAULT], row.componentStatus)) { // 我的组件:显示分享协作 // 协同组件:只有admin权限才显示 if (!isCollaborator || canAdmin) { items.push( ); } } // 以下操作只在"我的组件"tab显示 if (!isCollaborator) { // 组件复制 - 所有权限都可以复制 if (!isEligible([componentStatusConstant.DEFAULT, componentStatusConstant.DESIGN], row.componentStatus)) { items.push( ); } // 导出组件 - 所有权限都可以导出 items.push( ); // 取消发布 if (row.publicStatus === publicStatus.PUBLISHED && onCancelPublish) { items.push( ); } // 下架组件 if (isEligible([componentStatusConstant.DEPLOYED], row.componentStatus)) { items.push( ); } // 删除组件 if (!isEligible([componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED], row.componentStatus)) { items.push( ); } } return {items}; }; return ( <> {/* 协同组件tab下不显示发布相关操作 */} {!isCollaborator && ( <> {/* 发布组件 */} {row.publicStatus !== publicStatus.REVIEW && isEligible([componentStatusConstant.CODING, componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED], row.componentStatus) && ( )} {/* 查看审核 */} {(row.publicStatus === publicStatus.REVIEW || row.publicStatus === publicStatus.REJECTED) && ( )} {/* 公开组件/取消公开 */} {row.publishStatus !== publishStatusConstant.PUBLISHED ? ( ) : ( )} )} {/* 查看源码 - admin和write权限可以查看源码 */} {canWrite && isEligible( [componentStatusConstant.CODING, componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED], row.componentStatus ) ? ( ) : null} {/* 编辑组件 - 所有权限都可以点击,但read权限会是只读模式 */} {/* 更多操作 */} ); }; export default HandleButtonGroup;