🔨 优化配置保存逻辑.

2025-07-08 00:34:30 +08:00
parent dd0237a83a
commit fc151216f1
17 changed files with 104 additions and 154 deletions
--- a/orion-visor-ui/src/api/asset/host-extra.ts
+++ b/orion-visor-ui/src/api/asset/host-extra.ts
@@ -37,6 +37,7 @@ export interface HostRdpExtraSettingModel {
 export interface HostVncExtraSettingModel {
  port: number;
  lowBandwidthMode: boolean;
+  swapRedBlue: boolean;
 }

 // 标签额外配置
--- a/orion-visor-ui/src/store/modules/terminal/index.ts
+++ b/orion-visor-ui/src/store/modules/terminal/index.ts
@@ -30,7 +30,7 @@ import { getPreference, updatePreference } from '@/api/user/preference';
 import { getLatestConnectHostId } from '@/api/terminal/terminal-connect-log';
 import { useCacheStore } from '@/store';
 import { nextId } from '@/utils';
-import { isObject } from '@/utils/is';
+import { isArray, isObject } from '@/utils/is';
 import { Message } from '@arco-design/web-vue';
 import { TerminalSessionTypes, TerminalTabs } from '@/views/terminal/types/const';
 import TerminalTabManager from '@/views/terminal/service/tab/terminal-tab-manager';
@@ -146,7 +146,7 @@ export default defineStore('terminal', {
        await updatePreference({
          type: 'TERMINAL',
          item,
-          value: isObject(value) ? JSON.stringify(value) : value,
+          value: (isObject(value) || isArray(value)) ? JSON.stringify(value) : value,
        });
      } catch (e) {
        Message.error('同步失败');
--- a/orion-visor-ui/src/store/modules/terminal/types.ts
+++ b/orion-visor-ui/src/store/modules/terminal/types.ts
@@ -121,7 +121,6 @@ export interface TerminalVncGraphSetting {
  displayHeight?: number;
  colorDepth?: number;
  forceLossless?: boolean;
-  swapRedBlue?: boolean;
  cursor?: string;
  compressLevel?: number;
  qualityLevel?: number;
--- a/orion-visor-ui/src/views/terminal/components/setting/display/terminal-rdp-action-bar-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/display/terminal-rdp-action-bar-block.vue
@@ -40,25 +40,16 @@
 <script lang="ts" setup>
  import type { TerminalRdpActionBarSetting } from '@/store/modules/terminal/types';
  import type { SidebarAction } from '@/views/terminal/types/define';
-  import { computed, ref, watch } from 'vue';
-  import { useTerminalStore, useDictStore } from '@/store';
+  import { computed } from 'vue';
+  import { useDictStore } from '@/store';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { RdpActionBarItems, graphActionBarPositionKey } from '@/views/terminal/types/const';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import IconActions from '../../layout/icon-actions.vue';

  const { toOptions } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();

-  const formModel = ref<TerminalRdpActionBarSetting>({ ...preference.rdpActionBarSetting });
-
-  // 监听同步
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.RDP_ACTION_BAR_SETTING, formModel.value, true);
-  }, { deep: true });
+  const { formModel } = useTerminalPreference<TerminalRdpActionBarSetting>(TerminalPreferenceItem.RDP_ACTION_BAR_SETTING, true);

  // 操作项
  const actions = computed<Array<SidebarAction>>(() => {
--- a/orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-action-bar-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-action-bar-block.vue
@@ -30,6 +30,12 @@
                      :default-checked="true"
                      type="round" />
          </a-form-item>
+          <!-- 分享按钮 -->
+          <a-form-item field="share" label="分享按钮">
+            <a-switch v-model="formModel.share"
+                      :default-checked="true"
+                      type="round" />
+          </a-form-item>
        </a-space>
      </a-form>
    </div>
@@ -45,25 +51,14 @@
 <script lang="ts" setup>
  import type { TerminalSshActionBarSetting } from '@/store/modules/terminal/types';
  import type { SidebarAction } from '@/views/terminal/types/define';
-  import { computed, ref, watch } from 'vue';
-  import { useTerminalStore } from '@/store';
+  import { computed } from 'vue';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { SshActionBarItems } from '@/views/terminal/types/const';
  import { isSecureEnvironment } from '@/utils/env';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import IconActions from '../../layout/icon-actions.vue';

-  const { preference, updateTerminalPreference } = useTerminalStore();
-
-  const formModel = ref<TerminalSshActionBarSetting>({ ...preference.sshActionBarSetting });
-
-  // 监听同步
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SSH_ACTION_BAR_SETTING, formModel.value, true);
-  }, { deep: true });
+  const { formModel } = useTerminalPreference<TerminalSshActionBarSetting>(TerminalPreferenceItem.SSH_ACTION_BAR_SETTING, true);

  // 操作项
  const actions = computed<Array<SidebarAction>>(() => {
--- a/orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-display-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-display-block.vue
@@ -116,23 +116,22 @@
 <script lang="ts" setup>
  import type { TerminalSshDisplaySetting } from '@/store/modules/terminal/types';
  import type { ISshSession } from '@/views/terminal/interfaces';
-  import { ref, watch, onMounted } from 'vue';
+  import { ref } from 'vue';
  import { useDictStore, useTerminalStore } from '@/store';
  import { fontFamilyKey, fontSizeKey, fontWeightKey, cursorStyleKey, TerminalSessionTypes } from '@/views/terminal/types/const';
  import { labelFilter } from '@/types/form';
-  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { defaultFontFamily } from '@/types/xterm';
+  import { TerminalPreferenceItem } from '@/store/modules/terminal';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import TerminalExample from '../terminal-example.vue';

  const { toOptions, toRadioOptions } = useDictStore();
-  const { preference, updateTerminalPreference, sessionManager } = useTerminalStore();
+  const { preference, sessionManager } = useTerminalStore();

  const background = preference.sshTheme.schema.background;
  const previewTerminal = ref();
-  const formModel = ref<TerminalSshDisplaySetting>({});

-  // 监听内容变化
-  watch(formModel, (v, before) => {
+  const { formModel } = useTerminalPreference<TerminalSshDisplaySetting>(TerminalPreferenceItem.SSH_DISPLAY_SETTING, true, (v) => {
    if (!v || !Object.keys(v).length) {
      return;
    }
@@ -168,17 +167,8 @@
        // 自适应
        s.fit();
      });
-    // 非初始化则同步
-    if (Object.keys(before).length) {
-      updateTerminalPreference(TerminalPreferenceItem.SSH_DISPLAY_SETTING, formModel.value, true);
-    }
    // 聚焦
    previewTerminal.value.term.focus();
-  }, { deep: true });
-
-  // 初始化配置
-  onMounted(() => {
-    formModel.value = { ...preference.sshDisplaySetting };
  });

 </script>
--- a/orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-right-menu-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-right-menu-block.vue
@@ -26,7 +26,7 @@
                   class="action-item-wrapper"
                   v-for="(action, index) in SshActionBarItems"
                   :key="index">
-              <div class="action-item" @click="clickAction(action.item)">
+              <div class="action-item" @click="toggleAction(action.item)">
                <!-- 图标 -->
                <div class="action-icon">
                  <component :is="action.icon" />
@@ -62,7 +62,7 @@
              <div>{{ action.content }}</div>
            </div>
            <!-- 关闭按钮 -->
-            <div class="close-icon" @click="clickAction(action.item)">
+            <div class="close-icon" @click="toggleAction(action.item)">
              <icon-close />
            </div>
          </a-doption>
@@ -86,22 +86,15 @@

 <script lang="ts" setup>
  import type { ContextMenuItem } from '@/views/terminal/types/define';
-  import { computed, ref, watch } from 'vue';
-  import { useTerminalStore } from '@/store';
+  import { computed, ref } from 'vue';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { SshActionBarItems } from '@/views/terminal/types/const';
  import { isSecureEnvironment } from '@/utils/env';
-
-  const { preference, updateTerminalPreference } = useTerminalStore();
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';

  const popupContainer = ref();
-  const rightActionItems = ref<Array<string>>([...preference.sshRightMenuSetting]);

-  // // 监听同步
-  watch(rightActionItems, (v) => {
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SSH_RIGHT_MENU_SETTING, JSON.stringify(v), true);
-  }, { deep: true });
+  const { formModel: rightActionItems } = useTerminalPreference<Array<string>>(TerminalPreferenceItem.SSH_RIGHT_MENU_SETTING, true);

  // 实际操作项
  const rightActions = computed<Array<ContextMenuItem>>(() => {
@@ -110,8 +103,8 @@
      .filter(Boolean);
  });

-  // 添加操作项
-  const clickAction = (item: string) => {
+  // 触发操作项
+  const toggleAction = (item: string) => {
    if (rightActionItems.value.includes(item)) {
      // 移除
      rightActionItems.value.splice(rightActionItems.value.indexOf(item), 1);
--- a/orion-visor-ui/src/views/terminal/components/setting/display/terminal-vnc-action-bar-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/display/terminal-vnc-action-bar-block.vue
@@ -40,25 +40,16 @@
 <script lang="ts" setup>
  import type { TerminalVncActionBarSetting } from '@/store/modules/terminal/types';
  import type { SidebarAction } from '@/views/terminal/types/define';
-  import { computed, ref, watch } from 'vue';
-  import { useTerminalStore, useDictStore } from '@/store';
+  import { computed } from 'vue';
+  import { useDictStore } from '@/store';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { VncActionBarItems, graphActionBarPositionKey } from '@/views/terminal/types/const';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import IconActions from '../../layout/icon-actions.vue';

  const { toOptions } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();

-  const formModel = ref<TerminalVncActionBarSetting>({ ...preference.vncActionBarSetting });
-
-  // 监听同步
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.VNC_ACTION_BAR_SETTING, formModel.value, true);
-  }, { deep: true });
+  const { formModel } = useTerminalPreference<TerminalVncActionBarSetting>(TerminalPreferenceItem.VNC_ACTION_BAR_SETTING, true);

  // 操作项
  const actions = computed<Array<SidebarAction>>(() => {
--- a/orion-visor-ui/src/views/terminal/components/setting/extra/rdp-extra-form.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/extra/rdp-extra-form.vue
@@ -23,7 +23,7 @@
    <a-form-item field="lowBandwidthMode"
                 style="margin-bottom: 8px;"
                 label="低带宽模式"
-                 help="调整图形化配置以及禁用音频, 提升慢速网络下的响应速度">
+                 help="调整图形化配置为最低以及禁用音频, 提升慢速网络下的响应速度">
      <a-switch v-model="formModel.lowBandwidthMode" type="round" />
    </a-form-item>
    <!-- 初始化程序 -->
--- a/orion-visor-ui/src/views/terminal/components/setting/extra/vnc-extra-form.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/extra/vnc-extra-form.vue
@@ -8,16 +8,22 @@
    <a-form-item field="port"
                 label="自定义端口"
                 style="margin-bottom: 8px;"
-                 help="通常情况下端口号为 5900 + N(屏幕)"
+                 help="通常情况下端口号为 5900 + N (屏幕)"
                 :rules="{ min: 1, max: 65535, message: '输入的端口不合法' }">
      <a-input-number v-model="formModel.port"
                      placeholder="VNC 自定义端口"
                      allow-clear />
    </a-form-item>
+    <!-- 交换红蓝 -->
+    <a-form-item field="swapRedBlue"
+                 label="交换红蓝"
+                 help="若颜色显示错误(如蓝色显示为橙红色), 则需启用此选项">
+      <a-switch v-model="formModel.swapRedBlue" type="round" />
+    </a-form-item>
    <!-- 低带宽模式 -->
    <a-form-item field="lowBandwidthMode"
                 label="低带宽模式"
-                 help="调整图形化配置以及禁用音频, 提升慢速网络下的响应速度">
+                 help="调整图形化配置为最低, 提升慢速网络下的响应速度">
      <a-switch v-model="formModel.lowBandwidthMode" type="round" />
    </a-form-item>
  </a-form>
--- a/orion-visor-ui/src/views/terminal/components/setting/general/terminal-rdp-graph-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/general/terminal-rdp-graph-block.vue
@@ -95,23 +95,16 @@

 <script lang="ts" setup>
  import type { TerminalRdpGraphSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
-  import { useTerminalStore, useDictStore } from '@/store';
+  import { useDictStore } from '@/store';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { screenResolutionKey, graphColorDepthKey, fitDisplayValue } from '@/views/terminal/types/const';
  import { getDisplaySize } from '@/views/terminal/types/utils';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import BlockSettingItem from '../block-setting-item.vue';

  const { toOptions, getDictValue } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();

-  const formModel = ref<TerminalRdpGraphSetting>({ ...preference.rdpGraphSetting });
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
+  const { formModel } = useTerminalPreference<TerminalRdpGraphSetting>(TerminalPreferenceItem.RDP_GRAPH_SETTING, true, (v) => {
    // 同步大小
    if (v.displaySize) {
      // 自适应大小
@@ -129,9 +122,7 @@
        }
      }
    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.RDP_GRAPH_SETTING, formModel.value, true);
-  }, { deep: true });
+  });

 </script>

