perf(timer): perf

components/label/components/TopTools.tsx

@@ -89,7 +89,7 @@ import { useBottomToolsStore } from "../useBottomToolsStore"
 import { useDescToolsStore } from "../useDescToolsStore"
 import { usePaperStore } from "../usePaperStore"
 import { useRightToolsStore } from "../useRightToolsStore"
-import { useIntervalStore } from "../useTimerStore"
+import { useIntervalStore, useLabelTimeStore } from "../useTimerStore"
 import { useTopToolsStore } from "../useTopToolsStore"
 import { getSubAttrStatus } from "../util"
 import { labelTypeMap, TaskStatusEnum } from "../utils/constants"
@@ -133,6 +133,17 @@ const initialWorkLoad: WorkLoad = {
   question_size: {},
 }
 
+const TaskTimerDisplay = ({
+  currentTimeKey,
+}: {
+  currentTimeKey: "label" | "review1" | "review2"
+}) => {
+  const currentTime = useLabelTimeStore(
+    (state) => state.labelTime[currentTimeKey]
+  )
+  return <>{dayjs.duration(currentTime, "seconds").format("HH:mm:ss")}</>
+}
+
 const TopTools = (
   props: TopToolsComponentProps,
   ref: React.Ref<unknown> | undefined
@@ -157,13 +168,10 @@ const TopTools = (
   const [duplicateName, setDuplicateName] = useState("")
   const [recoverOpen, setRecoverOpen] = useState(false)
   const [taskOpen, setTaskOpen] = useState(false)
-  const {
-    label: labelData,
-    setLabel,
-    labelTime,
-    setLabelTime,
-    pushStateStack,
-  } = useLabelStore()
+  const labelData = useLabelStore((state) => state.label)
+  const setLabel = useLabelStore((state) => state.setLabel)
+  const pushStateStack = useLabelStore((state) => state.pushStateStack)
+  const setLabelTime = useLabelTimeStore((state) => state.setLabelTime)
   const { activeImage } = useBottomToolsStore()
   const {
     isView,
@@ -212,8 +220,10 @@ const TopTools = (
   } = useTopToolsStore()
 
   const { pathGroupMap } = useRightToolsStore()
-  const { isAutoSave, setIsAutoSave, autoSaveGap, setAutoSaveGap } =
-    useIntervalStore()
+  const isAutoSave = useIntervalStore((state) => state.isAutoSave)
+  const setIsAutoSave = useIntervalStore((state) => state.setIsAutoSave)
+  const autoSaveGap = useIntervalStore((state) => state.autoSaveGap)
+  const setAutoSaveGap = useIntervalStore((state) => state.setAutoSaveGap)
 
   // 当前是否可以操作功能按键
   const currentEditAuth = useMemo(() => {
@@ -723,10 +733,11 @@ const TopTools = (
         }
       }
 
+      const currentLabelTime = useLabelTimeStore.getState().labelTime
       const workTime = {
-        label_work_time: labelTime.label,
-        first_review_work_time: labelTime.review1,
-        second_review_work_time: labelTime.review2,
+        label_work_time: currentLabelTime.label,
+        first_review_work_time: currentLabelTime.review1,
+        second_review_work_time: currentLabelTime.review2,
       }
       // 生成新workload
       let time = 0
@@ -851,9 +862,6 @@ const TopTools = (
     }
   }, [
     labelCategories,
-    labelTime.label,
-    labelTime.review1,
-    labelTime.review2,
     oldWorkLoad,
     pathGroupMap,
     projectDetail,
@@ -1257,22 +1265,23 @@ const TopTools = (
       console.log(error)
       return
     }
+    const currentLabelTime = useLabelTimeStore.getState().labelTime
     const handleAction = (current_status: number) => {
       switch (current_status) {
         case 2:
           return {
             commit_action: key || 1,
-            work_time: labelTime.label,
+            work_time: currentLabelTime.label,
           }
         case 4:
           return {
             commit_action: key || 2,
-            work_time: labelTime.review1,
+            work_time: currentLabelTime.review1,
           }
         case 6:
           return {
             commit_action: key || 3,
-            work_time: labelTime.review2,
+            work_time: currentLabelTime.review2,
           }
         default:
           return {
@@ -1345,15 +1354,15 @@ const TopTools = (
   useEffect(() => {
     let timer = setInterval(() => {
       if (isView) return
-      setLabelTime({
-        ...labelTime,
-        [currentTimeKey]: labelTime[currentTimeKey] + 1,
-      })
+      setLabelTime((prev) => ({
+        ...prev,
+        [currentTimeKey]: prev[currentTimeKey] + 1,
+      }))
     }, 1000)
     return () => {
       clearInterval(timer)
     }
-  }, [currentTimeKey, isView, labelTime, setLabelTime])
+  }, [currentTimeKey, isView, setLabelTime])
 
   const form = useForm({
     initialValues: {
@@ -1748,9 +1757,7 @@ const TopTools = (
           {isLabelTask && (
             <Flex justify="space-between" align="center" gap="md" px="md">
               <Timer style={{ width: 20, height: 20 }} />
-              {dayjs
-                .duration(labelTime[currentTimeKey], "seconds")
-                .format("HH:mm:ss")}
+              <TaskTimerDisplay currentTimeKey={currentTimeKey} />
             </Flex>
           )}
           <Flex justify="flex-end" align="center" gap="md" px="0" flex={1}>