feat: 确认删除modal封装

apps/web-antd/src/utils/modal.tsx

@@ -0,0 +1,63 @@
+import type { Rule } from 'ant-design-vue/es/form';
+
+import { reactive } from 'vue';
+
+import { Alert, Form, Input, Modal, type ModalFuncProps } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+
+export interface ConfirmModalProps extends Omit<ModalFuncProps, 'visible'> {
+  confirmText?: string;
+  placeholder?: string;
+  onValidated?: () => Promise<void>;
+}
+
+export function confirmDeleteModal(props: ConfirmModalProps) {
+  const placeholder = props.placeholder || `输入'确认删除'以确认删除`;
+  const confirmText = props.confirmText || '确认删除';
+
+  const formValue = reactive({
+    content: '',
+  });
+  const rulesRef = reactive<{ [key: string]: Rule[] }>({
+    content: [
+      {
+        message: '校验不通过',
+        required: true,
+        trigger: 'change',
+        validator(_, value) {
+          if (value !== confirmText) {
+            return Promise.reject(new Error('校验不通过'));
+          }
+          return Promise.resolve();
+        },
+      },
+    ],
+  });
+  const useForm = Form.useForm;
+  const { validate, validateInfos } = useForm(formValue, rulesRef);
+
+  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>
+    ),
+    okButtonProps: { danger: true, type: 'primary' },
+    onOk: async () => {
+      await validate();
+      isFunction(props.onValidated) && props.onValidated();
+    },
+    title: '提示',
+    type: 'warning',
+  });
+}

apps/web-antd/src/views/monitor/logininfor/index.vue

@@ -9,7 +9,8 @@ import { Page, useVbenModal } from '@vben/common-ui';
 
 import { Space, Table } from 'ant-design-vue';
 
-import { loginInfoList } from '#/api/monitor/logininfo';
+import { loginInfoClean, loginInfoList } from '#/api/monitor/logininfo';
+import { confirmDeleteModal } from '#/utils/modal';
 
 import { columns } from './data';
 import loginInfoModal from './login-info-modal.vue';
@@ -30,10 +31,21 @@ function handlePreview(record: Recordable<any>) {
   modalApi.setData(record);
   modalApi.open();
 }
+
+function handleClear() {
+  confirmDeleteModal({
+    onValidated: async () => {
+      await loginInfoClean();
+    },
+  });
+}
 </script>
 
 <template>
-  <Page>
+  <Page content-class="flex flex-col gap-[6px]">
+    <div class="flex justify-end">
+      <a-button @click="handleClear">{{ $t('pages.common.clear') }}</a-button>
+    </div>
     <Table :columns="columns" :data-source="loginDataList" size="middle">
       <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'action'">