From 456a91dfc27d42737ca4a34d8e40de3fee54a10b Mon Sep 17 00:00:00 2001
From: XuZhiqiang <xzq710675281@163.com>
Date: Thu, 18 Jun 2026 23:16:30 +0800
Subject: [PATCH] refactor(@vben/web-antdv-next): migrate plain SelectOption
 usages to options API

Replace simple label/value SelectOption children with Select options across BPM, IoT, AI, MP, Mall, codegen, and demo pages.

Keep custom option markup cases unchanged.
---
 .../src/components/cron-tab/cron-tab.vue      | 162 ++++++-----------
 .../ai/image/index/modules/common/index.vue   |  33 +---
 .../image/index/modules/midjourney/index.vue  |  21 +--
 .../index/modules/stable-diffusion/index.vue  |  38 +---
 .../src/views/ai/music/index/mode/desc.vue    |  17 +-
 .../src/views/ai/music/index/mode/lyric.vue   |  25 +--
 .../ai/workflow/form/modules/basic-info.vue   |  25 +--
 .../workflow/form/modules/workflow-design.vue |  29 +--
 .../components/BoundaryEventTimer.vue         |  13 +-
 .../components/UserTaskCustomConfig.vue       |  25 +--
 .../penal/flow-condition/FlowCondition.vue    |  45 ++---
 .../package/penal/form/ElementForm.vue        |  14 +-
 .../penal/listeners/ElementListeners.vue      |  50 +++---
 .../penal/listeners/ListenerFieldModal.vue    |  20 +--
 .../penal/listeners/UserTaskListeners.vue     |  72 ++++----
 .../multi-instance/ElementMultiInstance.vue   |  16 +-
 .../task/task-components/CallActivity.vue     |  14 +-
 .../task/task-components/ReceiveTask.vue      |  18 +-
 .../penal/task/task-components/ScriptTask.vue |  20 +--
 .../penal/task/task-components/UserTask.vue   | 111 ++++--------
 .../child-process-node-config.vue             | 146 ++++++---------
 .../nodes-config/copy-task-node-config.vue    | 120 +++++--------
 .../nodes-config/delay-timer-node-config.vue  |  15 +-
 .../nodes-config/modules/condition.vue        |  15 +-
 .../modules/http-request-param-setting.vue    |  82 ++++-----
 .../modules/http-request-setting.vue          |  34 ++--
 .../nodes-config/router-node-config.vue       |  12 +-
 .../nodes-config/trigger-node-config.vue      |  43 ++---
 .../nodes-config/user-task-node-config.vue    | 167 +++++++-----------
 .../bpm/model/form/modules/basic-info.vue     |  12 +-
 .../detail/modules/operation-button.vue       |  83 +++------
 .../infra/codegen/modules/column-info.vue     |  56 ++----
 .../views/infra/demo/general/demo01/index.vue |  19 +-
 .../infra/demo/general/demo03/erp/index.vue   |  19 +-
 .../infra/demo/general/demo03/inner/index.vue |  19 +-
 .../demo/general/demo03/normal/index.vue      |  19 +-
 .../device/device/detail/modules/message.vue  |  23 +--
 .../detail/modules/thing-model-event.vue      |  25 +--
 .../detail/modules/thing-model-service.vue    |  25 +--
 .../src/views/iot/device/device/index.vue     |  68 ++-----
 .../data/sink/config/http-config-form.vue     |  30 ++--
 .../rule/data/sink/config/tcp-config-form.vue |  21 +--
 .../sink/config/websocket-config-form.vue     |  13 +-
 .../rule/scene/form/configs/alert-config.vue  |  13 +-
 .../scene/form/configs/condition-config.vue   |  35 +---
 .../configs/main-condition-inner-config.vue   |  46 ++---
 .../rule/scene/form/inputs/value-input.vue    |  21 +--
 .../scene/form/sections/action-section.vue    |  21 +--
 .../thingmodel/modules/data-specs/number.vue  |  18 +-
 .../views/iot/thingmodel/modules/property.vue |  26 +--
 .../spu/form/modules/product-attributes.vue   |  14 +-
 .../wx-account-select/wx-account-select.vue   |  10 +-
 .../src/views/mp/menu/modules/editor.vue      |  23 +--
 53 files changed, 713 insertions(+), 1348 deletions(-)

diff --git a/apps/web-antdv-next/src/components/cron-tab/cron-tab.vue b/apps/web-antdv-next/src/components/cron-tab/cron-tab.vue
index ad11e9d25..ab9366e30 100644
--- a/apps/web-antdv-next/src/components/cron-tab/cron-tab.vue
+++ b/apps/web-antdv-next/src/components/cron-tab/cron-tab.vue
@@ -16,7 +16,6 @@ import {
   RadioButton,
   RadioGroup,
   Select,
-  SelectOption,
   TabPane,
   Tabs,
 } from 'antdv-next';
@@ -419,22 +418,21 @@ function inputChange() {
     @input="inputChange"
   >
     <template #addonAfter>
-      <Select v-model:value="select" placeholder="生成器" class="w-36">
-        <SelectOption value="0 * * * * ?">每分钟</SelectOption>
-        <SelectOption value="0 0 * * * ?">每小时</SelectOption>
-        <SelectOption value="0 0 0 * * ?">每天零点</SelectOption>
-        <SelectOption value="0 0 0 1 * ?">每月一号零点</SelectOption>
-        <SelectOption value="0 0 0 L * ?">每月最后一天零点</SelectOption>
-        <SelectOption value="0 0 0 ? * 1">每周星期日零点</SelectOption>
-        <SelectOption
-          v-for="(item, index) in shortcuts"
-          :key="index"
-          :value="item.value"
-        >
-          {{ item.text }}
-        </SelectOption>
-        <SelectOption value="custom">自定义</SelectOption>
-      </Select>
+      <Select
+        v-model:value="select"
+        placeholder="生成器"
+        class="w-36"
+        :options="[
+          { label: '每分钟', value: '0 * * * * ?' },
+          { label: '每小时', value: '0 0 * * * ?' },
+          { label: '每天零点', value: '0 0 0 * * ?' },
+          { label: '每月一号零点', value: '0 0 0 1 * ?' },
+          { label: '每月最后一天零点', value: '0 0 0 L * ?' },
+          { label: '每周星期日零点', value: '0 0 0 ? * 1' },
+          ...shortcuts.map((item) => ({ label: item.text, value: item.value })),
+          { label: '自定义', value: 'custom' },
+        ]"
+      />
     </template>
   </Input>
 
