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

import React from 'react';
import { Button, Flex } from 'antd';
import '@/themes/truncateText.css';
import { useDispatch } from 'react-redux';
import { setAction } from '@/states/view/functionAreaSlice';
import { switchToMeasurementPanel, switchToMorePanel, switchToAdvancedProcessingPanel, switchToRectCropPanel } from '@/states/panelSwitchSliceForView';
import Icon from '@/components/Icon';
import { showNotImplemented } from '@/utils/notificationHelper';

const FunctionButton = ({
  title,
  action,
  iconName,
}: {
  title: string;
  action: string;
  iconName: string;
}) => {
  const dispatch = useDispatch();

  const handleButtonClick = () => {
    if (action === 'AddMask' ||
      action === 'Delete Digital Mask' ||
      action === 'Crop Selected Area' ||
      ['Delete Mask',
        'Image Comparison', 'Zoom Image', 'Reset Cursor', 'Pan', 'Snapshot', 
      ].includes(action)
    ) {
      showNotImplemented('');
      return;
    }

    if (action === 'Image Measurement') {
      // 切换到测量面板
      dispatch(switchToMeasurementPanel());
    } else if (action === 'Rectangle Crop') {
      // 切换到矩形裁剪面板
      dispatch(switchToRectCropPanel());
    } else if (action === 'More') {
      // 切换到更多功能面板
      dispatch(switchToMorePanel());
    } else if (action === 'Advanced Processing') {
      // 切换到高级图像处理面板
      dispatch(switchToAdvancedProcessingPanel());
    } else {
      // 其他功能按钮保持原有逻辑
      dispatch(setAction(action));
    }
  };

  return (
    <Button
      onClick={handleButtonClick}
      icon={
        <Icon
          module="module-process"
          name={iconName}
          userId="base"
          theme="default"
          size="2x"
          state="normal"
        />
      }
      style={{
        width: '1.5rem',
        height: '1.5rem',
        padding: 0, // 关键
        //minWidth: 44,            // 保险
        //overflow: 'hidden',      // 超出的文字裁掉
      }}
      title={title}
      className="truncate-text"
    >
      {/* {title} */}
    </Button>
  );
};

const FunctionArea = () => {
  return (
    <Flex wrap gap="small" align="center" justify="start" className="p-1">
      <FunctionButton title="Add L Mark" action="Add L Mark" iconName="LMark" />
      <FunctionButton title="Add R Mark" action="Add R Mark" iconName="RMark" />
      <FunctionButton
        title="Delete Selected Mark"
        action="Delete Selected Mark"
        iconName="DeleteMask"
      />
      <FunctionButton
        title="Horizontal Flip"
        action="Horizontal Flip"
        iconName="HReverse"
      />
      <FunctionButton
        title="Vertical Flip"
        action="Vertical Flip"
        iconName="VReverse"
      />
      <FunctionButton
        title="Rotate Counterclockwise 90°"
        action="Rotate Counterclockwise 90"
        iconName="RotateL90"
      />
      <FunctionButton
        title="Rotate Clockwise 90°"
        action="Rotate Clockwise 90"
        iconName="RotateR90"
      />
      <FunctionButton
        title="Rotate Any Angle"
        action="Rotate Any Angle"
        iconName="RotateAnyDegree"
      />
      <FunctionButton title="Add Mask" action="AddMask" iconName="AddMark" />
      <FunctionButton
        title="Delete Digital Mask"
        action="Delete Digital Mask"
        iconName="EraseMark"
      />
      <FunctionButton
        title="Adjust Brightness and Contrast"
        action="Adjust Brightness and Contrast"
        iconName="btn_BrightnessContrast"
      />
      <FunctionButton
        title="Crop Selected Area"
        action="Crop Selected Area"
        iconName="Crop"
      />
      <FunctionButton
        title="Delete Mask"
        action="Delete Mask"
        iconName="DeleteMask"
      />
      <FunctionButton
        title="Image Comparison"
        action="Image Comparison"
        iconName="btn_Compare"
      />
      <FunctionButton
        title="反色对比"
        action="Invert Contrast"
        iconName="btn_ReverseColour"
      />
      <FunctionButton
        title="1x1 Layout"
        action="1x1 Layout"
        iconName="1x1_normal"
      />
      <FunctionButton
        title="1x2 Layout"
        action="1x2 Layout"
        iconName="1x2_normal"
      />
      <FunctionButton
        title="2x2 Layout"
        action="2x2 Layout"
        iconName="2x1_normal"
      />
      <FunctionButton
        title="4x4 Layout"
        action="4x4 Layout"
        iconName="2x2_normal"
      />
      <FunctionButton
        title="Magnifier"
        action="Magnifier"
        iconName="Magnifier"
      />
      <FunctionButton
        title="Fit Size"
        action="Fit Size"
        iconName="FitInWindow"
      />
      <FunctionButton
        title="Original Size"
        action="Original Size"
        iconName="1by1_normal"
      />
      <FunctionButton title="Zoom Image" action="Zoom Image" iconName="Zoom" />
      <FunctionButton
        title="Reset Cursor"
        action="Reset Cursor"
        iconName="btn_pointer"
      />
      <FunctionButton title="Pan" action="Pan" iconName="Pan" />
      <FunctionButton
        title="Invert Image"
        action="Invert Image"
        iconName="Invert"
      />
      <FunctionButton
        title="Reset Image"
        action="Reset Image"
        iconName="Reset"
      />
      <FunctionButton
        title="Snapshot"
        action="Snapshot"
        iconName="imgsnapshot"
      />
      <FunctionButton
        title="Advanced Processing"
        action="Advanced Processing"
        iconName="btn_Imageprocess"
      />

      <FunctionButton
        title="Image Measurement"
        action="Image Measurement"
        iconName="btn_Measurements"
      />
      <FunctionButton
        title="矩形裁剪"
        action="Rectangle Crop"
        iconName="btn_RectCrop"
      />
      <FunctionButton title="More" action="More" iconName="btn_OtherSetting" />
    </Flex>
  );
};

export default FunctionArea;