From 2d1545106e6c3e319060c11d8f0e89e19505520b Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 28 Jan 2026 14:22:35 +0800
Subject: [PATCH] =?UTF-8?q?refactor(modal):=20=E9=87=8D=E6=9E=84=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4=E5=88=A0=E9=99=A4=E5=BC=B9=E7=AA=97=E4=BB=A5=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=20antdv-next=20=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整导入路径以匹配 antdv-next 的新模块结构
- 使用 defineComponent 和 h 函数重构弹窗内容为组件
- 通过 ref 暴露表单实例以替代 useForm 方法
- 移除已弃用的 trigger 属性并更新表单验证方式
---
 apps/web-antd/src/utils/modal.tsx | 56 +++++++++++++++++++------------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/apps/web-antd/src/utils/modal.tsx b/apps/web-antd/src/utils/modal.tsx
index 58a5d769..ecdada44 100644
--- a/apps/web-antd/src/utils/modal.tsx
+++ b/apps/web-antd/src/utils/modal.tsx
@@ -1,9 +1,11 @@
-import type { ModalFuncProps } from 'antdv-next';
-import type { Rule } from 'antdv-next/es/form';
+/* eslint-disable vue/multi-word-component-names */
+import type { FormInstance } from 'antdv-next';
+import type { Rule } from 'antdv-next/dist/form/types';
+import type { ModalFuncProps } from 'antdv-next/dist/modal/interface';
 
-import { reactive } from 'vue';
+import { defineComponent, h, reactive, ref } from 'vue';
 
-import { Alert, Form, Input } from 'antdv-next';
+import { Alert, Form, FormItem, Input } from 'antdv-next';
 import { isFunction } from 'lodash-es';
 
 export interface ConfirmModalProps extends Omit<ModalFuncProps, 'visible'> {
@@ -24,7 +26,6 @@ export function confirmDeleteModal(props: ConfirmModalProps) {
       {
         message: '校验不通过',
         required: true,
-        trigger: 'change',
         validator(_, value) {
           if (value !== confirmText) {
             return Promise.reject(new Error('校验不通过'));
@@ -34,28 +35,41 @@ export function confirmDeleteModal(props: ConfirmModalProps) {
       },
     ],
   });
-  const useForm = Form.useForm;
-  const { validate, validateInfos } = useForm(formValue, rulesRef);
+
+  const outerInstance = ref<{ formInstance?: FormInstance }>({});
 
   window.modal.confirm({
     ...props,
     centered: true,
-    content: (
-      <div class="flex flex-col gap-[8px]">
-        <Alert message={'确认删除后将无法恢复，请谨慎操作！'} type="error" />
-        <Form layout="vertical" model={formValue}>
-          <Form.Item {...validateInfos.content}>
-            <Input
-              placeholder={placeholder}
-              v-model:value={formValue.content}
-            />
-          </Form.Item>
-        </Form>
-      </div>
-    ),
+    content: () =>
+      h(
+        defineComponent({
+          setup(_, { expose }) {
+            const formInstance = ref<FormInstance>();
+            expose({ formInstance });
+            return () => (
+              <div class="flex flex-col gap-[8px]">
+                <Alert
+                  title={'确认删除后将无法恢复，请谨慎操作！'}
+                  type="error"
+                />
+                <Form layout="vertical" model={formValue} ref={formInstance}>
+                  <FormItem name="content" rules={rulesRef.content}>
+                    <Input
+                      placeholder={placeholder}
+                      v-model:value={formValue.content}
+                    />
+                  </FormItem>
+                </Form>
+              </div>
+            );
+          },
+        }),
+        { ref: outerInstance },
+      ),
     okButtonProps: { danger: true, type: 'primary' },
     onOk: async () => {
-      await validate();
+      await outerInstance.value?.formInstance?.validate();
       isFunction(props.onValidated) && props.onValidated();
     },
     title: '提示',