@wfrog/vc/dist/es/components/pca-picker/pca-picker.mjs

vue3 组件库 vc

import './index.css'
import { c as buildProps, d as definePropType, u as useNamespace, f as isNumber, s as isObject, h as isString, g as isUndefined, o as isClient, q as isWindow } from '../../chunk/E_WRn0OP.mjs';
import '../../chunk/DUd8IaU9.mjs';
/* empty css                    */
import { E as ElText, P as PopoverCascader, a as ElCascader } from '../../chunk/YQMGv8da.mjs';
import '../../chunk/D19ZZ4OA.mjs';
import '../../chunk/Bm4zCpG6.mjs';
import '../../chunk/cUoiVgQs.mjs';
import '../../chunk/CJQcPuNK.mjs';
import { defineComponent, inject, computed, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, unref, withCtx, renderSlot, createElementBlock, createCommentVNode, provide, useSlots, ref, watch, onMounted, createElementVNode, nextTick, onBeforeUnmount, createTextVNode, toDisplayString, shallowRef, toRefs, Fragment, createVNode, renderList, useTemplateRef, mergeProps, isRef, useCssModule } from 'vue';
import { useInject, useProvide } from '../../use/useStore/index.mjs';
import { i as injectConfig } from '../config-provider/config-provider2.mjs';
import { b as useStorage, u as useVModel, o as onClickOutside } from '../../chunk/eQT9aAiW.mjs';
import { s as storage } from '../../chunk/BdDihk0t.mjs';
import { b as baseFlatten } from '../../chunk/C2LgraHx.mjs';
import { a as arrayMap, b as isArray } from '../../chunk/Spa-JKB4.mjs';
import { b as baseIteratee } from '../../chunk/DFKOIp_Z.mjs';
import { k as keys, a as isArrayLike } from '../../chunk/-EkpfdcW.mjs';
import { _ as _export_sfc, w as withInstall, a as withNoopInstall } from '../../chunk/D389hx_T.mjs';
import { m as mutable } from '../../chunk/B-rxnVJv.mjs';
import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';
import { c as useEventListener } from '../../chunk/CEClY-_T.mjs';
import { c as cAF, r as rAF, a as getScrollElement, b as animateScrollTo, d as getScrollTop } from '../../chunk/DBO1MWUI.mjs';
import { C as CHANGE_EVENT } from '../../chunk/Ct6q2FXg.mjs';
import { E as ElPopover } from '../../chunk/CGA7gSl6.mjs';
import { u as useToggle, a as useThrottleFn } from '../../chunk/GvCnndsC.mjs';

/**
 * Creates a base function for methods like `_.forIn` and `_.forOwn`.
 *
 * @private
 * @param {boolean} [fromRight] Specify iterating from right to left.
 * @returns {Function} Returns the new base function.
 */
function createBaseFor(fromRight) {
  return function(object, iteratee, keysFunc) {
    var index = -1,
        iterable = Object(object),
        props = keysFunc(object),
        length = props.length;

    while (length--) {
      var key = props[++index];
      if (iteratee(iterable[key], key, iterable) === false) {
        break;
      }
    }
    return object;
  };
}

/**
 * The base implementation of `baseForOwn` which iterates over `object`
 * properties returned by `keysFunc` and invokes `iteratee` for each property.
 * Iteratee functions may exit iteration early by explicitly returning `false`.
 *
 * @private
 * @param {Object} object The object to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @param {Function} keysFunc The function to get the keys of `object`.
 * @returns {Object} Returns `object`.
 */
var baseFor = createBaseFor();

/**
 * The base implementation of `_.forOwn` without support for iteratee shorthands.
 *
 * @private
 * @param {Object} object The object to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {Object} Returns `object`.
 */
function baseForOwn(object, iteratee) {
  return object && baseFor(object, iteratee, keys);
}

/**
 * Creates a `baseEach` or `baseEachRight` function.
 *
 * @private
 * @param {Function} eachFunc The function to iterate over a collection.
 * @param {boolean} [fromRight] Specify iterating from right to left.
 * @returns {Function} Returns the new base function.
 */
function createBaseEach(eachFunc, fromRight) {
  return function(collection, iteratee) {
    if (collection == null) {
      return collection;
    }
    if (!isArrayLike(collection)) {
      return eachFunc(collection, iteratee);
    }
    var length = collection.length,
        index = -1,
        iterable = Object(collection);

    while ((++index < length)) {
      if (iteratee(iterable[index], index, iterable) === false) {
        break;
      }
    }
    return collection;
  };
}

/**
 * The base implementation of `_.forEach` without support for iteratee shorthands.
 *
 * @private
 * @param {Array|Object} collection The collection to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {Array|Object} Returns `collection`.
 */
var baseEach = createBaseEach(baseForOwn);

/**
 * The base implementation of `_.map` without support for iteratee shorthands.
 *
 * @private
 * @param {Array|Object} collection The collection to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {Array} Returns the new mapped array.
 */
function baseMap(collection, iteratee) {
  var index = -1,
      result = isArrayLike(collection) ? Array(collection.length) : [];

  baseEach(collection, function(value, key, collection) {
    result[++index] = iteratee(value, key, collection);
  });
  return result;
}

