refactor(frontend): unify dialogs and improve deletion flows

frontend/src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4776196 */
-  src: url('iconfont.woff2?t=1786526991803') format('woff2'),
-       url('iconfont.woff?t=1786526991803') format('woff'),
-       url('iconfont.ttf?t=1786526991803') format('truetype'),
-       url('iconfont.svg?t=1786526991803#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1793239167475') format('woff2'),
+       url('iconfont.woff?t=1793239167475') format('woff'),
+       url('iconfont.ttf?t=1793239167475') format('truetype'),
+       url('iconfont.svg?t=1793239167475#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.p-huggingface1:before {
+  content: "\e656";
+}
+
+.p-modelscope:before {
+  content: "\e6be";
+}
+
 .p-shuju:before {
   content: "\e634";
 }

frontend/src/assets/iconfont/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "p-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "38704691",
+      "name": "huggingface",
+      "font_class": "huggingface1",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "45461892",
+      "name": "modelscope",
+      "font_class": "modelscope",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },
     {
       "icon_id": "12903469",
       "name": "本地数据",

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/lang/modules/en.ts

@@ -1086,7 +1086,7 @@ const message = {
                 'Container address is for agent containers; 127.0.0.1, system IP, or custom address is for AI Gateway or external services.',
             containerAddress: 'Container address',
             customAddress: 'Custom address',
-            downloader: 'Downloader',
+            downloader: 'Downloads',
             modelDir: 'Model directory',
             modelSource: 'Model source',
             repoID: 'Repository ID',
@@ -6992,7 +6992,7 @@ const message = {
                 'Search HuggingFace model repositories directly and view downloads, likes, model details, and file lists.',
             modelDownloaderTitle2: 'Accelerated Downloads',
             modelDownloaderContent2:
-                'Configure a HuggingFace acceleration endpoint and HF Token for the official site, mirrors, and private models.',
+                'Configure a HuggingFace acceleration endpoint and HuggingFace Token for the official site, mirrors, and private models.',
             modelDownloaderTitle3: 'Task Tracking',
             modelDownloaderContent3:
                 'Review download queues, task status, progress, and errors, with support for canceling, retrying, and clearing records.',

frontend/src/lang/modules/es-es.ts

@@ -1088,7 +1088,7 @@ const message = {
                 'La dirección del contenedor es para contenedores de agentes; 127.0.0.1, IP del sistema o dirección personalizada es para AI Gateway o servicios externos.',
             containerAddress: 'Dirección del contenedor',
             customAddress: 'Dirección personalizada',
-            downloader: 'Descargador',
+            downloader: 'Gestión de descargas',
             modelDir: 'Directorio del modelo',
             modelSource: 'Fuente del modelo',
             repoID: 'ID del repositorio',
@@ -7093,7 +7093,7 @@ const message = {
                 'Busca repositorios de modelos de HuggingFace directamente y consulta descargas, me gusta, detalles y archivos.',
             modelDownloaderTitle2: 'Descargas aceleradas',
             modelDownloaderContent2:
-                'Configura un endpoint de aceleración de HuggingFace y HF Token para el sitio oficial, espejos y modelos privados.',
+                'Configura un endpoint de aceleración de HuggingFace y HuggingFace Token para el sitio oficial, espejos y modelos privados.',
             modelDownloaderTitle3: 'Seguimiento de tareas',
             modelDownloaderContent3:
                 'Consulta la cola, el estado, el progreso y los errores de descarga, con soporte para cancelar, reintentar y limpiar registros.',

frontend/src/lang/modules/fa.ts

@@ -1071,7 +1071,7 @@ const message = {
                 'آدرس کانتینر برای کانتینرهای عامل است؛ 127.0.0.1، IP سیستم یا آدرس سفارشی برای دروازه AI یا خدمات خارجی است.',
             containerAddress: 'آدرس کانتینر',
             customAddress: 'آدرس سفارشی',
-            downloader: 'دانلودکننده',
+            downloader: 'مدیریت دانلودها',
             modelDir: 'دایرکتوری مدل',
             modelSource: 'منبع مدل',
             repoID: 'شناسه مخزن',
@@ -6945,7 +6945,7 @@ const message = {
                 'مستقیماً مخازن مدل HuggingFace را جستجو کنید و دانلودها، لایک‌ها، جزئیات مدل و لیست فایل‌ها را مشاهده کنید.',
             modelDownloaderTitle2: 'دانلود شتاب‌دهنده',
             modelDownloaderContent2:
-                'یک نقطه پایانی شتاب HuggingFace و توکن HF را برای سایت رسمی، آینه‌ها و مدل‌های خصوصی پیکربندی کنید.',
+                'یک نقطه پایانی شتاب HuggingFace و توکن HuggingFace را برای سایت رسمی، آینه‌ها و مدل‌های خصوصی پیکربندی کنید.',
             modelDownloaderTitle3: 'ردیابی وظایف',
             modelDownloaderContent3:
                 'صف‌های دانلود، وضعیت وظایف، پیشرفت و خطاها را مرور کنید و از لغو، تلاش مجدد و پاک‌سازی رکوردها پشتیبانی کنید.',

frontend/src/lang/modules/ja.ts

@@ -1075,7 +1075,7 @@ const message = {
                 'コンテナアドレスはエージェントコンテナ向けです。127.0.0.1、システム IP、カスタムアドレスは AI Gateway または外部サービス向けです。',
             containerAddress: 'コンテナアドレス',
             customAddress: 'カスタムアドレス',
-            downloader: 'ダウンローダー',
+            downloader: 'ダウンロード管理',
             modelDir: 'モデルディレクトリ',
             modelSource: 'モデルソース',
             repoID: 'リポジトリ ID',
@@ -6967,7 +6967,7 @@ const message = {
                 'HuggingFace のモデルリポジトリを直接検索し、ダウンロード数、いいね、モデル詳細、ファイル一覧を確認できます。',
             modelDownloaderTitle2: '高速ダウンロード',
             modelDownloaderContent2:
-                'HuggingFace アクセラレーションエンドポイントと HF Token を設定し、公式サイト、ミラー、プライベートモデルに対応します。',
+                'HuggingFace アクセラレーションエンドポイントと HuggingFace Token を設定し、公式サイト、ミラー、プライベートモデルに対応します。',
             modelDownloaderTitle3: 'タスク追跡',
             modelDownloaderContent3:
                 'ダウンロードキュー、タスク状態、進捗、エラーを一元確認し、キャンセル、再試行、記録の削除を行えます。',

frontend/src/lang/modules/ko.ts

@@ -1064,7 +1064,7 @@ const message = {
                 '컨테이너 주소는 에이전트 컨테이너 호출에 적합합니다. 127.0.0.1, 시스템 IP 또는 사용자 지정 주소는 AI Gateway 또는 외부 서비스 호출에 적합합니다.',
             containerAddress: '컨테이너 주소',
             customAddress: '사용자 지정 주소',
-            downloader: '다운로더',
+            downloader: '다운로드 관리',
             modelDir: '모델 디렉토리',
             modelSource: '모델 소스',
             repoID: '저장소 ID',
@@ -6824,7 +6824,7 @@ const message = {
                 'HuggingFace 모델 저장소를 직접 검색하고 다운로드 수, 좋아요, 모델 상세 정보, 파일 목록을 확인합니다.',
             modelDownloaderTitle2: '가속 다운로드',
             modelDownloaderContent2:
-                'HuggingFace 가속 엔드포인트와 HF Token을 설정하여 공식 사이트, 미러, 비공개 모델에 대응합니다.',
+                'HuggingFace 가속 엔드포인트와 HuggingFace Token을 설정하여 공식 사이트, 미러, 비공개 모델에 대응합니다.',
             modelDownloaderTitle3: '작업 추적',
             modelDownloaderContent3:
                 '다운로드 대기열, 작업 상태, 진행률, 오류를 한곳에서 확인하고 취소, 재시도, 기록 정리를 지원합니다.',

frontend/src/lang/modules/lo.ts

@@ -1060,7 +1060,7 @@ const message = {
                 'ທີ່ຢູ່ຄອນເທນເນີແມ່ນສຳລັບຄອນເທນເນີຕົວແທນ; 127.0.0.1, IP ລະບົບ, ຫຼື ທີ່ຢູ່ກຳນົດເອງແມ່ນສຳລັບ AI Gateway ຫຼື ບໍລິການພາຍນອກ.',
             containerAddress: 'ທີ່ຢູ່ຄອນເທນເນີ',
             customAddress: 'ທີ່ຢູ່ກຳນົດເອງ',
-            downloader: 'ຕົວດາວໂຫຼດ',
+            downloader: 'ຈັດການການດາວໂຫຼດ',
             modelDir: 'ໄດເຣັກທໍຣີໂມເດວ',
             modelSource: 'ແຫຼ່ງທີ່ມາໂມເດວ',
             repoID: 'ID ຄັງເກັບ',
@@ -6767,7 +6767,8 @@ const message = {
             modelDownloaderTitle1: 'ຄົ້ນຫາມໍເດລ',
             modelDownloaderContent1: 'ຄົ້ນຫາຄັງມໍເດລ HuggingFace ໂດຍກົງ ແລະ ເບິ່ງຍອດດາວໂຫຼດ, ໄລ້ ແລະ ລາຍລະອຽດໄຟລ໌.',
             modelDownloaderTitle2: 'ດາວໂຫຼດເລັ່ງດ່ວນ',
-            modelDownloaderContent2: 'ຕັ້ງຄ່າ HuggingFace acceleration endpoint ແລະ Token ສຳລັບມໍເດລສ່ວນຕົວ.',
+            modelDownloaderContent2:
+                'ຕັ້ງຄ່າ ຈຸດເຊື່ອມຕໍ່ເລັ່ງຄວາມໄວ HuggingFace ແລະ HuggingFace Token ສຳລັບມໍເດລສ່ວນຕົວ.',
             modelDownloaderTitle3: 'ຕິດຕາມງານ',
             modelDownloaderContent3: 'ກວດສອບຄິວດາວໂຫຼດ, ສະຖານະ, ຄວາມຄືບໜ້າ ແລະ ຂໍ້ຜິດພາດ.',
             modelDownloaderTitle4: 'ຈັດການໃນເຄື່ອງ',

frontend/src/lang/modules/ms.ts

@@ -1097,7 +1097,7 @@ const message = {
                 'Alamat kontena sesuai untuk kontena agen; 127.0.0.1, IP sistem, atau alamat tersuai sesuai untuk AI Gateway atau perkhidmatan luaran.',
             containerAddress: 'Alamat kontena',
             customAddress: 'Alamat tersuai',
-            downloader: 'Pemuat Turun',
+            downloader: 'Pengurusan muat turun',
             modelDir: 'Direktori Model',
             modelSource: 'Sumber model',
             repoID: 'ID Repositori',
@@ -7074,7 +7074,7 @@ const message = {
                 'Cari repositori model HuggingFace secara langsung dan lihat muat turun, suka, butiran model dan senarai fail.',
             modelDownloaderTitle2: 'Muat Turun Dipercepat',
             modelDownloaderContent2:
-                'Konfigurasikan titik akhir pecutan HuggingFace dan HF Token untuk laman rasmi, cermin dan model persendirian.',
+                'Konfigurasikan titik akhir pecutan HuggingFace dan HuggingFace Token untuk laman rasmi, cermin dan model persendirian.',
             modelDownloaderTitle3: 'Penjejakan Tugas',
             modelDownloaderContent3:
                 'Semak baris gilir muat turun, status tugas, kemajuan dan ralat, dengan sokongan batal, cuba semula dan bersihkan rekod.',

frontend/src/lang/modules/pt-br.ts

@@ -1092,7 +1092,7 @@ const message = {
                 'Use o endereço do contêiner para agentes; 127.0.0.1, IP do sistema ou endereço personalizado para AI Gateway ou serviços externos.',
             containerAddress: 'Endereço do contêiner',
             customAddress: 'Endereço personalizado',
-            downloader: 'Baixador',
+            downloader: 'Gerenciamento de downloads',
             modelDir: 'Diretório do modelo',
             modelSource: 'Fonte do modelo',
             repoID: 'ID do repositório',
@@ -7117,7 +7117,7 @@ const message = {
                 'Pesquise repositórios de modelos do HuggingFace diretamente e veja downloads, curtidas, detalhes do modelo e lista de arquivos.',
             modelDownloaderTitle2: 'Downloads acelerados',
             modelDownloaderContent2:
-                'Configure um endpoint de aceleração do HuggingFace e HF Token para o site oficial, espelhos e modelos privados.',
+                'Configure um endpoint de aceleração do HuggingFace e HuggingFace Token para o site oficial, espelhos e modelos privados.',
             modelDownloaderTitle3: 'Acompanhamento de tarefas',
             modelDownloaderContent3:
                 'Veja filas de download, status, progresso e erros, com suporte para cancelar, tentar novamente e limpar registros.',

frontend/src/lang/modules/ru.ts

@@ -1085,7 +1085,7 @@ const message = {
                 'Адрес контейнера подходит для контейнеров агентов; 127.0.0.1, системный IP или пользовательский адрес подходит для AI Gateway или внешних сервисов.',
             containerAddress: 'Адрес контейнера',
             customAddress: 'Пользовательский адрес',
-            downloader: 'Загрузчик',
+            downloader: 'Управление загрузками',
             modelDir: 'Каталог модели',
             modelSource: 'Источник модели',
             repoID: 'ID репозитория',
@@ -7086,7 +7086,7 @@ const message = {
                 'Ищите репозитории моделей HuggingFace напрямую и просматривайте загрузки, лайки, сведения о модели и список файлов.',
             modelDownloaderTitle2: 'Ускоренные загрузки',
             modelDownloaderContent2:
-                'Настройте endpoint ускорения HuggingFace и HF Token для официального сайта, зеркал и приватных моделей.',
+                'Настройте endpoint ускорения HuggingFace и HuggingFace Token для официального сайта, зеркал и приватных моделей.',
             modelDownloaderTitle3: 'Отслеживание задач',
             modelDownloaderContent3:
                 'Просматривайте очередь загрузок, статус, прогресс и ошибки, отменяйте, повторяйте и очищайте записи.',

frontend/src/lang/modules/tr.ts

@@ -1096,7 +1096,7 @@ const message = {
                 'Konteyner adresi ajan konteynerleri içindir; 127.0.0.1, sistem IP veya özel adres AI Gateway ya da harici servisler içindir.',
             containerAddress: 'Konteyner adresi',
             customAddress: 'Özel adres',
-            downloader: 'İndirici',
+            downloader: 'İndirme yönetimi',
             modelDir: 'Model dizini',
             modelSource: 'Model kaynağı',
             repoID: 'Depo ID',
@@ -7094,7 +7094,7 @@ const message = {
                 'HuggingFace model depolarını doğrudan arayın; indirme sayısı, beğeni, model ayrıntıları ve dosya listesini görüntüleyin.',
             modelDownloaderTitle2: 'Hızlandırılmış İndirme',
             modelDownloaderContent2:
-                'Resmi site, aynalar ve özel modeller için HuggingFace hızlandırma endpointi ve HF Token yapılandırın.',
+                'Resmi site, aynalar ve özel modeller için HuggingFace hızlandırma endpointi ve HuggingFace Token yapılandırın.',
             modelDownloaderTitle3: 'Görev Takibi',
             modelDownloaderContent3:
                 'İndirme kuyruğunu, görev durumunu, ilerlemeyi ve hataları görüntüleyin; iptal, yeniden deneme ve kayıt temizlemeyi destekler.',

frontend/src/lang/modules/zh-Hant.ts

@@ -1025,7 +1025,7 @@ const message = {
                 '容器地址適合智能體容器呼叫；127.0.0.1、本機 IP 或自訂地址適合 AI 閘道或外部服務呼叫。',
             containerAddress: '容器地址',
             customAddress: '自訂地址',
-            downloader: '下載器',
+            downloader: '下載管理',
             modelDir: '模型目錄',
             modelSource: '模型來源',
             repoID: '倉庫 ID',
@@ -6484,7 +6484,8 @@ const message = {
             modelDownloaderTitle1: '模型發現',
             modelDownloaderContent1: '直接搜尋 HuggingFace 模型倉庫，檢視下載量、點讚數、模型詳情與檔案列表。',
             modelDownloaderTitle2: '加速下載',
-            modelDownloaderContent2: '支援設定 HuggingFace 加速地址與 HF Token，適配官方站、鏡像站和私有模型存取。',
+            modelDownloaderContent2:
+                '支援設定 HuggingFace 加速地址與 HuggingFace Token，適配官方站、鏡像站和私有模型存取。',
             modelDownloaderTitle3: '任務追蹤',
             modelDownloaderContent3: '統一檢視下載佇列、任務狀態、進度、錯誤資訊，並支援取消、重試和記錄清理。',
             modelDownloaderTitle4: '本地管理',

frontend/src/lang/modules/zh.ts

@@ -1038,7 +1038,7 @@ const message = {
                 '容器地址适合智能体容器调用；127.0.0.1、本机 IP 或自定义地址适合 AI 网关或外部服务调用。',
             containerAddress: '容器地址',
             customAddress: '自定义地址',
-            downloader: '下载器',
+            downloader: '下载管理',
             modelDir: '模型目录',
             modelSource: '模型来源',
             repoID: '仓库 ID',
@@ -5442,7 +5442,8 @@ const message = {
             modelDownloaderTitle1: '模型发现',
             modelDownloaderContent1: '直接搜索 HuggingFace 模型仓库，查看下载量、点赞数、模型详情与文件列表。',
             modelDownloaderTitle2: '加速下载',
-            modelDownloaderContent2: '支持配置 HuggingFace 加速地址与 HF Token，适配官方站、镜像站和私有模型访问。',
+            modelDownloaderContent2:
+                '支持配置 HuggingFace 加速地址与 HuggingFace Token，适配官方站、镜像站和私有模型访问。',
             modelDownloaderTitle3: '任务追踪',
             modelDownloaderContent3: '统一查看下载队列、任务状态、进度、错误信息，并支持取消、重试和记录清理。',
             modelDownloaderTitle4: '本地管理',

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>