vue-devui 1.5.7 → 1.5.9

package/code-review/index.es.js

@@ -1,7 +1,8 @@
-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";
+import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, provide, Teleport, createTextVNode } 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,
@@ -6106,6 +6107,88 @@ function CopyIcon() {
     "fill-rule": "nonzero"
   }, null)])]);
 }
+function CommentIcon() {
+  return createVNode("svg", {
+    "width": "12px",
+    "height": "12px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "d": `M14,1 C15.1045695,1 16,1.8954305 16,3 L16,11 C16,12.1045695 15.1045695,13 14,13 L11,13 L8,16 L5,13 L2,13 
+          C0.8954305,13 0,12.1045695 0,11 L0,3 C0,1.8954305 0.8954305,1 2,1 L14,1 Z M14,3 L2,3 L2,11 L5,11 C5.47149598,11 
+          5.92582641,11.1664898 6.28439337,11.4669131 L6.41421356,11.5857864 L8,13.171 L9.58578644,11.5857864 
+          C9.91918444,11.2523884 10.3581707,11.0488544 10.8241472,11.0077406 L11,11 L14,11 L14,3 Z M8,6 C8.55228475,6
+          9,6.44771525 9,7 C9,7.55228475 8.55228475,8 8,8 C7.44771525,8 7,7.55228475 7,7 C7,6.44771525 7.44771525,6
+          8,6 Z M11,6 C11.5522847,6 12,6.44771525 12,7 C12,7.55228475 11.5522847,8 11,8 C10.4477153,8 10,7.55228475
+          10,7 C10,6.44771525 10.4477153,6 11,6 Z M5,6 C5.55228475,6 6,6.44771525 6,7 C6,7.55228475 5.55228475,8
+          5,8 C4.44771525,8 4,7.55228475 4,7 C4,6.44771525 4.44771525,6 5,6 Z`,
+    "fill": "#5e7ce0",
+    "fill-rule": "nonzero"
+  }, null)])]);
+}
+function UpExpandIcon() {
+  return `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-1365.000000,-11.000000)">
+          <g transform="translate(1365.000000,11.000000)">
+            <rect x="0" y="0" width="16" height="16"></rect>
+            <g
+              transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) translate(1.000000, 4.000000)"
+              fill="#71757F">
+              <path
+                d='M0.5,0 L13.5,0 C13.7761424,0 14,0.223857625 14,0.5 C14,0.776142375 13.7761424,1 13.5,1 L0.5,1 C0.223857625,1 
+              0,0.776142375 0,0.5 C0,0.223857625 0.223857625,0 0.5,0 Z'></path>
+              <polygon
+                transform="translate(7.000000, 5.5000000) scale(1, -1) translate(-7.000000, -5.5000000)"
+                points="7 3 10 8 4 8"></polygon>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>`;
+}
+function DownExpandIcon() {
+  return `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-1344.000000,-11.000000)">
+          <g transform="translate(1344.000000,11.000000)">
+            <rect x="0" y="0" width="16" height="16"></rect>
+            <g transform="translate(1.000000, 5.000000)" fill="#71757F">
+              <path
+                d="M0.5,0 L13.5,0 C13.7761424,0 14,0.223857625 14,0.5 C14,0.776142375 13.7761424,1 13.5,1 L0.5,1 C0.223857625,1
+              0,0.776142375 0,0.5 C0,0.223857625 0.223857625,0 0.5,0 Z"></path>
+              <polygon
+                transform="translate(7.000000,5.500000) scale(1, -1) translate(-7.000000, -5.500000)"
+                points="7 3 10 8 4 8"></polygon>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>`;
+}
+function AllExpandIcon() {
+  return `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-1301.000000,-11.000000)">
+          <rect x="1301" y="11" width="16" height="16"></rect>
+          <path
+            d="M1302.5,18 L1315.5,18 C1315.77614,18 1316,18.2238576 1316,18.5 1316,18.7761424 1315.77614,19 1315.5,19 L1302.5,19
+          C1302.22386,19 1302,18.7761424 1302,18.5 C1302,18.2238576 1302.22386,18 1302.5,18 Z" fill="#71757F"></path>
+          <polygon fill="#71757F" points="1309 11 1312 16 1306 16"></polygon>
+          <polygon
+            fill="#71757F"
+            transform="translate(1309.000000, 23.500000) scale(1, -1) translate(-1309.000000, -23.500000)"
+            points="1309 21 1312 26 1306 26"></polygon>
+        </g>
+      </g>
+    </svg>`;
+}
 const codeReviewProps = {
   diff: {
     type: String,
@@ -6119,6 +6202,13 @@ const codeReviewProps = {
   outputFormat: {
     type: String,
     default: "line-by-line"
+  },
+  expandAllThreshold: {
+    type: Number,
+    default: 50
+  },
+  codeLoader: {
+    type: Function
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -6208,18 +6298,369 @@ var CodeReviewHeader = defineComponent({
     }, [rootCtx.slots.headOperate()])]);
   }
 });
+const ExpandLineReg = /^@@ -(\d+),(\d+) \+(\d+),(\d+) @@/;
+const FirstLineReg = /^@@ -[0,1](?!\d)/;
+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) {
+  const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
+  if (direction === "up") {
+    const nextSibling = referenceDom.nextElementSibling;
+    trNodesToBeInserted.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, nextSibling);
+    });
+  } else {
+    trNodesToBeInserted.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, referenceDom);
+    });
+  }
+}
+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;
+    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) {
+  const diff2HtmlUi = new Diff2HtmlUI(container, code, {
+    drawFileList: false,
+    matching: "lines",
+    outputFormat,
+    highlight: true
+  });
+  diff2HtmlUi.draw();
+  diff2HtmlUi.highlightCode();
+}
+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 updateLineNumberInDataset(trNode, expandAllThreshold, 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 - expandAllThreshold + 1, 1);
+    nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
+    prevR = Math.max(nextR - expandAllThreshold + 1, 1);
+  } else if (position === "bottom") {
+    const prevLineNode = trNode.previousElementSibling;
+    prevL = parseInt(prevLineNode.children[0].children[0].innerText) + 1;
+    nextL = prevL + expandAllThreshold - 1;
+    prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
+    nextR = prevR + expandAllThreshold - 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 <= expandAllThreshold;
+    if (isExpandAll && updateExpandButton) {
+      updateExpandUpDownButton(trNode);
+    }
+  }
+  setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+}
+function getLineNumberFormDataset(expandDom, expandAllThreshold) {
+  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 - expandAllThreshold + 1, prevL);
+      rightLineEnd = nextR;
+      rightLineStart = Math.max(rightLineEnd - expandAllThreshold + 1, prevR);
+    } else if (direction === "down") {
+      leftLineStart = prevL;
+      leftLineEnd = Math.min(leftLineStart + expandAllThreshold - 1, nextL);
+      rightLineStart = prevR;
+      rightLineEnd = Math.min(rightLineStart + expandAllThreshold - 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);
+  } else {
+    parent.appendChild(child);
+  }
+}
+function addExpandButton(parentNode, className, icon) {
+  const expandButton = document.createElement("div");
+  expandButton.innerHTML = icon;
+  expandButton.classList.add("expand-icon");
+  expandButton.classList.add(className);
+  insertNode(parentNode, expandButton);
+}
+function attachExpandUpDownButton(parentNode, direction) {
+  var _a;
+  const expandDirectionMap = {
+    up: "up-expand",
+    down: "down-expand",
+    all: "all-expand"
+  };
+  const expandDirectionIconMap = {
+    up: UpExpandIcon,
+    down: DownExpandIcon,
+    all: AllExpandIcon
+  };
+  parentNode.classList.add("expand-icon-wrapper");
+  if (direction === "updown") {
+    addExpandButton(parentNode, "up-expand", UpExpandIcon());
+    addExpandButton(parentNode, "down-expand", DownExpandIcon());
+  } else {
+    addExpandButton(parentNode, expandDirectionMap[direction], (_a = expandDirectionIconMap[direction]) == null ? void 0 : _a.call(expandDirectionIconMap));
+  }
+}
+function addCommentToPage(lineHost, commentDom, lineSide) {
+  var _a, _b;
+  const newLine = document.createElement("tr");
+  const newCell = document.createElement("td");
+  newCell.classList.add("comment-cell");
+  newCell.style.width = "100%";
+  newCell.setAttribute("colspan", "2");
+  newCell.appendChild(commentDom);
+  newLine.classList.add("comment-block");
+  newLine.classList.add(lineSide);
+  newLine.appendChild(newCell);
+  if (lineHost.nextElementSibling) {
+    (_a = lineHost.parentElement) == null ? void 0 : _a.insertBefore(newLine, lineHost.nextElementSibling);
+  } else {
+    (_b = lineHost.parentElement) == null ? void 0 : _b.appendChild(newLine);
+  }
+}
+function useCodeReviewExpand(reviewContentRef, props) {
+  const { outputFormat, expandAllThreshold, codeLoader } = toRefs(props);
+  const processSideBySide = () => {
+    const [leftTable, rightTable] = reviewContentRef.value.querySelectorAll("table");
+    const trNodes = Array.from(leftTable.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 nextLineIndex = lineIndex + 1;
+        const prevLineIndex = lineIndex - 1;
+        if (lineIndex === 0 && nextLineIndex in trNodes) {
+          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.value;
+          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]);
+    }
+    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;
+    const trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr"));
+    const totalLines = trNodes.length;
+    for (const index2 in trNodes) {
+      const lineIndex = parseInt(index2);
+      const tdNodes = Array.from(trNodes[lineIndex].children);
+      const lineNumberBox = tdNodes[0];
+      const lineContentBox = tdNodes[1];
+      if (!lineContentBox) {
+        continue;
+      }
+      const lineClassList = lineContentBox.classList.value;
+      const lineContent = lineContentBox.innerText.trim();
+      if (lineContent.match(ExpandLineReg) && !FirstLineReg.test(lineContent) && lineClassList && lineClassList.includes("d2h-info")) {
+        const nextLineIndex = lineIndex + 1;
+        const prevLineIndex = lineIndex - 1;
+        if (lineIndex === 0 && nextLineIndex in trNodes) {
+          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.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);
+          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "middle");
+          const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold.value;
+          attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
+        }
+      }
+    }
+    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);
+    updateLineNumberInDataset(loadMoreLine, expandAllThreshold.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;
+    }
+    insertIncrementLineToPage(referenceDom, trNodes, direction);
+    const removedExpandLine = ifRemoveExpandLine(referenceDom, expandLine, direction);
+    if (removedExpandLine) {
+      return;
+    }
+    updateExpandLineCount(referenceDom, expandLine);
+    if (direction === "up") {
+      if (!referenceDom.previousElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "top");
+      } else {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+      }
+    } else {
+      if (referenceDom.nextElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+      } else {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.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] = getLineNumberFormDataset(expandIconDom, expandAllThreshold.value);
+      (_b = codeLoader == null ? void 0 : codeLoader.value) == null ? void 0 : _b.call(codeLoader, [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code) => {
+        var _a2;
+        insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement);
+      });
+    }
+  };
+  const insertExpandButton = () => {
+    outputFormat.value === "side-by-side" ? processSideBySide() : processLineByLine();
+  };
+  return { insertExpandButton, onExpandButtonClick };
+}
 function useCodeReview(props, ctx) {
-  const { diff, fold, outputFormat } = toRefs(props);
+  const { diff, outputFormat } = toRefs(props);
   const renderHtml = ref("");
-  const isFold = ref(fold.value);
-  const diffFile = Diff2Html.parse(diff.value);
+  const reviewContentRef = ref();
+  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(() => {
+      parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
+      insertExpandButton();
+      ctx.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
     });
   };
+  const onContentClick = (e) => {
+    onExpandButtonClick(e);
+  };
+  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;
@@ -6231,31 +6672,145 @@ 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();
+  return { isFold, toggleFold };
+}
+function useCodeReviewComment(reviewContentRef, ctx) {
+  const ns2 = useNamespace("code-review");
+  const commentLeft = ref(-100);
+  const commentTop = ref(-100);
+  let currentLeftLineNumber = -1;
+  let currentRightLineNumber = -1;
+  const resetLeftTop = () => {
+    commentLeft.value = -100;
+    commentTop.value = -100;
+    currentLeftLineNumber = -1;
+    currentRightLineNumber = -1;
+  };
+  const onMouseEnter = (e) => {
+    e.currentTarget.getBoundingClientRect();
+  };
+  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;
+      } else {
+        resetLeftTop();
+      }
+    }
+  };
+  const onMouseleave = (e) => {
+    var _a;
+    if (!((_a = e.relatedTarget) == null ? void 0 : _a.classList.contains("comment-icon"))) {
+      resetLeftTop();
+    }
+  };
+  const onCommentMouseLeave = (e) => {
+    var _a;
+    if (!((_a = e.relatedTarget) == null ? void 0 : _a.classList.contains(ns2.e("content")))) {
+      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 insertComment = (lineNumber, lineSide, commentDom) => {
+    const lineHost = findReferenceDom(lineNumber, lineSide);
+    lineHost && addCommentToPage(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;
+      }
+      nextLineHost = nextLineHost.nextElementSibling;
     }
+  };
+  window.addEventListener("scroll", resetLeftTop);
+  onUnmounted(() => {
+    window.removeEventListener("scroll", resetLeftTop);
   });
-  provide(CodeReviewInjectionKey, { diffInfo: diffFile[0], isFold, rootCtx: ctx });
-  ctx.expose({ toggleFold });
-  return { renderHtml, isFold };
+  return {
+    commentLeft,
+    commentTop,
+    onMouseEnter,
+    onMouseMove,
+    onMouseleave,
+    onCommentMouseLeave,
+    onCommentIconClick,
+    insertComment,
+    removeComment
+  };
 }
 var codeReview = "";
 var CodeReview = defineComponent({
   name: "DCodeReview",
   props: codeReviewProps,
-  emits: ["foldChange"],
+  emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh"],
   setup(props, ctx) {
     const ns2 = useNamespace("code-review");
     const {
       renderHtml,
-      isFold
+      reviewContentRef,
+      diffFile,
+      onContentClick
     } = useCodeReview(props, ctx);
+    const {
+      isFold,
+      toggleFold
+    } = useCodeReviewFold(props, ctx);
+    const {
+      commentLeft,
+      commentTop,
+      onMouseEnter,
+      onMouseMove,
+      onMouseleave,
+      onCommentMouseLeave,
+      onCommentIconClick,
+      insertComment,
+      removeComment
+    } = useCodeReviewComment(reviewContentRef, ctx);
+    onMounted(() => {
+      ctx.emit("afterViewInit", {
+        toggleFold,
+        insertComment,
+        removeComment
+      });
+    });
+    provide(CodeReviewInjectionKey, {
+      reviewContentRef,
+      diffInfo: diffFile.value[0],
+      isFold,
+      rootCtx: ctx
+    });
     return () => createVNode("div", {
       "class": ns2.b()
     }, [createVNode(CodeReviewHeader, {
@@ -6264,8 +6819,21 @@ var CodeReview = defineComponent({
       "class": [ns2.e("content"), {
         "hide-content": isFold.value
       }],
-      "innerHTML": renderHtml.value
-    }, null)]);
+      "innerHTML": renderHtml.value,
+      "ref": reviewContentRef,
+      "onClick": onContentClick,
+      "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)])]);
   }
 });
 var index = {