From a41f392a9ee71139410d29d7f44be3c034825f4e Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 19 Sep 2024 10:10:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A1=AE=E8=AE=A4=E5=88=A0=E9=99=A4mod?=
 =?UTF-8?q?al=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/utils/modal.tsx             | 63 +++++++++++++++++++
 .../src/views/monitor/logininfor/index.vue    | 16 ++++-
 2 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-antd/src/utils/modal.tsx

diff --git a/apps/web-antd/src/utils/modal.tsx b/apps/web-antd/src/utils/modal.tsx
new file mode 100644
index 00000000..c0ee4275
--- /dev/null
+++ b/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',
+  });
+}
diff --git a/apps/web-antd/src/views/monitor/logininfor/index.vue b/apps/web-antd/src/views/monitor/logininfor/index.vue
index 95ef5a3e..22b6d91b 100644
--- a/apps/web-antd/src/views/monitor/logininfor/index.vue
+++ b/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'">