style: Optimize app store style and layout (#7858)

Refs #7846

frontend/src/lang/modules/ja.ts

@@ -55,7 +55,7 @@ const message = {
             refresh: 'リロード',
             get: '得る',
             upgrade: 'アップグレード',
-            ignore: 'アップグレードを無視します',
+            ignore: '更新を無視する',
             copy: 'コピー',
             random: 'ランダム',
             uninstall: 'アンインストール',
@@ -109,7 +109,7 @@ const message = {
             protocol: 'プロトコル',
             tableSetting: 'テーブル設定',
             refreshRate: 'リフレッシュレート',
-            refreshRateUnit: '更新なし|{n}秒/時間 |{n}秒/時間',
+            refreshRateUnit: '更新なし|{n}秒/時 |{n}秒/時',
             selectColumn: '列を選択します',
             serialNumber: 'シリアル番号',
         },
@@ -294,7 +294,7 @@ const message = {
         units: {
             second: '2番目|2番目|秒',
             minute: '分|分|分',
-            hour: '時間|時間|時間',
+            hour: '時|時|時',
             day: '日|日|日',
             week: '週|週|週',
             month: '月|月|数ヶ月',
@@ -1838,7 +1838,7 @@ const message = {
         noService: 'いいえ{0}',
         toInstall: 'インストールに移動します',
         param: 'パラメーター',
-        alreadyRun: '年',
+        alreadyRun: 'インストール済み',
         syncAppList: '同期',
         less1Minute: '1分未満',
         appOfficeWebsite: 'オフィスのウェブサイト',
@@ -1869,7 +1869,7 @@ const message = {
         upgradeHelper:
             'アップグレードする前に、異常なアプリケーションを通常のステータスに戻します。アップグレードが失敗した場合は、「ログ>システムログ」に移動して、障害の理由を確認します。',
         installWarn: `外部アクセスは有効になっていないため、アプリケーションが外部ネットワークを介してアクセスできるようになります。続けたいですか？`,
-        showIgnore: '無視されたアプリケーションを表示します',
+        showIgnore: '無視したアプリ一覧',
         cancelIgnore: 'キャンセルは無視します',
         ignoreList: '無視されたアプリケーション',
         appHelper:

frontend/src/lang/modules/ru.ts

@@ -43,7 +43,7 @@ const message = {
             collapse: 'Свернуть',
             log: 'Логи',
             back: 'Назад',
-            backup: 'Резервное копирование',
+            backup: 'Бэкап',
             recover: 'Восстановить',
             retry: 'Повторить',
             upload: 'Загрузить',

frontend/src/views/app-store/index.scss

@@ -7,11 +7,7 @@
     }
 
     .a-detail {
-        height: 100%;
-        width: 100%;
-
         .d-name {
-            height: 20%;
             .name {
                 white-space: nowrap;
                 overflow: hidden;
@@ -21,18 +17,8 @@
                 font-size: 18px;
                 color: var(--panel-text-color);
             }
-            .status {
-                margin-left: 5px;
-            }
             .h-button {
                 float: right;
-                margin-right: 5px;
-            }
-            .msg {
-                margin-left: 5px;
-            }
-            .el-button + .el-button {
-                margin-left: 6px;
             }
         }
 
@@ -50,7 +36,7 @@
         }
         .d-button {
             margin-top: 10px;
-            min-width: 440px;
+            min-width: 330px;
         }
     }
 

frontend/src/views/app-store/installed/index.vue

@@ -3,7 +3,7 @@
         <template #toolbar>
             <el-row :gutter="5">
                 <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                    <div>
+                    <div class="flex flex-wrap items-center justify-start gap-y-1">
                         <el-button
                             class="tag-button"
                             :class="activeTag === 'all' ? '' : 'no-active'"
@@ -86,16 +86,7 @@
                 </div>
             </div>
             <el-row :gutter="5">
-                <el-col
+                <el-col v-for="(installed, index) in data" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-                    v-for="(installed, index) in data"
-                    :key="index"
-                    :xs="24"
-                    :sm="24"
-                    :md="24"
-                    :lg="12"
-                    :xl="12"
-                    :class="mode === 'upgrade' ? 'upgrade-card-col-12' : 'install-card-col-12'"
-                >
                     <div class="install-card">
                         <el-card class="e-card">
                             <el-row :gutter="10">
@@ -111,17 +102,25 @@
                                 <el-col :xs="24" :sm="21" :md="21" :lg="20" :xl="20">
                                     <div class="a-detail">
                                         <div class="d-name">
+                                            <div class="flex items-center justify-between">
+                                                <div class="min-w-50 flex items-center justify-start gap-1">
                                                     <el-button link type="info">
-                                                <el-tooltip effect="dark" :content="installed.name" placement="top">
+                                                        <el-tooltip
+                                                            effect="dark"
+                                                            :content="installed.name"
+                                                            placement="top"
+                                                        >
                                                             <span class="name">{{ installed.name }}</span>
                                                         </el-tooltip>
                                                     </el-button>
                                                     <span class="status">
-                                                <Status :key="installed.status" :status="installed.status"></Status>
+                                                        <Status
+                                                            :key="installed.status"
+                                                            :status="installed.status"
+                                                        ></Status>
                                                     </span>
-                                            <span class="msg">
+                                                    <span class="msg" v-if="isAppErr(installed)">
                                                         <el-popover
-                                                    v-if="isAppErr(installed)"
                                                             placement="bottom"
                                                             :width="400"
                                                             trigger="hover"
@@ -138,16 +137,24 @@
                                                             </div>
                                                         </el-popover>
                                                     </span>
-                                            <span class="ml-1">
+                                                    <span>
-                                                <el-tooltip effect="dark" :content="$t('app.toFolder')" placement="top">
+                                                        <el-tooltip
-                                                    <el-button type="primary" link @click="toFolder(installed.path)">
+                                                            effect="dark"
+                                                            :content="$t('app.toFolder')"
+                                                            placement="top"
+                                                        >
+                                                            <el-button
+                                                                type="primary"
+                                                                link
+                                                                @click="toFolder(installed.path)"
+                                                            >
                                                                 <el-icon>
                                                                     <FolderOpened />
                                                                 </el-icon>
                                                             </el-button>
                                                         </el-tooltip>
                                                     </span>
-                                            <span class="ml-1">
+                                                    <span>
                                                         <el-tooltip
                                                             effect="dark"
                                                             :content="$t('commons.button.log')"
@@ -163,7 +170,8 @@
                                                             </el-button>
                                                         </el-tooltip>
                                                     </span>
-
+                                                </div>
+                                                <div class="flex flex-wrap items-center justify-end gap-1">
                                                     <el-button
                                                         class="h-button"
                                                         plain
@@ -179,7 +187,13 @@
                                                         plain
                                                         round
                                                         size="small"
-                                                @click="openBackups(installed.appKey, installed.name, installed.status)"
+                                                        @click="
+                                                            openBackups(
+                                                                installed.appKey,
+                                                                installed.name,
+                                                                installed.status,
+                                                            )
+                                                        "
                                                         v-if="mode === 'installed'"
                                                     >
                                                         {{ $t('commons.button.backup') }}
@@ -211,6 +225,8 @@
                                                         {{ $t('commons.button.upgrade') }}
                                                     </el-button>
                                                 </div>
+                                            </div>
+                                        </div>
                                         <div class="d-description flex flex-wrap items-center justify-start gap-1.5">
                                             <el-button class="tagMargin" plain size="small">
                                                 {{ $t('app.version') }}{{ $t('commons.colon') }}{{ installed.version }}
@@ -631,38 +647,16 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 @use '../index';
-@media only screen and (max-width: 1400px) {
-    .install-card-col-12 {
-        max-width: 100%;
-        flex: 0 0 100%;
-        .a-detail {
-            .d-name {
-                .name {
-                    max-width: 300px;
-                }
-            }
-        }
-    }
-}
-
-@media only screen and (max-width: 1499px) {
-    .upgrade-card-col-12 {
-        max-width: 100%;
-        flex: 0 0 100%;
-        .a-detail {
-            .d-name {
-                .name {
-                    max-width: 300px;
-                }
-            }
-        }
-    }
-}
 
 .app-error {
     max-height: 500px;
     overflow-y: auto;
 }
+.d-name {
+    .el-button + .el-button {
+        margin-left: 0;
+    }
+}
 .d-button {
     .el-button + .el-button {
         margin-left: 0;