@cmstops/pro-compo 0.1.74 → 0.1.75

package/es/baseFilter/component.js

@@ -1,13 +1,7 @@
-import { defineComponent, ref, computed, watch, toRaw, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createBlock, withCtx, unref, normalizeStyle, createCommentVNode, 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 _sfc_main$1 from "./components/filterItem.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",
@@ -130,11 +124,11 @@ const _sfc_main = defineComponent({
       { deep: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          render.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      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$1, {
+              return openBlock(), createBlock(_sfc_main$2, {
                 key: index,
                 active: hasValue.value(item.key)
               }, {
@@ -180,12 +174,14 @@ const _sfc_main = defineComponent({
                 _: 2
               }, 1032, ["active"]);
             }), 128))
-          ])) : createCommentVNode("v-if", true)
-        ]),
-        createElementVNode("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "right")
-        ])
-      ]);
+          ]),
+          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/lib/baseFilter/component.js

@@ -2,13 +2,7 @@
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
 var filterItem = require("./components/filterItem.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",
@@ -131,9 +125,9 @@ const _sfc_main = vue.defineComponent({
       { deep: true }
     );
     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, [
+      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,
@@ -181,12 +175,14 @@ const _sfc_main = vue.defineComponent({
                 _: 2
               }, 1032, ["active"]);
             }), 128))
-          ])) : vue.createCommentVNode("v-if", true)
-        ]),
-        vue.createElementVNode("div", _hoisted_4, [
-          vue.renderSlot(_ctx.$slots, "right")
-        ])
-      ]);
+          ]),
+          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/package.json

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