修改一些按钮图标，调整按钮位置

src/pages/view/components/FunctionArea.tsx

@@ -19,11 +19,11 @@ const FunctionButton = ({
   const dispatch = useDispatch();
 
   const handleButtonClick = () => {
-    if (action === 'AddMask' ||
+    if (action === 'AddMark' ||
       action === 'Delete Digital Mask' ||
       action === 'Crop Selected Area' ||
       ['Delete Mask',
-        'Image Comparison', 'Zoom Image', 'Reset Cursor', 'Pan', 'Snapshot', 
+        'Image Comparison', 'Zoom Image', 'Reset Cursor', 'Pan', 'Snapshot',
       ].includes(action)
     ) {
       showNotImplemented('');
@@ -81,10 +81,11 @@ const FunctionArea = () => {
     <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="Add Mark" action="AddMark" iconName="AddMark" />
       <FunctionButton
         title="Delete Selected Mark"
         action="Delete Selected Mark"
-        iconName="DeleteMask"
+        iconName="EraseMark"
       />
       <FunctionButton
         title="Horizontal Flip"
@@ -111,21 +112,25 @@ const FunctionArea = () => {
         action="Rotate Any Angle"
         iconName="RotateAnyDegree"
       />
-      <FunctionButton title="Add Mask" action="AddMask" iconName="AddMark" />
       <FunctionButton
-        title="Delete Digital Mask"
+        title="Crop Selected Area"
+        action="Crop Selected Area"
+        iconName="Crop"
+      />
+      <FunctionButton
+        title="删除数字遮线框"
         action="Delete Digital Mask"
-        iconName="EraseMark"
+        iconName="btn_RemoveCrop"
       />
       <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="Add Mask"
+        action="Add Mask"
+        iconName="AddMask"
       />
       <FunctionButton
         title="Delete Mask"

src/pages/view/components/ViewerContainer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import StackViewer, {
   activateMagnifier,
   addLMark,
-  addMask,
+  addMark,
   addRLabel,
   adjustBrightnessAndContrast,
   deleteSelectedMark,
@@ -316,9 +316,9 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
             rotateAnyAngle(viewportId);
           });
           break;
-        case 'AddMask':
+        case 'AddMark':
           selectedViewportIds.forEach((viewportId) => {
-            addMask(viewportId);
+            addMark(viewportId);
           });
           break;
         case 'Delete Digital Mask':

src/pages/view/components/viewers/stack.image.viewer.tsx

@@ -270,7 +270,7 @@ export function deleteSelectedMark(currentViewportId: string): void {
   viewport.render();
 }
 
-export function addMask(currentViewportId: string): void {
+export function addMark(currentViewportId: string): void {
   // Implement the logic to add a mask
   console.log('Adding Mask');
   // Add the specific logic to add a mask here