@cmstops/pro-compo 3.9.0-beta.1 → 3.9.1-harbin.0

package/es/videoThumb/style/index.less

@@ -1,77 +1,77 @@
-.video-thumb {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  // 播放器
-  .video-player-container {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-
-    img {
-      max-width: 800px;
-      max-height: 100%;
-    }
-  }
-
-  // 视频封面列表
-  .video-thumb-list {
-    position: relative;
-    display: flex;
-    height: 80px;
-    padding: 10px 0;
-
-    .video-thumb-list-item {
-      flex: 1;
-      cursor: pointer;
-      user-select: none;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        transition: all 0.1s ease-in-out;
-        // 不允许拖动
-        pointer-events: none;
-      }
-
-      &:hover:not(.active) {
-        img {
-          transform: scale(1.05);
-        }
-      }
-    }
-
-    .video-thumb-list-drager {
-      position: absolute;
-      top: 10px;
-      left: 0;
-      z-index: 100;
-      width: 6px;
-      height: calc(100% - 20px);
-      background-color: rgb(var(--primary-5));
-      cursor: pointer;
-      transition: transform 0.3s ease-in-out;
-
-      &:hover {
-        transform: scale(1.05);
-      }
-    }
-  }
-
-  &-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-}
+.video-thumb {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  // 播放器
+  .video-player-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    img {
+      max-width: 800px;
+      max-height: 100%;
+    }
+  }
+
+  // 视频封面列表
+  .video-thumb-list {
+    position: relative;
+    display: flex;
+    height: 80px;
+    padding: 10px 0;
+
+    .video-thumb-list-item {
+      flex: 1;
+      cursor: pointer;
+      user-select: none;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: all 0.1s ease-in-out;
+        // 不允许拖动
+        pointer-events: none;
+      }
+
+      &:hover:not(.active) {
+        img {
+          transform: scale(1.05);
+        }
+      }
+    }
+
+    .video-thumb-list-drager {
+      position: absolute;
+      top: 10px;
+      left: 0;
+      z-index: 100;
+      width: 6px;
+      height: calc(100% - 20px);
+      background-color: rgb(var(--primary-5));
+      cursor: pointer;
+      transition: transform 0.3s ease-in-out;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+  }
+
+  &-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+}

package/lib/appCenter/style/index.less

