@skyfox2000/webui 1.2.11 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.2.11",
+   "version": "1.3.0",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],
@@ -31,15 +31,15 @@
       "build:types": "vue-tsc --declaration --emitDeclarationOnly"
    },
    "peerDependencies": {
+      "@json2csv/plainjs": "^7.0.6",
       "@skyfox2000/fapi": "^1.1.19",
-      "@skyfox2000/microbase": "^1.2.1",
+      "@skyfox2000/microbase": "^1.2.2",
       "@vue-office/excel": "^1.7.14",
-      "@json2csv/plainjs": "^7.0.6",
-      "async-validator": "^4.2.5",
-      "exceljs": "^4.4.0",
       "ace-builds": "^1.42.0",
       "ant-design-vue": "^4.2.6",
+      "async-validator": "^4.2.5",
       "dayjs": "^1.11.13",
+      "exceljs": "^4.4.0",
       "pinia": "^2.3.0",
       "pinia-plugin-persistedstate": "^4.2.0",
       "vue": "^3.5.16",
@@ -49,21 +49,21 @@
       "vue3-ace-editor": "^2.2.4"
    },
    "devDependencies": {
-      "@types/node": "^22.15.30",
-      "@vitejs/plugin-vue": "^5.2.4",
-      "autoprefixer": "^10.4.21",
+      "@types/node": "^22.10.2",
+      "@vitejs/plugin-vue": "^5.2.1",
+      "autoprefixer": "^10.4.20",
       "esbuild": "^0.19.12",
-      "eslint": "^9.28.0",
+      "eslint": "^9.17.0",
       "eslint-config-prettier": "^9.1.0",
-      "eslint-plugin-prettier": "^5.4.1",
-      "eslint-plugin-vue": "^9.33.0",
-      "postcss": "^8.5.4",
-      "prettier": "^3.5.3",
-      "rollup": "^4.42.0",
+      "eslint-plugin-prettier": "^5.2.1",
+      "eslint-plugin-vue": "^9.32.0",
+      "postcss": "^8.4.49",
+      "prettier": "^3.4.2",
+      "rollup": "^4.29.1",
       "tailwindcss": "^3.4.17",
-      "typescript": "^5.8.3",
-      "vite": "^6.3.5",
+      "typescript": "^5.7.2",
+      "vite": "^6.2.3",
       "vite-plugin-dts": "^4.5.4",
-      "vue-tsc": "^2.2.10"
+      "vue-tsc": "^2.2.0"
    }
 }

package/src/components/content/form/formItem.vue