/**
 * Creates an array of values by running each element in `collection` thru
 * `iteratee`. The iteratee is invoked with three arguments:
 * (value, index|key, collection).
 *
 * Many lodash methods are guarded to work as iteratees for methods like
 * `_.every`, `_.filter`, `_.map`, `_.mapValues`, `_.reject`, and `_.some`.
 *
 * The guarded methods are:
 * `ary`, `chunk`, `curry`, `curryRight`, `drop`, `dropRight`, `every`,
 * `fill`, `invert`, `parseInt`, `random`, `range`, `rangeRight`, `repeat`,
 * `sampleSize`, `slice`, `some`, `sortBy`, `split`, `take`, `takeRight`,
 * `template`, `trim`, `trimEnd`, `trimStart`, and `words`
 *
 * @static
 * @memberOf _
 * @since 0.1.0
 * @category Collection
 * @param {Array|Object} collection The collection to iterate over.
 * @param {Function} [iteratee=_.identity] The function invoked per iteration.
 * @returns {Array} Returns the new mapped array.
 * @example
 *
 * function square(n) {
 *   return n * n;
 * }
 *
 * _.map([4, 8], square);
 * // => [16, 64]
 *
 * _.map({ 'a': 4, 'b': 8 }, square);
 * // => [16, 64] (iteration order is not guaranteed)
 *
 * var users = [
 *   { 'user': 'barney' },
 *   { 'user': 'fred' }
 * ];
 *
 * // The `_.property` iteratee shorthand.
 * _.map(users, 'user');
 * // => ['barney', 'fred']
 */
function map(collection, iteratee) {
  var func = isArray(collection) ? arrayMap : baseMap;
  return func(collection, baseIteratee(iteratee));
}

/**
 * Creates a flattened array of values by running each element in `collection`
 * thru `iteratee` and flattening the mapped results. The iteratee is invoked
 * with three arguments: (value, index|key, collection).
 *
 * @static
 * @memberOf _
 * @since 4.0.0
 * @category Collection
 * @param {Array|Object} collection The collection to iterate over.
 * @param {Function} [iteratee=_.identity] The function invoked per iteration.
 * @returns {Array} Returns the new flattened array.
 * @example
 *
 * function duplicate(n) {
 *   return [n, n];
 * }
 *
 * _.flatMap([1, 2], duplicate);
 * // => [1, 1, 2, 2]
 */
function flatMap(collection, iteratee) {
  return baseFlatten(map(collection, iteratee), 1);
}

/** Used as references for various `Number` constants. */
var INFINITY = 1 / 0;

/**
 * This method is like `_.flatMap` except that it recursively flattens the
 * mapped results.
 *
 * @static
 * @memberOf _
 * @since 4.7.0
 * @category Collection
 * @param {Array|Object} collection The collection to iterate over.
 * @param {Function} [iteratee=_.identity] The function invoked per iteration.
 * @returns {Array} Returns the new flattened array.
 * @example
 *
 * function duplicate(n) {
 *   return [[[n, n]]];
 * }
 *
 * _.flatMapDeep([1, 2], duplicate);
 * // => [1, 1, 2, 2]
 */
function flatMapDeep(collection, iteratee) {
  return baseFlatten(map(collection, iteratee), INFINITY);
}

const colProps = buildProps({
  tag: {
    type: String,
    default: "div"
  },
  span: {
    type: Number,
    default: 24
  },
  offset: {
    type: Number,
    default: 0
  },
  pull: {
    type: Number,
    default: 0
  },
  push: {
    type: Number,
    default: 0
  },
  xs: {
    type: definePropType([Number, Object]),
    default: () => mutable({})
  },
  sm: {
    type: definePropType([Number, Object]),
    default: () => mutable({})
  },
  md: {
    type: definePropType([Number, Object]),
    default: () => mutable({})
  },
  lg: {
    type: definePropType([Number, Object]),
    default: () => mutable({})
  },
  xl: {
    type: definePropType([Number, Object]),
    default: () => mutable({})
  }
});

const rowContextKey = Symbol("rowContextKey");

