在大屏幕条件下，显示功能区所有按钮，方便下一步调试图像处理功能

src/pages/view/components/FunctionArea.tsx

@@ -1,42 +1,106 @@
 import React from 'react';
-import { Button, Space } from 'antd';
+import { Button, Row, Col } from 'antd';
 
 const FunctionArea = () => {
   return (
-    <Space>
-      <Button>Add L Mark</Button>
-      <Button>Add R Mark</Button>
-      <Button>Delete Selected Mark</Button>
-      <Button>Horizontal Flip</Button>
-      <Button>Vertical Flip</Button>
-      <Button>Rotate Counterclockwise 90°</Button>
-      <Button>Rotate Clockwise 90°</Button>
-      <Button>Rotate Any Angle</Button>
-      <Button>Crop Image</Button>
-      <Button>Delete Digital Mask</Button>
-      <Button>Adjust Brightness and Contrast</Button>
-      <Button>Crop Selected Area</Button>
-      <Button>Delete Mask</Button>
-      <Button>Image Comparison</Button>
-      <Button>Invert Contrast</Button>
-      <Button>1x1 Layout</Button>
-      <Button>1x2 Layout</Button>
-      <Button>2x2 Layout</Button>
-      <Button>4x4 Layout</Button>
-      <Button>Magnifier</Button>
-      <Button>Fit Size</Button>
-      <Button>Original Size</Button>
-      <Button>Zoom Image</Button>
-      <Button>Reset Cursor</Button>
-      <Button>Pan</Button>
-      <Button>Invert Image</Button>
-      <Button>Reset Image</Button>
-      <Button>Snapshot</Button>
-      <Button>Advanced Processing</Button>
-      <Button>Musician</Button>
-      <Button>Image Measurement</Button>
-      <Button>More</Button>
-    </Space>
+    <Row gutter={[8, 8]}>
+      <Col>
+        <Button>Add L Mark</Button>
+      </Col>
+      <Col>
+        <Button>Add R Mark</Button>
+      </Col>
+      <Col>
+        <Button>Delete Selected Mark</Button>
+      </Col>
+      <Col>
+        <Button>Horizontal Flip</Button>
+      </Col>
+      <Col>
+        <Button>Vertical Flip</Button>
+      </Col>
+      <Col>
+        <Button>Rotate Counterclockwise 90°</Button>
+      </Col>
+      <Col>
+        <Button>Rotate Clockwise 90°</Button>
+      </Col>
+      <Col>
+        <Button>Rotate Any Angle</Button>
+      </Col>
+      <Col>
+        <Button>Crop Image</Button>
+      </Col>
+      <Col>
+        <Button>Delete Digital Mask</Button>
+      </Col>
+      <Col>
+        <Button>Adjust Brightness and Contrast</Button>
+      </Col>
+      <Col>
+        <Button>Crop Selected Area</Button>
+      </Col>
+      <Col>
+        <Button>Delete Mask</Button>
+      </Col>
+      <Col>
+        <Button>Image Comparison</Button>
+      </Col>
+      <Col>
+        <Button>Invert Contrast</Button>
+      </Col>
+      <Col>
+        <Button>1x1 Layout</Button>
+      </Col>
+      <Col>
+        <Button>1x2 Layout</Button>
+      </Col>
+      <Col>
+        <Button>2x2 Layout</Button>
+      </Col>
+      <Col>
+        <Button>4x4 Layout</Button>
+      </Col>
+      <Col>
+        <Button>Magnifier</Button>
+      </Col>
+      <Col>
+        <Button>Fit Size</Button>
+      </Col>
+      <Col>
+        <Button>Original Size</Button>
+      </Col>
+      <Col>
+        <Button>Zoom Image</Button>
+      </Col>
+      <Col>
+        <Button>Reset Cursor</Button>
+      </Col>
+      <Col>
+        <Button>Pan</Button>
+      </Col>
+      <Col>
+        <Button>Invert Image</Button>
+      </Col>
+      <Col>
+        <Button>Reset Image</Button>
+      </Col>
+      <Col>
+        <Button>Snapshot</Button>
+      </Col>
+      <Col>
+        <Button>Advanced Processing</Button>
+      </Col>
+      <Col>
+        <Button>Musician</Button>
+      </Col>
+      <Col>
+        <Button>Image Measurement</Button>
+      </Col>
+      <Col>
+        <Button>More</Button>
+      </Col>
+    </Row>
   );
 };
 

src/pages/view/components/OperationPanel.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Card } from 'antd';
+import FunctionArea from './FunctionArea';
 
 const OperationPanel = () => {
   return (
     <Card title="Operation Panel" className="operation-panel">
-      <div>Function Area</div>
+      <div>
+        <FunctionArea />
+      </div>
       <div>Image State Control</div>
       <div>Transfer Area</div>
     </Card>