yc-pro-components 0.0.56 → 0.0.57

package/lib/components/yc-plus-page/src/header-filter-cell.vue2.js

@@ -8,12 +8,14 @@ var ElementPlusIconsVue = require('@element-plus/icons-vue');
 var constants = require('./constants.js');
 var index = require('../../utils/index.js');
 var index$1 = require('../../yc-svg-icon/src/index.vue.js');
+var useGetOptions = require('../../../hooks/useGetOptions.js');
+var filterUtils = require('./filter-utils.js');
+var filterStrategies = require('./filter-strategies.js');
 var useYcConfig = require('../../yc-config-provider/src/useYcConfig.js');
 
 const _hoisted_1 = { class: "yc-header-filter-cell__label-text" };
 const _hoisted_2 = { class: "yc-header-filter-cell__label-text" };
-const _hoisted_3 = { style: { cursor: "pointer", display: "inline-flex", alignItems: "center" } };
-const _hoisted_4 = {
+const _hoisted_3 = {
   class: "yc-header-filter-cell__content",
   style: {
     display: "flex",
@@ -23,10 +25,13 @@ const _hoisted_4 = {
     gap: "4px"
   }
 };
-const _hoisted_5 = { class: "yc-header-filter-cell__operators" };
-const _hoisted_6 = ["onClick"];
-const _hoisted_7 = { key: 0 };
-const _hoisted_8 = {
+const _hoisted_4 = {
+  key: 0,
+  class: "yc-header-filter-cell__operators"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = {
   class: "yc-header-filter-cell__actions",
   style: {
     display: "flex",
@@ -46,6 +51,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     filters: { default: () => [] },
     orderBy: { default: () => [] },
     disableFilter: { type: Boolean, default: false },
+    fieldConfig: {},
     referenceRenderer: { type: Function, default: void 0 }
   },
   emits: ["confirm", "reset", "sortChange"],
@@ -77,6 +83,12 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return String(((_a = props.column) == null ? void 0 : _a.prop) || "");
     });
+    const getHeaderFilterObject = () => {
+      var _a;
+      const hf = (_a = props.column) == null ? void 0 : _a.headerFilter;
+      if (hf && typeof hf === "object") return hf;
+      return {};
+    };
     const isActive = vue.computed(() => {
       var _a, _b;
       const field = fieldRef.value;
@@ -94,35 +106,48 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return (_a = props.orderBy) == null ? void 0 : _a.some((i) => i.field === fieldRef.value && i.direction === "desc");
       }
     );
-    const onDocPointerOrClick = (e) => {
+    const onDocPointerDown = (e) => {
+      var _a;
       if (!popVisible.value) return;
       const target = e.target;
-      const wrapper = wrapperElRef.value;
-      if (target && ((wrapper == null ? void 0 : wrapper.contains(target)) || target.closest(".yc-header-filter-pop"))) return;
+      if (!target) return;
+      if ((_a = wrapperElRef.value) == null ? void 0 : _a.contains(target)) return;
+      if (target.closest(".yc-header-filter-pop")) return;
+      const popoverTrigger = target.closest("[aria-describedby]");
+      if (popoverTrigger) return;
+      if (target.closest(`.${filterUtils.FILTER_INNER_DROPDOWN_CLASS}`)) return;
       popVisible.value = false;
     };
     vue.onMounted(() => {
-      window.addEventListener("pointerdown", onDocPointerOrClick, true);
-      window.addEventListener("click", onDocPointerOrClick, true);
+      window.addEventListener("pointerdown", onDocPointerDown, true);
     });
     vue.onBeforeUnmount(() => {
-      window.removeEventListener("pointerdown", onDocPointerOrClick, true);
-      window.removeEventListener("click", onDocPointerOrClick, true);
+      window.removeEventListener("pointerdown", onDocPointerDown, true);
     });
     const handleSelect = (op) => {
       state.selectedOp = op.code;
     };
     const handleReset = () => {
       state.inputVal = "";
-      emit("reset", { column: props.column, op: state.selectedOp });
+      const payload = { column: props.column, op: state.selectedOp };
+      const customConfig = getHeaderFilterObject();
+      if (customConfig.onReset) {
+        customConfig.onReset(payload);
+      }
+      emit("reset", payload);
       popVisible.value = false;
     };
     const handleConfirm = () => {
-      emit("confirm", {
+      const payload = {
         column: props.column,
         op: state.selectedOp,
         value: state.inputVal
-      });
+      };
+      const customConfig = getHeaderFilterObject();
+      if (customConfig.onConfirm) {
+        customConfig.onConfirm(payload);
+      }
+      emit("confirm", payload);
       popVisible.value = false;
     };
     const cycleSort = () => {
@@ -154,51 +179,95 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return (_a = props.column) == null ? void 0 : _a.tooltip;
     });
-    const renderValueField = () => {
-      var _a, _b, _c, _d, _e;
-      if (!needValueInput.value) return null;
+    const optionsSourceProps = vue.computed(() => {
+      const config = getHeaderFilterObject();
+      const col = props.column;
+      return {
+        options: config.options !== void 0 ? config.options : col.options,
+        autoDict: col.autoDict,
+        optionsMap: col.optionsMap,
+        prop: col.prop,
+        valueType: col.valueType
+      };
+    });
+    const { customOptions: resolvedOptions } = useGetOptions.useGetOptions(optionsSourceProps);
+    const fieldPropsForFilter = vue.computed(
+      () => {
+        var _a;
+        return ((_a = props.column) == null ? void 0 : _a.fieldProps) || {};
+      }
+    );
+    const resolvedInteractionType = vue.computed(() => {
+      var _a;
+      const customConfig = getHeaderFilterObject();
       const vt = String(((_a = props.column) == null ? void 0 : _a.valueType) || "").toLowerCase();
-      const fp = ((_b = props.column) == null ? void 0 : _b.fieldProps) || {};
-      if (vt === "time-picker") {
-        return vue.h(elementPlus.ElTimePicker, {
-          ...fp,
-          format: (_c = fp == null ? void 0 : fp.format) != null ? _c : "HH:mm:ss",
-          valueFormat: (_d = fp == null ? void 0 : fp.valueFormat) != null ? _d : "HH:mm:ss",
-          modelValue: state.inputVal,
-          "onUpdate:modelValue": (v) => state.inputVal = String(v != null ? v : ""),
-          style: "margin-top: 4px; width: 100%"
-        });
+      return filterStrategies.resolveInteractionType(customConfig.type, props.fieldConfig, vt);
+    });
+    const hideOperatorList = vue.computed(() => {
+      var _a;
+      const t = resolvedInteractionType.value;
+      const customConfig = getHeaderFilterObject();
+      const mult = (_a = customConfig.props) == null ? void 0 : _a.multiple;
+      if (t === "checkbox") return true;
+      if (t === "date-picker") return true;
+      if (t === "select" && mult) return true;
+      if (t === "tree-select" && mult) return true;
+      return false;
+    });
+    const popoverWidth = vue.computed(() => hideOperatorList.value ? 320 : 220);
+    vue.watch(popVisible, (visible) => {
+      var _a, _b;
+      if (!visible) return;
+      const t = resolvedInteractionType.value;
+      const customConfig = getHeaderFilterObject();
+      const fp = {
+        ...fieldPropsForFilter.value,
+        ...customConfig.props || {}
+      };
+      if (t === "date-picker" && filterUtils.isRangeType(fp.type)) {
+        if (state.selectedOp !== "between") state.selectedOp = "between";
+        if (!state.inputVal) {
+          const now = /* @__PURE__ */ new Date();
+          const y = now.getFullYear();
+          const m = String(now.getMonth() + 1).padStart(2, "0");
+          state.inputVal = `${y}-${m},${y}-${m}`;
+        }
+      } else if (t === "checkbox" || t === "select" && ((_a = customConfig.props) == null ? void 0 : _a.multiple) || t === "tree-select" && ((_b = customConfig.props) == null ? void 0 : _b.multiple)) {
+        if (state.selectedOp !== "in") state.selectedOp = "in";
       }
-      if (vt === "time-select") {
-        return vue.h(elementPlus.ElTimeSelect, {
-          ...fp,
-          modelValue: state.inputVal,
-          "onUpdate:modelValue": (v) => {
-            const raw = String(v != null ? v : "");
-            const nv = raw && /^\d{2}:\d{2}$/.test(raw) ? `${raw}:00` : raw;
-            state.inputVal = nv;
-          },
-          style: "margin-top: 4px; width: 100%"
+    });
+    const renderValueField = () => {
+      var _a;
+      if (!needValueInput.value) return null;
+      const customConfig = getHeaderFilterObject();
+      const customProps = customConfig.props || {};
+      if (customConfig.renderField && typeof customConfig.renderField === "function") {
+        return customConfig.renderField(state.inputVal, (v) => {
+          state.inputVal = Array.isArray(v) ? v.join(",") : String(v != null ? v : "");
         });
       }
-      if (vt === "date-picker") {
-        return vue.h(elementPlus.ElDatePicker, {
-          ...fp,
-          valueFormat: (_e = fp == null ? void 0 : fp.valueFormat) != null ? _e : "YYYY-MM-DD HH:mm:ss",
-          modelValue: state.inputVal,
-          "onUpdate:modelValue": (v) => {
-            const nv = Array.isArray(v) ? v.join(",") : String(v != null ? v : "");
-            state.inputVal = nv;
-          },
-          style: "margin-top: 4px; width: 100%"
+      const interactionType = resolvedInteractionType.value;
+      const fp = {
+        ...((_a = props.column) == null ? void 0 : _a.fieldProps) || {},
+        ...customProps
+      };
+      const strategy = interactionType ? filterStrategies.FILTER_COMPONENT_STRATEGIES[interactionType] : void 0;
+      if (strategy) {
+        const finalOptions = filterUtils.resolveFilterOptions(resolvedOptions.value, customConfig.options);
+        return strategy.render({
+          fp,
+          inputVal: state.inputVal,
+          setInputVal: (v) => state.inputVal = v,
+          options: finalOptions
         });
       }
       return vue.h(elementPlus.ElInput, {
+        ...fp,
         modelValue: state.inputVal,
         "onUpdate:modelValue": (v) => state.inputVal = v,
-        placeholder: "",
+        placeholder: fp.placeholder || "\u8BF7\u8F93\u5165",
         maxlength: 50,
-        style: "margin-top: 4px; width: 100%"
+        style: filterUtils.FILTER_FIELD_STYLE
       });
     };
     return (_ctx, _cache) => {
@@ -360,16 +429,18 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.createCommentVNode(" \u7B5B\u9009\u56FE\u6807\u548C\u5F39\u7A97 "),
           !_ctx.disableFilter ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElPopover), {
             key: 1,
+            visible: popVisible.value,
             trigger: "click",
             placement: "bottom-start",
-            width: 220,
-            visible: popVisible.value,
-            "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => popVisible.value = $event),
+            width: popoverWidth.value,
             "popper-class": "yc-header-filter-pop",
             "popper-style": { zIndex: 4e3 }
           }, {
             reference: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_3, [
+              vue.createElementVNode("span", {
+                style: { cursor: "pointer", display: "inline-flex", alignItems: "center" },
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => popVisible.value = !popVisible.value, ["stop"]))
+              }, [
                 vue.createVNode(vue.unref(index$1.default), {
                   src: filterIconUrl.value,
                   size: 14,
@@ -379,9 +450,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ])
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_4, [
-                vue.createCommentVNode(" \u64CD\u4F5C\u7B26\u5217\u8868 "),
-                vue.createElementVNode("div", _hoisted_5, [
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createCommentVNode(" \u64CD\u4F5C\u7B26\u5217\u8868\uFF08\u591A\u9009/\u65E5\u671F\u533A\u95F4\u7B49\u7531 hideOperatorList \u9690\u85CF\uFF0C\u9ED8\u8BA4 in / between\uFF09 "),
+                !hideOperatorList.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
                   (vue.openBlock(true), vue.createElementBlock(
                     vue.Fragment,
                     null,
@@ -408,17 +479,17 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           1
                           /* TEXT */
                         ),
-                        state.selectedOp === op.code ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, "\u2713")) : vue.createCommentVNode("v-if", true)
-                      ], 12, _hoisted_6);
+                        state.selectedOp === op.code ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, "\u2713")) : vue.createCommentVNode("v-if", true)
+                      ], 12, _hoisted_5);
                     }),
                     128
                     /* KEYED_FRAGMENT */
                   ))
-                ]),
+                ])) : vue.createCommentVNode("v-if", true),
                 vue.createCommentVNode(" \u503C\u8F93\u5165 "),
