From 732aa1d132d7db6cd1f9c6211d2f3cc68696911f Mon Sep 17 00:00:00 2001 From: lixiaoming-bit <1404241558@qq.com> Date: Sat, 13 Aug 2022 01:46:23 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E5=A2=9E=E5=8A=A0=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E6=AF=94=E5=AF=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/package.json | 1 + .../document/version/index.module.scss | 38 +++++++++++ .../src/components/document/version/index.tsx | 64 ++++++++++++++++--- packages/client/src/helpers/generate-html.ts | 12 ++++ pnpm-lock.yaml | 6 ++ 5 files changed, 113 insertions(+), 8 deletions(-) create mode 100644 packages/client/src/helpers/generate-html.ts diff --git a/packages/client/package.json b/packages/client/package.json index f4383f4..6035a2a 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -63,6 +63,7 @@ "dompurify": "^2.3.5", "downloadjs": "^1.4.7", "html-to-docx": "^1.4.0", + "htmldiff-js": "^1.0.5", "interactjs": "^1.10.11", "katex": "^0.15.2", "kity": "^2.0.4", diff --git a/packages/client/src/components/document/version/index.module.scss b/packages/client/src/components/document/version/index.module.scss index 5182225..4cb062c 100644 --- a/packages/client/src/components/document/version/index.module.scss +++ b/packages/client/src/components/document/version/index.module.scss @@ -39,6 +39,44 @@ overflow: auto; } } + + :global { + #diff-visual { + del { + color: #cb4000; + text-decoration: none; + list-style: none; + background-color: #ffeaea; + } + + del::before { + position: relative; + top: -2px; + padding: 0 4px; + font-weight: 400; + color: #8a8f8d; + text-decoration: none; + content: '-'; + } + + ins { + color: green; + text-decoration: none; + list-style: none; + background-color: #e9ffe9; + } + + ins::before { + position: relative; + top: -2px; + padding: 0 4px; + font-weight: 400; + color: #8a8f8d; + text-decoration: none; + content: '+'; + } + } + } } aside { diff --git a/packages/client/src/components/document/version/index.tsx b/packages/client/src/components/document/version/index.tsx index 43d9ae0..8ea7930 100644 --- a/packages/client/src/components/document/version/index.tsx +++ b/packages/client/src/components/document/version/index.tsx @@ -1,10 +1,11 @@ import { IconChevronLeft } from '@douyinfe/semi-icons'; -import { Button, Modal, Typography } from '@douyinfe/semi-ui'; +import { Button, Modal, Select, Space, Tag, Typography } from '@douyinfe/semi-ui'; import { EditorContent, useEditor } from '@tiptap/react'; import cls from 'classnames'; import { DataRender } from 'components/data-render'; import { LocaleTime } from 'components/locale-time'; import { useDocumentVersion } from 'data/document'; +import { generateDiffHtml } from 'helpers/generate-html'; import { safeJSONParse } from 'helpers/json'; import { DocumentVersionControl } from 'hooks/use-document-version'; import { IsOnMobile } from 'hooks/use-on-mobile'; @@ -28,6 +29,7 @@ export const DocumentVersion: React.FC> = ({ documentId, onSelec const { visible, toggleVisible } = DocumentVersionControl.useHook(); const { data, loading, error, refresh } = useDocumentVersion(documentId, { enabled: visible }); const [selectedVersion, setSelectedVersion] = useState(null); + const [diffVersion, setDiffVersion] = useState(null); const editor = useEditor({ editable: false, @@ -42,10 +44,18 @@ export const DocumentVersion: React.FC> = ({ documentId, onSelec const select = useCallback( (version) => { + setDiffVersion(null); setSelectedVersion(version); editor.commands.setContent(safeJSONParse(version.data, { default: {} }).default); }, - [editor] + [editor, setDiffVersion] + ); + + const changeDiffVision = useCallback( + (version) => { + setDiffVersion(version); + }, + [setDiffVersion] ); const restore = useCallback(() => { @@ -54,6 +64,20 @@ export const DocumentVersion: React.FC> = ({ documentId, onSelec close(); }, [selectedVersion, close, onSelect]); + useEffect(() => { + if (diffVersion && selectedVersion) { + const historyVersion = data.find((item) => item.version === diffVersion); + + const diffHtml = generateDiffHtml( + safeJSONParse(selectedVersion.data, { default: {} }).default, + safeJSONParse(historyVersion.data, { default: {} }).default + ); + + const element = document.getElementById('diff-visual'); + element.innerHTML = diffHtml; + } + }, [diffVersion, data, selectedVersion]); + useEffect(() => { if (!editor) return; if (!data.length) return; @@ -77,11 +101,28 @@ export const DocumentVersion: React.FC> = ({ documentId, onSelec 版本记录 -
- -
+ {selectedVersion && !isMobile && ( +
+ + {new Date(+selectedVersion.version).toLocaleString()} + +
与
+ +
对比
+ + 增加的内容 + 删除的内容 + +
+ )}
+
} @@ -106,7 +150,11 @@ export const DocumentVersion: React.FC> = ({ documentId, onSelec
- + {diffVersion ? ( +
+ ) : ( + + )}