@cmstops/pro-compo 0.1.31 → 0.1.33

package/lib/resourceModal/style/SystemResourceSelected.less

@@ -0,0 +1,138 @@
+.sys-resource-dialog {
+  padding: 10px 20px;
+
+  .scen-module {
+    margin-bottom: 20px;
+
+    .title {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 12px;
+      font-size: 14px;
+
+      .line {
+        width: 2px;
+        height: 14px;
+        background-color: #4886ff;
+      }
+    }
+  }
+
+  .null-file {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 300px;
+
+    .null-pic {
+      display: block;
+      width: 10%;
+      margin: 20px auto;
+    }
+
+    p {
+      color: #a2a3a7;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+}
+
+.sysfile-filter-container {
+  padding: 12px 0;
+}
+
+.sys-res-file-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  .item-load-more {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    color: #9a9a9a;
+    font-size: 12px;
+    cursor: pointer;
+
+    img {
+      width: 72px;
+    }
+  }
+
+  .item {
+    position: relative;
+    width: calc(20% - 20px);
+    overflow: hidden;
+    cursor: pointer;
+
+    .move-action {
+      opacity: 0.5;
+    }
+
+    .shadow-wrap {
+      position: relative;
+      overflow: hidden;
+      background: #fff;
+      border: 1px solid #ebeef5;
+      border-radius: 4px;
+
+      &:hover {
+        border: 1px solid #4886ff;
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
+      }
+
+      .thumb-wrap {
+        position: relative;
+        width: 100%;
+        background: url('../assets/selection/picBg.png');
+      }
+
+      h4,
+      p {
+        margin-top: 4px;
+        margin-bottom: 2px;
+        padding: 0 10px;
+        overflow: hidden;
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 14px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        word-wrap: normal;
+
+        i,
+        svg {
+          margin-right: 4px;
+          color: #e75258;
+          font-size: 16px;
+          vertical-align: middle;
+        }
+
+        svg {
+          margin-right: 4px;
+          font-size: 16px;
+          vertical-align: middle;
+        }
+
+        span {
+          vertical-align: middle;
+        }
+      }
+
+      p {
+        margin-bottom: 4px;
+        font-weight: normal;
+        font-size: 12px;
+        line-height: 1em;
+        opacity: 0.65;
+      }
+    }
+  }
+
+  &::after {
+    height: 50px;
+  }
+}

package/lib/resourceModal/style/ToolbarSearch.less

@@ -14,6 +14,19 @@
         width: auto;
         margin-right: 10px;
       }
+
+      .filter-right {
+        .arco-btn-size-medium.arco-btn-only-icon {
+          width: 48px;
+          color: #2f6ffb;
+          background-color: #e8f3ff;
+
+          &:hover {
+            background-color: #d3e6ff;
+            //background-color: red;
+          }
+        }
+      }
     }
   }
 }

package/lib/resourceModal/style/index.css

@@ -77,11 +77,11 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  border: solid 3px transparent;
+  border: solid 1px transparent;
   border-radius: 4px;
 }
 .doc-ai-media-selected .arco-scrollbar .doc-ai-media-selected-scrollbar .thumb-list .thumb-wrap .thumb-item .pic.active {
-  border: solid 3px #4886ff;
+  border: solid 1px #4886ff;
   border-radius: 4px;
 }
 .doc-ai-media-selected .arco-scrollbar .doc-ai-media-selected-scrollbar .thumb-list .thumb-wrap .thumb-item .pic img {
@@ -106,6 +106,14 @@
   width: auto;
   margin-right: 10px;
 }
+.toolbar-search-container .top-container .filter-content .filter-right .arco-btn-size-medium.arco-btn-only-icon {
+  width: 48px;
+  color: #2f6ffb;
+  background-color: #e8f3ff;
+}
+.toolbar-search-container .top-container .filter-content .filter-right .arco-btn-size-medium.arco-btn-only-icon:hover {
+  background-color: #d3e6ff;
+}
 .keywordsSelection {
   display: flex;
   justify-content: space-between;
@@ -164,7 +172,7 @@
   font-size: 0;
   background: url('../assets/selection/folder.png') no-repeat 13px center;
   background-size: 17px auto;
-  border: solid 2px transparent;
+  border: solid 1px transparent;
   border-radius: 4px;
 }
 .simple-resources .arco-scrollbar .dialog-media-selection-scroll .file-wrap .folder-list .folder-item .wrap h4 {
@@ -191,13 +199,14 @@
   padding: 14px 16px;
   line-height: 24px;
   background: #f7f8fa;
-  border: 1px solid #ebeef5;
+  border: 1px solid transparent;
   border-radius: 4px;
 }
 .simple-resources .arco-scrollbar .dialog-media-selection-scroll .file-wrap .folder-list .folder-more-button .folder-more-wrap:hover {
   color: #165dff;
   background: #f2f3f5;
-  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #4886ff;
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
   cursor: pointer;
 }
 .simple-resources .arco-scrollbar .dialog-media-selection-scroll .file-wrap .file-list {
@@ -521,6 +530,127 @@
   color: #fff;
   font-size: 18px;
 }
+.sys-resource-dialog {
+  padding: 10px 20px;
+}
+.sys-resource-dialog .scen-module {
+  margin-bottom: 20px;
+}
+.sys-resource-dialog .scen-module .title {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+.sys-resource-dialog .scen-module .title .line {
+  width: 2px;
+  height: 14px;
+  background-color: #4886ff;
+}
+.sys-resource-dialog .null-file {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 300px;
+}
+.sys-resource-dialog .null-file .null-pic {
+  display: block;
+  width: 10%;
+  margin: 20px auto;
+}
+.sys-resource-dialog .null-file p {
+  color: #a2a3a7;
+  font-size: 14px;
+  text-align: center;
+}
+.sysfile-filter-container {
+  padding: 12px 0;
+}
+.sys-res-file-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.sys-res-file-list .item-load-more {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  color: #9a9a9a;
+  font-size: 12px;
+  cursor: pointer;
+}
+.sys-res-file-list .item-load-more img {
+  width: 72px;
+}
+.sys-res-file-list .item {
+  position: relative;
+  width: calc(20% - 20px);
+  overflow: hidden;
+  cursor: pointer;
+}
+.sys-res-file-list .item .move-action {
+  opacity: 0.5;
+}
+.sys-res-file-list .item .shadow-wrap {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+.sys-res-file-list .item .shadow-wrap:hover {
+  border: 1px solid #4886ff;
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
+}
+.sys-res-file-list .item .shadow-wrap .thumb-wrap {
+  position: relative;
+  width: 100%;
+  background: url('../assets/selection/picBg.png');
+}
+.sys-res-file-list .item .shadow-wrap h4,
+.sys-res-file-list .item .shadow-wrap p {
+  margin-top: 4px;
+  margin-bottom: 2px;
+  padding: 0 10px;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-wrap: normal;
+}
+.sys-res-file-list .item .shadow-wrap h4 i,
+.sys-res-file-list .item .shadow-wrap p i,
+.sys-res-file-list .item .shadow-wrap h4 svg,
+.sys-res-file-list .item .shadow-wrap p svg {
+  margin-right: 4px;
+  color: #e75258;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.sys-res-file-list .item .shadow-wrap h4 svg,
+.sys-res-file-list .item .shadow-wrap p svg {
+  margin-right: 4px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.sys-res-file-list .item .shadow-wrap h4 span,
+.sys-res-file-list .item .shadow-wrap p span {
+  vertical-align: middle;
+}
+.sys-res-file-list .item .shadow-wrap p {
+  margin-bottom: 4px;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 1em;
+  opacity: 0.65;
+}
+.sys-res-file-list::after {
+  height: 50px;
+}
 .select-resources-modal-wrapper .arco-modal-header {
   border-bottom: none;
 }

package/lib/resourceModal/style/index.less

@@ -4,6 +4,7 @@
 @import './MainContent.less';
 @import './FileTypeThumb.less';
 @import './MediaPreviewer.less';
+@import './SystemResourceSelected.less';
 
 .select-resources-modal-wrapper {
   .arco-modal-header {

package/lib/selectThumb/component.js

@@ -51,7 +51,8 @@ const _sfc_main = vue.defineComponent({
     showTitle: { type: Boolean },
     cropper: { type: Boolean },
     aiImages: {},
-    series: {}
+    series: {},
+    mediaUseType: {}
   },
   emits: ["update:dataValue"],
   setup(__props, { emit: __emit }) {
@@ -67,6 +68,9 @@ const _sfc_main = vue.defineComponent({
     const thumbOptionIndex = vue.ref(0);
     const aspectRatioProp = vue.ref(16 / 9);
     const cropperData = vue.ref([]);
+    if (props.mediaUseType) {
+      vue.provide("mediaUseType", props.mediaUseType);
+    }
     const model = vue.computed({
       get() {
         if (!styleData.value.model)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "",
   "keywords": [
     "vue",