From f2d3acb650f92ef237cb9744fd6ae1a8d3896fda Mon Sep 17 00:00:00 2001
From: see-more <107225647+see-more@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:00:53 +0800
Subject: [PATCH] =?UTF-8?q?style:=E6=9B=B4=E6=96=B0=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AFcontainer=E8=B7=AF=E5=BE=84=E4=B8=8B?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#6387)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style:更新所有移动端container路径下样式

* style:修复el-button的默认margin
---
 .../src/views/container/compose/index.vue     | 23 +++++--
 frontend/src/views/container/image/index.vue  | 12 ++--
 frontend/src/views/container/index.vue        |  6 ++
 .../src/views/container/network/index.vue     | 12 ++--
 frontend/src/views/container/repo/index.vue   | 23 +++++--
 .../src/views/container/setting/index.vue     | 61 ++++++++++---------
 .../src/views/container/template/index.vue    | 12 ++--
 frontend/src/views/container/volume/index.vue | 12 ++--
 8 files changed, 97 insertions(+), 64 deletions(-)

diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 6d7d9eb42..1ff40d1f9 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -25,17 +25,28 @@
                 </el-alert>
             </template>
             <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
+                <div class="hidden sm:block sm:flex sm:flex-row sm:w-full sm:justify-between">
+                    <div>
                         <el-button type="primary" @click="onOpenDialog()">
                             {{ $t('container.createCompose') }}
                         </el-button>
-                    </el-col>
-                    <el-col :span="8">
+                    </div>
+                    <div class="flex flex-row gap-2">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
+                <div class="block flex flex-col gap-2 sm:hidden">
+                    <div class="flex justify-between">
+                        <el-button type="primary" @click="onOpenDialog()">
+                            {{ $t('container.createCompose') }}
+                        </el-button>
+                        <TableSetting @search="search()" />
+                    </div>
+                    <div class="flex justify-end">
+                        <TableSearch @search="search()" v-model:searchName="searchName" />
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index 9d6b86914..b758e3888 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -8,8 +8,8 @@
 
         <LayoutContent :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
+                <div class="flex flex-col gap-4 justify-between items-center flex-wrap sm:flex-row">
+                    <div class="flex gap-4 flex-wrap">
                         <el-button type="primary" plain @click="onOpenPull">
                             {{ $t('container.imagePull') }}
                         </el-button>
@@ -25,12 +25,12 @@
                         <el-button type="primary" plain @click="onOpenPrune()">
                             {{ $t('container.imagePrune') }}
                         </el-button>
-                    </el-col>
-                    <el-col :span="8">
+                    </div>
+                    <div class="flex ml-2 gap-2">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
diff --git a/frontend/src/views/container/index.vue b/frontend/src/views/container/index.vue
index fae10c860..91c03e0cc 100644
--- a/frontend/src/views/container/index.vue
+++ b/frontend/src/views/container/index.vue
@@ -45,3 +45,9 @@ const buttons = [
     },
 ];
 </script>
+
+<style>
+.el-button + .el-button {
+    margin: 0;
+}
+</style>
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index 7ae69c5b4..fe68bea36 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -8,8 +8,8 @@
 
         <LayoutContent :title="$t('container.network')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
+                <div class="flex flex-col gap-4 justify-between sm:flex-row">
+                    <div class="flex gap-4">
                         <el-button type="primary" @click="onCreate()">
                             {{ $t('container.createNetwork') }}
                         </el-button>
@@ -19,12 +19,12 @@
                         <el-button :disabled="selects.length === 0" @click="batchDelete(null)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
-                    </el-col>
-                    <el-col :span="8">
+                    </div>
+                    <div class="flex flex-row gap-2">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/repo/index.vue b/frontend/src/views/container/repo/index.vue
index 744012497..822750f44 100644
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@@ -8,17 +8,28 @@
 
         <LayoutContent :title="$t('container.repo')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
+                <div class="block flex flex-col gap-2 sm:hidden">
+                    <div class="flex flex-row justify-between">
                         <el-button type="primary" @click="onOpenDialog('add')">
                             {{ $t('container.createRepo') }}
                         </el-button>
-                    </el-col>
-                    <el-col :span="8">
+                        <TableSetting @search="search()" />
+                    </div>
+                    <div class="flex flex-row justify-end">
+                        <TableSearch @search="search()" v-model:searchName="searchName" />
+                    </div>
+                </div>
+                <div class="hidden sm:block sm:flex sm:justify-between">
+                    <div>
+                        <el-button type="primary" @click="onOpenDialog('add')">
+                            {{ $t('container.createRepo') }}
+                        </el-button>
+                    </div>
+                    <div class="flex flex-row gap-2">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index d6db97e02..31786ce72 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -2,17 +2,18 @@
     <div v-loading="loading">
         <div class="app-status" style="margin-top: 20px">
             <el-card>
