@cmstops/pro-compo 0.1.73 → 0.1.75

package/es/baseFilter/component.js

@@ -1,16 +1,7 @@
-import { defineComponent, ref, computed, watch, toRaw, openBlock, createElementBlock, createElementVNode, createBlock, withCtx, createVNode, unref, normalizeStyle, createCommentVNode, Fragment, renderList, withModifiers, renderSlot } from "vue";
+import { defineComponent, ref, computed, watch, toRaw, openBlock, createElementBlock, Fragment, createVNode, withCtx, renderList, createBlock, unref, normalizeStyle, createCommentVNode, withModifiers, renderSlot } from "vue";
 import { InputSearch, Select, Option, RangePicker } from "@arco-design/web-vue";
-import { typeOptions } from "../utils/doc.js";
-import { mpTypeOptions } from "../utils/typeMap.js";
-import _sfc_main$1 from "./components/filterItem.js";
-import { DEFAULT_BASE_API } from "../config.js";
-const _hoisted_1 = { class: "base-filter-container" };
-const _hoisted_2 = { class: "left" };
-const _hoisted_3 = {
-  key: 0,
-  class: "form-ul"
-};
-const _hoisted_4 = { class: "right" };
+import _sfc_main$2 from "./components/filterItem.js";
+import _sfc_main$1 from "./components/FilterGroup.js";
 const _sfc_main = defineComponent({
   ...{ name: "baseFilter" },
   __name: "component",
@@ -23,18 +14,30 @@ const _sfc_main = defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    props.BASE_API || DEFAULT_BASE_API;
     const render = ref(false);
     const form = ref({});
     const columnsKeys = computed(() => props.columns.map((column) => column.key));
     const columnsMap = computed(() => {
-      return props.columns.reduce((map, column) => {
-        map[column.key] = column;
-        return map;
+      const map = props.columns.reduce((map2, column) => {
+        map2[column.key] = column;
+        return map2;
       }, {});
+      return map;
     });
-    const formKeys = computed(() => Object.keys(form.value));
-    const hasKey = (key) => formKeys.value.includes(key);
+    const renderColumns = computed(() => {
+      let rangeKeys = props.columns.filter((column) => column.range).map((column) => column.range);
+      rangeKeys = [...new Set(rangeKeys)];
+      const _columns = props.columns.filter((column) => !column.range);
+      rangeKeys.forEach((key) => {
+        const rangeItem = props.columns.filter((column) => column.range === key);
+        rangeItem[0].key = key;
+        _columns.push(rangeItem[0]);
+      });
+      return _columns;
+    });
+    const getOptions = (item) => {
+      return item.options ? item.options : [];
+    };
     const hasValue = computed(() => {
       return (key) => {
         var _a, _b;
@@ -106,10 +109,9 @@ const _sfc_main = defineComponent({
       }
       return _parmas;
     };
-    const _mpTypeOptions = mpTypeOptions();
     watch(
       () => columnsKeys.value,
-      (keys) => {
+      () => {
         renderForm();
       },
       { immediate: true }
@@ -121,110 +123,35 @@ const _sfc_main = defineComponent({
       },
       { deep: true }
     );
-    const seriesOptions = typeOptions();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          render.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            hasKey("word") ? (openBlock(), createBlock(_sfc_main$1, {
-              key: 0,
-              active: hasValue.value("word")
-            }, {
-              default: withCtx(() => {
-                var _a;
-                return [
-                  createVNode(unref(InputSearch), {
-                    modelValue: form.value.word,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => form.value.word = $event),
-                    style: normalizeStyle({ width: styleWidth(columnsMap.value.word) }),
-                    "allow-clear": "",
-                    size: "medium",
-                    placeholder: `\u8BF7\u8F93\u5165${(_a = columnsMap.value.word) == null ? void 0 : _a.label}`
-                  }, null, 8, ["modelValue", "style", "placeholder"])
-                ];
-              }),
-              _: 1
-            }, 8, ["active"])) : createCommentVNode("v-if", true),
-            hasKey("series") ? (openBlock(), createBlock(_sfc_main$1, {
-              key: 1,
-              active: hasValue.value("series")
-            }, {
-              default: withCtx(() => {
-                var _a;
-                return [
-                  createVNode(unref(Select), {
-                    modelValue: form.value.series,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => form.value.series = $event),
-                    "allow-clear": "",
-                    style: normalizeStyle({ width: styleWidth(columnsMap.value.series) }),
-                    placeholder: `\u8BF7\u9009\u62E9${(_a = columnsMap.value.series) == null ? void 0 : _a.label}`
-                  }, {
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(seriesOptions), (opt) => {
-                        return openBlock(), createBlock(unref(Option), {
-                          key: opt.value,
-                          label: opt.label,
-                          value: opt.value
-                        }, null, 8, ["label", "value"]);
-                      }), 128))
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue", "style", "placeholder"])
-                ];
-              }),
-              _: 1
-            }, 8, ["active"])) : createCommentVNode("v-if", true),
-            hasKey("pub_time") ? (openBlock(), createBlock(_sfc_main$1, {
-              key: 2,
-              active: hasValue.value("pub_time")
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(RangePicker), {
-                  modelValue: form.value.pub_time.range,
-                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => form.value.pub_time.range = $event),
-                  style: normalizeStyle({ width: styleWidth(form.value.pub_time) }),
-                  "value-format": "timestamp",
-                  onClick: _cache[3] || (_cache[3] = withModifiers(() => {
-                  }, ["stop"]))
-                }, null, 8, ["modelValue", "style"])
-              ]),
-              _: 1
-            }, 8, ["active"])) : createCommentVNode("v-if", true),
-            hasKey("mp_name") ? (openBlock(), createBlock(_sfc_main$1, {
-              key: 3,
-              active: hasValue.value("mp_name")
-            }, {
-              default: withCtx(() => {
-                var _a;
-                return [
-                  createVNode(unref(InputSearch), {
-                    modelValue: form.value.mp_name,
-                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => form.value.mp_name = $event),
-                    style: normalizeStyle({ width: styleWidth(columnsMap.value.mp_name) }),
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$1, null, {
+          left: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(renderColumns.value, (item, index) => {
+              return openBlock(), createBlock(_sfc_main$2, {
+                key: index,
+                active: hasValue.value(item.key)
+              }, {
+                default: withCtx(() => [
+                  item.component === "input" ? (openBlock(), createBlock(unref(InputSearch), {
+                    key: 0,
+                    modelValue: form.value[item.key],
+                    "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
+                    style: normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
                     "allow-clear": "",
                     size: "medium",
-                    placeholder: `\u8BF7\u8F93\u5165${(_a = columnsMap.value.mp_name) == null ? void 0 : _a.label}`
-                  }, null, 8, ["modelValue", "style", "placeholder"])
-                ];
-              }),
-              _: 1
-            }, 8, ["active"])) : createCommentVNode("v-if", true),
-            hasKey("mp_type") ? (openBlock(), createBlock(_sfc_main$1, {
-              key: 4,
-              active: hasValue.value("mp_type")
-            }, {
-              default: withCtx(() => {
-                var _a;
-                return [
-                  createVNode(unref(Select), {
-                    modelValue: form.value.mp_type,
-                    "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => form.value.mp_type = $event),
-                    style: normalizeStyle([{ width: styleWidth(columnsMap.value.mp_type) }, { "width": "150px" }]),
+                    placeholder: `\u8BF7\u8F93\u5165${item.label}`
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "style", "placeholder"])) : createCommentVNode("v-if", true),
+                  item.component === "select" ? (openBlock(), createBlock(unref(Select), {
+                    key: 1,
+                    modelValue: form.value[item.key],
+                    "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
                     "allow-clear": "",
-                    placeholder: `\u8BF7\u9009\u62E9${(_a = columnsMap.value.mp_type) == null ? void 0 : _a.label}`
+                    style: normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
+                    placeholder: `\u8BF7\u9009\u62E9${item.label}`
                   }, {
                     default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(_mpTypeOptions), (opt) => {
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(getOptions(item), (opt) => {
                         return openBlock(), createBlock(unref(Option), {
                           key: opt.value,
                           label: opt.label,
@@ -232,18 +159,29 @@ const _sfc_main = defineComponent({
                         }, null, 8, ["label", "value"]);
                       }), 128))
                     ]),
-                    _: 1
-                  }, 8, ["modelValue", "style", "placeholder"])
-                ];
-              }),
-              _: 1
-            }, 8, ["active"])) : createCommentVNode("v-if", true)
-          ])) : createCommentVNode("v-if", true)
-        ]),
-        createElementVNode("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "right")
-        ])
-      ]);
+                    _: 2
+                  }, 1032, ["modelValue", "onUpdate:modelValue", "style", "placeholder"])) : createCommentVNode("v-if", true),
+                  item.component === "range-picker" ? (openBlock(), createBlock(unref(RangePicker), {
+                    key: 2,
+                    modelValue: form.value[item.key].range,
+                    "onUpdate:modelValue": ($event) => form.value[item.key].range = $event,
+                    style: normalizeStyle({ width: styleWidth(form.value[item.key]) }),
+                    "value-format": "timestamp",
+                    onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                    }, ["stop"]))
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "style"])) : createCommentVNode("v-if", true)
+                ]),
+                _: 2
+              }, 1032, ["active"]);
+            }), 128))
+          ]),
+          right: withCtx(() => [
+            renderSlot(_ctx.$slots, "right")
+          ]),
+          _: 3
+        }),
+        createCommentVNode(' <div class="base-filter-container">\n    <div class="left">\n      <div v-if="render" class="form-ul">\n        <template v-for="(item, index) in renderColumns" :key="index">\n          <filter-item :active="hasValue(item.key)">\n            <a-input-search\n              v-if="item.component === \'input\'"\n              v-model="form[item.key]"\n              :style="{ width: styleWidth(columnsMap[item.key]) }"\n              allow-clear\n              size="medium"\n              :placeholder="`\u8BF7\u8F93\u5165${item.label}`"\n            />\n            <a-select\n              v-if="item.component === \'select\'"\n              v-model="form[item.key]"\n              allow-clear\n              :style="{ width: styleWidth(columnsMap[item.key]) }"\n              :placeholder="`\u8BF7\u9009\u62E9${item.label}`"\n            >\n              <template v-for="opt in getOptions(item)" :key="opt.value">\n                <a-option :label="opt.label" :value="opt.value"></a-option\n              ></template>\n            </a-select>\n            <a-range-picker\n              v-if="item.component === \'range-picker\'"\n              v-model="form[item.key].range"\n              :style="{ width: styleWidth(form[item.key]) }"\n              value-format="timestamp"\n              @click.stop\n            />\n          </filter-item>\n        </template>\n      </div>\n    </div>\n    <div class="right">\n      <slot name="right"></slot>\n    </div>\n  </div> ')
+      ], 2112);
     };
   }
 });