const __default__$4 = defineComponent({
  name: "ElCol"
});
const _sfc_main$c = /* @__PURE__ */ defineComponent({
  ...__default__$4,
  props: colProps,
  setup(__props) {
    const props = __props;
    const { gutter } = inject(rowContextKey, { gutter: computed(() => 0) });
    const ns = useNamespace("col");
    const style = computed(() => {
      const styles = {};
      if (gutter.value) {
        styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`;
      }
      return styles;
    });
    const colKls = computed(() => {
      const classes = [];
      const pos = ["span", "offset", "pull", "push"];
      pos.forEach((prop) => {
        const size = props[prop];
        if (isNumber(size)) {
          if (prop === "span")
            classes.push(ns.b(`${props[prop]}`));
          else if (size > 0)
            classes.push(ns.b(`${prop}-${props[prop]}`));
        }
      });
      const sizes = ["xs", "sm", "md", "lg", "xl"];
      sizes.forEach((size) => {
        if (isNumber(props[size])) {
          classes.push(ns.b(`${size}-${props[size]}`));
        } else if (isObject(props[size])) {
          Object.entries(props[size]).forEach(([prop, sizeProp]) => {
            classes.push(prop !== "span" ? ns.b(`${size}-${prop}-${sizeProp}`) : ns.b(`${size}-${sizeProp}`));
          });
        }
      });
      if (gutter.value) {
        classes.push(ns.is("guttered"));
      }
      return [ns.b(), classes];
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
        class: normalizeClass(unref(colKls)),
        style: normalizeStyle(unref(style))
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 8, ["class", "style"]);
    };
  }
});
var Col = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__file", "col.vue"]]);

const ElCol = withInstall(Col);

const getOffsetTop = (el) => {
  let offset = 0;
  let parent = el;
  while (parent) {
    offset += parent.offsetTop;
    parent = parent.offsetParent;
  }
  return offset;
};
const getOffsetTopDistance = (el, containerEl) => {
  return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl));
};

const dividerProps = buildProps({
  direction: {
    type: String,
    values: ["horizontal", "vertical"],
    default: "horizontal"
  },
  contentPosition: {
    type: String,
    values: ["left", "center", "right"],
    default: "center"
  },
  borderStyle: {
    type: definePropType(String),
    default: "solid"
  }
});

const __default__$3 = defineComponent({
  name: "ElDivider"
});
const _sfc_main$b = /* @__PURE__ */ defineComponent({
  ...__default__$3,
  props: dividerProps,
  setup(__props) {
    const props = __props;
    const ns = useNamespace("divider");
    const dividerStyle = computed(() => {
      return ns.cssVar({
        "border-style": props.borderStyle
      });
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.direction)]),
        style: normalizeStyle(unref(dividerStyle)),
        role: "separator"
      }, [
        _ctx.$slots.default && _ctx.direction !== "vertical" ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: normalizeClass([unref(ns).e("text"), unref(ns).is(_ctx.contentPosition)])
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 2)) : createCommentVNode("v-if", true)
      ], 6);
    };
  }
});
var Divider = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__file", "divider.vue"]]);

const ElDivider = withInstall(Divider);

const RowJustify = [
  "start",
  "center",
  "end",
  "space-around",
  "space-between",
  "space-evenly"
];
const RowAlign = ["top", "middle", "bottom"];
const rowProps = buildProps({
  tag: {
    type: String,
    default: "div"
  },
  gutter: {
    type: Number,
    default: 0
  },
  justify: {
    type: String,
    values: RowJustify,
    default: "start"
  },
  align: {
    type: String,
    values: RowAlign
  }
});

const __default__$2 = defineComponent({
  name: "ElRow"
});
const _sfc_main$a = /* @__PURE__ */ defineComponent({
  ...__default__$2,
  props: rowProps,
  setup(__props) {
    const props = __props;
    const ns = useNamespace("row");
    const gutter = computed(() => props.gutter);
    provide(rowContextKey, {
      gutter
    });
    const style = computed(() => {
      const styles = {};
      if (!props.gutter) {
        return styles;
      }
      styles.marginRight = styles.marginLeft = `-${props.gutter / 2}px`;
      return styles;
    });
    const rowKls = computed(() => [
      ns.b(),
      ns.is(`justify-${props.justify}`, props.justify !== "start"),
      ns.is(`align-${props.align}`, !!props.align)
    ]);
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
        class: normalizeClass(unref(rowKls)),
        style: normalizeStyle(unref(style))
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 8, ["class", "style"]);
    };
  }
});
var Row = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__file", "row.vue"]]);

const ElRow = withInstall(Row);

const anchorProps = buildProps({
  container: {
    type: definePropType([
      String,
      Object
    ])
  },
  offset: {
    type: Number,
    default: 0
  },
  bound: {
    type: Number,
    default: 15
  },
  duration: {
    type: Number,
    default: 300
  },
  marker: {
    type: Boolean,
    default: true
  },
  type: {
    type: definePropType(String),
    default: "default"
  },
  direction: {
    type: definePropType(String),
    default: "vertical"
  },
  selectScrollTop: Boolean
});
const anchorEmits = {
  change: (href) => isString(href),
  click: (e, href) => e instanceof MouseEvent && (isString(href) || isUndefined(href))
};

const anchorKey = Symbol("anchor");

const getElement = (target) => {
  if (!isClient || target === "")
    return null;
  if (isString(target)) {
    try {
      return document.querySelector(target);
    } catch (e) {
      return null;
    }
  }
  return target;
};

function throttleByRaf(cb) {
  let timer = 0;
  const throttle = (...args) => {
    if (timer) {
      cAF(timer);
    }
    timer = rAF(() => {
      cb(...args);
      timer = 0;
    });
  };
  throttle.cancel = () => {
    cAF(timer);
    timer = 0;
  };
  return throttle;
}

const __default__$1 = defineComponent({
  name: "ElAnchor"
});
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
  ...__default__$1,
  props: anchorProps,
  emits: anchorEmits,
  setup(__props, { expose, emit }) {
    const props = __props;
    const slots = useSlots();
    const currentAnchor = ref("");
    const markerStyle = ref({});
    const anchorRef = ref(null);
    const markerRef = ref(null);
    const containerEl = ref();
    const links = {};
    let isScrolling = false;
    let currentScrollTop = 0;
    const ns = useNamespace("anchor");
    const cls = computed(() => [
      ns.b(),
      props.type === "underline" ? ns.m("underline") : "",
      ns.m(props.direction)
    ]);
    const addLink = (state) => {
      links[state.href] = state.el;
    };
    const removeLink = (href) => {
      delete links[href];
    };
    const setCurrentAnchor = (href) => {
      const activeHref = currentAnchor.value;
      if (activeHref !== href) {
        currentAnchor.value = href;
        emit(CHANGE_EVENT, href);
      }
    };
    let clearAnimate = null;
    const scrollToAnchor = (href) => {
      if (!containerEl.value)
        return;
      const target = getElement(href);
      if (!target)
        return;
      if (clearAnimate)
        clearAnimate();
      isScrolling = true;
      const scrollEle = getScrollElement(target, containerEl.value);
      const distance = getOffsetTopDistance(target, scrollEle);
      const max = scrollEle.scrollHeight - scrollEle.clientHeight;
      const to = Math.min(distance - props.offset, max);
      clearAnimate = animateScrollTo(containerEl.value, currentScrollTop, to, props.duration, () => {
        setTimeout(() => {
          isScrolling = false;
        }, 20);
      });
    };
    const scrollTo = (href) => {
      if (href) {
        setCurrentAnchor(href);
        scrollToAnchor(href);
      }
    };
    const handleClick = (e, href) => {
      emit("click", e, href);
      scrollTo(href);
    };
    const handleScroll = throttleByRaf(() => {
      if (containerEl.value) {
        currentScrollTop = getScrollTop(containerEl.value);
      }
      const currentHref = getCurrentHref();
      if (isScrolling || isUndefined(currentHref))
        return;
      setCurrentAnchor(currentHref);
    });
    const getCurrentHref = () => {
      if (!containerEl.value)
        return;
      const scrollTop = getScrollTop(containerEl.value);
      const anchorTopList = [];
      for (const href of Object.keys(links)) {
        const target = getElement(href);
        if (!target)
          continue;
        const scrollEle = getScrollElement(target, containerEl.value);
        const distance = getOffsetTopDistance(target, scrollEle);
        anchorTopList.push({
          top: distance - props.offset - props.bound,
          href
        });
      }
      anchorTopList.sort((prev, next) => prev.top - next.top);
      for (let i = 0; i < anchorTopList.length; i++) {
        const item = anchorTopList[i];
        const next = anchorTopList[i + 1];
        if (i === 0 && scrollTop === 0) {
          return props.selectScrollTop ? item.href : "";
        }
        if (item.top <= scrollTop && (!next || next.top > scrollTop)) {
          return item.href;
        }
      }
    };
    const getContainer = () => {
      const el = getElement(props.container);
      if (!el || isWindow(el)) {
        containerEl.value = window;
      } else {
        containerEl.value = el;
      }
    };
    useEventListener(containerEl, "scroll", handleScroll);
    const updateMarkerStyle = () => {
      nextTick(() => {
        if (!anchorRef.value || !markerRef.value || !currentAnchor.value) {
          markerStyle.value = {};
          return;
        }
        const currentLinkEl = links[currentAnchor.value];
        if (!currentLinkEl) {
          markerStyle.value = {};
          return;
        }
        const anchorRect = anchorRef.value.getBoundingClientRect();
        const markerRect = markerRef.value.getBoundingClientRect();
        const linkRect = currentLinkEl.getBoundingClientRect();
        if (props.direction === "horizontal") {
          const left = linkRect.left - anchorRect.left;
          markerStyle.value = {
            left: `${left}px`,
            width: `${linkRect.width}px`,
            opacity: 1
          };
        } else {
          const top = linkRect.top - anchorRect.top + (linkRect.height - markerRect.height) / 2;
          markerStyle.value = {
            top: `${top}px`,
            opacity: 1
          };
        }
      });
    };
    watch(currentAnchor, updateMarkerStyle);
    watch(() => {
      var _a;
      return (_a = slots.default) == null ? void 0 : _a.call(slots);
    }, updateMarkerStyle);
    onMounted(() => {
      getContainer();
      const hash = decodeURIComponent(window.location.hash);
      const target = getElement(hash);
      if (target) {
        scrollTo(hash);
      } else {
        handleScroll();
      }
    });
    watch(() => props.container, () => {
      getContainer();
    });
    provide(anchorKey, {
      ns,
      direction: props.direction,
      currentAnchor,
      addLink,
      removeLink,
      handleClick
    });
    expose({
      scrollTo
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "anchorRef",
        ref: anchorRef,
        class: normalizeClass(unref(cls))
      }, [
        _ctx.marker ? (openBlock(), createElementBlock("div", {
          key: 0,
          ref_key: "markerRef",
          ref: markerRef,
          class: normalizeClass(unref(ns).e("marker")),
          style: normalizeStyle(markerStyle.value)
        }, null, 6)) : createCommentVNode("v-if", true),
        createElementVNode("div", {
          class: normalizeClass(unref(ns).e("list"))
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 2)
      ], 2);
    };
  }
});
var Anchor = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__file", "anchor.vue"]]);

const anchorLinkProps = buildProps({
  title: String,
  href: String
});

const __default__ = defineComponent({
  name: "ElAnchorLink"
});
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: anchorLinkProps,
  setup(__props) {
    const props = __props;
    const linkRef = ref(null);
    const {
      ns,
      direction,
      currentAnchor,
      addLink,
      removeLink,
      handleClick: contextHandleClick
    } = inject(anchorKey);
    const cls = computed(() => [
      ns.e("link"),
      ns.is("active", currentAnchor.value === props.href)
    ]);
    const handleClick = (e) => {
      contextHandleClick(e, props.href);
    };
    watch(() => props.href, (val, oldVal) => {
      nextTick(() => {
        if (oldVal)
          removeLink(oldVal);
        if (val) {
          addLink({
            href: val,
            el: linkRef.value
          });
        }
      });
    });
    onMounted(() => {
      const { href } = props;
      if (href) {
        addLink({
          href,
          el: linkRef.value
        });
      }
    });
    onBeforeUnmount(() => {
      const { href } = props;
      if (href) {
        removeLink(href);
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(unref(ns).e("item"))
      }, [
        createElementVNode("a", {
          ref_key: "linkRef",
          ref: linkRef,
          class: normalizeClass(unref(cls)),
          href: _ctx.href,
          onClick: handleClick
        }, [
          renderSlot(_ctx.$slots, "default", {}, () => [
            createTextVNode(toDisplayString(_ctx.title), 1)
          ])
        ], 10, ["href"]),
        _ctx.$slots["sub-link"] && unref(direction) === "vertical" ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: normalizeClass(unref(ns).e("list"))
        }, [
          renderSlot(_ctx.$slots, "sub-link")
        ], 2)) : createCommentVNode("v-if", true)
      ], 2);
    };
  }
});
var AnchorLink = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "anchor-link.vue"]]);

const ElAnchor = withInstall(Anchor, {
  AnchorLink
});
const ElAnchorLink = withNoopInstall(AnchorLink);

function usePCAData(params) {
  const loading = ref(false);
  const myProps = ref(params);
  const storageKey = computed(() => `vc-pca-picker-${myProps.value?.source}`);
  const pcaData = shallowRef([]);
  const keyword = ref("");
  const lastKeyword = ref("");
  const loadFailed = ref(false);
  const setProps = (data) => {
    myProps.value = data;
  };
  const fetchData = async (pcaBaseUrl, crosProxy) => {
    const storageData = storage.get(storageKey.value);
    if (storageData && storageData.length) {
      pcaData.value = storageData;
      return pcaData.value;
    }
    loading.value = true;
    loadFailed.value = false;
    try {
      const sourceUrl = crosProxy ? `${crosProxy}${encodeURIComponent(`${pcaBaseUrl}/${myProps.value.source}.json`)}` : `${pcaBaseUrl}/${myProps.value.source}.json`;
      const res = await fetch(sourceUrl);
      const data = await res.json();
      storage.set(storageKey.value, data);
      pcaData.value = data;
      return data;
    } catch (error) {
      console.error(error);
      loadFailed.value = true;
      return [];
    } finally {
      loading.value = false;
    }
  };
  const availableData = computed(() => {
    if (!myProps.value) {
      return [];
    }
    if (!myProps.value.excludeIds || myProps.value.excludeIds.length === 0) {
      return pcaData.value || [];
    }
    if (myProps.value.type === "P") {
      return pcaData.value?.filter((i) => !myProps.value.excludeIds?.includes(i.id)) || [];
    }
    if (myProps.value.type === "C") {
      const tempData = pcaData.value?.filter((i) => !myProps.value.excludeIds?.includes(i.id)) || [];
      tempData.forEach((i) => {
        i.childs = i.childs?.filter((j) => !myProps.value.excludeIds?.includes(j.id)) || [];
      });
      return tempData;
    }
    if (myProps.value.type === "PC") {
      const tempData = pcaData.value?.filter((i) => !myProps.value.excludeIds?.includes(i.id)) || [];
      tempData.forEach((i) => {
        i.childs = i.childs?.filter((j) => !myProps.value.excludeIds?.includes(j.id)) || [];
        i.childs.forEach((k) => {
          delete k.childs;
        });
      });
      return tempData;
    }
    if (myProps.value.type === "PCA") {
      const tempData = pcaData.value?.filter((i) => !myProps.value.excludeIds?.includes(i.id)) || [];
      tempData.forEach((i) => {
        i.childs = i.childs?.filter((j) => !myProps.value.excludeIds?.includes(j.id)) || [];
        i.childs.forEach((k) => {
          k.childs = k.childs?.filter((l) => !myProps.value.excludeIds?.includes(l.id)) || [];
        });
      });
      return tempData;
    }
    return [];
  });
  const flatData = computed(() => {
    if (!myProps.value) {
      return [];
    }
    let tempData = [];
    if (myProps.value.type === "P") {
      tempData = availableData.value;
    }
    if (myProps.value.type === "C") {
      tempData = flatMap(availableData.value, (i) => i.childs || []);
    }
    if (myProps.value.type === "PCA" || myProps.value.type === "PC") {
      tempData = flatMapDeep(availableData.value, function traverse(node) {
        if (!node.childs || node.childs.length === 0) {
          return [node];
        }
        return node.childs.map(traverse);
      });
    }
    return tempData;
  });
  const fpyGroup = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"];
  const fpyGroupData = computed(() => {
    if (myProps.value.type === "C") {
      return fpyGroup.map((i) => ({
        label: i,
        childs: flatData.value.filter((j) => j.fpy && i.includes(j.fpy)) || []
      }));
    }
    return [];
  });
  const getValueData = (values) => flatData.value.filter((i) => (Array.isArray(values) ? values : []).includes(i.id)) || [];
  const optionData = computed(() => {
    if (!myProps.value || !flatData.value || flatData.value.length === 0) {
      return [];
    }
    if (myProps.value.type === "PCA" || myProps.value.type === "PC") {
      return availableData.value;
    }
    return flatData.value;
  });
  const filterData = computed(() => {
    if (keyword.value) {
      const result = flatData.value.filter((i) => i.n.includes(keyword.value) || i.fn?.includes(keyword.value) || i.py?.includes(keyword.value));
      return result.slice(0, 48);
    }
    if (lastKeyword.value) {
      const result = flatData.value.filter((i) => i.n.includes(lastKeyword.value) || i.fn?.includes(lastKeyword.value) || i.py?.includes(lastKeyword.value));
      return result.slice(0, 48);
    }
    return [];
  });
  const hasHot = computed(() => Array.isArray(myProps.value?.hotIds) && myProps.value?.hotIds.length > 0);
  const hotData = computed(() => {
    if (!myProps.value?.hotIds || myProps.value?.hotIds.length === 0) {
      return [];
    }
    return flatData.value?.filter((i) => myProps.value?.hotIds?.includes(i.id)) || [];
  });
  const historyStorageKey = `vc-pca-history-${myProps.value?.type.toLowerCase()}`;
  const historyIds = useStorage(myProps.value?.historyStorageKey || historyStorageKey, []);
  const historyData = computed(() => {
    if (!myProps.value.history || !historyIds.value || historyIds.value.length === 0) {
      return [];
    }
    const data = [];
    historyIds.value.forEach((id) => {
      const item = flatData.value?.find((i) => i.id === id);
      item && data.push(item);
    });
    return data;
  });
  const appendToHistory = (id) => {
    if (!myProps.value.history) {
      return;
    }
    if (!myProps.value.historyMax) {
      return;
    }
    const ids = historyIds.value || [];
    const index = ids.indexOf(id);
    if (index > -1) {
      ids.splice(index, 1);
    }
    ids.unshift(id);
    if (ids.length > myProps.value.historyMax) {
      ids.splice(myProps.value.historyMax);
    }
    historyIds.value = ids;
  };
  return {
    fetchData,
    loading,
    loadFailed,
    filterData,
    flatData,
    keyword,
    lastKeyword,
    availableData,
    optionData,
    setProps,
    hasHot,
    hotData,
    historyData,
    appendToHistory,
    getValueData,
    fpyGroupData
  };
}
const KEY_NAME = Symbol("VcPCA");
const injectCommonState = () => useInject(KEY_NAME);

const _hoisted_1$5 = ["id"];
const _hoisted_2$3 = ["onClick"];
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
  __name: "elevator-item",
  props: {
    label: {},
    data: {}
  },
  setup(__props) {
    const { props: commonProps, itemClass, clickItem } = injectCommonState();
    const { nameKey } = toRefs(commonProps);
    return (_ctx, _cache) => {
      const _component_ElCol = ElCol;
      const _component_ElRow = ElRow;
      return openBlock(), createElementBlock(Fragment, null, [
        createElementVNode("div", {
          id: __props.label,
          class: normalizeClass(_ctx.$style.label)
        }, toDisplayString(__props.label), 11, _hoisted_1$5),
        createVNode(_component_ElRow, {
          gutter: 8,
          class: normalizeClass(["vc-pca-container", _ctx.$style["pca-container"]])
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (item) => {
              return openBlock(), createBlock(_component_ElCol, {
                key: item.id,
                span: 4
              }, {
                default: withCtx(() => [
                  createElementVNode("div", {
                    class: normalizeClass(unref(itemClass)(item)),
                    onClick: ($event) => unref(clickItem)(item)
                  }, toDisplayString(item[unref(nameKey)]), 11, _hoisted_2$3)
                ]),
                _: 2
              }, 1024);
            }), 128))
          ]),
          _: 1
        }, 8, ["class"])
      ], 64);
    };
  }
});

/* unplugin-vue-components disabled */const label = "_label_1xb4h_1";
const style0$2 = {
	label: label,
	"pca-container": "_pca-container_1xb4h_5"
};

const cssModules$2 = {
  "$style": style0$2
};
const ElevatorItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["__cssModules", cssModules$2]]);

const _hoisted_1$4 = { key: 0 };
const _hoisted_2$2 = { key: 1 };
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
  __name: "c",
  setup(__props) {
    const { props: commonProps, fpyGroupData, flatData, popoverVisible, hasHot, hotData, historyData } = injectCommonState();
    const { history, historyText, hotText } = toRefs(commonProps);
    const wrapperRef = useTemplateRef("wrapperRef");
    const anchorRef = useTemplateRef("anchorRef");
    watch(fpyGroupData, () => {
      const tagsA = wrapperRef.value?.getElementsByTagName("a");
      if (!tagsA) {
        return;
      }
      const firstHref = tagsA[0].hash;
      for (let i = 0; i < tagsA.length; i++) {
        tagsA[i].setAttribute("href", "javascript:void(0)");
      }
      anchorRef.value?.scrollTo(firstHref);
    });
    watch(popoverVisible, () => {
      if (!popoverVisible.value) {
        return;
      }
      if (!commonProps.modelValue || Array.isArray(commonProps.modelValue) && commonProps.modelValue.length === 0) {
        return;
      }
      let firstItem;
      if (commonProps.multiple && Array.isArray(commonProps.modelValue)) {
        firstItem = flatData.value.find((item) => commonProps.modelValue.includes(item.id));
      } else {
        firstItem = flatData.value.find((item) => item.id === commonProps.modelValue);
      }
      if (firstItem) {
        setTimeout(() => anchorRef.value?.scrollTo(`#${firstItem?.fpy}`), 0);
      }
    });
    return (_ctx, _cache) => {
      const _component_ElAnchorLink = ElAnchorLink;
      const _component_ElAnchor = ElAnchor;
      return openBlock(), createElementBlock("div", {
        ref_key: "wrapperRef",
        ref: wrapperRef,
        class: "vc-pca-wrapper"
      }, [
        createElementVNode("div", {
          class: normalizeClass(_ctx.$style.elevator)
        }, [
          createVNode(_component_ElAnchor, {
            ref_key: "anchorRef",
            ref: anchorRef,
            "select-scroll-top": "",
            container: unref(wrapperRef),
            bound: 40
          }, {
            default: withCtx(() => [
              unref(history) && unref(historyData).length ? (openBlock(), createBlock(_component_ElAnchorLink, {
                key: 0,
                href: `#${unref(historyText)}`
              }, {
                default: withCtx(() => [..._cache[0] || (_cache[0] = [
                  createTextVNode("历史", -1)
                ])]),
                _: 1
              }, 8, ["href"])) : createCommentVNode("", true),
              unref(hasHot) ? (openBlock(), createBlock(_component_ElAnchorLink, {
                key: 1,
                href: `#${unref(hotText)}`
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(unref(hotText)), 1)
                ]),
                _: 1
              }, 8, ["href"])) : createCommentVNode("", true),
              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(fpyGroupData), (group) => {
                return openBlock(), createBlock(_component_ElAnchorLink, {
                  key: group.label,
                  href: `#${group.label}`
                }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(group.label), 1)
                  ]),
                  _: 2
                }, 1032, ["href"]);
              }), 128))
            ]),
            _: 1
          }, 8, ["container"])
        ], 2),
        unref(history) && unref(historyData).length ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
          createVNode(ElevatorItem, {
            label: unref(historyText),
            data: unref(historyData)
          }, null, 8, ["label", "data"])
        ])) : createCommentVNode("", true),
        unref(hasHot) ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
          createVNode(ElevatorItem, {
            label: unref(hotText),
            data: unref(hotData)
          }, null, 8, ["label", "data"])
        ])) : createCommentVNode("", true),
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(fpyGroupData), (group) => {
          return openBlock(), createElementBlock("div", {
            key: group.label
          }, [
            createVNode(ElevatorItem, {
              label: group.label,
              data: group.childs
            }, null, 8, ["label", "data"])
          ]);
        }), 128))
      ], 512);
    };
  }
});