@@ -498,14 +496,10 @@ function inputChange() {
                 v-model:value="cronValue.second.appoint"
                 mode="multiple"
                 style="width: 100%"
-              >
-                <SelectOption
-                  v-for="(item, index) in data.second"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
-              </Select>
+                :options="
+                  data.second.map((item) => ({ label: item, value: item }))
+                "
+              />
             </FormItem>
           </Form>
         </TabPane>
@@ -562,14 +556,10 @@ function inputChange() {
                 v-model:value="cronValue.minute.appoint"
                 mode="multiple"
                 style="width: 100%"
-              >
-                <SelectOption
-                  v-for="(item, index) in data.minute"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
-              </Select>
+                :options="
+                  data.minute.map((item) => ({ label: item, value: item }))
+                "
+              />
             </FormItem>
           </Form>
         </TabPane>
@@ -626,14 +616,10 @@ function inputChange() {
                 v-model:value="cronValue.hour.appoint"
                 mode="multiple"
                 style="width: 100%"
-              >
-                <SelectOption
-                  v-for="(item, index) in data.hour"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
-              </Select>
+                :options="
+                  data.hour.map((item) => ({ label: item, value: item }))
+                "
+              />
             </FormItem>
           </Form>
         </TabPane>
@@ -692,14 +678,10 @@ function inputChange() {
                 v-model:value="cronValue.day.appoint"
                 mode="multiple"
                 style="width: 100%"
-              >
-                <SelectOption
-                  v-for="(item, index) in data.day"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
-              </Select>
+                :options="
+                  data.day.map((item) => ({ label: item, value: item }))
+                "
+              />
             </FormItem>
           </Form>
         </TabPane>
@@ -756,14 +738,10 @@ function inputChange() {
                 v-model:value="cronValue.month.appoint"
                 mode="multiple"
                 style="width: 100%"
-              >
-                <SelectOption
-                  v-for="(item, index) in data.month"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
-              </Select>
+                :options="
+                  data.month.map((item) => ({ label: item, value: item }))
+                "
+              />
             </FormItem>
           </Form>
         </TabPane>
@@ -787,23 +765,15 @@ function inputChange() {
               </RadioGroup>
             </FormItem>
             <FormItem v-if="cronValue.week.type === '1'" label="范围">
-              <Select v-model:value="cronValue.week.range.start">
-                <SelectOption
-                  v-for="(item, index) in data.week"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </Select>
+              <Select
+                v-model:value="cronValue.week.range.start"
+                :options="data.week"
+              />
               <span style="padding: 0 15px">-</span>
-              <Select v-model:value="cronValue.week.range.end">
-                <SelectOption
-                  v-for="(item, index) in data.week"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </Select>
+              <Select
+                v-model:value="cronValue.week.range.end"
+                :options="data.week"
+              />
             </FormItem>
             <FormItem v-if="cronValue.week.type === '2'" label="间隔">
               第
@@ -814,14 +784,10 @@ function inputChange() {
                 controls-position="right"
               />
               周的星期
-              <Select v-model:value="cronValue.week.loop.end">
-                <SelectOption
-                  v-for="(item, index) in data.week"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </Select>
+              <Select
+                v-model:value="cronValue.week.loop.end"
+                :options="data.week"
+              />
               执行一次
             </FormItem>
             <FormItem v-if="cronValue.week.type === '3'" label="指定">
@@ -829,24 +795,14 @@ function inputChange() {
                 v-model:value="cronValue.week.appoint"
                 mode="multiple"
                 style="width: 100%"
-              >
-                <SelectOption
-                  v-for="(item, index) in data.week"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </Select>
+                :options="data.week"
+              />
             </FormItem>
             <FormItem v-if="cronValue.week.type === '4'" label="最后一周">
-              <Select v-model:value="cronValue.week.last">
-                <SelectOption
-                  v-for="(item, index) in data.week"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </Select>
+              <Select
+                v-model:value="cronValue.week.last"
+                :options="data.week"
+              />
             </FormItem>
           </Form>
         </TabPane>
@@ -897,14 +853,10 @@ function inputChange() {
                 v-model:value="cronValue.year.appoint"
                 mode="multiple"
                 style="width: 100%"
-              >
-                <SelectOption
-                  v-for="(item, index) in data.year"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
-              </Select>
+                :options="
+                  data.year.map((item) => ({ label: item, value: item }))
+                "
+              />
             </FormItem>
           </Form>
         </TabPane>
diff --git a/apps/web-antdv-next/src/views/ai/image/index/modules/common/index.vue b/apps/web-antdv-next/src/views/ai/image/index/modules/common/index.vue
index 2ac784268..f614f2b9a 100644
--- a/apps/web-antdv-next/src/views/ai/image/index/modules/common/index.vue
+++ b/apps/web-antdv-next/src/views/ai/image/index/modules/common/index.vue
@@ -12,14 +12,7 @@ import {
   OtherPlatformEnum,
 } from '@vben/constants';
 
-import {
-  Button,
-  InputNumber,
-  Select,
-  SelectOption,
-  Space,
-  TextArea,
-} from 'antdv-next';
+import { Button, InputNumber, Select, Space, TextArea } from 'antdv-next';
 
 import { drawImage } from '#/api/ai/image';
 
@@ -154,15 +147,9 @@ defineExpose({ settingValues });
         size="large"
         class="!w-80"
         @change="handlerPlatformChange"
-      >
-        <SelectOption
-          v-for="item in OtherPlatformEnum"
-          :key="item.key"
-          :value="item.key"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="OtherPlatformEnum"
+        :field-names="{ label: 'name', value: 'key' }"
+      />
     </Space>
   </div>
 
@@ -176,15 +163,9 @@ defineExpose({ settingValues });
         placeholder="Select"
         size="large"
         class="!w-80"
-      >
-        <SelectOption
-          v-for="item in platformModels"
-          :key="item.id"
-          :value="item.id"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="platformModels"
+        :field-names="{ label: 'name', value: 'id' }"
+      />
     </Space>
   </div>
 
diff --git a/apps/web-antdv-next/src/views/ai/image/index/modules/midjourney/index.vue b/apps/web-antdv-next/src/views/ai/image/index/modules/midjourney/index.vue
index 783b5f5a3..3544a991b 100644
--- a/apps/web-antdv-next/src/views/ai/image/index/modules/midjourney/index.vue
+++ b/apps/web-antdv-next/src/views/ai/image/index/modules/midjourney/index.vue
@@ -17,15 +17,7 @@ import {
   NijiVersionList,
 } from '@vben/constants';
 
-import {
-  Button,
-  Image,
-  message,
-  Select,
-  SelectOption,
-  Space,
-  TextArea,
-} from 'antdv-next';
+import { Button, Image, message, Select, Space, TextArea } from 'antdv-next';
 
 import { midjourneyImagine } from '#/api/ai/image';
 import { ImageUpload } from '#/components/upload';
@@ -222,15 +214,8 @@ defineExpose({ settingValues });
         class="!w-80"
         allow-clear
         placeholder="请选择版本"
-      >
-        <SelectOption
-          v-for="item in versionList"
-          :key="item.value"
-          :value="item.value"
-        >
-          {{ item.label }}
-        </SelectOption>
-      </Select>
+        :options="versionList"
+      />
     </Space>
   </div>
 
diff --git a/apps/web-antdv-next/src/views/ai/image/index/modules/stable-diffusion/index.vue b/apps/web-antdv-next/src/views/ai/image/index/modules/stable-diffusion/index.vue
index 451fc907e..32c4626a8 100644
--- a/apps/web-antdv-next/src/views/ai/image/index/modules/stable-diffusion/index.vue
+++ b/apps/web-antdv-next/src/views/ai/image/index/modules/stable-diffusion/index.vue
@@ -19,7 +19,6 @@ import {
   InputNumber,
   message,
   Select,
-  SelectOption,
   Space,
   TextArea,
 } from 'antdv-next';
@@ -169,15 +168,9 @@ defineExpose({ settingValues });
         placeholder="Select"
         size="large"
         class="!w-80"
-      >
-        <SelectOption
-          v-for="item in StableDiffusionSamplers"
-          :key="item.key"
-          :value="item.key"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="StableDiffusionSamplers"
+        :field-names="{ label: 'name', value: 'key' }"
+      />
     </Space>
   </div>
 
@@ -190,15 +183,9 @@ defineExpose({ settingValues });
         placeholder="Select"
         size="large"
         class="!w-80"
-      >
-        <SelectOption
-          v-for="item in StableDiffusionClipGuidancePresets"
-          :key="item.key"
-          :value="item.key"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="StableDiffusionClipGuidancePresets"
+        :field-names="{ label: 'name', value: 'key' }"
+      />
     </Space>
   </div>
 
@@ -211,16 +198,9 @@ defineExpose({ settingValues });
         placeholder="Select"
         size="large"
         class="!w-80"
-      >
-        <SelectOption
-          v-for="item in StableDiffusionStylePresets"
-          :key="item.key"
-          :label="item.name"
-          :value="item.key"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="StableDiffusionStylePresets"
+        :field-names="{ label: 'name', value: 'key' }"
+      />
     </Space>
   </div>
 
diff --git a/apps/web-antdv-next/src/views/ai/music/index/mode/desc.vue b/apps/web-antdv-next/src/views/ai/music/index/mode/desc.vue
index a3bf14ca1..ad9f039ff 100644
--- a/apps/web-antdv-next/src/views/ai/music/index/mode/desc.vue
+++ b/apps/web-antdv-next/src/views/ai/music/index/mode/desc.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
 
-import { Select, SelectOption, Switch, TextArea } from 'antdv-next';
+import { Select, Switch, TextArea } from 'antdv-next';
 
 import Title from '../title/index.vue';
 
@@ -47,9 +47,8 @@ defineExpose({
         v-model:value="formData.version"
         class="w-full"
         placeholder="请选择"
-      >
-        <SelectOption
-          v-for="item in [
+        :options="[
+          ...[
             {
               value: '3',
               label: 'V3',
@@ -58,13 +57,9 @@ defineExpose({
               value: '2',
               label: 'V2',
             },
-          ]"
-          :key="item.value"
-          :value="item.value"
-        >
-          {{ item.label }}
-        </SelectOption>
-      </Select>
+          ].map((item) => ({ label: item.label, value: item.value })),
+        ]"
+      />
     </Title>
   </div>
 </template>
diff --git a/apps/web-antdv-next/src/views/ai/music/index/mode/lyric.vue b/apps/web-antdv-next/src/views/ai/music/index/mode/lyric.vue
index 77cc59437..93af60767 100644
--- a/apps/web-antdv-next/src/views/ai/music/index/mode/lyric.vue
+++ b/apps/web-antdv-next/src/views/ai/music/index/mode/lyric.vue
@@ -1,15 +1,7 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 
-import {
-  Button,
-  Input,
-  Select,
-  SelectOption,
-  Space,
-  Tag,
-  TextArea,
-} from 'antdv-next';
+import { Button, Input, Select, Space, Tag, TextArea } from 'antdv-next';
 
 import Title from '../title/index.vue';
 
@@ -88,9 +80,8 @@ defineExpose({
         v-model:value="formData.version"
         class="w-full"
         placeholder="请选择"
-      >
-        <SelectOption
-          v-for="item in [
+        :options="[
+          ...[
             {
               value: '3',
               label: 'V3',
@@ -99,13 +90,9 @@ defineExpose({
               value: '2',
               label: 'V2',
             },
-          ]"
-          :key="item.value"
-          :value="item.value"
-        >
-          {{ item.label }}
-        </SelectOption>
-      </Select>
+          ].map((item) => ({ label: item.label, value: item.value })),
+        ]"
+      />
     </Title>
   </div>
 </template>
diff --git a/apps/web-antdv-next/src/views/ai/workflow/form/modules/basic-info.vue b/apps/web-antdv-next/src/views/ai/workflow/form/modules/basic-info.vue
index 0c98d244d..a15737c74 100644
--- a/apps/web-antdv-next/src/views/ai/workflow/form/modules/basic-info.vue
+++ b/apps/web-antdv-next/src/views/ai/workflow/form/modules/basic-info.vue
@@ -4,14 +4,7 @@ import { ref } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import {
-  Form,
-  FormItem,
-  Input,
-  Select,
-  SelectOption,
-  TextArea,
-} from 'antdv-next';
+import { Form, FormItem, Input, Select, TextArea } from 'antdv-next';
 
 type Rule = any;
 const modelData = defineModel<any>(); // 创建本地数据副本
@@ -60,15 +53,13 @@ defineExpose({ validate });
         v-model:value="modelData.status"
         allow-clear
         placeholder="请选择状态"
-      >
-        <SelectOption
-          v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS, 'number')"
-          :key="dict.value"
-          :value="dict.value"
-        >
-          {{ dict.label }}
-        </SelectOption>
-      </Select>
+        :options="
+          getDictOptions(DICT_TYPE.COMMON_STATUS, 'number').map((dict) => ({
+            label: dict.label,
+            value: dict.value as any,
+          }))
+        "
+      />
     </FormItem>
     <FormItem label="流程描述" name="description" class="mb-5">
       <TextArea v-model:value="modelData.description" allow-clear />
diff --git a/apps/web-antdv-next/src/views/ai/workflow/form/modules/workflow-design.vue b/apps/web-antdv-next/src/views/ai/workflow/form/modules/workflow-design.vue
index 41c7bddd0..a4509eede 100644
--- a/apps/web-antdv-next/src/views/ai/workflow/form/modules/workflow-design.vue
+++ b/apps/web-antdv-next/src/views/ai/workflow/form/modules/workflow-design.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import { inject, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { Tinyflow } from '@vben/plugins/tinyflow';
 import { isNumber } from '@vben/utils';
 
-import { Button, Input, Select, SelectOption } from 'antdv-next';
+import { Button, Input, Select } from 'antdv-next';
 
 import { testWorkflow } from '#/api/ai/workflow';
 
@@ -20,6 +20,15 @@ const tinyflowRef = ref<InstanceType<typeof Tinyflow> | null>(null);
 const workflowData = inject('workflowData') as Ref;
 const params4Test = ref<any[]>([]);
 const paramsOfStartNode = ref<any>({});
+const startNodeParamOptions = computed(() =>
+  Object.entries(paramsOfStartNode.value).map(
+    ([key, value]: [string, any]) => ({
+      label: value?.description || key,
+      value: key,
+      disabled: !!value?.disabled,
+    }),
+  ),
+);
 const testResult = ref(null);
 const loading = ref(false);
 const error = ref(null);
@@ -231,16 +240,12 @@ defineExpose({ validate });
             v-for="(param, index) in params4Test"
             :key="index"
           >
-            <Select class="w-48" v-model="param.key" placeholder="参数名">
-              <SelectOption
-                v-for="(value, key) in paramsOfStartNode"
-                :key="key"
-                :value="key"
-                :disabled="!!value?.disabled"
-              >
-                {{ value?.description || key }}
-              </SelectOption>
-            </Select>
+            <Select
+              v-model="param.key"
+              :options="startNodeParamOptions"
+              class="w-48"
+              placeholder="参数名"
+            />
             <Input
               class="mx-2 w-48"
               v-model:value="param.value"
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
index 026a71d40..06c3f9f97 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
@@ -10,7 +10,6 @@ import {
   RadioGroup,
   Row,
   Select,
-  SelectOption,
   Switch,
   TypographyText,
 } from 'antdv-next';
@@ -277,18 +276,10 @@ watch(
         <Col>
           <Select
             v-model:value="timeUnit"
+            :options="TIME_UNIT_TYPES"
             class="mr-2 !w-24"
             @change="onTimeUnitChange"
-          >
-            <SelectOption
-              v-for="item in TIME_UNIT_TYPES"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-              {{ item.label }}
-            </SelectOption>
-          </Select>
+          />
           <TypographyText class="mr-2 mt-2 inline-flex text-sm">
             未处理
           </TypographyText>
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
index a061f38b6..ce0a66387 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
@@ -25,7 +25,6 @@ import {
   Radio,
   RadioGroup,
   Select,
-  SelectOption,
   Switch,
 } from 'antdv-next';
 
@@ -488,15 +487,9 @@ onMounted(async () => {
         style="width: 100%"
         @change="updateReturnNodeId"
         placeholder="请选择驳回节点"
-      >
-        <SelectOption
-          v-for="item in returnTaskList"
-          :key="item.id"
-          :value="item.id"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="returnTaskList"
+        :field-names="{ label: 'name', value: 'id' }"
+      />
     </FormItem>
 
     <Divider orientation="left">审批人为空时</Divider>
@@ -525,15 +518,9 @@ onMounted(async () => {
         mode="multiple"
         style="width: 100%"
         @change="updateAssignEmptyUserIds"
-      >
-        <SelectOption
-          v-for="item in userOptions"
-          :key="item.id"
-          :value="item.id"
-        >
-          {{ item.nickname }}
-        </SelectOption>
-      </Select>
+        :options="userOptions"
+        :field-names="{ label: 'nickname', value: 'id' }"
+      />
     </FormItem>
 
     <Divider orientation="left">审批人与提交人为同一人时</Divider>
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
index 022fe4204..6dbc9f04c 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
@@ -1,14 +1,7 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
-import {
-  Form,
-  FormItem,
-  Input,
-  Select,
-  SelectOption,
-  TextArea,
-} from 'antdv-next';
+import { Form, FormItem, Input, Select, TextArea } from 'antdv-next';
 
 defineOptions({ name: 'FlowCondition' });
 
@@ -164,21 +157,28 @@ watch(
       :wrapper-col="{ span: 18 }"
     >
       <FormItem label="流转类型">
-        <Select v-model:value="flowConditionForm.type" @change="updateFlowType">
-          <SelectOption value="normal">普通流转路径</SelectOption>
-          <SelectOption value="default">默认流转路径</SelectOption>
-          <SelectOption value="condition">条件流转路径</SelectOption>
-        </Select>
+        <Select
+          v-model:value="flowConditionForm.type"
+          @change="updateFlowType"
+          :options="[
+            { label: '普通流转路径', value: 'normal' },
+            { label: '默认流转路径', value: 'default' },
+            { label: '条件流转路径', value: 'condition' },
+          ]"
+        />
       </FormItem>
       <FormItem
         label="条件格式"
         v-if="flowConditionForm.type === 'condition'"
         key="condition"
       >
-        <Select v-model:value="flowConditionForm.conditionType">
-          <SelectOption value="expression">表达式</SelectOption>
-          <SelectOption value="script">脚本</SelectOption>
-        </Select>
+        <Select
+          v-model:value="flowConditionForm.conditionType"
+          :options="[
+            { label: '表达式', value: 'expression' },
+            { label: '脚本', value: 'script' },
+          ]"
+        />
       </FormItem>
       <FormItem
         label="表达式"
@@ -209,10 +209,13 @@ watch(
           />
         </FormItem>
         <FormItem label="脚本类型" key="scriptType">
-          <Select v-model:value="flowConditionForm.scriptType">
-            <SelectOption value="inlineScript">内联脚本</SelectOption>
-            <SelectOption value="externalScript">外部脚本</SelectOption>
-          </Select>
+          <Select
+            v-model:value="flowConditionForm.scriptType"
+            :options="[
+              { label: '内联脚本', value: 'inlineScript' },
+              { label: '外部脚本', value: 'externalScript' },
+            ]"
+          />
         </FormItem>
         <FormItem
           label="脚本"
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
index eb24f4359..6dd55bc05 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
@@ -4,7 +4,7 @@ import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
 
 import { cloneDeep } from '@vben/utils';
 
-import { Form, FormItem, Select, SelectOption } from 'antdv-next';
+import { Form, FormItem, Select } from 'antdv-next';
 
 import { getFormSimpleList } from '#/api/bpm/form';
 
@@ -319,14 +319,13 @@ watch(
       <FormItem label="业务标识">
         <Select
           v-model:value="businessKey"
+          :options="[
+            ...fieldList.map((i) => ({ label: i.label, value: i.id })),
+            { label: '无', value: '' },
+          ]"
           @change="_updateElementBusinessKey"
           allow-clear
-        >
-          <SelectOption v-for="i in fieldList" :key="i.id" :value="i.id">
-            {{ i.label }}
-          </SelectOption>
-          <SelectOption value="">无</SelectOption>
-        </Select>
+        />
       </FormItem>
     </Form>
 
@@ -388,7 +387,6 @@ watch(
     <!--            allowClear-->
     <!--            @change="changeFieldTypeType"-->
     <!--          >-->
-    <!--            <SelectOption v-for="(value, key) of fieldType" :key="key" :value="key">{{ value }}</SelectOption>-->
     <!--          </Select>-->
     <!--        </FormItem>-->
     <!--        <FormItem label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
index 4057d5bab..5a8e09945 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -5,15 +5,7 @@ import { confirm, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import {
-  Button,
-  Divider,
-  Form,
-  FormItem,
-  Input,
-  Select,
-  SelectOption,
-} from 'antdv-next';
+import { Button, Divider, Form, FormItem, Input, Select } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { ProcessListenerSelectModal } from '#/views/bpm/processListener/components';
@@ -392,10 +384,13 @@ watch(
             },
           ]"
         >
-          <Select v-model:value="listenerForm.event">
-            <SelectOption value="start">start</SelectOption>
-            <SelectOption value="end">end</SelectOption>
-          </Select>
+          <Select
+            v-model:value="listenerForm.event"
+            :options="[
+              { label: 'start', value: 'start' },
+              { label: 'end', value: 'end' },
+            ]"
+          />
         </FormItem>
         <FormItem
           label="监听器类型"
@@ -408,15 +403,15 @@ watch(
             },
           ]"
         >
-          <Select v-model:value="listenerForm.listenerType">
-            <SelectOption
-              v-for="i in Object.keys(listenerTypeObject)"
-              :key="i"
-              :value="i"
-            >
-              {{ listenerTypeObject[i as keyof typeof listenerType] }}
-            </SelectOption>
-          </Select>
+          <Select
+            v-model:value="listenerForm.listenerType"
+            :options="
+              Object.keys(listenerTypeObject).map((i) => ({
+                label: listenerTypeObject[i as keyof typeof listenerType],
+                value: i,
+              }))
+            "
+          />
         </FormItem>
         <FormItem
           v-if="listenerForm.listenerType === 'classListener'"
@@ -490,10 +485,13 @@ watch(
               },
             ]"
           >
-            <Select v-model:value="listenerForm.scriptType">
-              <SelectOption value="inlineScript">内联脚本</SelectOption>
-              <SelectOption value="externalScript">外部脚本</SelectOption>
-            </Select>
+            <Select
+              v-model:value="listenerForm.scriptType"
+              :options="[
+                { label: '内联脚本', value: 'inlineScript' },
+                { label: '外部脚本', value: 'externalScript' },
+              ]"
+            />
           </FormItem>
           <FormItem
             v-if="listenerForm.scriptType === 'inlineScript'"
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
index cdf5e62fe..2c7930bd8 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Form, FormItem, Input, Select, SelectOption } from 'antdv-next';
+import { Form, FormItem, Input, Select } from 'antdv-next';
 
 import { fieldType } from './utilSelf';
 
@@ -72,15 +72,15 @@ const [Modal, modalApi] = useVbenModal({
           },
         ]"
       >
-        <Select v-model:value="form.fieldType">
-          <SelectOption
-            v-for="i in Object.keys(fieldTypeObject)"
-            :key="i"
-            :value="i"
-          >
-            {{ fieldTypeObject[i as keyof typeof fieldType] }}
-          </SelectOption>
-        </Select>
+        <Select
+          v-model:value="form.fieldType"
+          :options="[
+            ...Object.keys(fieldTypeObject).map((i) => ({
+              label: fieldTypeObject[i as keyof typeof fieldType],
+              value: i,
+            })),
+          ]"
+        />
       </FormItem>
       <FormItem
         v-if="form.fieldType === 'string'"
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
index a6dc8312d..fb8700f94 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -5,15 +5,7 @@ import { confirm, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import {
-  Button,
-  Divider,
-  Form,
-  FormItem,
-  Input,
-  Select,
-  SelectOption,
-} from 'antdv-next';
+import { Button, Divider, Form, FormItem, Input, Select } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { ProcessListenerSelectModal } from '#/views/bpm/processListener/components';
@@ -379,15 +371,15 @@ watch(
             name="event"
             :rules="[{ required: true, message: '请选择事件类型' }]"
           >
-            <Select v-model:value="listenerForm.event">
-              <SelectOption
-                v-for="i in Object.keys(listenerEventTypeObject)"
-                :key="i"
-                :value="i"
-              >
-                {{ listenerEventTypeObject[i as keyof typeof eventType] }}
-              </SelectOption>
-            </Select>
+            <Select
+              v-model:value="listenerForm.event"
+              :options="[
+                ...Object.keys(listenerEventTypeObject).map((i) => ({
+                  label: listenerEventTypeObject[i as keyof typeof eventType],
+                  value: i,
+                })),
+              ]"
+            />
           </FormItem>
           <FormItem
             label="监听器ID"
@@ -401,15 +393,15 @@ watch(
             name="listenerType"
             :rules="[{ required: true, message: '请选择监听器类型' }]"
           >
-            <Select v-model:value="listenerForm.listenerType">
-              <SelectOption
-                v-for="i in Object.keys(listenerTypeObject)"
-                :key="i"
-                :value="i"
-              >
-                {{ listenerTypeObject[i as keyof typeof listenerType] }}
-              </SelectOption>
-            </Select>
+            <Select
+              v-model:value="listenerForm.listenerType"
+              :options="[
+                ...Object.keys(listenerTypeObject).map((i) => ({
+                  label: listenerTypeObject[i as keyof typeof listenerType],
+                  value: i,
+                })),
+              ]"
+            />
           </FormItem>
           <FormItem
             v-if="listenerForm.listenerType === 'classListener'"
@@ -456,10 +448,13 @@ watch(
               key="listener-script-type"
               :rules="[{ required: true, message: '请选择脚本类型' }]"
             >
-              <Select v-model:value="listenerForm.scriptType">
-                <SelectOption value="inlineScript">内联脚本</SelectOption>
-                <SelectOption value="externalScript">外部脚本</SelectOption>
-              </Select>
+              <Select
+                v-model:value="listenerForm.scriptType"
+                :options="[
+                  { label: '内联脚本', value: 'inlineScript' },
+                  { label: '外部脚本', value: 'externalScript' },
+                ]"
+              />
             </FormItem>
             <FormItem
               v-if="listenerForm.scriptType === 'inlineScript'"
@@ -487,12 +482,15 @@ watch(
               name="eventDefinitionType"
               key="eventDefinitionType"
             >
-              <Select v-model:value="listenerForm.eventDefinitionType">
-                <SelectOption value="date">日期</SelectOption>
-                <SelectOption value="duration">持续时长</SelectOption>
-                <SelectOption value="cycle">循环</SelectOption>
-                <SelectOption value="null">无</SelectOption>
-              </Select>
+              <Select
+                v-model:value="listenerForm.eventDefinitionType"
+                :options="[
+                  { label: '日期', value: 'date' },
+                  { label: '持续时长', value: 'duration' },
+                  { label: '循环', value: 'cycle' },
+                  { label: '无', value: 'null' },
+                ]"
+              />
             </FormItem>
             <FormItem
               v-if="
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
index 06538e71c..c87f5ec2a 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -11,7 +11,6 @@ import {
   Radio,
   RadioGroup,
   Select,
-  SelectOption,
 } from 'antdv-next';
 
 import {
@@ -448,15 +447,12 @@ watch(
         <Select
           v-model:value="loopCharacteristics"
           @change="changeLoopCharacteristicsType"
-        >
-          <SelectOption value="ParallelMultiInstance">
-            并行多重事件
-          </SelectOption>
-          <SelectOption value="SequentialMultiInstance">
-            时序多重事件
-          </SelectOption>
-          <SelectOption value="Null">无</SelectOption>
-        </Select>
+          :options="[
+            { label: '并行多重事件', value: 'ParallelMultiInstance' },
+            { label: '时序多重事件', value: 'SequentialMultiInstance' },
+            { label: '无', value: 'Null' },
+          ]"
+        />
       </FormItem>
       <template
         v-if="
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
index c185c73c5..b33f5509e 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
@@ -11,7 +11,6 @@ import {
   FormItem,
   Input,
   Select,
-  SelectOption,
   Switch,
 } from 'antdv-next';
 
@@ -269,16 +268,9 @@ onMounted(async () => {
           placeholder="请选择子流程"
           allow-clear
           @change="handleChildProcessChange"
-        >
-          <SelectOption
-            v-for="item in childProcessOptions"
-            :key="item.key"
-            :value="item.key"
-            :label="item.name"
-          >
-            {{ item.name }}
-          </SelectOption>
-        </Select>
+          :options="childProcessOptions"
+          :field-names="{ label: 'name', value: 'key' }"
+        />
       </FormItem>
 
       <FormItem label="继承变量">
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
index 11b50d8fc..709cbeae6 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
@@ -4,7 +4,7 @@ import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, message, Select, SelectOption } from 'antdv-next';
+import { Button, message, Select } from 'antdv-next';
 
 import SignalMessageModal from '../../signal-message/SignalMessageModal.vue';
 
@@ -118,17 +118,15 @@ watch(
       <span class="w-20 text-foreground">消息实例:</span>
       <Select
         v-model:value="bindMessageId"
+        :options="
+          Object.keys(messageMap).map((key) => ({
+            label: messageMap[key],
+            value: key,
+          }))
+        "
         class="w-full"
         @change="(value: any) => updateTaskMessage(value)"
-      >
-        <SelectOption
-          v-for="key in Object.keys(messageMap)"
-          :key="key"
-          :value="key"
-        >
-          {{ messageMap[key] }}
-        </SelectOption>
-      </Select>
+      />
     </div>
     <Modal @confirm="handleConfirm" />
   </div>
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
index 7b80de1cd..ccf7e44b5 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
@@ -1,14 +1,7 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
-import {
-  Form,
-  FormItem,
-  Input,
-  Select,
-  SelectOption,
-  TextArea,
-} from 'antdv-next';
+import { Form, FormItem, Input, Select, TextArea } from 'antdv-next';
 
 defineOptions({ name: 'ScriptTask' });
 const props = defineProps({
@@ -86,10 +79,13 @@ watch(
       </FormItem>
       <!-- TODO scriptType  外部资源 和 内联脚本，  flowable 文档 https://www.flowable.com/open-source/docs/bpmn/ch07b-BPMN-Constructs#script-task  没看到到有相应的属性 -->
       <FormItem label="脚本类型">
-        <Select v-model:value="scriptTaskForm.scriptType">
-          <SelectOption value="inline">内联脚本</SelectOption>
-          <SelectOption value="external">外部资源</SelectOption>
-        </Select>
+        <Select
+          v-model:value="scriptTaskForm.scriptType"
+          :options="[
+            { label: '内联脚本', value: 'inline' },
+            { label: '外部资源', value: 'external' },
+          ]"
+        />
       </FormItem>
       <FormItem label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
         <TextArea
diff --git a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
index 9c9538bf9..52059746e 100644
--- a/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -26,7 +26,6 @@ import {
   Form,
   FormItem,
   Select,
-  SelectOption,
   TextArea,
   TreeSelect,
 } from 'antdv-next';
@@ -356,15 +355,8 @@ onBeforeUnmount(() => {
         allow-clear
         style="width: 100%"
         @change="changeCandidateStrategy"
-      >
-        <SelectOption
-          v-for="(dict, index) in CANDIDATE_STRATEGY"
-          :key="index"
-          :value="dict.value"
-        >
-          {{ dict.label }}
-        </SelectOption>
-      </Select>
+        :options="CANDIDATE_STRATEGY"
+      />
     </FormItem>
     <FormItem
       v-if="userTaskForm.candidateStrategy === CandidateStrategy.ROLE"
@@ -377,15 +369,9 @@ onBeforeUnmount(() => {
         mode="multiple"
         style="width: 100%"
         @change="updateElementTask"
-      >
-        <SelectOption
-          v-for="item in roleOptions"
-          :key="item.id"
-          :value="item.id"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="roleOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+      />
     </FormItem>
     <FormItem
       v-if="
@@ -419,15 +405,9 @@ onBeforeUnmount(() => {
         mode="multiple"
         style="width: 100%"
         @change="updateElementTask"
-      >
-        <SelectOption
-          v-for="item in postOptions"
-          :key="item.id"
-          :value="item.id"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="postOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+      />
     </FormItem>
     <FormItem
       v-if="userTaskForm.candidateStrategy === CandidateStrategy.USER"
@@ -440,15 +420,9 @@ onBeforeUnmount(() => {
         mode="multiple"
         style="width: 100%"
         @change="updateElementTask"
-      >
-        <SelectOption
-          v-for="item in userOptions"
-          :key="item.id"
-          :value="item.id"
-        >
-          {{ item.nickname }}
-        </SelectOption>
-      </Select>
+        :options="userOptions"
+        :field-names="{ label: 'nickname', value: 'id' }"
+      />
     </FormItem>
     <FormItem
       v-if="userTaskForm.candidateStrategy === CandidateStrategy.USER_GROUP"
@@ -461,15 +435,9 @@ onBeforeUnmount(() => {
         mode="multiple"
         style="width: 100%"
         @change="updateElementTask"
-      >
-        <SelectOption
-          v-for="item in userGroupOptions"
-          :key="item.id"
-          :value="item.id"
-        >
-          {{ item.name }}
-        </SelectOption>
-      </Select>
+        :options="userGroupOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+      />
     </FormItem>
     <FormItem
       v-if="userTaskForm.candidateStrategy === CandidateStrategy.FORM_USER"
@@ -478,19 +446,17 @@ onBeforeUnmount(() => {
     >
       <Select
         v-model:value="userTaskForm.candidateParam"
+        :options="
+          userFieldOnFormOptions.map((item) => ({
+            label: item.title,
+            value: item.field,
+            disabled: !item.required,
+          }))
+        "
         allow-clear
         style="width: 100%"
         @change="handleFormUserChange"
-      >
-        <SelectOption
-          v-for="(item, idx) in userFieldOnFormOptions"
-          :key="idx"
-          :value="item.field"
-          :disabled="!item.required"
-        >
-          {{ item.title }}
-        </SelectOption>
-      </Select>
+      />
     </FormItem>
     <FormItem
       v-if="
@@ -504,16 +470,14 @@ onBeforeUnmount(() => {
         allow-clear
         style="width: 100%"
         @change="updateElementTask"
-      >
-        <SelectOption
-          v-for="(item, idx) in deptFieldOnFormOptions"
-          :key="idx"
-          :value="item.field"
-          :disabled="!item.required"
-        >
-          {{ item.title }}
-        </SelectOption>
-      </Select>
+        :options="[
+          ...deptFieldOnFormOptions.map((item) => ({
+            label: item.title,
+            value: item.field,
+            disabled: !item.required,
+          })),
+        ]"
+      />
     </FormItem>
     <FormItem
       v-if="
@@ -528,15 +492,12 @@ onBeforeUnmount(() => {
       :label="deptLevelLabel!"
       name="deptLevel"
     >
-      <Select v-model:value="deptLevel" allow-clear @change="updateElementTask">
-        <SelectOption
-          v-for="(item, index) in MULTI_LEVEL_DEPT"
-          :key="index"
-          :value="item.value"
-        >
-          {{ item.label }}
-        </SelectOption>
-      </Select>
+      <Select
+        v-model:value="deptLevel"
+        allow-clear
+        @change="updateElementTask"
+        :options="MULTI_LEVEL_DEPT"
+      />
     </FormItem>
     <FormItem
       v-if="userTaskForm.candidateStrategy === CandidateStrategy.EXPRESSION"
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
index b5de5f559..bf8e1218e 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
@@ -21,7 +21,6 @@ import {
   RadioGroup,
   Row,
   Select,
-  SelectOption,
   Switch,
 } from 'antdv-next';
 
@@ -432,15 +431,9 @@ onMounted(async () => {
             v-model:value="configForm.calledProcessDefinitionKey"
             allow-clear
             @change="handleCalledElementChange"
-          >
-            <SelectOption
-              v-for="(item, index) in childProcessOptions"
-              :key="index"
-              :value="item.key"
-            >
-              {{ item.name }}
-            </SelectOption>
-          </Select>
+            :options="childProcessOptions"
+            :field-names="{ label: 'name', value: 'key' }"
+          />
         </FormItem>
         <FormItem
           label="是否自动跳过子流程发起节点"
@@ -472,15 +465,12 @@ onMounted(async () => {
                   },
                 ]"
               >
-                <Select class="!w-40" v-model:value="item.source">
-                  <SelectOption
-                    v-for="(field, fIdx) in formFieldOptions"
-                    :key="fIdx"
-                    :value="field.field"
-                  >
-                    {{ field.title }}
-                  </SelectOption>
-                </Select>
+                <Select
+                  class="!w-40"
+                  v-model:value="item.source"
+                  :options="formFieldOptions"
+                  :field-names="{ label: 'title', value: 'field' }"
+                />
               </FormItem>
             </div>
             <div class="mr-2">
@@ -494,15 +484,12 @@ onMounted(async () => {
                   },
                 ]"
               >
-                <Select class="!w-40" v-model:value="item.target">
-                  <SelectOption
-                    v-for="(field, fIdx) in childFormFieldOptions"
-                    :key="fIdx"
-                    :value="field.field"
-                  >
-                    {{ field.title }}
-                  </SelectOption>
-                </Select>
+                <Select
+                  class="!w-40"
+                  v-model:value="item.target"
+                  :options="childFormFieldOptions"
+                  :field-names="{ label: 'title', value: 'field' }"
+                />
               </FormItem>
             </div>
             <div class="mr-1 flex h-8 items-center">
@@ -546,15 +533,12 @@ onMounted(async () => {
                   },
                 ]"
               >
-                <Select class="!w-40" v-model:value="item.source">
-                  <SelectOption
-                    v-for="(field, fIdx) in childFormFieldOptions"
-                    :key="fIdx"
-                    :value="field.field"
-                  >
-                    {{ field.title }}
-                  </SelectOption>
-                </Select>
+                <Select
+                  class="!w-40"
+                  v-model:value="item.source"
+                  :options="childFormFieldOptions"
+                  :field-names="{ label: 'title', value: 'field' }"
+                />
               </FormItem>
             </div>
             <div class="mr-2">
@@ -568,15 +552,12 @@ onMounted(async () => {
                   },
                 ]"
               >
-                <Select class="!w-40" v-model:value="item.target">
-                  <SelectOption
-                    v-for="(field, fIdx) in formFieldOptions"
-                    :key="fIdx"
-                    :value="field.field"
-                  >
-                    {{ field.title }}
-                  </SelectOption>
-                </Select>
+                <Select
+                  class="!w-40"
+                  v-model:value="item.target"
+                  :options="formFieldOptions"
+                  :field-names="{ label: 'title', value: 'field' }"
+                />
               </FormItem>
             </div>
             <div class="mr-1 flex h-8 items-center">
@@ -617,16 +598,12 @@ onMounted(async () => {
           label="子流程发起人字段"
           name="startUserFormField"
         >
-          <Select v-model:value="configForm.startUserFormField" allow-clear>
-            <SelectOption
-              v-for="(field, fIdx) in startUserFormFieldOptions"
-              :key="fIdx"
-              :label="field.title"
-              :value="field.field"
-            >
-              {{ field.title }}
-            </SelectOption>
-          </Select>
+          <Select
+            v-model:value="configForm.startUserFormField"
+            allow-clear
+            :options="startUserFormFieldOptions"
+            :field-names="{ label: 'title', value: 'field' }"
+          />
         </FormItem>
         <FormItem
           v-if="
@@ -690,16 +667,11 @@ onMounted(async () => {
                 </FormItem>
               </Col>
               <Col>
-                <Select v-model:value="configForm.timeUnit" class="w-24">
-                  <SelectOption
-                    v-for="item in TIME_UNIT_TYPES"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                    {{ item.label }}
-                  </SelectOption>
-                </Select>
+                <Select
+                  v-model:value="configForm.timeUnit"
+                  class="w-24"
+                  :options="TIME_UNIT_TYPES"
+                />
               </Col>
               <Col>
                 <span class="inline-flex h-8 items-center">后进入下一节点</span>
@@ -782,16 +754,8 @@ onMounted(async () => {
             <Select
               v-model:value="configForm.multiInstanceSourceType"
               @change="handleMultiInstanceSourceTypeChange"
-            >
-              <SelectOption
-                v-for="item in CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-                {{ item.label }}
-              </SelectOption>
-            </Select>
+              :options="CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE"
+            />
           </FormItem>
           <FormItem
             v-if="
@@ -834,16 +798,11 @@ onMounted(async () => {
               },
             ]"
           >
-            <Select v-model:value="configForm.multiInstanceSource">
-              <SelectOption
-                v-for="(field, fIdx) in digitalFormFieldOptions"
-                :key="fIdx"
-                :label="field.title"
-                :value="field.field"
-              >
-                {{ field.title }}
-              </SelectOption>
-            </Select>
+            <Select
+              v-model:value="configForm.multiInstanceSource"
+              :options="digitalFormFieldOptions"
+              :field-names="{ label: 'title', value: 'field' }"
+            />
           </FormItem>
           <FormItem
             v-if="
@@ -863,16 +822,11 @@ onMounted(async () => {
               },
             ]"
           >
-            <Select v-model:value="configForm.multiInstanceSource">
-              <SelectOption
-                v-for="(field, fIdx) in multiFormFieldOptions"
-                :key="fIdx"
-                :label="field.title"
-                :value="field.field"
-              >
-                {{ field.title }}
-              </SelectOption>
-            </Select>
+            <Select
+              v-model:value="configForm.multiInstanceSource"
+              :options="multiFormFieldOptions"
+              :field-names="{ label: 'title', value: 'field' }"
+            />
           </FormItem>
         </div>
       </Form>
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
index 6b52b03d2..6c0e20dfb 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -19,7 +19,6 @@ import {
   RadioGroup,
   Row,
   Select,
-  SelectOption,
   TabPane,
   Tabs,
   TextArea,
@@ -259,18 +258,11 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
             >
               <Select
                 v-model:value="configForm.roleIds"
-                clearable
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in roleOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
+                :options="roleOptions"
+                :field-names="{ label: 'name', value: 'id' }"
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -306,18 +298,11 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
             >
               <Select
                 v-model:value="configForm.postIds"
-                clearable
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in postOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id!"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
+                :options="postOptions"
+                :field-names="{ label: 'name', value: 'id' }"
+              />
             </FormItem>
             <FormItem
               v-if="configForm.candidateStrategy === CandidateStrategy.USER"
@@ -326,18 +311,11 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
             >
               <Select
                 v-model:value="configForm.userIds"
-                clearable
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in userOptions"
-                  :key="item.id"
-                  :label="item.nickname"
-                  :value="item.id"
-                >
-                  {{ item.nickname }}
-                </SelectOption>
-              </Select>
+                :options="userOptions"
+                :field-names="{ label: 'nickname', value: 'id' }"
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -348,18 +326,11 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
             >
               <Select
                 v-model:value="configForm.userGroups"
-                clearable
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in userGroupOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
+                :options="userGroupOptions"
+                :field-names="{ label: 'name', value: 'id' }"
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -368,17 +339,17 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
               label="表单内用户字段"
               name="formUser"
             >
-              <Select v-model:value="configForm.formUser" clearable>
-                <SelectOption
-                  v-for="(item, idx) in userFieldOnFormOptions"
-                  :key="idx"
-                  :label="item.title"
-                  :value="item.field"
-                  :disabled="!item.required"
-                >
-                  {{ item.title }}
-                </SelectOption>
-              </Select>
+              <Select
+                v-model:value="configForm.formUser"
+                :options="
+                  userFieldOnFormOptions.map((item) => ({
+                    label: item.title,
+                    value: item.field,
+                    disabled: !item.required,
+                  }))
+                "
+                allow-clear
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -388,17 +359,17 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
               label="表单内部门字段"
               name="formDept"
             >
-              <Select v-model:value="configForm.formDept" clearable>
-                <SelectOption
-                  v-for="(item, idx) in deptFieldOnFormOptions"
-                  :key="idx"
-                  :label="item.title"
-                  :value="item.field"
-                  :disabled="!item.required"
-                >
-                  {{ item.title }}
-                </SelectOption>
-              </Select>
+              <Select
+                v-model:value="configForm.formDept"
+                allow-clear
+                :options="[
+                  ...deptFieldOnFormOptions.map((item) => ({
+                    label: item.title,
+                    value: item.field,
+                    disabled: !item.required,
+                  })),
+                ]"
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -414,16 +385,11 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
               :label="deptLevelLabel!"
               name="deptLevel"
             >
-              <Select v-model:value="configForm.deptLevel" clearable>
-                <SelectOption
-                  v-for="(item, index) in MULTI_LEVEL_DEPT"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                  {{ item.label }}
-                </SelectOption>
-              </Select>
+              <Select
+                v-model:value="configForm.deptLevel"
+                allow-clear
+                :options="MULTI_LEVEL_DEPT"
+              />
             </FormItem>
             <FormItem
               v-if="
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
index 614935237..d4ec38656 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
@@ -18,7 +18,6 @@ import {
   RadioGroup,
   Row,
   Select,
-  SelectOption,
 } from 'antdv-next';
 
 import {
@@ -207,15 +206,11 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
               </FormItem>
             </Col>
             <Col>
-              <Select v-model:value="configForm.timeUnit" class="w-28">
-                <SelectOption
-                  v-for="item in TIME_UNIT_TYPES"
-                  :key="item.value"
-                  :value="item.value"
-                >
-                  {{ item.label }}
-                </SelectOption>
-              </Select>
+              <Select
+                v-model:value="configForm.timeUnit"
+                class="w-28"
+                :options="TIME_UNIT_TYPES"
+              />
             </Col>
             <Col>
               <span class="inline-flex h-8 items-center">后进入下一节点</span>
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
index ff242133e..c00f79adc 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -257,16 +257,11 @@ defineExpose({ validate });
               </FormItem>
             </Col>
             <Col :span="6">
-              <Select v-model:value="rule.opCode" placeholder="请选择操作符">
-                <SelectOption
-                  v-for="operator in COMPARISON_OPERATORS"
-                  :key="operator.value"
-                  :label="operator.label"
-                  :value="operator.value"
-                >
-                  {{ operator.label }}
-                </SelectOption>
-              </Select>
+              <Select
+                v-model:value="rule.opCode"
+                placeholder="请选择操作符"
+                :options="COMPARISON_OPERATORS"
+              />
             </Col>
             <Col :span="7">
               <FormItem
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
index 8d6929ed1..c6fde274e 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
@@ -3,15 +3,7 @@ import type { HttpRequestParam } from '../../../consts';
 
 import { IconifyIcon } from '@vben/icons';
 
-import {
-  Button,
-  Col,
-  FormItem,
-  Input,
-  Row,
-  Select,
-  SelectOption,
-} from 'antdv-next';
+import { Button, Col, FormItem, Input, Row, Select } from 'antdv-next';
 
 import {
   BPM_HTTP_REQUEST_PARAM_TYPES,
@@ -77,16 +69,10 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
         </FormItem>
       </Col>
       <Col :span="5">
-        <Select v-model:value="item.type">
-          <SelectOption
-            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
-            :key="types.value"
-            :label="types.label"
-            :value="types.value"
-          >
-            {{ types.label }}
-          </SelectOption>
-        </Select>
+        <Select
+          v-model:value="item.type"
+          :options="BPM_HTTP_REQUEST_PARAM_TYPES"
+        />
       </Col>
       <Col :span="10">
         <FormItem
@@ -113,17 +99,17 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
           ]"
           v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
         >
-          <Select v-model:value="item.value" placeholder="请选择表单字段">
-            <SelectOption
-              v-for="(field, fIdx) in formFieldOptions"
-              :key="fIdx"
-              :label="field.title"
-              :value="field.field"
-              :disabled="!field.required"
-            >
-              {{ field.title }}
-            </SelectOption>
-          </Select>
+          <Select
+            v-model:value="item.value"
+            :options="
+              formFieldOptions.map((field) => ({
+                label: field.title,
+                value: field.field,
+                disabled: !field.required,
+              }))
+            "
+            placeholder="请选择表单字段"
+          />
         </FormItem>
       </Col>
       <Col :span="2">
@@ -168,16 +154,10 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
         </FormItem>
       </Col>
       <Col :span="5">
-        <Select v-model:value="item.type">
-          <SelectOption
-            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
-            :key="types.value"
-            :label="types.label"
-            :value="types.value"
-          >
-            {{ types.label }}
-          </SelectOption>
-        </Select>
+        <Select
+          v-model:value="item.type"
+          :options="BPM_HTTP_REQUEST_PARAM_TYPES"
+        />
       </Col>
       <Col :span="10">
         <FormItem
@@ -204,17 +184,17 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
           ]"
           v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
         >
-          <Select v-model:value="item.value" placeholder="请选择表单字段">
-            <SelectOption
-              v-for="(field, fIdx) in formFieldOptions"
-              :key="fIdx"
-              :label="field.title"
-              :value="field.field"
-              :disabled="!field.required"
-            >
-              {{ field.title }}
-            </SelectOption>
-          </Select>
+          <Select
+            v-model:value="item.value"
+            :options="
+              formFieldOptions.map((field) => ({
+                label: field.title,
+                value: field.field,
+                disabled: !field.required,
+              }))
+            "
+            placeholder="请选择表单字段"
+          />
         </FormItem>
       </Col>
       <Col :span="2">
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
index fd8ae95cd..6bc0c1aac 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
@@ -3,16 +3,7 @@ import { toRefs, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import {
-  Alert,
-  Button,
-  Col,
-  FormItem,
-  Input,
-  Row,
-  Select,
-  SelectOption,
-} from 'antdv-next';
+import { Alert, Button, Col, FormItem, Input, Row, Select } from 'antdv-next';
 
 import { useFormFields } from '../../../helpers';
 import HttpRequestParamSetting from './http-request-param-setting.vue';
@@ -131,17 +122,14 @@ function deleteHttpResponseSetting(
               v-model:value="item.key"
               placeholder="请选择表单字段"
               allow-clear
-            >
-              <SelectOption
-                v-for="(field, fIdx) in formFields"
-                :key="fIdx"
-                :label="field.title"
-                :value="field.field"
-                :disabled="!field.required"
-              >
-                {{ field.title }}
-              </SelectOption>
-            </Select>
+              :options="[
+                ...formFields.map((field) => ({
+                  label: field.title,
+                  value: field.field,
+                  disabled: !field.required,
+                })),
+              ]"
+            />
           </FormItem>
         </Col>
         <Col :span="12">
@@ -163,7 +151,9 @@ function deleteHttpResponseSetting(
             <IconifyIcon
               class="size-4 cursor-pointer text-red-500"
               icon="lucide:trash-2"
-              @click="deleteHttpResponseSetting(setting.response!, index)"
+              @click="
+                deleteHttpResponseSetting(setting.response!, Number(index))
+              "
             />
           </div>
         </Col>
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
index 9505f8747..969480a30 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
@@ -19,7 +19,6 @@ import {
   message,
   Row,
   Select,
-  SelectOption,
 } from 'antdv-next';
 
 import { ConditionType } from '../../consts';
@@ -249,15 +248,8 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
                   v-model:value="item.nodeId"
                   placeholder="请选择路由目标节点"
                   allow-clear
-                >
-                  <SelectOption
-                    v-for="node in nodeOptions"
-                    :key="node.value"
-                    :value="node.value"
-                  >
-                    {{ node.label }}
-                  </SelectOption>
-                </Select>
+                  :options="nodeOptions"
+                />
               </FormItem>
             </div>
             <Button
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
index c9056b144..84f9e0d23 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -25,7 +25,6 @@ import {
   message,
   Row,
   Select,
-  SelectOption,
   Tag,
 } from 'antdv-next';
 
@@ -412,16 +411,11 @@ onMounted(() => {
         :rules="formRules"
       >
         <FormItem label="触发器类型" name="type">
-          <Select v-model:value="configForm.type" @change="changeTriggerType">
-            <SelectOption
-              v-for="(item, index) in TRIGGER_TYPES"
-              :key="index"
-              :value="item.value"
-              :label="item.label"
-            >
-              {{ item.label }}
-            </SelectOption>
-          </Select>
+          <Select
+            v-model:value="configForm.type"
+            @change="changeTriggerType"
+            :options="TRIGGER_TYPES"
+          />
         </FormItem>
         <!-- HTTP 请求触发器 -->
         <div
@@ -509,17 +503,9 @@ onMounted(() => {
                       placeholder="请选择表单字段"
                       :disabled="key !== ''"
                       allow-clear
-                    >
-                      <SelectOption
-                        v-for="(field, fIdx) in optionalUpdateFormFields"
-                        :key="fIdx"
-                        :label="field.title"
-                        :value="field.field"
-                        :disabled="field.disabled"
-                      >
-                        {{ field.title }}
-                      </SelectOption>
-                    </Select>
+                      :options="optionalUpdateFormFields"
+                      :field-names="{ label: 'title', value: 'field' }"
+                    />
                   </FormItem>
                 </Col>
                 <Col :span="4">
@@ -653,16 +639,9 @@ onMounted(() => {
                   mode="multiple"
                   placeholder="请选择要删除的字段"
                   class="w-full"
-                >
-                  <SelectOption
-                    v-for="field in formFields"
-                    :key="field.field"
-                    :label="field.title"
-                    :value="field.field"
-                  >
-                    {{ field.title }}
-                  </SelectOption>
-                </Select>
+                  :options="formFields"
+                  :field-names="{ label: 'title', value: 'field' }"
+                />
               </div>
             </Card>
           </div>
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index 0192cf5a0..fb47df1d8 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -28,7 +28,6 @@ import {
   RadioGroup,
   Row,
   Select,
-  SelectOption,
   Switch,
   TabPane,
   Tabs,
@@ -148,6 +147,20 @@ const deptFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter((item) => item.type === 'DeptSelect');
 });
 
+const userFieldSelectOptions = computed(() =>
+  userFieldOnFormOptions.value.map((item) => ({
+    ...item,
+    disabled: !item.required,
+  })),
+);
+
+const deptFieldSelectOptions = computed(() =>
+  deptFieldOnFormOptions.value.map((item) => ({
+    ...item,
+    disabled: !item.required,
+  })),
+);
+
 // 操作按钮设置
 const {
   buttonsSetting,
@@ -697,18 +710,11 @@ onMounted(() => {
             >
               <Select
                 v-model:value="configForm.roleIds"
-                clearable
+                :options="roleOptions"
+                :field-names="{ label: 'name', value: 'id' }"
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in roleOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -744,18 +750,11 @@ onMounted(() => {
             >
               <Select
                 v-model:value="configForm.postIds"
-                clearable
+                :options="postOptions"
+                :field-names="{ label: 'name', value: 'id' }"
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in postOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id!"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
+              />
             </FormItem>
             <FormItem
               v-if="configForm.candidateStrategy === CandidateStrategy.USER"
@@ -764,18 +763,11 @@ onMounted(() => {
             >
               <Select
                 v-model:value="configForm.userIds"
-                clearable
+                :options="userOptions"
+                :field-names="{ label: 'nickname', value: 'id' }"
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in userOptions"
-                  :key="item.id"
-                  :label="item.nickname"
-                  :value="item.id"
-                >
-                  {{ item.nickname }}
-                </SelectOption>
-              </Select>
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -786,18 +778,11 @@ onMounted(() => {
             >
               <Select
                 v-model:value="configForm.userGroups"
-                clearable
+                :options="userGroupOptions"
+                :field-names="{ label: 'name', value: 'id' }"
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in userGroupOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -806,17 +791,12 @@ onMounted(() => {
               label="表单内用户字段"
               name="formUser"
             >
-              <Select v-model:value="configForm.formUser" clearable>
-                <SelectOption
-                  v-for="(item, idx) in userFieldOnFormOptions"
-                  :key="idx"
-                  :label="item.title"
-                  :value="item.field"
-                  :disabled="!item.required"
-                >
-                  {{ item.title }}
-                </SelectOption>
-              </Select>
+              <Select
+                v-model:value="configForm.formUser"
+                :options="userFieldSelectOptions"
+                :field-names="{ label: 'title', value: 'field' }"
+                allow-clear
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -826,17 +806,12 @@ onMounted(() => {
               label="表单内部门字段"
               name="formDept"
             >
-              <Select v-model:value="configForm.formDept" clearable>
-                <SelectOption
-                  v-for="(item, idx) in deptFieldOnFormOptions"
-                  :key="idx"
-                  :label="item.title"
-                  :value="item.field"
-                  :disabled="!item.required"
-                >
-                  {{ item.title }}
-                </SelectOption>
-              </Select>
+              <Select
+                v-model:value="configForm.formDept"
+                :options="deptFieldSelectOptions"
+                :field-names="{ label: 'title', value: 'field' }"
+                allow-clear
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -852,16 +827,11 @@ onMounted(() => {
               :label="deptLevelLabel!"
               name="deptLevel"
             >
-              <Select v-model:value="configForm.deptLevel" clearable>
-                <SelectOption
-                  v-for="(item, index) in MULTI_LEVEL_DEPT"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                  {{ item.label }}
-                </SelectOption>
-              </Select>
+              <Select
+                v-model:value="configForm.deptLevel"
+                :options="MULTI_LEVEL_DEPT"
+                allow-clear
+              />
             </FormItem>
             <FormItem
               v-if="
@@ -943,16 +913,12 @@ onMounted(() => {
                 label="驳回节点"
                 name="returnNodeId"
               >
-                <Select v-model:value="configForm.returnNodeId" clearable>
-                  <SelectOption
-                    v-for="item in returnTaskList"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id"
-                  >
-                    {{ item.name }}
-                  </SelectOption>
-                </Select>
+                <Select
+                  v-model:value="configForm.returnNodeId"
+                  :options="returnTaskList"
+                  :field-names="{ label: 'name', value: 'id' }"
+                  allow-clear
+                />
               </FormItem>
             </div>
 
@@ -1021,19 +987,11 @@ onMounted(() => {
                   <Col>
                     <Select
                       v-model:value="timeUnit"
+                      :options="TIME_UNIT_TYPES"
                       class="mr-2"
                       :style="{ width: '100px' }"
                       @change="timeUnitChange"
-                    >
-                      <SelectOption
-                        v-for="item in TIME_UNIT_TYPES"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      >
-                        {{ item.label }}
-                      </SelectOption>
-                    </Select>
+                    />
                     <TypographyText class="mr-2 mt-2 inline-flex text-sm">
                       未处理
                     </TypographyText>
@@ -1087,18 +1045,11 @@ onMounted(() => {
             >
               <Select
                 v-model:value="configForm.assignEmptyHandlerUserIds"
-                clearable
+                :options="userOptions"
+                :field-names="{ label: 'nickname', value: 'id' }"
+                allow-clear
                 mode="multiple"
-              >
-                <SelectOption
-                  v-for="item in userOptions"
-                  :key="item.id"
-                  :label="item.nickname"
-                  :value="item.id"
-                >
-                  {{ item.nickname }}
-                </SelectOption>
-              </Select>
+              />
             </FormItem>
 
             <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
diff --git a/apps/web-antdv-next/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antdv-next/src/views/bpm/model/form/modules/basic-info.vue
index bca4607e8..35139a19d 100644
--- a/apps/web-antdv-next/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antdv-next/src/views/bpm/model/form/modules/basic-info.vue
@@ -23,7 +23,6 @@ import {
   Radio,
   RadioGroup,
   Select,
-  SelectOption,
   TextArea,
   Tooltip,
 } from 'antdv-next';
@@ -321,13 +320,14 @@ defineExpose({ validate });
       <FormItem label="谁可以发起" name="startUserType">
         <Select
           v-model:value="modelData.startUserType"
+          :options="[
+            { label: '全员', value: 0 },
+            { label: '指定人员', value: 1 },
+            { label: '指定部门', value: 2 },
+          ]"
           placeholder="请选择谁可以发起"
           @change="handleStartUserTypeChange"
-        >
-          <SelectOption :value="0">全员</SelectOption>
-          <SelectOption :value="1">指定人员</SelectOption>
-          <SelectOption :value="2">指定部门</SelectOption>
-        </Select>
+        />
         <div
           v-if="modelData.startUserType === 1"
           class="mt-2 flex flex-wrap gap-1"
diff --git a/apps/web-antdv-next/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-antdv-next/src/views/bpm/processInstance/detail/modules/operation-button.vue
index bcfee1771..5ceef878c 100644
--- a/apps/web-antdv-next/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antdv-next/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -34,7 +34,6 @@ import {
   message,
   Popover,
   Select,
-  SelectOption,
   Space,
   TextArea,
 } from 'antdv-next';
@@ -1025,16 +1024,9 @@ defineExpose({ loadTodoTask });
                   mode="multiple"
                   placeholder="请选择抄送人"
                   class="w-full"
-                >
-                  <SelectOption
-                    v-for="item in userOptions"
-                    :key="item.id"
-                    :label="item.nickname"
-                    :value="item.id"
-                  >
-                    {{ item.nickname }}
-                  </SelectOption>
-                </Select>
+                  :options="userOptions"
+                  :field-names="{ label: 'nickname', value: 'id' }"
+                />
               </FormItem>
               <FormItem label="抄送意见" name="copyReason">
                 <TextArea
@@ -1095,16 +1087,9 @@ defineExpose({ loadTodoTask });
                   v-model:value="transferForm.assigneeUserId"
                   :allow-clear="true"
                   style="width: 100%"
-                >
-                  <SelectOption
-                    v-for="item in userOptions"
-                    :key="item.id"
-                    :label="item.nickname"
-                    :value="item.id"
-                  >
-                    {{ item.nickname }}
-                  </SelectOption>
-                </Select>
+                  :options="userOptions"
+                  :field-names="{ label: 'nickname', value: 'id' }"
+                />
               </FormItem>
               <FormItem label="审批意见" name="reason">
                 <TextArea
@@ -1168,16 +1153,9 @@ defineExpose({ loadTodoTask });
                   v-model:value="delegateForm.delegateUserId"
                   :allow-clear="true"
                   style="width: 100%"
-                >
-                  <SelectOption
-                    v-for="item in userOptions"
-                    :key="item.id"
-                    :label="item.nickname"
-                    :value="item.id"
-                  >
-                    {{ item.nickname }}
-                  </SelectOption>
-                </Select>
+                  :options="userOptions"
+                  :field-names="{ label: 'nickname', value: 'id' }"
+                />
               </FormItem>
               <FormItem label="审批意见" name="reason">
                 <TextArea
@@ -1242,16 +1220,9 @@ defineExpose({ loadTodoTask });
                   :allow-clear="true"
                   mode="multiple"
                   style="width: 100%"
-                >
-                  <SelectOption
-                    v-for="item in userOptions"
-                    :key="item.id"
-                    :label="item.nickname"
-                    :value="item.id"
-                  >
-                    {{ item.nickname }}
-                  </SelectOption>
-                </Select>
+                  :options="userOptions"
+                  :field-names="{ label: 'nickname', value: 'id' }"
+                />
               </FormItem>
               <FormItem label="审批意见" name="reason">
                 <TextArea
@@ -1319,18 +1290,15 @@ defineExpose({ loadTodoTask });
               <FormItem label="减签人员" name="deleteSignTaskId">
                 <Select
                   v-model:value="deleteSignForm.deleteSignTaskId"
+                  :options="
+                    (runningTask.children as any[]).map((item) => ({
+                      label: getDeleteSignUserLabel(item),
+                      value: item.id,
+                    }))
+                  "
                   :allow-clear="true"
                   style="width: 100%"
-                >
-                  <SelectOption
-                    v-for="item in runningTask.children"
-                    :key="item.id"
-                    :label="getDeleteSignUserLabel(item)"
-                    :value="item.id"
-                  >
-                    {{ getDeleteSignUserLabel(item) }}
-                  </SelectOption>
-                </Select>
+                />
               </FormItem>
               <FormItem label="审批意见" name="reason">
                 <TextArea
@@ -1392,16 +1360,9 @@ defineExpose({ loadTodoTask });
                   v-model:value="returnForm.targetTaskDefinitionKey"
                   :allow-clear="true"
                   style="width: 100%"
-                >
-                  <SelectOption
-                    v-for="item in returnList"
-                    :key="item.taskDefinitionKey"
-                    :label="item.name"
-                    :value="item.taskDefinitionKey"
-                  >
-                    {{ item.name }}
-                  </SelectOption>
-                </Select>
+                  :options="returnList"
+                  :field-names="{ label: 'name', value: 'taskDefinitionKey' }"
+                />
               </FormItem>
               <FormItem label="退回理由" name="returnReason">
                 <TextArea
diff --git a/apps/web-antdv-next/src/views/infra/codegen/modules/column-info.vue b/apps/web-antdv-next/src/views/infra/codegen/modules/column-info.vue
index ce0e77313..ba89de218 100644
--- a/apps/web-antdv-next/src/views/infra/codegen/modules/column-info.vue
+++ b/apps/web-antdv-next/src/views/infra/codegen/modules/column-info.vue
@@ -4,7 +4,7 @@ import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
 import { nextTick, onMounted, ref, watch } from 'vue';
 
-import { Checkbox, Input, Select, SelectOption } from 'antdv-next';
+import { Checkbox, Input, Select } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSimpleDictTypeList } from '#/api/system/dict/type';
@@ -90,15 +90,11 @@ function filterDictTypeOption(input: string, option: any) {
 
     <!-- Java 类型 -->
     <template #javaType="{ row, column }">
-      <Select v-model:value="row.javaType" style="width: 100%">
-        <SelectOption
-          v-for="option in column.params.options"
-          :key="option.value"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </SelectOption>
-      </Select>
+      <Select
+        v-model:value="row.javaType"
+        style="width: 100%"
+        :options="column.params.options"
+      />
     </template>
     <!-- Java 属性 -->
     <template #javaField="{ row }">
@@ -124,15 +120,11 @@ function filterDictTypeOption(input: string, option: any) {
 
     <!-- 查询方式 -->
     <template #listOperationCondition="{ row, column }">
-      <Select v-model:value="row.listOperationCondition" class="w-full">
-        <SelectOption
-          v-for="option in column.params.options"
-          :key="option.value"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </SelectOption>
-      </Select>
+      <Select
+        v-model:value="row.listOperationCondition"
+        class="w-full"
+        :options="column.params.options"
+      />
     </template>
 
     <!-- 允许空 -->
@@ -142,15 +134,11 @@ function filterDictTypeOption(input: string, option: any) {
 
     <!-- 显示类型 -->
     <template #htmlType="{ row, column }">
-      <Select v-model:value="row.htmlType" class="w-full">
-        <SelectOption
-          v-for="option in column.params.options"
-          :key="option.value"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </SelectOption>
-      </Select>
+      <Select
+        v-model:value="row.htmlType"
+        class="w-full"
+        :options="column.params.options"
+      />
     </template>
 
     <!-- 字典类型 -->
@@ -161,15 +149,9 @@ function filterDictTypeOption(input: string, option: any) {
         allow-clear
         show-search
         :filter-option="filterDictTypeOption"
-      >
-        <SelectOption
-          v-for="option in dictTypeOptions"
-          :key="option.type"
-          :value="option.type"
-        >
-          {{ option.name }}
-        </SelectOption>
-      </Select>
+        :options="dictTypeOptions"
+        :field-names="{ label: 'name', value: 'type' }"
+      />
     </template>
 
     <!-- 示例 -->
diff --git a/apps/web-antdv-next/src/views/infra/demo/general/demo01/index.vue b/apps/web-antdv-next/src/views/infra/demo/general/demo01/index.vue
index 05bac08d2..c1b5a8afa 100644
--- a/apps/web-antdv-next/src/views/infra/demo/general/demo01/index.vue
+++ b/apps/web-antdv-next/src/views/infra/demo/general/demo01/index.vue
@@ -24,7 +24,6 @@ import {
   Pagination,
   DateRangePicker as RangePicker,
   Select,
-  SelectOption,
 } from 'antdv-next';
 
 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
@@ -182,18 +181,12 @@ onMounted(() => {
             placeholder="请选择性别"
             allow-clear
             class="w-full"
-          >
-            <SelectOption
-              v-for="dict in getDictOptions(
-                DICT_TYPE.SYSTEM_USER_SEX,
-                'number',
-              )"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </SelectOption>
-          </Select>
+            :options="[
+              ...getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number').map(
+                (dict) => ({ label: dict.label, value: dict.value as any }),
+              ),
+            ]"
+          />
         </FormItem>
         <FormItem label="创建时间" name="createTime">
           <RangePicker
diff --git a/apps/web-antdv-next/src/views/infra/demo/general/demo03/erp/index.vue b/apps/web-antdv-next/src/views/infra/demo/general/demo03/erp/index.vue
index d3c1896db..ff3d5440d 100644
--- a/apps/web-antdv-next/src/views/infra/demo/general/demo03/erp/index.vue
+++ b/apps/web-antdv-next/src/views/infra/demo/general/demo03/erp/index.vue
@@ -24,7 +24,6 @@ import {
   Pagination,
   DateRangePicker as RangePicker,
   Select,
-  SelectOption,
   Tabs,
 } from 'antdv-next';
 
@@ -193,18 +192,12 @@ onMounted(() => {
             placeholder="请选择性别"
             allow-clear
             class="w-full"
-          >
-            <SelectOption
-              v-for="dict in getDictOptions(
-                DICT_TYPE.SYSTEM_USER_SEX,
-                'number',
-              )"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </SelectOption>
-          </Select>
+            :options="[
+              ...getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number').map(
+                (dict) => ({ label: dict.label, value: dict.value as any }),
+              ),
+            ]"
+          />
         </FormItem>
         <FormItem label="创建时间" name="createTime">
           <RangePicker
diff --git a/apps/web-antdv-next/src/views/infra/demo/general/demo03/inner/index.vue b/apps/web-antdv-next/src/views/infra/demo/general/demo03/inner/index.vue
index d39cdc706..02794528f 100644
--- a/apps/web-antdv-next/src/views/infra/demo/general/demo03/inner/index.vue
+++ b/apps/web-antdv-next/src/views/infra/demo/general/demo03/inner/index.vue
@@ -24,7 +24,6 @@ import {
   Pagination,
   DateRangePicker as RangePicker,
   Select,
-  SelectOption,
   Tabs,
 } from 'antdv-next';
 
@@ -186,18 +185,12 @@ onMounted(() => {
             placeholder="请选择性别"
             allow-clear
             class="w-full"
-          >
-            <SelectOption
-              v-for="dict in getDictOptions(
-                DICT_TYPE.SYSTEM_USER_SEX,
-                'number',
-              )"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </SelectOption>
-          </Select>
+            :options="[
+              ...getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number').map(
+                (dict) => ({ label: dict.label, value: dict.value as any }),
+              ),
+            ]"
+          />
         </FormItem>
         <FormItem label="创建时间" name="createTime">
           <RangePicker
diff --git a/apps/web-antdv-next/src/views/infra/demo/general/demo03/normal/index.vue b/apps/web-antdv-next/src/views/infra/demo/general/demo03/normal/index.vue
index 73540e70c..3204125e0 100644
--- a/apps/web-antdv-next/src/views/infra/demo/general/demo03/normal/index.vue
+++ b/apps/web-antdv-next/src/views/infra/demo/general/demo03/normal/index.vue
@@ -24,7 +24,6 @@ import {
   Pagination,
   DateRangePicker as RangePicker,
   Select,
-  SelectOption,
 } from 'antdv-next';
 
 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
@@ -183,18 +182,12 @@ onMounted(() => {
             placeholder="请选择性别"
             allow-clear
             class="w-full"
-          >
-            <SelectOption
-              v-for="dict in getDictOptions(
-                DICT_TYPE.SYSTEM_USER_SEX,
-                'number',
-              )"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </SelectOption>
-          </Select>
+            :options="[
+              ...getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number').map(
+                (dict) => ({ label: dict.label, value: dict.value as any }),
+              ),
+            ]"
+          />
         </FormItem>
         <FormItem label="创建时间" name="createTime">
           <RangePicker
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/message.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/message.vue
index 0a8f971a3..c6264bf5b 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/message.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/message.vue
@@ -15,7 +15,7 @@ import { DICT_TYPE, IotDeviceMessageMethodEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
-import { Button, Select, SelectOption, Space, Switch, Tag } from 'antdv-next';
+import { Button, Select, Space, Switch, Tag } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDeviceMessagePage } from '#/api/iot/device/device';
@@ -195,25 +195,18 @@ defineExpose({
         allow-clear
         placeholder="所有方法"
         style="width: 160px"
-      >
-        <SelectOption
-          v-for="item in methodOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-          {{ item.label }}
-        </SelectOption>
-      </Select>
+        :options="methodOptions"
+      />
       <Select
         v-model:value="queryParams.upstream"
         allow-clear
         placeholder="上行/下行"
         style="width: 160px"
-      >
-        <SelectOption label="上行" value="true">上行</SelectOption>
-        <SelectOption label="下行" value="false">下行</SelectOption>
-      </Select>
+        :options="[
+          { label: '上行', value: 'true' },
+          { label: '下行', value: 'false' },
+        ]"
+      />
       <Space>
         <Button type="primary" @click="handleQuery">
           <IconifyIcon icon="ep:search" class="mr-[5px]" /> 搜索
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-event.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-event.vue
index b98417a49..2b7e1f6b6 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-event.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-event.vue
@@ -14,14 +14,7 @@ import {
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
-import {
-  Button,
-  DateRangePicker,
-  Select,
-  SelectOption,
-  Space,
-  Tag,
-} from 'antdv-next';
+import { Button, DateRangePicker, Select, Space, Tag } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDeviceMessagePairPage } from '#/api/iot/device/device';
@@ -217,15 +210,13 @@ defineExpose({
           allow-clear
           placeholder="请选择事件标识符"
           style="width: 240px"
-        >
-          <SelectOption
-            v-for="event in eventThingModels"
-            :key="event.identifier"
-            :value="event.identifier!"
-          >
-            {{ event.name }}({{ event.identifier }})
-          </SelectOption>
-        </Select>
+          :options="[
+            ...eventThingModels.map((event) => ({
+              label: `${event.name}(${event.identifier})`,
+              value: event.identifier!,
+            })),
+          ]"
+        />
       </div>
       <div class="flex items-center gap-2">
         <span>时间范围：</span>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-service.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-service.vue
index 88ddc8452..3682a2e09 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-service.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-service.vue
@@ -14,14 +14,7 @@ import {
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
-import {
-  Button,
-  DateRangePicker,
-  Select,
-  SelectOption,
-  Space,
-  Tag,
-} from 'antdv-next';
+import { Button, DateRangePicker, Select, Space, Tag } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDeviceMessagePairPage } from '#/api/iot/device/device';
@@ -231,15 +224,13 @@ defineExpose({
           allow-clear
           placeholder="请选择服务标识符"
           style="width: 240px"
-        >
-          <SelectOption
-            v-for="service in serviceThingModels"
-            :key="service.identifier"
-            :value="service.identifier!"
-          >
-            {{ service.name }}({{ service.identifier }})
-          </SelectOption>
-        </Select>
+          :options="[
+            ...serviceThingModels.map((service) => ({
+              label: `${service.name}(${service.identifier})`,
+              value: service.identifier!,
+            })),
+          ]"
+        />
       </div>
       <div class="flex items-center gap-2">
         <span>时间范围：</span>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/index.vue b/apps/web-antdv-next/src/views/iot/device/device/index.vue
index 2a6fe10ae..ec8a9ae76 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/index.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/index.vue
@@ -15,16 +15,7 @@ import { getDictOptions } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import {
-  Button,
-  Card,
-  Input,
-  message,
-  Select,
-  SelectOption,
-  Space,
-  Tag,
-} from 'antdv-next';
+import { Button, Card, Input, message, Select, Space, Tag } from 'antdv-next';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -292,15 +283,9 @@ onMounted(async () => {
           placeholder="请选择产品"
           allow-clear
           style="width: 200px"
-        >
-          <SelectOption
-            v-for="product in products"
-            :key="product.id"
-            :value="product.id"
-          >
-            {{ product.name }}
-          </SelectOption>
-        </Select>
+          :options="products"
+          :field-names="{ label: 'name', value: 'id' }"
+        />
         <Input
           v-model:value="queryParams.deviceName"
           placeholder="请输入 DeviceName"
@@ -317,49 +302,34 @@ onMounted(async () => {
         />
         <Select
           v-model:value="queryParams.deviceType"
+          :options="
+            getDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE, 'number').map(
+              (dict) => ({ label: dict.label, value: dict.value as any }),
+            )
+          "
           placeholder="请选择设备类型"
           allow-clear
           style="width: 200px"
-        >
-          <SelectOption
-            v-for="dict in getDictOptions(
-              DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE,
-              'number',
-            )"
-            :key="dict.value"
-            :value="dict.value"
-          >
-            {{ dict.label }}
-          </SelectOption>
-        </Select>
+        />
         <Select
           v-model:value="queryParams.status"
           placeholder="请选择设备状态"
           allow-clear
           style="width: 200px"
-        >
-          <SelectOption
-            v-for="dict in getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number')"
-            :key="dict.value"
-            :value="dict.value"
-          >
-            {{ dict.label }}
-          </SelectOption>
-        </Select>
+          :options="
+            getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number').map(
+              (dict) => ({ label: dict.label, value: dict.value as any }),
+            )
+          "
+        />
         <Select
           v-model:value="queryParams.groupId"
           placeholder="请选择设备分组"
           allow-clear
           style="width: 200px"
-        >
-          <SelectOption
-            v-for="group in deviceGroups"
-            :key="group.id"
-            :value="group.id"
-          >
-            {{ group.name }}
-          </SelectOption>
-        </Select>
+          :options="deviceGroups"
+          :field-names="{ label: 'name', value: 'id' }"
+        />
         <Button type="primary" @click="handleSearch">
           <IconifyIcon icon="ant-design:search-outlined" class="mr-1" />
           {{ $t('common.search') }}
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/http-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/http-config-form.vue
index 46cebe012..2401971cb 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/http-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/http-config-form.vue
@@ -5,7 +5,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, Select, SelectOption, TextArea } from 'antdv-next';
+import { FormItem, Input, Select, TextArea } from 'antdv-next';
 
 import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
 
@@ -67,10 +67,14 @@ onMounted(() => {
   >
     <Input v-model:value="urlPath" placeholder="请输入请求地址">
       <template #addonBefore>
-        <Select v-model:value="urlPrefix" class="w-[100px]">
-          <SelectOption value="http://">http://</SelectOption>
-          <SelectOption value="https://">https://</SelectOption>
-        </Select>
+        <Select
+          v-model:value="urlPrefix"
+          class="w-[100px]"
+          :options="[
+            { label: 'http://', value: 'http://' },
+            { label: 'https://', value: 'https://' },
+          ]"
+        />
       </template>
     </Input>
   </FormItem>
@@ -81,12 +85,16 @@ onMounted(() => {
     ]"
     label="请求方法"
   >
-    <Select v-model:value="config.method" placeholder="请选择请求方法">
-      <SelectOption value="GET">GET</SelectOption>
-      <SelectOption value="POST">POST</SelectOption>
-      <SelectOption value="PUT">PUT</SelectOption>
-      <SelectOption value="DELETE">DELETE</SelectOption>
-    </Select>
+    <Select
+      v-model:value="config.method"
+      placeholder="请选择请求方法"
+      :options="[
+        { label: 'GET', value: 'GET' },
+        { label: 'POST', value: 'POST' },
+        { label: 'PUT', value: 'PUT' },
+        { label: 'DELETE', value: 'DELETE' },
+      ]"
+    />
   </FormItem>
   <FormItem label="请求头">
     <KeyValueEditor v-model="config.headers" add-button-text="添加请求头" />
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/tcp-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/tcp-config-form.vue
index f1d942d8e..5ad383eb4 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/tcp-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/tcp-config-form.vue
@@ -4,14 +4,7 @@ import { onMounted } from 'vue';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import {
-  FormItem,
-  Input,
-  InputNumber,
-  Select,
-  SelectOption,
-  Switch,
-} from 'antdv-next';
+import { FormItem, Input, InputNumber, Select, Switch } from 'antdv-next';
 
 import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
 
@@ -120,10 +113,14 @@ onMounted(() => {
     ]"
     label="数据格式"
   >
-    <Select v-model:value="config.dataFormat" placeholder="请选择数据格式">
-      <SelectOption value="JSON">JSON</SelectOption>
-      <SelectOption value="BINARY">BINARY</SelectOption>
-    </Select>
+    <Select
+      v-model:value="config.dataFormat"
+      placeholder="请选择数据格式"
+      :options="[
+        { label: 'JSON', value: 'JSON' },
+        { label: 'BINARY', value: 'BINARY' },
+      ]"
+    />
   </FormItem>
   <FormItem :name="['config', 'heartbeatIntervalMs']" label="心跳间隔(ms)">
     <InputNumber
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/websocket-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/websocket-config-form.vue
index 21ab911b7..4d95dcf6c 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/websocket-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/websocket-config-form.vue
@@ -9,7 +9,6 @@ import {
   Input,
   InputNumber,
   Select,
-  SelectOption,
   Switch,
   TextArea,
 } from 'antdv-next';
@@ -127,10 +126,14 @@ onMounted(() => {
     ]"
     label="数据格式"
   >
-    <Select v-model:value="config.dataFormat" placeholder="请选择数据格式">
-      <SelectOption value="JSON">JSON</SelectOption>
-      <SelectOption value="TEXT">TEXT</SelectOption>
-    </Select>
+    <Select
+      v-model:value="config.dataFormat"
+      placeholder="请选择数据格式"
+      :options="[
+        { label: 'JSON', value: 'JSON' },
+        { label: 'TEXT', value: 'TEXT' },
+      ]"
+    />
   </FormItem>
   <FormItem :name="['config', 'reconnectIntervalMs']" label="重连间隔(ms)">
     <InputNumber
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/alert-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/alert-config.vue
index c4823d22a..8b5f087d5 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/alert-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/alert-config.vue
@@ -3,7 +3,7 @@
 import { onMounted, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Select, SelectOption } from 'antdv-next';
+import { FormItem, Select } from 'antdv-next';
 
 import { getSimpleAlertConfigList } from '#/api/iot/alert/config';
 
@@ -49,20 +49,15 @@ onMounted(() => {
     <FormItem label="告警配置" required>
       <Select
         v-model:value="localValue"
+        :options="alertConfigs"
+        :field-names="{ label: 'name', value: 'id' }"
         placeholder="请选择告警配置"
         show-search
         allow-clear
         @change="handleChange"
         class="w-full"
         :loading="loading"
-      >
-        <SelectOption
-          v-for="config in alertConfigs"
-          :key="config.id"
-          :label="config.name"
-          :value="config.id"
-        />
-      </Select>
+      />
     </FormItem>
   </div>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/condition-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/condition-config.vue
index bdcf49d76..414f48f2c 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/condition-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/condition-config.vue
@@ -12,7 +12,7 @@ import {
 } from '@vben/constants';
 
 import { useVModel } from '@vueuse/core';
-import { Col, FormItem, Row, Select, SelectOption } from 'antdv-next';
+import { Col, FormItem, Row, Select } from 'antdv-next';
 
 import ValueInput from '../inputs/value-input.vue';
 import DeviceSelector from '../selectors/device-selector.vue';
@@ -163,6 +163,7 @@ function handleOperatorChange() {
         <FormItem label="条件类型" required>
           <Select
             :value="condition.type"
+            :options="getConditionTypeOptions()"
             @change="
               (value: any) => {
                 updateConditionField('type', value);
@@ -171,15 +172,7 @@ function handleOperatorChange() {
             "
             placeholder="请选择条件类型"
             class="w-full"
-          >
-            <SelectOption
-              v-for="option in getConditionTypeOptions()"
-              :key="option.value"
-              :value="option.value"
-            >
-              {{ option.label }}
-            </SelectOption>
-          </Select>
+          />
         </FormItem>
       </Col>
     </Row>
@@ -225,18 +218,11 @@ function handleOperatorChange() {
           <FormItem label="操作符" required>
             <Select
               :value="condition.operator"
+              :options="statusOperatorOptions"
               @change="(value: any) => updateConditionField('operator', value)"
               placeholder="请选择操作符"
               class="w-full"
-            >
-              <SelectOption
-                v-for="option in statusOperatorOptions"
-                :key="option.value"
-                :value="option.value"
-              >
-                {{ option.label }}
-              </SelectOption>
-            </Select>
+            />
           </FormItem>
         </Col>
 
@@ -245,18 +231,11 @@ function handleOperatorChange() {
           <FormItem label="设备状态" required>
             <Select
               :value="condition.param"
+              :options="deviceStatusOptions"
               @change="(value: any) => updateConditionField('param', value)"
               placeholder="请选择设备状态"
               class="w-full"
-            >
-              <SelectOption
-                v-for="option in deviceStatusOptions"
-                :key="option.value"
-                :value="option.value"
-              >
-                {{ option.label }}
-              </SelectOption>
-            </Select>
+            />
           </FormItem>
         </Col>
       </Row>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
index 684af42ad..bfa62daf8 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
@@ -12,7 +12,7 @@ import {
 } from '@vben/constants';
 
 import { useVModel } from '@vueuse/core';
-import { Col, FormItem, Input, Row, Select, SelectOption } from 'antdv-next';
+import { Col, FormItem, Input, Row, Select } from 'antdv-next';
 
 import JsonParamsInput from '../inputs/json-params-input.vue';
 import ValueInput from '../inputs/value-input.vue';
@@ -171,18 +171,11 @@ function handlePropertyChange(propertyInfo: any) {
     <FormItem label="触发事件类型" required>
       <Select
         :value="triggerType"
+        :options="triggerTypeOptions"
         @change="(value: any) => handleTriggerTypeChange(value)"
         placeholder="请选择触发事件类型"
         class="w-full"
-      >
-        <SelectOption
-          v-for="option in triggerTypeOptions"
-          :key="option.value"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </SelectOption>
-      </Select>
+      />
     </FormItem>
 
     <!-- 设备属性条件配置 -->
@@ -317,38 +310,31 @@ function handlePropertyChange(propertyInfo: any) {
           <FormItem label="操作符" required>
             <Select
               :value="condition.operator"
+              :options="[
+                {
+                  label:
+                    IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS
+                      .name,
+                  value:
+                    IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS
+                      .value,
+                },
+              ]"
               @change="(value: any) => updateConditionField('operator', value)"
               placeholder="请选择操作符"
               class="w-full"
-            >
-              <SelectOption
-                :value="
-                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
-                "
-              >
-                {{
-                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
-                }}
-              </SelectOption>
-            </Select>
+            />
           </FormItem>
         </Col>
         <Col :span="6">
           <FormItem label="参数" required>
             <Select
               :value="condition.value"
+              :options="deviceStatusChangeOptions"
               @change="(value: any) => updateConditionField('value', value)"
               placeholder="请选择操作符"
               class="w-full"
-            >
-              <SelectOption
-                v-for="option in deviceStatusChangeOptions"
-                :key="option.value"
-                :value="option.value"
-              >
-                {{ option.label }}
-              </SelectOption>
-            </Select>
+            />
           </FormItem>
         </Col>
       </Row>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/value-input.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/value-input.vue
index d6ef66a0d..a0103ef22 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/value-input.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/value-input.vue
@@ -14,7 +14,6 @@ import {
   Input,
   InputNumber,
   Select,
-  SelectOption,
   Tag,
   Tooltip,
 } from 'antdv-next';
@@ -209,10 +208,11 @@ watch(
       v-model:value="localValue"
       placeholder="请选择布尔值"
       class="w-full!"
-    >
-      <SelectOption value="true">真 (true)</SelectOption>
-      <SelectOption value="false">假 (false)</SelectOption>
-    </Select>
+      :options="[
+        { label: '真 (true)', value: 'true' },
+        { label: '假 (false)', value: 'false' },
+      ]"
+    />
 
     <!-- 枚举值选择 -->
     <Select
@@ -220,17 +220,10 @@ watch(
         propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0
       "
       v-model:value="localValue"
+      :options="enumOptions"
       placeholder="请选择枚举值"
       class="w-full!"
-    >
-      <SelectOption
-        v-for="option in enumOptions"
-        :key="option.value"
-        :value="option.value"
-      >
-        {{ option.label }}
-      </SelectOption>
-    </Select>
+    />
 
     <!-- 范围输入 (between 操作符) -->
     <div
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/action-section.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/action-section.vue
index ca7e85342..112d189e7 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/action-section.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/action-section.vue
@@ -11,15 +11,7 @@ import { IconifyIcon } from '@vben/icons';
 import { getStableObjectKey } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import {
-  Button,
-  Card,
-  Empty,
-  FormItem,
-  Select,
-  SelectOption,
-  Tag,
-} from 'antdv-next';
+import { Button, Card, Empty, FormItem, Select, Tag } from 'antdv-next';
 
 import AlertConfig from '../configs/alert-config.vue';
 import DeviceControlConfig from '../configs/device-control-config.vue';
@@ -239,18 +231,11 @@ function onActionTypeChange(action: RuleSceneApi.Action, type: number) {
               <FormItem label="执行类型" required>
                 <Select
                   :value="action.type"
+                  :options="getActionTypeOptions()"
                   @change="(value) => updateActionType(index, value as number)"
                   placeholder="请选择执行类型"
                   class="w-full"
-                >
-                  <SelectOption
-                    v-for="option in getActionTypeOptions()"
-                    :key="option.value"
-                    :value="option.value"
-                  >
-                    {{ option.label }}
-                  </SelectOption>
-                </Select>
+                />
               </FormItem>
             </div>
 
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/number.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/number.vue
index 14405da6c..86a3b5fd8 100644
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/number.vue
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/number.vue
@@ -10,7 +10,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, Select, SelectOption } from 'antdv-next';
+import { FormItem, Input, Select } from 'antdv-next';
 
 const props = defineProps<{ modelValue: any }>();
 const emits = defineEmits(['update:modelValue']);
@@ -126,15 +126,13 @@ function validateStep(_rule: any, _value: any) {
       placeholder="请选择单位"
       class="w-full"
       @change="unitChange"
-    >
-      <SelectOption
-        v-for="(item, index) in unitOptions"
-        :key="index"
-        :value="`${item.label}-${item.value}`"
-      >
-        {{ `${item.label}-${item.value}` }}
-      </SelectOption>
-    </Select>
+      :options="[
+        ...unitOptions.map((item) => ({
+          label: `{{ \`${item.label}-${item.value}\` }}`,
+          value: `${item.label}-${item.value}`,
+        })),
+      ]"
+    />
   </FormItem>
 </template>
 
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/property.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/property.vue
index d9a50b3af..18743ae1a 100644
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/property.vue
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/property.vue
@@ -14,14 +14,7 @@ import {
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import {
-  FormItem,
-  Input,
-  Radio,
-  RadioGroup,
-  Select,
-  SelectOption,
-} from 'antdv-next';
+import { FormItem, Input, Radio, RadioGroup, Select } from 'antdv-next';
 
 import { ThingModelFormRules, validateBoolName } from '#/api/iot/thingmodel';
 
@@ -118,16 +111,13 @@ if (!props.isStructDataSpecs && !props.isParams) {
       v-model:value="property.dataType"
       placeholder="请选择数据类型"
       @change="handleChange"
-    >
-      <!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套 2 层（父和子） -->
-      <SelectOption
-        v-for="option in dataTypeOptions"
-        :key="option.value"
-        :value="option.value"
-      >
-        {{ `${option.value}(${option.label})` }}
-      </SelectOption>
-    </Select>
+      :options="[
+        ...dataTypeOptions.map((option) => ({
+          label: `{{ \`${option.value}(${option.label})\` }}`,
+          value: option.value,
+        })),
+      ]"
+    />
   </FormItem>
   <!-- 数值型配置 -->
   <ThingModelNumberDataSpecs
diff --git a/apps/web-antdv-next/src/views/mall/product/spu/form/modules/product-attributes.vue b/apps/web-antdv-next/src/views/mall/product/spu/form/modules/product-attributes.vue
index 7b7e483e1..4e1fb8a36 100644
--- a/apps/web-antdv-next/src/views/mall/product/spu/form/modules/product-attributes.vue
+++ b/apps/web-antdv-next/src/views/mall/product/spu/form/modules/product-attributes.vue
@@ -7,7 +7,7 @@ import { computed, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Col, Divider, message, Select, SelectOption, Tag } from 'antdv-next';
+import { Col, Divider, message, Select, Tag } from 'antdv-next';
 
 import {
   createPropertyValue,
@@ -204,15 +204,9 @@ async function getAttributeOptions(propertyId: number) {
         @blur="handleInputConfirm(index, attribute.id)"
         @change="handleInputConfirm(index, attribute.id)"
         @keyup.enter="handleInputConfirm(index, attribute.id)"
-      >
-        <SelectOption
-          v-for="item2 in attributeOptions"
-          :key="item2.id"
-          :value="item2.name"
-        >
-          {{ item2.name }}
-        </SelectOption>
-      </Select>
+        :options="attributeOptions"
+        :field-names="{ label: 'name', value: 'name' }"
+      />
       <Tag
         v-show="!inputVisible(index)"
         @click="showInput(index)"
diff --git a/apps/web-antdv-next/src/views/mp/components/wx-account-select/wx-account-select.vue b/apps/web-antdv-next/src/views/mp/components/wx-account-select/wx-account-select.vue
index 212ad480a..442d0a911 100644
--- a/apps/web-antdv-next/src/views/mp/components/wx-account-select/wx-account-select.vue
+++ b/apps/web-antdv-next/src/views/mp/components/wx-account-select/wx-account-select.vue
@@ -6,7 +6,7 @@ import type { MpAccountApi } from '#/api/mp/account';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { message, Select, SelectOption } from 'antdv-next';
+import { message, Select } from 'antdv-next';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
@@ -61,9 +61,7 @@ onMounted(handleQuery);
     placeholder="请选择公众号"
     class="!w-full"
     @change="onChanged"
-  >
-    <SelectOption v-for="item in accountList" :key="item.id" :value="item.id">
-      {{ item.name }}
-    </SelectOption>
-  </Select>
+    :options="accountList"
+    :field-names="{ label: 'name', value: 'id' }"
+  />
 </template>
diff --git a/apps/web-antdv-next/src/views/mp/menu/modules/editor.vue b/apps/web-antdv-next/src/views/mp/menu/modules/editor.vue
index 9d286e363..c7223af1b 100644
--- a/apps/web-antdv-next/src/views/mp/menu/modules/editor.vue
+++ b/apps/web-antdv-next/src/views/mp/menu/modules/editor.vue
@@ -3,16 +3,7 @@ import { computed, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import {
-  Button,
-  Col,
-  Input,
-  message,
-  Modal,
-  Row,
-  Select,
-  SelectOption,
-} from 'antdv-next';
+import { Button, Col, Input, message, Modal, Row, Select } from 'antdv-next';
 
 import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
 
@@ -108,16 +99,8 @@ function deleteMaterial() {
             placeholder="请选择"
             class="mr-[2%] w-[240px]"
             allow-clear
-          >
-            <SelectOption
-              v-for="item in menuOptions"
-              :label="item.label"
-              :value="item.value"
-              :key="item.value"
-            >
-              {{ item.label }}
-            </SelectOption>
-          </Select>
+            :options="menuOptions"
+          />
         </div>
         <div
           class="mt-5 rounded-[5px] bg-white p-[20px_10px]"