package/es/baseFilter/components/FilterGroup.js

@@ -0,0 +1,179 @@
+import { defineComponent, ref, watch, onMounted, openBlock, createElementBlock, createElementVNode, withDirectives, createVNode, unref, withModifiers, withCtx, createTextVNode, vShow, renderSlot } from "vue";
+import { Button } from "@arco-design/web-vue";
+import { IconCaretDown } from "@arco-design/web-vue/es/icon";
+import { createPopper } from "@popperjs/core";
+const _hoisted_1 = { class: "filter-view-container" };
+const _hoisted_2 = { class: "more-btn" };
+const _hoisted_3 = { class: "right-prefix" };
+const _hoisted_4 = { class: "filter-content" };
+const _hoisted_5 = { class: "right" };
+const _hoisted_6 = {
+  ref: "tempNode",
+  style: { "display": "none" }
+};
+const _sfc_main = defineComponent({
+  __name: "FilterGroup",
+  setup(__props) {
+    const documentWidth = ref(0);
+    const overflowWidth = ref(0);
+    watch(
+      () => documentWidth.value,
+      (n) => checkOverflow()
+    );
+    watch(
+      () => overflowWidth.value,
+      (n) => setPannelItem()
+    );
+    const initDocWidthListener = function() {
+      window.onresize = (() => {
+        return () => {
+          documentWidth.value = document.body.clientWidth;
+        };
+      })();
+    };
+    const filterItemsRef = ref();
+    const moreBtnRef = ref();
+    const dpPannelRef = ref();
+    const initPopper = function() {
+      createPopper(moreBtnRef.value, dpPannelRef.value, {
+        placement: "bottom-start"
+      });
+    };
+    const popperShowFlag = ref(false);
+    function showPopper() {
+      popperShowFlag.value = true;
+      window.onclick = hidePopper;
+    }
+    function hidePopper() {
+      popperShowFlag.value = false;
+    }
+    const itemNodeArr = ref([]);
+    const itemWidthArr = ref([]);
+    const itemArr = ref([]);
+    function checkOverflow() {
+      if (!filterItemsRef.value)
+        return;
+      const parent = filterItemsRef.value.parentNode;
+      if (!itemNodeArr.value.length) {
+        itemNodeArr.value = mapNodes(filterItemsRef.value.childNodes);
+        itemWidthArr.value = itemNodeArr.value.map((node) => node.clientWidth + 10);
+        itemArr.value = itemWidthArr.value.map((_, idx) => idx);
+      }
+      const parentWidth = parent.clientWidth;
+      const leftWidth = getArrWidth(itemWidthArr.value);
+      const rightWidth = parent.childNodes[parent.childNodes.length - 1].clientWidth;
+      overflowWidth.value = leftWidth + rightWidth - parentWidth;
+    }
+    function mapNodes(nodes) {
+      const nodeArr = [];
+      for (let i = 0; i < nodes.length; i++) {
+        const element = nodes[i];
+        nodeArr.push(element);
+      }
+      return nodeArr.filter((item) => item.clientWidth);
+    }
+    function getArrWidth(arr) {
+      return arr.reduce((prev, cur) => prev + cur, 0);
+    }
+    const pannelArray = ref("");
+    watch(
+      () => pannelArray.value,
+      (n, o) => refreshPannel(n, o)
+    );
+    function refreshPannel(newStr, oldStr) {
+      const nArr = newStr ? newStr.split(",") : [];
+      const oArr = oldStr ? oldStr.split(",") : [];
+      if (nArr.length && nArr.length > oArr.length) {
+        diff(nArr, oArr).forEach((index) => inNode(parseInt(index, 10)));
+      } else if (nArr.length >= 0 && nArr.length < oArr.length) {
+        diff(oArr, nArr).forEach((index) => outNode(parseInt(index, 10)));
+      }
+    }
+    const diff = (arr1, arr2) => {
+      const diff2 = [];
+      for (let i = 0; i < arr1.length; i++) {
+        const item = arr1[i];
+        if (!arr2.includes(item))
+          diff2.push(item);
+      }
+      return diff2;
+    };
+    function inNode(index) {
+      var _a, _b, _c;
+      const node = mapNodes((_a = filterItemsRef.value) == null ? void 0 : _a.childNodes)[index];
+      const temp = document.createElement("div");
+      temp.style.width = `${itemWidthArr.value[index]}px`;
+      temp.style.position = "absolute";
+      temp.style.left = `${50}px`;
+      (_b = filterItemsRef.value) == null ? void 0 : _b.replaceChild(temp, node);
+      (_c = dpPannelRef.value) == null ? void 0 : _c.appendChild(node);
+    }
+    function outNode(index) {
+      var _a;
+      const node = itemNodeArr.value[index];
+      (_a = filterItemsRef.value) == null ? void 0 : _a.replaceChild(
+        node,
+        mapNodes(filterItemsRef.value.childNodes)[index]
+      );
+    }
+    function setPannelItem() {
+      let inPannelNum = 0;
+      if (overflowWidth.value > 0) {
+        const avgWidth = 120;
+        inPannelNum = Math.ceil((overflowWidth.value + 200) / avgWidth);
+      }
+      pannelArray.value = itemArr.value.slice(0, inPannelNum).join(",");
+    }
+    onMounted(() => {
+      initDocWidthListener();
+      initPopper();
+      setTimeout(() => checkOverflow());
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", {
+            ref_key: "moreBtnRef",
+            ref: moreBtnRef
+          }, [
+            withDirectives(createVNode(unref(Button), {
+              onClick: withModifiers(showPopper, ["stop"])
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", _hoisted_3, [
+                  createTextVNode(" \u66F4\u591A\u7B5B\u9009 "),
+                  createVNode(unref(IconCaretDown))
+                ])
+              ]),
+              _: 1
+            }, 512), [
+              [vShow, pannelArray.value]
+            ])
+          ], 512),
+          withDirectives(createElementVNode("div", {
+            id: "dpPannelRef",
+            ref_key: "dpPannelRef",
+            ref: dpPannelRef,
+            class: "filter-pannel"
+          }, null, 512), [
+            [vShow, popperShowFlag.value]
+          ])
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          createElementVNode("div", {
+            ref_key: "filterItemsRef",
+            ref: filterItemsRef,
+            class: "left"
+          }, [
+            renderSlot(_ctx.$slots, "left")
+          ], 512),
+          createElementVNode("div", _hoisted_5, [
+            renderSlot(_ctx.$slots, "right")
+          ])
+        ]),
+        createElementVNode("div", _hoisted_6, null, 512)
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/baseFilter/components/filterItem.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot } from "vue";
 const _sfc_main = defineComponent({
   ...{ name: "filter-item-view" },
   __name: "filterItem",
@@ -8,7 +8,9 @@ const _sfc_main = defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["filter-item-view", { value: _ctx.active }])
+        class: normalizeClass(["filter-item-view", { value: _ctx.active }]),
+        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["stop"]))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);