--- a/orion-visor-ui/src/views/terminal/components/setting/general/terminal-rdp-session-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/general/terminal-rdp-session-block.vue
@@ -36,25 +36,15 @@

 <script lang="ts" setup>
  import type { TerminalRdpSessionSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
-  import { useDictStore, useTerminalStore } from '@/store';
+  import { useDictStore } from '@/store';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { driveMountModeKey } from '@/views/terminal/types/const';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import BlockSettingItem from '../block-setting-item.vue';

  const { toOptions, getDictValue } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();

-  const formModel = ref<TerminalRdpSessionSetting>({ ...preference.rdpSessionSetting });
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.RDP_SESSION_SETTING, formModel.value, true);
-  }, { deep: true });
+  const { formModel } = useTerminalPreference<TerminalRdpSessionSetting>(TerminalPreferenceItem.RDP_SESSION_SETTING, true);

 </script>

--- a/orion-visor-ui/src/views/terminal/components/setting/general/terminal-ssh-interact-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/general/terminal-ssh-interact-block.vue
@@ -110,26 +110,16 @@

 <script lang="ts" setup>
  import type { TerminalSshInteractSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
-  import { useTerminalStore, useDictStore } from '@/store';
+  import { useDictStore } from '@/store';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { emulationTypeKey } from '@/views/terminal/types/const';
  import { isSecureEnvironment } from '@/utils/env';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import BlockSettingItem from '../block-setting-item.vue';

  const { toOptions } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();

-  const formModel = ref<TerminalSshInteractSetting>({ ...preference.sshInteractSetting });
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SSH_INTERACT_SETTING, formModel.value);
-  }, { deep: true });
+  const { formModel } = useTerminalPreference<TerminalSshInteractSetting>(TerminalPreferenceItem.SSH_INTERACT_SETTING);

 </script>

