vue-devui 1.5.7 → 1.5.8

package/vue-devui.es.js

@@ -1137,7 +1137,13 @@ const AlertCloseIcon = () => createVNode("svg", {
   "transform": "translate(-3.000000, -3.000000)",
   "fill-rule": "nonzero"
 }, [createVNode("path", {
-  "d": "M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
+  "d": `M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 
+          13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 
+          13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 
+          11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 
+          L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 
+          L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 
+          C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z`
 }, null)])])]);
 const ns$k = useNamespace("alert");
 const AlertTypeIcon = (props) => createVNode("svg", {
@@ -1171,12 +1177,16 @@ const AlertTypeIcon = (props) => createVNode("svg", {
         "fill-rule": "evenodd"
       }, [createVNode("path", {
         "class": "warning-outer",
-        "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
+        "d": `M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 
+              C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 
+              C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 
+              7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z`
       }, null), createVNode("path", {
         "class": "warning-inner",
         "stroke-width": "0.3",
         "fill-rule": "nonzero",
-        "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
+        "d": `M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 
+              L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z`
       }, null)]);
     case "info":
       return createVNode("g", {
@@ -6632,7 +6642,7 @@ var lodash = { exports: {} };
         position -= target.length;
         return position >= 0 && string3.slice(position, end) == target;
       }
-      function escape(string3) {
+      function escape2(string3) {
         string3 = toString(string3);
         return string3 && reHasUnescapedHtml.test(string3) ? string3.replace(reUnescapedHtml, escapeHtmlChar) : string3;
       }
@@ -7235,7 +7245,7 @@ var lodash = { exports: {} };
       lodash2.divide = divide;
       lodash2.endsWith = endsWith;
       lodash2.eq = eq2;
-      lodash2.escape = escape;
+      lodash2.escape = escape2;
       lodash2.escapeRegExp = escapeRegExp;
       lodash2.every = every;
       lodash2.find = find;
@@ -10604,7 +10614,9 @@ const IconBody = (props) => {
     "cy": "15",
     "r": "15"
   }, null), createVNode("path", {
-    "d": "M14.9997866,16 C12.5145053,16 10.4997866,13.9852814 10.4997866, 11.5 C10.4997866,9.01471863 12.5145053,7 14.9997866,7 C17.485068, 7 19.4997866,9.01471863 19.4997866,11.5 C19.4997866,13.9852814 17.485068, 16 14.9997866,16 Z M23,23 L7,22.998553 C7,19.0122153 10.8892296, 16.5 14.9997866,16.5 C19.1103437,16.5 23,20 23,23 Z",
+    "d": `M14.9997866,16 C12.5145053,16 10.4997866,13.9852814 10.4997866, 11.5 C10.4997866,9.01471863 12.5145053,7 14.9997866,7 
+          C17.485068, 7 19.4997866,9.01471863 19.4997866,11.5 C19.4997866,13.9852814 17.485068, 16 14.9997866,16 Z M23,23 L7,22.998553 
+          C7,19.0122153 10.8892296, 16.5 14.9997866,16.5 C19.1103437,16.5 23,20 23,23 Z`,
     "id": "\u5F62\u72B6\u7ED3\u5408",
     "fill": "#FFFFFF"
   }, null)])]);
