diff --git a/frontend/src/components/backup/index.vue b/frontend/src/components/backup/index.vue
index 64852dd024d3..d68eeb89350a 100644
--- a/frontend/src/components/backup/index.vue
+++ b/frontend/src/components/backup/index.vue
@@ -67,12 +67,11 @@
         </template>
     </DrawerPro>
 
-    <el-dialog
+    <DialogPro
         v-model="open"
         :title="isBackup ? $t('commons.button.backup') : $t('commons.button.recover') + ' - ' + name"
-        width="30%"
-        :close-on-click-modal="false"
-        :before-close="handleBackupClose"
+        size="small"
+        @close="handleBackupClose"
     >
         <el-form ref="backupForm" label-position="left" v-loading="loading">
             <el-form-item
@@ -93,7 +92,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 
     <OpDialog ref="opRef" @search="search" />
     <TaskLog ref="taskLogRef" @close="search" />
diff --git a/frontend/src/components/confirm-dialog/index.vue b/frontend/src/components/confirm-dialog/index.vue
index 5f450945f0dc..210801f085c2 100644
--- a/frontend/src/components/confirm-dialog/index.vue
+++ b/frontend/src/components/confirm-dialog/index.vue
@@ -1,10 +1,5 @@
 <template>
-    <el-dialog v-model="submitVisible" :destroy-on-close="true" :close-on-click-modal="false" width="20%">
-        <template #header>
-            <div class="card-header">
-                <span>{{ header }}</span>
-            </div>
-        </template>
+    <DialogPro v-model="submitVisible" :title="header" size="mini">
         <div>
             <span v-if="operationInfo" style="font-size: 12px">{{ operationInfo }}</span>
             <div :style="{ 'margin-top': operationInfo ? '10px' : '0px' }">
@@ -23,7 +18,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/components/del-dialog/index.vue b/frontend/src/components/del-dialog/index.vue
index 94a8feba4000..b1169e1e4cc4 100644
--- a/frontend/src/components/del-dialog/index.vue
+++ b/frontend/src/components/del-dialog/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-dialog v-model="open" :title="form.title" width="30%" :close-on-click-modal="false" @close="handleClose">
+        <DialogPro v-model="open" :title="form.title" size="small" @close="handleClose">
             <div v-loading="loading">
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
@@ -30,7 +30,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>
 
diff --git a/frontend/src/components/dialog-pro/index.vue b/frontend/src/components/dialog-pro/index.vue
index 7658a5a3a7f7..087af71039aa 100644
--- a/frontend/src/components/dialog-pro/index.vue
+++ b/frontend/src/components/dialog-pro/index.vue
@@ -4,8 +4,13 @@
         v-model="dialogVisible"
         :destroy-on-close="true"
         :close-on-click-modal="false"
+        :show-close="showClose"
         :width="size"
+        :open="open"
+        @opened="opened"
+        :before-close="handleBeforeClose"
     >
+        <slot name="header"></slot>
         <div v-if="slots.content">
             <slot name="content"></slot>
         </div>
