flow-playform-react/src/pages/flowEditor/components/actionBar.tsx

import React from 'react';
import { Button, Message } from '@arco-design/web-react';
import {
  IconSave,
  IconPlayArrow,
  IconCodeSquare,
  IconPause,
  IconSync,
  IconUndo,
  IconRedo
} from '@arco-design/web-react/icon';
import { updateLogBarStatus } from '@/store/ideContainer';
import { useSelector, useDispatch } from 'react-redux';

const ButtonGroup = Button.Group;

interface ActionBarProps {
  useDefault: boolean;
  onSave?: () => void;
  onUndo?: () => void;
  onRedo?: () => void;
  canUndo?: boolean;
  canRedo?: boolean;
  onRun?: (isRunning: boolean) => void;
  onPause?: (isPaused: boolean) => void;
  onReRun?: () => void;
  isRunning?: boolean;
}

const ActionBar: React.FC<ActionBarProps> = ({
                                               useDefault,
                                               onSave,
                                               onUndo,
                                               onRedo,
                                               canUndo = false,
                                               canRedo = false,
                                               onRun,
                                               onPause,
                                               onReRun,
                                               isRunning = false
                                             }) => {
  const { logBarStatus, appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer);
  const dispatch = useDispatch();

  // 辅助函数：获取当前应用/子流程的唯一标识符
  const getCurrentAppKey = () => {
    if (!currentAppData) return null;
    // 如果是子流程（key包含'sub'），使用key作为标识符
    if (currentAppData.key && currentAppData.key.includes('sub')) {
      return currentAppData.key;
    }
    // 否则使用id
    return currentAppData.id;
  };

  // 获取当前应用的运行状态
  const currentAppKey = getCurrentAppKey();
  const currentAppIsRunning = currentAppKey && appRuntimeData[currentAppKey]
    ? appRuntimeData[currentAppKey].isRunning
    : false;

  // 获取当前应用的暂停状态（如果有的话）
  const currentAppIsPaused = currentAppKey && appRuntimeData[currentAppKey]
    ? appRuntimeData[currentAppKey].isPaused
    : false;

  const changeLogBarStatus = () => {
    dispatch(updateLogBarStatus(!logBarStatus));
  };

  const handleRun = () => {
    onRun?.(!currentAppIsRunning);
  };

  // 暂停/恢复应用
  const handlePause = () => {
    onPause?.(currentAppIsPaused);
  };

  // 重跑应用
  const handleReRun = () => {
    onReRun?.();
  };

  return (
    <div className="action-bar">
      <Button onClick={onSave} type="primary" shape="round" icon={<IconSave />}>保存</Button>
      {useDefault && (
        <>
          <ButtonGroup style={{ marginLeft: 8 }}>
            <Button
              type="outline"
              shape="round"
              icon={<IconPlayArrow />}
              onClick={() => handleRun()}
              style={{ padding: '0 8px', backgroundColor: '#fff' }}
              status={currentAppIsRunning ? 'danger' : undefined}
            >
              {currentAppIsRunning ? '停止' : '运行'}
            </Button>
            <Button
              type="outline"
              shape="round"
              icon={<IconPause />}
              onClick={() => handlePause()}
              style={{ padding: '0 8px', backgroundColor: '#fff' }}
              disabled={!currentAppIsRunning}
              status={currentAppIsPaused ? 'warning' : undefined}
            >
              {currentAppIsPaused ? '恢复' : '暂停'}
            </Button>
            {/*<Button*/}
            {/*  type="outline"*/}
            {/*  shape="round"*/}
            {/*  icon={<IconSync />}*/}
            {/*  onClick={() => handleReRun()}*/}
            {/*  style={{ padding: '0 8px', backgroundColor: '#fff' }}*/}
            {/*  disabled={!currentAppIsRunning}*/}
            {/*>*/}
            {/*  重跑*/}
            {/*</Button>*/}
            <Button
              type="outline"
              shape="round"
              icon={<IconCodeSquare />}
              style={{ padding: '0 8px', backgroundColor: '#fff' }}
              onClick={() => changeLogBarStatus()}
            >
              日志
            </Button>
          </ButtonGroup>
          {/*<ButtonGroup style={{ marginLeft: 15 }}>*/}
          {/*  <Button*/}
          {/*    type="outline"*/}
          {/*    shape="round"*/}
          {/*    icon={<IconUndo />}*/}
          {/*    onClick={onUndo}*/}
          {/*    disabled={!canUndo}*/}
          {/*    status="danger"*/}
          {/*    style={{ padding: '0 8px', backgroundColor: '#fff' }}*/}
          {/*  >*/}
          {/*    撤销*/}
          {/*  </Button>*/}
          {/*  <Button*/}
          {/*    type="outline"*/}
          {/*    shape="round"*/}
          {/*    icon={<IconRedo />}*/}
          {/*    onClick={onRedo}*/}
          {/*    disabled={!canRedo}*/}
          {/*    style={{ padding: '0 8px', backgroundColor: '#fff' }}*/}
          {/*  >*/}
          {/*    重做*/}
          {/*  </Button>*/}
          {/*</ButtonGroup>*/}
        </>
      )}
    </div>
  );
};

export default ActionBar;