-                needValueInput.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderValueField), { key: 0 })) : vue.createCommentVNode("v-if", true),
+                needValueInput.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderValueField), { key: 1 })) : vue.createCommentVNode("v-if", true),
                 vue.createCommentVNode(" \u64CD\u4F5C\u6309\u94AE "),
-                vue.createElementVNode("div", _hoisted_8, [
+                vue.createElementVNode("div", _hoisted_7, [
                   vue.createVNode(vue.unref(elementPlus.ElButton), { onClick: handleReset }, {
                     default: vue.withCtx(() => [
                       vue.createTextVNode("\u91CD\u7F6E")
@@ -441,7 +512,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["visible"])) : vue.createCommentVNode("v-if", true)
+          }, 8, ["visible", "width"])) : vue.createCommentVNode("v-if", true)
         ],
         544
         /* NEED_HYDRATION, NEED_PATCH */

package/lib/components/yc-plus-page/src/index.vue.d.ts

@@ -2,7 +2,8 @@ import { Options } from 'sortablejs';
 import { LooseRequired } from '@vue/shared';
 import { Arrayable, EpPropMergeType } from 'element-plus/es/utils';
 import { TableProps, CardProps, RowProps, ColProps, FormItemRule, FormInstance, ElTooltipProps, FormItemProps, ProgressFn, CascaderNode, PopperEffect, InputAutoSize, AutocompleteProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputNumberProps, RadioGroupProps, RateProps, SelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TimeSelectProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps, TableColumnCtx, TableInstance, TableV2Instance } from 'element-plus';
-import { PlusFormSelfProps, ElementPlusFormProps, RecordType, PlusTableSelfProps, PlusPaginationProps, Mutable, PlusFormGroupRow, PlusFormItemProps, PlusRadioProps, PlusDatePickerProps, PlusInputTagProps, TableValueType, ActionBarProps, ColumnSetting, ButtonsCallBackParams, FormChangeCallBackParams, FilterTableHeaderEventType, TableFormRefRow, VirtualTableColumn } from 'packages/yc-components';
+import { RecordType, Mutable, TableValueType } from 'yc-pro-components';
+import { PlusFormSelfProps, ElementPlusFormProps, PlusTableSelfProps, PlusPaginationProps, PlusFormGroupRow, PlusFormItemProps, PlusRadioProps, PlusDatePickerProps, PlusInputTagProps, ActionBarProps, ColumnSetting, ButtonsCallBackParams, FormChangeCallBackParams, FilterTableHeaderEventType, TableFormRefRow, VirtualTableColumn } from 'packages/yc-components';
 import { RequestResponse, HeaderFilterConfig, HeaderFilterPayload, HeaderFilterResetPayload, HeaderFiltersState, OrderByItem, FieldCatalog } from './type';
 import { FieldValues, OmitTypes, CascaderProps, FormItemValueType, FieldValueType } from 'yc-pro-components/es/types/form';
 import { PlusSearchSelfProps } from 'yc-pro-components/es/components/search';

package/lib/components/yc-plus-page/src/index.vue.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index_vue_vue_type_script_setup_true_lang = require('./index.vue2.js');
 var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
 
-var YcPlusPageComponent = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-bc9aafd7"], ["__file", "index.vue"]]);
+var YcPlusPageComponent = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-f0c3f2a9"], ["__file", "index.vue"]]);
 
 exports.default = YcPlusPageComponent;

package/lib/components/yc-plus-page/src/index.vue2.js

@@ -127,11 +127,17 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         );
         return (fieldConfig == null ? void 0 : fieldConfig.nullable) !== false;
       }) : cols;