@@ -27,6 +32,10 @@ defineOptions({ name: 'DrawerPro' });
 
 const props = defineProps({
     title: String,
+    showClose: {
+        type: Boolean,
+        default: true,
+    },
     size: {
         type: String,
         default: 'normal',
@@ -39,10 +48,12 @@ const props = defineProps({
 
 const slots = useSlots();
 
-const emit = defineEmits(['update:modelValue', 'close']);
+const emit = defineEmits(['update:modelValue', 'close', 'open', 'opened']);
 
 const size = computed(() => {
     switch (props.size) {
+        case 'mini':
+            return '20%';
         case 'small':
             return '30%';
         case 'normal':
@@ -51,8 +62,12 @@ const size = computed(() => {
             return '50%';
         case 'full':
             return '100%';
-        case '60%':
+        case 'w-60':
             return '60%';
+        case 'w-70':
+            return '70%';
+        case 'w-90':
+            return '90%';
         default:
             return '50%';
     }
@@ -66,4 +81,14 @@ const dialogVisible = computed({
         emit('update:modelValue', value);
     },
 });
+
+const handleBeforeClose = () => {
+    emit('close');
+};
+const open = () => {
+    emit('open');
+};
+const opened = () => {
+    emit('opened');
+};
 </script>
diff --git a/frontend/src/components/license-import/index.vue b/frontend/src/components/license-import/index.vue
index 11d572632eab..bf5b74768dff 100644
--- a/frontend/src/components/license-import/index.vue
+++ b/frontend/src/components/license-import/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-dialog class="level-up-pro" v-model="open" :close-on-click-modal="false" @close="handleClose">
+        <DialogPro v-model="open" class="level-up-pro" @close="handleClose">
             <div style="text-align: center" v-loading="loading">
                 <span class="text-3xl font-medium title">{{ $t('license.levelUpPro') }}</span>
                 <el-row type="flex" justify="center" class="mt-6">
@@ -36,7 +36,7 @@
                     <el-button text type="primary" @click="toHalo">{{ $t('license.knowMorePro') }}</el-button>
                 </div>
             </div>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>
 
diff --git a/frontend/src/components/port-jump/index.vue b/frontend/src/components/port-jump/index.vue
index 43d3e8a6a4f5..918100b7242a 100644
--- a/frontend/src/components/port-jump/index.vue
+++ b/frontend/src/components/port-jump/index.vue
@@ -1,12 +1,6 @@
 <template>
     <div>
-        <el-dialog
-            v-model="dialogVisible"
-            :title="$t('app.checkTitle')"
-            width="30%"
-            :close-on-click-modal="false"
-            :destroy-on-close="true"
-        >
+        <DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
             <el-alert :closable="false" :title="$t('setting.systemIPWarning')" type="info">
                 <el-link icon="Position" @click="goRouter('/settings/panel')" type="primary">
                     {{ $t('firewall.quickJump') }}
@@ -14,10 +8,10 @@
             </el-alert>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="dialogVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>
 <script lang="ts" setup>
@@ -28,7 +22,7 @@ import { MsgError, MsgWarning } from '@/utils/message';
 import { useRouter } from 'vue-router';
 const router = useRouter();
 
-const dialogVisible = ref();
+const open = ref();
 
 interface DialogProps {
     port: any;
@@ -44,7 +38,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     let protocol = params.protocol === 'https' ? 'https' : 'http';
     const res = await getSettingInfo();
     if (!res.data.systemIP) {
-        dialogVisible.value = true;
+        open.value = true;
         return;
     }
     if (res.data.systemIP.indexOf(':') === -1) {
diff --git a/frontend/src/components/upload/index.vue b/frontend/src/components/upload/index.vue
index e87dd6880091..f3e08fa9d417 100644
--- a/frontend/src/components/upload/index.vue
+++ b/frontend/src/components/upload/index.vue
@@ -104,13 +104,7 @@
             </template>
         </DrawerPro>
 
-        <el-dialog
-            v-model="open"
-            :title="$t('commons.button.recover') + ' - ' + name"
-            width="40%"
-            :close-on-click-modal="false"
-            :before-close="handleBackupClose"
-        >
+        <DialogPro v-model="open" :title="$t('commons.button.recover') + ' - ' + name" @close="handleBackupClose">
             <el-form ref="backupForm" label-position="left" v-loading="loading">
                 <el-form-item
                     :label="$t('setting.compressPassword')"
@@ -130,7 +124,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
 
         <OpDialog ref="opRef" @search="search" />
     </div>
diff --git a/frontend/src/components/vscode-open/index.vue b/frontend/src/components/vscode-open/index.vue
index 73a319b3e061..1bc12ba84412 100644
--- a/frontend/src/components/vscode-open/index.vue
+++ b/frontend/src/components/vscode-open/index.vue
@@ -1,12 +1,6 @@
 <template>
     <div>
-        <el-dialog
-            v-model="dialogVisible"
-            :title="$t('app.checkTitle')"
-            width="30%"
-            :close-on-click-modal="false"
-            :destroy-on-close="true"
-        >
+        <DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
             <el-row>
                 <el-col :span="22" :offset="1">
                     <el-alert :closable="false" :title="$t('file.vscodeHelper')" type="info"></el-alert>
@@ -37,14 +31,14 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 
-const dialogVisible = ref();
+const open = ref();
 
 interface DialogProps {
     path: string;
@@ -60,7 +54,7 @@ const addForm = reactive({
 
 const em = defineEmits(['close']);
 const handleClose = () => {
-    dialogVisible.value = false;
+    open.value = false;
     if (vscodeConnectInfoForm.value) {
         vscodeConnectInfoForm.value.resetFields();
     }
@@ -73,7 +67,7 @@ const submit = async (formEl: FormInstance | undefined) => {
             return;
         }
         localStorage.setItem('VscodeConnectInfo', JSON.stringify(addForm));
-        dialogVisible.value = false;
+        open.value = false;
         const vscodeUrl = `vscode://vscode-remote/ssh-remote+${addForm.username}@${addForm.host}:${addForm.port}${addForm.path}?windowId=_blank`;
         window.open(vscodeUrl);
     });
@@ -91,7 +85,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     }
 
     addForm.path = params.path;
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 defineExpose({ acceptParams });
diff --git a/frontend/src/views/app-store/installed/check/index.vue b/frontend/src/views/app-store/installed/check/index.vue
index d678e05b530f..592fbd1a54dc 100644
--- a/frontend/src/views/app-store/installed/check/index.vue
+++ b/frontend/src/views/app-store/installed/check/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
+    <DialogPro v-model="open" :title="$t('app.checkTitle')" size="large">
         <el-row>
             <el-col :span="20" :offset="2" v-if="open">
                 <el-alert
@@ -37,7 +37,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
diff --git a/frontend/src/views/app-store/installed/delete/index.vue b/frontend/src/views/app-store/installed/delete/index.vue
index 5b1195ce9af6..1e98be4c47f5 100644
--- a/frontend/src/views/app-store/installed/delete/index.vue
+++ b/frontend/src/views/app-store/installed/delete/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.delete') + ' - ' + appInstallName"
-        width="40%"
-        :close-on-click-modal="false"
-        :before-close="handleClose"
-    >
+    <DialogPro v-model="open" :title="$t('commons.button.delete') + ' - ' + appInstallName" @close="handleClose">
         <el-form ref="deleteForm" label-position="left" v-loading="loading">
             <el-form-item>
                 <el-checkbox v-model="deleteReq.forceDelete" :label="$t('app.forceDelete')" />
@@ -46,7 +40,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
     <TaskLog ref="taskLogRef" @close="handleClose" />
 </template>
 <script lang="ts" setup>
diff --git a/frontend/src/views/app-store/installed/upgrade/diff/index.vue b/frontend/src/views/app-store/installed/upgrade/diff/index.vue
index 3d9b3f5537d1..3f1a3f64063f 100644
--- a/frontend/src/views/app-store/installed/upgrade/diff/index.vue
+++ b/frontend/src/views/app-store/installed/upgrade/diff/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('app.composeDiff')"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        width="90%"
-    >
+    <DialogPro v-model="open" :title="$t('app.composeDiff')" @close="handleClose" size="w-90">
         <div>
             <el-text type="warning">{{ $t('app.diffHelper') }}</el-text>
             <div ref="container" class="compose-diff"></div>
@@ -21,7 +15,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/container/compose/delete/index.vue b/frontend/src/views/container/compose/delete/index.vue
index 806accddc259..43507a0d83ac 100644
--- a/frontend/src/views/container/compose/delete/index.vue
+++ b/frontend/src/views/container/compose/delete/index.vue
@@ -1,10 +1,5 @@
 <template>
-    <el-dialog
-        v-model="dialogVisible"
-        :title="$t('commons.button.delete') + ' - ' + composeName"
-        width="30%"
-        :close-on-click-modal="false"
-    >
+    <DialogPro v-model="open" :title="$t('commons.button.delete') + ' - ' + composeName" size="small">
         <el-form ref="deleteForm" v-loading="loading">
             <el-form-item>
                 <el-checkbox v-model="deleteFile" :label="$t('container.allDelete')" />
@@ -23,7 +18,7 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="dialogVisible = false" :disabled="loading">
+                <el-button @click="open = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button type="primary" @click="submit" :disabled="deleteInfo != composeName || loading">
@@ -31,7 +26,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
@@ -40,7 +35,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { composeOperator } from '@/api/modules/container';
 
-let dialogVisible = ref(false);
+let open = ref(false);
 let loading = ref(false);
 let deleteInfo = ref('');
 
@@ -61,7 +56,7 @@ const acceptParams = async (prop: DialogProps) => {
     composeName.value = prop.name;
     composePath.value = prop.path;
     deleteInfo.value = '';
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 const submit = async () => {
@@ -77,7 +72,7 @@ const submit = async () => {
             loading.value = false;
             emit('search');
             MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-            dialogVisible.value = false;
+            open.value = false;
         })
         .catch(() => {
             loading.value = false;
diff --git a/frontend/src/views/container/container/command/index.vue b/frontend/src/views/container/container/command/index.vue
index c48acd3281fa..9c3478596837 100644
--- a/frontend/src/views/container/container/command/index.vue
+++ b/frontend/src/views/container/container/command/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-dialog v-model="drawerVisible" :title="$t('container.createByCommand')" :back="handleClose" width="70%">
+        <DialogPro v-model="open" :title="$t('container.createByCommand')" @close="handleClose" size="w-70">
             <el-form
                 @submit.prevent
                 ref="formRef"
@@ -22,7 +22,7 @@
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="drawerVisible = false">
+                    <el-button :disabled="loading" @click="open = false">
                         {{ $t('commons.button.cancel') }}
                     </el-button>
                     <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@@ -30,7 +30,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
         <TaskLog ref="taskLogRef" width="70%" />
     </div>
 </template>
@@ -44,7 +44,7 @@ import { createContainerByCommand } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
 import { newUUID } from '@/utils/util';
 
-const drawerVisible = ref<boolean>(false);
+const open = ref<boolean>(false);
 const emit = defineEmits<{ (e: 'search'): void }>();
 const loading = ref(false);
 const form = reactive({
@@ -54,7 +54,7 @@ const taskLogRef = ref();
 
 const acceptParams = (): void => {
     form.command = '';
-    drawerVisible.value = true;
+    open.value = true;
 };
 
 const formRef = ref<FormInstance>();
@@ -86,7 +86,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
                     loading.value = false;
                     emit('search');
                     openTaskLog(taskID);
-                    drawerVisible.value = false;
+                    open.value = false;
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 })
                 .catch(() => {
@@ -100,7 +100,7 @@ const openTaskLog = (taskID: string) => {
 };
 
 const handleClose = async () => {
-    drawerVisible.value = false;
+    open.value = false;
     emit('search');
 };
 
diff --git a/frontend/src/views/container/container/operate/confirm.vue b/frontend/src/views/container/container/operate/confirm.vue
index 543b18fda9c7..7cadf134cce6 100644
--- a/frontend/src/views/container/container/operate/confirm.vue
+++ b/frontend/src/views/container/container/operate/confirm.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="dialogVisible" width="30%" :title="$t('commons.button.edit')">
+    <DialogPro v-model="open" :title="$t('commons.button.edit')" size="small">
         <div v-if="isFromApp" class="leading-6">
             <div>
                 <span>{{ $t('container.updateHelper1') }}</span>
@@ -17,21 +17,21 @@
             <span>{{ $t('container.updateHelper4') }}</span>
         </div>
         <template #footer>
-            <el-button :disabled="loading" @click="dialogVisible = false">
+            <el-button :disabled="loading" @click="open = false">
                 {{ $t('commons.button.cancel') }}
             </el-button>
             <el-button :disabled="loading" type="primary" @click="onSubmit()">
                 {{ $t('commons.button.confirm') }}
             </el-button>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
 const loading = ref();
-const dialogVisible = ref(false);
+const open = ref(false);
 const isFromApp = ref();
 
 interface DialogProps {
@@ -40,13 +40,13 @@ interface DialogProps {
 
 const acceptParams = (props: DialogProps): void => {
     isFromApp.value = props.isFromApp;
-    dialogVisible.value = true;
+    open.value = true;
 };
 const emit = defineEmits(['submit']);
 
 const onSubmit = async () => {
     emit('submit');
-    dialogVisible.value = false;
+    open.value = false;
 };
 
 defineExpose({
diff --git a/frontend/src/views/container/container/prune/index.vue b/frontend/src/views/container/container/prune/index.vue
index c421e1d07869..8562843ea101 100644
--- a/frontend/src/views/container/container/prune/index.vue
+++ b/frontend/src/views/container/container/prune/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="dialogVisible" :title="$t('container.containerPrune')" :destroy-on-close="true" width="30%">
+    <DialogPro v-model="open" :title="$t('container.containerPrune')" size="small">
         <div>
             <ul class="help-ul">
                 <li class="lineClass" style="color: red">{{ $t('container.containerPruneHelper1') }}</li>
@@ -9,7 +9,7 @@
         </div>
         <template #footer>
             <span class="dialog-footer">
-                <el-button :disabled="loading" @click="dialogVisible = false">
+                <el-button :disabled="loading" @click="open = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button :disabled="loading" type="primary" @click="onClean()">
@@ -17,7 +17,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
@@ -28,7 +28,7 @@ import { ref } from 'vue';
 import { computeSize } from '@/utils/util';
 
 const loading = ref(false);
-const dialogVisible = ref<boolean>(false);
+const open = ref<boolean>(false);
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
@@ -47,7 +47,7 @@ const onClean = async () => {
                     computeSize(res.data.spaceReclaimed),
                 ]),
             );
-            dialogVisible.value = false;
+            open.value = false;
             emit('search');
         })
         .catch(() => {
@@ -56,7 +56,7 @@ const onClean = async () => {
 };
 
 const acceptParams = (): void => {
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 defineExpose({
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index 3f1683849d8b..cc401735e443 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -173,15 +173,7 @@
             </template>
         </LayoutContent>
 
-        <el-dialog
-            v-model="iptablesVisible"
-            :title="$t('container.iptablesDisable')"
-            width="30%"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            :show-close="false"
-        >
+        <DialogPro v-model="open" :title="$t('container.iptablesDisable')" size="small">
             <div class="mt-2.5">
                 <span class="text-rose-500">{{ $t('container.iptablesHelper2') }}</span>
                 <div class="mt-2.5">
@@ -197,7 +189,7 @@
                 <span class="dialog-footer">
                     <el-button
                         @click="
-                            iptablesVisible = false;
+                            open = false;
                             search();
                         "
                     >
@@ -212,7 +204,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
 
         <Mirror ref="mirrorRef" @search="search" />
         <Registry ref="registriesRef" @search="search" />
@@ -305,7 +297,7 @@ const formRef = ref<FormInstance>();
 const dockerConf = ref();
 const confirmDialogRefFile = ref();
 
-const iptablesVisible = ref();
+const open = ref();
 
 const onSaveFile = async () => {
     let params = {
@@ -377,12 +369,12 @@ const handleIptables = () => {
         confirmDialogRefIptable.value!.acceptParams(params);
         return;
     } else {
-        iptablesVisible.value = true;
+        open.value = true;
     }
 };
 const onSubmitCloseIPtable = () => {
     save('IPtables', 'disable');
-    iptablesVisible.value = false;
+    open.value = false;
 };
 const onSubmitOpenIPtable = () => {
     save('IPtables', 'enable');
diff --git a/frontend/src/views/cronjob/record/index.vue b/frontend/src/views/cronjob/record/index.vue
index d871d2bd737e..8aa92fe275d9 100644
--- a/frontend/src/views/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/record/index.vue
@@ -187,12 +187,7 @@
             </template>
         </LayoutContent>
 
-        <el-dialog
-            v-model="deleteVisible"
-            :title="$t('commons.button.clean')"
-            width="30%"
-            :close-on-click-modal="false"
-        >
+        <DialogPro v-model="open" :title="$t('commons.button.clean')" size="small">
             <el-form ref="deleteForm" label-position="left" v-loading="delLoading">
                 <el-form-item>
                     <el-checkbox v-model="cleanData" :label="$t('cronjob.cleanData')" />
@@ -203,7 +198,7 @@
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="deleteVisible = false" :disabled="delLoading">
+                    <el-button @click="open = false" :disabled="delLoading">
                         {{ $t('commons.button.cancel') }}
                     </el-button>
                     <el-button type="primary" @click="cleanRecord">
@@ -211,7 +206,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>
 
@@ -245,7 +240,7 @@ const records = ref<Array<Cronjob.Record>>([]);
 const currentRecord = ref<Cronjob.Record>();
 const currentRecordDetail = ref<string>('');
 
-const deleteVisible = ref();
+const open = ref();
 const delLoading = ref();
 const cleanData = ref();
 
@@ -418,7 +413,7 @@ const cleanRecord = async () => {
     await cleanRecords(dialogData.value.rowData.id, cleanData.value)
         .then(() => {
             delLoading.value = false;
-            deleteVisible.value = false;
+            open.value = false;
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             search();
         })
diff --git a/frontend/src/views/database/mysql/check/index.vue b/frontend/src/views/database/mysql/check/index.vue
index 96f1451a048a..ee30ba25fe6a 100644
--- a/frontend/src/views/database/mysql/check/index.vue
+++ b/frontend/src/views/database/mysql/check/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('app.checkTitle')"
-        width="50%"
-        :close-on-click-modal="false"
-        :destroy-on-close="true"
-    >
+    <DialogPro v-model="open" :title="$t('app.checkTitle')" size="large">
         <el-row>
             <el-col :span="20" :offset="2" v-if="open">
                 <el-alert
@@ -26,7 +20,7 @@
                 </el-descriptions>
             </el-col>
         </el-row>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
diff --git a/frontend/src/views/database/mysql/delete/index.vue b/frontend/src/views/database/mysql/delete/index.vue
index 1d5d39565754..6487b21daf52 100644
--- a/frontend/src/views/database/mysql/delete/index.vue
+++ b/frontend/src/views/database/mysql/delete/index.vue
@@ -1,10 +1,5 @@
 <template>
-    <el-dialog
-        v-model="dialogVisible"
-        :title="$t('commons.button.delete') + ' - ' + dbName"
-        width="30%"
-        :close-on-click-modal="false"
-    >
+    <DialogPro v-model="open" :title="$t('commons.button.delete') + ' - ' + dbName" size="small">
         <el-form ref="deleteForm" v-loading="loading" @submit.prevent>
             <el-form-item>
                 <el-checkbox v-model="deleteReq.forceDelete" :label="$t('app.forceDelete')" />
@@ -29,7 +24,7 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="dialogVisible = false" :disabled="loading">
+                <el-button @click="open = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button type="primary" @click="submit" :disabled="deleteInfo != dbName || loading">
@@ -37,7 +32,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
@@ -53,7 +48,7 @@ let deleteReq = ref({
     deleteBackup: false,
     forceDelete: false,
 });
-let dialogVisible = ref(false);
+let open = ref(false);
 let loading = ref(false);
 let deleteInfo = ref('');
 let dbName = ref('');
@@ -78,7 +73,7 @@ const acceptParams = async (prop: DialogProps) => {
     };
     dbName.value = prop.name;
     deleteInfo.value = '';
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 const submit = async () => {
@@ -88,7 +83,7 @@ const submit = async () => {
             loading.value = false;
             emit('search');
             MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-            dialogVisible.value = false;
+            open.value = false;
         })
         .catch(() => {
             loading.value = false;
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 61a13afbbdc0..df4fd52f280c 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -235,13 +235,7 @@
             </LayoutContent>
         </div>
 
-        <el-dialog
-            v-model="dashboardVisible"
-            :title="$t('app.checkTitle')"
-            width="30%"
-            :close-on-click-modal="false"
-            :destroy-on-close="true"
-        >
+        <DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
             <el-alert :closable="false" :title="$t('app.checkInstalledWarn', [dashboardName])" type="info">
                 <el-link icon="Position" @click="getAppDetail" type="primary">
                     {{ $t('database.goInstall') }}
@@ -249,10 +243,10 @@
             </el-alert>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="dashboardVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
 
         <BindDialog ref="bindRef" @search="search" />
         <PasswordDialog ref="passwordRef" @search="search" />
@@ -315,7 +309,7 @@ const phpadminPort = ref();
 const adminerPort = ref();
 const dashboardName = ref();
 const dashboardKey = ref();
-const dashboardVisible = ref(false);
+const open = ref(false);
 
 const appStatusRef = ref();
 
@@ -453,7 +447,7 @@ const goDashboard = async (name: string) => {
         if (phpadminPort.value === 0) {
             dashboardName.value = 'phpMyAdmin';
             dashboardKey.value = 'phpmyadmin';
-            dashboardVisible.value = true;
+            open.value = true;
             return;
         }
         dialogPortJumpRef.value.acceptParams({ port: phpadminPort.value });
@@ -462,7 +456,7 @@ const goDashboard = async (name: string) => {
     if (adminerPort.value === 0) {
         dashboardName.value = 'Adminer';
         dashboardKey.value = 'adminer';
-        dashboardVisible.value = true;
+        open.value = true;
         return;
     }
     dialogPortJumpRef.value.acceptParams({ port: adminerPort.value });
diff --git a/frontend/src/views/database/mysql/remote/delete/index.vue b/frontend/src/views/database/mysql/remote/delete/index.vue
index 992c0617b957..32579fc65133 100644
--- a/frontend/src/views/database/mysql/remote/delete/index.vue
+++ b/frontend/src/views/database/mysql/remote/delete/index.vue
@@ -1,10 +1,5 @@
 <template>
-    <el-dialog
-        v-model="dialogVisible"
-        :title="$t('database.unBindRemoteDB') + ' - ' + deleteMysqlReq.database"
-        width="30%"
-        :close-on-click-modal="false"
-    >
+    <DialogPro v-model="open" :title="$t('database.unBindRemoteDB') + ' - ' + deleteMysqlReq.database" size="small">
         <el-form ref="deleteForm" v-loading="loading" @submit.prevent>
             <el-form-item>
                 <el-checkbox v-model="deleteMysqlReq.forceDelete" :label="$t('database.unBindForce')" />
@@ -23,7 +18,7 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="dialogVisible = false" :disabled="loading">
+                <el-button @click="open = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button type="primary" @click="submit" :disabled="loading">
@@ -31,7 +26,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
@@ -46,7 +41,7 @@ let deleteMysqlReq = ref({
     deleteBackup: false,
     forceDelete: false,
 });
-let dialogVisible = ref(false);
+let open = ref(false);
 let loading = ref(false);
 
 const deleteForm = ref<FormInstance>();
@@ -65,7 +60,7 @@ const acceptParams = async (prop: DialogProps) => {
         deleteBackup: false,
         forceDelete: false,
     };
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 const submit = async () => {
@@ -75,7 +70,7 @@ const submit = async () => {
             loading.value = false;
             emit('search');
             MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-            dialogVisible.value = false;
+            open.value = false;
         })
         .catch(() => {
             loading.value = false;
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 889a22f140bd..0c66ef3e62a9 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -96,13 +96,7 @@
             </template>
         </LayoutContent>
 
-        <el-dialog
-            v-model="upgradeVisible"
-            :title="$t('app.checkTitle')"
-            width="30%"
-            :close-on-click-modal="false"
-            :destroy-on-close="true"
-        >
+        <DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
             <el-alert :closable="false" :title="$t('database.confNotFound')" type="info">
                 <el-link icon="Position" @click="goUpgrade()" type="primary">
                     {{ $t('database.goUpgrade') }}
@@ -110,10 +104,10 @@
             </el-alert>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="upgradeVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
 
         <ConfirmDialog ref="confirmPortRef" @confirm="onSubmitChangePort"></ConfirmDialog>
         <ConfirmDialog ref="confirmConfRef" @confirm="onSubmitChangeConf"></ConfirmDialog>
@@ -149,7 +143,7 @@ const baseInfo = reactive({
 });
 const panelFormRef = ref<FormInstance>();
 const mysqlConf = ref();
-const upgradeVisible = ref();
+const open = ref();
 
 const useOld = ref(false);
 
@@ -328,7 +322,7 @@ const loadMysqlConf = async () => {
             mysqlConf.value = res.data;
         })
         .catch(() => {
-            upgradeVisible.value = true;
+            open.value = true;
             loading.value = false;
         });
 };
diff --git a/frontend/src/views/database/postgresql/check/index.vue b/frontend/src/views/database/postgresql/check/index.vue
index 96f1451a048a..ee30ba25fe6a 100644
--- a/frontend/src/views/database/postgresql/check/index.vue
+++ b/frontend/src/views/database/postgresql/check/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('app.checkTitle')"
-        width="50%"
-        :close-on-click-modal="false"
-        :destroy-on-close="true"
-    >
+    <DialogPro v-model="open" :title="$t('app.checkTitle')" size="large">
         <el-row>
             <el-col :span="20" :offset="2" v-if="open">
                 <el-alert
@@ -26,7 +20,7 @@
                 </el-descriptions>
             </el-col>
         </el-row>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
diff --git a/frontend/src/views/database/postgresql/delete/index.vue b/frontend/src/views/database/postgresql/delete/index.vue
index 9ce49c2646fb..fd4388a59b4b 100644
--- a/frontend/src/views/database/postgresql/delete/index.vue
+++ b/frontend/src/views/database/postgresql/delete/index.vue
@@ -1,10 +1,5 @@
 <template>
-    <el-dialog
-        v-model="dialogVisible"
-        :title="$t('commons.button.delete') + ' - ' + dbName"
-        width="30%"
-        :close-on-click-modal="false"
-    >
+    <DialogPro v-model="open" :title="$t('commons.button.delete') + ' - ' + dbName" size="small">
         <el-form ref="deleteForm" v-loading="loading" @submit.prevent>
             <el-form-item>
                 <el-checkbox v-model="deleteReq.forceDelete" :label="$t('app.forceDelete')" />
@@ -29,7 +24,7 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="dialogVisible = false" :disabled="loading">
+                <el-button @click="open = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button type="primary" @click="submit" :disabled="deleteInfo != dbName || loading">
@@ -37,7 +32,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
@@ -53,7 +48,7 @@ let deleteReq = ref({
     deleteBackup: false,
     forceDelete: false,
 });
-let dialogVisible = ref(false);
+let open = ref(false);
 let loading = ref(false);
 let deleteInfo = ref('');
 let dbName = ref('');
@@ -78,7 +73,7 @@ const acceptParams = async (prop: DialogProps) => {
     };
     dbName.value = prop.name;
     deleteInfo.value = '';
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 const submit = async () => {
@@ -88,7 +83,7 @@ const submit = async () => {
             loading.value = false;
             emit('search');
             MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-            dialogVisible.value = false;
+            open.value = false;
         })
         .catch(() => {
             loading.value = false;
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index eadb46a8ee3d..bea2c7429b9f 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -199,13 +199,7 @@
             </LayoutContent>
         </div>
 
-        <el-dialog
-            v-model="dashboardVisible"
-            :title="$t('app.checkTitle')"
-            width="30%"
-            :close-on-click-modal="false"
-            :destroy-on-close="true"
-        >
+        <DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
             <el-alert :closable="false" :title="$t('app.checkInstalledWarn', [dashboardName])" type="info">
                 <el-link icon="Position" @click="getAppDetail" type="primary">
                     {{ $t('database.goInstall') }}
@@ -213,10 +207,10 @@
             </el-alert>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="dashboardVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
 
         <PrivilegesDialog ref="privilegesRef" @search="search" />
         <BindDialog ref="bindRef" @search="search" />
@@ -282,7 +276,7 @@ const privilegesRef = ref();
 const pgadminPort = ref();
 const dashboardName = ref();
 const dashboardKey = ref();
-const dashboardVisible = ref(false);
+const open = ref(false);
 
 const appStatusRef = ref();
 
@@ -425,7 +419,7 @@ const goDashboard = async () => {
     if (pgadminPort.value === 0) {
         dashboardName.value = 'PGAdmin4';
         dashboardKey.value = 'pgadmin4';
-        dashboardVisible.value = true;
+        open.value = true;
         return;
     }
     dialogPortJumpRef.value.acceptParams({ port: pgadminPort.value });
diff --git a/frontend/src/views/database/postgresql/remote/delete/index.vue b/frontend/src/views/database/postgresql/remote/delete/index.vue
index 5d47213161d7..94ff67a9c94d 100644
--- a/frontend/src/views/database/postgresql/remote/delete/index.vue
+++ b/frontend/src/views/database/postgresql/remote/delete/index.vue
@@ -1,10 +1,5 @@
 <template>
-    <el-dialog
-        v-model="dialogVisible"
-        :title="$t('database.unBindRemoteDB') + ' - ' + deleteReq.database"
-        width="30%"
-        :close-on-click-modal="false"
-    >
+    <DialogPro v-model="open" :title="$t('database.unBindRemoteDB') + ' - ' + deleteReq.database" size="small">
         <el-form ref="deleteForm" v-loading="loading" @submit.prevent>
             <el-form-item>
                 <el-checkbox v-model="deleteReq.forceDelete" :label="$t('database.unBindForce')" />
@@ -23,7 +18,7 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="dialogVisible = false" :disabled="loading">
+                <el-button @click="open = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button type="primary" @click="submit" :disabled="loading">
@@ -31,7 +26,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
@@ -46,7 +41,7 @@ let deleteReq = ref({
     deleteBackup: false,
     forceDelete: false,
 });
-let dialogVisible = ref(false);
+let open = ref(false);
 let loading = ref(false);
 
 const deleteForm = ref<FormInstance>();
@@ -65,7 +60,7 @@ const acceptParams = async (prop: DialogProps) => {
         deleteBackup: false,
         forceDelete: false,
     };
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 const submit = async () => {
@@ -75,7 +70,7 @@ const submit = async () => {
             loading.value = false;
             emit('search');
             MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-            dialogVisible.value = false;
+            open.value = false;
         })
         .catch(() => {
             loading.value = false;
diff --git a/frontend/src/views/database/postgresql/setting/index.vue b/frontend/src/views/database/postgresql/setting/index.vue
index f63007792af2..d2b6766368c2 100644
--- a/frontend/src/views/database/postgresql/setting/index.vue
+++ b/frontend/src/views/database/postgresql/setting/index.vue
@@ -50,13 +50,7 @@
             </template>
         </LayoutContent>
 
-        <el-dialog
-            v-model="upgradeVisible"
-            :title="$t('app.checkTitle')"
-            width="30%"
-            :close-on-click-modal="false"
-            :destroy-on-close="true"
-        >
+        <DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
             <el-alert :closable="false" :title="$t('database.confNotFound')" type="info">
                 <el-link icon="Position" @click="goUpgrade()" type="primary">
                     {{ $t('database.goUpgrade') }}
@@ -64,10 +58,10 @@
             </el-alert>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="upgradeVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
 
         <ConfirmDialog ref="confirmPortRef" @confirm="onSubmitChangePort"></ConfirmDialog>
         <ConfirmDialog ref="confirmConfRef" @confirm="onSubmitChangeConf"></ConfirmDialog>
@@ -100,7 +94,7 @@ const baseInfo = reactive({
 });
 const panelFormRef = ref<FormInstance>();
 const postgresqlConf = ref();
-const upgradeVisible = ref();
+const open = ref();
 
 const postgresqlName = ref();
 const postgresqlStatus = ref();
@@ -207,7 +201,7 @@ const loadPostgresqlConf = async () => {
             postgresqlConf.value = res.data;
         })
         .catch(() => {
-            upgradeVisible.value = true;
+            open.value = true;
             loading.value = false;
         });
 };
diff --git a/frontend/src/views/database/redis/check/index.vue b/frontend/src/views/database/redis/check/index.vue
index 96f1451a048a..ee30ba25fe6a 100644
--- a/frontend/src/views/database/redis/check/index.vue
+++ b/frontend/src/views/database/redis/check/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('app.checkTitle')"
-        width="50%"
-        :close-on-click-modal="false"
-        :destroy-on-close="true"
-    >
+    <DialogPro v-model="open" :title="$t('app.checkTitle')" size="large">
         <el-row>
             <el-col :span="20" :offset="2" v-if="open">
                 <el-alert
@@ -26,7 +20,7 @@
                 </el-descriptions>
             </el-col>
         </el-row>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 1c86970d6772..00745b4fa374 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -118,13 +118,8 @@
 
         <Setting ref="settingRef" style="margin-top: 30px" />
         <Conn ref="connRef" @check-exist="reOpenTerminal" @close-terminal="closeTerminal(true)" />
-        <el-dialog
-            v-model="commandVisible"
-            :title="$t('app.checkTitle')"
-            width="30%"
-            :close-on-click-modal="false"
-            :destroy-on-close="true"
-        >
+
+        <DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
             <el-alert :closable="false" :title="$t('app.checkInstalledWarn', ['Redis-Commander'])" type="info">
                 <el-link icon="Position" @click="getAppDetail('redis-commander')" type="primary">
                     {{ $t('database.goInstall') }}
@@ -132,10 +127,10 @@
             </el-alert>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="commandVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
 
         <QuickCmd ref="dialogQuickCmdRef" @reload="loadQuickCmd" />
     </div>
@@ -169,7 +164,7 @@ const terminalShow = ref(false);
 
 const appStatusRef = ref();
 
-const commandVisible = ref(false);
+const open = ref(false);
 
 const redisCliExist = ref();
 
diff --git a/frontend/src/views/database/redis/remote/delete/index.vue b/frontend/src/views/database/redis/remote/delete/index.vue
index 992c0617b957..32579fc65133 100644
--- a/frontend/src/views/database/redis/remote/delete/index.vue
+++ b/frontend/src/views/database/redis/remote/delete/index.vue
@@ -1,10 +1,5 @@
 <template>
-    <el-dialog
-        v-model="dialogVisible"
-        :title="$t('database.unBindRemoteDB') + ' - ' + deleteMysqlReq.database"
-        width="30%"
-        :close-on-click-modal="false"
-    >
+    <DialogPro v-model="open" :title="$t('database.unBindRemoteDB') + ' - ' + deleteMysqlReq.database" size="small">
         <el-form ref="deleteForm" v-loading="loading" @submit.prevent>
             <el-form-item>
                 <el-checkbox v-model="deleteMysqlReq.forceDelete" :label="$t('database.unBindForce')" />
@@ -23,7 +18,7 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="dialogVisible = false" :disabled="loading">
+                <el-button @click="open = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button type="primary" @click="submit" :disabled="loading">
@@ -31,7 +26,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
@@ -46,7 +41,7 @@ let deleteMysqlReq = ref({
     deleteBackup: false,
     forceDelete: false,
 });
-let dialogVisible = ref(false);
+let open = ref(false);
 let loading = ref(false);
 
 const deleteForm = ref<FormInstance>();
@@ -65,7 +60,7 @@ const acceptParams = async (prop: DialogProps) => {
         deleteBackup: false,
         forceDelete: false,
     };
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 const submit = async () => {
@@ -75,7 +70,7 @@ const submit = async () => {
             loading.value = false;
             emit('search');
             MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-            dialogVisible.value = false;
+            open.value = false;
         })
         .catch(() => {
             loading.value = false;
diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue
index cf737a2a7cd8..783d504ef28e 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -1,14 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :show-close="false"
-        :before-close="handleClose"
-        destroy-on-close
-        width="70%"
-        @opened="onOpen"
-        :top="'5vh'"
-        :fullscreen="isFullscreen"
-    >
+    <DialogPro v-model="open" size="w-70" @opened="onOpen" :show-close="false" :top="'5vh'" :fullscreen="isFullscreen">
         <template #header>
             <div ref="dialogHeader" class="flex items-center justify-between">
                 <span>{{ $t('commons.button.edit') + ' - ' + form.path }}</span>
@@ -157,7 +148,7 @@
                 <el-button type="primary" @click="saveContent()">{{ $t('commons.button.confirm') }}</el-button>
             </div>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/host/file-management/delete/index.vue b/frontend/src/views/host/file-management/delete/index.vue
index fb4a153ffafc..c401585d2ddb 100644
--- a/frontend/src/views/host/file-management/delete/index.vue
+++ b/frontend/src/views/host/file-management/delete/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false">
+    <DialogPro v-model="open" :title="$t('app.delete')" size="small">
         <div>
             <el-row>
                 <el-col :span="22" :offset="1">
@@ -51,7 +51,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import i18n from '@/lang';
diff --git a/frontend/src/views/host/file-management/process/index.vue b/frontend/src/views/host/file-management/process/index.vue
index de71ab5dcac9..f57fcc56aa78 100644
--- a/frontend/src/views/host/file-management/process/index.vue
+++ b/frontend/src/views/host/file-management/process/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        width="30%"
-        v-model="open"
-        @open="onOpen"
-        :before-close="handleClose"
-        :title="$t('file.downloadProcess')"
-    >
+    <DialogPro v-model="open" :title="$t('file.downloadProcess')" size="small" @open="onOpen" @close="handleClose">
         <div v-for="(value, index) in res" :key="index">
             <span>{{ value['percent'] === 100 ? $t('file.downloadSuccess') : $t('file.downloading') }}</span>
             <MsgInfo :info="value['name']" width="250" />
@@ -16,7 +10,7 @@
                 <span v-if="value['total'] > 0">{{ getFileSize(value['total']) }}</span>
             </span>
         </div>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/host/file-management/recycle-bin/delete/index.vue b/frontend/src/views/host/file-management/recycle-bin/delete/index.vue
index d9117c313d6d..3c55ef3f6f8a 100644
--- a/frontend/src/views/host/file-management/recycle-bin/delete/index.vue
+++ b/frontend/src/views/host/file-management/recycle-bin/delete/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false">
+    <DialogPro v-model="open" :title="$t('app.delete')" size="small">
         <el-row>
             <el-col :span="20" :offset="2">
                 <el-alert :title="$t('file.deleteRecycleHelper')" show-icon type="error" :closable="false"></el-alert>
@@ -23,7 +23,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import i18n from '@/lang';
diff --git a/frontend/src/views/host/file-management/recycle-bin/reduce/index.vue b/frontend/src/views/host/file-management/recycle-bin/reduce/index.vue
index 28710b3cf53e..1eb7b95e0a45 100644
--- a/frontend/src/views/host/file-management/recycle-bin/reduce/index.vue
+++ b/frontend/src/views/host/file-management/recycle-bin/reduce/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('file.reduce')" width="30%" :close-on-click-modal="false">
+    <DialogPro v-model="open" :title="$t('file.reduce')" size="small">
         <el-row>
             <el-col :span="20" :offset="2">
                 <el-alert :title="$t('file.confirmReduce')" show-icon type="error" :closable="false"></el-alert>
@@ -23,7 +23,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index a1acdb550434..3d81058056d7 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -144,7 +144,8 @@
                 </div>
             </div>
         </div>
-        <el-dialog v-model="agreeVisible" center :destroy-on-close="true" :close-on-click-modal="false" width="80%">
+
+        <DialogPro v-model="open" center size="w-90">
             <el-row type="flex" justify="center">
                 <span class="text-base mb-4">
                     {{ $t('commons.login.agreeTitle') }}
@@ -155,7 +156,7 @@
             </div>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="agreeVisible = false">
+                    <el-button @click="open = false">
                         {{ $t('commons.button.notAgree') }}
                     </el-button>
                     <el-button type="primary" @click="agreeWithLogin()">
@@ -163,7 +164,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>
 
@@ -188,7 +189,7 @@ const errAuthInfo = ref(false);
 const errCaptcha = ref(false);
 const errMfaInfo = ref(false);
 const isDemo = ref(false);
-const agreeVisible = ref(false);
+const open = ref(false);
 
 type FormInstance = InstanceType<typeof ElForm>;
 const _isMobile = () => {
@@ -249,7 +250,7 @@ function handleCommand(command: string) {
 }
 
 const agreeWithLogin = () => {
-    agreeVisible.value = false;
+    open.value = false;
     loginForm.agreeLicense = true;
     login(loginFormRef.value);
 };
@@ -260,7 +261,7 @@ const login = (formEl: FormInstance | undefined) => {
         if (!valid) return;
         if (!loginForm.agreeLicense) {
             if (_isMobile()) {
-                agreeVisible.value = true;
+                open.value = true;
             }
             return;
         }
diff --git a/frontend/src/views/setting/license/delete/index.vue b/frontend/src/views/setting/license/delete/index.vue
index 8f7f623fff80..4b7b71aaf260 100644
--- a/frontend/src/views/setting/license/delete/index.vue
+++ b/frontend/src/views/setting/license/delete/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="dialogVisible" :title="$t('commons.button.delete')" width="30%" :close-on-click-modal="false">
+    <DialogPro v-model="open" :title="$t('commons.button.delete')" size="small">
         <el-form ref="deleteRef" v-loading="loading" @submit.prevent>
             <el-form-item>
                 <el-alert :title="$t('license.deleteHelper')" :closable="false" type="warning" />
@@ -13,7 +13,7 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="dialogVisible = false" :disabled="loading">
+                <el-button @click="open = false" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button type="primary" @click="submit" :disabled="loading">
@@ -21,7 +21,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
@@ -35,7 +35,7 @@ let form = reactive({
     licenseName: '',
     forceDelete: false,
 });
-let dialogVisible = ref(false);
+let open = ref(false);
 let loading = ref(false);
 
 const deleteRef = ref<FormInstance>();
@@ -51,7 +51,7 @@ const acceptParams = async (prop: DialogProps) => {
     form.id = prop.id;
     form.licenseName = prop.name;
     form.forceDelete = false;
-    dialogVisible.value = true;
+    open.value = true;
 };
 
 const submit = async () => {
@@ -61,7 +61,7 @@ const submit = async () => {
             loading.value = false;
             emit('search');
             MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-            dialogVisible.value = false;
+            open.value = false;
         })
         .catch(() => {
             loading.value = false;
diff --git a/frontend/src/views/setting/snapshot/recover/index.vue b/frontend/src/views/setting/snapshot/recover/index.vue
index 0b84e6c629ce..f32a1bfcd9d2 100644
--- a/frontend/src/views/setting/snapshot/recover/index.vue
+++ b/frontend/src/views/setting/snapshot/recover/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.recover')"
-        width="40%"
-        :close-on-click-modal="false"
-        :before-close="handleClose"
-    >
+    <DialogPro v-model="open" :title="$t('commons.button.recover')" @close="handleClose">
         <el-form ref="recoverForm" label-position="top" v-loading="loading">
             <div style="margin-left: 20px; line-height: 32px" v-if="recoverReq.isNew">
                 {{ $t('setting.recoverHelper', [recoverReq.name]) }}
@@ -58,7 +52,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
     <TaskLog ref="taskLogRef" width="70%" />
 </template>
 
diff --git a/frontend/src/views/website/runtime/delete/index.vue b/frontend/src/views/website/runtime/delete/index.vue
index b8f98d5bac98..892c4482d6fa 100644
--- a/frontend/src/views/website/runtime/delete/index.vue
+++ b/frontend/src/views/website/runtime/delete/index.vue
@@ -1,10 +1,9 @@
 <template>
-    <el-dialog
+    <DialogPro
         v-model="open"
-        :close-on-click-modal="false"
         :title="$t('commons.button.delete') + ' - ' + resourceName"
-        width="30%"
-        :before-close="handleClose"
+        size="small"
+        @close="handleClose"
     >
         <div :key="key" :loading="loading">
             <el-form ref="deleteForm" label-position="left">
@@ -24,7 +23,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/runtime/php/check/index.vue b/frontend/src/views/website/runtime/php/check/index.vue
index 94060302c354..972c958989cc 100644
--- a/frontend/src/views/website/runtime/php/check/index.vue
+++ b/frontend/src/views/website/runtime/php/check/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
+    <DialogPro v-model="open" :title="$t('app.checkTitle')" size="large">
         <el-row>
             <el-col :span="20" :offset="2" v-if="open">
                 <el-alert
@@ -37,7 +37,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
diff --git a/frontend/src/views/website/runtime/php/extension-template/operate/index.vue b/frontend/src/views/website/runtime/php/extension-template/operate/index.vue
index 1647bcd0ec41..38146f25d98d 100644
--- a/frontend/src/views/website/runtime/php/extension-template/operate/index.vue
+++ b/frontend/src/views/website/runtime/php/extension-template/operate/index.vue
@@ -1,10 +1,9 @@
 <template>
-    <el-dialog
+    <DialogPro
         v-model="open"
         :title="$t('commons.button.' + operate) + $t('php.extensions')"
-        :close-on-click-modal="false"
-        width="30%"
-        :before-close="handleClose"
+        size="small"
+        @close="handleClose"
     >
         <el-row v-loading="loading">
             <el-col :span="22" :offset="1">
@@ -40,7 +39,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/ssl/acme-account/create/index.vue b/frontend/src/views/website/ssl/acme-account/create/index.vue
index cd649da9dcd8..a0b7255912ff 100644
--- a/frontend/src/views/website/ssl/acme-account/create/index.vue
+++ b/frontend/src/views/website/ssl/acme-account/create/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.create')"
-        :close-on-click-modal="false"
-        width="30%"
-        :before-close="handleClose"
-    >
+    <DialogPro v-model="open" :title="$t('commons.button.create')" size="small" @close="handleClose">
         <el-row v-loading="loading">
             <el-col :span="22" :offset="1">
                 <el-form @submit.prevent ref="accountForm" label-position="top" :model="account" :rules="rules">
@@ -65,7 +59,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
diff --git a/frontend/src/views/website/ssl/apply/index.vue b/frontend/src/views/website/ssl/apply/index.vue
index 9ef492c378f8..6479ec172f9f 100644
--- a/frontend/src/views/website/ssl/apply/index.vue
+++ b/frontend/src/views/website/ssl/apply/index.vue
@@ -1,12 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('ssl.apply')"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        width="50%"
-        :before-close="handleClose"
-    >
+    <DialogPro v-model="open" :title="$t('ssl.apply')" size="large" @close="handleClose">
         <div v-if="loading">
             <el-alert type="info" :closable="false" center>{{ $t('ssl.getDnsResolve') }}</el-alert>
         </div>
@@ -39,7 +32,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/ssl/ca/create/index.vue b/frontend/src/views/website/ssl/ca/create/index.vue
index 76f6c726670d..e5bb5e5bc8e7 100644
--- a/frontend/src/views/website/ssl/ca/create/index.vue
+++ b/frontend/src/views/website/ssl/ca/create/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.create')"
-        :close-on-click-modal="false"
-        width="40%"
-        :before-close="handleClose"
-    >
+    <DialogPro v-model="open" :title="$t('commons.button.create')" @close="handleClose">
         <el-row v-loading="loading">
             <el-col :span="22" :offset="1">
                 <el-form @submit.prevent ref="caForm" label-position="top" :model="ca" :rules="rules">
@@ -51,7 +45,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/ssl/ca/obtain/index.vue b/frontend/src/views/website/ssl/ca/obtain/index.vue
index b24e1faa0aaf..7831ad2eebf9 100644
--- a/frontend/src/views/website/ssl/ca/obtain/index.vue
+++ b/frontend/src/views/website/ssl/ca/obtain/index.vue
@@ -1,12 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('ssl.selfSigned')"
-        :close-on-click-modal="false"
-        width="40%"
-        :before-close="handleClose"
-        :destroy-on-close="true"
-    >
+    <DialogPro v-model="open" :title="$t('ssl.selfSigned')" @close="handleClose">
         <el-row v-loading="loading">
             <el-col :span="22" :offset="1">
                 <el-form @submit.prevent ref="obtainForm" label-position="top" :model="obtain" :rules="rules">
@@ -77,7 +70,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/ssl/dns-account/create/index.vue b/frontend/src/views/website/ssl/dns-account/create/index.vue
index a64b9be3be4e..99e3d4cfc8c8 100644
--- a/frontend/src/views/website/ssl/dns-account/create/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/create/index.vue
@@ -1,12 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.create')"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        width="40%"
-        :before-close="handleClose"
-    >
+    <DialogPro v-model="open" :title="$t('commons.button.create')" @close="handleClose">
         <el-row>
             <el-col :span="22" :offset="1">
                 <el-form ref="accountForm" label-position="top" :model="account" :rules="rules">
@@ -95,7 +88,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/ssl/obtain/index.vue b/frontend/src/views/website/ssl/obtain/index.vue
index 4b9ff8d1056a..6856c3f4d5c8 100644
--- a/frontend/src/views/website/ssl/obtain/index.vue
+++ b/frontend/src/views/website/ssl/obtain/index.vue
@@ -1,12 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('ssl.apply')"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        width="30%"
-        :before-close="handleClose"
-    >
+    <DialogPro v-model="open" :title="$t('ssl.apply')" size="small" @close="handleClose">
         <div class="text-center" v-loading="loading">
             <div v-if="ssl.websites && ssl.websites.length > 0">
                 <span>{{ $t('ssl.renewWebsite') }}</span>
@@ -30,7 +23,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/website/check/index.vue b/frontend/src/views/website/website/check/index.vue
index 825adada3ba7..e2513909c2ca 100644
--- a/frontend/src/views/website/website/check/index.vue
+++ b/frontend/src/views/website/website/check/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :title="$t('app.checkTitle')"
-        width="50%"
-        :close-on-click-modal="false"
-        :destroy-on-close="true"
-    >
+    <DialogPro v-model="open" :title="$t('app.checkTitle')" size="large" @close="handleClose">
         <el-row>
             <el-alert type="warning" :description="$t('website.deleteHelper')" center show-icon :closable="false" />
             <el-col :span="24">
@@ -26,7 +20,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
diff --git a/frontend/src/views/website/website/delete/index.vue b/frontend/src/views/website/website/delete/index.vue
index 8259e97e12d1..f62a6a0651cc 100644
--- a/frontend/src/views/website/website/delete/index.vue
+++ b/frontend/src/views/website/website/delete/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :close-on-click-modal="false"
-        :title="$t('website.delete') + ' - ' + websiteName"
-        width="30%"
-        :before-close="handleClose"
-    >
+    <DialogPro v-model="open" :title="$t('website.delete') + ' - ' + websiteName" size="small" @close="handleClose">
         <div :key="key" v-loading="loading">
             <el-form ref="deleteForm" label-position="left">
                 <el-form-item>
@@ -46,7 +40,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>