refactor(frontend): unify dialogs and improve deletion flows

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

@@ -11,14 +11,14 @@
                     <el-col :span="22">
                         <el-alert class="mt-2" :show-icon="true" type="warning" :closable="false">
                             <div v-for="(item, index) in form.msgs" :key="index">
-                                <div style="line-height: 20px; word-wrap: break-word">
+                                <div class="dialog-object-name" style="line-height: 20px">
                                     <span>{{ item }}</span>
                                 </div>
                             </div>
                         </el-alert>
                         <slot name="content"></slot>
                         <ul v-for="(item, index) in form.names" :key="index">
-                            <div style="word-wrap: break-word">
+                            <div class="dialog-object-name">
                                 <li>{{ item }}</li>
                             </div>
                         </ul>

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

@@ -59,7 +59,7 @@
                             class="mr-2 flex-shrink-0"
                         ></svg-icon>
                         <el-tooltip :content="item.path" placement="top">
-                            <span class="truncate text-sm">{{ item.name }}</span>
+                            <span class="dialog-object-name text-sm">{{ item.name }}</span>
                         </el-tooltip>
                     </div>
                 </div>

frontend/src/styles/common.scss

@@ -358,9 +358,8 @@ html {
     background: var(--panel-main-bg-color-10);
     pre {
         margin: 0;
-        width: 350px;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
     }
 }
 

frontend/src/styles/element.scss

@@ -286,3 +286,27 @@ html {
     border: 1px solid var(--panel-main-bg-color-10);
     background-color: var(--panel-main-bg-color-10) !important;
 }
+
+// Allow long object names in dialog titles and explanatory text to wrap.
+.el-dialog__header,
+.el-dialog__body,
+.el-message-box__title,
+.el-message-box__message {
+    overflow-wrap: anywhere;
+}
+
+.el-dialog__title,
+.el-message-box__title {
+    white-space: normal;
+}
+
+.el-message-box__message,
+.el-dialog .el-alert__content {
+    min-width: 0;
+}
+
+.dialog-object-name {
+    min-width: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
+}

frontend/src/views/host/file-management/code-editor/index.vue

@@ -10,7 +10,7 @@
         <template #header>
             <div ref="dialogHeader" class="flex items-center justify-between code-header px-4 rounded-t">
                 <div class="code-title">
-                    <span class="truncate-text">{{ $t('home.dir') + ' - ' + currentEditorPath }}</span>
+                    <span class="dialog-object-name">{{ $t('home.dir') + ' - ' + currentEditorPath }}</span>
                     <el-tooltip v-if="currentEditorPath" :content="$t('file.copyDir')" placement="top">
                         <CopyButton class="code-title-copy" :content="currentEditorPath" />
                     </el-tooltip>
@@ -2175,13 +2175,6 @@ defineExpose({ acceptParams });
     flex-shrink: 0;
 }
 
-.truncate-text {
-    display: block;
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
 .code-title {
     display: inline-flex;
     align-items: center;

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

@@ -1,5 +1,5 @@
 <template>
-    <DialogPro v-model="open" :title="$t('commons.button.delete')" size="small">
+    <DialogPro v-model="open" :title="$t('commons.button.delete')" size="w-60" class="file-delete-dialog">
         <div v-loading="loading">
             <el-row>
                 <el-col :span="22" :offset="1">
@@ -34,7 +34,7 @@
                                     :iconName="getIconName(row.extension)"
                                 ></svg-icon>
                             </div>
-                            <span class="sle">{{ row.name }}</span>
+                            <span class="dialog-object-name">{{ row.name }}</span>
                         </div>
                     </div>
                 </el-col>
@@ -150,6 +150,11 @@ defineExpose({
 </script>
 
 <style scoped>
+:global(.el-dialog.file-delete-dialog:not(.is-fullscreen)) {
+    width: 60vw !important;
+    min-width: 0;
+}
+
 .resource {
     margin-top: 10px;
     max-height: 400px;

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

@@ -37,7 +37,7 @@
                         <template v-for="(item, index) in imageFiles" :key="index">
                             <el-tooltip :content="item.path" placement="right">
                                 <div
-                                    class="text-sm truncate mb-1 rounded p-1 left-item"
+                                    class="text-sm dialog-object-name mb-1 rounded p-1 left-item"
                                     @click="changeImg(item.path)"
                                     :class="item.path === filePath ? 'left-item-default' : ''"
                                 >

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

@@ -11,7 +11,7 @@
                     <div class="flex items-center gap-3">
                         <div class="flex-1 min-w-0">
                             <el-tooltip :content="value.name" placement="top">
-                                <div class="truncate text-gray-700">{{ value.name }}</div>
+                                <div class="dialog-object-name text-gray-700">{{ value.name }}</div>
                             </el-tooltip>
                             <div class="text-gray-500">
                                 {{ getStatusText(value) }}

frontend/src/views/host/file-management/recycle-bin/delete/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogPro v-model="open" :title="$t('commons.button.delete')" size="small">
+    <DialogPro v-model="open" :title="$t('commons.button.delete')" size="w-60" class="recycle-file-dialog">
         <el-row>
             <el-col :span="20" :offset="2">
                 <el-alert :title="$t('file.deleteRecycleHelper')" show-icon type="error" :closable="false"></el-alert>
@@ -8,7 +8,7 @@
                         <svg-icon v-if="row.isDir" className="table-icon mr-1 " iconName="p-file-folder"></svg-icon>
                         <svg-icon v-else className="table-icon mr-1" :iconName="getIconName(row.extension)"></svg-icon>
                     </div>
-                    <span class="sle">{{ row.name }}</span>
+                    <span class="dialog-object-name">{{ row.name }}</span>
                 </div>
             </el-col>
         </el-row>
@@ -72,6 +72,11 @@ defineExpose({
 </script>
 
 <style scoped>
+:global(.el-dialog.recycle-file-dialog:not(.is-fullscreen)) {
+    width: 60vw !important;
+    min-width: 0;
+}
+
 .resource {
     margin-top: 10px;
     max-height: 400px;

frontend/src/views/host/file-management/recycle-bin/reduce/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogPro v-model="open" :title="$t('file.reduce')" size="small">
+    <DialogPro v-model="open" :title="$t('file.reduce')" size="w-60" class="recycle-file-dialog">
         <el-row>
             <el-col :span="20" :offset="2">
                 <el-alert :title="$t('file.confirmReduce')" show-icon type="error" :closable="false"></el-alert>
@@ -8,7 +8,7 @@
                         <svg-icon v-if="row.isDir" className="table-icon mr-1 " iconName="p-file-folder"></svg-icon>
                         <svg-icon v-else className="table-icon mr-1" :iconName="getIconName(row.extension)"></svg-icon>
                     </div>
-                    <span class="sle">{{ row.name }}</span>
+                    <span class="dialog-object-name">{{ row.name }}</span>
                 </div>
             </el-col>
         </el-row>
@@ -71,3 +71,10 @@ defineExpose({
     acceptParams,
 });
 </script>
+
+<style scoped>
+:global(.el-dialog.recycle-file-dialog:not(.is-fullscreen)) {
+    width: 60vw !important;
+    min-width: 0;
+}
+</style>