refactor: replace el-dialog with DialogPro (#12400)

Author: ssongliu

frontend/src/components/dialog-pro/index.vue

@@ -3,9 +3,10 @@
         :title="title"
         v-model="dialogVisible"
         :destroy-on-close="true"
-        :close-on-click-modal="false"
+        :close-on-click-modal="closeOnClickModal"
         :show-close="showClose"
         :width="size"
+        draggable
         :open="open"
         @opened="opened"
         :before-close="handleBeforeClose"
@@ -38,6 +39,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    closeOnClickModal: {
+        type: Boolean,
+        default: false,
+    },
     size: {
         type: String,
         default: 'normal',

frontend/src/components/exist-file/index.vue

@@ -1,12 +1,6 @@
 <template>
     <div>
-        <el-dialog
-            v-model="dialogVisible"
-            :title="$t('file.existFileTitle')"
-            width="35%"
-            :close-on-click-modal="false"
-            :destroy-on-close="true"
-        >
+        <DialogPro v-model="dialogVisible" :title="$t('file.existFileTitle')" size="normal">
             <el-alert :show-icon="true" type="warning" :closable="false">
                 <div class="whitespace-break-spaces">
                     <span>{{ $t('file.existFileHelper') }}</span>
@@ -31,7 +25,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>
 <script lang="ts" setup>

frontend/src/components/log/container/index.vue

@@ -32,7 +32,12 @@
     <div class="log-container" :style="styleVars">
         <div class="xterm-log-viewer" ref="terminalElement"></div>
     </div>
-    <el-dialog v-model="downloadDialogVisible" :title="$t('commons.button.download')" width="420px">
+    <DialogPro
+        v-model="downloadDialogVisible"
+        :title="$t('commons.button.download')"
+        size="small"
+        :close-on-click-modal="true"
+    >
         <el-form label-position="top">
             <el-form-item :label="$t('container.fetch')">
                 <el-select v-model="downloadForm.mode" class="w-full">
@@ -61,7 +66,7 @@
             <el-button @click="downloadDialogVisible = false">{{ $t('commons.button.cancel') }}</el-button>
             <el-button type="primary" @click="onDownload">{{ $t('commons.button.confirm') }}</el-button>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>

frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue

@@ -74,7 +74,7 @@
             </el-table-column>
         </el-table>
 
-        <el-dialog v-model="dialogVisible" width="520px" :title="dialogTitle" destroy-on-close>
+        <DialogPro v-model="dialogVisible" :title="dialogTitle">
             <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
                 <el-form-item :label="t('commons.table.name')" prop="name">
                     <el-input v-model="form.name" :disabled="disabled" />
@@ -124,7 +124,7 @@
                     {{ t('commons.button.save') }}
                 </el-button>
             </template>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>
 

frontend/src/views/ai/mcp/server/import/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="submitVisible" :destroy-on-close="true" :close-on-click-modal="false" width="40%">
+    <DialogPro v-model="submitVisible">
         <template #header>
             {{ $t('aiTools.mcp.importMcpJson') }}
         </template>
@@ -32,7 +32,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>

frontend/src/views/container/container/file-browser/index.vue

@@ -97,7 +97,7 @@
             </el-form>
         </template>
     </DrawerPro>
-    <el-dialog v-model="previewVisible" :title="previewTitle" width="70%" destroy-on-close>
+    <DialogPro v-model="previewVisible" :title="previewTitle" size="w-70" :close-on-click-modal="true">
         <el-alert
             v-if="previewTruncated"
             :title="$t('file.previewTruncated')"
@@ -107,7 +107,7 @@
             class="mb-2"
         />
         <pre class="preview-content">{{ previewContent }}</pre>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>

frontend/src/views/host/file-management/preview/index.vue

@@ -1,14 +1,14 @@
 <template>
-    <el-dialog
+    <DialogPro
         v-model="open"
         :show-close="false"
-        :before-close="handleClose"
-        destroy-on-close
         append-to-body
         @opened="onOpen"
         :class="isFullscreen ? 'w-full' : '!w-3/4'"
         :top="'5vh'"
         :fullscreen="isFullscreen"
+        :close-on-click-modal="true"
+        @close="handleClose"
     >
         <template #header>
             <div class="flex items-center justify-between">
@@ -81,7 +81,7 @@
                 @error="errorHandler"
             />
         </div>
-    </el-dialog>
+    </DialogPro>
 </template>
 
 <script lang="ts" setup>

frontend/src/views/website/website/domain-create/index.vue

@@ -62,7 +62,7 @@
             {{ $t('website.batchInput') }}
         </el-button>
 
-        <el-dialog v-model="batchDialogVisible" :title="$t('website.batchAdd')" width="600px">
+        <DialogPro v-model="batchDialogVisible" :title="$t('website.batchAdd')" size="large">
             <el-input
                 type="textarea"
                 :rows="8"
@@ -75,7 +75,7 @@
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </template>
-        </el-dialog>
+        </DialogPro>
     </div>
 </template>