-                <div>
-                    <el-tag style="float: left" effect="dark" type="success">Docker</el-tag>
-                    <el-tag round class="status-content" v-if="form.status === 'Running'" type="success">
-                        {{ $t('commons.status.running') }}
-                    </el-tag>
-                    <el-tag round class="status-content" v-if="form.status === 'Stopped'" type="info">
-                        {{ $t('commons.status.stopped') }}
-                    </el-tag>
-                    <el-tag class="status-content">{{ $t('app.version') }}: {{ form.version }}</el-tag>
-
-                    <span v-if="form.status === 'Running'" class="buttons">
+                <div class="flex flex-col gap-2 sm:flex-row sm:justify-between">
+                    <div class="flex">
+                        <el-tag style="float: left" effect="dark" type="success">Docker</el-tag>
+                        <el-tag round class="status-content" v-if="form.status === 'Running'" type="success">
+                            {{ $t('commons.status.running') }}
+                        </el-tag>
+                        <el-tag round class="status-content" v-if="form.status === 'Stopped'" type="info">
+                            {{ $t('commons.status.stopped') }}
+                        </el-tag>
+                        <el-tag class="status-content">{{ $t('app.version') }}: {{ form.version }}</el-tag>
+                    </div>
+                    <div class="flex justify-start" v-if="form.status === 'Running'">
                         <el-button type="primary" @click="onOperator('stop')" link>
                             {{ $t('container.stop') }}
                         </el-button>
@@ -20,9 +21,9 @@
                         <el-button type="primary" @click="onOperator('restart')" link>
                             {{ $t('container.restart') }}
                         </el-button>
-                    </span>
+                    </div>
 
-                    <span v-if="form.status === 'Stopped'" class="buttons">
+                    <div clsas="flex justify-start" v-if="form.status === 'Stopped'" class="buttons">
                         <el-button type="primary" @click="onOperator('start')" link>
                             {{ $t('container.start') }}
                         </el-button>
@@ -30,7 +31,7 @@
                         <el-button type="primary" @click="onOperator('restart')" link>
                             {{ $t('container.restart') }}
                         </el-button>
-                    </span>
+                    </div>
                 </div>
             </el-card>
         </div>
@@ -46,13 +47,16 @@
                     <el-col :xs="24" :sm="24" :md="15" :lg="12" :xl="10">
                         <el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="120px">
                             <el-form-item :label="$t('container.mirrors')" prop="mirrors">
-                                <div style="width: 100%" v-if="form.mirrors">
+                                <div
+                                    class="flex w-full justify-start flex-col sm:flex-row sm:items-end"
+                                    v-if="form.mirrors"
+                                >
                                     <el-input
                                         type="textarea"
                                         :rows="5"
                                         disabled
                                         v-model="form.mirrors"
-                                        style="width: calc(100% - 80px)"
+                                        class="sm:calc(100% - 80px)"
                                     />
                                     <el-button @click="onChangeMirrors" icon="Setting">
                                         {{ $t('commons.button.set') }}
@@ -65,18 +69,19 @@
                                         </el-button>
                                     </template>
                                 </el-input>
-                                <span class="input-help">{{ $t('container.mirrorsHelper') }}</span>
-                                <span class="input-help flx-align-center" style="display: flex">
-                                    {{ $t('container.mirrorsHelper2') }}
-                                    <el-link
-                                        style="font-size: 12px; margin-left: 5px"
-                                        icon="Position"
-                                        @click="toDoc()"
-                                        type="primary"
-                                    >
-                                        {{ $t('firewall.quickJump') }}
-                                    </el-link>
-                                </span>
+                                <div class="flex">
+                                    <span>
+                                        {{ $t('container.mirrorsHelper') }} {{ $t('container.mirrorsHelper2') }}
+                                        <el-link
+                                            style="font-size: 12px; margin-left: 5px"
+                                            icon="Position"
+                                            @click="toDoc()"
+                                            type="primary"
+                                        >
+                                            {{ $t('firewall.quickJump') }}
+                                        </el-link>
+                                    </span>
+                                </div>
                             </el-form-item>
                             <el-form-item :label="$t('container.registries')" prop="registries">
                                 <div style="width: 100%" v-if="form.registries">
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index 9e98aae05..ad1314acb 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -8,20 +8,20 @@
 
         <LayoutContent :title="$t('container.composeTemplate')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
+                <div class="flex flex-col gap-2 sm:flex-row sm:justify-between">
+                    <div class="flex gap-4">
                         <el-button type="primary" @click="onOpenDialog('create')">
                             {{ $t('container.createComposeTemplate') }}
                         </el-button>
                         <el-button type="primary" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
-                    </el-col>
-                    <el-col :span="8">
+                    </div>
+                    <div class="flex gap-4 sm:gap-2">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index b260d7b44..267267455 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -8,8 +8,8 @@
 
         <LayoutContent :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
+                <div class="flex flex-col gap-4 sm:flex-row justify-between">
+                    <div class="flex flex-wrap gap-4">
                         <el-button type="primary" @click="onCreate()">
                             {{ $t('container.createVolume') }}
                         </el-button>
@@ -19,12 +19,12 @@
                         <el-button :disabled="selects.length === 0" @click="batchDelete(null)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
-                    </el-col>
-                    <el-col :span="8">
+                    </div>
+                    <div class="flex flex-row flex-wrap gap-2">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable