diff --git a/components/label/components/EditorContainer.tsx b/components/label/components/EditorContainer.tsx index 89813b1..d0fe8f8 100644 --- a/components/label/components/EditorContainer.tsx +++ b/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 { 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", }}> - + @@ -129,8 +156,8 @@ const EditorContainer = ({ fileInputRef.current?.click()} - aria-label="Upload image" - title="Upload image"> + aria-label="上传图片" + title="上传图片"> diff --git a/components/label/components/RightObjectTools.tsx b/components/label/components/RightObjectTools.tsx index 315101a..b51b728 100644 --- a/components/label/components/RightObjectTools.tsx +++ b/components/label/components/RightObjectTools.tsx @@ -379,6 +379,33 @@ const RightObjectTools: React.FC = (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 = (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 = (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 = (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, ]