feat: Add dialog component (#7553)

Author: ssongliu

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" />

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>

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>
 

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>

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>
 

frontend/src/components/port-jump/index.vue

@@ -1,23 +1,17 @@
 <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') }}
                 </el-link>
             </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) {

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>

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 });

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';

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>