package/es/baseFilter/style/css.js

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

package/es/baseFilter/style/filterGroup.less

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

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

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

package/es/baseFilter/style/index.js

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

package/es/baseFilter/useCalcWidth.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+export default function useCalcWidth(filterItemsRef: Ref<HTMLElement | undefined>, dpPannelRef: Ref<HTMLElement | undefined>, moreBtnRef: Ref<HTMLElement | undefined>): {
+    pannelArray: Ref<string>;
+    popperShowFlag: Ref<boolean>;
+    showPopper: () => void;
+    initDocWidthListener: () => void;
+    initPopper: () => void;
+    checkOverflow: () => void;
+};

package/es/utils/typeMap.js

@@ -83,15 +83,6 @@ const mp_type_map = {
   1: "\u4E2A\u4EBA\u53F7",
   2: "\u7EC4\u7EC7\u53F7"
 };
-const mpTypeOptions = () => {
-  const arr = Object.keys(mp_type_map).map((key) => {
-    return {
-      value: key,
-      label: mp_type_map[key]
-    };
-  });
-  return arr;
-};
 const kongo_source_map = {
   app: "\u5E94\u7528",
   url: "\u94FE\u63A5",
@@ -161,4 +152,4 @@ const matrixPublishFormalStateMap = {
   12: "\u672A\u77E5",
   13: "\u79C1\u5BC6"
 };
-export { approveFlowStatusMap, calcApprovingDependent, calcApprovingUser, compoColumnsMap, componentsColumns, contentList_layout_map, contentList_list_type_map, contentList_relation_type_map, ilive_type_map, key_target_type_map, kongo_source_map, local_live_doc_status, local_live_doc_type, matrixPublishFormalStateMap, matrixPublishStateMap, mpTypeOptions, mp_type_map };
+export { approveFlowStatusMap, calcApprovingDependent, calcApprovingUser, compoColumnsMap, componentsColumns, contentList_layout_map, contentList_list_type_map, contentList_relation_type_map, ilive_type_map, key_target_type_map, kongo_source_map, local_live_doc_status, local_live_doc_type, matrixPublishFormalStateMap, matrixPublishStateMap, mp_type_map };

package/lib/baseFilter/component.js

@@ -1,17 +1,8 @@
 "use strict";
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
-var doc = require("../utils/doc.js");
-var typeMap = require("../utils/typeMap.js");
 var filterItem = require("./components/filterItem.js");
-var config = require("../config.js");
-const _hoisted_1 = { class: "base-filter-container" };
-const _hoisted_2 = { class: "left" };
-const _hoisted_3 = {
-  key: 0,
-  class: "form-ul"
-};
-const _hoisted_4 = { class: "right" };
+var FilterGroup = require("./components/FilterGroup.js");
 const _sfc_main = vue.defineComponent({
   ...{ name: "baseFilter" },
   __name: "component",
@@ -24,18 +15,30 @@ const _sfc_main = vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    props.BASE_API || config.DEFAULT_BASE_API;
     const render = vue.ref(false);
     const form = vue.ref({});
     const columnsKeys = vue.computed(() => props.columns.map((column) => column.key));
     const columnsMap = vue.computed(() => {
-      return props.columns.reduce((map, column) => {
-        map[column.key] = column;
-        return map;
+      const map = props.columns.reduce((map2, column) => {
+        map2[column.key] = column;
+        return map2;
       }, {});
+      return map;
     });
-    const formKeys = vue.computed(() => Object.keys(form.value));
-    const hasKey = (key) => formKeys.value.includes(key);
+    const renderColumns = vue.computed(() => {
+      let rangeKeys = props.columns.filter((column) => column.range).map((column) => column.range);
+      rangeKeys = [...new Set(rangeKeys)];
+      const _columns = props.columns.filter((column) => !column.range);
+      rangeKeys.forEach((key) => {
+        const rangeItem = props.columns.filter((column) => column.range === key);
+        rangeItem[0].key = key;
+        _columns.push(rangeItem[0]);
+      });
+      return _columns;
+    });
+    const getOptions = (item) => {
+      return item.options ? item.options : [];
+    };
     const hasValue = vue.computed(() => {
       return (key) => {
         var _a, _b;
@@ -107,10 +110,9 @@ const _sfc_main = vue.defineComponent({
       }
       return _parmas;
     };
-    const _mpTypeOptions = typeMap.mpTypeOptions();
     vue.watch(
       () => columnsKeys.value,
-      (keys) => {
+      () => {
         renderForm();
       },
       { immediate: true }
@@ -122,110 +124,35 @@ const _sfc_main = vue.defineComponent({
       },
       { deep: true }
     );
-    const seriesOptions = doc.typeOptions();
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("div", _hoisted_2, [
-          render.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-            hasKey("word") ? (vue.openBlock(), vue.createBlock(filterItem, {
-              key: 0,
-              active: hasValue.value("word")
-            }, {
-              default: vue.withCtx(() => {
-                var _a;
-                return [
-                  vue.createVNode(vue.unref(webVue.InputSearch), {
-                    modelValue: form.value.word,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => form.value.word = $event),
-                    style: vue.normalizeStyle({ width: styleWidth(columnsMap.value.word) }),
-                    "allow-clear": "",
-                    size: "medium",
-                    placeholder: `\u8BF7\u8F93\u5165${(_a = columnsMap.value.word) == null ? void 0 : _a.label}`
-                  }, null, 8, ["modelValue", "style", "placeholder"])
-                ];
-              }),
-              _: 1
-            }, 8, ["active"])) : vue.createCommentVNode("v-if", true),
-            hasKey("series") ? (vue.openBlock(), vue.createBlock(filterItem, {
-              key: 1,
-              active: hasValue.value("series")
-            }, {
-              default: vue.withCtx(() => {
-                var _a;
-                return [
-                  vue.createVNode(vue.unref(webVue.Select), {
-                    modelValue: form.value.series,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => form.value.series = $event),
-                    "allow-clear": "",
-                    style: vue.normalizeStyle({ width: styleWidth(columnsMap.value.series) }),
-                    placeholder: `\u8BF7\u9009\u62E9${(_a = columnsMap.value.series) == null ? void 0 : _a.label}`
-                  }, {
-                    default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(seriesOptions), (opt) => {
-                        return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
-                          key: opt.value,
-                          label: opt.label,
-                          value: opt.value
-                        }, null, 8, ["label", "value"]);
-                      }), 128))
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue", "style", "placeholder"])
-                ];
-              }),
-              _: 1
-            }, 8, ["active"])) : vue.createCommentVNode("v-if", true),
-            hasKey("pub_time") ? (vue.openBlock(), vue.createBlock(filterItem, {
-              key: 2,
-              active: hasValue.value("pub_time")
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(webVue.RangePicker), {
-                  modelValue: form.value.pub_time.range,
-                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => form.value.pub_time.range = $event),
-                  style: vue.normalizeStyle({ width: styleWidth(form.value.pub_time) }),
-                  "value-format": "timestamp",
-                  onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
-                  }, ["stop"]))
-                }, null, 8, ["modelValue", "style"])
-              ]),
-              _: 1
-            }, 8, ["active"])) : vue.createCommentVNode("v-if", true),
-            hasKey("mp_name") ? (vue.openBlock(), vue.createBlock(filterItem, {
-              key: 3,
-              active: hasValue.value("mp_name")
-            }, {
-              default: vue.withCtx(() => {
-                var _a;
-                return [
-                  vue.createVNode(vue.unref(webVue.InputSearch), {
-                    modelValue: form.value.mp_name,
-                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => form.value.mp_name = $event),
-                    style: vue.normalizeStyle({ width: styleWidth(columnsMap.value.mp_name) }),
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createVNode(FilterGroup, null, {
+          left: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(renderColumns.value, (item, index) => {
+              return vue.openBlock(), vue.createBlock(filterItem, {
+                key: index,
+                active: hasValue.value(item.key)
+              }, {
+                default: vue.withCtx(() => [
+                  item.component === "input" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.InputSearch), {
+                    key: 0,
+                    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${(_a = columnsMap.value.mp_name) == null ? void 0 : _a.label}`
-                  }, null, 8, ["modelValue", "style", "placeholder"])
-                ];
-              }),
-              _: 1
-            }, 8, ["active"])) : vue.createCommentVNode("v-if", true),
-            hasKey("mp_type") ? (vue.openBlock(), vue.createBlock(filterItem, {
-              key: 4,
-              active: hasValue.value("mp_type")
-            }, {
-              default: vue.withCtx(() => {
-                var _a;
-                return [
-                  vue.createVNode(vue.unref(webVue.Select), {
-                    modelValue: form.value.mp_type,
-                    "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => form.value.mp_type = $event),
-                    style: vue.normalizeStyle([{ width: styleWidth(columnsMap.value.mp_type) }, { "width": "150px" }]),
+                    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,
+                    modelValue: form.value[item.key],
+                    "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
                     "allow-clear": "",
-                    placeholder: `\u8BF7\u9009\u62E9${(_a = columnsMap.value.mp_type) == null ? void 0 : _a.label}`
+                    style: vue.normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
+                    placeholder: `\u8BF7\u9009\u62E9${item.label}`
                   }, {
                     default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(_mpTypeOptions), (opt) => {
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getOptions(item), (opt) => {
                         return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
                           key: opt.value,
                           label: opt.label,
@@ -233,18 +160,29 @@ const _sfc_main = vue.defineComponent({
                         }, null, 8, ["label", "value"]);
                       }), 128))
                     ]),
-                    _: 1
-                  }, 8, ["modelValue", "style", "placeholder"])
-                ];
-              }),
-              _: 1
-            }, 8, ["active"])) : vue.createCommentVNode("v-if", true)
-          ])) : vue.createCommentVNode("v-if", true)
-        ]),
-        vue.createElementVNode("div", _hoisted_4, [
-          vue.renderSlot(_ctx.$slots, "right")
-        ])
-      ]);
+                    _: 2
+                  }, 1032, ["modelValue", "onUpdate:modelValue", "style", "placeholder"])) : vue.createCommentVNode("v-if", true),
+                  item.component === "range-picker" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.RangePicker), {
+                    key: 2,
+                    modelValue: form.value[item.key].range,
+                    "onUpdate:modelValue": ($event) => form.value[item.key].range = $event,
+                    style: vue.normalizeStyle({ width: styleWidth(form.value[item.key]) }),
+                    "value-format": "timestamp",
+                    onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                    }, ["stop"]))
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "style"])) : vue.createCommentVNode("v-if", true)
+                ]),
+                _: 2
+              }, 1032, ["active"]);
+            }), 128))
+          ]),
+          right: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "right")
+          ]),
+          _: 3
+        }),
+        vue.createCommentVNode(' <div class="base-filter-container">\n    <div class="left">\n      <div v-if="render" class="form-ul">\n        <template v-for="(item, index) in renderColumns" :key="index">\n          <filter-item :active="hasValue(item.key)">\n            <a-input-search\n              v-if="item.component === \'input\'"\n              v-model="form[item.key]"\n              :style="{ width: styleWidth(columnsMap[item.key]) }"\n              allow-clear\n              size="medium"\n              :placeholder="`\u8BF7\u8F93\u5165${item.label}`"\n            />\n            <a-select\n              v-if="item.component === \'select\'"\n              v-model="form[item.key]"\n              allow-clear\n              :style="{ width: styleWidth(columnsMap[item.key]) }"\n              :placeholder="`\u8BF7\u9009\u62E9${item.label}`"\n            >\n              <template v-for="opt in getOptions(item)" :key="opt.value">\n                <a-option :label="opt.label" :value="opt.value"></a-option\n              ></template>\n            </a-select>\n            <a-range-picker\n              v-if="item.component === \'range-picker\'"\n              v-model="form[item.key].range"\n              :style="{ width: styleWidth(form[item.key]) }"\n              value-format="timestamp"\n              @click.stop\n            />\n          </filter-item>\n        </template>\n      </div>\n    </div>\n    <div class="right">\n      <slot name="right"></slot>\n    </div>\n  </div> ')
+      ], 2112);
     };
   }
 });

package/lib/baseFilter/components/FilterGroup.js

@@ -0,0 +1,180 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
+var core = require("@popperjs/core");
+const _hoisted_1 = { class: "filter-view-container" };
+const _hoisted_2 = { class: "more-btn" };
+const _hoisted_3 = { class: "right-prefix" };
+const _hoisted_4 = { class: "filter-content" };
+const _hoisted_5 = { class: "right" };
+const _hoisted_6 = {
+  ref: "tempNode",
+  style: { "display": "none" }
+};
+const _sfc_main = vue.defineComponent({
+  __name: "FilterGroup",
+  setup(__props) {
+    const documentWidth = vue.ref(0);
+    const overflowWidth = vue.ref(0);
+    vue.watch(
+      () => documentWidth.value,
+      (n) => checkOverflow()
+    );
+    vue.watch(
+      () => overflowWidth.value,
+      (n) => setPannelItem()
+    );
+    const initDocWidthListener = function() {
+      window.onresize = (() => {
+        return () => {
+          documentWidth.value = document.body.clientWidth;
+        };
+      })();
+    };
+    const filterItemsRef = vue.ref();
+    const moreBtnRef = vue.ref();
+    const dpPannelRef = vue.ref();
+    const initPopper = function() {
+      core.createPopper(moreBtnRef.value, dpPannelRef.value, {
+        placement: "bottom-start"
+      });
+    };
+    const popperShowFlag = vue.ref(false);
+    function showPopper() {
+      popperShowFlag.value = true;
+      window.onclick = hidePopper;
+    }
+    function hidePopper() {
+      popperShowFlag.value = false;
+    }
+    const itemNodeArr = vue.ref([]);
+    const itemWidthArr = vue.ref([]);
+    const itemArr = vue.ref([]);
+    function checkOverflow() {
+      if (!filterItemsRef.value)
+        return;
+      const parent = filterItemsRef.value.parentNode;
+      if (!itemNodeArr.value.length) {
+        itemNodeArr.value = mapNodes(filterItemsRef.value.childNodes);
+        itemWidthArr.value = itemNodeArr.value.map((node) => node.clientWidth + 10);
+        itemArr.value = itemWidthArr.value.map((_, idx) => idx);
+      }
+      const parentWidth = parent.clientWidth;
+      const leftWidth = getArrWidth(itemWidthArr.value);
+      const rightWidth = parent.childNodes[parent.childNodes.length - 1].clientWidth;
+      overflowWidth.value = leftWidth + rightWidth - parentWidth;
+    }
+    function mapNodes(nodes) {
+      const nodeArr = [];
+      for (let i = 0; i < nodes.length; i++) {
+        const element = nodes[i];
+        nodeArr.push(element);
+      }
+      return nodeArr.filter((item) => item.clientWidth);
+    }
+    function getArrWidth(arr) {
+      return arr.reduce((prev, cur) => prev + cur, 0);
+    }
+    const pannelArray = vue.ref("");
+    vue.watch(
+      () => pannelArray.value,
+      (n, o) => refreshPannel(n, o)
+    );
+    function refreshPannel(newStr, oldStr) {
+      const nArr = newStr ? newStr.split(",") : [];
+      const oArr = oldStr ? oldStr.split(",") : [];
+      if (nArr.length && nArr.length > oArr.length) {
+        diff(nArr, oArr).forEach((index) => inNode(parseInt(index, 10)));
+      } else if (nArr.length >= 0 && nArr.length < oArr.length) {
+        diff(oArr, nArr).forEach((index) => outNode(parseInt(index, 10)));
+      }
+    }
+    const diff = (arr1, arr2) => {
+      const diff2 = [];
+      for (let i = 0; i < arr1.length; i++) {
+        const item = arr1[i];
+        if (!arr2.includes(item))
+          diff2.push(item);
+      }
+      return diff2;
+    };
+    function inNode(index) {
+      var _a, _b, _c;
+      const node = mapNodes((_a = filterItemsRef.value) == null ? void 0 : _a.childNodes)[index];
+      const temp = document.createElement("div");
+      temp.style.width = `${itemWidthArr.value[index]}px`;
+      temp.style.position = "absolute";
+      temp.style.left = `${50}px`;
+      (_b = filterItemsRef.value) == null ? void 0 : _b.replaceChild(temp, node);
+      (_c = dpPannelRef.value) == null ? void 0 : _c.appendChild(node);
+    }
+    function outNode(index) {
+      var _a;
+      const node = itemNodeArr.value[index];
+      (_a = filterItemsRef.value) == null ? void 0 : _a.replaceChild(
+        node,
+        mapNodes(filterItemsRef.value.childNodes)[index]
+      );
+    }
+    function setPannelItem() {
+      let inPannelNum = 0;
+      if (overflowWidth.value > 0) {
+        const avgWidth = 120;
+        inPannelNum = Math.ceil((overflowWidth.value + 200) / avgWidth);
+      }
+      pannelArray.value = itemArr.value.slice(0, inPannelNum).join(",");
+    }
+    vue.onMounted(() => {
+      initDocWidthListener();
+      initPopper();
+      setTimeout(() => checkOverflow());
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("div", {
+            ref_key: "moreBtnRef",
+            ref: moreBtnRef
+          }, [
+            vue.withDirectives(vue.createVNode(vue.unref(webVue.Button), {
+              onClick: vue.withModifiers(showPopper, ["stop"])
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("span", _hoisted_3, [
+                  vue.createTextVNode(" \u66F4\u591A\u7B5B\u9009 "),
+                  vue.createVNode(vue.unref(icon.IconCaretDown))
+                ])
+              ]),
+              _: 1
+            }, 512), [
+              [vue.vShow, pannelArray.value]
+            ])
+          ], 512),
+          vue.withDirectives(vue.createElementVNode("div", {
+            id: "dpPannelRef",
+            ref_key: "dpPannelRef",
+            ref: dpPannelRef,
+            class: "filter-pannel"
+          }, null, 512), [
+            [vue.vShow, popperShowFlag.value]
+          ])
+        ]),
+        vue.createElementVNode("div", _hoisted_4, [
+          vue.createElementVNode("div", {
+            ref_key: "filterItemsRef",
+            ref: filterItemsRef,
+            class: "left"
+          }, [
+            vue.renderSlot(_ctx.$slots, "left")
+          ], 512),
+          vue.createElementVNode("div", _hoisted_5, [
+            vue.renderSlot(_ctx.$slots, "right")
+          ])
+        ]),
+        vue.createElementVNode("div", _hoisted_6, null, 512)
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/baseFilter/components/filterItem.js

@@ -9,7 +9,9 @@ const _sfc_main = vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["filter-item-view", { value: _ctx.active }])
+        class: vue.normalizeClass(["filter-item-view", { value: _ctx.active }]),
+        onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+        }, ["stop"]))
       }, [
         vue.renderSlot(_ctx.$slots, "default")
       ], 2);

package/lib/baseFilter/style/css.js

@@ -1,2 +1,3 @@
 "use strict";
 require("./index.css");
+require("./filterGroup.css");

package/lib/baseFilter/style/filterGroup.less

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

package/lib/baseFilter/style/index.js

@@ -1,2 +1,3 @@
 "use strict";
 require("./index.less");
+require("./filterGroup.less");

package/lib/utils/typeMap.js

@@ -85,15 +85,6 @@ const mp_type_map = {
   1: "\u4E2A\u4EBA\u53F7",
   2: "\u7EC4\u7EC7\u53F7"
 };
-const mpTypeOptions = () => {
-  const arr = Object.keys(mp_type_map).map((key) => {
-    return {
-      value: key,
-      label: mp_type_map[key]
-    };
-  });
-  return arr;
-};
 const kongo_source_map = {
   app: "\u5E94\u7528",
   url: "\u94FE\u63A5",
@@ -178,5 +169,4 @@ exports.local_live_doc_status = local_live_doc_status;
 exports.local_live_doc_type = local_live_doc_type;
 exports.matrixPublishFormalStateMap = matrixPublishFormalStateMap;
 exports.matrixPublishStateMap = matrixPublishStateMap;
-exports.mpTypeOptions = mpTypeOptions;
 exports.mp_type_map = mp_type_map;

package/package.json

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