From a82a4ebfc59d698d7df858c55806580f0c532ba7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Wed, 8 Jan 2025 18:19:37 +0800
Subject: [PATCH] style: Optimize style and layout (#7671)

---
 frontend/src/components/app-status/index.vue  |  2 +-
 .../src/components/layout-content/index.vue   |  2 +-
 .../src/components/router-button/index.vue    |  6 ++--
 frontend/src/views/app-store/apps/index.vue   |  2 +-
 .../src/views/container/container/index.vue   |  2 +-
 frontend/src/views/home/app/index.vue         | 34 ++++++++-----------
 frontend/src/views/toolbox/index.vue          |  2 +-
 7 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 32fa74cdf..15b07c091 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -243,6 +243,6 @@ defineExpose({
     border: 1px solid var(--el-color-warning);
     background-color: transparent;
     padding: 8px 8px;
-    width: 78px;
+    max-width: 100px;
 }
 </style>
diff --git a/frontend/src/components/layout-content/index.vue b/frontend/src/components/layout-content/index.vue
index 6874aa250..56b4ea84c 100644
--- a/frontend/src/components/layout-content/index.vue
+++ b/frontend/src/components/layout-content/index.vue
@@ -36,7 +36,7 @@
                             </template>
                         </back-button>
 
-                        <span v-else>
+                        <span v-else class="flex justify-between items-start sm:items-center flex-col sm:flex-row">
                             {{ title }}
                             <span v-if="slots.buttons">
                                 <el-divider direction="vertical" />
diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
index 5c2adfb83..0eda101a5 100644
--- a/frontend/src/components/router-button/index.vue
+++ b/frontend/src/components/router-button/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <el-card class="router_card">
-        <div class="flex w-full flex-col items-center md:justify-between md:flex-row">
+    <el-card class="router_card p-1 sm:p-0">
+        <div class="flex w-full flex-col justify-start sm:items-center items-start sm:justify-between sm:flex-row">
             <el-radio-group v-model="activeName" @change="handleChange">
                 <el-radio-button
                     class="router_card_button"
@@ -15,7 +15,7 @@
                     </el-badge>
                 </el-radio-button>
             </el-radio-group>
-            <div class="flex flex-row gap-2 md:flex-col lg:flex-row">
+            <div class="flex flex-col gap-2 sm:flex-row">
                 <slot name="route-button"></slot>
             </div>
         </div>
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 8e06d10f1..d12e7cae0 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -55,7 +55,7 @@
             </el-row>
         </template>
         <template #rightButton>
-            <div class="flex justify-end">
+            <div class="flex justify-end flex-col sm:flex-row">
                 <fu-table-pagination
                     v-model:current-page="paginationConfig.currentPage"
                     v-model:page-size="paginationConfig.pageSize"
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index ae3220846..0abfb4431 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -7,7 +7,7 @@
         </el-card>
         <LayoutContent :title="$t('container.container', 2)" :class="{ mask: dockerStatus != 'Running' }">
             <template #rightButton>
-                <div class="flex justify-end">
+                <div class="flex justify-end flex-col sm:flex-row">
                     <div class="mr-10">
                         <el-checkbox v-model="includeAppStore" @change="search()">
                             {{ $t('container.includeAppstore') }}
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index f1e880b47..65c47cd32 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -2,25 +2,19 @@
     <div>
         <el-scrollbar height="525px" class="moz-height">
             <div class="h-app-card" v-for="(app, index) in apps" :key="index">
-                <el-row :gutter="10">
-                    <el-col :span="5">
-                        <div>
-                            <el-avatar shape="square" :size="55" :src="'data:image/png;base64,' + app.icon" />
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-14">
+                        <el-avatar shape="square" :size="55" :src="'data:image/png;base64,' + app.icon" />
+                    </div>
+                    <div class="flex-1 flex flex-col h-app-content">
+                        <span class="h-app-title">{{ app.name }}</span>
+                        <div class="h-app-desc">
+                            <span>
+                                {{ language == 'zh' || language == 'tw' ? app.shortDescZh : app.shortDescEn }}123123
+                            </span>
                         </div>
-                    </el-col>
-                    <el-col :span="15">
-                        <div class="h-app-content">
-                            <div>
-                                <span class="h-app-title">{{ app.name }}</span>
-                            </div>
-                            <div class="h-app-desc">
-                                <span>
-                                    {{ language == 'zh' || language == 'tw' ? app.shortDescZh : app.shortDescEn }}
-                                </span>
-                            </div>
-                        </div>
-                    </el-col>
-                    <el-col :span="2">
+                    </div>
+                    <div>
                         <el-button
                             class="h-app-button"
                             type="primary"
@@ -32,8 +26,8 @@
                         >
                             {{ $t('app.install') }}
                         </el-button>
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
                 <div class="h-app-divider" />
             </div>
         </el-scrollbar>
diff --git a/frontend/src/views/toolbox/index.vue b/frontend/src/views/toolbox/index.vue
index dc6352212..ee9cf1a2c 100644
--- a/frontend/src/views/toolbox/index.vue
+++ b/frontend/src/views/toolbox/index.vue
@@ -2,7 +2,7 @@
     <div>
         <RouterButton :buttons="buttons">
             <template #route-button>
-                <div class="router-button">
+                <div class="router-button mr-0 sm:mr-7">
                     <el-button link type="primary" @click="onRestart('1panel')">
                         {{ $t('home.restart_1panel') }}
                     </el-button>