fix(righttool): fix

components/label/LabelNossr.tsx

@@ -80,6 +80,9 @@ const initialState: LabelState = new Map()
 const operationTypeList = [101, 102, 103, 104]
 let latestProjectDetailRequestSeq = 0
 let latestTaskDetailRequestSeq = 0
+const RIGHT_PANEL_TRANSITION =
+  "width 160ms ease, min-width 160ms ease, opacity 160ms ease"
+const RIGHT_PANEL_WILL_CHANGE = "width, min-width, opacity"
 
 // utils
 const getRectPoints = ([sx, sy, w, h]: number[]) => {
@@ -95,6 +98,19 @@ const getSegmentPoints = (arr: Array<number[]>) => {
   return arr.map((item) => [item[0], item[1]])
 }
 
+const getRightPanelViewportStyle = (width: number) => {
+  const stableWidth = Math.max(0, Math.round(width))
+  return {
+    position: "absolute" as const,
+    top: 0,
+    left: 0,
+    width: stableWidth,
+    minWidth: stableWidth,
+    height: "100%",
+    contain: "layout paint",
+  }
+}
+
 const videoExtPattern = /\.(mp4|mov|avi|mkv|webm|h264|264|ts|m4v)$/i
 const GLOBAL_LOADING_Z_INDEX = 900
 const videoMimeByExt: Record<string, string> = {
@@ -2551,17 +2567,16 @@ const LabelPage = ({
     }
   }, [])
 
-  const mainBoxHeight = useMemo(() => {
+  const bottomToolsHeight = useMemo(() => {
     if (projectDetail?.label_type === 5 && metaOperation) {
-      let h = `calc(100% - ${headerHeight}px - 198px)`
-      return h
-    } else if (showMultiFrame) {
-      let h = `calc(100% - ${headerHeight}px - 150px)`
-      return h
+      return 128
     }
-    let h = `calc(100% - ${headerHeight}px - 70px)`
-    return h
-  }, [projectDetail?.label_type, metaOperation, showMultiFrame, headerHeight])
+    return 80
+  }, [metaOperation, projectDetail?.label_type])
+
+  const mainBoxHeight = useMemo(() => {
+    return `calc(100% - ${headerHeight}px - ${70 + bottomToolsHeight}px)`
+  }, [bottomToolsHeight, headerHeight])
 
   const selectedTagPreviewList = useMemo(() => {
     if (!showTags) return []
@@ -2741,48 +2756,139 @@ const LabelPage = ({
             </Flex>
           </Box>
         </Box>
-        {showTaskList && (
-          <Box w={sizes[1]} miw={300} style={{ flexShrink: 0 }}>
+        <Box
+          w={sizes[1]}
+          miw={showTaskList ? 300 : 0}
+          style={{
+            position: "relative",
+            flexShrink: 0,
+            overflow: "hidden",
+            opacity: showTaskList ? 1 : 0,
+            visibility: showTaskList ? "visible" : "hidden",
+            pointerEvents: showTaskList ? "auto" : "none",
+            transition: RIGHT_PANEL_TRANSITION,
+            willChange: RIGHT_PANEL_WILL_CHANGE,
+          }}>
+          <Box style={getRightPanelViewportStyle(Math.max(sizes[1], 300))}>
             <RightTaskTools
               projectDetail={projectDetail}
               project_id={projectId}
               task_id={taskId}
             />
           </Box>
-        )}
-        {showGroupList && (
-          <Box w={sizes[2]} miw={200} style={{ flexShrink: 0 }}>
+        </Box>
+        <Box
+          w={sizes[2]}
+          miw={showGroupList ? 200 : 0}
+          style={{
+            position: "relative",
+            flexShrink: 0,
+            overflow: "hidden",
+            opacity: showGroupList ? 1 : 0,
+            visibility: showGroupList ? "visible" : "hidden",
+            pointerEvents: showGroupList ? "auto" : "none",
+            transition: RIGHT_PANEL_TRANSITION,
+            willChange: RIGHT_PANEL_WILL_CHANGE,
+          }}>
+          <Box style={getRightPanelViewportStyle(Math.max(sizes[2], 200))}>
             <RightGroupTools
               labelState={labelState}
               projectDetail={projectDetail}
             />
           </Box>
-        )}
-        {showDescList && projectDetail && projectDetail.label_type === 5 && (
-          <Box w={sizes[3]} miw={350} style={{ flexShrink: 0 }}>
+        </Box>
+        <Box
+          w={sizes[3]}
+          miw={
+            showDescList && projectDetail && projectDetail.label_type === 5
+              ? 350
+              : 0
+          }
+          style={{
+            position: "relative",
+            flexShrink: 0,
+            overflow: "hidden",
+            opacity:
+              showDescList && projectDetail && projectDetail.label_type === 5
+                ? 1
+                : 0,
+            visibility:
+              showDescList && projectDetail && projectDetail.label_type === 5
+                ? "visible"
+                : "hidden",
+            pointerEvents:
+              showDescList && projectDetail && projectDetail.label_type === 5
+                ? "auto"
+                : "none",
+            transition: RIGHT_PANEL_TRANSITION,
+            willChange: RIGHT_PANEL_WILL_CHANGE,
+          }}>
+          <Box style={getRightPanelViewportStyle(Math.max(sizes[3], 350))}>
             <RightDescTools taskDetail={taskDetail} />
           </Box>
-        )}
-        {showDescList && projectDetail && projectDetail.label_type === 6 && (
-          <Box w={sizes[4]} miw={350} style={{ flexShrink: 0 }}>
+        </Box>
+        <Box
+          w={sizes[4]}
+          miw={
+            showDescList && projectDetail && projectDetail.label_type === 6
+              ? 350
+              : 0
+          }
+          style={{
+            position: "relative",
+            flexShrink: 0,
+            overflow: "hidden",
+            opacity:
+              showDescList && projectDetail && projectDetail.label_type === 6
+                ? 1
+                : 0,
+            visibility:
+              showDescList && projectDetail && projectDetail.label_type === 6
+                ? "visible"
+                : "hidden",
+            pointerEvents:
+              showDescList && projectDetail && projectDetail.label_type === 6
+                ? "auto"
+                : "none",
+            transition: RIGHT_PANEL_TRANSITION,
+            willChange: RIGHT_PANEL_WILL_CHANGE,
+          }}>
+          <Box style={getRightPanelViewportStyle(Math.max(sizes[4], 350))}>
             <RightQATools ref={qaToolContainerRef} taskDetail={taskDetail} />
           </Box>
-        )}
-        {showObjectList && (
-          <Box w={sizes[5]} miw={350} style={{ flexShrink: 0 }}>
+        </Box>
+        <Box
+          w={sizes[5]}
+          miw={showObjectList ? 350 : 0}
+          style={{
+            position: "relative",
+            flexShrink: 0,
+            overflow: "hidden",
+            opacity: showObjectList ? 1 : 0,
+            visibility: showObjectList ? "visible" : "hidden",
+            pointerEvents: showObjectList ? "auto" : "none",
+            transition: RIGHT_PANEL_TRANSITION,
+            willChange: RIGHT_PANEL_WILL_CHANGE,
+          }}>
+          <Box style={getRightPanelViewportStyle(Math.max(sizes[5], 350))}>
             <RightObjectTools
               taskDetail={taskDetail}
               labelState={labelState}
               projectDetail={projectDetail}
             />
           </Box>
-        )}
+        </Box>
         {/* </Flex> */}
       </Flex>
       <Box
         w="100%"
-        h={projectDetail?.label_type === 5 && metaOperation ? 128 : 80}
-        display={showMultiFrame ? "block" : "none"}>
+        h={bottomToolsHeight}
+        style={{
+          overflow: "hidden",
+          opacity: showMultiFrame ? 1 : 0,
+          pointerEvents: showMultiFrame ? "auto" : "none",
+          transition: "opacity 160ms ease",
+        }}>
         <BottomTools
           labelState={labelState}
           projectDetail={projectDetail}