refactor(processing->functionArea): restructure button layout to ensure consistent size and dimensions

src/pages/view/components/FunctionArea.tsx

@@ -1,350 +1,97 @@
 import React from 'react';
-import { Button, Row, Col } from 'antd';
+import { Button, Flex } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
 import '@/themes/truncateText.css';
 import { useDispatch } from 'react-redux';
 import { setAction } from '@/states/view/functionAreaSlice';
 
-const FunctionArea = () => {
+const FunctionButton = ({
+  title,
+  action,
+}: {
+  title: string;
+  action: string;
+}) => {
   const dispatch = useDispatch();
 
-  const handleButtonClick = (action: string) => {
+  const handleButtonClick = () => {
     dispatch(setAction(action));
-    // dispatch(clearAction());
   };
 
   return (
-    <Row gutter={[8, 8]} style={{ overflowY: 'auto' }}>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Add L Mark')}
-          style={{ width: '44px', height: '44px' }}
-          title="Add L Mark"
-          className="truncate-text"
-        >
-          Add L Mark
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Add R Mark')}
-          style={{ width: '44px', height: '44px' }}
-          title="Add R Mark"
-          className="truncate-text"
-        >
-          Add R Mark
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Delete Selected Mark')}
-          style={{ width: '44px', height: '44px' }}
-          title="Delete Selected Mark"
-          className="truncate-text"
-        >
-          Delete Selected Mark
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Horizontal Flip')}
-          style={{ width: '44px', height: '44px' }}
-          title="Horizontal Flip"
-          className="truncate-text"
-        >
-          Horizontal Flip
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Vertical Flip')}
-          style={{ width: '44px', height: '44px' }}
-          title="Vertical Flip"
-          className="truncate-text"
-        >
-          Vertical Flip
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Rotate Counterclockwise 90')}
-          style={{ width: '44px', height: '44px' }}
-          title="Rotate Counterclockwise 90°"
-          className="truncate-text"
-        >
-          Rotate Counterclockwise 90°
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Rotate Clockwise 90')}
-          style={{ width: '44px', height: '44px' }}
-          title="Rotate Clockwise 90°"
-          className="truncate-text"
-        >
-          Rotate Clockwise 90°
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Rotate Any Angle')}
-          style={{ width: '44px', height: '44px' }}
-          title="Rotate Any Angle"
-          className="truncate-text"
-        >
-          Rotate Any Angle
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('AddMask')}
-          style={{ width: '44px', height: '44px' }}
-          title="Add Mask"
-          className="truncate-text"
-        >
-          Add Mask
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Delete Digital Mask')}
-          style={{ width: '44px', height: '44px' }}
-          title="Delete Digital Mask"
-          className="truncate-text"
-        >
-          Delete Digital Mask
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Adjust Brightness and Contrast')}
-          style={{ width: '44px', height: '44px' }}
-          title="Adjust Brightness and Contrast"
-          className="truncate-text"
-        >
-          Adjust Brightness and Contrast
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Crop Selected Area')}
-          style={{ width: '44px', height: '44px' }}
-          title="Crop Selected Area"
-          className="truncate-text"
-        >
-          Crop Selected Area
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Delete Mask')}
-          style={{ width: '44px', height: '44px' }}
-          title="Delete Mask"
-          className="truncate-text"
-        >
-          Delete Mask
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Image Comparison')}
-          style={{ width: '44px', height: '44px' }}
-          title="Image Comparison"
-          className="truncate-text"
-        >
-          Image Comparison
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Invert Contrast')}
-          style={{ width: '44px', height: '44px' }}
-          title="Invert Contrast"
-          className="truncate-text"
-        >
-          Invert Contrast
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('1x1 Layout')}
-          style={{ width: '44px', height: '44px' }}
-          title="1x1 Layout"
-          className="truncate-text"
-        >
-          1x1 Layout
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('1x2 Layout')}
-          style={{ width: '44px', height: '44px' }}
-          title="1x2 Layout"
-          className="truncate-text"
-        >
-          1x2 Layout
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('2x2 Layout')}
-          style={{ width: '44px', height: '44px' }}
-          title="2x2 Layout"
-          className="truncate-text"
-        >
-          2x2 Layout
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('4x4 Layout')}
-          style={{ width: '44px', height: '44px' }}
-          title="4x4 Layout"
-          className="truncate-text"
-        >
-          4x4 Layout
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Magnifier')}
-          style={{ width: '44px', height: '44px' }}
-          title="Magnifier"
-          className="truncate-text"
-        >
-          Magnifier
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Fit Size')}
-          style={{ width: '44px', height: '44px' }}
-          title="Fit Size"
-          className="truncate-text"
-        >
-          Fit Size
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Original Size')}
-          style={{ width: '44px', height: '44px' }}
-          title="Original Size"
-          className="truncate-text"
-        >
-          Original Size
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Zoom Image')}
-          style={{ width: '44px', height: '44px' }}
-          title="Zoom Image"
-          className="truncate-text"
-        >
-          Zoom Image
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Reset Cursor')}
-          style={{ width: '44px', height: '44px' }}
-          title="Reset Cursor"
-          className="truncate-text"
-        >
-          Reset Cursor
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Pan')}
-          style={{ width: '44px', height: '44px' }}
-          title="Pan"
-          className="truncate-text"
-        >
-          Pan
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Invert Image')}
-          style={{ width: '44px', height: '44px' }}
-          title="Invert Image"
-          className="truncate-text"
-        >
-          Invert Image
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Reset Image')}
-          style={{ width: '44px', height: '44px' }}
-          title="Reset Image"
-          className="truncate-text"
-        >
-          Reset Image
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Snapshot')}
-          style={{ width: '44px', height: '44px' }}
-          title="Snapshot"
-          className="truncate-text"
-        >
-          Snapshot
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Advanced Processing')}
-          style={{ width: '44px', height: '44px' }}
-          title="Advanced Processing"
-          className="truncate-text"
-        >
-          Advanced Processing
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Musician')}
-          style={{ width: '44px', height: '44px' }}
-          title="Musician"
-          className="truncate-text"
-        >
-          Musician
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Image Measurement')}
-          style={{ width: '44px', height: '44px' }}
-          title="Image Measurement"
-          className="truncate-text"
-        >
-          Image Measurement
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('More')}
-          style={{ width: '44px', height: '44px' }}
-          title="More"
-          className="truncate-text"
-        >
-          More
-        </Button>
-      </Col>
-      <Col>
-        <Button
-          onClick={() => handleButtonClick('Apply Colormap')}
-          style={{ width: '44px', height: '44px' }}
-          title="Apply Colormap"
-          className="truncate-text"
-        >
-          Apply Colormap
-        </Button>
-      </Col>
-    </Row>
+    <Button
+      onClick={handleButtonClick}
+      icon={<DeleteOutlined />}
+      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" />
+      <FunctionButton title="Add R Mark" action="Add R Mark" />
+      <FunctionButton
+        title="Delete Selected Mark"
+        action="Delete Selected Mark"
+      />
+      <FunctionButton title="Horizontal Flip" action="Horizontal Flip" />
+      <FunctionButton title="Vertical Flip" action="Vertical Flip" />
+      <FunctionButton
+        title="Rotate Counterclockwise 90°"
+        action="Rotate Counterclockwise 90"
+      />
+      <FunctionButton
+        title="Rotate Clockwise 90°"
+        action="Rotate Clockwise 90"
+      />
+      <FunctionButton title="Rotate Any Angle" action="Rotate Any Angle" />
+      <FunctionButton title="Add Mask" action="AddMask" />
+      <FunctionButton
+        title="Delete Digital Mask"
+        action="Delete Digital Mask"
+      />
+      <FunctionButton
+        title="Adjust Brightness and Contrast"
+        action="Adjust Brightness and Contrast"
+      />
+      <FunctionButton title="Crop Selected Area" action="Crop Selected Area" />
+      <FunctionButton title="Delete Mask" action="Delete Mask" />
+      <FunctionButton title="Image Comparison" action="Image Comparison" />
+      <FunctionButton title="Invert Contrast" action="Invert Contrast" />
+      <FunctionButton title="1x1 Layout" action="1x1 Layout" />
+      <FunctionButton title="1x2 Layout" action="1x2 Layout" />
+      <FunctionButton title="2x2 Layout" action="2x2 Layout" />
+      <FunctionButton title="4x4 Layout" action="4x4 Layout" />
+      <FunctionButton title="Magnifier" action="Magnifier" />
+      <FunctionButton title="Fit Size" action="Fit Size" />
+      <FunctionButton title="Original Size" action="Original Size" />
+      <FunctionButton title="Zoom Image" action="Zoom Image" />
+      <FunctionButton title="Reset Cursor" action="Reset Cursor" />
+      <FunctionButton title="Pan" action="Pan" />
+      <FunctionButton title="Invert Image" action="Invert Image" />
+      <FunctionButton title="Reset Image" action="Reset Image" />
+      <FunctionButton title="Snapshot" action="Snapshot" />
+      <FunctionButton
+        title="Advanced Processing"
+        action="Advanced Processing"
+      />
+      <FunctionButton title="Musician" action="Musician" />
+      <FunctionButton title="Image Measurement" action="Image Measurement" />
+      <FunctionButton title="More" action="More" />
+      <FunctionButton title="Apply Colormap" action="Apply Colormap" />
+    </Flex>
   );
 };