设置FunctionArea最大高度，避免功能按钮过多，撑开FunctionArea

src/pages/view/components/FunctionArea.tsx

@@ -12,99 +12,157 @@ const FunctionArea = () => {
   };
 
   return (
-    <Row gutter={[8, 8]}>
+    <Row gutter={[8, 8]} style={{ maxHeight: '400px', overflowY: 'auto' }}>
       <Col>
-        <Button onClick={() => handleButtonClick('Add L Mark')}>Add L Mark</Button>
+        <Button onClick={() => handleButtonClick('Add L Mark')}>
+          Add L Mark
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Add R Mark')}>Add R Mark</Button>
+        <Button onClick={() => handleButtonClick('Add R Mark')}>
+          Add R Mark
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Delete Selected Mark')}>Delete Selected Mark</Button>
+        <Button onClick={() => handleButtonClick('Delete Selected Mark')}>
+          Delete Selected Mark
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Horizontal Flip')}>Horizontal Flip</Button>
+        <Button onClick={() => handleButtonClick('Horizontal Flip')}>
+          Horizontal Flip
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Vertical Flip')}>Vertical Flip</Button>
+        <Button onClick={() => handleButtonClick('Vertical Flip')}>
+          Vertical Flip
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Rotate Counterclockwise 90°')}>Rotate Counterclockwise 90°</Button>
+        <Button
+          onClick={() => handleButtonClick('Rotate Counterclockwise 90°')}
+        >
+          Rotate Counterclockwise 90°
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Rotate Clockwise 90°')}>Rotate Clockwise 90°</Button>
+        <Button onClick={() => handleButtonClick('Rotate Clockwise 90°')}>
+          Rotate Clockwise 90°
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Rotate Any Angle')}>Rotate Any Angle</Button>
+        <Button onClick={() => handleButtonClick('Rotate Any Angle')}>
+          Rotate Any Angle
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Crop Image')}>Crop Image</Button>
+        <Button onClick={() => handleButtonClick('Crop Image')}>
+          Crop Image
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Delete Digital Mask')}>Delete Digital Mask</Button>
+        <Button onClick={() => handleButtonClick('Delete Digital Mask')}>
+          Delete Digital Mask
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Adjust Brightness and Contrast')}>Adjust Brightness and Contrast</Button>
+        <Button
+          onClick={() => handleButtonClick('Adjust Brightness and Contrast')}
+        >
+          Adjust Brightness and Contrast
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Crop Selected Area')}>Crop Selected Area</Button>
+        <Button onClick={() => handleButtonClick('Crop Selected Area')}>
+          Crop Selected Area
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Delete Mask')}>Delete Mask</Button>
+        <Button onClick={() => handleButtonClick('Delete Mask')}>
+          Delete Mask
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Image Comparison')}>Image Comparison</Button>
+        <Button onClick={() => handleButtonClick('Image Comparison')}>
+          Image Comparison
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Invert Contrast')}>Invert Contrast</Button>
+        <Button onClick={() => handleButtonClick('Invert Contrast')}>
+          Invert Contrast
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('1x1 Layout')}>1x1 Layout</Button>
+        <Button onClick={() => handleButtonClick('1x1 Layout')}>
+          1x1 Layout
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('1x2 Layout')}>1x2 Layout</Button>
+        <Button onClick={() => handleButtonClick('1x2 Layout')}>
+          1x2 Layout
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('2x2 Layout')}>2x2 Layout</Button>
+        <Button onClick={() => handleButtonClick('2x2 Layout')}>
+          2x2 Layout
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('4x4 Layout')}>4x4 Layout</Button>
+        <Button onClick={() => handleButtonClick('4x4 Layout')}>
+          4x4 Layout
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Magnifier')}>Magnifier</Button>
+        <Button onClick={() => handleButtonClick('Magnifier')}>
+          Magnifier
+        </Button>
       </Col>
       <Col>
         <Button onClick={() => handleButtonClick('Fit Size')}>Fit Size</Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Original Size')}>Original Size</Button>
+        <Button onClick={() => handleButtonClick('Original Size')}>
+          Original Size
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Zoom Image')}>Zoom Image</Button>
+        <Button onClick={() => handleButtonClick('Zoom Image')}>
+          Zoom Image
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Reset Cursor')}>Reset Cursor</Button>
+        <Button onClick={() => handleButtonClick('Reset Cursor')}>
+          Reset Cursor
+        </Button>
       </Col>
       <Col>
         <Button onClick={() => handleButtonClick('Pan')}>Pan</Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Invert Image')}>Invert Image</Button>
+        <Button onClick={() => handleButtonClick('Invert Image')}>
+          Invert Image
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Reset Image')}>Reset Image</Button>
+        <Button onClick={() => handleButtonClick('Reset Image')}>
+          Reset Image
+        </Button>
       </Col>
       <Col>
         <Button onClick={() => handleButtonClick('Snapshot')}>Snapshot</Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Advanced Processing')}>Advanced Processing</Button>
+        <Button onClick={() => handleButtonClick('Advanced Processing')}>
+          Advanced Processing
+        </Button>
       </Col>
       <Col>
         <Button onClick={() => handleButtonClick('Musician')}>Musician</Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Image Measurement')}>Image Measurement</Button>
+        <Button onClick={() => handleButtonClick('Image Measurement')}>
+          Image Measurement
+        </Button>
       </Col>
       <Col>
         <Button onClick={() => handleButtonClick('More')}>More</Button>