feat(CodeReview): 支持传入options&暴露清除选中行样式的方法 (#1912) (#1913)

* feat(CodeReview): 支持传入options&暴露清除选中行样式的方法
DevCloudFE · Nov 23, 2024 · 3160137 · 3160137
1 parent 76c27dd
commit 3160137
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 14 deletions.
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
@@ -58,6 +58,10 @@ export const codeReviewProps = {
   expandLoader: {
     type: Function as PropType<(interval: Array<number | undefined>, update: (code: string) => void) => void>,
   },
+  options: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => ({}),
+  },
 };
 export type CodeReviewProps = ExtractPropTypes<typeof codeReviewProps>;
 

diff --git 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
@@ -338,6 +338,13 @@ export function useCodeReviewComment(reviewContentRef: Ref<HTMLElement>, 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<HTMLElement>, 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
@@ -58,7 +58,12 @@ export function useCodeReviewExpand(reviewContentRef: Ref<HTMLElement>, 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<string, any>
+  ) => {
     if (!referenceDom) {
       return;
     }
@@ -69,7 +74,7 @@ export function useCodeReviewExpand(reviewContentRef: Ref<HTMLElement>, 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<HTMLElement>, 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<string, any>
+  ) => {
     if (!referenceDom) {
       return;
     }
@@ -169,7 +179,7 @@ export function useCodeReviewExpand(reviewContentRef: Ref<HTMLElement>, 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<HTMLElement>, props: C
     }
   };
 
-  const onExpandButtonClick = (e: Event) => {
+  const onExpandButtonClick = (e: Event, options: Record<string, any>) => {
     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<HTMLElement>, 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
@@ -18,15 +18,15 @@ 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)));
       }
     });
   };
 
   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
@@ -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<string, any>,
+  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
@@ -587,6 +587,7 @@ export default defineComponent({
 | allow-expand     | `boolean`                                                           | true           | 可选，是否支持展开非 diff 折叠代码                                                 |
 | expand-threshold | `number`                                                            | 50             | 可选，展开所有代码行的阈值，低于此阈值全部展开，高于此阈值分向上和向下两个操作展开 |
 | expand-loader    | `(interval: Array<number>, 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
@@ -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": [