/* unplugin-vue-components disabled */const elevator = "_elevator_1cwqs_1";
const style0$1 = {
	elevator: elevator
};

const cssModules$1 = {
  "$style": style0$1
};
const CPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__cssModules", cssModules$1]]);

const _hoisted_1$3 = { class: "vc-pca-wrapper" };
const _hoisted_2$1 = ["onClick"];
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
  __name: "filter",
  setup(__props) {
    const { props: commonProps, filterData, itemClass, clickItem, keyword, lastKeyword, updatePopper } = injectCommonState();
    const { nameKey } = toRefs(commonProps);
    onMounted(() => updatePopper());
    return (_ctx, _cache) => {
      const _component_ElText = ElText;
      const _component_ElDivider = ElDivider;
      const _component_ElCol = ElCol;
      const _component_ElRow = ElRow;
      return openBlock(), createElementBlock("div", _hoisted_1$3, [
        createVNode(_component_ElDivider, { "content-position": "center" }, {
          default: withCtx(() => [
            createVNode(_component_ElText, null, {
              default: withCtx(() => [..._cache[0] || (_cache[0] = [
                createTextVNode("搜索 ", -1)
              ])]),
              _: 1
            }),
            createVNode(_component_ElText, { type: "primary" }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(unref(keyword) || unref(lastKeyword)), 1)
              ]),
              _: 1
            })
          ]),
          _: 1
        }),
        createVNode(_component_ElRow, {
          gutter: 8,
          class: "vc-pca-container"
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filterData), (item) => {
              return openBlock(), createBlock(_component_ElCol, {
                key: item.id,
                span: 4
              }, {
                default: withCtx(() => [
                  createElementVNode("div", {
                    class: normalizeClass(unref(itemClass)(item)),
                    onClick: ($event) => unref(clickItem)(item)
                  }, toDisplayString(item[unref(nameKey)]), 11, _hoisted_2$1)
                ]),
                _: 2
              }, 1024);
            }), 128))
          ]),
          _: 1
        })
      ]);
    };
  }
});

