From dc121af9c0021e57ad3e1e3ac0164ca5fdb3c201 Mon Sep 17 00:00:00 2001 From: TongxinXie Date: Tue, 26 Nov 2024 11:04:43 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(CodeReview):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=9F=90=E4=BA=9B=E5=9C=BA=E6=99=AF=E8=BF=94=E5=9B=9E=E7=9A=84?= =?UTF-8?q?=E8=A1=8C=E5=8F=B7=E5=88=97=E8=A1=A8=E4=B8=8E=E5=AE=9E=E9=99=85?= =?UTF-8?q?=E9=80=89=E4=B8=AD=E7=9A=84=E8=A1=8C=E5=8F=B7=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E4=B8=8D=E4=B8=80=E8=87=B4=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../composables/use-code-review-comment.ts | 38 +++++-------------- .../use-code-review-line-selection.ts | 13 +++---- .../devui-vue/devui/code-review/src/utils.ts | 37 ++++++++++++++++++ 3 files changed, 53 insertions(+), 35 deletions(-) diff --git a/packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts b/packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts index 6a86b07983..7874c30d08 100644 --- a/packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts +++ b/packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts @@ -14,7 +14,7 @@ import { export function useCodeReviewComment(reviewContentRef: Ref, props: CodeReviewProps, ctx: SetupContext) { const { outputFormat, allowComment, allowChecked } = toRefs(props); const ns = useNamespace('code-review'); - const { onMousedown } = useCodeReviewLineSelection(reviewContentRef, props, updateLineNumbers, afterCheckLines); + const { onMousedown } = useCodeReviewLineSelection(reviewContentRef, props, afterMouseup); const commentLeft = ref(-100); const commentTop = ref(-100); let currentLeftLineNumber = -1; @@ -117,26 +117,6 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: resetLeftTop(); } }; - // 获代码行 取值方法 - const getLineNumbers = (currentNumber: number, currentNumbers: Array, moveDirection: 'up' | 'down') => { - if (currentNumber === -1) { - // 当前行没数据不代表之前选中的没数据，此时返回原来的 - return currentNumbers; - } - if (currentNumbers.length === 0) { - return [currentNumber]; - } - const numbers = [...currentNumbers]; - let max = Math.max(...numbers); - let min = Math.min(...numbers); - if (moveDirection === 'down') { - max = currentNumber; - } - if (moveDirection === 'up') { - min = currentNumber; - } - return Array.from({ length: max - min + 1 }, (_, i) => i + min); - }; // 获取一些公共类和判断 const getCommonClassAndJudge = () => { const checkedLine = [currentLeftLineNumbers, currentRightLineNumbers]; @@ -211,13 +191,9 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: } getDoubleCheckedLineCode(shouldRenderClass); } - function updateLineNumbers(moveDirection: 'up' | 'down') { - currentLeftLineNumbers = - currentLeftLineNumber === -1 ? currentLeftLineNumbers : getLineNumbers(currentLeftLineNumber, currentLeftLineNumbers, moveDirection); - currentRightLineNumbers = - currentRightLineNumber === -1 - ? currentRightLineNumbers - : getLineNumbers(currentRightLineNumber, currentRightLineNumbers, moveDirection); + function updateLineNumbers({ lefts, rights }: { lefts: number[]; rights: number[] }) { + currentLeftLineNumbers = lefts; + currentRightLineNumbers = rights; getCheckedLineCode(false); afterCheckLinesEmitData = { left: currentLeftLineNumber, @@ -230,6 +206,8 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: }; } const updateCheckedLineClass = () => { + const lineClassName = props.outputFormat === 'line-by-line' ? '.d2h-code-linenumber' : '.d2h-code-side-linenumber'; + allTrNodes = reviewContentRef.value.querySelectorAll(lineClassName); getCheckedLineCode(true); }; // 还原样式 @@ -280,6 +258,10 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: function afterCheckLines() { ctx.emit('afterCheckLines', afterCheckLinesEmitData); } + function afterMouseup(lineNumbers: { lefts: number[]; rights: number[] }) { + updateLineNumbers(lineNumbers); + afterCheckLines(); + } // 图标或者单行的点击 const onCommentIconClick = (e: Event) => { if (e) { diff --git a/packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts b/packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts index 38edc38257..59448cee26 100644 --- a/packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts +++ b/packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts @@ -1,13 +1,12 @@ import type { Ref } from 'vue'; import type { CodeReviewProps } from '../code-review-types'; import { useNamespace } from '../../../shared/hooks/use-namespace'; -import { findParentTrNode } from '../utils'; +import { findParentTrNode, getLineNumbers } from '../utils'; export function useCodeReviewLineSelection( reviewContentRef: Ref, props: CodeReviewProps, - mouseMoveCb: (moveDirection: 'up' | 'down') => void, - mouseupCb: () => void + afterMouseup: (lineNumbers: { lefts: number[]; rights: number[] }) => void ) { const ns = useNamespace('code-review'); let dragging = false; @@ -16,7 +15,7 @@ export function useCodeReviewLineSelection( let isClickedLeft: boolean | undefined; let shouldClear: boolean; let isMouseMoved: boolean; - let startClientY: number; + let checkedTrNodes: HTMLElement[] = []; const onMousedown = (e: MouseEvent) => { // 鼠标左键按下 @@ -45,7 +44,6 @@ export function useCodeReviewLineSelection( dragging = true; shouldClear = true; isMouseMoved = false; - startClientY = e.clientY; e.preventDefault(); e.stopPropagation(); document.addEventListener('mousemove', onMousemove); @@ -76,7 +74,6 @@ export function useCodeReviewLineSelection( if (endIndex === -1) { return; } - mouseMoveCb(e.clientY > startClientY ? 'down' : 'up'); if (startIndex > endIndex) { [startIndex, endIndex] = [endIndex, startIndex]; } @@ -89,9 +86,11 @@ export function useCodeReviewLineSelection( } else { position = 'right'; } + checkedTrNodes = []; for (let i = 0; i < trNodes.length; i++) { if (i >= startIndex && i <= endIndex) { toggleCommentCheckedClass(trNodes[i], true, position); + checkedTrNodes.push(trNodes[i]); } else { toggleCommentCheckedClass(trNodes[i], false, position); } @@ -101,7 +100,7 @@ export function useCodeReviewLineSelection( function onMouseup() { dragging = false; if (isMouseMoved) { - mouseupCb(); + afterMouseup(getLineNumbers(checkedTrNodes, props.outputFormat, isClickedLeft ? 'left' : 'right')); } document.removeEventListener('mouseup', onMouseup); document.removeEventListener('mousemove', onMousemove); diff --git a/packages/devui-vue/devui/code-review/src/utils.ts b/packages/devui-vue/devui/code-review/src/utils.ts index 74180edba5..9064fd2105 100644 --- a/packages/devui-vue/devui/code-review/src/utils.ts +++ b/packages/devui-vue/devui/code-review/src/utils.ts @@ -528,3 +528,40 @@ export function findParentTrNode(node: HTMLElement | null) { } return findParentTrNode(node.parentElement); } + +/* 根据最大最小行号，获取从小到大的完整行号列表 */ +function getFullNumberList(min: number, max: number) { + return Array.from({ length: max - min + 1 }, (_, i) => i + min); +} + +/* 多行选中，返回选中行的左右侧行号 */ +export function getLineNumbers(trNodes: HTMLElement[], outputFormat: OutputFormat, side: LineSide) { + const leftNumbers: number[] = []; + const rightNumbers: number[] = []; + + for (let i = 0; i < trNodes.length; i++) { + const itemTrNode = trNodes[i]; + if (outputFormat === 'line-by-line') { + const lineNumberTdNode = Array.from(itemTrNode.children)[0] as HTMLElement; + const leftLineNumber = parseInt((lineNumberTdNode.children[0] as HTMLElement)?.innerText); + const rightLineNumber = parseInt((lineNumberTdNode.children[1] as HTMLElement)?.innerText); + + leftLineNumber && leftNumbers.push(leftLineNumber); + rightLineNumber && rightNumbers.push(leftLineNumber); + } else { + const tdNodes = Array.from(itemTrNode.children) as HTMLElement[]; + const lineNumberTdNode: HTMLElement = tdNodes[side === 'left' ? 0 : 2]; + if (lineNumberTdNode && notEmptyNode(lineNumberTdNode)) { + const lineNumber = parseInt(lineNumberTdNode.innerText); + if (lineNumber) { + side === 'left' ? leftNumbers.push(lineNumber) : rightNumbers.push(lineNumber); + } + } + } + } + + const lefts = leftNumbers.length ? getFullNumberList(leftNumbers[0], leftNumbers[leftNumbers.length - 1]) : leftNumbers; + const rights = rightNumbers.length ? getFullNumberList(rightNumbers[0], rightNumbers[rightNumbers.length - 1]) : rightNumbers; + + return { lefts, rights }; +} From b089c1c897b8a67c24b740a85c5f28ee94e11c28 Mon Sep 17 00:00:00 2001 From: TongxinXie Date: Tue, 26 Nov 2024 11:05:58 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index 1d38592356..146742524a 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.25", + "version": "1.6.26", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [ From b2c40b76c394060cb3fd748d9679408bd1661fcc Mon Sep 17 00:00:00 2001 From: TongxinXie Date: Tue, 26 Nov 2024 16:13:14 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(CodeReview):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=90=8C=E6=AD=A5=E6=97=B6=E7=9A=84=E9=94=99?= =?UTF-8?q?=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/code-review/src/utils.ts | 2 +- packages/devui-vue/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/code-review/src/utils.ts b/packages/devui-vue/devui/code-review/src/utils.ts index 9064fd2105..ab35ce4bb3 100644 --- a/packages/devui-vue/devui/code-review/src/utils.ts +++ b/packages/devui-vue/devui/code-review/src/utils.ts @@ -547,7 +547,7 @@ export function getLineNumbers(trNodes: HTMLElement[], outputFormat: OutputForma const rightLineNumber = parseInt((lineNumberTdNode.children[1] as HTMLElement)?.innerText); leftLineNumber && leftNumbers.push(leftLineNumber); - rightLineNumber && rightNumbers.push(leftLineNumber); + rightLineNumber && rightNumbers.push(rightLineNumber); } else { const tdNodes = Array.from(itemTrNode.children) as HTMLElement[]; const lineNumberTdNode: HTMLElement = tdNodes[side === 'left' ? 0 : 2]; diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index 146742524a..01b89be49b 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.26", + "version": "1.6.27", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [