@cmstops/pro-compo 0.3.35 → 0.3.36

package/es/docPreview/style/index.css

@@ -0,0 +1,139 @@
+.iframe-container {
+  position: relative;
+  height: 95vh;
+  max-height: 750px;
+  overflow: hidden;
+  aspect-ratio: 390 / 750;
+}
+.iframe-container::-webkit-scrollbar {
+  display: none;
+}
+.iframe-container img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.iframe-container .iframe-content {
+  position: absolute;
+  top: calc(100% / 8);
+  left: 19px;
+  z-index: 1000;
+  width: calc(100% - 38px);
+  height: calc(100% - 100% / 8 - 16px);
+  overflow: hidden;
+  border-bottom-right-radius: 40px;
+  border-bottom-left-radius: 40px;
+}
+.iframe-container .iframe-content iframe {
+  width: calc(100% + 20px);
+  height: 100%;
+  border: none;
+  outline: none;
+}
+.doc-preview-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  user-select: none;
+}
+.doc-preview-container .loading-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.doc-preview-container .doc-preview-share {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 12px;
+}
+.doc-preview-container .doc-preview-share-img {
+  width: 300px;
+  height: 300px;
+}
+.doc-preview-container .doc-preview-share-img img {
+  width: 100%;
+  height: 100%;
+}
+.doc-preview-container .doc-preview-share-img-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  margin-top: 20px;
+  margin-left: 20px;
+  color: #4886ff;
+  background-color: #edf3ff;
+  border-radius: 6px;
+}
+.doc-preview-container .doc-preview-share-tips,
+.doc-preview-container .doc-preview-share-header,
+.doc-preview-container .doc-preview-share-link,
+.doc-preview-container .doc-preview-share-action {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 20px;
+}
+.doc-preview-container .doc-preview-share-tips {
+  color: #333;
+  font-size: 14px;
+  text-align: center;
+}
+.doc-preview-container .doc-preview-share-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0 5px;
+}
+.doc-preview-container .doc-preview-share-link {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.doc-preview-container .doc-preview-share-link-value {
+  display: -webkit-box;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  overflow: hidden;
+  color: #86909c;
+  line-height: 25px;
+  word-break: break-all;
+  background: #f2f2f2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.doc-preview-container .doc-preview-share-link-hint {
+  margin-top: 10px;
+  color: #86909c;
+  font-size: 12px;
+  text-align: center;
+}
+.doc-preview-container .doc-preview-share-action {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+}
+.doc-preview-container .preview-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+}

package/es/docPreview/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/docPreview/style/index.js

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

package/es/docPreview/style/index.less

@@ -0,0 +1,129 @@
+@import './previewIframe.less';
+
+// 变量
+@qrCodeWidth: 300px;
+
+.doc-preview-container {
+  position: fixed;
+  // 遮罩层
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  user-select: none;
+
+  .loading-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .doc-preview-share {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: @qrCodeWidth;
+    overflow: hidden;
+    background-color: #fff;
+    border-radius: 12px;
+
+    &-img {
+      width: @qrCodeWidth;
+      height: @qrCodeWidth;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &-hint {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(100% - 40px);
+        height: calc(100% - 40px);
+        margin-top: 20px;
+        margin-left: 20px;
+        color: #4886ff;
+        background-color: #edf3ff;
+        border-radius: 6px;
+      }
+    }
+
+    &-tips,
+    &-header,
+    &-link,
+    &-action {
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0 20px;
+    }
+
+    // 备注
+    &-tips {
+      color: #333;
+      font-size: 14px;
+      text-align: center;
+    }
+
+    // header 控件
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 10px 0 5px;
+    }
+
+    // 链接展示
+    &-link {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      &-value {
+        display: -webkit-box;
+        box-sizing: border-box;
+        padding: 6px 10px;
+        overflow: hidden;
+        color: #86909c;
+        line-height: 25px;
+        word-break: break-all;
+        background: #f2f2f2;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      &-hint {
+        margin-top: 10px;
+        color: #86909c;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+
+    &-action {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+      margin: 20px 0;
+    }
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}

package/es/docPreview/style/previewIframe.less

@@ -0,0 +1,36 @@
+.iframe-container {
+  position: relative;
+  height: 95vh;
+  max-height: 750px;
+  overflow: hidden;
+  aspect-ratio: 390 / 750;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .iframe-content {
+    position: absolute;
+    top: calc(100% / 8);
+    left: 19px;
+    z-index: 1000;
+    width: calc(100% - 38px);
+    height: calc(100% - 100% / 8 - 16px);
+    overflow: hidden;
+    border-bottom-right-radius: 40px;
+    border-bottom-left-radius: 40px;
+
+    iframe {
+      width: calc(100% + 20px);
+      height: 100%;
+      border: none;
+      outline: none;
+    }
+  }
+}

package/es/hooks/useSelection.js

@@ -11,7 +11,7 @@ function getLabelValue(list, options) {
 function useSelection(params) {
   const { func, labelStr, valueStr } = params;
   const lVParams = { labelStr, valueStr };
-  const limit = ref(10);
+  const limit = ref(30);
   const offset = ref(0);
   const keyword = ref("");
   const options = ref([]);

package/es/index.css

@@ -4302,11 +4302,26 @@
 .thumb-select-wrapper:hover .thumb-handler-list {
   opacity: 1;
 }
+.thumb-select-wrapper:hover .thumb-select-tag {
+  opacity: 0;
+}
 .thumb-select-wrapper.thumb-no-mask {
   background-color: #f2f3f5;
   border: 1px dashed #e5e6eb !important;
 }
-.arco-dropdown-option-content {
+.thumb-select-wrapper .thumb-select-tag {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  padding: 2px 10px;
+  color: #fff;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 16px;
+  opacity: 1;
+  transition: all 0.3s ease-in-out;
+}
+.thumb-select-wrapper .arco-dropdown-option-content {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -4489,7 +4504,7 @@
   padding: 0 40px;
 }
 .resource-select-container .resource-select-header {
-  padding: 10px 24px 0;
+  padding: 10px 24px 0 24px;
 }
 .resource-select-container .resource-select-header .arco-tabs-nav::before {
   display: none;
@@ -4511,3 +4526,142 @@
   gap: 10px;
   align-items: center;
 }
+.iframe-container {
+  position: relative;
+  height: 95vh;
+  max-height: 750px;
+  overflow: hidden;
+  aspect-ratio: 390 / 750;
+}
+.iframe-container::-webkit-scrollbar {
+  display: none;
+}
+.iframe-container img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.iframe-container .iframe-content {
+  position: absolute;
+  top: calc(100% / 8);
+  left: 19px;
+  z-index: 1000;
+  width: calc(100% - 38px);
+  height: calc(100% - 100% / 8 - 16px);
+  overflow: hidden;
+  border-bottom-right-radius: 40px;
+  border-bottom-left-radius: 40px;
+}
+.iframe-container .iframe-content iframe {
+  width: calc(100% + 20px);
+  height: 100%;
+  border: none;
+  outline: none;
+}
+.doc-preview-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  user-select: none;
+}
+.doc-preview-container .loading-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.doc-preview-container .doc-preview-share {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 12px;
+}
+.doc-preview-container .doc-preview-share-img {
+  width: 300px;
+  height: 300px;
+}
+.doc-preview-container .doc-preview-share-img img {
+  width: 100%;
+  height: 100%;
+}
+.doc-preview-container .doc-preview-share-img-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  margin-top: 20px;
+  margin-left: 20px;
+  color: #4886ff;
+  background-color: #edf3ff;
+  border-radius: 6px;
+}
+.doc-preview-container .doc-preview-share-tips,
+.doc-preview-container .doc-preview-share-header,
+.doc-preview-container .doc-preview-share-link,
+.doc-preview-container .doc-preview-share-action {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 20px;
+}
+.doc-preview-container .doc-preview-share-tips {
+  color: #333;
+  font-size: 14px;
+  text-align: center;
+}
+.doc-preview-container .doc-preview-share-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0 5px;
+}
+.doc-preview-container .doc-preview-share-link {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.doc-preview-container .doc-preview-share-link-value {
+  display: -webkit-box;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  overflow: hidden;
+  color: #86909c;
+  line-height: 25px;
+  word-break: break-all;
+  background: #f2f2f2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.doc-preview-container .doc-preview-share-link-hint {
+  margin-top: 10px;
+  color: #86909c;
+  font-size: 12px;
+  text-align: center;
+}
+.doc-preview-container .doc-preview-share-action {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+}
+.doc-preview-container .preview-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+}

package/es/index.d.ts

@@ -24,3 +24,4 @@ export { default as resourceGridList } from './resourceGridList';
 export { default as mediaView } from './mediaView';
 export { default as thumbCard } from './thumbCard';
 export { default as selectResourceModal } from './selectResourceModal';
+export { default as docPreview } from './docPreview';

package/es/index.js

@@ -24,3 +24,4 @@ export { default as resourceGridList } from "./resourceGridList/index.js";
 export { default as mediaView } from "./mediaView/index.js";
 export { default as thumbCard } from "./thumbCard/index.js";
 export { default as selectResourceModal } from "./selectResourceModal/index.js";
+export { default as docPreview } from "./docPreview/index.js";

package/es/index.less

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

package/es/selectResourceModal/component.js

@@ -1,5 +1,6 @@
-import { defineComponent, ref, provide, computed, onMounted, openBlock, createBlock, unref, withCtx, createElementBlock, createCommentVNode, createElementVNode, createVNode, createTextVNode, withDirectives, vShow } from "vue";
+import { defineComponent, ref, provide, computed, openBlock, createBlock, unref, withCtx, createElementBlock, createCommentVNode, createElementVNode, createVNode, withDirectives, vShow, createTextVNode } from "vue";
 import { Drawer, Tabs, Button, TabPane, Scrollbar, Pagination } from "@arco-design/web-vue";
+import { IconClose } from "@arco-design/web-vue/es/icon";
 import emptyData from "../emptyData/index.js";
 import _sfc_main$1 from "./components/ListFilter/index.js";
 import _sfc_main$2 from "./components/ListContent/index.js";
@@ -49,8 +50,7 @@ const _sfc_main = defineComponent({
       changeKey,
       changeFilter,
       changePage,
-      changeSize,
-      loadData
+      changeSize
     } = useAttachement({ key: "all", BASE_API });
     const selected = ref([]);
     const selectedKeys = computed(() => selected.value.map((item) => item.id));
@@ -84,9 +84,6 @@ const _sfc_main = defineComponent({
       changeKey("local");
       activeKey.value = "local";
     }
-    onMounted(() => {
-      loadData();
-    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Drawer), {
         visible: _ctx.visible,
@@ -106,11 +103,12 @@ const _sfc_main = defineComponent({
               }, {
                 extra: withCtx(() => [
                   createVNode(unref(Button), {
-                    type: "text",
+                    type: "secondary",
+                    shape: "round",
                     onClick: handleClose
                   }, {
-                    default: withCtx(() => [
-                      createTextVNode("\u5173\u95ED")
+                    icon: withCtx(() => [
+                      createVNode(unref(IconClose))
                     ]),
                     _: 1
                   })

package/es/selectResourceModal/components/ListContent/index.js

@@ -47,8 +47,11 @@ const _sfc_main = defineComponent({
                 meta: item,
                 "use-mask": true,
                 "handlers-key": handlersKey.value,
+                options: {
+                  fit: item.catalog === "image" ? "contain" : "cover"
+                },
                 onHandle: handleOption
-              }, null, 8, ["url", "thumb", "catalog", "meta", "handlers-key"])
+              }, null, 8, ["url", "thumb", "catalog", "meta", "handlers-key", "options"])
             ]),
             _: 2
           }, 1032, ["item", "select-keys", "disable", "onSelect"]);

package/es/selectResourceModal/components/ListContentLocal/components/Upload.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createTextVNode } from "vue";
+import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createTextVNode, createCommentVNode } from "vue";
 import { Upload, Button } from "@arco-design/web-vue";
 import { IconComputer } from "@arco-iconbox/vue-cmstop-icons";
 const _hoisted_1 = { class: "upload-wrapper" };
@@ -37,18 +37,7 @@ const _sfc_main = defineComponent({
             ]),
             _: 1
           }),
-          createVNode(unref(Button), { type: "primary" }, {
-            default: withCtx(() => [
-              createTextVNode(" \u626B\u7801\u4E0A\u4F20 ")
-            ]),
-            _: 1
-          }),
-          createVNode(unref(Button), { type: "primary" }, {
-            default: withCtx(() => [
-              createTextVNode(" \u5206\u4EAB\u4E0A\u4F20 ")
-            ]),
-            _: 1
-          })
+          createCommentVNode(' <a-button type="primary"> \u626B\u7801\u4E0A\u4F20 </a-button>\n      <a-button type="primary"> \u5206\u4EAB\u4E0A\u4F20 </a-button> ')
         ]),
         createElementVNode("div", _hoisted_3, [
           createVNode(unref(Upload), {

package/es/selectResourceModal/components/ListContentLocal/index.js

@@ -70,10 +70,13 @@ const _sfc_main = defineComponent({
                     thumb: item.url,
                     catalog: item.catalog,
                     meta: item,
+                    options: {
+                      fit: item.catalog === "image" ? "contain" : "cover"
+                    },
                     "use-mask": true,
                     "handlers-key": handlersKey.value,
                     onHandle: handleOption
-                  }, null, 8, ["url", "thumb", "catalog", "meta", "handlers-key"])
+                  }, null, 8, ["url", "thumb", "catalog", "meta", "options", "handlers-key"])
                 ]),
                 _: 2
               }, 1032, ["item", "select-keys", "disable", "onSelect"]);

