@neatui/vue 3.0.0 → 4.0.0

package/src/components/form/ImgUpload.vue

@@ -11,15 +11,15 @@
     </template>
     <template v-if="(!multiple && files && files.length === 0) || (multiple && (!limit || (limit && files && files.length < limit)))">
       <slot>
-        <div ui-flex="row cm" ui-form="@a type:upload tips:hover" :class="`upload bg-fore b-solid bk-case b-xs mb-sl ${uploadClass}`" :style="uploadStyle">
+        <div ui-flex="row cm" ui-form="@a type:upload tips:hover" :class="`upload bg-fore b-solid b-case b-xs mb-sl ${uploadClass}`" :style="uploadStyle">
           <div v-if="tips" ui-form-tips>
             {{ tips }}
           </div>
           <input v-if="!crop" type="file" class="pa input" :multiple="multiple" @change="change" />
           <div v-else class="input pa" @click="uploadClick"></div>
           <div class="co-note ac input-icon">
-            <i class="icon icon-upload fs-mm"></i>
-            <div class="fs-ss">上传图片</div>
+            <i class="icon icon-upload fs-ml"></i>
+            <div class="fs-sm">上传图片</div>
           </div>
         </div>
       </slot>

package/src/components/form/{MoreSelect@v3.vue → MoreSelect.vue}

@@ -58,7 +58,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch, nextTick } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
 

package/src/components/form/MoreSelectList.vue

@@ -4,7 +4,7 @@
     <li
       v-for="(item, idx) of props.options"
       :key="idx"
-      :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-o-ss bk-main-o-ml' : 'bk-case'}`"
+      :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-o-ss b-main-o-ml' : 'b-case'}`"
       class="n-sm r-ss b-solid b-xs"
       @click.stop="select(item.value)"
     >

package/src/components/form/{MoreSelectPanel@v3.vue → MoreSelectPanel.vue}

@@ -51,7 +51,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IFollowView, IPickerView } from '../basic';
   const ipicker: any = ref(null);
 

package/src/components/form/MoreSelectPicker.vue

@@ -6,14 +6,14 @@
       </Input>
       <template #options>
         <div class="full n-xs" ui-flex="col xy">
-          <div class="flex-fixed n-ms b-solid bk-line bb-xs" ui-flex="row xm">
+          <div class="flex-fixed n-ms b-solid b-line bb-xs" ui-flex="row xm">
             <div><button class="co-note" @click="cancel">取消</button></div>
             <div><button class="co-main" @click="confirm">确定</button></div>
           </div>
           <div class="flex-block">
             <IScrollView class="full n-ms" :pull="false" :load="false">
               <ul v-if="props.options?.length" class="my-sm-sub">
-                <li class="ux-hover n-sm r-ss nowrap b-solid bk-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
+                <li class="ux-hover n-sm r-ss nowrap b-solid b-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
                   <label style="pointer-events: none" ui-form="@a type:checkbox :block">
                     <input type="checkbox" :name="field" :checked="mv?.some((i: any) => `${i}` === `${item.value}`)" />
                     <span class="ml-sm">{{ item.label || item }}</span>
@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IPickerView, IScrollView } from '../basic';
   const ipicker: any = ref(null);
   const emits = defineEmits(['update:modelValue']);

package/src/components/form/MoreSelectTags.vue

@@ -5,7 +5,7 @@
       <li
         v-for="(item, idx) of props.options"
         :key="idx"
-        :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-o-ss bk-main-o-ml' : 'bk-case'}`"
+        :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-o-ss b-main-o-ml' : 'b-case'}`"
         class="nx-ms ny-ss r-sm b-solid b-xs pr"
         @click.stop="select(item.value)"
       >

package/src/components/form/PageMoreSelect.vue

@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
 

package/src/components/form/PageSelect.vue

@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IFollowView } from '../basic';
 
   const ifollow: any = ref(null);

package/src/components/form/SearchMoreSelect.vue

