vue-devui 1.5.8 → 1.5.10

package/code-review/index.es.js

@@ -1,7 +1,24 @@
-import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, provide, Teleport, createTextVNode, onBeforeMount } from "vue";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, provide, Teleport, createTextVNode, vShow } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import Clipboard from "clipboard";
 import * as Diff2Html from "diff2html";
+import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui";
 const fixedOverlayProps = {
   modelValue: {
     type: Boolean,
@@ -283,6 +300,7 @@ const FlexibleOverlay = defineComponent({
     };
   }
 });
+const inBrowser = typeof window !== "undefined";
 const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 const isObject = (val) => val !== null && typeof val === "object";
 const ns$1 = useNamespace("popper-trigger");
@@ -1082,7 +1100,7 @@ var lodash = { exports: {} };
     }
     var runInContext = function runInContext2(context) {
       context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
-      var Array2 = context.Array, Date = context.Date, Error = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError = context.TypeError;
+      var Array2 = context.Array, Date = context.Date, Error2 = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError2 = context.TypeError;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -1096,7 +1114,7 @@ var lodash = { exports: {} };
       var objectCtorString = funcToString.call(Object2);
       var oldDash = root._;
       var reIsNative = RegExp2("^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$");
-      var Buffer = moduleExports ? context.Buffer : undefined$1, Symbol2 = context.Symbol, Uint8Array = context.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol2 ? Symbol2.isConcatSpreadable : undefined$1, symIterator = Symbol2 ? Symbol2.iterator : undefined$1, symToStringTag = Symbol2 ? Symbol2.toStringTag : undefined$1;
+      var Buffer2 = moduleExports ? context.Buffer : undefined$1, Symbol2 = context.Symbol, Uint8Array2 = context.Uint8Array, allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol2 ? Symbol2.isConcatSpreadable : undefined$1, symIterator = Symbol2 ? Symbol2.iterator : undefined$1, symToStringTag = Symbol2 ? Symbol2.toStringTag : undefined$1;
       var defineProperty = function() {
         try {
           var func = getNative(Object2, "defineProperty");
@@ -1106,11 +1124,11 @@ var lodash = { exports: {} };
         }
       }();
       var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date && Date.now !== root.Date.now && Date.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
-      var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
-      var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
-      var metaMap = WeakMap && new WeakMap();
+      var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
+      var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap2 = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
+      var metaMap = WeakMap2 && new WeakMap2();
       var realNames = {};
-      var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap);
+      var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap2);
       var symbolProto = Symbol2 ? Symbol2.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
       function lodash2(value) {
         if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
@@ -1563,7 +1581,7 @@ var lodash = { exports: {} };
       }
       function baseDelay(func, wait, args) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         return setTimeout(function() {
           func.apply(undefined$1, args);
@@ -2358,7 +2376,7 @@ var lodash = { exports: {} };
       }
       function cloneArrayBuffer(arrayBuffer) {
         var result2 = new arrayBuffer.constructor(arrayBuffer.byteLength);
-        new Uint8Array(result2).set(new Uint8Array(arrayBuffer));
+        new Uint8Array2(result2).set(new Uint8Array2(arrayBuffer));
         return result2;
       }
       function cloneDataView(dataView, isDeep) {
@@ -2607,7 +2625,7 @@ var lodash = { exports: {} };
           while (index2--) {
             var func = funcs[index2];
             if (typeof func != "function") {
-              throw new TypeError(FUNC_ERROR_TEXT);
+              throw new TypeError2(FUNC_ERROR_TEXT);
             }
             if (prereq && !wrapper && getFuncName(func) == "wrapper") {
               var wrapper = new LodashWrapper([], true);
@@ -2820,7 +2838,7 @@ var lodash = { exports: {} };
       function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary2, arity) {
         var isBindKey = bitmask & WRAP_BIND_KEY_FLAG;
         if (!isBindKey && typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         var length = partials ? partials.length : 0;
         if (!length) {
@@ -2940,7 +2958,7 @@ var lodash = { exports: {} };
             object = object.buffer;
             other = other.buffer;
           case arrayBufferTag:
-            if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
+            if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array2(object), new Uint8Array2(other))) {
               return false;
             }
             return true;
@@ -3102,7 +3120,7 @@ var lodash = { exports: {} };
         return result2;
       };
       var getTag = baseGetTag;
-      if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map && getTag(new Map()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap && getTag(new WeakMap()) != weakMapTag) {
+      if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map && getTag(new Map()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
         getTag = function(value) {
           var result2 = baseGetTag(value), Ctor = result2 == objectTag ? value.constructor : undefined$1, ctorString = Ctor ? toSource(Ctor) : "";
           if (ctorString) {
@@ -4087,7 +4105,7 @@ var lodash = { exports: {} };
       };
       function after(n, func) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         n = toInteger(n);
         return function() {
@@ -4104,7 +4122,7 @@ var lodash = { exports: {} };
       function before(n, func) {
         var result2;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         n = toInteger(n);
         return function() {
@@ -4148,7 +4166,7 @@ var lodash = { exports: {} };
       function debounce(func, wait, options) {
         var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
         if (isObject2(options)) {
@@ -4237,7 +4255,7 @@ var lodash = { exports: {} };
       }
       function memoize(func, resolver) {
         if (typeof func != "function" || resolver != null && typeof resolver != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         var memoized = function() {
           var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
@@ -4254,7 +4272,7 @@ var lodash = { exports: {} };
       memoize.Cache = MapCache;
       function negate(predicate) {
         if (typeof predicate != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         return function() {
           var args = arguments;
@@ -4298,14 +4316,14 @@ var lodash = { exports: {} };
       });
       function rest(func, start) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         start = start === undefined$1 ? start : toInteger(start);
         return baseRest(func, start);
       }
       function spread(func, start) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         start = start == null ? 0 : nativeMax(toInteger(start), 0);
         return baseRest(function(args) {
@@ -4319,7 +4337,7 @@ var lodash = { exports: {} };
       function throttle(func, wait, options) {
         var leading = true, trailing = true;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         if (isObject2(options)) {
           leading = "leading" in options ? !!options.leading : leading;
@@ -4461,7 +4479,7 @@ var lodash = { exports: {} };
       }
       function isNative(value) {
         if (isMaskable(value)) {
-          throw new Error(CORE_ERROR_TEXT);
+          throw new Error2(CORE_ERROR_TEXT);
         }
         return baseIsNative(value);
       }
@@ -4999,7 +5017,7 @@ var lodash = { exports: {} };
         if (!variable) {
           source = "with (obj) {\n" + source + "\n}\n";
         } else if (reForbiddenIdentifierChars.test(variable)) {
-          throw new Error(INVALID_TEMPL_VAR_ERROR_TEXT);
+          throw new Error2(INVALID_TEMPL_VAR_ERROR_TEXT);
         }
         source = (isEvaluating ? source.replace(reEmptyStringLeading, "") : source).replace(reEmptyStringMiddle, "$1").replace(reEmptyStringTrailing, "$1;");
         source = "function(" + (variable || "obj") + ") {\n" + (variable ? "" : "obj || (obj = {});\n") + "var __t, __p = ''" + (isEscaping ? ", __e = _.escape" : "") + (isEvaluating ? ", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n" : ";\n") + source + "return __p\n}";
@@ -5118,7 +5136,7 @@ var lodash = { exports: {} };
         try {
           return apply(func, undefined$1, args);
         } catch (e) {
-          return isError(e) ? e : new Error(e);
+          return isError(e) ? e : new Error2(e);
         }
       });
       var bindAll = flatRest(function(object, methodNames) {
@@ -5132,7 +5150,7 @@ var lodash = { exports: {} };
         var length = pairs == null ? 0 : pairs.length, toIteratee = getIteratee();
         pairs = !length ? [] : arrayMap(pairs, function(pair) {
           if (typeof pair[1] != "function") {
-            throw new TypeError(FUNC_ERROR_TEXT);
+            throw new TypeError2(FUNC_ERROR_TEXT);
           }
           return [toIteratee(pair[0]), pair[1]];
         });
@@ -6198,13 +6216,28 @@ const codeReviewProps = {
     type: Boolean,
     default: false
   },
+  allowComment: {
+    type: Boolean,
+    default: true
+  },
+  allowExpand: {
+    type: Boolean,
+    default: true
+  },
+  showBlob: {
+    type: Boolean,
+    default: false
+  },
   outputFormat: {
     type: String,
     default: "line-by-line"
   },
-  expandAllThreshold: {
+  expandThreshold: {
     type: Number,
     default: 50
+  },
+  expandLoader: {
+    type: Function
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -6296,10 +6329,285 @@ var CodeReviewHeader = defineComponent({
 });
 const ExpandLineReg = /^@@ -(\d+),(\d+) \+(\d+),(\d+) @@/;
 const FirstLineReg = /^@@ -[0,1](?!\d)/;
+const TableTrReg = /<tr[^>]*>[\s\S]*?<\/tr>/gi;
+const TableTdReg = /<td[^>]*>[\s\S]*?<\/td>/gi;
+const TableTbodyReg = /<tbody[^>]*>[\s\S]*?<\/tbody>/gi;
+const TableTbodyAttrReg = /<tbody([^>]*)>/i;
+const EmptyDataLangReg = /<div[^>]* data-lang="">[\s\S]*?<\/div>/gi;
+const LineByLineTemplate = `<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
+<div class="d2h-file-diff">
+    <div class="d2h-code-wrapper">
+        <table class="d2h-diff-table">
+            <tbody class="d2h-diff-tbody">
+            {{{diffs}}}
+            </tbody>
+        </table>
+    </div>
+</div>
+</div>`;
+const SideBySideTemplate = `<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
+<div class="d2h-files-diff">
+    <div class="d2h-file-side-diff">
+        <div class="d2h-code-wrapper">
+            <table class="d2h-diff-table">
+                <tbody class="d2h-diff-tbody">
+                {{{diffs.left}}}
+                {{{diffs.right}}}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</div>`;
+const EmptyTemplate = {
+  "generic-empty-diff": ""
+};
+const TemplateMap = {
+  "line-by-line": __spreadValues({ "line-by-line-file-diff": LineByLineTemplate }, EmptyTemplate),
+  "side-by-side": __spreadValues({ "side-by-side-file-diff": SideBySideTemplate }, EmptyTemplate)
+};
 function notEmptyNode(node) {
   const classes = node.classList;
   return !classes.contains("d2h-info") && !classes.contains("d2h-emptyplaceholder") && !classes.contains("comment-cell");
 }
+function insertIncrementLineToPage(referenceDom, trNodes, direction) {
+  if (direction === "up") {
+    const nextSibling = referenceDom.nextElementSibling;
+    trNodes.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, nextSibling);
+    });
+  } else {
+    trNodes.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, referenceDom);
+    });
+  }
+}
+function ifRemoveExpandLineForDoubleColumn(expandDom, newExpandDom, direction) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const matches = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
+  if (!matches) {
+    return true;
+  }
+  const leftLineNumber = parseInt(matches[1]);
+  const addedLine = parseInt(matches[2]);
+  const rightLineNumber = parseInt(matches[3]);
+  if (direction === "up") {
+    const prevSibling = expandDom.previousElementSibling;
+    if (!prevSibling) {
+      if (leftLineNumber === 1 && rightLineNumber === 1) {
+        expandDom == null ? void 0 : expandDom.remove();
+        return true;
+      }
+    } else {
+      const prevLeftLineNumber = parseInt((_b = (_a = prevSibling.children) == null ? void 0 : _a[0]) == null ? void 0 : _b.innerText);
+      const prevRightLineNumber = parseInt((_d = (_c = prevSibling.children) == null ? void 0 : _c[2]) == null ? void 0 : _d.innerText);
+      if (leftLineNumber === prevLeftLineNumber + 1 && rightLineNumber === prevRightLineNumber + 1) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  } else {
+    const nextSibling = expandDom.nextElementSibling;
+    if (nextSibling) {
+      const nextLeftLineNumber = parseInt((_f = (_e = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.innerText);
+      const nextRightLineNumber = parseInt((_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[2]) == null ? void 0 : _h.innerText);
+      if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function ifRemoveExpandLine(expandDom, newExpandDom, direction) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const matches = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
+  if (!matches) {
+    return true;
+  }
+  const leftLineNumber = parseInt(matches[1]);
+  const addedLine = parseInt(matches[2]);
+  const rightLineNumber = parseInt(matches[3]);
+  if (direction === "up") {
+    const prevSibling = expandDom.previousElementSibling;
+    if (!prevSibling) {
+      if (leftLineNumber === 1 && rightLineNumber === 1) {
+        expandDom == null ? void 0 : expandDom.remove();
+        return true;
+      }
+    } else {
+      const prevLeftLineNumber = parseInt((_c = (_b = (_a = prevSibling.children) == null ? void 0 : _a[0].children) == null ? void 0 : _b[0]) == null ? void 0 : _c.innerText);
+      const prevRightLineNumber = parseInt((_f = (_e = (_d = prevSibling.children) == null ? void 0 : _d[0].children) == null ? void 0 : _e[1]) == null ? void 0 : _f.innerText);
+      if (leftLineNumber === prevLeftLineNumber + 1 && rightLineNumber === prevRightLineNumber + 1) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  } else {
+    const nextSibling = expandDom.nextElementSibling;
+    if (nextSibling) {
+      const nextLeftLineNumber = parseInt((_i = (_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[0].children) == null ? void 0 : _h[0]) == null ? void 0 : _i.innerText);
+      const nextRightLineNumber = parseInt((_l = (_k = (_j = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _j[0].children) == null ? void 0 : _k[1]) == null ? void 0 : _l.innerText);
+      if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function updateExpandLineCount(expandDom, newExpandDom) {
+  if (!expandDom.nextElementSibling) {
+    return;
+  }
+  const curMatches = expandDom.children[1].innerText.trim().match(ExpandLineReg);
+  const newMatches = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
+  const newChangedNumLeft = parseInt((curMatches == null ? void 0 : curMatches[2]) || "") + parseInt((newMatches == null ? void 0 : newMatches[2]) || "");
+  const newChangedNumRight = parseInt((curMatches == null ? void 0 : curMatches[4]) || "") + parseInt((newMatches == null ? void 0 : newMatches[4]) || "");
+  expandDom.children[1].children[0].innerText = `@@ -${(newMatches == null ? void 0 : newMatches[1]) || 0},${newChangedNumLeft} +${(newMatches == null ? void 0 : newMatches[3]) || 0},${newChangedNumRight} @@`;
+}
+function parseDiffCode(container, code, outputFormat) {
+  var _a;
+  const diff2HtmlUi = new Diff2HtmlUI(container, code, {
+    drawFileList: false,
+    matching: "lines",
+    outputFormat,
+    highlight: true,
+    rawTemplates: TemplateMap[outputFormat]
+  });
+  if (outputFormat === "side-by-side") {
+    let diffHtmlStr = diff2HtmlUi.diffHtml;
+    if (diffHtmlStr.match(EmptyDataLangReg)) {
+      diffHtmlStr = diffHtmlStr.replace(EmptyDataLangReg, "");
+    }
+    const trList = diffHtmlStr.match(TableTrReg);
+    const trListLength = trList.length;
+    let newTrStr = "";
+    const offset2 = trListLength / 2;
+    for (let i = 0; i < trListLength / 2; i++) {
+      const leftTdList = trList[i].match(TableTdReg);
+      const rightTdList = trList[i + offset2].match(TableTdReg);
+      newTrStr += `<tr>${leftTdList == null ? void 0 : leftTdList.join("")}${rightTdList == null ? void 0 : rightTdList.join("")}</tr>`;
+    }
+    const tbodyAttr = ((_a = diffHtmlStr.match(TableTbodyAttrReg)) == null ? void 0 : _a[1]) || "";
+    const newDiffHtmlStr = diffHtmlStr.replace(TableTbodyReg, `<tbody ${tbodyAttr}>${newTrStr}</tbody>`);
+    diff2HtmlUi.diffHtml = newDiffHtmlStr;
+  }
+  diff2HtmlUi.draw();
+}
+function setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR) {
+  if (trNode) {
+    trNode.classList.add("expand-line");
+    trNode.dataset.prevL = String(prevL);
+    trNode.dataset.prevR = String(prevR);
+    trNode.dataset.nextL = String(nextL);
+    trNode.dataset.nextR = String(nextR);
+  }
+}
+function updateExpandUpDownButton(trNode) {
+  trNode.children[0].children[0].remove();
+  trNode.children[0].children[0].classList.remove("up-expand");
+  trNode.children[0].children[0].classList.add("all-expand");
+  trNode.children[0].children[0].innerHTML = AllExpandIcon();
+}
+function updateLineNumberInDatasetForDoubleColumn(trNode, expandThreshold, position, updateExpandButton = false) {
+  let nextL;
+  let prevL;
+  let nextR;
+  let prevR;
+  if (position === "top") {
+    const nextLineNode = trNode.nextElementSibling;
+    nextL = parseInt(nextLineNode.children[0].innerText) - 1;
+    prevL = Math.max(nextL - expandThreshold + 1, 1);
+    nextR = parseInt(nextLineNode.children[2].innerText) - 1;
+    prevR = Math.max(nextR - expandThreshold + 1, 1);
+  } else if (position === "bottom") {
+    const prevLineNode = trNode.previousElementSibling;
+    prevL = parseInt(prevLineNode.children[0].innerText) + 1;
+    nextL = prevL + expandThreshold - 1;
+    prevR = parseInt(prevLineNode.children[2].innerText) + 1;
+    nextR = prevR + expandThreshold - 1;
+  } else {
+    const prevLineNode = trNode.previousElementSibling;
+    const nextLineNode = trNode.nextElementSibling;
+    const prevLineNumber = parseInt(prevLineNode.children[0].innerText);
+    const nextLineNumber = parseInt(nextLineNode.children[0].innerText);
+    prevL = prevLineNumber + 1;
+    prevR = parseInt(prevLineNode.children[2].innerText) + 1;
+    nextL = nextLineNumber - 1;
+    nextR = parseInt(nextLineNode.children[2].innerText) - 1;
+    const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold;
+    if (isExpandAll && updateExpandButton) {
+      updateExpandUpDownButton(trNode);
+    }
+  }
+  setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+}
+function updateLineNumberInDataset(trNode, expandThreshold, position, updateExpandButton = false) {
+  let nextL;
+  let prevL;
+  let nextR;
+  let prevR;
+  if (position === "top") {
+    const nextLineNode = trNode.nextElementSibling;
+    nextL = parseInt(nextLineNode.children[0].children[0].innerText) - 1;
+    prevL = Math.max(nextL - expandThreshold + 1, 1);
+    nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
+    prevR = Math.max(nextR - expandThreshold + 1, 1);
+  } else if (position === "bottom") {
+    const prevLineNode = trNode.previousElementSibling;
+    prevL = parseInt(prevLineNode.children[0].children[0].innerText) + 1;
+    nextL = prevL + expandThreshold - 1;
+    prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
+    nextR = prevR + expandThreshold - 1;
+  } else {
+    const prevLineNode = trNode.previousElementSibling;
+    const nextLineNode = trNode.nextElementSibling;
+    const prevLineNumber = parseInt(prevLineNode.children[0].children[0].innerText);
+    const nextLineNumber = parseInt(nextLineNode.children[0].children[0].innerText);
+    prevL = prevLineNumber + 1;
+    prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
+    nextL = nextLineNumber - 1;
+    nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
+    const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold;
+    if (isExpandAll && updateExpandButton) {
+      updateExpandUpDownButton(trNode);
+    }
+  }
+  setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+}
+function getLineNumberFromDataset(expandDom, expandThreshold) {
+  var _a, _b, _c;
+  const attrsMap = (_b = (_a = expandDom.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.dataset;
+  const prevL = Number(attrsMap == null ? void 0 : attrsMap.prevL);
+  const nextL = Number(attrsMap == null ? void 0 : attrsMap.nextL);
+  const prevR = Number(attrsMap == null ? void 0 : attrsMap.prevR);
+  const nextR = Number(attrsMap == null ? void 0 : attrsMap.nextR);
+  let leftLineStart, leftLineEnd, rightLineStart, rightLineEnd;
+  if (prevL && nextL && prevR && nextR) {
+    const buttonClasses = Array.from(expandDom.classList);
+    const direction = (_c = buttonClasses.find((item) => item.endsWith("expand"))) == null ? void 0 : _c.split("-")[0];
+    if (direction === "up") {
+      leftLineEnd = nextL;
+      leftLineStart = Math.max(leftLineEnd - expandThreshold + 1, prevL);
+      rightLineEnd = nextR;
+      rightLineStart = Math.max(rightLineEnd - expandThreshold + 1, prevR);
+    } else if (direction === "down") {
+      leftLineStart = prevL;
+      leftLineEnd = Math.min(leftLineStart + expandThreshold - 1, nextL);
+      rightLineStart = prevR;
+      rightLineEnd = Math.min(rightLineStart + expandThreshold - 1, nextR);
+    } else {
+      leftLineStart = prevL;
+      leftLineEnd = nextL;
+      rightLineStart = prevR;
+      rightLineEnd = nextR;
+    }
+  }
+  return [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd];
+}
 function insertNode(parent, child) {
   if (parent.firstChild) {
     parent.insertBefore(child, parent.firstChild);
@@ -6334,7 +6642,7 @@ function attachExpandUpDownButton(parentNode, direction) {
     addExpandButton(parentNode, expandDirectionMap[direction], (_a = expandDirectionIconMap[direction]) == null ? void 0 : _a.call(expandDirectionIconMap));
   }
 }
-function addCommentToPage(lineHost, commentDom, lineSide) {
+function addCommentToPageForSingleColumn(lineHost, commentDom, lineSide) {
   var _a, _b;
   const newLine = document.createElement("tr");
   const newCell = document.createElement("td");
@@ -6351,41 +6659,145 @@ function addCommentToPage(lineHost, commentDom, lineSide) {
     (_b = lineHost.parentElement) == null ? void 0 : _b.appendChild(newLine);
   }
 }
-function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat) {
+function addCommentToPageForDoubleColumn(lineHost, commentDom, lineSide) {
+  var _a, _b, _c;
+  const nextSibling = lineHost.nextElementSibling;
+  if (nextSibling && ((_a = nextSibling.classList) == null ? void 0 : _a.contains("comment-block"))) {
+    const insertTdDom = lineSide === "left" ? nextSibling.children[0] : nextSibling.children[1];
+    insertTdDom.classList.add("comment-cell");
+    insertTdDom.appendChild(commentDom);
+  } else {
+    const newLine = document.createElement("tr");
+    const newLeftCell = document.createElement("td");
+    const newRightCell = document.createElement("td");
+    newLeftCell.style.width = "50%";
+    newLeftCell.setAttribute("colspan", "2");
+    newRightCell.style.width = "50%";
+    newRightCell.setAttribute("colspan", "2");
+    if (lineSide === "left") {
+      newLeftCell.classList.add("comment-cell");
+      newLeftCell.appendChild(commentDom);
+    } else {
+      newRightCell.classList.add("comment-cell");
+      newRightCell.appendChild(commentDom);
+    }
+    newLine.classList.add("comment-block");
+    newLine.classList.add(lineSide);
+    newLine.appendChild(newLeftCell);
+    newLine.appendChild(newRightCell);
+    if (lineHost.nextElementSibling) {
+      (_b = lineHost.parentElement) == null ? void 0 : _b.insertBefore(newLine, lineHost.nextElementSibling);
+    } else {
+      (_c = lineHost.parentElement) == null ? void 0 : _c.appendChild(newLine);
+    }
+  }
+}
+function findReferenceDomForSingleColumn(parentNode, lineNumber, lineSide) {
+  var _a, _b, _c, _d;
+  const trNodes = Array.from(parentNode.querySelectorAll("tr"));
+  for (const index2 in trNodes) {
+    const lineIndex = parseInt(index2);
+    const lineNumberBox = Array.from(trNodes[lineIndex].children)[0];
+    if (notEmptyNode(lineNumberBox)) {
+      const oldLineNumber = parseInt((_b = (_a = lineNumberBox.children[0]) == null ? void 0 : _a.innerText) != null ? _b : -1);
+      const newLineNumber = parseInt((_d = (_c = lineNumberBox.children[1]) == null ? void 0 : _c.innerText) != null ? _d : -1);
+      if (lineSide === "left" && oldLineNumber === lineNumber || lineSide === "right" && newLineNumber === lineNumber) {
+        return trNodes[lineIndex];
+      }
+    }
+  }
+}
+function findReferenceDomForDoubleColumn(parentNode, lineNumber, lineSide) {
+  const trNodes = Array.from(parentNode.querySelectorAll("tr"));
+  for (const index2 in trNodes) {
+    const lineIndex = parseInt(index2);
+    let lineNumberBox;
+    if (lineSide === "left") {
+      lineNumberBox = trNodes[lineIndex].children[0];
+    } else {
+      lineNumberBox = trNodes[lineIndex].children[2];
+    }
+    if (lineNumberBox && notEmptyNode(lineNumberBox)) {
+      const currentLineNumber = parseInt(lineNumberBox.innerText);
+      if (currentLineNumber === lineNumber) {
+        return trNodes[lineIndex];
+      }
+    }
+  }
+}
+function useCodeReviewExpand(reviewContentRef, props) {
+  const { outputFormat, expandThreshold, expandLoader } = toRefs(props);
   const processSideBySide = () => {
-    const [leftTable, rightTable] = reviewContentRef.value.querySelectorAll("table");
-    const trNodes = Array.from(leftTable.querySelectorAll("tr"));
+    var _a;
+    const trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr"));
     const totalLines = trNodes.length;
     for (const index2 in trNodes) {
       const lineIndex = parseInt(index2);
       const lineChildren = Array.from(trNodes[lineIndex].children);
       const lineNumberBox = lineChildren[0];
       const lineContentBox = lineChildren[1];
-      const lineClassList = lineContentBox.classList.value;
-      const lineContent = lineContentBox.innerText.trim();
-      if (lineContent.match(ExpandLineReg) && !FirstLineReg.test(lineContent) && lineClassList && lineClassList.includes("d2h-info")) {
+      const lineContent = lineContentBox.innerText;
+      const lineClassList = lineContentBox.classList;
+      if (lineContent.match(ExpandLineReg) && !FirstLineReg.test(lineContent) && lineClassList && lineClassList.contains("d2h-info")) {
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
+          updateLineNumberInDatasetForDoubleColumn(trNodes[lineIndex], expandThreshold.value, "top");
           attachExpandUpDownButton(lineNumberBox, "up");
         } else if (lineIndex > 0 && lineIndex < totalLines - 1 && nextLineIndex in trNodes && prevLineIndex in trNodes) {
-          const preLineChildren = Array.from(trNodes[prevLineIndex].children);
-          const nextLineChildren = Array.from(trNodes[nextLineIndex].children);
-          const isExpandAll = parseInt(nextLineChildren[0].innerText) - parseInt(preLineChildren[0].innerText) - 1 < expandAllThreshold;
+          const preLineNumber = parseInt(trNodes[prevLineIndex].children[0].innerText);
+          const nextLineNumber = parseInt(trNodes[nextLineIndex].children[0].innerText);
+          const isExpandAll = nextLineNumber - preLineNumber - 1 < expandThreshold.value;
+          updateLineNumberInDatasetForDoubleColumn(trNodes[lineIndex], expandThreshold.value, "middle");
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
     }
-    const endLine = trNodes[0].cloneNode(true);
-    if (Object.prototype.hasOwnProperty.call(endLine.children[0].children, 0)) {
-      endLine.children[0].removeChild(endLine.children[0].children[0]);
+    const loadMoreLine = trNodes[0].cloneNode(true);
+    loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
+    loadMoreLine.children[1].innerText = "";
+    (_a = trNodes[0].parentElement) == null ? void 0 : _a.appendChild(loadMoreLine);
+    updateLineNumberInDatasetForDoubleColumn(loadMoreLine, expandThreshold.value, "bottom");
+    attachExpandUpDownButton(loadMoreLine.children[0], "down");
+  };
+  const insertIncrementCodeForDoubleColumn = (code, direction, referenceDom) => {
+    if (!referenceDom) {
+      return;
+    }
+    if (!code) {
+      return referenceDom == null ? void 0 : referenceDom.remove();
+    }
+    const prefix = "--- updated_at	Jan 1, 2019, 0:0:0 AM\n+++ updated_at	Jan 1, 2019, 0:0:0 AM\n";
+    const container = document.createElement("div");
+    parseDiffCode(container, prefix + code, outputFormat.value);
+    const trNodes = Array.from(container.querySelectorAll("tr"));
+    const expandLine = trNodes.find((element) => {
+      var _a;
+      return (_a = element.children[1]) == null ? void 0 : _a.innerText.trim().match(ExpandLineReg);
+    });
+    if (!expandLine) {
+      return;
+    }
+    const trNodesToBeInserted = trNodes.filter((element) => element !== expandLine);
+    insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
+    const removedExpandLine = ifRemoveExpandLineForDoubleColumn(referenceDom, expandLine, direction);
+    if (removedExpandLine) {
+      return;
+    }
+    updateExpandLineCount(referenceDom, expandLine);
+    if (direction === "up") {
+      if (!referenceDom.previousElementSibling) {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "top");
+      } else {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "middle", true);
+      }
+    } else {
+      if (referenceDom.nextElementSibling) {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "middle", true);
+      } else {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "bottom");
+      }
     }
-    endLine.children[1].innerText = "";
-    const leftEndLine = endLine.cloneNode(true);
-    const rightEndLint = endLine.cloneNode(true);
-    attachExpandUpDownButton(leftEndLine.children[0], "down");
-    leftTable.tBodies[0].appendChild(leftEndLine);
-    rightTable.tBodies[0].appendChild(rightEndLint);
   };
   const processLineByLine = () => {
     var _a;
@@ -6405,13 +6817,15 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
+          updateLineNumberInDataset(trNodes[lineIndex], expandThreshold.value, "top");
           attachExpandUpDownButton(lineNumberBox, "up");
         } else if (lineIndex > 0 && lineIndex < totalLines - 1 && nextLineIndex in trNodes && prevLineIndex in trNodes) {
           const prevTdNodes = Array.from(trNodes[prevLineIndex].children);
           const prevLineNumber = parseInt(prevTdNodes[0].children[0].innerText);
           const nextTdNodes = Array.from(trNodes[nextLineIndex].children);
           const nextLineNumber = parseInt(nextTdNodes[0].children[0].innerText);
-          const isExpandAll = nextLineNumber - prevLineNumber - 1 < expandAllThreshold;
+          updateLineNumberInDataset(trNodes[lineIndex], expandThreshold.value, "middle");
+          const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold.value;
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
@@ -6419,35 +6833,98 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
     const loadMoreLine = trNodes[0].cloneNode(true);
     loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
     loadMoreLine.children[1].innerText = "";
-    loadMoreLine.children[1].style.height = "20px";
-    const lastTrNode = trNodes[totalLines - 1].children;
-    const leftLineStart = parseInt(lastTrNode[0].children[0].innerText) + 1;
-    const rightLineStart = parseInt(lastTrNode[0].children[1].innerText) + 1;
-    if (leftLineStart && rightLineStart) {
-      attachExpandUpDownButton(loadMoreLine.children[0], "down");
-    }
     (_a = trNodes[0].parentElement) == null ? void 0 : _a.appendChild(loadMoreLine);
+    updateLineNumberInDataset(loadMoreLine, expandThreshold.value, "bottom");
+    attachExpandUpDownButton(loadMoreLine.children[0], "down");
+  };
+  const insertIncrementCode = (code, direction, referenceDom) => {
+    if (!referenceDom) {
+      return;
+    }
+    if (!code) {
+      return referenceDom == null ? void 0 : referenceDom.remove();
+    }
+    const prefix = "--- updated_at	Jan 1, 2019, 0:0:0 AM\n+++ updated_at	Jan 1, 2019, 0:0:0 AM\n";
+    const container = document.createElement("div");
+    parseDiffCode(container, prefix + code, outputFormat.value);
+    const trNodes = Array.from(container.querySelectorAll("tr"));
+    const expandLine = trNodes.find((element) => {
+      var _a;
+      return (_a = element.children[1]) == null ? void 0 : _a.innerText.trim().match(ExpandLineReg);
+    });
+    if (!expandLine) {
+      return;
+    }
+    const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
+    insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
+    const removedExpandLine = ifRemoveExpandLine(referenceDom, expandLine, direction);
+    if (removedExpandLine) {
+      return;
+    }
+    updateExpandLineCount(referenceDom, expandLine);
+    if (direction === "up") {
+      if (!referenceDom.previousElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "top");
+      } else {
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "middle", true);
+      }
+    } else {
+      if (referenceDom.nextElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "middle", true);
+      } else {
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "bottom");
+      }
+    }
+  };
+  const onExpandButtonClick = (e) => {
+    var _a, _b;
+    const composedPath = e.composedPath();
+    const expandIconDom = composedPath.find((element) => {
+      var _a2;
+      return (_a2 = element.classList) == null ? void 0 : _a2.contains("expand-icon");
+    });
+    if (expandIconDom) {
+      const expandDirection = (_a = Array.from(expandIconDom.classList).find((item) => item.endsWith("expand"))) == null ? void 0 : _a.split("-")[0];
+      const direction = expandDirection === "up" || expandDirection === "all" ? "up" : "down";
+      const [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd] = getLineNumberFromDataset(expandIconDom, expandThreshold.value);
+      (_b = expandLoader == null ? void 0 : expandLoader.value) == null ? void 0 : _b.call(expandLoader, [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code) => {
+        var _a2, _b2;
+        outputFormat.value === "line-by-line" ? insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement) : insertIncrementCodeForDoubleColumn(code, direction, (_b2 = expandIconDom.parentElement) == null ? void 0 : _b2.parentElement);
+      });
+    }
   };
   const insertExpandButton = () => {
-    outputFormat === "side-by-side" ? processSideBySide() : processLineByLine();
+    outputFormat.value === "side-by-side" ? processSideBySide() : processLineByLine();
   };
-  return { insertExpandButton };
+  return { insertExpandButton, onExpandButtonClick };
 }
 function useCodeReview(props, ctx) {
-  const { diff, fold, outputFormat, expandAllThreshold } = toRefs(props);
+  const { diff, outputFormat, allowExpand, showBlob } = toRefs(props);
   const renderHtml = ref("");
-  const isFold = ref(fold.value);
   const reviewContentRef = ref();
-  const diffFile = Diff2Html.parse(diff.value);
-  const { insertExpandButton } = useCodeReviewExpand(reviewContentRef, expandAllThreshold.value, outputFormat.value);
+  const diffFile = ref([]);
+  const { insertExpandButton, onExpandButtonClick } = useCodeReviewExpand(reviewContentRef, props);
   const initDiffContent = () => {
-    renderHtml.value = Diff2Html.html(diffFile, {
-      drawFileList: false,
-      matching: "lines",
-      outputFormat: outputFormat.value
+    diffFile.value = Diff2Html.parse(diff.value);
+    nextTick(() => {
+      if (inBrowser && !showBlob.value) {
+        parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
+        allowExpand.value && insertExpandButton();
+        ctx.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
+      }
     });
-    nextTick(insertExpandButton);
   };
+  const onContentClick = (e) => {
+    onExpandButtonClick(e);
+  };
+  watch(showBlob, initDiffContent);
+  watch(outputFormat, initDiffContent);
+  watch(diff, initDiffContent, { immediate: true });
+  return { renderHtml, reviewContentRef, diffFile, onContentClick };
+}
+function useCodeReviewFold(props, ctx) {
+  const { fold } = toRefs(props);
+  const isFold = ref(fold.value);
   const toggleFold = (status) => {
     if (status !== void 0) {
       isFold.value = status;
@@ -6459,48 +6936,85 @@ function useCodeReview(props, ctx) {
     isFold.value = val;
   });
   watch(isFold, () => {
-    if (!isFold.value && renderHtml.value === "") {
-      initDiffContent();
-    }
     ctx.emit("foldChange", isFold.value);
   });
-  onBeforeMount(() => {
-    if (!isFold.value) {
-      initDiffContent();
-    }
-  });
-  provide(CodeReviewInjectionKey, { reviewContentRef, diffInfo: diffFile[0], isFold, rootCtx: ctx });
-  return { renderHtml, isFold, reviewContentRef, toggleFold };
+  return { isFold, toggleFold };
 }
-function useCodeReviewComment(reviewContentRef, ctx) {
+function useCodeReviewComment(reviewContentRef, props, ctx) {
+  const { outputFormat, allowComment } = toRefs(props);
   const ns2 = useNamespace("code-review");
   const commentLeft = ref(-100);
   const commentTop = ref(-100);
   let currentLeftLineNumber = -1;
   let currentRightLineNumber = -1;
+  let lastLineNumberContainer;
   const resetLeftTop = () => {
     commentLeft.value = -100;
     commentTop.value = -100;
     currentLeftLineNumber = -1;
     currentRightLineNumber = -1;
-  };
-  const onMouseEnter = (e) => {
-    e.currentTarget.getBoundingClientRect();
+    lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+    lastLineNumberContainer = null;
   };
   const onMouseMove = (e) => {
     var _a, _b;
     const composedPath = e.composedPath();
     const trNode = composedPath.find((item) => item.tagName === "TR");
     if (trNode) {
-      const lineNumberContainer = Array.from(trNode.children)[0];
-      if (notEmptyNode(lineNumberContainer)) {
-        const { top, left } = lineNumberContainer.getBoundingClientRect();
-        commentLeft.value = left;
-        commentTop.value = top;
-        currentLeftLineNumber = parseInt((_a = lineNumberContainer.children[0]) == null ? void 0 : _a.innerText) || -1;
-        currentRightLineNumber = parseInt((_b = lineNumberContainer.children[1]) == null ? void 0 : _b.innerText) || -1;
+      if (outputFormat.value === "line-by-line") {
+        const lineNumberContainer = Array.from(trNode.children)[0];
+        if (lastLineNumberContainer !== lineNumberContainer) {
+          lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+        }
+        if (notEmptyNode(lineNumberContainer)) {
+          lastLineNumberContainer = lineNumberContainer;
+          lineNumberContainer.classList.add("comment-icon-hover");
+          const { top, left } = lineNumberContainer.getBoundingClientRect();
+          commentLeft.value = left;
+          commentTop.value = top;
+          currentLeftLineNumber = parseInt((_a = lineNumberContainer.children[0]) == null ? void 0 : _a.innerText) || -1;
+          currentRightLineNumber = parseInt((_b = lineNumberContainer.children[1]) == null ? void 0 : _b.innerText) || -1;
+        } else {
+          resetLeftTop();
+        }
       } else {
-        resetLeftTop();
+        if (trNode.classList.contains("comment-block")) {
+          return resetLeftTop();
+        }
+        const tdNode = composedPath.find((item) => item.tagName === "TD");
+        const tdIndex = Array.from(trNode.children).findIndex((item) => item === tdNode);
+        const tdNodes = Array.from(trNode.children);
+        const leftLineNumberContainer = tdNodes[0];
+        const rightLineNumberContainer = tdNodes[2];
+        if (tdIndex < 2) {
+          if (lastLineNumberContainer !== leftLineNumberContainer) {
+            lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+          }
+          if (notEmptyNode(leftLineNumberContainer)) {
+            lastLineNumberContainer = leftLineNumberContainer;
+            leftLineNumberContainer.classList.add("comment-icon-hover");
+            const { top, left } = leftLineNumberContainer.getBoundingClientRect();
+            commentLeft.value = left;
+            commentTop.value = top;
+            currentLeftLineNumber = parseInt(leftLineNumberContainer.innerText);
+          } else {
+            resetLeftTop();
+          }
+        } else {
+          if (lastLineNumberContainer !== rightLineNumberContainer) {
+            lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+          }
+          if (rightLineNumberContainer && notEmptyNode(rightLineNumberContainer)) {
+            lastLineNumberContainer = rightLineNumberContainer;
+            rightLineNumberContainer.classList.add("comment-icon-hover");
+            const { top, left } = rightLineNumberContainer.getBoundingClientRect();
+            commentLeft.value = left;
+            commentTop.value = top;
+            currentRightLineNumber = parseInt(rightLineNumberContainer.innerText);
+          } else {
+            resetLeftTop();
+          }
+        }
       }
     }
   };
@@ -6516,46 +7030,68 @@ function useCodeReviewComment(reviewContentRef, ctx) {
       resetLeftTop();
     }
   };
-  const onCommentIconClick = () => {
-    ctx.emit("addComment", { left: currentLeftLineNumber, right: currentRightLineNumber });
-  };
-  const findReferenceDom = (lineNumber, lineSide) => {
-    var _a, _b, _c, _d;
-    const trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr"));
-    for (const index2 in trNodes) {
-      const lineIndex = parseInt(index2);
-      const lineNumberBox = Array.from(trNodes[lineIndex].children)[0];
-      if (notEmptyNode(lineNumberBox)) {
-        const oldLineNumber = parseInt((_b = (_a = lineNumberBox.children[0]) == null ? void 0 : _a.innerText) != null ? _b : -1);
-        const newLineNumber = parseInt((_d = (_c = lineNumberBox.children[1]) == null ? void 0 : _c.innerText) != null ? _d : -1);
-        if (lineSide === "left" && oldLineNumber === lineNumber || lineSide === "right" && newLineNumber === lineNumber) {
-          return trNodes[lineIndex];
-        }
+  const onCommentIconClick = (e) => {
+    if (e) {
+      const composedPath = e.composedPath();
+      const lineNumberBox = composedPath.find((item) => {
+        var _a, _b;
+        return ((_a = item.classList) == null ? void 0 : _a.contains("comment-icon-hover")) || ((_b = item.classList) == null ? void 0 : _b.contains("comment-icon"));
+      });
+      if (!lineNumberBox) {
+        return;
       }
     }
+    if (outputFormat.value === "line-by-line")
+      ;
+    ctx.emit("addComment", { left: currentLeftLineNumber, right: currentRightLineNumber });
   };
   const insertComment = (lineNumber, lineSide, commentDom) => {
-    const lineHost = findReferenceDom(lineNumber, lineSide);
-    lineHost && addCommentToPage(lineHost, commentDom, lineSide);
+    if (outputFormat.value === "line-by-line") {
+      const lineHost = findReferenceDomForSingleColumn(reviewContentRef.value, lineNumber, lineSide);
+      lineHost && addCommentToPageForSingleColumn(lineHost, commentDom, lineSide);
+    } else {
+      const lineHost = findReferenceDomForDoubleColumn(reviewContentRef.value, lineNumber, lineSide);
+      lineHost && addCommentToPageForDoubleColumn(lineHost, commentDom, lineSide);
+    }
   };
   const removeComment = (lineNumber, lineSide) => {
-    const lineHost = findReferenceDom(lineNumber, lineSide);
-    let nextLineHost = lineHost == null ? void 0 : lineHost.nextElementSibling;
-    while (nextLineHost) {
-      const classList = nextLineHost == null ? void 0 : nextLineHost.classList;
-      if ((classList == null ? void 0 : classList.contains("comment-block")) && classList.contains(lineSide)) {
-        nextLineHost.remove();
-        return;
+    if (outputFormat.value === "line-by-line") {
+      const lineHost = findReferenceDomForSingleColumn(reviewContentRef.value, lineNumber, lineSide);
+      let nextLineHost = lineHost == null ? void 0 : lineHost.nextElementSibling;
+      while (nextLineHost) {
+        const classList = nextLineHost == null ? void 0 : nextLineHost.classList;
+        if ((classList == null ? void 0 : classList.contains("comment-block")) && classList.contains(lineSide)) {
+          nextLineHost.remove();
+          return;
+        }
+        nextLineHost = nextLineHost.nextElementSibling;
+      }
+    } else {
+      const lineHost = findReferenceDomForDoubleColumn(reviewContentRef.value, lineNumber, lineSide);
+      const nextLineHost = lineHost == null ? void 0 : lineHost.nextElementSibling;
+      if (nextLineHost && nextLineHost.classList.contains("comment-block")) {
+        const leftChildren = nextLineHost.children[0];
+        const rightChildren = nextLineHost.children[1];
+        if (lineSide === "left") {
+          leftChildren.children[0].remove();
+        } else {
+          rightChildren.children[0].remove();
+        }
+        if (!leftChildren.children.length && !rightChildren.children.length) {
+          nextLineHost.remove();
+        }
       }
-      nextLineHost = nextLineHost.nextElementSibling;
     }
   };
+  const mouseEvent = allowComment.value ? { onMousemove: onMouseMove, onMouseleave } : {};
+  window.addEventListener("scroll", resetLeftTop);
+  onUnmounted(() => {
+    window.removeEventListener("scroll", resetLeftTop);
+  });
   return {
     commentLeft,
     commentTop,
-    onMouseEnter,
-    onMouseMove,
-    onMouseleave,
+    mouseEvent,
     onCommentMouseLeave,
     onCommentIconClick,
     insertComment,
@@ -6566,26 +7102,28 @@ var codeReview = "";
 var CodeReview = defineComponent({
   name: "DCodeReview",
   props: codeReviewProps,
-  emits: ["foldChange", "addComment", "afterViewInit"],
+  emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh"],
   setup(props, ctx) {
     const ns2 = useNamespace("code-review");
     const {
       renderHtml,
-      isFold,
       reviewContentRef,
-      toggleFold
+      diffFile,
+      onContentClick
     } = useCodeReview(props, ctx);
+    const {
+      isFold,
+      toggleFold
+    } = useCodeReviewFold(props, ctx);
     const {
       commentLeft,
       commentTop,
-      onMouseEnter,
-      onMouseMove,
-      onMouseleave,
+      mouseEvent,
       onCommentMouseLeave,
       onCommentIconClick,
       insertComment,
       removeComment
-    } = useCodeReviewComment(reviewContentRef, ctx);
+    } = useCodeReviewComment(reviewContentRef, props, ctx);
     onMounted(() => {
       ctx.emit("afterViewInit", {
         toggleFold,
@@ -6593,28 +7131,36 @@ var CodeReview = defineComponent({
         removeComment
       });
     });
-    return () => createVNode("div", {
-      "class": ns2.b()
-    }, [createVNode(CodeReviewHeader, {
-      "onClick": () => isFold.value = !isFold.value
-    }, null), createVNode("div", {
-      "class": [ns2.e("content"), {
-        "hide-content": isFold.value
-      }],
-      "innerHTML": renderHtml.value,
-      "ref": reviewContentRef,
-      "onMouseenter": onMouseEnter,
-      "onMousemove": onMouseMove,
-      "onMouseleave": onMouseleave
-    }, null), createVNode("div", {
-      "class": "comment-icon",
-      "style": {
-        left: commentLeft.value + "px",
-        top: commentTop.value + "px"
-      },
-      "onClick": onCommentIconClick,
-      "onMouseleave": onCommentMouseLeave
-    }, [createVNode(CommentIcon, null, null)])]);
+    provide(CodeReviewInjectionKey, {
+      reviewContentRef,
+      diffInfo: diffFile.value[0],
+      isFold,
+      rootCtx: ctx
+    });
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns2.b()
+      }, [createVNode(CodeReviewHeader, {
+        "onClick": () => isFold.value = !isFold.value
+      }, null), withDirectives(createVNode("div", null, [props.showBlob ? (_b = (_a = ctx.slots).blob) == null ? void 0 : _b.call(_a) : createVNode("div", mergeProps({
+        "class": [ns2.e("content"), props.outputFormat],
+        "innerHTML": renderHtml.value,
+        "ref": reviewContentRef,
+        "onClick": (e) => {
+          onContentClick(e);
+          onCommentIconClick(e);
+        }
+      }, mouseEvent), null)]), [[vShow, !isFold.value]]), props.allowComment && createVNode("div", {
+        "class": "comment-icon",
+        "style": {
+          left: commentLeft.value + "px",
+          top: commentTop.value + "px"
+        },
+        "onClick": onCommentIconClick,
+        "onMouseleave": onCommentMouseLeave
+      }, [createVNode(CommentIcon, null, null)])]);
+    };
   }
 });
 var index = {