@cmstops/pro-compo 0.3.39 → 0.3.41

package/lib/docHistory/scripts/diff.js

@@ -0,0 +1,295 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var diff = require("diff");
+function GetAllTextNodes(parent) {
+  let nodesList = [];
+  const layer = parent.childNodes;
+  const childNum = layer.length;
+  for (let i = 0; i < childNum; i++) {
+    const childNode = layer[i];
+    const noteType = childNode.nodeType;
+    if (noteType === 3 && Trim(childNode.data).length !== 0) {
+      nodesList[nodesList.length] = childNode;
+    }
+    if (noteType === 1) {
+      nodesList = nodesList.concat(GetAllTextNodes(childNode));
+    }
+  }
+  return nodesList;
+}
+function CompareById2(leftNode, rightNode) {
+  const lftList = GetAllTextNodes(leftNode);
+  const rhtList = GetAllTextNodes(rightNode);
+  CompareNodes(lftList, rhtList);
+  return leftNode.innerHTML;
+}
+function Equal(v_node1, v_node2) {
+  if (v_node1.data === v_node2.data)
+    return true;
+  return false;
+}
+function CompareText(v_LeftList, v_RightList, lftPNode = null) {
+  const leftLen = v_LeftList.length;
+  const rightLen = v_RightList.length;
+  if (rightLen === leftLen && rightLen === 1) {
+    if (v_LeftList[0].data.length === v_RightList[0].data.length && v_RightList[0].data.length === 1)
+      return;
+  }
+  if (leftLen === 0) {
+    let rightFather = null;
+    for (let i = 0; i < rightLen; i++) {
+      if (!rightFather)
+        rightFather = v_RightList[i].parentNode;
+      const node = v_RightList[i].clone(true);
+      try {
+        rightFather.removeChild(v_RightList[i]);
+      } catch (e) {
+        console.log(e);
+      }
+      if (lftPNode)
+        lftPNode.appendChild(node);
+      PaintRemove(node);
+    }
+  } else if (rightLen === 0) {
+    for (let i = 0; i < leftLen; i++)
+      PaintAdd(v_LeftList[i]);
+  } else {
+    const LeftTextList = GetCharList(v_LeftList);
+    const RightTextList = GetCharList(v_RightList);
+    const diff$1 = diff.diffChars(RightTextList.join(""), LeftTextList.join(""));
+    let leftFather = null;
+    for (let i = 0; i < v_LeftList.length; i++) {
+      if (!leftFather)
+        leftFather = v_LeftList[i].parentNode;
+      try {
+        leftFather.removeChild(v_LeftList[i]);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+    diff$1.forEach((item) => {
+      if (item.added) {
+        const addNode = document.createTextNode(item.value);
+        leftFather.appendChild(addNode);
+        PaintAdd(addNode);
+        return;
+      }
+      if (item.removed) {
+        const removeNode = document.createTextNode(item.value);
+        leftFather.appendChild(removeNode);
+        PaintRemove(removeNode);
+        return;
+      }
+      const changeNode = document.createTextNode(item.value);
+      leftFather.appendChild(changeNode);
+    });
+  }
+}
+function GetCharList(v_nodeList) {
+  const CharList = [];
+  for (let i = 0; i < v_nodeList.length; i++) {
+    const text = v_nodeList[i].data;
+    for (let j = 0; j < text.length; j++) {
+      CharList[CharList.length] = text.charAt(j);
+    }
+  }
+  return CharList;
+}
+function PaintAdd(vNode) {
+  const nNode = document.createElement("span");
+  nNode.style.background = "#d3fadc";
+  const c = vNode.cloneNode(true);
+  nNode.appendChild(c);
+  const f = vNode.parentNode;
+  f.replaceChild(nNode, vNode);
+  vNode = c;
+  return vNode;
+}
+function PaintRemove(vNode) {
+  const nNode = document.createElement("span");
+  nNode.style.textDecoration = "line-through";
+  nNode.style.background = "#f7cfd3";
+  const c = vNode.cloneNode(true);
+  nNode.appendChild(c);
+  const f = vNode.parentNode;
+  f.replaceChild(nNode, vNode);
+  vNode = c;
+  return vNode;
+}
+function GetNodeList(v_nodesList, v_begin, v_len) {
+  const List = [];
+  for (let j = 0; j < v_len; j++) {
+    List[j] = v_nodesList[v_begin + j];
+  }
+  return List;
+}
+function LTrim(s) {
+  return s.replace(/^\s*/, "");
+}
+function RTrim(s) {
+  return s.replace(/\s*$/, "");
+}
+function Trim(s) {
+  return RTrim(LTrim(s));
+}
+function CompareNodes(v_LeftNodesList, v_RightNodesList) {
+  let PreRightIndex = -1;
+  let PreLeftIndex = -1;
+  let RightIndex = 0;
+  let LeftIndex = 0;
+  const nLeftNodesListLen = v_LeftNodesList.length;
+  const nRightNodesListLen = v_RightNodesList.length;
+  while (LeftIndex <= nLeftNodesListLen || RightIndex <= nRightNodesListLen) {
+    const leftFather = LeftIndex === nLeftNodesListLen ? v_LeftNodesList[LeftIndex - 1] : v_LeftNodesList[LeftIndex];
+    if (LeftIndex === nLeftNodesListLen) {
+      try {
+        CompareText(
+          GetNodeList(
+            v_LeftNodesList,
+            PreLeftIndex + 1,
+            LeftIndex - PreLeftIndex - 1
+          ),
+          GetNodeList(
+            v_RightNodesList,
+            PreRightIndex + 1,
+            RightIndex - PreRightIndex - 1
+          ),
+          leftFather
+        );
+      } catch (e) {
+        console.log("\u5220\u9664\u6570\u636E\u586B\u5145\u5F02\u5E38");
+        throw e;
+      }
+      break;
+    }
+    if (RightIndex === nRightNodesListLen) {
+      try {
+        CompareText(
+          GetNodeList(
+            v_LeftNodesList,
+            PreLeftIndex + 1,
+            LeftIndex - PreLeftIndex - 1
+          ),
+          GetNodeList(
+            v_RightNodesList,
+            PreRightIndex + 1,
+            RightIndex - PreRightIndex - 1
+          ),
+          leftFather
+        );
+        for (let j = LeftIndex; j < nLeftNodesListLen; j++)
+          v_RightNodesList[j] = PaintAdd(v_LeftNodesList[j]);
+        break;
+      } catch (e) {
+        console.log("\u65B0\u589E\u6570\u636E\u586B\u5145\u5F02\u5E38");
+        throw e;
+      }
+    }
+    if (Equal(v_LeftNodesList[LeftIndex], v_RightNodesList[RightIndex])) {
+      if (v_LeftNodesList[LeftIndex].data.length > 1) {
+        try {
+          CompareText(
+            GetNodeList(
+              v_LeftNodesList,
+              PreLeftIndex + 1,
+              LeftIndex - PreLeftIndex - 1
+            ),
+            GetNodeList(
+              v_RightNodesList,
+              PreRightIndex + 1,
+              RightIndex - PreRightIndex - 1
+            ),
+            leftFather
+          );
+        } catch (e) {
+          console.log("\u76F8\u4F3C\u8282\u70B9\u5BF9\u6BD4\u5F02\u5E38");
+          throw e;
+        }
+        PreLeftIndex = LeftIndex;
+        PreRightIndex = RightIndex;
+      } else if (v_LeftNodesList[LeftIndex].data.length === 1 && v_LeftNodesList[LeftIndex].data.charCodeAt(0) > 127) {
+        PreLeftIndex = LeftIndex;
+        PreRightIndex = RightIndex;
+      }
+      LeftIndex++;
+      RightIndex++;
+    } else {
+      let i = 0;
+      for (i = RightIndex + 1; i < nRightNodesListLen; i++) {
+        if (Equal(v_LeftNodesList[LeftIndex], v_RightNodesList[i])) {
+          if (v_LeftNodesList[LeftIndex].data.length > 1) {
+            CompareText(
+              GetNodeList(
+                v_LeftNodesList,
+                PreLeftIndex + 1,
+                LeftIndex - PreLeftIndex - 1
+              ),
+              GetNodeList(
+                v_RightNodesList,
+                PreRightIndex + 1,
+                i - PreRightIndex - 1
+              ),
+              leftFather
+            );
+            PreLeftIndex = LeftIndex;
+            PreRightIndex = i;
+            LeftIndex++;
+            RightIndex = i + 1;
+          } else {
+            if (v_LeftNodesList[LeftIndex].data.length === 1 && v_LeftNodesList[LeftIndex].data.charCodeAt(0) > 127) {
+              PreLeftIndex = LeftIndex;
+              PreRightIndex = RightIndex;
+            }
+            RightIndex++;
+            LeftIndex++;
+          }
+          break;
+        }
+      }
+      if (i === nRightNodesListLen) {
+        i = 0;
+        for (i = LeftIndex + 1; i < nLeftNodesListLen; i++) {
+          if (Equal(v_RightNodesList[RightIndex], v_LeftNodesList[i])) {
+            if (v_LeftNodesList[i].data.length > 1) {
+              try {
+                CompareText(
+                  GetNodeList(
+                    v_LeftNodesList,
+                    PreLeftIndex + 1,
+                    i - PreLeftIndex - 1
+                  ),
+                  GetNodeList(
+                    v_RightNodesList,
+                    PreRightIndex + 1,
+                    RightIndex - PreRightIndex - 1
+                  ),
+                  leftFather
+                );
+              } catch (e) {
+                console.log("\u975E\u76F8\u4F3C\u8282\u70B9\u5BF9\u6BD4\u5F02\u5E38");
+                throw e;
+              }
+              PreLeftIndex = i;
+              PreRightIndex = RightIndex;
+              RightIndex++;
+              LeftIndex = i + 1;
+            } else {
+              if (v_LeftNodesList[LeftIndex].data.length === 1 && v_LeftNodesList[LeftIndex].data.charCodeAt(0) > 127) {
+                PreLeftIndex = LeftIndex;
+                PreRightIndex = RightIndex;
+              }
+              RightIndex++;
+              LeftIndex++;
+            }
+            break;
+          }
+        }
+        if (i === nLeftNodesListLen) {
+          LeftIndex++;
+          RightIndex++;
+        }
+      }
+    }
+  }
+}
+exports.CompareById2 = CompareById2;

package/lib/docHistory/scripts/useDocHistory.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+var request = require("../../utils/request.js");
+var diff = require("./diff.js");
+function getDocHistory(BASE_API, id, pub) {
+  return request(BASE_API, {
+    url: `/poplar/v2/content/${id}/history?pub=${pub}`,
+    method: "get"
+  });
+}
+function useDocHistory(BASE_API) {
+  const list = vue.ref([]);
+  const loading = vue.ref(true);
+  const current = vue.ref(0);
+  const diffContent = vue.ref();
+  const id = vue.ref();
+  const pub = vue.ref(false);
+  function initParams(mediaId, docPub) {
+    id.value = mediaId;
+    pub.value = docPub;
+  }
+  async function loadData() {
+    if (!id.value)
+      return;
+    loading.value = true;
+    try {
+      const { code, message } = await getDocHistory(BASE_API, id.value, pub.value);
+      if (code !== 0)
+        return;
+      list.value = message;
+      handleSelect(0);
+    } catch (e) {
+      console.log(e);
+    } finally {
+      loading.value = false;
+    }
+  }
+  async function handleSelect(idx) {
+    loading.value = true;
+    try {
+      current.value = idx;
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      const cur = list.value[idx];
+      const prev = list.value[idx + 1];
+      const value = JSON.parse(JSON.stringify(cur));
+      if (!prev) {
+        diffContent.value = value;
+        return;
+      }
+      const curHtml = document.createElement("div");
+      curHtml.innerHTML = cur.content;
+      const prevHtml = document.createElement("div");
+      prevHtml.innerHTML = prev.content;
+      value.content = diff.CompareById2(curHtml, prevHtml);
+      diffContent.value = value;
+    } catch (e) {
+      console.log(e, "diff \u5931\u8D25");
+    } finally {
+      loading.value = false;
+    }
+  }
+  return {
+    diffContent,
+    current,
+    loading,
+    list,
+    loadData,
+    initParams,
+    handleSelect
+  };
+}
+exports.getDocHistory = getDocHistory;
+exports.useDocHistory = useDocHistory;

package/lib/docHistory/style/css.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.css");

package/lib/docHistory/style/docDiffPanel.less

@@ -0,0 +1,9 @@
+.doc-diff-panel-wrap {
+  padding: 24px;
+
+  .doc-title {
+    color: var(--color-text-1);
+    font-weight: bold;
+    font-size: 24px;
+  }
+}

package/lib/docHistory/style/docHistoryList.less

@@ -0,0 +1,58 @@
+.doc-history-list-wrap {
+  box-sizing: border-box;
+  border-left: 1px solid var(--color-border-1);
+
+  // 单条历史记录
+  .doc-history-item {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    box-sizing: border-box;
+    width: 260px;
+    padding: 20px 16px;
+    border-bottom: 1px solid var(--color-border-1);
+    border-left: 3px solid transparent;
+    cursor: pointer;
+
+    .update-time {
+      color: var(--color-text-1);
+      font-size: 14px;
+    }
+
+    .tips {
+      color: var(--color-text-2);
+      font-size: 12px;
+    }
+
+    .doc-author {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      color: var(--color-text-1);
+      font-size: 14px;
+
+      &::before {
+        width: 5px;
+        height: 5px;
+        background-color: rgb(var(--primary-6));
+        border-radius: 50%;
+        content: ' ';
+      }
+    }
+
+    // 激活/选中状态
+    &.active {
+      background-color: rgba(var(--primary-6), 0.1);
+      border-left-color: rgb(var(--primary-6));
+
+      .update-time {
+        color: rgb(var(--primary-6));
+      }
+    }
+
+    // 悬浮
+    &:hover {
+      background-color: var(--color-fill-1);
+    }
+  }
+}

package/lib/docHistory/style/index.css

@@ -0,0 +1,74 @@
+.doc-diff-panel-wrap {
+  padding: 24px;
+}
+.doc-diff-panel-wrap .doc-title {
+  color: var(--color-text-1);
+  font-weight: bold;
+  font-size: 24px;
+}
+.doc-history-list-wrap {
+  box-sizing: border-box;
+  border-left: 1px solid var(--color-border-1);
+}
+.doc-history-list-wrap .doc-history-item {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  box-sizing: border-box;
+  width: 260px;
+  padding: 20px 16px;
+  border-bottom: 1px solid var(--color-border-1);
+  border-left: 3px solid transparent;
+  cursor: pointer;
+}
+.doc-history-list-wrap .doc-history-item .update-time {
+  color: var(--color-text-1);
+  font-size: 14px;
+}
+.doc-history-list-wrap .doc-history-item .tips {
+  color: var(--color-text-2);
+  font-size: 12px;
+}
+.doc-history-list-wrap .doc-history-item .doc-author {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--color-text-1);
+  font-size: 14px;
+}
+.doc-history-list-wrap .doc-history-item .doc-author::before {
+  width: 5px;
+  height: 5px;
+  background-color: rgb(var(--primary-6));
+  border-radius: 50%;
+  content: ' ';
+}
+.doc-history-list-wrap .doc-history-item.active {
+  background-color: rgba(var(--primary-6), 0.1);
+  border-left-color: rgb(var(--primary-6));
+}
+.doc-history-list-wrap .doc-history-item.active .update-time {
+  color: rgb(var(--primary-6));
+}
+.doc-history-list-wrap .doc-history-item:hover {
+  background-color: var(--color-fill-1);
+}
+.doc-history-wrap {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.doc-history-wrap .doc-diff-panel {
+  flex: 1;
+  height: 100%;
+}
+.doc-history-wrap .doc-diff-panel .doc-diff-panel-wrap {
+  padding: 24px;
+}
+.doc-history-wrap .doc-history-list {
+  height: 100%;
+}
+.doc-history-drawer .arco-drawer-body {
+  padding: 0;
+}

package/lib/docHistory/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.less");

package/lib/docHistory/style/index.less

@@ -0,0 +1,28 @@
+@import './docDiffPanel.less';
+@import './docHistoryList.less';
+
+.doc-history-wrap {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .doc-diff-panel {
+    flex: 1;
+    height: 100%;
+
+    .doc-diff-panel-wrap {
+      padding: 24px;
+    }
+  }
+
+  .doc-history-list {
+    height: 100%;
+  }
+}
+
+.doc-history-drawer {
+  .arco-drawer-body {
+    padding: 0;
+  }
+}

package/lib/index.css

@@ -4672,3 +4672,77 @@
   font-size: 20px;
   cursor: pointer;
 }
+.doc-diff-panel-wrap {
+  padding: 24px;
+}
+.doc-diff-panel-wrap .doc-title {
+  color: var(--color-text-1);
+  font-weight: bold;
+  font-size: 24px;
+}
+.doc-history-list-wrap {
+  box-sizing: border-box;
+  border-left: 1px solid var(--color-border-1);
+}
+.doc-history-list-wrap .doc-history-item {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  box-sizing: border-box;
+  width: 260px;
+  padding: 20px 16px;
+  border-bottom: 1px solid var(--color-border-1);
+  border-left: 3px solid transparent;
+  cursor: pointer;
+}
+.doc-history-list-wrap .doc-history-item .update-time {
+  color: var(--color-text-1);
+  font-size: 14px;
+}
+.doc-history-list-wrap .doc-history-item .tips {
+  color: var(--color-text-2);
+  font-size: 12px;
+}
+.doc-history-list-wrap .doc-history-item .doc-author {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--color-text-1);
+  font-size: 14px;
+}
+.doc-history-list-wrap .doc-history-item .doc-author::before {
+  width: 5px;
+  height: 5px;
+  background-color: rgb(var(--primary-6));
+  border-radius: 50%;
+  content: ' ';
+}
+.doc-history-list-wrap .doc-history-item.active {
+  background-color: rgba(var(--primary-6), 0.1);
+  border-left-color: rgb(var(--primary-6));
+}
+.doc-history-list-wrap .doc-history-item.active .update-time {
+  color: rgb(var(--primary-6));
+}
+.doc-history-list-wrap .doc-history-item:hover {
+  background-color: var(--color-fill-1);
+}
+.doc-history-wrap {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.doc-history-wrap .doc-diff-panel {
+  flex: 1;
+  height: 100%;
+}
+.doc-history-wrap .doc-diff-panel .doc-diff-panel-wrap {
+  padding: 24px;
+}
+.doc-history-wrap .doc-history-list {
+  height: 100%;
+}
+.doc-history-drawer .arco-drawer-body {
+  padding: 0;
+}

package/lib/index.js

@@ -27,6 +27,7 @@ var index$m = require("./mediaView/index.js");
 var index$n = require("./thumbCard/index.js");
 var index$o = require("./selectResourceModal/index.js");
 var index$p = require("./docPreview/index.js");
+var index$q = require("./docHistory/index.js");
 exports["default"] = components;
 exports.appCenter = index;
 exports.messageBox = index$1;
@@ -54,3 +55,4 @@ exports.mediaView = index$m;
 exports.thumbCard = index$n;
 exports.selectResourceModal = index$o;
 exports.docPreview = index$p;
+exports.docHistory = index$q;

package/lib/index.less

@@ -25,3 +25,4 @@
 @import './thumbCard/style/index.less';
 @import './selectResourceModal/style/index.less';
 @import './docPreview/style/index.less';
+@import './docHistory/style/index.less';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.39",
+  "version": "0.3.41",
   "description": "",
   "keywords": [
     "vue",
@@ -55,7 +55,8 @@
     "gif.js": "^0.2.0",
     "tus-js-client": "^3.1.1",
     "vue": "^3.2.0",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "diff": "^5.2.0"
   },
   "devDependencies": {
     "@arco-design/web-vue": "~2",
@@ -76,6 +77,7 @@
     "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/vue3": "^6.3.0",
+    "@types/diff": "^5.2.1",
     "@types/fs-extra": "^9.0.6",
     "@types/jest": "^29.5.5",
     "@types/node": "^20.6.2",
@@ -117,7 +119,8 @@
     "vue": "^3.2.0",
     "vue-loader": "^16.2.0",
     "vuedraggable": "^4.1.0",
-    "webpack": "^5.88.2"
+    "webpack": "^5.88.2",
+    "diff": "^5.2.0"
   },
   "arcoMeta": {
     "type": "vue-library",
@@ -130,6 +133,5 @@
     "es",
     "lib",
     "dist"
-  ],
-  "dependencies": {}
+  ]
 }