diff --git a/packages/devui-vue/devui/code-review/src/code-review-types.ts b/packages/devui-vue/devui/code-review/src/code-review-types.ts index 74a368ab81..9d9c9b1a19 100644 --- a/packages/devui-vue/devui/code-review/src/code-review-types.ts +++ b/packages/devui-vue/devui/code-review/src/code-review-types.ts @@ -58,6 +58,10 @@ export const codeReviewProps = { expandLoader: { type: Function as PropType<(interval: Array, update: (code: string) => void) => void>, }, + options: { + type: Object as PropType>, + default: () => ({}), + }, }; export type CodeReviewProps = ExtractPropTypes; diff --git a/packages/devui-vue/devui/code-review/src/code-review.tsx b/packages/devui-vue/devui/code-review/src/code-review.tsx index 4337d95306..c47e6bbef3 100644 --- a/packages/devui-vue/devui/code-review/src/code-review.tsx +++ b/packages/devui-vue/devui/code-review/src/code-review.tsx @@ -24,10 +24,10 @@ export default defineComponent({ mouseEvent, onCommentMouseLeave, onCommentIconClick, onCommentKeyDown, unCommentKeyDown, insertComment, - removeComment, updateCheckedLineClass } = useCodeReviewComment(reviewContentRef, props, ctx); + removeComment, updateCheckedLineClass, clearCheckedLines } = useCodeReviewComment(reviewContentRef, props, ctx); onMounted(() => { - ctx.emit('afterViewInit', { toggleFold, insertComment, removeComment, updateCheckedLineClass }); + ctx.emit('afterViewInit', { toggleFold, insertComment, removeComment, updateCheckedLineClass, clearCheckedLines }); onCommentKeyDown(); }); // 销毁 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 c61346a564..62846b36ba 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 @@ -338,6 +338,13 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: } }; + const clearCheckedLines = () => { + currentLeftLineNumbers = []; + currentRightLineNumbers = []; + checkedLineCodeString = []; + resetCommentClass(); + }; + const mouseEvent = allowComment.value ? { onMousemove: onMouseMove, onMouseleave: onMouseleave } : {}; window.addEventListener('scroll', resetLeftTop); @@ -353,6 +360,7 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: // currentLeftLineNumbers, // currentRightLineNumbers, updateCheckedLineClass, + clearCheckedLines, onCommentMouseLeave, onCommentIconClick, onCommentKeyDown, diff --git a/packages/devui-vue/devui/code-review/src/composables/use-code-review-expand.ts b/packages/devui-vue/devui/code-review/src/composables/use-code-review-expand.ts index cbc29a0c9e..6f73409d49 100644 --- a/packages/devui-vue/devui/code-review/src/composables/use-code-review-expand.ts +++ b/packages/devui-vue/devui/code-review/src/composables/use-code-review-expand.ts @@ -58,7 +58,12 @@ export function useCodeReviewExpand(reviewContentRef: Ref, props: C attachExpandUpDownButton(loadMoreLine.children[0] as HTMLElement, 'down'); }; - const insertIncrementCodeForDoubleColumn = (code: string, direction: 'up' | 'down', referenceDom: HTMLElement | null | undefined) => { + const insertIncrementCodeForDoubleColumn = ( + code: string, + direction: 'up' | 'down', + referenceDom: HTMLElement | null | undefined, + options: Record + ) => { if (!referenceDom) { return; } @@ -69,7 +74,7 @@ export function useCodeReviewExpand(reviewContentRef: Ref, props: C const prefix = '--- updated_at\tJan 1, 2019, 0:0:0 AM\n+++ updated_at\tJan 1, 2019, 0:0:0 AM\n'; const container = document.createElement('div'); // 解析code - parseDiffCode(container, prefix + code, outputFormat.value, true); + parseDiffCode(container, prefix + code, outputFormat.value, options, true); const trNodes = Array.from(container.querySelectorAll('tr')); const expandLine = trNodes.find((element) => (element.children[1] as HTMLElement)?.innerText.trim().match(ExpandLineReg)); @@ -158,7 +163,12 @@ export function useCodeReviewExpand(reviewContentRef: Ref, props: C attachExpandUpDownButton(loadMoreLine.children[0] as HTMLElement, 'down'); }; - const insertIncrementCode = (code: string, direction: 'up' | 'down', referenceDom: HTMLElement | null | undefined) => { + const insertIncrementCode = ( + code: string, + direction: 'up' | 'down', + referenceDom: HTMLElement | null | undefined, + options: Record + ) => { if (!referenceDom) { return; } @@ -169,7 +179,7 @@ export function useCodeReviewExpand(reviewContentRef: Ref, props: C const prefix = '--- updated_at\tJan 1, 2019, 0:0:0 AM\n+++ updated_at\tJan 1, 2019, 0:0:0 AM\n'; const container = document.createElement('div'); // 解析code - parseDiffCode(container, prefix + code, outputFormat.value, true); + parseDiffCode(container, prefix + code, outputFormat.value, options, true); const trNodes = Array.from(container.querySelectorAll('tr')); const expandLine = trNodes.find((element) => (element.children[1] as HTMLElement)?.innerText.trim().match(ExpandLineReg)); @@ -213,7 +223,7 @@ export function useCodeReviewExpand(reviewContentRef: Ref, props: C } }; - const onExpandButtonClick = (e: Event) => { + const onExpandButtonClick = (e: Event, options: Record) => { const composedPath = e.composedPath() as HTMLElement[]; const expandIconDom = composedPath.find((element) => element.classList?.contains('expand-icon')); if (expandIconDom) { @@ -224,8 +234,8 @@ export function useCodeReviewExpand(reviewContentRef: Ref, props: C const [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd] = getLineNumberFromDataset(expandIconDom, expandThreshold.value); expandLoader?.value?.([leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code: string) => { outputFormat.value === 'line-by-line' - ? insertIncrementCode(code, direction, expandIconDom.parentElement?.parentElement) - : insertIncrementCodeForDoubleColumn(code, direction, expandIconDom.parentElement?.parentElement); + ? insertIncrementCode(code, direction, expandIconDom.parentElement?.parentElement, options) + : insertIncrementCodeForDoubleColumn(code, direction, expandIconDom.parentElement?.parentElement, options); }); } }; diff --git a/packages/devui-vue/devui/code-review/src/composables/use-code-review.ts b/packages/devui-vue/devui/code-review/src/composables/use-code-review.ts index 02d5e585c1..3952e125d8 100644 --- a/packages/devui-vue/devui/code-review/src/composables/use-code-review.ts +++ b/packages/devui-vue/devui/code-review/src/composables/use-code-review.ts @@ -18,7 +18,7 @@ export function useCodeReview(props: CodeReviewProps, ctx: SetupContext) { diffFile.value = Diff2Html.parse(diff.value); nextTick(() => { if (inBrowser && !showBlob.value) { - parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value); + parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value, props.options); allowExpand.value && insertExpandButton(); ctx.emit('contentRefresh', JSON.parse(JSON.stringify(diffFile.value))); } @@ -26,7 +26,7 @@ export function useCodeReview(props: CodeReviewProps, ctx: SetupContext) { }; const onContentClick = (e: Event) => { - onExpandButtonClick(e); + onExpandButtonClick(e, props.options); }; watch(showBlob, initDiffContent); diff --git a/packages/devui-vue/devui/code-review/src/utils.ts b/packages/devui-vue/devui/code-review/src/utils.ts index 8f5a58a3e1..8e3559b3c6 100644 --- a/packages/devui-vue/devui/code-review/src/utils.ts +++ b/packages/devui-vue/devui/code-review/src/utils.ts @@ -159,14 +159,20 @@ function addClassToDiffCode(codeStrArr: RegExpMatchArray | null, theClassName: s } // 解析diff -export function parseDiffCode(container: HTMLElement, code: string, outputFormat: OutputFormat, isAddCode = false) { +export function parseDiffCode( + container: HTMLElement, + code: string, + outputFormat: OutputFormat, + options: Record, + isAddCode = false +) { const diff2HtmlUi = new Diff2HtmlUI(container, code, { drawFileList: false, matching: 'lines', outputFormat: outputFormat, highlight: true, - diffStyle: 'char', rawTemplates: TemplateMap[outputFormat], + ...options, }); if (outputFormat === 'side-by-side') { let diffHtmlStr = diff2HtmlUi.diffHtml; diff --git a/packages/devui-vue/docs/components/code-review/index.md b/packages/devui-vue/docs/components/code-review/index.md index fd69a9682d..87f4214c39 100644 --- a/packages/devui-vue/docs/components/code-review/index.md +++ b/packages/devui-vue/docs/components/code-review/index.md @@ -587,6 +587,7 @@ export default defineComponent({ | allow-expand | `boolean` | true | 可选,是否支持展开非 diff 折叠代码 | | expand-threshold | `number` | 50 | 可选,展开所有代码行的阈值,低于此阈值全部展开,高于此阈值分向上和向下两个操作展开 | | expand-loader | `(interval: Array, update: (code: string) => void) => void` | -- | 可选,展开代码回调函数,interval 为展开边界,获取展开代码后,执行 update 更新视图 | +|options|`object`|{}|可选,传给`diff2html`的配置项| ### CodeReview 事件 @@ -667,5 +668,8 @@ interface CodeReviewMethods { // 更新选中行样式,直接调用一般用于展开时更新选中行样式,像示例中一样使用 updateCheckedLineClass: (); + + // 清除选中行样式 + clearCheckedLines: () => void; } ``` diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index b665bfd698..1fd40fc688 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.22", + "version": "1.6.23", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [