fix(hide): fix bug

components/label/components/EditorContainer.tsx

@@ -1,18 +1,18 @@
 "use client"
 
+import { Box } from "@mantine/core"
+import { RichTextEditor } from "@mantine/tiptap"
+import "@mantine/tiptap/styles.css"
+import { IconPhoto } from "@tabler/icons-react"
+import Image from "@tiptap/extension-image"
+import Link from "@tiptap/extension-link"
+import Placeholder from "@tiptap/extension-placeholder"
+import Underline from "@tiptap/extension-underline"
 import { useEditor } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
-import Underline from "@tiptap/extension-underline"
-import Link from "@tiptap/extension-link"
-import Image from "@tiptap/extension-image"
-import Placeholder from "@tiptap/extension-placeholder"
-import { RichTextEditor } from "@mantine/tiptap"
-import { useTopToolsStore } from "../useTopToolsStore"
-import { useKeyEventStore } from "../store"
 import { useEffect, useRef, type ChangeEvent } from "react"
-import { Box } from "@mantine/core"
+import { useKeyEventStore } from "../store"
-import { IconPhoto } from "@tabler/icons-react"
+import { useTopToolsStore } from "../useTopToolsStore"
-import "@mantine/tiptap/styles.css"
 
 export const splitWord = "@1024-"
 
@@ -22,6 +22,30 @@ const getEditorHtml = (rawValue?: string) => {
   return html ?? rawValue
 }
 
+const editorLabels = {
+  boldControlLabel: "加粗",
+  italicControlLabel: "斜体",
+  underlineControlLabel: "下划线",
+  strikeControlLabel: "删除线",
+  clearFormattingControlLabel: "清除格式",
+  codeControlLabel: "行内代码",
+  h1ControlLabel: "一级标题",
+  h2ControlLabel: "二级标题",
+  h3ControlLabel: "三级标题",
+  h4ControlLabel: "四级标题",
+  bulletListControlLabel: "无序列表",
+  orderedListControlLabel: "有序列表",
+  blockquoteControlLabel: "引用",
+  hrControlLabel: "分割线",
+  linkControlLabel: "插入链接",
+  unlinkControlLabel: "移除链接",
+  linkEditorInputLabel: "输入链接地址",
+  linkEditorInputPlaceholder: "请输入链接，例如：https://example.com",
+  linkEditorExternalLink: "在新标签页打开",
+  linkEditorInternalLink: "在当前标签页打开",
+  linkEditorSave: "保存",
+}
+
 interface EditorContainerProps {
   value: string
   onChange: (value: string) => void
@@ -96,7 +120,10 @@ const EditorContainer = ({
         borderRadius: "8px",
         padding: "4px",
       }}>
-      <RichTextEditor editor={editor} style={{ border: 0 }}>
+      <RichTextEditor
+        editor={editor}
+        labels={editorLabels}
+        style={{ border: 0 }}>
         <RichTextEditor.Toolbar>
           <RichTextEditor.ControlsGroup>
             <RichTextEditor.Bold />
@@ -129,8 +156,8 @@ const EditorContainer = ({
           <RichTextEditor.ControlsGroup>
             <RichTextEditor.Control
               onClick={() => fileInputRef.current?.click()}
-              aria-label="Upload image"
+              aria-label="上传图片"
-              title="Upload image">
+              title="上传图片">
               <IconPhoto stroke={1.5} size="1rem" />
             </RichTextEditor.Control>
           </RichTextEditor.ControlsGroup>

components/label/components/RightObjectTools.tsx

@@ -379,6 +379,33 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
     })
   }
 
+  const getTagVisibility = (tagCategory?: string) => {
+    const { showTags, showTagsConfigs } = useTopToolsStore.getState()
+    if (!showTags) return false
+    if (tagCategory === "mask") return showTagsConfigs.includes("外框")
+    if (tagCategory === "point_text") return showTagsConfigs.includes("点ID")
+    return true
+  }
+
+  const syncObjectItemsVisibility = useCallback(
+    (objectId: number, hide: boolean) => {
+      const sameIdItems = getItemsById(objectId)
+      if (!sameIdItems?.length) return
+      sameIdItems.forEach((item) => {
+        if (hide) {
+          item.visible = false
+          return
+        }
+        if (item.data?.type === "tag") {
+          item.visible = getTagVisibility(item.data?.tag_category)
+          return
+        }
+        item.visible = true
+      })
+    },
+    [getItemsById]
+  )
+
   const operationHide = useCallback(
     (operationId: string, hide: boolean) => {
       updateOperationStatus(activeImage + operationId, "HIDE", hide)
@@ -388,19 +415,15 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
         ?.get(operationId)
         ?.map((child) => {
           updatePathStatus(activeImage + child[0], "HIDE", hide)
-          if (getItemsById(child[0]) && getItemsById(child[0]).length) {
+          syncObjectItemsVisibility(child[0], hide)
-            getItemsById(child[0]).forEach((item) => {
+          // 隐藏时清空选中状态
-              item.visible = !hide
+          if (hide) setSelectedItemFalse(child[0])
-            })
-            // 隐藏时清空选中状态
-            if (hide) setSelectedItemFalse(child[0])
-          }
         })
     },
     [
       activeImage,
-      getItemsById,
       storeLabel,
+      syncObjectItemsVisibility,
       updateOperationStatus,
       updatePathStatus,
     ]
@@ -410,11 +433,9 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
     (operationId: string, objectId: number, hide: boolean) => {
       if (hide) {
         updatePathStatus(activeImage + objectId, "HIDE", hide)
-        if (getItemsById(objectId) && getItemsById(objectId).length) {
+        syncObjectItemsVisibility(objectId, hide)
-          getItemsById(objectId).forEach((item) => (item.visible = !hide))
+        // 隐藏时清空选中状态
-          // 隐藏时清空选中状态
+        setSelectedItemFalse(objectId)
-          setSelectedItemFalse(objectId)
-        }
         let childrenHideStatus = storeLabel
           .get(activeImage)
           ?.get(operationId)
@@ -427,28 +448,14 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
       } else {
         updateOperationStatus(activeImage + operationId, "HIDE", hide)
         updatePathStatus(activeImage + objectId, "HIDE", hide)
-        const configs = useTopToolsStore.getState().showTagsConfigs
+        syncObjectItemsVisibility(objectId, hide)
-        if (getItemsById(objectId) && getItemsById(objectId).length)
-          getItemsById(objectId).forEach((item) => {
-            let visible = !hide
-            if (item.data.type === "tag") {
-              if (item.data.tag_category === "mask") {
-                visible = configs.includes("外框")
-              } else if (item.data.tag_category === "point_text") {
-                visible = configs.includes("点ID")
-              } else {
-                visible = true
-              }
-            }
-            item.visible = visible
-          })
       }
     },
     [
       activeImage,
       getItemById,
-      getItemsById,
       storeLabel,
+      syncObjectItemsVisibility,
       updateOperationStatus,
       updatePathStatus,
     ]