flow-playform-react/src/pages/componentDevelopment/componentList/handleButtonGroup.tsx

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<HandleButtonGroupProps> = ({
                                                               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(
          <Menu.Item key="share">
            <Button type="text" onClick={() => onShareCollaboration(row)}>分享协作</Button>
          </Menu.Item>
        );
      }
    }
    // 以下操作只在"我的组件"tab显示
    if (!isCollaborator) {
      // 组件复制 - 所有权限都可以复制
      if (!isEligible([componentStatusConstant.DEFAULT, componentStatusConstant.DESIGN], row.componentStatus)) {
        items.push(
          <Menu.Item key="copy">
            <Button type="text" onClick={() => onCopyHandler(row)}>组件复制</Button>
          </Menu.Item>
        );
      }

      // 导出组件 - 所有权限都可以导出
      items.push(
        <Menu.Item key="export">
          <Button type="text" onClick={() => onExportComponent(row)}>导出组件</Button>
        </Menu.Item>
      );

      // 取消发布
      if (row.publicStatus === publicStatus.PUBLISHED && onCancelPublish) {
        items.push(
          <Menu.Item key="cancelPublish">
            <Button type="text" onClick={() => onCancelPublish(row)}>取消发布</Button>
          </Menu.Item>
        );
      }

      // 下架组件
      if (isEligible([componentStatusConstant.DEPLOYED], row.componentStatus)) {
        items.push(
          <Menu.Item key="stop">
            <Button type="text" onClick={() => onStopComponentShow(row)}>下架组件</Button>
          </Menu.Item>
        );
      }

      // 删除组件
      if (!isEligible([componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED], row.componentStatus)) {
        items.push(
          <Menu.Item key="delete">
            <Button type="text" onClick={() => onRowDel(row)}>删除组件</Button>
          </Menu.Item>
        );
      }
    }

    return <Menu>{items}</Menu>;
  };

  return (
    <>
      {/* 协同组件tab下不显示发布相关操作 */}
      {!isCollaborator && (
        <>
          {/* 发布组件 */}
          {row.publicStatus !== publicStatus.REVIEW && isEligible([componentStatusConstant.CODING, componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED], row.componentStatus) && (
            <Button
              type="text"
              onClick={() => onHandlePublishComponent(row)}
            >
              {row.publicStatus === publicStatus.PUBLISHED ? '更新版本' : '发布组件'}
            </Button>
          )}

          {/* 查看审核 */}
          {(row.publicStatus === publicStatus.REVIEW || row.publicStatus === publicStatus.REJECTED) && (
            <Button
              type="text"
              onClick={() => onGoToReview(row)}
            >
              查看审核
            </Button>
          )}

          {/* 公开组件/取消公开 */}
          {row.publishStatus !== publishStatusConstant.PUBLISHED ? (
            <Button
              type="text"
              onClick={() => onPublishOrRevokeComponent('publish', row.identifier, row.version)}
            >
              公开组件
            </Button>
          ) : (
            <Button
              type="text"
              onClick={() => onPublishOrRevokeComponent('revoke', row.identifier, row.version)}
            >
              取消公开
            </Button>
          )}
        </>
      )}

      {/* 查看源码 - admin和write权限可以查看源码 */}
      {canWrite && isEligible(
        [componentStatusConstant.CODING, componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED],
        row.componentStatus
      ) ? (
        <Button
          type="text"
          onClick={() => onSourceCodeView(row)}
        >
          查看源码
        </Button>
      ) : null}

      {/* 编辑组件 - 所有权限都可以点击，但read权限会是只读模式 */}
      <Button
        type="text"
        onClick={() => onShowEdit(row, index)}
      >
        编辑组件
      </Button>

      {/* 更多操作 */}
      <Dropdown droplist={renderDropdownMenu()} position="bl">
        <Button type="text">
          更多操作
        </Button>
      </Dropdown>
    </>
  );
};

export default HandleButtonGroup;