diff --git a/frontend/src/components/backup/index.vue b/frontend/src/components/backup/index.vue index 64852dd02..d68eeb893 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 5f450945f..210801f08 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 94a8feba4..b1169e1e4 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 7658a5a3a..087af7103 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 11d572632..bf5b74768 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 43d3e8a6a..918100b72 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 e87dd6880..f3e08fa9d 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 73a319b3e..1bc12ba84 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 d678e05b5..592fbd1a5 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 5b1195ce9..1e98be4c4 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 3d9b3f553..3f1a3f640 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 806accddc..43507a0d8 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 c48acd328..9c3478596 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 543b18fda..7cadf134c 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 c421e1d07..8562843ea 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 3f1683849..cc401735e 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 d871d2bd7..8aa92fe27 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 96f1451a0..ee30ba25f 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 1d5d39565..6487b21da 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 61a13afbb..df4fd52f2 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 992c0617b..32579fc65 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 889a22f14..0c66ef3e6 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 96f1451a0..ee30ba25f 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 9ce49c264..fd4388a59 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 eadb46a8e..bea2c7429 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 5d4721316..94ff67a9c 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 f63007792..d2b676636 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 96f1451a0..ee30ba25f 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 1c86970d6..00745b4fa 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 992c0617b..32579fc65 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 cf737a2a7..783d504ef 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 fb4a153ff..c401585d2 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 de71ab5dc..f57fcc56a 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 d9117c313..3c55ef3f6 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 28710b3cf..1eb7b95e0 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 a1acdb550..3d8105805 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 8f7f623ff..4b7b71aaf 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 0b84e6c62..f32a1bfcd 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 b8f98d5ba..892c4482d 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 94060302c..972c95898 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 1647bcd0e..38146f25d 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 cd649da9d..a0b725591 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 9ef492c37..6479ec172 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 76f6c7266..e5bb5e5bc 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 b24e1faa0..7831ad2ee 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 a64b9be3b..99e3d4cfc 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 4b9ff8d10..6856c3f4d 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 825adada3..e2513909c 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 8259e97e1..f62a6a065 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>