yahee-components 0.0.84 → 0.0.86

package/es/complex-search/complex-search.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as K, toRefs as D, ref as s } from "vue";
+import { defineComponent as K, toRefs as D, ref as c } from "vue";
 import S from "../_virtual/lodash.js";
-import { defaultComplexSearchProps as t } from "./props.js";
-import { ElLink as G, ElOption as H, ElButton as V, ElRow as _, ElFormItem as L, ElForm as P, ElIcon as q, ElDialog as j, ElSelect as Y, ElCheckbox as z, ElInput as J } from "element-plus";
+import { defaultComplexSearchProps as r } from "./props.js";
+import { ElLink as G, ElOption as H, ElButton as V, ElRow as _, ElFormItem as L, ElForm as P, ElIcon as q, ElDialog as j, ElSelect as Y, ElCheckbox as $, ElInput as z } from "element-plus";
 import "element-plus/theme-chalk/src/base.scss";
 import "element-plus/theme-chalk/src/input.scss";
 import "element-plus/theme-chalk/src/checkbox.scss";
@@ -18,13 +18,13 @@ import "element-plus/theme-chalk/src/form-item.scss";
 import "element-plus/theme-chalk/src/row.scss";
 import "element-plus/theme-chalk/src/button.scss";
 import "element-plus/theme-chalk/src/link.scss";