-      if (!isEnabled) return visibleCols;
+      if (!isEnabled) {
+        return visibleCols;
+      }
       return visibleCols.map((col) => {
         const colHideFilter = col.hideHeaderFilter === true;
-        const fieldFilterable = isFieldFilterable(col.prop);
-        if (colHideFilter || !fieldFilterable) {
+        const hasExplicitHeaderFilter = col.headerFilter && typeof col.headerFilter === "object" || col.headerFilter === true;
+        const fieldFilterable = hasExplicitHeaderFilter || isFieldFilterable(col.prop);
+        if (colHideFilter) {
+          return col;
+        }
+        if (!hasExplicitHeaderFilter && !fieldFilterable) {
           return col;
         }
         const operators = getOpsByProp(col.prop);
@@ -145,9 +151,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         } else if (typeof originalWidth === "string") {
           const numWidth = parseInt(originalWidth, 10);
           if (!isNaN(numWidth)) {
-            adjustedWidth = numWidth + EXTRA_WIDTH;
+            adjustedWidth = String(numWidth + EXTRA_WIDTH);
           }
         }
+        const propStr = String(col.prop || "");
+        const fieldConfig = catalog ? Object.values(catalog).find(
+          (val) => String((val == null ? void 0 : val.allowedField) || "") === propStr
+        ) : void 0;
         const userRenderHeader = col.renderHeader;
         return {
           ...col,
@@ -163,6 +173,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onConfirm: handleFilterConfirm,
               onReset: handleFilterReset,
               onSortChange: handleSortChange,
+              fieldConfig,
               // 如果用户定义了 renderHeader，传递给 referenceRenderer
               ...userRenderHeader && typeof userRenderHeader === "function" ? { referenceRenderer: () => userRenderHeader(label, col) } : {}
             });

package/lib/components/yc-plus-page/src/type.d.ts

@@ -68,6 +68,14 @@ export interface HeaderFilterConfig {
  * 列级别的表头筛选配置
  */
 export interface ColumnHeaderFilterConfig {
+    /** 筛选交互组件类型，若未配置则根据 column.valueType 自动推断 */
+    type?: 'input' | 'select' | 'date-picker' | 'time-picker' | 'time-select' | 'cascader' | 'tree-select' | 'checkbox';
+    /** 极度自定义的渲染函数接管（如自定义业务弹窗或滑动条等），通过回调更新组件抛出的 filter 值 */
+    renderField?: <T = any>(value: T, onChange: (val: T) => void) => any;
+    /** 传递给筛选渲染组件的 props，例如 { multiple: true } */
+    props?: Record<string, unknown>;
+    /** 如果想独立设置筛选组件的 options 数据源，支持传入数组或 Promise。未设置则回退取 column.options 或 autoDict */
+    options?: any[] | Promise<any[]> | ((column: any) => any[]);
     /** 自定义操作符列表 */
     operators?: OperatorOption[];
     /** 确认回调 */

package/lib/components/yc-plus-page/src/use-header-filter.js

@@ -14,11 +14,11 @@ function useHeaderFilter(options = {}) {
   const isEnabled = vue.computed(() => {
     const hideHeaderFilter = getHideHeaderFilter();
     const headerFilterConfig = getHeaderFilterConfig();
-    if (hideHeaderFilter === true) return false;
-    if (typeof headerFilterConfig === "boolean") return headerFilterConfig;
     if (headerFilterConfig && typeof headerFilterConfig === "object") {
       return headerFilterConfig.enabled !== false;
     }
+    if (typeof headerFilterConfig === "boolean") return headerFilterConfig;
+    if (hideHeaderFilter === true) return false;
     return false;
   });
   const operatorCatalogState = vue.computed(() => {
@@ -129,21 +129,34 @@ function useHeaderFilter(options = {}) {
     }
   };
   const getMergedQuery = (baseQuery) => {
+    const normalizeFilters = (filters) => {
+      return filters.map((f) => {
+        if (f.op === "in" && typeof f.value === "string" && f.value) {
+          const arr = f.value.split(",").filter(Boolean).map((s) => {
+            const n = Number(s);
+            return Number.isNaN(n) ? s : n;
+          });
+          return { ...f, value: arr };
+        }
+        return f;
+      });
+    };
     let mergedFilters = baseQuery.filters;
     if (headerFiltersState.filters.length > 0) {
+      const normalized = normalizeFilters(headerFiltersState.filters);
       const baseFilters = baseQuery.filters;
       if (baseFilters && typeof baseFilters === "object" && Array.isArray(baseFilters.filters)) {
         mergedFilters = {
           logic: baseFilters.logic || "and",
           filters: [
             ...baseFilters.filters,
-            ...headerFiltersState.filters
+            ...normalized
           ]
         };
       } else {
         mergedFilters = {
           logic: headerFiltersState.logic,
-          filters: [...headerFiltersState.filters]
+          filters: [...normalized]
         };
       }
     }

package/lib/components/yc-select-v2/src/index.vue2.js

@@ -38,7 +38,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     collapseTags: { type: Boolean, default: false },
     maxCollapseTags: { default: 1 },
     initialOptions: { default: () => [] },
-    allSelect: { type: Boolean, default: false }
+    allSelect: { type: Boolean, default: false },
+    popperClass: {}
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -368,6 +369,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         multiple: _ctx.multiple,
         "collapse-tags": _ctx.collapseTags,
         "max-collapse-tags": _ctx.maxCollapseTags,
+        "popper-class": _ctx.popperClass,
         onVisibleChange: handleVisibleChange,
         onChange: handleChange,
         onClear: handleClear,
@@ -392,7 +394,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["modelValue", "filterable", "remote", "reserve-keyword", "placeholder", "clearable", "disabled", "loading", "filter-method", "allow-create", "default-first-option", "multiple", "collapse-tags", "max-collapse-tags"])), [
+      }, 8, ["modelValue", "filterable", "remote", "reserve-keyword", "placeholder", "clearable", "disabled", "loading", "filter-method", "allow-create", "default-first-option", "multiple", "collapse-tags", "max-collapse-tags", "popper-class"])), [
         [_directive_load_more, handleLoadMore]
       ]);
     };

