fix(hide): fix bug

This commit is contained in:
zhangheng
2026-04-01 16:24:43 +08:00
parent d757aab517
commit 0cc5bb160a
2 changed files with 76 additions and 42 deletions

View File

@@ -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 { IconPhoto } from "@tabler/icons-react"
import "@mantine/tiptap/styles.css"
import { useKeyEventStore } from "../store"
import { useTopToolsStore } from "../useTopToolsStore"
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"
title="Upload image">
aria-label="上传图片"
title="上传图片">
<IconPhoto stroke={1.5} size="1rem" />
</RichTextEditor.Control>
</RichTextEditor.ControlsGroup>

View File

@@ -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) {
getItemsById(child[0]).forEach((item) => {
item.visible = !hide
})
// 隐藏时清空选中状态
if (hide) setSelectedItemFalse(child[0])
}
syncObjectItemsVisibility(child[0], hide)
// 隐藏时清空选中状态
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) {
getItemsById(objectId).forEach((item) => (item.visible = !hide))
// 隐藏时清空选中状态
setSelectedItemFalse(objectId)
}
syncObjectItemsVisibility(objectId, hide)
// 隐藏时清空选中状态
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
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
})
syncObjectItemsVisibility(objectId, hide)
}
},
[
activeImage,
getItemById,
getItemsById,
storeLabel,
syncObjectItemsVisibility,
updateOperationStatus,
updatePathStatus,
]