-import { Search as M } from "@element-plus/icons-vue";
+import { Search as J } from "@element-plus/icons-vue";
 const Se = K({
   name: "YaheeComplexSearch",
   // 使用 components 选项注册所有 Element Plus 组件
   components: {
-    ElInput: J,
-    ElCheckbox: z,
+    ElInput: z,
+    ElCheckbox: $,
     ElSelect: Y,
     ElDialog: j,
     ElIcon: q,
@@ -34,57 +34,57 @@ const Se = K({
     ElButton: V,
     ElOption: H,
     ElLink: G,
-    Search: M
+    Search: J
   },
   props: {
     defaultSearch: {
       type: String,
-      default: t().defaultSearch
+      default: r().defaultSearch
     },
     options: {
       type: Array,
-      default: t().options
+      default: r().options
     },
     placeholderText: {
       type: String,
-      default: t().placeholderText
+      default: r().placeholderText
     },
     showPatchSearch: {
       type: Boolean,
-      default: t().showPatchSearch
+      default: r().showPatchSearch
     },
     showWithinFilterCheckbox: {
       type: Boolean,
-      default: t().showWithinFilterCheckbox
+      default: r().showWithinFilterCheckbox
     },
     specialOptions: {
       type: Array,
-      default: t().specialOptions
+      default: r().specialOptions
     },
     normalOptions: {
       type: Array,
-      default: t().normalOptions
+      default: r().normalOptions
     },
     showSelect: {
       type: Boolean,
-      default: t().showSelect
+      default: r().showSelect
     },
     searchItem: {
       type: Object,
-      default: t().searchItem
+      default: r().searchItem
     },
     isBatchSelectOptionsSameWithInput: {
       type: Boolean,
-      default: t().isBatchSelectOptionsSameWithInput
+      default: r().isBatchSelectOptionsSameWithInput
     },
     batchOptions: {
       type: Array,
-      default: t().batchOptions
+      default: r().batchOptions
     }
   },
   emits: ["filterChangeGrandson"],
-  setup(y, { emit: u }) {
-    const { specialOptions: v, normalOptions: w, searchItem: n } = D(y), r = s(y.defaultSearch || "WHOLE_SEARCH"), i = s(""), h = s(!1), f = s(!1), p = s(!1), m = s(null), o = s({ searchType: "WHOLE_SEARCH", searchContent: "" }), C = {
+  setup(v, { emit: u }) {
+    const { specialOptions: y, normalOptions: F, searchItem: s } = D(v), l = c(v.defaultSearch || "WHOLE_SEARCH"), i = c(""), h = c(!1), f = c(!1), p = c(!1), m = c(null), o = c({ searchType: "WHOLE_SEARCH", searchContent: "" }), C = {
       selectedSearchType: [{ required: !0, message: "请输入查询类型", trigger: "blur" }],
       searchContent: [{ required: !0, message: "请输入查询内容", trigger: "blur" }]
     }, g = [{ value: "WHOLE_SEARCH", label: "综合搜索" }], E = () => {
@@ -92,38 +92,42 @@ const Se = K({
     }, O = () => {
       p.value = !1;
     }, b = () => {
-      h.value || (delete n.value.putSearch, u("filterChangeGrandson", n.value, r.value));
-    }, W = () => n.value, I = () => {
-      i.value ? A() : u("filterChangeGrandson", W(), r.value);
-    }, R = (e, l) => {
-      const a = { ...e };
-      return S.map(v.value, (c) => c.key).includes(l.filterKey) ? v.value.forEach((c) => delete a[c.key]) : delete a[l.filterKey], a;
-    }, k = (e) => {
-      S.forEach(e, (l) => {
-        const a = R(n.value, l), { checkedValues: c, filterKey: d } = l;
-        S.isEmpty(c) || (w.value.includes(d) ? a[d] = c[0] : a[d] = c), n.value = a;
-      }), u("filterChangeGrandson", n.value, r.value);
-    }, T = (e) => {
-      i.value = B(e) || "";
-    }, x = (e) => {
-      o.value.searchContent = B(e) || "";
-    }, B = (e) => {
-      var a;
-      e.preventDefault();
-      const l = (a = e.clipboardData) == null ? void 0 : a.getData("text/plain");
-      return l == null ? void 0 : l.replace(/[\n\r\t]+/g, ",");
+      h.value || (delete s.value.putSearch, u("filterChangeGrandson", s.value, l.value));
+    }, W = () => s.value, I = () => {
+      i.value ? A() : u("filterChangeGrandson", W(), l.value);
+    }, R = (a, e) => {
+      const t = { ...a };
+      return S.map(y.value, (n) => n.key).includes(e.filterKey) ? y.value.forEach((n) => delete t[n.key]) : delete t[e.filterKey], t;
+    }, k = (a) => {
+      S.forEach(a, (e) => {
+        const t = R(s.value, e), { checkedValues: n, filterKey: d } = e;
+        S.isEmpty(n) || (F.value.includes(d) ? t[d] = n[0] : t[d] = n), s.value = t;
+      }), u("filterChangeGrandson", s.value, l.value);
+    }, T = (a) => {
+      i.value = x(a) || "";
+    }, w = (a) => {
+      const e = x(a);
+      if (e) {
+        const t = o.value.searchContent || "";
+        t ? o.value.searchContent = `${t},${e}` : o.value.searchContent = e;
+      }
+    }, x = (a) => {
+      var t;
+      a.preventDefault();
+      const e = (t = a.clipboardData) == null ? void 0 : t.getData("text/plain");
+      return e == null ? void 0 : e.replace(/[\n\r\t]+/g, ",");
     }, A = () => {
       h.value ? k([
         { filterKey: "putSearch", checkedValues: i.value },
-        { filterKey: "searchType", checkedValues: r.value }
+        { filterKey: "searchType", checkedValues: l.value }
       ]) : u(
         "filterChangeGrandson",
-        { putSearch: i.value, searchType: r.value },
-        r.value
+        { putSearch: i.value, searchType: l.value },
+        l.value
       );
-    }, F = () => {
-      m.value && m.value.validate((e) => {
-        e && (f.value = !0, h.value ? k([
+    }, B = () => {
+      m.value && m.value.validate((a) => {
+        a && (f.value = !0, h.value ? k([
           { filterKey: "putSearch", checkedValues: o.value.searchContent },
           { filterKey: "searchType", checkedValues: o.value.searchType }
         ]) : u(
@@ -132,13 +136,13 @@ const Se = K({
             putSearch: o.value.searchContent,
             searchType: o.value.searchType
           },
-          r.value
+          l.value
         ), p.value = !1, f.value = !1);
       });
     };
     return {
       ...{
-        selectedSearchType: r,
+        selectedSearchType: l,
         putSearch: i,
         isWithinFilterOptions: h,
         confirmLoading: f,
@@ -152,10 +156,10 @@ const Se = K({
         searchWithinFilterOptions: b,
         handleSearch: I,
         pasteFormatInput: T,
-        confirmSearch: F,
-        pasteFormat: x
+        confirmSearch: B,
+        pasteFormat: w
       },
-      selectedSearchType: r,
+      selectedSearchType: l,
       putSearch: i,
       isWithinFilterOptions: h,
       confirmLoading: f,
@@ -169,8 +173,8 @@ const Se = K({
       searchWithinFilterOptions: b,
       handleSearch: I,
       pasteFormatInput: T,
-      confirmSearch: F,
-      pasteFormat: x
+      confirmSearch: B,
+      pasteFormat: w
     };
   }
 });

package/es/filter-container/filter-container.vue.js

@@ -0,0 +1,67 @@
+import { defineComponent as K, ref as v, computed as p, useSlots as S, provide as M, onMounted as V, onUnmounted as j, createElementBlock as i, openBlock as u, createCommentVNode as g, renderSlot as y } from "vue";
+import I from "../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/debounce.js";
+const x = { class: "yahee-filter-container" }, N = {
+  key: 0,
+  class: "filter-section"
+}, O = {
+  key: 1,
+  class: "search-section"
+}, G = /* @__PURE__ */ K({
+  __name: "filter-container",
+  props: {
+    debounceInterval: { default: 300 },
+    immediate: { type: Boolean, default: !1 },
+    initialSearchItem: { default: () => ({}) },
+    showSearchSection: { type: Boolean, default: !1 }
+  },
+  emits: ["change", "search"],
+  setup(C, { expose: _, emit: b }) {
+    const A = Symbol("filterContainer"), r = C, c = b, t = v({ ...r.initialSearchItem }), s = v(/* @__PURE__ */ new Map()), k = p(() => s.value.size > 0 || !!S().filters), w = p(() => r.showSearchSection || Array.from(s.value.values()).some((e) => e.type === "search") || !!S().search), h = I((e) => {
+      c("change", e);
+    }, r.debounceInterval), m = I((e) => {
+      c("search", e);
+    }, r.debounceInterval), E = (e, o, n = "filter") => {
+      console.log(`注册组件: ${e}, 类型: ${n}`), s.value.set(e, { methods: o, type: n });
+    }, $ = (e) => {
+      console.log(`注销组件: ${e}`), s.value.delete(e);
+    }, d = (e) => {
+      const o = Array.isArray(e) ? e : [e], n = { ...t.value };
+      o.forEach((z) => {
+        const { filterKey: l, checkedValues: a } = z;
+        a.length === 0 || a[0] === "" || a[0] === null || a[0] === void 0 ? delete n[l] : a.length === 1 ? n[l] = a[0] : n[l] = a;
+      }), t.value = n, h({ ...n });
+    }, B = (e) => {
+      const o = { ...t.value, ...e };
+      t.value = o, m({ ...o });
+    }, F = () => {
+      t.value = { ...r.initialSearchItem }, s.value.forEach((e) => {
+        e.methods.reset && e.methods.reset();
+      }), c("change", { ...t.value });
+    }, f = () => ({ ...t.value });
+    return M(A, {
+      registerComponent: E,
+      unregisterComponent: $,
+      updateSearchItem: d,
+      handleSearch: B,
+      getCurrentSearchItem: f
+    }), _({
+      resetAllFilters: F,
+      getCurrentSearchItem: f,
+      updateSearchItem: d
+    }), V(() => {
+      console.log("FilterContainer 已挂载，注册组件数量:", s.value.size), r.immediate && Object.keys(t.value).length > 0 && c("change", { ...t.value });
+    }), j(() => {
+      h.cancel(), m.cancel();
+    }), (e, o) => (u(), i("div", x, [
+      k.value ? (u(), i("div", N, [
+        y(e.$slots, "filters")
+      ])) : g("", !0),
+      w.value ? (u(), i("div", O, [
+        y(e.$slots, "search")
+      ])) : g("", !0)
+    ]));
+  }
+});
+export {
+  G as default
+};

package/es/filter-container/filter-container.vue2.js

@@ -0,0 +1,4 @@
+import f from "./filter-container.vue.js";
+export {
+  f as default
+};

package/es/filter-container/index.js

@@ -0,0 +1,7 @@
+import { withInstall as t } from "../utils/install.js";
+import o from "./filter-container.vue.js";
+const e = t(o);
+export {
+  e as YaheeFilterContainer,
+  e as default
+};

package/es/filter-container/style/index.css

@@ -0,0 +1,17 @@
+.yahee-filter-container {
+  display: flex;
+  width: 100%;
+}
+.yahee-filter-container .filter-section {
+  min-width: 200px;
+}
+.yahee-filter-container .search-section {
+  min-height: 60px;
+  position: fixed;
+  right: -50px;
+}
+.yahee-filter-container .content-section {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}

package/es/filter-wrapper/filter-wrapper.vue.js

@@ -0,0 +1,7 @@
+import r from "./filter-wrapper.vue2.js";
+/* empty css                    */
+import o from "../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ o(r, [["__scopeId", "data-v-841c990f"]]);
+export {
+  e as default
+};

package/es/filter-wrapper/filter-wrapper.vue2.js

@@ -0,0 +1,59 @@
+import { defineComponent as f, inject as m, onMounted as d, onUnmounted as h, createElementBlock as y, openBlock as S, renderSlot as g } from "vue";
+const I = { class: "filter-wrapper yahee-filter-wrapper" }, K = /* @__PURE__ */ f({
+  name: "YaheeFilterWrapper",
+  __name: "filter-wrapper",
+  props: {
+    id: {},
+    filterKey: {},
+    type: { default: "filter" },
+    reset: {},
+    immediate: { type: Boolean, default: !1 }
+  },
+  setup(p, { expose: l }) {
+    const u = Symbol("filterContainer"), r = p, e = m(u), n = (t = {}) => {
+      e && e.registerComponent(
+        r.id,
+        {
+          reset: r.reset || t.reset,
+          ...t
+        },
+        r.type
+      );
+    }, a = (t) => {
+      if (!e) return;
+      const c = Array.isArray(t) ? t : [t];
+      e.updateSearchItem({
+        filterKey: r.filterKey,
+        checkedValues: c
+      });
+    }, s = () => e != null && e.getCurrentSearchItem ? e.getCurrentSearchItem() : {}, o = (t) => {
+      e != null && e.handleSearch && e.handleSearch(t);
+    }, i = () => {
+      r.reset && r.reset();
+    };
+    return l({
+      register: n,
+      updateFilter: a,
+      getCurrentSearchItem: s,
+      handleSearch: o,
+      reset: i
+    }), d(() => {
+      if (n({ reset: i }), r.immediate && (e != null && e.getCurrentSearchItem)) {
+        const t = e.getCurrentSearchItem();
+        t[r.filterKey] && a(t[r.filterKey]);
+      }
+    }), h(() => {
+      e && e.unregisterComponent(r.id);
+    }), (t, c) => (S(), y("div", I, [
+      g(t.$slots, "default", {
+        register: n,
+        update: a,
+        getCurrentSearchItem: s,
+        handleSearch: o
+      }, void 0, !0)
+    ]));
+  }
+});
+export {
+  K as default
+};

package/es/filter-wrapper/index.js

@@ -0,0 +1,7 @@
+import { withInstall as r } from "../utils/install.js";
+import t from "./filter-wrapper.vue.js";
+const a = r(t);
+export {
+  a as YaheeFilterWrapper,
+  a as default
+};

package/es/filter-wrapper/style/index.css

@@ -0,0 +1,3 @@
+.yahee-filter-wrapper {
+  font-size: 20px;
+}

package/es/installs.js

@@ -4,30 +4,34 @@ import { YaheeCopy as r } from "./copy/index.js";
 import { YaheeImageUpload as m } from "./image-upload/index.js";
 import { YaheeOperationLog as t } from "./operation-log/index.js";
 import { YaheeAnnexUpload as a } from "./annex-upload/index.js";
-import { YaheeLeftCondition as p } from "./left-condition/index.js";
-import { YaheeLeftConditionEnum as i } from "./left-condition-enum/index.js";
+import { YaheeLeftCondition as i } from "./left-condition/index.js";
+import { YaheeLeftConditionEnum as p } from "./left-condition-enum/index.js";
 import { YaheeDropDownCondition as n } from "./drop-down-condition/index.js";
 import { YaheeCountryPlatformShopCondition as f } from "./country-platform-shop-condition/index.js";
 import { YaheeCommonImport as h } from "./common-import/index.js";
 import { YaheeBorderWrap as Y } from "./border-wrap/index.js";
-import { YaheeEchartGauge as d } from "./echart-gauge/index.js";
-import { YaheeScaleScreen as l } from "./scale-screen/index.js";
-const A = [
+import { YaheeEchartGauge as l } from "./echart-gauge/index.js";
+import { YaheeScaleScreen as C } from "./scale-screen/index.js";
+import { YaheeFilterContainer as d } from "./filter-container/index.js";
+import { YaheeFilterWrapper as c } from "./filter-wrapper/index.js";
+const G = [
   o,
   e,
   r,
   m,
   t,
   a,
-  p,
   i,
+  p,
   n,
   f,
   h,
   Y,
+  l,
+  C,
   d,
-  l
+  c
 ];
 export {
-  A as default
+  G as default
 };

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_Symbol.js

@@ -0,0 +1,5 @@
+import o from "./_root.js";
+var m = o.Symbol;
+export {
+  m as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_baseGetTag.js

@@ -0,0 +1,10 @@
+import t from "./_Symbol.js";
+import e from "./_getRawTag.js";
+import o from "./_objectToString.js";
+var i = "[object Null]", f = "[object Undefined]", r = t ? t.toStringTag : void 0;
+function m(n) {
+  return n == null ? n === void 0 ? f : i : r && r in Object(n) ? e(n) : o(n);
+}
+export {
+  m as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_baseTrim.js

@@ -0,0 +1,8 @@
+import r from "./_trimmedEndIndex.js";
+var a = /^\s+/;
+function t(e) {
+  return e && e.slice(0, r(e) + 1).replace(a, "");
+}
+export {
+  t as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_freeGlobal.js

@@ -0,0 +1,4 @@
+var l = typeof global == "object" && global && global.Object === Object && global;
+export {
+  l as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_getRawTag.js

@@ -0,0 +1,15 @@
+import e from "./_Symbol.js";
+var o = Object.prototype, c = o.hasOwnProperty, f = o.toString, r = e ? e.toStringTag : void 0;
+function p(t) {
+  var a = c.call(t, r), n = t[r];
+  try {
+    t[r] = void 0;
+    var i = !0;
+  } catch {
+  }
+  var g = f.call(t);
+  return i && (a ? t[r] = n : delete t[r]), g;
+}
+export {
+  p as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_objectToString.js

@@ -0,0 +1,7 @@
+var o = Object.prototype, r = o.toString;
+function e(t) {
+  return r.call(t);
+}
+export {
+  e as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_root.js

@@ -0,0 +1,5 @@
+import e from "./_freeGlobal.js";
+var t = typeof self == "object" && self && self.Object === Object && self, r = e || t || Function("return this")();
+export {
+  r as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_trimmedEndIndex.js

@@ -0,0 +1,9 @@
+var r = /\s/;
+function a(t) {
+  for (var e = t.length; e-- && r.test(t.charAt(e)); )
+    ;
+  return e;
+}
+export {
+  a as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/debounce.js

@@ -0,0 +1,54 @@
+import S from "./isObject.js";
+import h from "./now.js";
+import W from "./toNumber.js";
+var y = "Expected a function", R = Math.max, A = Math.min;
+function _(x, i, u) {
+  var a, d, c, f, n, r, l = 0, E = !1, m = !1, g = !0;
+  if (typeof x != "function")
+    throw new TypeError(y);
+  i = W(i) || 0, S(u) && (E = !!u.leading, m = "maxWait" in u, c = m ? R(W(u.maxWait) || 0, i) : c, g = "trailing" in u ? !!u.trailing : g);
+  function v(e) {
+    var t = a, o = d;
+    return a = d = void 0, l = e, f = x.apply(o, t), f;
+  }
+  function b(e) {
+    return l = e, n = setTimeout(s, i), E ? v(e) : f;
+  }
+  function C(e) {
+    var t = e - r, o = e - l, p = i - t;
+    return m ? A(p, c - o) : p;
+  }
+  function k(e) {
+    var t = e - r, o = e - l;
+    return r === void 0 || t >= i || t < 0 || m && o >= c;
+  }
+  function s() {
+    var e = h();
+    if (k(e))
+      return I(e);
+    n = setTimeout(s, C(e));
+  }
+  function I(e) {
+    return n = void 0, g && a ? v(e) : (a = d = void 0, f);
+  }
+  function L() {
+    n !== void 0 && clearTimeout(n), l = 0, a = r = d = n = void 0;
+  }
+  function M() {
+    return n === void 0 ? f : I(h());
+  }
+  function T() {
+    var e = h(), t = k(e);
+    if (a = arguments, d = this, r = e, t) {
+      if (n === void 0)
+        return b(r);
+      if (m)
+        return clearTimeout(n), n = setTimeout(s, i), v(r);
+    }
+    return n === void 0 && (n = setTimeout(s, i)), f;
+  }
+  return T.cancel = L, T.flush = M, T;
+}
+export {
+  _ as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isObject.js

@@ -0,0 +1,7 @@
+function n(t) {
+  var e = typeof t;
+  return t != null && (e == "object" || e == "function");
+}
+export {
+  n as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isObjectLike.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return t != null && typeof t == "object";
+}
+export {
+  e as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isSymbol.js

@@ -0,0 +1,9 @@
+import t from "./_baseGetTag.js";
+import m from "./isObjectLike.js";
+var r = "[object Symbol]";
+function i(o) {
+  return typeof o == "symbol" || m(o) && t(o) == r;
+}
+export {
+  i as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/now.js

@@ -0,0 +1,7 @@
+import o from "./_root.js";
+var t = function() {
+  return o.Date.now();
+};
+export {
+  t as default
+};

package/es/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/toNumber.js

@@ -0,0 +1,22 @@
+import n from "./_baseTrim.js";
+import f from "./isObject.js";
+import o from "./isSymbol.js";
+var s = NaN, m = /^[-+]0x[0-9a-f]+$/i, p = /^0b[01]+$/i, e = /^0o[0-7]+$/i, b = parseInt;
+function O(r) {
+  if (typeof r == "number")
+    return r;
+  if (o(r))
+    return s;
+  if (f(r)) {
+    var t = typeof r.valueOf == "function" ? r.valueOf() : r;
+    r = f(t) ? t + "" : t;
+  }
+  if (typeof r != "string")
+    return r === 0 ? r : +r;
+  r = n(r);
+  var i = p.test(r);
+  return i || e.test(r) ? b(r.slice(2), i ? 2 : 8) : m.test(r) ? s : +r;
+}
+export {
+  O as default
+};

package/es/style.css

@@ -526,6 +526,28 @@
   height: 100%;
 }
 
+.yahee-filter-container {
+  display: flex;
+  width: 100%;
+}
+.yahee-filter-container .filter-section {
+  min-width: 200px;
+}
+.yahee-filter-container .search-section {
+  min-height: 60px;
+  position: fixed;
+  right: -50px;
+}
+.yahee-filter-container .content-section {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}
+
+.yahee-filter-wrapper {
+  font-size: 20px;
+}
+
 :root {
   --el-color-primary: #3366cc;
   --el-text-color-regular: #000;