vue-devui 1.5.7-hotfix.3 → 1.5.8

package/vue-devui.es.js

@@ -6642,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;
       }
@@ -7245,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;
@@ -14156,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,
@@ -14169,6 +14251,10 @@ const codeReviewProps = {
   outputFormat: {
     type: String,
     default: "line-by-line"
+  },
+  expandAllThreshold: {
+    type: Number,
+    default: 50
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -14238,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) {
@@ -14271,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, {
@@ -14294,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 = {
@@ -26148,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,
@@ -42168,6 +43144,7 @@ const installs = [
   FormInstall,
   FullscreenInstall,
   GanttInstall,
+  GitGraphInstall,
   GridInstall,
   IconInstall,
   ImagePreviewInstall,
@@ -42222,9 +43199,9 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.5.7-hotfix.3",
+  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 };