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';
import { getCurrentAppKey } from '@/features/workflow/runtime/flowRuntime';

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 currentAppKey = getCurrentAppKey(currentAppData);
  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;