@@ -1,120 +1,120 @@
-.reference-btn {
-  padding: 12px 16px;
-  color: #5f5f5f;
-  border: none;
-  border-radius: 4px;
-}
-
-.apps-box-popover {
-  position: relative;
-  max-height: 600px;
-  padding: 10px;
-  overflow-y: scroll;
-}
-
-.app-title {
-  padding: 0 15px;
-  font-weight: bold;
-  font-size: 16px;
-}
-
-.ul-list {
-  width: 435px !important;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  text-align: center;
-  list-style: none;
-
-  .li_item {
-    position: relative;
-    float: left;
-    width: 85px;
-    height: 90px;
-    // margin-left: 16px;
-    margin: 13px 0;
-    text-align: center;
-
-    .icon-logo {
-      .svg-icon {
-        width: 4em;
-        height: 3.5em;
-      }
-    }
-
-    &:hover {
-      // transition: ease-out 0.2s;
-      // transform: scale(1.1);
-      background: rgba(0, 0, 0, 0.05);
-      border-radius: 4px;
-      cursor: pointer;
-
-      .icon-gengduo {
-        display: block;
-      }
-    }
-
-    .wrap_icon {
-      display: inline-block;
-      width: 70px;
-      margin-top: 6px;
-
-      .wrap_ {
-        .icon-logo {
-          width: 70px;
-          height: 50px;
-          margin-bottom: 4px;
-
-          img {
-            width: 50px;
-            max-width: 100%;
-            height: 50px;
-            max-height: 100%;
-            border-radius: 50%;
-          }
-        }
-
-        .shortcut-logo {
-          line-height: 77px;
-
-          img {
-            width: 35px;
-            height: 35px;
-          }
-        }
-
-        .icon_title {
-          width: 73px;
-          height: 20px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-
-      .quick-add {
-        .icon-logo {
-          width: 40px;
-          height: 40px;
-          margin: 5px auto 9px;
-          text-align: center;
-          background-color: rgba(0, 0, 0, 0.12);
-          border-radius: 50%;
-
-          i {
-            color: rgba(0, 0, 0, 0.85);
-            font-size: 14px;
-            line-height: 40px;
-          }
-        }
-      }
-    }
-
-    .icon-gengduo {
-      position: absolute;
-      top: 2px;
-      right: 4px;
-      display: none;
-    }
-  }
-}
+.reference-btn {
+  padding: 12px 16px;
+  color: #5f5f5f;
+  border: none;
+  border-radius: 4px;
+}
+
+.apps-box-popover {
+  position: relative;
+  max-height: 600px;
+  padding: 10px;
+  overflow-y: scroll;
+}
+
+.app-title {
+  padding: 0 15px;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.ul-list {
+  width: 435px !important;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  text-align: center;
+  list-style: none;
+
+  .li_item {
+    position: relative;
+    float: left;
+    width: 85px;
+    height: 90px;
+    // margin-left: 16px;
+    margin: 13px 0;
+    text-align: center;
+
+    .icon-logo {
+      .svg-icon {
+        width: 4em;
+        height: 3.5em;
+      }
+    }
+
+    &:hover {
+      // transition: ease-out 0.2s;
+      // transform: scale(1.1);
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+      cursor: pointer;
+
+      .icon-gengduo {
+        display: block;
+      }
+    }
+
+    .wrap_icon {
+      display: inline-block;
+      width: 70px;
+      margin-top: 6px;
+
+      .wrap_ {
+        .icon-logo {
+          width: 70px;
+          height: 50px;
+          margin-bottom: 4px;
+
+          img {
+            width: 50px;
+            max-width: 100%;
+            height: 50px;
+            max-height: 100%;
+            border-radius: 50%;
+          }
+        }
+
+        .shortcut-logo {
+          line-height: 77px;
+
+          img {
+            width: 35px;
+            height: 35px;
+          }
+        }
+
+        .icon_title {
+          width: 73px;
+          height: 20px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .quick-add {
+        .icon-logo {
+          width: 40px;
+          height: 40px;
+          margin: 5px auto 9px;
+          text-align: center;
+          background-color: rgba(0, 0, 0, 0.12);
+          border-radius: 50%;
+
+          i {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 14px;
+            line-height: 40px;
+          }
+        }
+      }
+    }
+
+    .icon-gengduo {
+      position: absolute;
+      top: 2px;
+      right: 4px;
+      display: none;
+    }
+  }
+}

package/lib/baseFilter/component.js

@@ -38,9 +38,11 @@ const _sfc_main = vue.defineComponent({
       });
       return _columns;
     });
-    const getOptions = (item) => {
-      return item.options ? item.options : [];
-    };
+    const getOptions = vue.computed(() => {
+      return (item) => {
+        return item.options ? item.options : [];
+      };
+    });
     const hasValue = vue.computed(() => {
       return (key) => {
         var _a, _b;
@@ -77,7 +79,10 @@ const _sfc_main = vue.defineComponent({
           _form[column.range] = rangeTemp[column.range];
         } else if (column.component === "select") {
           _form[column.key] = column.defaultValue || null;
-        } else {
+        } else if (column.component === "input-group") {
+          _form[column.selectKey] = column.selectDefaultValue || "";
+          _form[column.inputKey] = column.inputDefaultValue || "";
+        } else if (column.component) {
           _form[column.key] = column.defaultValue || "";
         }
       });
@@ -179,17 +184,48 @@ const _sfc_main = vue.defineComponent({
                 active: hasValue.value(item.key)
               }, {
                 default: vue.withCtx(() => [
-                  item.component === "input" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.InputSearch), {
-                    key: 0,
+                  item.slot ? vue.renderSlot(_ctx.$slots, item.slot, { key: 0 }) : item.component === "input-group" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.InputGroup), { key: 1 }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(webVue.Select), {
+                        modelValue: form.value[item.selectKey],
+                        "onUpdate:modelValue": ($event) => form.value[item.selectKey] = $event,
+                        "default-active-first-option": "",
+                        style: { "width": "100px" }
+                      }, {
+                        default: vue.withCtx(() => [
+                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.selectOptions, (option, idx) => {
+                            return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
+                              key: idx,
+                              value: option.value
+                            }, {
+                              default: vue.withCtx(() => [
+                                vue.createTextVNode(vue.toDisplayString(option.label), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["value"]);
+                          }), 128))
+                        ]),
+                        _: 2
+                      }, 1032, ["modelValue", "onUpdate:modelValue"]),
+                      vue.createVNode(vue.unref(webVue.Input), {
+                        modelValue: form.value[item.inputKey],
+                        "onUpdate:modelValue": ($event) => form.value[item.inputKey] = $event,
+                        placeholder: item.placeholder ? item.placeholder : `\u8BF7\u8F93\u5165${item.inputLabel}`,
+                        style: { "width": "180px" }
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+                    ]),
+                    _: 2
+                  }, 1024)) : item.component === "input" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.InputSearch), {
+                    key: 2,
                     modelValue: form.value[item.key],
                     "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
                     style: vue.normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
                     "allow-clear": "",
                     size: "medium",
-                    placeholder: `\u8BF7\u8F93\u5165${item.label}`
+                    placeholder: item.placeholder ? item.placeholder : `\u8BF7\u8F93\u5165${item.label}`
                   }, null, 8, ["modelValue", "onUpdate:modelValue", "style", "placeholder"])) : vue.createCommentVNode("v-if", true),
                   item.component === "select" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Select), {
-                    key: 1,
+                    key: 3,
                     modelValue: form.value[item.key],
                     "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
                     "popup-container": "#base-filter-popup-container",
@@ -197,13 +233,13 @@ const _sfc_main = vue.defineComponent({
                     "allow-search": item.allowSearch,
                     "default-active-first-option": false,
                     style: vue.normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
-                    placeholder: `\u8BF7\u9009\u62E9${item.label}`,
+                    placeholder: item.placeholder ? item.placeholder : `\u8BF7\u9009\u62E9${item.label}`,
                     onSearch: ($event) => handleSelectSearch($event, item),
                     onPopupVisibleChange: ($event) => handleSelectPopupChange($event, item),
                     onChange: ($event) => handleSelectChange($event, item)
                   }, {
                     default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getOptions(item), (opt) => {
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getOptions.value(item), (opt) => {
                         return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
                           key: opt.value,
                           label: opt.label,
@@ -214,7 +250,7 @@ const _sfc_main = vue.defineComponent({
                     _: 2
                   }, 1032, ["modelValue", "onUpdate:modelValue", "allow-search", "style", "placeholder", "onSearch", "onPopupVisibleChange", "onChange"])) : vue.createCommentVNode("v-if", true),
                   item.component === "range-picker" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.RangePicker), {
-                    key: 2,
+                    key: 4,
                     modelValue: form.value[item.key].range,
                     "onUpdate:modelValue": ($event) => form.value[item.key].range = $event,
                     style: vue.normalizeStyle({ width: styleWidth(form.value[item.key]) }),
@@ -225,7 +261,28 @@ const _sfc_main = vue.defineComponent({
                     "popup-container": "#base-filter-popup-container",
                     onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
                     }, ["stop"]))
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "style"])) : vue.createCommentVNode("v-if", true)
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "style"])) : vue.createCommentVNode("v-if", true),
+                  item.component === "radio" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.RadioGroup), {
+                    key: 5,
+                    modelValue: form.value[item.key],
+                    "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
+                    type: "button"
+                  }, {
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.options || [], (option, idx) => {
+                        return vue.openBlock(), vue.createBlock(vue.unref(webVue.Radio), {
+                          key: idx,
+                          value: option.value
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(vue.toDisplayString(option.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }), 128))
+                    ]),
+                    _: 2
+                  }, 1032, ["modelValue", "onUpdate:modelValue"])) : vue.createCommentVNode("v-if", true)
                 ]),
                 _: 2
               }, 1032, ["active"]);