package/es/selectResourceModal/components/ListFilter/index.js

@@ -94,7 +94,7 @@ const _sfc_main = defineComponent({
     });
     const isEmpty = computed(() => {
       return Object.keys(filter.value).every((key) => {
-        return !filter.value[key];
+        return filter.value[key] === originFilter[key];
       });
     });
     watch(
@@ -109,13 +109,14 @@ const _sfc_main = defineComponent({
         });
         emits("change", result);
       },
-      { deep: true }
+      { deep: true, immediate: true }
     );
     onMounted(() => {
       var _a;
       load();
       if ((_a = props.filterOptions) == null ? void 0 : _a.mediaType) {
         filter.value.catalog = props.filterOptions.mediaType;
+        originFilter.catalog = props.filterOptions.mediaType;
       }
     });
     return (_ctx, _cache) => {

package/es/selectResourceModal/style/index.css

@@ -175,7 +175,7 @@
   padding: 0 40px;
 }
 .resource-select-container .resource-select-header {
-  padding: 10px 24px 0;
+  padding: 10px 24px 0 24px;
 }
 .resource-select-container .resource-select-header .arco-tabs-nav::before {
   display: none;

package/es/selectResourceModal/style/index.less

@@ -31,7 +31,7 @@
   }
 
   .resource-select-header {
-    padding: 10px 24px 0;
+    padding: 10px 24px 0 24px;
 
     .arco-tabs-nav::before {
       display: none;