@cmstops/pro-compo 0.3.39 → 0.3.40

package/es/docHistory/component.js

@@ -0,0 +1,100 @@
+import { defineComponent, computed, onMounted, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createCommentVNode } from "vue";
+import { Drawer, Spin, Scrollbar } from "@arco-design/web-vue";
+import { DEFAULT_BASE_API } from "../config.js";
+import { useDocHistory } from "./scripts/useDocHistory.js";
+import _sfc_main$2 from "./components/DocHistoryList/index.js";
+import _sfc_main$1 from "./components/DocDiffPanel/index.js";
+const _hoisted_1 = { class: "doc-history-wrap" };
+const _hoisted_2 = { class: "doc-diff-panel" };
+const _hoisted_3 = { class: "doc-history-list" };
+const _sfc_main = defineComponent({
+  ...{ name: "docHistory" },
+  __name: "component",
+  props: {
+    BASE_API: {},
+    visible: { type: Boolean },
+    docInfo: {},
+    pub: { type: Boolean }
+  },
+  emits: ["update:visible"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const vis = computed({
+      get: () => props.visible,
+      set: (val) => {
+        emits("update:visible", val);
+      }
+    });
+    const BASE_API = props.BASE_API || DEFAULT_BASE_API;
+    const {
+      initParams,
+      loadData,
+      handleSelect,
+      loading,
+      diffContent,
+      list,
+      current
+    } = useDocHistory(BASE_API);
+    onMounted(() => {
+      if (!props.docInfo)
+        return;
+      initParams(props.docInfo.id, props.pub);
+      loadData();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Drawer), {
+        visible: vis.value,
+        "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => vis.value = $event),
+        class: "doc-history-drawer",
+        title: "\u7248\u672C\u8BB0\u5F55",
+        width: 1e3,
+        footer: false
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(unref(Spin), {
+                loading: unref(loading),
+                style: { "height": "100%", "width": "100%" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Scrollbar), {
+                    "outer-style": { height: "100%" },
+                    style: { "height": "100%", "overflow": "auto" }
+                  }, {
+                    default: withCtx(() => [
+                      unref(diffContent) ? (openBlock(), createBlock(_sfc_main$1, {
+                        key: 0,
+                        doc: unref(diffContent)
+                      }, null, 8, ["doc"])) : createCommentVNode("v-if", true)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["loading"])
+            ]),
+            createElementVNode("div", _hoisted_3, [
+              createVNode(unref(Scrollbar), {
+                "outer-style": { height: "100%" },
+                style: { "height": "100%", "overflow": "auto" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$2, {
+                    list: unref(list),
+                    current: unref(current),
+                    onSelect: unref(handleSelect)
+                  }, null, 8, ["list", "current", "onSelect"])
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/docHistory/components/DocDiffPanel/index.js

@@ -0,0 +1,22 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
+const _hoisted_1 = { class: "doc-diff-panel-wrap" };
+const _hoisted_2 = { class: "doc-title" };
+const _hoisted_3 = ["innerHTML"];
+const _sfc_main = defineComponent({
+  __name: "index",
+  props: {
+    doc: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, toDisplayString(_ctx.doc.title), 1),
+        createElementVNode("div", {
+          class: "doc-content",
+          innerHTML: _ctx.doc.content
+        }, null, 8, _hoisted_3)
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/docHistory/components/DocHistoryList/index.js

@@ -0,0 +1,37 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, unref, createCommentVNode } from "vue";
+import { timeFormat } from "../../../utils/index.js";
+const _hoisted_1 = { class: "doc-history-list-wrap" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "update-time" };
+const _hoisted_4 = {
+  key: 0,
+  class: "tips"
+};
+const _hoisted_5 = { class: "doc-author" };
+const _sfc_main = defineComponent({
+  __name: "index",
+  props: {
+    list: {},
+    current: {}
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, idx) => {
+          return openBlock(), createElementBlock("div", {
+            key: item,
+            class: normalizeClass(["doc-history-item", { active: idx === _ctx.current }]),
+            onClick: ($event) => emits("select", idx)
+          }, [
+            createElementVNode("div", _hoisted_3, toDisplayString(unref(timeFormat)(item.update_time)), 1),
+            idx === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, " \u6700\u8FD1\u66F4\u65B0")) : createCommentVNode("v-if", true),
+            createElementVNode("div", _hoisted_5, toDisplayString(item.author), 1)
+          ], 10, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/docHistory/index.d.ts

@@ -0,0 +1,2 @@
+declare const docHistory: any;
+export default docHistory;

package/es/docHistory/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./component.js";
+const docHistory = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.component(_sfc_main.name, _sfc_main);
+  }
+});
+export { docHistory as default };

package/es/docHistory/scripts/diff.d.ts

@@ -0,0 +1 @@
+export declare function CompareById2(leftNode: HTMLElement, rightNode: HTMLElement): string;

package/es/docHistory/scripts/diff.js

@@ -0,0 +1,293 @@
+import { diffChars } from "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 = 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.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++;
+        }
+      }
+    }
+  }
+}
+export { CompareById2 };

package/es/docHistory/scripts/useDocHistory.d.ts

@@ -0,0 +1,10 @@
+export declare function getDocHistory(BASE_API: string, id: number, pub: boolean): import("axios").AxiosPromise<any>;
+export declare function useDocHistory(BASE_API: string): {
+    diffContent: import("vue").Ref<any>;
+    current: import("vue").Ref<number>;
+    loading: import("vue").Ref<boolean>;
+    list: import("vue").Ref<any[]>;
+    loadData: () => Promise<void>;
+    initParams: (mediaId: number, docPub: boolean) => void;
+    handleSelect: (idx: number) => Promise<void>;
+};

package/es/docHistory/scripts/useDocHistory.js

@@ -0,0 +1,71 @@
+import { ref } from "vue";
+import request from "../../utils/request.js";
+import { CompareById2 } from "./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 = ref([]);
+  const loading = ref(true);
+  const current = ref(0);
+  const diffContent = ref();
+  const id = ref();
+  const pub = 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 = 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
+  };
+}
+export { getDocHistory, useDocHistory };

package/es/docHistory/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/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/es/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);
+    }
+  }
+}