@@ -44,7 +44,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
 

package/src/components/form/{SearchSelect@v3.vue → SearchSelect.vue}

@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
   console.warn('「SearchSelect」 即将废弃，建议使用「Select」 设置参数search为true，示例：<Select v-model="value" :search="true" />');

package/src/components/form/{Select@v3.vue → Select.vue}

@@ -66,7 +66,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch, nextTick } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
   const customInputRef: any = ref(null);

package/src/components/form/SelectList.vue

@@ -2,7 +2,7 @@
   <ul v-if="props.options?.length" class="my-sm-sub lh-ss">
     <li
       class="hover:bg-main-o-ss n-sl r-ss b-solid b-xs"
-      :class="`${item.value === mv ? 'bk-main-o-ml bg-main-o-ss' : 'bk-case'}`"
+      :class="`${item.value === mv ? 'b-main-o-ml bg-main-o-ss' : 'b-case'}`"
       v-for="(item, idx) of props.options"
       :key="idx"
       @click="mv = item.value === mv ? '' : item.value"

package/src/components/form/SelectPicker.vue

@@ -6,14 +6,14 @@
       </Input>
       <template #options>
         <div class="full n-xs" ui-flex="col xy">
-          <div class="flex-fixed n-ms b-solid bk-line bb-xs" ui-flex="row xm">
+          <div class="flex-fixed n-ms b-solid b-line bb-xs" ui-flex="row xm">
             <div><button class="co-note" @click="cancel">取消</button></div>
             <div><button class="co-main" @click="select">确定</button></div>
           </div>
           <div class="flex-block">
             <IScrollView class="full n-ms" :pull="false" :load="false">
               <ul v-if="props.options?.length" class="my-sm-sub">
-                <li class="ux-hover n-sm r-ss b-solid bk-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click="mv = item.value">
+                <li class="ux-hover n-sm r-ss b-solid b-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click="mv = item.value">
                   <label ui-form="@a type:radio">
                     <input type="radio" :name="item.field" :checked="item.value === mv" /><span>{{ item.label || item }}</span>
                   </label>
@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import { IPickerView, IScrollView } from '../basic';
   import { watch } from 'vue';
   const ipicker: any = ref(null);

package/src/components/form/SelectTree/{SelectTree@v1.vue → SelectTree.vue}

@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '..';
+  import Input from '../Input.vue';
   import { IFollowView } from '../../basic';
   import { TreeView } from '../../display';
   import { findByJson, filterJson } from '@fekit/utils';

package/src/components/form/Switch.vue

@@ -31,7 +31,8 @@
     },
     map: {
       type: Array as PropType<any[]>,
-      default: () => [false, true],
+      // [checkedValue, uncheckedValue]
+      default: () => [true, false],
     },
   });
 

package/src/components/form/TimeView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy">
-    <div ui-calendar-head="" class="nx-sl ny-sm b-solid bk-line bb-xs">
+  <div :class="`${frame ? 'b-solid b-line b-xs r-sm' : ''}`" ui-flex="col xy">
+    <div ui-calendar-head="" class="nx-sl ny-sm b-solid b-line bb-xs">
       <div ui-flex="row lm"></div>
       <div ui-flex="row cm" class="nx-ss-sub">
         <p class="mx-ss-sub">
@@ -11,15 +11,15 @@
       </div>
       <div ui-flex="row rm"></div>
     </div>
-    <div ui-flex="row am" class="fs-xs bold nx-sl nt-sm"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
+    <div ui-flex="row am" class="fs-ss bold nx-sl nt-sm"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
     <div>
       <ul ui-calendar-days="" ui-flex="row lm" class="flex-wrap nx-sm">
         <li class="ew7 n-sm ux-none" v-for="(item, idx) in curr.days" :key="idx">
           <div v-if="item.day" @click="change(item)" ui-cover="-xs">
             <div
               ui-flex="col cm"