--- a/orion-visor-ui/src/views/terminal/components/setting/general/terminal-ssh-plugins-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/general/terminal-ssh-plugins-block.vue
@@ -40,23 +40,11 @@

 <script lang="ts" setup>
  import type { TerminalSshPluginsSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
-  import { useTerminalStore } from '@/store';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import BlockSettingItem from '../block-setting-item.vue';

-  const { preference, updateTerminalPreference } = useTerminalStore();
-
-  const formModel = ref<TerminalSshPluginsSetting>({ ...preference.sshPluginsSetting });
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SSH_PLUGINS_SETTING, formModel.value);
-  }, { deep: true });
+  const { formModel } = useTerminalPreference<TerminalSshPluginsSetting>(TerminalPreferenceItem.SSH_PLUGINS_SETTING);

 </script>

--- a/orion-visor-ui/src/views/terminal/components/setting/general/terminal-vnc-graph-block.vue
+++ b/orion-visor-ui/src/views/terminal/components/setting/general/terminal-vnc-graph-block.vue
@@ -32,9 +32,12 @@
        <block-setting-item label="无损压缩" desc="是否启用对图像更新的无损压缩">
          <a-switch v-model="formModel.forceLossless" type="round" />
        </block-setting-item>
-        <!-- 交换红蓝 -->
-        <block-setting-item label="交换红蓝" desc="若显示的颜色出现错误(蓝色显示为橙色或红色等) 则需要启用此选项">
-          <a-switch v-model="formModel.swapRedBlue" type="round" />
+        <!-- 光标 -->
+        <block-setting-item label="光标" desc="光标渲染方式, 远程光标会比本地光标慢">
+          <a-select v-model="formModel.cursor"
+                    style="width: 168px;"
+                    size="small"
+                    :options="toOptions(vcnCursorKey)" />
        </block-setting-item>
      </a-row>
      <a-row class="mb16" align="stretch" :gutter="16">