const _hoisted_1$2 = ["onClick"];
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
  __name: "history",
  setup(__props) {
    const { props: commonProps, historyData, itemClass, clickItem } = injectCommonState();
    const { nameKey, history, historyText } = toRefs(commonProps);
    return (_ctx, _cache) => {
      const _component_ElDivider = ElDivider;
      const _component_ElCol = ElCol;
      const _component_ElRow = ElRow;
      return openBlock(), createElementBlock(Fragment, null, [
        unref(history) && unref(historyData).length ? (openBlock(), createBlock(_component_ElDivider, {
          key: 0,
          "content-position": "left"
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(unref(historyText)), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true),
        unref(history) && unref(historyData).length ? (openBlock(), createBlock(_component_ElRow, {
          key: 1,
          gutter: 8,
          class: "vc-pca-container"
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(historyData), (item) => {
              return openBlock(), createBlock(_component_ElCol, {
                key: item.id,
                span: 4
              }, {
                default: withCtx(() => [
                  createElementVNode("div", {
                    class: normalizeClass(unref(itemClass)(item, true)),
                    onClick: ($event) => unref(clickItem)(item)
                  }, toDisplayString(item[unref(nameKey)]), 11, _hoisted_1$2)
                ]),
                _: 2
              }, 1024);
            }), 128))
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 64);
    };
  }
});

const _hoisted_1$1 = ["onClick"];
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
  __name: "hot",
  setup(__props) {
    const { props: commonProps, itemClass, hasHot, hotData, clickItem } = injectCommonState();
    return (_ctx, _cache) => {
      const _component_ElDivider = ElDivider;
      const _component_ElCol = ElCol;
      const _component_ElRow = ElRow;
      return openBlock(), createElementBlock(Fragment, null, [
        unref(hasHot) ? (openBlock(), createBlock(_component_ElDivider, {
          key: 0,
          "content-position": "left"
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(unref(commonProps).hotText), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true),
        unref(hasHot) ? (openBlock(), createBlock(_component_ElRow, {
          key: 1,
          gutter: 8,
          class: "vc-pca-container"
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(hotData), (item) => {
              return openBlock(), createBlock(_component_ElCol, {
                key: item.id,
                span: 4
              }, {
                default: withCtx(() => [
                  createElementVNode("div", {
                    class: normalizeClass(unref(itemClass)(item, true)),
                    onClick: ($event) => unref(clickItem)(item)
                  }, toDisplayString(item[unref(commonProps).nameKey]), 11, _hoisted_1$1)
                ]),
                _: 2
              }, 1024);
            }), 128))
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 64);
    };
  }
});

const _hoisted_1 = { class: "vc-pca-wrapper" };
const _hoisted_2 = ["onClick"];
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  __name: "p",
  setup(__props) {
    const { props: commonProps, availableData, itemClass, clickItem } = injectCommonState();
    const { nameKey } = commonProps;
    return (_ctx, _cache) => {
      const _component_ElDivider = ElDivider;
      const _component_ElCol = ElCol;
      const _component_ElRow = ElRow;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_sfc_main$4),
        createVNode(_sfc_main$3),
        createVNode(_component_ElDivider, { "content-position": "left" }, {
          default: withCtx(() => [..._cache[0] || (_cache[0] = [
            createTextVNode("全部", -1)
          ])]),
          _: 1
        }),
        createVNode(_component_ElRow, {
          gutter: 8,
          class: "vc-pca-container"
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(availableData), (item) => {
              return openBlock(), createBlock(_component_ElCol, {
                key: item.id,
                span: 4
              }, {
                default: withCtx(() => [
                  createElementVNode("div", {
                    class: normalizeClass(unref(itemClass)(item)),
                    onClick: ($event) => unref(clickItem)(item)
                  }, toDisplayString(item[unref(nameKey)]), 11, _hoisted_2)
                ]),
                _: 2
              }, 1024);
            }), 128))
          ]),
          _: 1
        })
      ]);
    };
  }
});