-              class="r-sm b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+              class="r-sm b-solid b-none b-xs"
+              :class="`${item.isToday ? 'b-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
                 state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
@@ -54,7 +54,7 @@
         </div>
       </div>
       <div ui-flex="row cm" class="nx-ss-sub">
-        <ul class="fs-xs n-sm-sub" ui-flex="row lm">
+        <ul class="fs-ss n-sm-sub" ui-flex="row lm">
           <li ui-btn="@a s none">年</li>
           <li ui-btn="@a s none">月</li>
           <li ui-btn="@a s none">日</li>

package/src/components/form/Upload.vue

@@ -2,9 +2,9 @@
   <div ui-flex="row lm :wrap" class="neatui-upload mb-sm-sub mr-sm-sub" v-bind="{ ...attrs }">
     <div v-for="(file, idx) in state.files" :key="idx" ui-flex="col cm" class="flex-fixed pr" :style="`width: ${isNumber(width) ? width + 'em' : width}`" v-bind="itemAttrs">
       <div class="w-full pr" :style="`box-sizing: content-box; padding-top: ${ratio}%`">
-        <div class="pa full ot-no ol-no bg-fore n-sm b-solid bk-case b-xs r-sm" ui-flex="col cm">
+        <div class="pa full ot-no ol-no bg-fore n-sm b-solid b-case b-xs r-sm" ui-flex="col cm">
           <!-- 删除按钮 -->
-          <div class="pa w-xs h-xs ot-ss or-ss bg-fore co-risk lh-xs r-xl parent-hover:show z-ls" ui-flex="row cm" @click="remove(idx)">
+          <div v-if="!disabled" class="pa w-sl h-sl ot-ss or-ss bg-fore co-risk lh-xs r-xl parent-hover:show z-ls" ui-flex="row cm" @click="remove(idx)">
             <svg class="block" style="width: 1.2em; height: 1.2em" viewBox="0 0 1024 1024">
               <path
                 d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66 0.3L512 563.4l-99.3 118.4-66.1-0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
@@ -17,7 +17,7 @@
           <img v-if="file.type === 'image'" class="r-ss" :src="getImageUrl(file)" alt="" />
           <video v-else-if="file.type === 'video'" class="full r-ss" :src="getImageUrl(file)" controls muted></video>
           <template v-else-if="file.type === 'pdf'">
-            <svg t="1705645350800" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
+            <svg t="1705645350800" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -38,7 +38,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'xlsx'">
-            <svg t="1705645380770" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2060">
+            <svg t="1705645380770" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2060">
               <path
                 d="M205.799024 64.936585H664.850732l231.773658 231.773659v638.376585c0 13.79353-11.18208 24.97561-24.97561 24.97561H205.799024c-13.79353 0-24.97561-11.18208-24.975609-24.97561V89.912195c0-13.79353 11.18208-24.97561 24.975609-24.97561z m448.70681 24.97561H205.799024v845.174634H871.64878V307.055141L654.505834 89.912195z"
                 fill="#B7B7BD"
@@ -87,7 +87,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'docx'">
-            <svg t="1705645401993" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207">
+            <svg t="1705645401993" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -108,7 +108,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'pptx'">
-            <svg t="1705645414803" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354">
+            <svg t="1705645414803" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -129,7 +129,7 @@
             </svg>
           </template>
           <template v-else>
-            <svg t="1705645436666" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501">
+            <svg t="1705645436666" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -160,14 +160,20 @@
 
     <!-- 上传按钮 -->
     <template v-if="showUploadButton">
-      <slot name="btn">
-        <label class="pr flex-block" ui-form="@a type:upload tips:hover" :style="`width: ${isNumber(width) ? width + 'em' : width}`" v-bind="itemAttrs">
+      <slot name="btn" :disabled="disabled">
+        <label
+          class="pr flex-block"
+          :class="{ 'ux-disable': disabled }"
+          ui-form="@a type:upload tips:hover"
+          :style="`width: ${isNumber(width) ? width + 'em' : width}`"
+          v-bind="itemAttrs"
+        >
           <div class="w-full pr" :style="`box-sizing: content-box; padding-top: ${ratio}%`">