package/lib/components/yc-select-v2/src/type.d.ts

@@ -80,4 +80,6 @@ export interface YcSelectV2Props {
     initialOptions?: SelectOption[];
     /** 是否启用全选功能（仅多选时有效） */
     allSelect?: boolean;
+    /** 下拉弹层自定义类名，用于控制 z-index 等样式 */
+    popperClass?: string;
 }

package/lib/hooks/useGetOptions.js

@@ -31,8 +31,16 @@ const useGetOptions = (props) => {
   const options = vue.ref([]);
   const optionsIsReady = vue.ref(false);
   const injectedDictStore = vue.inject(dict.DictStoreInjectionKey, null);
-  const hasValidOptions = props.options && (!is.isArray(props.options) || props.options.length > 0);
-  if (hasValidOptions) {
+  const hasValidOptions = () => {
+    const o = props.options;
+    if (!o) return false;
+    if (vue.isRef(o)) return true;
+    if (is.isPromise(o)) return true;
+    if (is.isFunction(o)) return true;
+    if (is.isArray(o)) return o.length > 0;
+    return false;
+  };
+  if (hasValidOptions()) {
     handleOptions();
   } else if (props.autoDict) {
     handleAutoDict();
@@ -40,28 +48,43 @@ const useGetOptions = (props) => {
     options.value = [];
     optionsIsReady.value = true;
   }
+  function getOptionsResolvedSnapshot() {
+    const o = props.options;
+    if (!o) return [];
+    if (is.isPromise(o)) return [];
+    if (vue.isRef(o)) {
+      const val = o.value;
+      return val || [];
+    }
+    if (is.isFunction(o)) {
+      const result = o(props);
+      if (is.isPromise(result)) return [];
+      return result || [];
+    }
+    if (is.isArray(o)) return o;
+    if (vue.isReactive(o)) {
+      return o || [];
+    }
+    return [];
+  }
   function handleOptions() {
     if (!props.options) {
       options.value = [];
       optionsIsReady.value = true;
       return;
     }
-    if (vue.isRef(props.options) || vue.isReactive(props.options) || is.isArray(props.options)) {
-      vue.watch(
-        () => props.options,
-        (val) => {
-          const value = vue.isRef(val) ? val.value : val;
-          options.value = getOptionsByOptionsMap(value, props);
-          optionsIsReady.value = true;
-        },
-        {
-          immediate: true,
-          deep: true
-        }
-      );
-    } else if (is.isFunction(props.options)) {
-      const getValue = props.options;
-      const result = getValue(props);
+    if (is.isPromise(props.options)) {
+      props.options.then((value) => {
+        options.value = getOptionsByOptionsMap(value, props);
+        optionsIsReady.value = true;
+        throwError(options.value);
+      }).catch((err) => {
+        throw err;
+      });
+      return;
+    }
+    if (is.isFunction(props.options)) {
+      const result = props.options(props);
       if (is.isPromise(result)) {
         result.then((value) => {
           options.value = getOptionsByOptionsMap(value, props);
@@ -70,23 +93,22 @@ const useGetOptions = (props) => {
         }).catch((err) => {
           throw err;
         });
-      } else {
-        options.value = getOptionsByOptionsMap(result, props);
-        optionsIsReady.value = true;
+        return;
       }
-    } else if (is.isPromise(props.options)) {
-      const getValue = props.options;
-      getValue.then((value) => {
-        options.value = getOptionsByOptionsMap(value, props);
-        optionsIsReady.value = true;
-        throwError(options.value);
-      }).catch((err) => {
-        throw err;
-      });
-    } else {
-      optionsIsReady.value = true;
-      throwError(props.options);
     }
+    if (vue.isRef(props.options) || vue.isReactive(props.options) || is.isArray(props.options) || is.isFunction(props.options)) {
+      vue.watch(
+        () => getOptionsResolvedSnapshot(),
+        (val) => {
+          options.value = getOptionsByOptionsMap(val, props);
+          optionsIsReady.value = true;
+        },
+        { immediate: true, deep: true }
+      );
+      return;
+    }
+    optionsIsReady.value = true;
+    throwError(props.options);
   }
   function handleAutoDict() {
     if (is.isFunction(props.autoDict)) {

package/lib/hooks/usePlusFormReset.d.ts

@@ -1,7 +1,8 @@
 import { EpPropMergeType, EpPropFinalized } from 'element-plus/es/utils';
 import { LooseRequired } from '@vue/shared';
 import { FormInstance, ElTooltipProps, FormItemProps, ProgressFn, CascaderNode, PopperEffect, InputAutoSize, AutocompleteProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputNumberProps, RadioGroupProps, RateProps, SelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TimeSelectProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps, DrawerProps, DialogTransition, DialogBeforeCloseFn } from 'element-plus';
-import { PlusDialogProps, PlusFormProps, FieldValues, PlusColumn, PlusFormItemProps, RecordType, Mutable, PropsItemType, OmitTypes, CascaderProps, PlusRadioProps, PlusDatePickerProps, PlusInputTagProps, OptionsType, RenderTypes, TableValueType, FormItemValueType, FieldValueType, OptionsRow } from 'yc-components';
+import { FieldValues, PlusColumn, RecordType, Mutable, PropsItemType, OmitTypes, CascaderProps, OptionsType, RenderTypes, TableValueType, FormItemValueType, FieldValueType, OptionsRow } from 'yc-pro-components';
+import { PlusDialogProps, PlusFormProps, PlusFormItemProps, PlusRadioProps, PlusDatePickerProps, PlusInputTagProps } from 'packages/components';
 import { nextTick, Ref, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType, Slot, ComponentPublicInstance, ComponentOptionsBase, ComputedRef, ComponentOptionsMixin, DebuggerEvent, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, CSSProperties, Component, TransitionProps, ComputedOptions, MethodOptions } from 'vue';
 
 /**