@@ -59,15 +62,6 @@
                          placeholder="图像质量等级 0 ~ 9" />
        </block-setting-item>
      </a-row>
-      <a-row class="mb16" align="stretch" :gutter="16">
-        <!-- 光标 -->
-        <block-setting-item label="光标" desc="光标渲染方式, 远程光标会比本地光标慢">
-          <a-select v-model="formModel.cursor"
-                    style="width: 168px;"
-                    size="small"
-                    :options="toOptions(vcnCursorKey)" />
-        </block-setting-item>
-      </a-row>
    </div>
  </div>
 </template>
@@ -80,23 +74,16 @@

 <script lang="ts" setup>
  import type { TerminalVncGraphSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
-  import { useTerminalStore, useDictStore } from '@/store';
+  import { useDictStore } from '@/store';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
  import { graphColorDepthKey, vcnCursorKey, fitDisplayValue, screenResolutionKey } from '@/views/terminal/types/const';
  import { getDisplaySize } from '@/views/terminal/types/utils';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
  import BlockSettingItem from '../block-setting-item.vue';

  const { toOptions, getDictValue } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();

-  const formModel = ref<TerminalVncGraphSetting>({ ...preference.vncGraphSetting });
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
+  const { formModel } = useTerminalPreference<TerminalVncGraphSetting>(TerminalPreferenceItem.VNC_GRAPH_SETTING, true, (v) => {
    // 同步大小
    if (v.displaySize) {
      // 自适应大小
@@ -114,9 +101,7 @@
        }
      }
    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.VNC_GRAPH_SETTING, formModel.value, true);
-  }, { deep: true });
+  });

 </script>

