From 3356bd882520e017656cb96c19ffc60ab6c02284 Mon Sep 17 00:00:00 2001
From: see-more <107225647+see-more@users.noreply.github.com>
Date: Thu, 5 Sep 2024 11:46:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=BD=91?=
 =?UTF-8?q?=E7=AB=99=E9=A1=B5=E9=9D=A2=E5=92=8C=E6=95=B0=E6=8D=AE=E5=BA=93?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=20(#6360)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix:移动端网站页面和数据库页面样式

* style:修改database页面样式

* style:修改databse页面手机端搜索框与按钮间距
---
 frontend/src/components/app-status/index.vue | 144 +++++++++----------
 frontend/src/views/database/mysql/index.vue  |  52 +++----
 2 files changed, 99 insertions(+), 97 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index c10455595..b702d97d1 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -2,75 +2,73 @@
     <div>
         <div class="app-status" v-if="data.isExist">
             <el-card>
-                <div class="flex items-center">
-                    <div>
-                        <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
+                <div class="flex items-center justify-between gap-2 sm:gap-10 sm:justify-start">
+                    <div class="flex items-center justify-center gap-2 sm:flex-row">
+                        <div>
+                            <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
+                        </div>
+                        <div>
+                            <Status :key="refresh" :status="data.status"></Status>
+                        </div>
+                        <div>
+                            <el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
+                        </div>
                     </div>
-                    <div>
-                        <Status class="status-content" :key="refresh" :status="data.status"></Status>
-                    </div>
-                    <div>
-                        <el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag>
-                    </div>
-                    <div>
-                        <span class="buttons">
-                            <el-button
-                                type="primary"
-                                v-if="data.status != 'Running'"
-                                link
-                                @click="onOperate('start')"
-                                :disabled="data.status === 'Installing'"
-                            >
-                                {{ $t('app.start') }}
-                            </el-button>
-                            <el-button type="primary" v-if="data.status === 'Running'" link @click="onOperate('stop')">
-                                {{ $t('app.stop') }}
-                            </el-button>
-                            <el-divider direction="vertical" />
-                            <el-button
-                                type="primary"
-                                link
-                                :disabled="data.status === 'Installing'"
-                                @click="onOperate('restart')"
-                            >
-                                {{ $t('app.restart') }}
-                            </el-button>
-                            <el-divider direction="vertical" />
-                            <el-button
-                                type="primary"
-                                link
-                                v-if="data.app === 'OpenResty'"
-                                @click="onOperate('reload')"
-                                :disabled="data.status !== 'Running'"
-                            >
-                                {{ $t('app.reload') }}
-                            </el-button>
-                            <el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
-                            <el-button
-                                type="primary"
-                                @click="setting"
-                                link
-                                :disabled="
-                                    data.status === 'Installing' ||
-                                    (data.status !== 'Running' && data.app === 'OpenResty')
-                                "
-                            >
-                                {{ $t('commons.button.set') }}
-                            </el-button>
-                            <el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
-                            <el-button
-                                v-if="data.app === 'OpenResty'"
-                                type="primary"
-                                @click="clear"
-                                link
-                                :disabled="
-                                    data.status === 'Installing' ||
-                                    (data.status !== 'Running' && data.app === 'OpenResty')
-                                "
-                            >
-                                {{ $t('nginx.clearProxyCache') }}
-                            </el-button>
-                        </span>
+                    <div class="grid grid-cols-4 sm:flex sm:flex-row">
+                        <el-button
+                            type="primary"
+                            v-if="data.status != 'Running'"
+                            link
+                            @click="onOperate('start')"
+                            :disabled="data.status === 'Installing'"
+                        >
+                            {{ $t('app.start') }}
+                        </el-button>
+                        <el-button type="primary" v-if="data.status === 'Running'" link @click="onOperate('stop')">
+                            {{ $t('app.stop') }}
+                        </el-button>
+                        <el-divider direction="vertical" />
+                        <el-button
+                            type="primary"
+                            link
+                            :disabled="data.status === 'Installing'"
+                            @click="onOperate('restart')"
+                        >
+                            {{ $t('app.restart') }}
+                        </el-button>
+                        <el-divider direction="vertical" />
+                        <el-button
+                            type="primary"
+                            link
+                            v-if="data.app === 'OpenResty'"
+                            @click="onOperate('reload')"
+                            :disabled="data.status !== 'Running'"
+                        >
+                            {{ $t('app.reload') }}
+                        </el-button>
+                        <el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
+                        <el-button
+                            type="primary"
+                            @click="setting"
+                            link
+                            :disabled="
+                                data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
+                            "
+                        >
+                            {{ $t('commons.button.set') }}
+                        </el-button>
+                        <el-divider v-if="data.app === 'OpenResty'" direction="vertical" />
+                        <el-button
+                            v-if="data.app === 'OpenResty'"
+                            type="primary"
+                            @click="clear"
+                            link
+                            :disabled="
+                                data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
+                            "
+                        >
+                            {{ $t('nginx.clearProxyCache') }}
+                        </el-button>
                     </div>
 
                     <div class="ml-5" v-if="key === 'openresty' && (httpPort != 80 || httpsPort != 443)">
@@ -95,12 +93,12 @@
             <LayoutContent :title="getTitle(key)" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div class="flx-center">
-                            <span>{{ $t('app.checkInstalledWarn', [data.app]) }}</span>
-                            <span @click="goRouter(key)" class="flx-align-center">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                        <div class="flex flex-col gap-4 items-cetner justify-center w-full sm:flex-row">
+                            <div>{{ $t('app.checkInstalledWarn', [data.app]) }}</div>
+                            <div @click="goRouter(key)" class="flex items-cetner justify-center text-[#74a4f3]">
+                                <el-icon class="flex items-center justify-center"><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
-                            </span>
+                            </div>
                         </div>
                         <div>
                             <img src="@/assets/images/no_app.svg" />
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index ab1ec8eee..e7b07d232 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -61,8 +61,8 @@
             </template>
 
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
+                <div class="flex flex-wrap gap-4 sm:justify-between">
+                    <div class="flex gap-2 flex-wrap items-center justify-start">
                         <el-button
                             v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
                             type="primary"
@@ -81,30 +81,34 @@
                         >
                             {{ $t('database.loadFromRemote') }}
                         </el-button>
-                        <el-button @click="goRemoteDB" type="primary" plain>
-                            {{ $t('database.remoteDB') }}
-                        </el-button>
-                        <el-dropdown class="ml-3">
-                            <el-button type="primary" plain>
-                                {{ $t('database.manage') }}
-                                <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                        <div>
+                            <el-button @click="goRemoteDB" type="primary" plain>
+                                {{ $t('database.remoteDB') }}
                             </el-button>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item icon="Position" @click="goDashboard('phpMyAdmin')">
-                                        phpMyAdmin
-                                    </el-dropdown-item>
-                                    <el-dropdown-item icon="Position" @click="goDashboard('Adminer')" divided>
-                                        Adminer
-                                    </el-dropdown-item>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
+                        </div>
+                        <div>
+                            <el-dropdown>
+                                <el-button type="primary" plain>
+                                    {{ $t('database.manage') }}
+                                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                                </el-button>
+                                <template #dropdown>
+                                    <el-dropdown-menu>
+                                        <el-dropdown-item icon="Position" @click="goDashboard('phpMyAdmin')">
+                                            phpMyAdmin
+                                        </el-dropdown-item>
+                                        <el-dropdown-item icon="Position" @click="goDashboard('Adminer')" divided>
+                                            Adminer
+                                        </el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </template>
+                            </el-dropdown>
+                        </div>
+                    </div>
+                    <div>
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main v-if="currentDB">
                 <ComplexTable