style: Optimize container compose page style (#11076)

frontend/src/lang/modules/en.ts

@@ -1127,7 +1127,7 @@ const message = {
         targetHelper: 'Backup accounts are maintained in panel settings.',
         withImageHelper: 'Backup app store images, but this will increase the snapshot file size.',
         ignoreApp: 'Exclude apps',
-        withImage: 'Backup all app images',
+        withImage: 'Backup Application Image',
         retainCopies: 'Retain records',
         retryTimes: 'Retry Attempts',
         timeout: 'Timeout',

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

@@ -1130,7 +1130,7 @@ const message = {
         withImageHelper:
             'Respalda imágenes de la tienda de aplicaciones, pero esto aumentará el tamaño del archivo de la instantánea.',
         ignoreApp: 'Excluir aplicaciones',
-        withImage: 'Respaldar todas las imágenes de aplicaciones',
+        withImage: 'Copia de Seguridad de la Imagen de la Aplicación',
         retainCopies: 'Retener registros',
         retryTimes: 'Intentos de reintento',
         timeout: 'Tiempo de espera',

frontend/src/lang/modules/ja.ts

@@ -1098,7 +1098,7 @@ const message = {
         withImageHelper:
             'アプリストアのイメージをバックアップしますが、スナップショットファイルのサイズが大きくなります。',
         ignoreApp: 'アプリを除外',
-        withImage: 'すべてのアプリイメージをバックアップ',
+        withImage: 'アプリケーションイメージのバックアップ',
         retainCopies: '記録を保持します',
         retryTimes: 'リトライ回数',
         timeout: 'タイムアウト',

frontend/src/lang/modules/ko.ts

@@ -1084,7 +1084,7 @@ const message = {
         targetHelper: '백업 계정은 패널 설정에서 관리됩니다.',
         withImageHelper: '앱 스토어 이미지를 백업하지만 스냅샷 파일 크기가 증가합니다.',
         ignoreApp: '앱 제외',
-        withImage: '모든 앱 이미지 백업',
+        withImage: '애플리케이션 이미지 백업',
         retainCopies: '기록 보관',
         retryTimes: '재시도 횟수',
         timeout: '타임아웃',

frontend/src/lang/modules/ms.ts

@@ -1119,7 +1119,7 @@ const message = {
         targetHelper: 'Akaun sandaran diselenggara dalam tetapan panel.',
         withImageHelper: 'Sandarkan imej kedai aplikasi, tetapi ini akan meningkatkan saiz fail snapshot.',
         ignoreApp: 'Kecualikan aplikasi',
-        withImage: 'Sandarkan semua imej aplikasi',
+        withImage: 'Sandarkan Imej Aplikasi',
         retainCopies: 'Simpan salinan',
         retryTimes: 'Bilangan Cubaan Semula',
         timeout: 'Masa Tamat',

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

@@ -1118,7 +1118,7 @@ const message = {
         withImageHelper:
             'Fazer backup das imagens da loja de aplicativos, mas isso aumentará o tamanho do arquivo de snapshot.',
         ignoreApp: 'Excluir aplicativos',
-        withImage: 'Fazer backup de todas as imagens de aplicativos',
+        withImage: 'Backup da Imagem do Aplicativo',
         retainCopies: 'Manter cópias',
         retryTimes: 'Tentativas de Repetição',
         timeout: 'Tempo Limite',

frontend/src/lang/modules/ru.ts

@@ -1113,7 +1113,7 @@ const message = {
         targetHelper: 'Учетные записи резервного копирования управляются в настройках панели.',
         withImageHelper: 'Резервное копирование образов из магазина приложений увеличит размер файла снимка.',
         ignoreApp: 'Исключить приложения',
-        withImage: 'Резервное копирование всех образов приложений',
+        withImage: 'Резервная Копия Образа Приложения',
         retainCopies: 'Сохранять записи',
         retryTimes: 'Количество повторов',
         timeout: 'Таймаут',

frontend/src/lang/modules/tr.ts

@@ -1142,7 +1142,7 @@ const message = {
         targetHelper: 'Yedekleme hesapları panel ayarlarında sürdürülür.',
         withImageHelper: 'Uygulama mağazası imajlarını yedekle, ancak bu anlık görüntü dosya boyutunu artıracaktır.',
         ignoreApp: 'Uygulamaları hariç tut',
-        withImage: 'Tüm uygulama imajlarını yedekle',
+        withImage: 'Uygulama Görüntüsünü Yedekle',
         retainCopies: 'Kayıtları sakla',
         retryTimes: 'Yeniden Deneme Girişimleri',
         timeout: 'Zaman aşımı',

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

@@ -1064,7 +1064,7 @@ const message = {
         urlHelper: '請輸入正確的 URL 地址',
         targetHelper: '備份帳號可在面板設定中維護',
         ignoreApp: '排除應用',
-        withImage: '備份所有應用鏡像',
+        withImage: '備份應用映像',
         retainCopies: '保留份數',
         retryTimes: '失敗重試次數',
         timeout: '逾時時間',

frontend/src/lang/modules/zh.ts

@@ -1067,7 +1067,7 @@ const message = {
         targetHelper: '备份账号可在面板设置中维护',
         withImageHelper: '备份应用商店镜像，但是会增大快照文件体积。',
         ignoreApp: '排除应用',
-        withImage: '备份所有应用镜像',
+        withImage: '备份应用镜像',
         retainCopies: '保留份数',
         retryTimes: '失败重试次数',
         timeout: '超时时间',

frontend/src/views/container/compose/index.vue

@@ -14,6 +14,7 @@
                 </el-button>
             </template>
             <template #rightToolBar>
+                <TableSearch @search="search()" v-model:searchName="searchName" />
                 <TableRefresh @search="search()" />
                 <TableSetting title="container-refresh" @search="search()" />
             </template>
@@ -21,20 +22,12 @@
                 <el-row v-if="data.length > 0" :gutter="20" class="row-box">
                     <el-col :span="7">
                         <el-card>
-                            <el-input
+                            <el-table
-                                v-model="searchName"
+                                :max-height="loadTableHeight()"
-                                :placeholder="$t('commons.button.search')"
+                                :show-header="false"
-                                clearable
+                                @row-click="loadDetail"
-                                class="w-4/5"
+                                :data="data"
-                                @clear="search"
-                                @keyup.enter="search"
                             >
-                                <template #prefix>
-                                    <el-icon><Search /></el-icon>
-                                </template>
-                            </el-input>
-
-                            <el-table class="mt-2" :show-header="false" @row-click="loadDetail" :data="data">
                                 <el-table-column prop="name">
                                     <template #default="{ row }">
                                         <div class="cursor-pointer">
@@ -296,7 +289,6 @@ import { Container } from '@/api/interface/container';
 import { routerToFileWithPath } from '@/utils/router';
 import { MsgSuccess } from '@/utils/message';
 import { computeCPU, computeSize2, computeSizeForDocker } from '@/utils/util';
-import { Search } from '@element-plus/icons-vue';
 
 const data = ref<any[]>([]);
 const loading = ref(false);
@@ -351,6 +343,14 @@ const loadFrom = (row: any) => {
     }
 };
 
+const loadTableHeight = () => {
+    if (currentCompose.value.createdBy === '1Panel') {
+        return `calc(100vh - 120px)`;
+    } else {
+        return `calc(100vh - 240px)`;
+    }
+};
+
 const search = async (withRefreshDetail?: boolean) => {
     if (!isActive.value || !isExist.value) {
         return;