--- a/orion-visor-ui/src/views/terminal/service/channel/vnc-channel.ts
+++ b/orion-visor-ui/src/views/terminal/service/channel/vnc-channel.ts
@@ -17,7 +17,6 @@ export default class VncChannel extends BaseGuacdChannel<IVncSession> {
      extra: {
        colorDepth: setting.colorDepth || 24,
        forceLossless: setting.forceLossless,
-        swapRedBlue: setting.swapRedBlue,
        cursor: setting.cursor,
        compressLevel: setting.compressLevel,
        qualityLevel: setting.qualityLevel,
--- a/orion-visor-ui/src/views/terminal/types/use-terminal-preference.ts
+++ b/orion-visor-ui/src/views/terminal/types/use-terminal-preference.ts
@@ -0,0 +1,41 @@
+import { ref, watch } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { useTerminalStore } from '@/store';
+import { isArray, isObject } from '@/utils/is';
+
+const { preference, updateTerminalPreference } = useTerminalStore();
+
+// 更新终端偏好
+export default function useTerminalPreference<T>(key: string,
+                                                 setLocal = false,
+                                                 filler?: (v: T, before: T) => void,
+                                                 delay = 500) {
+  // 默认配置
+  let initialValue = preference[key as keyof typeof preference] as T;
+  if (isArray(initialValue)) {
+    initialValue = [...initialValue] as T;
+  } else if (isObject(initialValue)) {
+    initialValue = { ...initialValue } as T;
+  }
+  const formModel = ref<T>(initialValue);
+
+  // 防抖更新
+  const debouncedUpdate = useDebounceFn(async (value: T) => {
+    // 更新
+    await updateTerminalPreference(key, value, setLocal);
+  }, delay);
+
+  // 监听表单
+  watch(formModel, async (v, before) => {
+    if (!v) {
+      return;
+    }    // 填充
+    filler?.(v, before);
+    // 更新
+    await debouncedUpdate(v);
+  }, { deep: true });
+
+  return {
+    formModel,
+  };
+}