@cmstops/pro-compo 0.3.39 → 0.3.40

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.40",
   "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": {}
+  ]
 }