-            <div ui-flex="row cm" :class="`pa ot-no ol-no full upload n-sl bg-fore b-solid bk-case b-xs r-sm ${uploadClass}`" :style="uploadStyle">
+            <div ui-flex="row cm" :class="`pa ot-no ol-no full upload n-sl bg-fore b-solid b-case b-xs r-sm ${uploadClass}`" :style="uploadStyle">
               <div v-if="tips" ui-form-tips>
                 {{ tips }}
               </div>
-              <input style="display: none" type="file" class="pa input" :multiple="!max || max > 1" :accept="accept" @change="change" />
+              <input style="display: none" type="file" class="pa input" :multiple="!max || max > 1" :accept="accept" :disabled="disabled" @change="change" />
               <div class="co-note ac input-icon">
                 <svg t="1705642180833" style="width: 1em; height: 1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4215">
                   <path
@@ -392,6 +398,7 @@
 
   // 删除文件函数
   const remove = (index: number) => {
+    if (props.disabled) return;
     removeFile(index, false);
   };
 
@@ -450,6 +457,10 @@
   // 文件上传处理
   const change = (e: Event) => {
     const target = e.target as HTMLInputElement;
+    if (props.disabled) {
+      target.value = '';
+      return;
+    }
     const selectedFiles = target.files || [];
 
     // 检查文件数量限制

package/src/components/form/index.ts

@@ -1,4 +1,4 @@
-import Input from './Input@v3.vue';
+import Input from './Input.vue';
 import InputRange from './InputRange.vue';
 import Switch from './Switch.vue';
 import Textarea from './Textarea.vue';
@@ -6,24 +6,24 @@ import Textarea from './Textarea.vue';
 import Checkbox from './Checkbox.vue';
 import CheckboxItem from './CheckboxItem.vue';
 import CheckboxGroup from './CheckboxGroup.vue';
-import Select from './Select@v3.vue';
+import Select from './Select.vue';
 import SelectList from './SelectList.vue';
 import SelectTags from './SelectTags.vue';
 import SelectPicker from './SelectPicker.vue';
-import SearchSelect from './SearchSelect@v3.vue';
-import MoreSelect from './MoreSelect@v3.vue';
+import SearchSelect from './SearchSelect.vue';
+import MoreSelect from './MoreSelect.vue';
 import MoreSelectList from './MoreSelectList.vue';
 import MoreSelectTags from './MoreSelectTags.vue';
 import MoreSelectPicker from './MoreSelectPicker.vue';
 import SearchMoreSelect from './SearchMoreSelect.vue';
 import PageSelect from './PageSelect.vue';
-import SelectTree from './SelectTree/SelectTree@v1.vue';
+import SelectTree from './SelectTree/SelectTree.vue';
 
-import DateView from './DateView@v3.vue';
-import DateRangeView from './DateRangeView@v3.vue';
+import DateView from './DateView.vue';
+import DateRangeView from './DateRangeView.vue';
 import DatePicker from './DatePicker.vue';
 import TimePicker from './TimePicker.vue';
-import DateRangePicker from './DateRangePicker@v3.vue';
+import DateRangePicker from './DateRangePicker.vue';
 import ImgUpload from './ImgUpload.vue';
 import Upload from './Upload.vue';
 import Cascader from './Cascader.vue';

package/src/components/loader/FormLoader/FormLoader.vue

@@ -300,123 +300,146 @@
     _lw: 6,
   });
 
