签入版本

RXThinkCMF_ThinkPhp6_AntdVue/zh/core/idempotent.md

@@ -8,27 +8,29 @@
 
 ### 按钮 loading
 
-ElementPlus 的按钮组件支持 `loading` 属性，请求期间禁用按钮：
+Ant Design 的按钮组件支持 `loading` 属性，请求期间禁用按钮：
 
 ```vue
 <template>
-  <el-button
+  <a-button
     type="primary"
     :loading="submitting"
     @click="handleSubmit"
   >
     提交
-  </el-button>
+  </a-button>
 </template>
 
 <script setup>
+import { message } from 'ant-design-vue';
+
 const submitting = ref(false);
 
 async function handleSubmit() {
   submitting.value = true;
   try {
     await exampleAdd(formData.value);
-    ElMessage.success('添加成功');
+    message.success('添加成功');
   } finally {
     submitting.value = false;
   }
@@ -41,29 +43,34 @@ async function handleSubmit() {
 前端提供 `useLockFn` 钩子函数，实现请求级别的防重复提交：
 
 ```typescript
-import { useLockFn } from '@/utils/lock';
+import { message } from 'ant-design-vue';
+import { useLockFn } from '@/utils/useLockFn';
 
 // 包装提交函数，防止重复点击
-const handleSubmit = useLockFn(async () => {
+const { isLock, lockFn: handleSubmit } = useLockFn(async () => {
   await exampleAdd(formData.value);
-  ElMessage.success('添加成功');
+  message.success('添加成功');
 });
 ```
 
 `useLockFn` 原理：
 
 ```typescript
-function useLockFn(fn: Function) {
-  let isLocked = false;
-  return async (...args: any[]) => {
-    if (isLocked) return;
-    isLocked = true;
+// ui/src/utils/useLockFn.ts
+import { ref } from 'vue';
+
+export function useLockFn(fn: (...args: any[]) => Promise<any>) {
+  const isLock = ref(false);
+  const lockFn = async (...args: any[]) => {
+    if (isLock.value) return;
+    isLock.value = true;
     try {
-      return await fn(...args);
+      await fn(...args);
     } finally {
-      isLocked = false;
+      isLock.value = false;
     }
   };
+  return { isLock, lockFn };
 }
 ```