dros/src/pages/view/components/OperationPanel.tsx

import { Divider, Flex, Spin } from 'antd';
import { useSelector } from 'react-redux';
import { selectIsAnyViewportLoading } from '@/states/view/imageLoadingSlice';
import FunctionArea from './FunctionArea';
import TransferArea from './TransferArea';
import SendPanelForView from '../../output/SendPanelForView';
import MeasurementPanel from './MeasurementPanel';
import MorePanel from './MorePanel';
import AdvancedProcessingPanel from './AdvancedProcessingPanel';
import RectCropPanel from './RectCropPanel';
import MarkPanel from './MarkPanel';
import ImageStateControl from './ImageStateControl';
import { RootState } from '../../../states/store';
import SliderAdjustmentPanel from './SliderAdjustmentPanel';

const OperationPanel = () => {
  const currentPanel = useSelector(
    (state: RootState) => state.panelSwitchForView.currentPanel
  );
  
  // 检查是否有任何视口正在加载
  const isAnyViewportLoading = useSelector(selectIsAnyViewportLoading);

  const renderPanel = () => {
    switch (currentPanel) {
      case 'OperationPanel':
        return (
          <Flex
            vertical
            gap="small"
            style={{
              height: '100%',
              overflowY: 'auto',
              //padding: '0.5rem' 
            }}
          >
            <FunctionArea />
            <Divider style={{ margin: 0 }} />
            <ImageStateControl />
            <Divider style={{ margin: 0 }} />
            <TransferArea />
          </Flex>
        );
      case 'SendPanel':
        return <SendPanelForView />;
      case 'MeasurementPanel':
        return <MeasurementPanel />;
      case 'MorePanel':
        return <MorePanel />;
      case 'AdvancedProcessingPanel':
        return <AdvancedProcessingPanel />;
      case 'RectCropPanel':
        return <RectCropPanel />;
      case 'MarkPanel':
        return <MarkPanel />;
      case 'SliderAdjustmentPanel':
        return <SliderAdjustmentPanel />
      default:
        return (
          <Flex
            vertical
            gap="small"
            style={{
              height: '100%',
              overflowY: 'auto',
              padding: '0.5rem'
            }}
          >
            <FunctionArea />
            <Divider style={{ margin: 0 }} />
            <ImageStateControl />
            <Divider style={{ margin: 0 }} />
            <TransferArea />
          </Flex>
        );
    }
  };

  return (
    <div style={{ height: '100%', position: 'relative' }}>
      {renderPanel()}
      
      {/* 加载遮罩层 */}
      {isAnyViewportLoading && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.3)',
            zIndex: 1000,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'not-allowed',
          }}
        >
          <Spin size="large" tip="图像加载中，请稍候..." />
        </div>
      )}
    </div>
  );
};

export default OperationPanel;