-  // 监听结构
-  const unwatchs: any = [];
-  watch(
-    [() => props.form, () => props.data, () => props.idx],
-    ([form = []]) => {
-      const wkeys: any = {};
-      const onces: any = [];
-      state.form = deepcopy(form)?.map((item: any = {}, idx: number) => {
-        // 计算Label宽度
-        const _w = clw(item.label) + 2;
-        if (_w > state._lw) {
-          state._lw = _w;
-        }
+  // 结构变化时重建字段监听；普通字段变化只触发对应的联动任务
+  const unwatchs: Array<() => void> = [];
+  let fieldWatcherGeneration = 0;
+  const clearFieldWatchers = () => {
+    fieldWatcherGeneration += 1;
+    unwatchs.splice(0).forEach((unwatch) => {
+      unwatch();
+    });
+    return fieldWatcherGeneration;
+  };
+  const rebuildFieldWatchers = (form: any = []) => {
+    const generation = clearFieldWatchers();
+    const watched: any[] = [];
+    const onces: any[] = [];
+    const taskRuns = new Map<any, number>();
+    state.form = deepcopy(form)?.map((item: any = {}, idx: number) => {
+      // 计算Label宽度
+      const _w = clw(item.label) + 2;
+      if (_w > state._lw) {
+        state._lw = _w;
+      }
 
-        if (isObject(item)) {
-          for (const key in item) {
-            let val = item[key] || {};
-            // 处理函数
-            if (isFunction(val)) {
-              val = val(deepcopy(props.data), props.form, route, router);
-              if (isObject(val)) {
-                if (!isFunction(val.setup)) {
-                  val.setup = item[key];
-                }
-                if (!isArray(val.watch)) {
-                  val.watch = deepcopy(form).map(({ field = '' }: any = {}) => field);
-                }
-              } else {
-                val = { value: val, setup: item[key], watch: deepcopy(form).map(({ field = '' }: any = {}) => field) };
-              }
-            }
-            // 对象处理
+      if (isObject(item)) {
+        for (const key in item) {
+          let val = item[key] || {};
+          let hasInitialResult = false;
+          let initialResult: any;
+          // 处理函数
+          if (isFunction(val)) {
+            const setup = val;
+            val = setup(deepcopy(props.data), props.form, route, router);
             if (isObject(val)) {
-              const { value = null, setup = () => {}, watch: _watch = [] } = val || {};
-              // 监听字段为空
-              if (_watch.length) {
-                _watch?.forEach((k: any) => {
-                  if (wkeys[k]) {
-                    wkeys[k].push({ idx, key, value, setup });
-                  } else {
-                    wkeys[k] = [{ idx, key, value, setup }];
-                  }
-                });
-              } else {
-                onces.push({ idx, key, value, setup });
+              if (!isFunction(val.setup)) {
+                val.setup = setup;
+              }
+              if (!isArray(val.watch)) {
+                val.watch = deepcopy(form).map(({ field = '' }: any = {}) => field);
               }
-              item[key] = value;
             } else {
-              item[key] = val;
+              hasInitialResult = true;
+              initialResult = val;
+              val = { value: val, setup, watch: deepcopy(form).map(({ field = '' }: any = {}) => field) };
             }
           }
-        }
-
-        // 模型处理
-        if (item.model) {
-          if (isString(item.model)) {
-            item.model = [item.model, { verify: false }];
+          // 对象处理
+          if (isObject(val)) {
+            const { value = null, setup = () => {}, watch: _watch = [] } = val || {};
+            const task = { idx, key, value, setup, watch: _watch, hasInitialResult, initialResult };
+            // 监听字段为空
+            if (_watch.length) {
+              watched.push(task);
+            } else {
+              onces.push(task);
+            }
+            item[key] = value;
+          } else {
+            item[key] = val;
           }
-        } else {
-          item.model = ['', { verify: false }];
         }
-        if (item.model[1] && !Object.prototype.hasOwnProperty.call(item.model[1], 'verify')) {
-          item.model[1].verify = false;
+      }
+
+      // 模型处理
+      if (item.model) {
+        if (isString(item.model)) {
+          item.model = [item.model, { verify: false }];
         }
+      } else {
+        item.model = ['', { verify: false }];
+      }
+      if (item.model[1] && !Object.prototype.hasOwnProperty.call(item.model[1], 'verify')) {
+        item.model[1].verify = false;
+      }
 
-        // 添加ID
-        item._fid = `form-${props.idx !== '' ? props.idx + '-' : ''}field-${item.field}`;
+      // 添加ID
+      item._fid = `form-${props.idx !== '' ? props.idx + '-' : ''}field-${item.field}`;
 
-        // 数据路径处理
-        item._data = props.data;
-        (item.paths?.split('.') || [])?.forEach((i: any) => {
-          if (item._data[i]) {
-            item._data = item._data[i];
-          }
-        });
-        return item;
-      });
-      const runsetup = (item: any = {}) => {
-        const { idx = null, key = null, value = null, setup = null }: any = item || {};
-        if (state.form[idx] && isFunction(setup)) {
-          const v = setup(deepcopy(props.data), state.form[idx], route, router);
-          nextTick(() => {
-            if (v instanceof Promise) {
-              state.form[idx][key] = value;
-              v.then((res: any) => {
-                state.form[idx][key] = res;
-              });
-            } else {
-              state.form[idx][key] = v;
-            }
-          });
+      // 数据路径处理
+      item._data = props.data;
+      (item.paths?.split('.') || [])?.forEach((i: any) => {
+        if (item._data[i]) {
+          item._data = item._data[i];
         }
-      };
-      // 执行一次
-      onces?.forEach((item: any = {}) => {
-        runsetup(item);
       });
-      // 监听列表
-      for (const key in wkeys) {
-        unwatchs.push(
-          watch(
-            () => props.data[key],
-            () => {
-              wkeys[key]?.forEach((item: any = {}) => {
-                runsetup(item);
-              });
-            },
-            {
-              deep: true,
-              immediate: true,
-            },
-          ),
-        );
+      return item;
+    });
+    const runsetup = (item: any = {}) => {
+      if (generation !== fieldWatcherGeneration) return;
+      const { idx = null, key = null, value = null, setup = null }: any = item || {};
+      const target = state.form[idx];
+      if (target && isFunction(setup)) {
+        const runId = (taskRuns.get(item) || 0) + 1;
+        taskRuns.set(item, runId);
+        const v = item.hasInitialResult ? item.initialResult : setup(deepcopy(props.data), target, route, router);
+        item.hasInitialResult = false;
+        const isCurrent = () => generation === fieldWatcherGeneration && state.form[idx] === target && taskRuns.get(item) === runId;
+        nextTick(() => {
+          if (!isCurrent()) return;
+          if (v instanceof Promise) {
+            target[key] = value;
+            v.then((res: any) => {
+              if (isCurrent()) {
+                target[key] = res;
+              }
+            });
+          } else {
+            target[key] = v;
+          }
+        });
       }
+    };
+    // 不声明 watch 的任务只执行一次
+    onces.forEach((item: any = {}) => {
+      runsetup(item);
+    });
+    // 每个动态属性只建立一个 watcher，多个依赖在同一轮变化时只执行一次
+    watched.forEach((item: any = {}) => {
+      unwatchs.push(
+        watch(
+          () => item.watch.map((key: any) => props.data[key]),
+          () => {
+            runsetup(item);
+          },
+          { deep: true, immediate: true },
+        ),
+      );
+    });
+  };
+  watch(
+    () => props.form,
+    (form = []) => {
+      rebuildFieldWatchers(form);
     },
     { deep: true, immediate: true },
   );
+  watch(
+    [() => props.data, () => props.idx],
+    () => {
+      rebuildFieldWatchers(props.form);
+    },
+  );
 
   // 处理
   watch(
@@ -440,8 +463,6 @@
   );
 
   onBeforeUnmount(() => {
-    unwatchs?.forEach((unwatch: any) => {
-      unwatch();
-    });
+    clearFieldWatchers();
   });
 </script>