const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "pca",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { props: commonProps, optionData, updatePopper, togglePopoverVisible, clickItems } = injectCommonState();
    const { nameKey, multiple, props: cascaderPropsFromCommon } = toRefs(commonProps);
    const cascaderProps = computed(() => ({
      ...cascaderPropsFromCommon.value,
      label: nameKey.value,
      value: "id",
      children: "childs",
      multiple: multiple.value
    }));
    const myValue = useVModel(props, "modelValue", emits);
    function handleChange(value, node) {
      if (node && node.length) {
        const item = node.map((n) => n.data);
        clickItems(item);
      }
    }
    onMounted(() => updatePopper());
    return (_ctx, _cache) => {
      return openBlock(), createBlock(PopoverCascader, mergeProps({
        modelValue: unref(myValue),
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(myValue) ? myValue.value = $event : null),
        options: unref(optionData),
        props: unref(cascaderProps)
      }, _ctx.$attrs, {
        multiple: unref(multiple),
        onExpandChange: unref(updatePopper),
        onChoiced: _cache[1] || (_cache[1] = ($event) => unref(togglePopoverVisible)(false)),
        onChange: handleChange
      }), null, 16, ["modelValue", "options", "props", "multiple", "onExpandChange"]);
    };
  }
});

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "pca-picker",
  props: {
    source: {},
    type: {},
    hotIds: {},
    hotText: { default: "热门" },
    history: { type: Boolean },
    historyText: { default: "历史选择" },
    historyMax: { default: 6 },
    historyStorageKey: {},
    excludeIds: { default: () => [71, 81, 82] },
    nameKey: { default: "n" },
    modelValue: {},
    disabled: { type: Boolean, default: false },
    multiple: { type: Boolean },
    placeholder: { default: "请选择" },
    loadingText: { default: "加载数据源中..." },
    loadFailedText: { default: "数据源加载失败" },
    activeMark: { type: Boolean, default: true },
    syncActive: { type: Boolean, default: false },
    limit: {},
    props: {}
  },
  emits: ["update:modelValue", "change", "limit"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const myValue = useVModel(props, "modelValue", emits);
    const { pcaBaseUrl, crosProxy } = injectConfig();
    const [popoverVisible, togglePopoverVisible] = useToggle();
    const $style = useCssModule();
    const pcaFetchData = usePCAData(props);
    const { loading, loadFailed, fetchData, setProps, keyword, lastKeyword, optionData, appendToHistory, getValueData } = pcaFetchData;
    const filterManualVisible = ref(false);
    const isTreeType = computed(() => ["PCA", "PC"].includes(props.type));
    const myPlaceholder = computed(() => loadFailed.value ? props.loadFailedText : loading.value ? props.loadingText : props.placeholder);
    const popoverRef = useTemplateRef("popoverRef");
    function updatePopper() {
      return nextTick(() => {
        popoverRef.value.popperRef.popperInstanceRef?.update();
      });
    }
    const cascaderProps = computed(() => ({
      value: "id",
      label: props.nameKey,
      children: isTreeType.value ? "childs" : "undefined",
      multiple: props.multiple,
      emitPath: false
    }));
    const containerRef = useTemplateRef("containerRef");
    onClickOutside(containerRef, (event) => {
      let target = event.target;
      let result = false;
      do {
        result = target.classList ? target.classList.contains($style.cascader) : false;
        target = target.parentNode;
      } while (result === false && target !== null && target.nodeName !== "BODY");
      if (!result) {
        if (keyword.value) {
          filterManualVisible.value = true;
          lastKeyword.value = keyword.value;
          setTimeout(() => {
            filterManualVisible.value = false;
            lastKeyword.value = "";
          }, 500);
        }
        togglePopoverVisible(false);
      }
    });
    const selectClassName = computed(() => ({ [$style["is-active"]]: popoverVisible.value }));
    const handleSelectClick = useThrottleFn(() => !loading.value && !props.disabled && togglePopoverVisible(), 300);
    function handleKeyup(event) {
      keyword.value = event.target.value;
    }
    function handleChange(item) {
      const changeData = Array.isArray(item) ? item : item[0];
      emits("change", changeData);
      if (!props.multiple) {
        togglePopoverVisible(false);
      }
      setTimeout(() => keyword.value = "", 300);
    }
    function clear() {
      togglePopoverVisible(false);
      emits("change", void 0);
    }
    useProvide(KEY_NAME, {
      props,
      ...pcaFetchData,
      popoverVisible,
      togglePopoverVisible,
      itemClass: (item, isHistoryOrHot) => {
        const isActive = myValue.value === item.id || Array.isArray(myValue.value) && myValue.value.includes(item.id);
        return {
          "vc-pca-item": true,
          "active": isActive && (!isHistoryOrHot || props.syncActive),
          "active-mark": isActive && props.activeMark
        };
      },
      clickItem: (item) => {
        if (props.multiple) {
          const val = Array.isArray(myValue.value) ? [...myValue.value] : [];
          const index = val.indexOf(item.id);
          if (index > -1) {
            val.splice(index, 1);
          } else {
            if (props.limit && !isTreeType.value && val.length >= props.limit) {
              emits("limit", props.limit, item);
              return;
            }
            appendToHistory(item.id);
            val.push(item.id);
          }
          myValue.value = val;
          handleChange(getValueData(val));
        } else {
          appendToHistory(item.id);
          myValue.value = item.id;
          handleChange(item);
        }
      },
      // 级联选择时的多选使用这个函数，myValue更新由于使用了v-model，所以不需要手动更新
      // 这里仅执行@change事件
      clickItems: (items) => {
        handleChange(items);
      },
      updatePopper
    });
    const propsWatch = watch(() => props, (newProps) => {
      setProps(newProps);
    }, { deep: true });
    const popo