@@ -10652,7 +10664,13 @@ const IconNobody = (props) => {
     "fill": "none",
     "fill-rule": "evenodd"
   }, [createVNode("path", {
-    "d": "M22.31,19.2474562 L22.31,21.9974562 L20.81,21.9974562 L20.81, 19.2474562 L18.06,19.2474562 L18.06,17.7474562 L20.81,17.7474562 L20.81, 14.9974562 L22.31,14.9974562 L22.31,17.7474562 L25.06,17.7474562 L25.06, 19.2474562 L22.31,19.2474562 Z M14.9297866,14.9974562 C12.4445053, 14.9974562 10.4297866,12.9827376 10.4297866,10.4974562 C10.4297866, 8.01217483 12.4445053,5.9974562 14.9297866,5.9974562 C17.415068, 5.9974562 19.4297866,8.01217483 19.4297866,10.4974562 C19.4297866, 12.9827376 17.415068,14.9974562 14.9297866,14.9974562 Z M19.6797866, 20.2474562 L19.6797866,21.9971623 L6.93,21.9960092 C6.93,18.0096715 10.8192296, 15.4974562 14.9297866,15.4974562 C16.4608397,15.4974562 17.9612467,15.983021 19.2414296, 16.7474562 L17.06,16.7474562 L17.06,20.2474562 L19.6797866,20.2474562 Z",
+    "d": `M22.31,19.2474562 L22.31,21.9974562 L20.81,21.9974562 L20.81, 19.2474562 L18.06,19.2474562 L18.06,17.7474562 
+          L20.81,17.7474562 L20.81, 14.9974562 L22.31,14.9974562 L22.31,17.7474562 L25.06,17.7474562 L25.06, 19.2474562 
+          L22.31,19.2474562 Z M14.9297866,14.9974562 C12.4445053, 14.9974562 10.4297866,12.9827376 10.4297866,10.4974562 
+          C10.4297866, 8.01217483 12.4445053,5.9974562 14.9297866,5.9974562 C17.415068, 5.9974562 19.4297866,8.01217483 
+          19.4297866,10.4974562 C19.4297866, 12.9827376 17.415068,14.9974562 14.9297866,14.9974562 Z M19.6797866, 20.2474562 
+          L19.6797866,21.9971623 L6.93,21.9960092 C6.93,18.0096715 10.8192296, 15.4974562 14.9297866,15.4974562 C16.4608397,15.4974562 
+          17.9612467,15.983021 19.2414296, 16.7474562 L17.06,16.7474562 L17.06,20.2474562 L19.6797866,20.2474562 Z`,
     "id": "\u5F62\u72B6\u7ED3\u5408",
     "fill": "#959EB2"
   }, null), createVNode("path", {
@@ -13759,8 +13777,8 @@ function useCodeEditor(props, ctx2) {
       if (mode.value === "review") {
         nextTick(() => {
           refreshDecorations();
-          refreshOverlayWidgets();
           refreshViewZones();
+          refreshOverlayWidgets();
         });
       }
     }
@@ -13807,11 +13825,10 @@ function useCodeEditor(props, ctx2) {
     }
   }
   function setEditorValue() {
-    var _a;
     if (!editor || !editor.getModel()) {
       return;
     }
-    (_a = editor.getModel().modified) == null ? void 0 : _a.setValue(modelValue.value);
+    editor.getModel().setValue(modelValue.value);
   }
   function setDiffEditorValue() {
     var _a;
@@ -13847,9 +13864,9 @@ function useCodeEditor(props, ctx2) {
     } else if (diffEditor) {
       model = diffEditor.getModel().modified;
     }
-    model.onDidChangeContent(lodash.exports.throttle(() => {
+    model == null ? void 0 : model.onDidChangeContent(lodash.exports.throttle(() => {
       modifyValueFromInner = true;
-      ctx2.emit("update: modelValue", model.getValue());
+      ctx2.emit("update:modelValue", model.getValue());
     }, 100));
   }
   function setDiffEditorOriginValue() {
@@ -13863,6 +13880,8 @@ function useCodeEditor(props, ctx2) {
     const language = options.value.language;
     if (editor) {
       if (mode.value === "normal" || mode.value === "review") {
+        monaco2.editor.setModelLanguage(editor.getModel(), language);
+      } else if (mode.value === "diff") {
         const model = diffEditor.getModel();
         monaco2.editor.setModelLanguage(model.modified, language);
         monaco2.editor.setModelLanguage(model.original, language);
@@ -13894,7 +13913,7 @@ function useCodeEditor(props, ctx2) {
         const lineDecoration = [
           {
             range: new monaco2.Range(currentLineNumber, 0, currentLineNumber, 0),
-            option: {
+            options: {
               isWholeLine: true,
               glyphMarginClassName: `icon-pointer ${addCommentIcon.value}`
             }
@@ -13920,7 +13939,7 @@ function useCodeEditor(props, ctx2) {
       setTimeout(() => {
         currentDecorations = editor.deltaDecorations(currentDecorations, tempDecorations);
       });
-      currentDecorations = editor.deltaDecorations(currentLineDecoration, []);
+      currentLineDecoration = editor.deltaDecorations(currentLineDecoration, []);
     }
   }
   function setDecorations(decoration) {
@@ -13965,7 +13984,7 @@ function useCodeEditor(props, ctx2) {
           heightInPx: comment2.heightInPx ? comment2.heightInPx : 0,
           afterColumn: 1,
           domNode: document.createElement("div"),
-          ondomNodeTop: (top) => {
+          onDomNodeTop: (top) => {
             layoutOverlayWidget(comment2.lineNumber, { top });
           },
           onComputedHeight: (height) => {
@@ -13988,7 +14007,7 @@ function useCodeEditor(props, ctx2) {
   }
   function calculateLayoutInfo(positionInfos, editorLayoutInfo, index2) {
     let _offsetLeft = 0;
-    const indexOffsetLeft = comments.value[index2].offserLeft;
+    const indexOffsetLeft = comments.value[index2].offsetLeft;
     if (indexOffsetLeft) {
       _offsetLeft = indexOffsetLeft;
     } else {
@@ -14001,8 +14020,8 @@ function useCodeEditor(props, ctx2) {
       offsetLeft: _offsetLeft
     };
   }
-  function handleDomNodePosition(top, hieght, index2) {
-    comments.value[index2].domNode.style.height = `${hieght}px`;
+  function handleDomNodePosition(top, height, index2) {
+    comments.value[index2].domNode.style.height = `${height}px`;
     if (heightMap.get(index2) === 0) {
       comments.value[index2].domNode.style.top = `-${1e4 + top}px`;
     } else {
@@ -14068,7 +14087,7 @@ var codeEditor = "";
 var CodeEditor = defineComponent({
   name: "DCodeEditor",
   props: codeEditorProps,
-  emits: ["update: modelValue", "afterEditorInit", "click"],
+  emits: ["update:modelValue", "afterEditorInit", "click"],
   setup(props, ctx2) {
     const {
       editorEl
@@ -14137,6 +14156,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,
@@ -14150,6 +14251,10 @@ const codeReviewProps = {
   outputFormat: {
     type: String,
     default: "line-by-line"
+  },
+  expandAllThreshold: {
+    type: Number,
+    default: 50
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -14219,17 +14324,159 @@ 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 insertNode(parent, child) {
+  if (parent.firstChild) {
+    parent.insertBefore(child, parent.firstChild);
+  } else {
+    parent.appendChild(child);
+  }
+}
+function addExpandButton(parentNode, className2, icon2) {
+  const expandButton = document.createElement("div");
+  expandButton.innerHTML = icon2;
+  expandButton.classList.add("expand-icon");
+  expandButton.classList.add(className2);
+  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, expandAllThreshold, outputFormat) {
+  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;
+          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) {
+          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;
+          attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
+        }
+      }
+    }
+    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);
+  };
+  const insertExpandButton = () => {
+    outputFormat === "side-by-side" ? processSideBySide() : processLineByLine();
+  };
+  return { insertExpandButton };
+}
 function useCodeReview(props, ctx2) {
-  const { diff, fold, outputFormat } = toRefs(props);
+  const { diff, fold, outputFormat, expandAllThreshold } = 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 initDiffContent = () => {
     renderHtml.value = Diff2Html.html(diffFile, {
       drawFileList: false,
       matching: "lines",
       outputFormat: outputFormat.value
     });
+    nextTick(insertExpandButton);
   };
   const toggleFold = (status2) => {
     if (status2 !== void 0) {
@@ -14252,21 +14499,130 @@ function useCodeReview(props, ctx2) {
       initDiffContent();
     }
   });
-  provide(CodeReviewInjectionKey, { diffInfo: diffFile[0], isFold, rootCtx: ctx2 });
-  ctx2.expose({ toggleFold });
-  return { renderHtml, isFold };
+  provide(CodeReviewInjectionKey, { reviewContentRef, diffInfo: diffFile[0], isFold, rootCtx: ctx2 });
+  return { renderHtml, isFold, reviewContentRef, toggleFold };
+}
+function useCodeReviewComment(reviewContentRef, ctx2) {
+  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 = () => {
+    ctx2.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;
+    }
+  };
+  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"],
   setup(props, ctx2) {
     const ns2 = useNamespace("code-review");
     const {
       renderHtml,
-      isFold
+      isFold,
+      reviewContentRef,
+      toggleFold
     } = useCodeReview(props, ctx2);
+    const {
+      commentLeft,
+      commentTop,
+      onMouseEnter,
+      onMouseMove,
+      onMouseleave,
+      onCommentMouseLeave,
+      onCommentIconClick,
+      insertComment,
+      removeComment
+    } = useCodeReviewComment(reviewContentRef, ctx2);
+    onMounted(() => {
+      ctx2.emit("afterViewInit", {
+        toggleFold,
+        insertComment,
+        removeComment
+      });
+    });
     return () => createVNode("div", {
       "class": ns2.b()
     }, [createVNode(CodeReviewHeader, {
@@ -14275,8 +14631,20 @@ var CodeReview = defineComponent({
       "class": [ns2.e("content"), {
         "hide-content": isFold.value
       }],
-      "innerHTML": renderHtml.value
-    }, null)]);
+      "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)])]);
   }
 });
 var CodeReviewInstall = {
@@ -26129,6 +26497,633 @@ var GanttInstall = {
     app.use(Gantt);
   }
 };
+const gitGraphProps = {
+  option: {
+    type: Object
+  }
+};
+class GitGraph$1 {
+  constructor() {
+    __publicField(this, "element");
+    __publicField(this, "options");
+    __publicField(this, "mtime", 0);
+    __publicField(this, "mspace", 0);
+    __publicField(this, "parents", {});
+    __publicField(this, "offsetX", 70);
+    __publicField(this, "offsetY", 60);
+    __publicField(this, "unitTime", 50);
+    __publicField(this, "unitSpace", 15);
+    __publicField(this, "prev_start", -1);
+    __publicField(this, "preparedCommits", {});
+    __publicField(this, "preStart", 1);
+    __publicField(this, "isDark", false);
+    __publicField(this, "daysBefore", "\u5929\u524D");
+    __publicField(this, "hoursAgo", "\u5C0F\u65F6\u524D");
+    __publicField(this, "minutesAgo", "\u5206\u949F\u524D");
+    __publicField(this, "aMinutesAgo", "1\u5206\u949F\u524D");
+    __publicField(this, "maxNameLength", 25);
+    __publicField(this, "commits", []);
+    __publicField(this, "graphHeight", 0);
+    __publicField(this, "graphWidth", 0);
+    __publicField(this, "svg");
+    __publicField(this, "barHeight", 0);
+    __publicField(this, "messageBoxWidth", 0);
+    __publicField(this, "colors", [
+      "#5C8DFF",
+      "#BC94FF",
+      "#54D2EB",
+      "#A6DD82",
+      "#FCDA6B",
+      "#CA7ED6",
+      "#7298F1",
+      "#73CEA6",
+      "#EDD249",
+      "#CAABFF",
+      "#85CAFF",
+      "#93D99A",
+      "#96ADFA",
+      "#F4AF8F",
+      "#A282E9",
+      "#FFBB6B",
+      "#69DBB9",
+      "#76DBEF",
+      "#B1CE4F",
+      "#5DA4DC"
+    ]);
+    __publicField(this, "toolTipList");
+  }
+  load(element, options, isDark) {
+    this.element = element;
+    this.options = options;
+    this.isDark = !!isDark;
+    this.daysBefore = options.params.daysBefore || this.daysBefore;
+    this.hoursAgo = options.params.hoursAgo || this.hoursAgo;
+    this.minutesAgo = options.params.minutesAgo || this.minutesAgo;
+    this.aMinutesAgo = options.params.aMinutesAgo || this.aMinutesAgo;
+    this.maxNameLength = options.params.maxNameLength || 25;
+    const commits = lodash.exports.cloneDeep(this.options.data.commits);
+    this.prepareData(commits);
+    return this.buildGraph("refName");
+  }
+  prepareData(commits) {
+    var _a;
+    let c;
+    this.commits = commits;
+    this.collectParent();
+    this.graphHeight = this.element.getBoundingClientRect().height;
+    this.graphWidth = this.element.getBoundingClientRect().width;
+    const ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
+    Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
+    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.svg.setAttribute("height", ch + "");
+    this.svg.setAttribute("width", "100%");
+    (_a = this.element) == null ? void 0 : _a.appendChild(this.svg);
+    this.barHeight = Math.max(this.graphHeight, this.unitTime * this.commits.length + 320);
+    const _ref = this.commits;
+    for (let _i = 0; _i < _ref.length; _i++) {
+      c = _ref[_i];
+      this.preparedCommits[c.id] = c;
+    }
+  }
+  collectParent() {
+    let c;
+    let p;
+    let _i;
+    let _len;
+    const _this = this;
+    const _ref = this.commits;
+    const _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      c = _ref[_i];
+      this.mtime = Math.max(this.mtime, c.time);
+      this.mspace = Math.max(this.mspace, c.space);
+      _results.push(function() {
+        let _j;
+        let _len2;
+        const _ref2 = c.parents;
+        const _result2 = [];
+        for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
+          p = _ref2[_j];
+          _this.parents[p[0]] = true;
+          _result2.push(_this.mspace = Math.max(_this.mspace, p[1]));
+        }
+        return _result2;
+      }.call(_this));
+    }
+    return _results;
+  }
+  buildGraph(refName) {
+    let curDay = new Date(0);
+    let day;
+    let mm;
+    let _len;
+    const _ref = this.commits;
+    for (mm = 0, _len = _ref.length; mm < _len; mm++) {
+      day = _ref[mm].date;
+      if (curDay.getDate() !== new Date(day).getDate() || curDay.getMonth() !== new Date(day).getMonth() || curDay.getFullYear() !== new Date(day).getFullYear()) {
+        const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        const date4 = new Date(day);
+        const attrs = {
+          x: this.offsetX + this.unitSpace * this.mspace + 56,
+          y: this.offsetY + this.unitTime * mm - 22,
+          "font-size": "12px",
+          fill: "#999",
+          "text-anchor": "start"
+        };
+        this.setNodeAttr(text, attrs);
+        const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+        tspan.appendChild(document.createTextNode(date4.getFullYear() + " / " + (date4.getMonth() + 1) + " / " + date4.getDate()));
+        text.appendChild(tspan);
+        this.svg.appendChild(text);
+        curDay = date4;
+      }
+    }
+    this.renderPartialGraph(refName);
+  }
+  setNodeAttr(node, attrs) {
+    Object.keys(attrs).forEach((key) => {
+      node.setAttribute(key, attrs[key]);
+    });
+  }
+  __transform(time) {
+    let timeTip = "";
+    const now = new Date().getTime();
+    const commitTime = new Date(time).getTime();
+    const day = (now - commitTime) / (60 * 60 * 24 * 1e3);
+    const hour = (now - commitTime) / (60 * 60 * 1e3);
+    const minutes = (now - commitTime) / (60 * 1e3);
+    if (day >= 1) {
+      timeTip = Math.floor(day) + this.daysBefore;
+    } else {
+      if (hour >= 1) {
+        timeTip = Math.floor(hour) + this.hoursAgo;
+      } else {
+        if (minutes >= 1) {
+          timeTip = Math.floor(minutes) + this.minutesAgo;
+        } else {
+          timeTip = this.aMinutesAgo;
+        }
+      }
+    }
+    return timeTip;
+  }
+  renderPartialGraph(refName) {
+    let commit;
+    let end;
+    let i;
+    let isGraphEdge;
+    let start;
+    let x;
+    let y;
+    start = Math.floor((this.element.scrollTop - this.offsetY) / this.unitTime) - 10;
+    if (start < 0) {
+      isGraphEdge = true;
+      start = 0;
+    }
+    end = this.element.scrollHeight > this.element.clientHeight ? start + 40 : Infinity;
+    if (this.preStart <= end) {
+      isGraphEdge = true;
+      start = this.preStart - 1;
+      this.preStart = end;
+    }
+    if (this.commits.length < end) {
+      isGraphEdge = true;
+      end = this.commits.length;
+    }
+    if (this.prev_start === -1 || Math.abs(this.prev_start - start) > 10 || isGraphEdge) {
+      i = start;
+      this.prev_start = start;
+      while (i < end) {
+        commit = this.commits[i];
+        i += 1;
+        if (commit["hasDrawn"] !== true) {
+          x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+          y = this.offsetY + this.unitTime * commit.time;
+          this.drawDot(x, y, commit);
+          this.drawLines(x, y, commit);
+          this.appendLabel(x, y, commit);
+          this.appendAnchor(x, y, commit, refName);
+          commit["hasDrawn"] = true;
+        }
+      }
+    }
+  }
+  drawDot(x, y, commit) {
+    const options = this.options;
+    const isdark = this.isDark;
+    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    const attrs = {
+      cx: x,
+      cy: y,
+      r: 4,
+      fill: "#fff",
+      strokeWidth: 1,
+      stroke: this.colors[commit.space],
+      style: "cursor: pointer;"
+    };
+    this.setNodeAttr(circle, attrs);
+    this.svg.appendChild(circle);
+    const avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 16;
+    const avatar_box_y = y - 13;
+    const img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    const imgAttrs = {
+      width: 30,
+      height: 30,
+      preserveAspectRatio: "none",
+      href: commit.author.avatar_url,
+      x: avatar_box_x,
+      y: avatar_box_y,
+      style: "clip-path: circle(50%)"
+    };
+    this.setNodeAttr(img, imgAttrs);
+    this.svg.appendChild(img);
+    if (!this.messageBoxWidth) {
+      this.messageBoxWidth = this.svg.getBoundingClientRect.width - (avatar_box_x + 40);
+    }
+    let route = ["M", avatar_box_x + 15, avatar_box_y - 20, "L", avatar_box_x + 15, avatar_box_y];
+    const line1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    const lineAttrs1 = {
+      d: route.join(" "),
+      stroke: "#ccc",
+      fill: "none",
+      "stroke-width": 2
+    };
+    this.setNodeAttr(line1, lineAttrs1);
+    this.svg.appendChild(line1);
+    route = ["M", avatar_box_x + 15, avatar_box_y + 30, "L", avatar_box_x + 15, avatar_box_y + 50];
+    const line2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    const lineAttrs2 = {
+      d: route.join(" "),
+      stroke: "#ccc",
+      "stroke-width": 2
+    };
+    this.setNodeAttr(line2, lineAttrs2);
+    this.svg.appendChild(line2);
+    if (commit.author.name.length > this.maxNameLength) {
+      commit.author.name = commit.author.name.substr(0, this.maxNameLength) + "...";
+    }
+    const commitText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    const commitAttrs = {
+      x: avatar_box_x + 40,
+      y: y + 4,
+      "text-anchor": "start",
+      style: "cursor: pointer;text-anchor: start;",
+      fill: isdark ? "#e8e8e8" : "#2e2e2e",
+      "font-size": 14
+    };
+    this.setNodeAttr(commitText, commitAttrs);
+    const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+    tspan.appendChild(document.createTextNode(commit.message.replace(/\n/g, " ")));
+    commitText.appendChild(tspan);
+    const titleText = document.createElementNS("http://www.w3.org/2000/svg", "title");
+    titleText.appendChild(document.createTextNode(commit.message));
+    commitText.appendChild(titleText);
+    this.svg.appendChild(commitText);
+    commitText.onclick = function() {
+      const url2 = commit.customUrl || (options == null ? void 0 : options.commit_url.replace("{commitId}", commit.id));
+      return window.open(url2, "_blank");
+    };
+  }
+  drawLines(x, y, commit) {
+    let arrow2;
+    let color2;
+    let offset2;
+    let parent;
+    let parentCommit;
+    let parentX1;
+    let parentX2;
+    let parentY;
+    let route;
+    const _ref = commit.parents;
+    for (let i = 0; i < _ref.length; i++) {
+      parent = _ref[i];
+      parentCommit = this.preparedCommits[parent[0]];
+      if (!parentCommit) {
+        break;
+      }
+      parentY = this.offsetY + this.unitTime * parentCommit.time;
+      parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
+      parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
+      if (parentCommit.space <= commit.space) {
+        color2 = this.colors[commit.space];
+      } else {
+        color2 = this.colors[parentCommit.space];
+      }
+      if (parent[1] === commit.space) {
+        offset2 = [0, 5];
+        arrow2 = "l-2,5,4,0,-2,-5,0,5".split(",");
+      } else if (parent[1] < commit.space) {
+        offset2 = [3, 3];
+        arrow2 = "l5,0,-2,4,-3,-4,4,2".split(",");
+      } else {
+        offset2 = [-3, 3];
+        arrow2 = "l-5,0,2,4,3,-4,-4,2".split(",");
+      }
+      route = ["M", x + offset2[0], y + offset2[1]];
+      if (i > 0) {
+        route.push(...arrow2);
+      }
+      if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
+        route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
+      }
+      route.push("L", parentX1, parentY);
+      const line = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      const lineAttrs = {
+        d: route.join(" "),
+        stroke: color2,
+        "stroke-width": 1,
+        fill: "none"
+      };
+      this.setNodeAttr(line, lineAttrs);
+      this.svg.appendChild(line);
+    }
+  }
+  appendLabel(x, y, commit) {
+    let shortrefs;
+    if (!commit.refs) {
+      return;
+    }
+    shortrefs = commit.refs;
+    if (shortrefs.length > 7) {
+      if (escape(shortrefs).indexOf("%u") < 0) {
+        shortrefs = shortrefs.substr(0, 5) + "...";
+      } else {
+        shortrefs = shortrefs.substr(0, 3) + "...";
+      }
+    }
+    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    const textAttrs = {
+      x: x + 4,
+      y: y + 4,
+      "text-anchor": "start",
+      fill: "none",
+      style: "font-size: 10px;"
+    };
+    this.setNodeAttr(text, textAttrs);
+    const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    tspan.appendChild(document.createTextNode(shortrefs));
+    text.appendChild(tspan);
+    const titleText = document.createElementNS("http://www.w3.org/2000/svg", "title");
+    titleText.appendChild(document.createTextNode(commit.refs));
+    text.appendChild(titleText);
+    this.svg.appendChild(rect);
+    this.svg.appendChild(text);
+    setTimeout(() => {
+      const textbox = text.getBBox();
+      const path = [
+        "M",
+        x,
+        y - 7,
+        "L",
+        x,
+        y - 7 + textbox.height + 4,
+        "L",
+        x + textbox.width + 8,
+        y - 7 + textbox.height + 4,
+        "L",
+        x + textbox.width + 8,
+        y + 4,
+        "L",
+        x + textbox.width + 18,
+        y,
+        "L",
+        x + textbox.width + 8,
+        y - 4,
+        "L",
+        x + textbox.width + 8,
+        y - 7,
+        "Z"
+      ];
+      const rectAttrs = {
+        fill: this.isDark ? "#4C4C4C" : "#fff",
+        stroke: this.colors[commit.space],
+        "stroke-width": "1px",
+        d: path.join(" "),
+        transform: `matrix(1,0,0,1,-${textbox.width + 26},0)`
+      };
+      const newAttrs = {
+        transform: `matrix(1,0,0,1,-${textbox.width + 26},0)`,
+        fill: this.colors[commit.space]
+      };
+      this.setNodeAttr(text, newAttrs);
+      this.setNodeAttr(rect, rectAttrs);
+    });
+  }
+  appendAnchor(x, y, commit, refName) {
+    const options = this.options;
+    const isDark = this.isDark;
+    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    const attrs = {
+      cx: x,
+      cy: y,
+      r: 10,
+      fill: "#000",
+      opacity: 0,
+      style: "cursor:pointer;"
+    };
+    this.setNodeAttr(circle, attrs);
+    circle.onclick = function() {
+      localStorage.setItem("refName", refName);
+      const url2 = commit.customUrl || (options == null ? void 0 : options.commit_url.replace("{commitId}", commit.id));
+      return window.open(url2, "_blank");
+    };
+    circle.onmouseover = () => {
+      this.commitTooltip(x + 20, y + 20, commit, isDark);
+    };
+    circle.onmouseleave = () => {
+      this.toolTipList.forEach((element) => {
+        this.svg.removeChild(element);
+      });
+    };
+    this.svg.appendChild(circle);
+  }
+  getText(x, y, text, attrs = {}) {
+    const resText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    this.setNodeAttr(resText, __spreadValues({
+      x,
+      y
+    }, attrs));
+    const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+    tspan.appendChild(document.createTextNode(text));
+    resText.appendChild(tspan);
+    return resText;
+  }
+  commitTooltip(x, y, commit, isDark) {
+    let boxHeight;
+    let boxWidth;
+    let messageText;
+    boxWidth = 300;
+    boxHeight = 200;
+    const nameText = this.getText(x, y + 10, commit.author.name, {
+      font: "14px Arial",
+      "font-weight": "bold",
+      "text-anchor": "start"
+    });
+    const idText = this.getText(x, y + 55, commit.id, {
+      fill: isDark ? "#73788a" : "#71757f",
+      "text-anchor": "start"
+    });
+    const timeText = this.getText(x, y + 35, this.__transform(commit.date), {
+      font: "12px Arial",
+      fill: isDark ? "#73788a" : "#71757f",
+      "text-anchor": "start"
+    });
+    const branchText = commit.branch ? this.getText(x + 70, y + 35, commit.branch, {
+      font: "12px Arial",
+      fill: isDark ? "#73788a" : "#71757f"
+    }) : null;
+    const strList = commit.message.split("\n");
+    if (strList.length > 10) {
+      messageText = this.getText(x, y + 70, strList.slice(0, 10).join("\n") + "...", {
+        fill: isDark ? "#E8E8E8" : "#2e2e2e",
+        "text-anchor": "start",
+        font: "12px Monaco, monospace"
+      });
+    } else if (commit.message.length > 1500) {
+      messageText = this.getText(x, y + 70, commit.message.slice(0, 1500) + "...", {
+        fill: isDark ? "#E8E8E8" : "#2e2e2e",
+        "text-anchor": "start",
+        font: "12px Monaco, monospace"
+      });
+    } else {
+      messageText = this.getText(x, y + 70, commit.message, {
+        fill: isDark ? "#E8E8E8" : "#2e2e2e",
+        "text-anchor": "start",
+        font: "12px Monaco, monospace"
+      });
+    }
+    const textArr = commit.branch ? [nameText, idText, messageText, timeText, branchText] : [nameText, idText, messageText, timeText];
+    this.textWrap(messageText, boxWidth - 50, x);
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    this.setNodeAttr(rect, {
+      x: x - 10,
+      y: y - 10,
+      width: boxWidth,
+      height: 100,
+      fill: isDark ? "#4c4c4c" : "#fff",
+      stroke: isDark ? "#4c4c4c" : "#fff",
+      "stroke-linecap": "round",
+      "stroke-width": "1px"
+    });
+    textArr.unshift(rect);
+    const rectShadow = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    this.setNodeAttr(rectShadow, {
+      x: x - 11,
+      y: y - 10,
+      width: boxWidth + 2,
+      height: 100,
+      fill: isDark ? "#4c4c4c" : "#eee",
+      stroke: isDark ? "#4c4c4c" : "#eee",
+      "stroke-linecap": "round",
+      "stroke-width": "1px"
+    });
+    textArr.unshift(rectShadow);
+    textArr.forEach((t) => {
+      this.svg.appendChild(t);
+    });
+    boxWidth = messageText.getBBox().width + 20 > boxWidth ? messageText.getBBox().width + 20 : boxWidth;
+    boxHeight = 80 + messageText.getBBox().height;
+    this.toolTipList = textArr;
+    this.setNodeAttr(rect, {
+      height: boxHeight + 10,
+      width: boxWidth
+    });
+    this.setNodeAttr(rectShadow, {
+      height: boxHeight + 13,
+      width: boxWidth + 2
+    });
+  }
+  textWrap(t, width, x) {
+    const content2 = t.children[0].innerHTML;
+    let words = content2.split("\n").filter((item) => item !== "");
+    words = words.map((str) => {
+      str = str.trim();
+      let len = str.length;
+      const strList = [];
+      while (len > 70) {
+        strList.push(str.slice(0, 70));
+        str = str.slice(70);
+        len = str.length;
+      }
+      strList.push(str);
+      return strList.join("\n");
+    });
+    t.removeChild(t.children[0]);
+    words.forEach((str) => {
+      const list2 = str.split("\n");
+      list2.forEach((item) => {
+        const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+        tspan.appendChild(document.createTextNode(item));
+        this.setNodeAttr(tspan, {
+          dy: 14.4,
+          x
+        });
+        t.appendChild(tspan);
+      });
+      const space = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+      space.appendChild(document.createTextNode(" "));
+      this.setNodeAttr(space, {
+        dy: 14.4,
+        x
+      });
+      t.appendChild(space);
+    });
+  }
+}
+function useGitGraph(props, ctx2, isDark) {
+  let themeService;
+  const graph = new GitGraph$1();
+  const themeChange = () => {
+    var _a;
+    isDark.value = !!((_a = themeService == null ? void 0 : themeService.currentTheme) == null ? void 0 : _a.isDark);
+  };
+  const initTheme = () => {
+    var _a;
+    themeService = window["devuiThemeService"];
+    isDark.value = !!((_a = themeService == null ? void 0 : themeService.currentTheme) == null ? void 0 : _a.isDark);
+    if (themeService) {
+      themeService.eventBus.add("themeChanged", themeChange);
+    }
+  };
+  const initGraph = (element, options, isDarkMode) => {
+    graph.load(element, options, isDarkMode);
+  };
+  return {
+    initTheme,
+    initGraph
+  };
+}
+var GitGraph = defineComponent({
+  name: "DGitGraph",
+  props: gitGraphProps,
+  emits: ["scrollToBottom"],
+  setup(props, ctx2) {
+    const isDark = ref(false);
+    const {
+      initTheme,
+      initGraph
+    } = useGitGraph(props, ctx2, isDark);
+    onMounted(() => {
+      nextTick(() => {
+        const graphEle = document.getElementsByClassName("d-graph-wrapper")[0];
+        initTheme();
+        initGraph(graphEle, props.option, isDark.value);
+      });
+    });
+    return () => createVNode("div", {
+      "class": "d-graph-wrapper"
+    }, null);
+  }
+});
+var GitGraphInstall = {
+  title: "GitGraph \u63D0\u4EA4\u7F51\u7EDC\u56FE",
+  category: "\u6F14\u8FDB\u4E2D",
+  status: "100%",
+  install(app) {
+    app.component(GitGraph.name, GitGraph);
+  }
+};
 const rowProps = {
   align: {
     type: String,
@@ -42149,6 +43144,7 @@ const installs = [
   FormInstall,
   FullscreenInstall,
   GanttInstall,
+  GitGraphInstall,
   GridInstall,
   IconInstall,
   ImagePreviewInstall,
@@ -42203,9 +43199,9 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.7",
+  version: "1.5.8",
   install(app) {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, ActionTimeline, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, BreadcrumbItem, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, CodeEditor, CodeReview, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DChart, DRangeDatePickerPro, DatePicker, DatePickerPro, DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, DroppableDirective, EditableSelect, EditorMd, FixedOverlay, FlexibleOverlay, Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, MdRender, Mention, Menu, MenuItem, Message, Modal, ModalBody, ModalFooter, ModalHeader, MultiAutoComplete, NavSprite, Notification, NotificationService, Option, OptionGroup, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioButton, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, SplitterPane, Statistic, Status, Step, Steps, StepsGuide, StepsGuideDirective, StickSlider, Sticky, SubMenu, Switch, Tab, Table, Tabs, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList, vueDevui as default, fileDropDirective };
+export { Accordion, ActionTimeline, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, BreadcrumbItem, DButton as Button, ButtonGroup, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, DCheckboxGroup as CheckboxGroup, CodeEditor, CodeReview, Col, Collapse, CollapseItem, ColorPicker, Column, Comment, Content, Countdown, DChart, DRangeDatePickerPro, DatePicker, DatePickerPro, DraggableDirective, Drawer, DrawerService, Dropdown$1 as Dropdown, DropdownMenu, DroppableDirective, EditableSelect, EditorMd, FixedOverlay, FlexibleOverlay, Footer, Form, FormItem, FormOperation, Fullscreen, Gantt, GitGraph, Header, DIcon as Icon, IconGroup, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, LoadingDirective, loading as LoadingService, MdRender, Mention, Menu, MenuItem, Message, Modal, ModalBody, ModalFooter, ModalHeader, MultiAutoComplete, NavSprite, Notification, NotificationService, Option, OptionGroup, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioButton, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, SplitterPane, Statistic, Status, Step, Steps, StepsGuide, StepsGuideDirective, StickSlider, Sticky, SubMenu, Switch, Tab, Table, Tabs, Tag, TagInput, Textarea, TimePicker, TimeSelect, Timeline, TimelineItem, Tooltip, Transfer, Tree, TreeSelect, Upload, VirtualList, vueDevui as default, fileDropDirective };