package/lib/baseFilter/components/FilterGroup.js

@@ -116,7 +116,7 @@ const _sfc_main = vue.defineComponent({
             }, {
               default: vue.withCtx(() => [
                 vue.createElementVNode("span", _hoisted_3, [
-                  _cache[1] || (_cache[1] = vue.createTextVNode(" \u66F4\u591A\u7B5B\u9009 ")),
+                  _cache[1] || (_cache[1] = vue.createTextVNode(" \u66F4\u591A\u7B5B\u9009 ", -1)),
                   vue.createVNode(vue.unref(icon.IconCaretDown))
                 ])
               ]),

package/lib/baseFilter/style/filterGroup.less

@@ -1,53 +1,53 @@
-// FilterGroup 内部样式
-.filter-view-container {
-  display: flex;
-  // gap: 10px;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 10px;
-  font-size: 14px;
-
-  .more-btn {
-    .right-prefix {
-      display: flex;
-      gap: 10px;
-      align-items: center;
-    }
-
-    .filter-pannel {
-      z-index: 1002;
-      display: flex;
-      gap: 10px;
-      padding: 10px;
-      background-color: white;
-      border-radius: 6px;
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  .filter-content {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: space-between;
-
-    .left {
-      display: flex;
-      flex: 1;
-      gap: 10px;
-      width: 100px;
-      overflow: hidden;
-      background-color: #fff;
-    }
-
-    .right {
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      height: 100%;
-      padding-left: 20px;
-      background: white;
-    }
-  }
-}
+// FilterGroup 内部样式
+.filter-view-container {
+  display: flex;
+  // gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  .more-btn {
+    .right-prefix {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .filter-pannel {
+      z-index: 1002;
+      display: flex;
+      gap: 10px;
+      padding: 10px;
+      background-color: white;
+      border-radius: 6px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .filter-content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      flex: 1;
+      gap: 10px;
+      width: 100px;
+      overflow: hidden;
+      background-color: #fff;
+    }
+
+    .right {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      height: 100%;
+      padding-left: 20px;
+      background: white;
+    }
+  }
+}