@@ -35,7 +35,7 @@ defineOptions({
 const attrs = useAttrs(); // 手动获取 $attrs
 
 const editorCtrl = inject(ProviderKeys.EditorControl, undefined) as EditorControl<AnyData> | undefined;
-const labelWidth = inject(ProviderKeys.LabelWidth, '85px');
+const labelWidth = inject(ProviderKeys.LabelWidth, '85px') ?? '85px';
 const errInfo = useFormItemFactory(props, editorCtrl);
 
 const visible = ref(false);
@@ -117,7 +117,7 @@ const required = computed(() => {
          <slot></slot>
       </div>
       <span
-         :style="{ left: labelWidth }"
+         :style="{ left: nextLine ? '2px' : labelWidth }"
          class="absolute bottom-[3px] text-[12px] text-[#ff4d4fcc]"
          v-if="errInfo.errClass"
       >

package/src/components/form/autoComplete/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, useAttrs, watch } from 'vue';
+import { ref, onMounted, onUnmounted, useAttrs, watch, shallowRef  } from 'vue';
 import { AutoComplete } from 'ant-design-vue';
 import {
    useInputFactory,
@@ -14,13 +14,10 @@ import {
    outFormDataFields,
 } from '@/index';
 import { ReqParams, IUrlInfo } from '@skyfox2000/fapi';
+import { useOptionFactory } from '@/utils/page';
 
 const props = defineProps({
    ...OptionCommProps,
-   autoload: {
-      type: Boolean,
-      default: false,
-   },
    value: {
       type: [String, Number, null, Array],
       default: undefined,
@@ -54,16 +51,22 @@ defineOptions({
 });
 const attrs = useAttrs(); // 手动获取 $attrs
 
+const inputFactory = useInputFactory();
+
+const defaultCtrl = useOptionFactory(props.url, props);
+const optionCtrl = props.optionCtrl ?? defaultCtrl.optionCtrl;
+optionCtrl.inputFactory = shallowRef(inputFactory);
+
 const url = ref<IUrlInfo>({
-   ...props.url,
-   url: props.url?.url || '',
-   fieldMap: props.fieldMap || props.url?.fieldMap,
-   params: props.params || props.url?.params,
+   ...optionCtrl?.url,
+   url: optionCtrl?.url?.url || '',
+   fieldMap: optionCtrl?.fieldMap || optionCtrl?.url?.fieldMap,
+   params: optionCtrl?.params || optionCtrl?.url?.params,
    loadingText: false,
 });
 
 /// 避免类型错误
-const innerValue = ref<SelectValue | undefined>(undefined);
+const innerValue = ref<SelectValue | undefined>(optionCtrl?.selected.value || undefined);
 
 watch(
    () => props.value,
@@ -83,7 +86,6 @@ watch(
    },
 );
 
-const inputFactory = useInputFactory();
 const { editorCtrl, errInfo, labelText } = inputFactory;
 
 const emit = defineEmits(['update:value', 'select', 'change', 'update:labels']);
@@ -92,7 +94,18 @@ inputFactory.inputEmit = emit;
 /**
  * 实际的选择项
  */
-const selectOptions = ref<OptionItemProps[]>([]);
+const selectOptions = ref<OptionItemProps[]>(optionCtrl?.options.value || []);
+
+// 监听 optionCtrl.options 的变化，确保 selectOptions 能响应式更新
+if (optionCtrl) {
+   watch(
+      () => optionCtrl.options.value,
+      (newOptions) => {
+         selectOptions.value = newOptions || [];
+      },
+      { immediate: true, deep: true }
+   );
+}
 
 const onSearch = (value: string) => {
    selectOptions.value = [];
@@ -121,11 +134,11 @@ const onSearch = (value: string) => {
       props.onsearch(search_value, query);
    }
 
-   loadOption(true, props, selectOptions, inputFactory, url.value, query);
+   if (optionCtrl) loadOption(optionCtrl, props);
 };
 
 const onSelected = (value: any) => {
-   const selectedOptions = onOptionChanged(props, value as SelectValue, selectOptions, inputFactory);
+   const selectedOptions = onOptionChanged(optionCtrl, props, value as SelectValue);
 
    /// 选择后才更新数据
    emit('update:value', value);
@@ -152,7 +165,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-   unloadOption(props, inputFactory);
+   if (optionCtrl) unloadOption(optionCtrl, props);
 });
 </script>
 
@@ -164,7 +177,7 @@ onUnmounted(() => {
          :options="selectOptions"
          @search="onSearch"
          @select="onSelected"
-         :placeholder="props.url && !props.url.loading ? '请输入并选择' + labelText : ''"
+         :placeholder="optionCtrl?.url?.loading ? '请输入并选择' + labelText : ''"
          v-bind="attrs"
       >
       </AutoComplete>

package/src/components/form/cascader/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, useAttrs, watch } from 'vue';
+import { ref, onMounted, onUnmounted, useAttrs, watch, shallowRef } from 'vue';
 import {
    circleLoading,
    useInputFactory,
@@ -12,6 +12,7 @@ import {
 import { Cascader } from 'ant-design-vue';
 import { DefaultOptionType, ValueType } from 'ant-design-vue/es/vc-cascader/Cascader';
 import { IUrlInfo } from '@skyfox2000/fapi';
+import { useOptionFactory } from '@/utils/page';
 
 const props = defineProps(OptionCommProps);
 
@@ -21,15 +22,19 @@ defineOptions({
 });
 const attrs = useAttrs(); // 手动获取 $attrs
 
+const inputFactory = useInputFactory();
+const defaultCtrl = useOptionFactory(props.url, props);
+const optionCtrl = props.optionCtrl ?? defaultCtrl.optionCtrl;
+optionCtrl.inputFactory = shallowRef(inputFactory);
+
 const url = ref<IUrlInfo>({
-   ...props.url,
-   url: props.url?.url || '',
-   fieldMap: props.fieldMap || props.url?.fieldMap,
-   params: props.params || props.url?.params,
+   ...optionCtrl?.url,
+   url: optionCtrl?.url?.url || '',
+   fieldMap: optionCtrl?.fieldMap || optionCtrl?.url?.fieldMap,
+   params: optionCtrl?.params || optionCtrl?.url?.params,
    loadingText: false,
 });
 
-const inputFactory = useInputFactory();
 const { editorCtrl, errInfo, labelText } = inputFactory;
 
 const placeholder = ref(attrs.placeholder);
@@ -47,7 +52,18 @@ inputFactory.inputEmit = emit;
 /**
  * 实际的选择项
  */
-const selectOptions = ref<OptionItemProps[]>([]);
+const selectOptions = ref<OptionItemProps[]>(optionCtrl?.options.value || []);
+
+// 监听 optionCtrl.options 的变化，确保 selectOptions 能响应式更新
+if (optionCtrl) {
+   watch(
+      () => optionCtrl.options.value,
+      (newOptions) => {
+         selectOptions.value = newOptions || [];
+      },
+      { immediate: true, deep: true }
+   );
+}
 
 const onChanged = (_: ValueType, selected: DefaultOptionType[]) => {
    if (!selected || selected.length === 0) {
@@ -77,11 +93,11 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   loadOption(props.autoload, props, selectOptions, inputFactory, url.value, url.value.params);
+   if (optionCtrl) loadOption(optionCtrl, props);
 });
 
 onUnmounted(() => {
-   unloadOption(props, inputFactory);
+   if (optionCtrl) unloadOption(optionCtrl, props);
 });
 </script>
 <template>

package/src/components/form/checkbox/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, useAttrs } from 'vue';
+import { ref, onMounted, onUnmounted, useAttrs, watch, shallowRef } from 'vue';
 import { Checkbox, CheckboxGroup } from 'ant-design-vue';
 import {
    // circleLoading,
@@ -14,6 +14,7 @@ import {
 } from '@/index';
 import { CheckboxValueType } from 'ant-design-vue/es/checkbox/interface';
 import { IUrlInfo } from '@skyfox2000/fapi';
+import { useOptionFactory } from '@/utils/page';
 
 const props = defineProps({
    ...OptionCommProps,
@@ -37,24 +38,39 @@ defineOptions({
 });
 const attrs = useAttrs(); // 手动获取 $attrs
 
+const inputFactory = useInputFactory();
+const defaultCtrl = useOptionFactory(props.url, props);
+const optionCtrl = props.optionCtrl ?? defaultCtrl.optionCtrl;
+optionCtrl.inputFactory = shallowRef(inputFactory);
+
 const url = ref<IUrlInfo>({
-   ...props.url,
-   url: props.url?.url || '',
-   fieldMap: props.fieldMap || props.url?.fieldMap,
-   params: props.params || props.url?.params,
+   ...optionCtrl?.url,
+   url: optionCtrl?.url?.url || '',
+   fieldMap: optionCtrl?.fieldMap || optionCtrl?.url?.fieldMap,
+   params: optionCtrl?.params || optionCtrl?.url?.params,
    loadingText: false,
 });
 
-const inputFactory = useInputFactory();
 const { errInfo } = inputFactory;
 const emit = defineEmits(['change', 'update:labels']);
 inputFactory.inputEmit = emit;
 
-const checkboxOptions = ref<OptionItemProps[]>([]);
+const checkboxOptions = ref<OptionItemProps[]>(optionCtrl?.options.value || []);
+
+// 监听 optionCtrl.options 的变化，确保 checkboxOptions 能响应式更新
+if (optionCtrl) {
+   watch(
+      () => optionCtrl.options.value,
+      (newOptions) => {
+         checkboxOptions.value = newOptions || [];
+      },
+      { immediate: true, deep: true }
+   );
+}
 
 const onChanged = (e: CheckboxValueType[]) => {
    const checkedValue = e;
-   const selectedOptions = onOptionChanged(props, checkedValue as SelectValue, checkboxOptions, inputFactory);
+   const selectedOptions = onOptionChanged(optionCtrl, props, checkedValue as SelectValue);
    const labels: string[] = getSelectedLabels(selectedOptions);
    emit('update:labels', labels);
 };
@@ -68,10 +84,10 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   loadOption(props.autoload, props, checkboxOptions, inputFactory, url.value, url.value.params);
+   if (optionCtrl) loadOption(optionCtrl, props);
 });
 onUnmounted(() => {
-   unloadOption(props, inputFactory);
+   if (optionCtrl) unloadOption(optionCtrl, props);
 });
 </script>
 <template>

package/src/components/form/index.ts

@@ -23,8 +23,8 @@ import InputNumber from './input/inputNumber.vue';
 export { InputNumber };
 
 import PropEditor from './propEditor/index.vue';
-export type { PropConfigItem } from './propEditor/index.vue';
 export { PropEditor };
+export type { PropConfigItem } from '@/typings/form.d';
 
 import Radio from './radio/index.vue';
 export { Radio };

package/src/components/form/propEditor/index.vue

@@ -1,22 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { Input, Button } from 'ant-design-vue';
-
-export interface PropConfigItem {
-   id: number;
-   /**
-    * 文本
-    */
-   text?: string;
-   /**
-    * 配置名
-    */
-   field: string;
-   /**
-    * 配置值
-    */
-   value: string;
-}
+import type { PropConfigItem } from '@/typings/form.d';
 
 const props = defineProps<{
    /**
@@ -39,15 +24,15 @@ const props = defineProps<{
     * 值占位符
     */
    valueHolder?: string;
-   /**
-    * 新增配置行
-    */
-   addMore?: boolean;
+   // /**
+   //  * 新增配置行
+   //  */
+   // addMore?: boolean;
 }>();
 const emit = defineEmits(['update:value']);
 
 // 当有selectList时，不允许添加更多配置项
-const addMore = ref(props.selectList && props.selectList.length > 0 ? false : (props.addMore ?? true));
+const addMore = ref(props.selectList && props.selectList.length > 0 ? false : true);
 
 const configList = ref<PropConfigItem[]>([]);
 // 标记是否为内部输入变更

package/src/components/form/radio/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, useAttrs } from 'vue';
+import { ref, onMounted, onUnmounted, watch, useAttrs, shallowRef } from 'vue';
 import { Radio, RadioChangeEvent, RadioGroup } from 'ant-design-vue';
 import {
    OptionCommProps,
@@ -12,6 +12,7 @@ import {
    SelectValue,
 } from '@/index';
 import { IUrlInfo } from '@skyfox2000/fapi';
+import { useOptionFactory } from '@/utils/page';
 
 const props = defineProps({
    ...OptionCommProps,
@@ -37,23 +38,38 @@ defineOptions({
 });
 const attrs = useAttrs(); // 手动获取 $attrs
 
+const inputFactory = useInputFactory();
+const defaultCtrl = useOptionFactory(props.url, props);
+const optionCtrl = props.optionCtrl ?? defaultCtrl.optionCtrl;
+optionCtrl.inputFactory = shallowRef(inputFactory);
+
 const url = ref<IUrlInfo>({
-   ...props.url,
-   url: props.url?.url || '',
-   fieldMap: props.fieldMap || props.url?.fieldMap,
-   params: props.params || props.url?.params,
+   ...optionCtrl?.url,
+   url: optionCtrl?.url?.url || '',
+   fieldMap: optionCtrl?.fieldMap || optionCtrl?.url?.fieldMap,
+   params: optionCtrl?.params || optionCtrl?.url?.params,
    loadingText: false,
 });
 
 const innerValue = ref(props.value);
 
-const inputFactory = useInputFactory();
 const { errInfo } = inputFactory;
-const radioOptions = ref<OptionItemProps[]>([]);
+const radioOptions = ref<OptionItemProps[]>(optionCtrl?.options.value || []);
 
 const emit = defineEmits(['change', 'update:value', 'update:labels']);
 inputFactory.inputEmit = emit;
 
+// 监听 optionCtrl.options 的变化，确保 radioOptions 能响应式更新
+if (optionCtrl) {
+   watch(
+      () => optionCtrl.options.value,
+      (newOptions) => {
+         radioOptions.value = newOptions || [];
+      },
+      { immediate: true, deep: true }
+   );
+}
+
 watch(
    () => innerValue.value,
    (val) => {
@@ -73,7 +89,7 @@ const isValueEqual = (val1: any, val2: any) => {
 
 const onChanged = (e: RadioChangeEvent) => {
    const checkedValue = e.target.value;
-   const selectedOptions = onOptionChanged(props, checkedValue as SelectValue, radioOptions, inputFactory);
+   const selectedOptions = onOptionChanged(optionCtrl, props, checkedValue as SelectValue);
    const labels: string[] = getSelectedLabels(selectedOptions);
    emit('update:labels', labels);
 };
@@ -86,10 +102,10 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   loadOption(props.autoload, props, radioOptions, inputFactory, url.value, url.value?.params);
+   if (optionCtrl) loadOption(optionCtrl, props);
 });
 onUnmounted(() => {
-   unloadOption(props, inputFactory);
+   if (optionCtrl) unloadOption(optionCtrl, props);
 });
 </script>
 <template>

package/src/components/form/select/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, PropType, useAttrs } from 'vue';
+import { ref, onMounted, onUnmounted, watch, PropType, useAttrs, shallowRef } from 'vue';
 import { Select, SelectOption } from 'ant-design-vue';
 import {
    circleLoading,
@@ -16,6 +16,7 @@ import {
    isEmpty,
 } from '@/index';
 import { IUrlInfo } from '@skyfox2000/fapi';
+import { useOptionFactory } from '@/utils/page';
 
 type SelectValueType = string | number | string[] | number[] | null;
 const props = defineProps({
@@ -38,24 +39,15 @@ const props = defineProps({
       type: String as PropType<string>,
       required: false,
    },
-   /**
-    * 是否显示全部选项
-    */
-   all: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-   },
-   /**
-    * 自定义全部选项的值
-    * 如果all为true，则显示全部选项
-    * 未设置allValue，则默认[0, 1]
-    */
-   allValue: {
-      type: [String, Number, Array] as PropType<string | number | string[] | number[]>,
-      required: false,
-   },
 });
 
+const inputFactory = useInputFactory();
+const { editorCtrl, errInfo, labelText } = inputFactory;
+   
+const defaultCtrl = useOptionFactory(props.url, props);
+const optionCtrl = props.optionCtrl ?? defaultCtrl.optionCtrl;
+optionCtrl.inputFactory = shallowRef(inputFactory);
+
 // 关闭自动继承属性到根元素
 defineOptions({
    inheritAttrs: false,
@@ -63,30 +55,39 @@ defineOptions({
 const attrs = useAttrs(); // 手动获取 $attrs
 
 const url = ref<IUrlInfo>({
-   ...props.url,
-   url: props.url?.url || '',
-   fieldMap: props.fieldMap || props.url?.fieldMap,
-   params: props.params || props.url?.params,
+   ...optionCtrl?.url,
+   url: optionCtrl?.url?.url || '',
+   fieldMap: optionCtrl?.fieldMap || optionCtrl?.url?.fieldMap,
+   params: optionCtrl?.params || optionCtrl?.url?.params,
    loadingText: false,
 });
 
-const inputFactory = useInputFactory();
-const { editorCtrl, errInfo, labelText } = inputFactory;
-
 const defaultVal = ref(props.value);
 const placeholder = ref(attrs.placeholder);
 
 /// 避免类型错误
-const innerValue = ref<string | number | string[] | number[] | undefined>(undefined);
+const innerValue = ref<string | number | string[] | number[] | undefined>(optionCtrl?.selected.value || undefined);
 const emit = defineEmits(['change', 'update:value', 'update:labels']);
 inputFactory.inputEmit = emit;
 
 /**
  * 实际的选择项
  */
-const selectOptions = ref<OptionItemProps[]>([]);
+const selectOptions = ref<OptionItemProps[]>(optionCtrl?.options.value || []);
+
+// 监听 optionCtrl.options 的变化，确保 selectOptions 能响应式更新
+if (optionCtrl) {
+   watch(
+      () => optionCtrl.options.value,
+      (newOptions) => {
+         selectOptions.value = newOptions || [];
+      },
+      { immediate: true, deep: true },
+   );
+}
+
 const onChanged = (value: any) => {
-   const selectedOptions = onOptionChanged(props, value as SelectValue, selectOptions, inputFactory);
+   const selectedOptions = onOptionChanged(optionCtrl, props, value as SelectValue);
    const labels: string[] = getSelectedLabels(selectedOptions);
 
    innerValue.value = value;
@@ -134,13 +135,13 @@ watch(
    },
 );
 
-watch(
-   () => props.params,
-   (newVal) => {
-      loadOption(true, props, selectOptions, inputFactory, url.value, newVal);
-   },
-   { deep: true },
-);
+// watch(
+//    () => props.params,
+//    (newVal) => {
+//          loadOption(true, props, selectOptions, inputFactory, url.value, newVal);
+//    },
+//    { deep: true },
+// );
 
 onMounted(() => {
    if (url.value && !url.value.fieldMap) {
@@ -153,20 +154,17 @@ onMounted(() => {
    if (props.dataKey) {
       const options = JSON.parse(JSON.stringify(OPTIONS.getOptions(props.dataKey)));
       selectOptions.value = options;
-   } else loadOption(props.autoload, props, selectOptions, inputFactory, url.value, url.value?.params);
+   } else if (optionCtrl) loadOption(optionCtrl, props);
 });
 
 onUnmounted(() => {
-   unloadOption(props, inputFactory);
+   if (optionCtrl) unloadOption(optionCtrl, props);
 });
 </script>
 
 <template>
    <div>
-      <div
-         v-if="props.url && props.url.loading === true"
-         class="absolute z-10 mt-[5px] mr-[10px] text-[#999] flex items-center"
-      >
+      <div v-if="optionCtrl?.url?.loading" class="absolute z-10 mt-[5px] mr-[10px] text-[#999] flex items-center">
          <circleLoading class="text-[#555] mx-[5px] !ml-[10px] !w-4 !h-4" />
          <span>数据加载中...</span>
       </div>

package/src/components/form/switch/index.vue

@@ -1,24 +1,42 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { formValidate, useInputFactory, OptionItemProps, loadOption, unloadOption } from '@/index';
+import { ref, onMounted, onUnmounted, PropType, watch, shallowRef } from 'vue';
+import { formValidate, useInputFactory, OptionItemProps, loadOption, unloadOption, OptionCommProps } from '@/index';
 import { Switch } from 'ant-design-vue';
 import message from 'vue-m-message';
+import { useOptionFactory } from '@/utils/page';
 
 const props = defineProps({
+   ...OptionCommProps,
    /**
     * 选择项数据
     */
    data: {
-      type: Array<Record<string, any>>,
+      type: Array as PropType<OptionItemProps[]>,
       required: true,
    },
 });
 
+const inputFactory = useInputFactory();
+const defaultCtrl = useOptionFactory(props.url, props);
+const optionCtrl = props.optionCtrl ?? defaultCtrl.optionCtrl;
+optionCtrl.inputFactory = shallowRef(inputFactory);
+
 /**
  * 实际的选择项
  */
 const switchOptions = ref<OptionItemProps[]>([]);
 
+// 监听 optionCtrl.options 的变化，确保 switchOptions 能响应式更新
+if (optionCtrl) {
+   watch(
+      () => optionCtrl.options.value,
+      (newOptions) => {
+         switchOptions.value = newOptions || [];
+      },
+      { immediate: true, deep: true }
+   );
+}
+
 const emit = defineEmits<{
    (e: 'change', checked: boolean | string | number): void;
 }>();
@@ -37,11 +55,11 @@ onMounted(() => {
       message.error('Switch组件必须有且只有两个选项');
       return;
    }
-   loadOption(false, props, switchOptions);
+   if (optionCtrl) loadOption(optionCtrl, props);
 });
 
 onUnmounted(() => {
-   unloadOption(props);
+   if (optionCtrl) unloadOption(optionCtrl, props);
 });
 </script>
 <template>