From 1c0d0d46a76decd304d2817ebbd4dbb3d50bed70 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Wed, 9 Aug 2023 16:32:12 +0800
Subject: [PATCH] Pr@dev@dan (#1891)

#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.
---
 .../src/components/container-log/index.vue    |  13 +-
 frontend/src/styles/moblie.scss               |   5 +-
 frontend/src/views/app-store/apps/index.vue   |  11 +-
 .../src/views/container/compose/index.vue     |   2 +-
 .../src/views/container/container/index.vue   |  31 +-
 frontend/src/views/container/image/index.vue  |  25 +-
 .../src/views/container/network/index.vue     |   6 +-
 frontend/src/views/container/volume/index.vue |  18 +-
 .../database/mysql/setting/status/index.vue   | 297 ++++++++++--------
 .../src/views/host/monitor/monitor/index.vue  |   1 +
 frontend/src/views/website/website/index.vue  |  14 +-
 .../website/nginx/performance/index.vue       |  18 +-
 12 files changed, 270 insertions(+), 171 deletions(-)

diff --git a/frontend/src/components/container-log/index.vue b/frontend/src/components/container-log/index.vue
index 6538811d6..1f5bbf6b8 100644
--- a/frontend/src/components/container-log/index.vue
+++ b/frontend/src/components/container-log/index.vue
@@ -1,21 +1,16 @@
 <template>
     <div>
-        <div>
-            <el-select @change="searchLogs" style="width: 10%; float: left" v-model="logSearch.mode">
+        <div style="display: flex; flex-wrap: wrap">
+            <el-select @change="searchLogs" v-model="logSearch.mode" style="width: 100px">
                 <template #prefix>{{ $t('container.fetch') }}</template>
                 <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
             </el-select>
-            <el-input
-                @change="searchLogs"
-                class="margin-button"
-                style="width: 10%; float: left"
-                v-model.number="logSearch.tail"
-            >
+            <el-input @change="searchLogs" class="margin-button" style="width: 100px" v-model.number="logSearch.tail">
                 <template #prefix>
                     <div style="margin-left: 2px">{{ $t('container.lines') }}</div>
                 </template>
             </el-input>
-            <div class="margin-button" style="float: left">
+            <div class="margin-button">
                 <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
                     {{ $t('commons.button.watch') }}
                 </el-checkbox>
diff --git a/frontend/src/styles/moblie.scss b/frontend/src/styles/moblie.scss
index 1fece76f3..c1ba283fd 100644
--- a/frontend/src/styles/moblie.scss
+++ b/frontend/src/styles/moblie.scss
@@ -65,7 +65,7 @@
             }
         }
     }
-    
+
     .mini-form-item {
         width: 100% !important;
     }
@@ -84,4 +84,7 @@
             margin-bottom: 10px;
         }
     }
+    .el-dialog {
+        --el-dialog-width: 80% !important;
+    }
 }
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 2387c093d..07a92c9c7 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -119,7 +119,7 @@
                     v-model:page-size="paginationConfig.pageSize"
                     v-bind="paginationConfig"
                     @change="search(req)"
-                    :layout="'total, sizes, prev, pager, next, jumper'"
+                    :layout="mobile ? 'total, prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
                 />
             </div>
         </template>
@@ -129,13 +129,20 @@
 
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, reactive, ref, computed } from 'vue';
 import { GetAppTags, SearchApp, SyncApp } from '@/api/modules/app';
 import i18n from '@/lang';
 import Detail from '../detail/index.vue';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
+import { GlobalStore } from '@/store';
+
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const language = useI18n().locale.value;
 
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index ce4300f6a..46b119ba6 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -54,7 +54,7 @@
                     :data="data"
                     @search="search"
                 >
-                    <el-table-column :label="$t('commons.table.name')" min-width="100" prop="name" fix>
+                    <el-table-column :label="$t('commons.table.name')" width="170" prop="name" fix>
                         <template #default="{ row }">
                             <Tooltip @click="loadDetail(row)" :text="row.name" />
                         </template>
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 2809a3671..97f7b3fbb 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -64,7 +64,14 @@
                     @search="search"
                 >
                     <el-table-column type="selection" fix />
-                    <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" sortable fix>
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        :width="mobile ? 300 : 'auto'"
+                        min-width="80"
+                        prop="name"
+                        sortable
+                        fix
+                    >
                         <template #default="{ row }">
                             <Tooltip @click="onInspect(row.containerID)" :text="row.name" />
                         </template>
@@ -75,12 +82,12 @@
                         min-width="80"
                         prop="imageName"
                     />
-                    <el-table-column :label="$t('commons.table.status')" min-width="60" prop="state" sortable fix>
+                    <el-table-column :label="$t('commons.table.status')" min-width="80" prop="state" sortable fix>
                         <template #default="{ row }">
                             <Status :key="row.state" :status="row.state"></Status>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="75" fix>
+                    <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="100" fix>
                         <template #default="{ row }">
                             <div v-if="row.hasLoad">
                                 <div>CPU: {{ row.cpuPercent.toFixed(2) }}%</div>
@@ -91,7 +98,13 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.table.port')" min-width="120" prop="ports" fix>
+                    <el-table-column
+                        :label="$t('commons.table.port')"
+                        :width="mobile ? 260 : 'auto'"
+                        min-width="120"
+                        prop="ports"
+                        fix
+                    >
                         <template #default="{ row }">
                             <div v-if="row.ports">
                                 <div v-for="(item, index) in row.ports" :key="index">
@@ -127,7 +140,7 @@
                     </el-table-column>
                     <el-table-column
                         :label="$t('container.upTime')"
-                        min-width="70"
+                        min-width="80"
                         show-overflow-tooltip
                         prop="runTime"
                         fix
@@ -168,7 +181,7 @@ import TerminalDialog from '@/views/container/container/terminal/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import Status from '@/components/status/index.vue';
-import { reactive, onMounted, ref } from 'vue';
+import { reactive, onMounted, ref, computed } from 'vue';
 import {
     containerListStats,
     containerOperator,
@@ -184,6 +197,12 @@ import i18n from '@/lang';
 import router from '@/routers';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
 import { computeSize } from '@/utils/util';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const loading = ref();
 const data = ref();
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index d63e06aa9..fb0c9c0b3 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -41,14 +41,25 @@
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
-                    <el-table-column label="ID" prop="id" min-width="50">
+                    <el-table-column label="ID" prop="id" width="120">
                         <template #default="{ row }">
                             <span>{{ row.id.replaceAll('sha256:', '').substring(0, 12) }}</span>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
+                    <el-table-column
+                        :label="$t('container.tag')"
+                        prop="tags"
+                        min-width="160"
+                        :width="mobile ? 400 : 'auto'"
+                        fix
+                    >
                         <template #default="{ row }">
-                            <el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index">
+                            <el-tag
+                                style="margin-left: 5px"
+                                v-for="(item, index) of row.tags"
+                                :key="index"
+                                :title="item"
+                            >
                                 {{ item }}
                             </el-tag>
                         </template>
@@ -83,7 +94,7 @@
 
 <script lang="ts" setup>
 import TableSetting from '@/components/table-setting/index.vue';
-import { reactive, onMounted, ref } from 'vue';
+import { reactive, onMounted, ref, computed } from 'vue';
 import { dateFormat } from '@/utils/util';
 import { Container } from '@/api/interface/container';
 import Pull from '@/views/container/image/pull/index.vue';
@@ -98,6 +109,12 @@ import { searchImage, listImageRepo, loadDockerStatus, imageRemove } from '@/api
 import i18n from '@/lang';
 import router from '@/routers';
 import { useDeleteData } from '@/hooks/use-delete-data';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index 48ccaf264..f5bd21bb9 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -44,12 +44,12 @@
                     @search="search"
                 >
                     <el-table-column type="selection" :selectable="selectable" fix />
-                    <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix>
+                    <el-table-column :label="$t('commons.table.name')" width="130" prop="name" fix>
                         <template #default="{ row }">
                             <Tooltip @click="onInspect(row.id)" :text="row.name" />
                         </template>
                     </el-table-column>
-                    <el-table-column min-width="50">
+                    <el-table-column width="90">
                         <template #default="{ row }">
                             <el-tag effect="dark" round v-if="row.isSystem">system</el-tag>
                         </template>
@@ -57,7 +57,7 @@
                     <el-table-column
                         :label="$t('container.driver')"
                         show-overflow-tooltip
-                        min-width="40"
+                        min-width="60"
                         prop="driver"
                     />
                     <el-table-column :label="$t('container.subnet')" min-width="80" prop="subnet" fix />
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index 3d025d014..0b32e237e 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -44,12 +44,18 @@
                     @search="search"
                 >
                     <el-table-column type="selection" fix />
-                    <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix>
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        min-width="100"
+                        :width="mobile ? 220 : 'auto'"
+                        prop="name"
+                        fix
+                    >
                         <template #default="{ row }">
                             <Tooltip @click="onInspect(row.name)" :text="row.name" />
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.volumeDir')" min-width="50">
+                    <el-table-column :label="$t('container.volumeDir')" min-width="100">
                         <template #default="{ row }">
                             <el-button type="primary" link @click="toFolder(row.mountpoint)">
                                 <el-icon>
@@ -91,7 +97,7 @@ import Tooltip from '@/components/tooltip/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import CreateDialog from '@/views/container/volume/create/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
-import { reactive, onMounted, ref } from 'vue';
+import { reactive, onMounted, ref, computed } from 'vue';
 import { computeSize, dateFormat } from '@/utils/util';
 import { deleteVolume, searchVolume, inspect, loadDockerStatus, containerPrune } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
@@ -100,6 +106,12 @@ import { useDeleteData } from '@/hooks/use-delete-data';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const loading = ref();
 const detailInfo = ref();
diff --git a/frontend/src/views/database/mysql/setting/status/index.vue b/frontend/src/views/database/mysql/setting/status/index.vue
index 28e7d36c6..2169d3b56 100644
--- a/frontend/src/views/database/mysql/setting/status/index.vue
+++ b/frontend/src/views/database/mysql/setting/status/index.vue
@@ -3,139 +3,178 @@
         <el-form label-position="top">
             <span class="title">{{ $t('database.baseParam') }}</span>
             <el-divider class="devider" />
-            <el-row type="flex" style="margin-left: 50px" justify="center">
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.runTime') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.run }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.connections') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.connections }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.bytesSent') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.bytesSent }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.bytesReceived') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.bytesReceived }}</span>
-                </el-form-item>
-
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.queryPerSecond') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.queryPerSecond }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.txPerSecond') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.txPerSecond }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">File</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.file }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">Position</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.position }}</span>
-                </el-form-item>
+            <el-row type="flex" justify="center" style="margin-left: 50px" :gutter="20">
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.runTime') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.run }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.connections') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.connections }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.bytesSent') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.bytesSent }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.bytesReceived') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.bytesReceived }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.queryPerSecond') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.queryPerSecond }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.txPerSecond') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.txPerSecond }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">File</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.file }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">Position</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.position }}</span>
+                    </el-form-item>
+                </el-col>
             </el-row>
 
             <span class="title">{{ $t('database.performanceParam') }}</span>
             <el-divider class="devider" />
-            <el-row type="flex" style="margin-left: 50px" justify="center">
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.queryPerSecond') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.queryPerSecond }}</span>
-                    <span class="input-help">{{ $t('database.connInfoHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.threadCacheHit') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.threadCacheHit }}</span>
-                    <span class="input-help">{{ $t('database.threadCacheHitHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.indexHit') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.indexHit }}</span>
-                    <span class="input-help">{{ $t('database.indexHitHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.innodbIndexHit') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.innodbIndexHit }}</span>
-                    <span class="input-help">{{ $t('database.innodbIndexHitHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.cacheHit') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.cacheHit }}</span>
-                    <span class="input-help">{{ $t('database.cacheHitHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.tmpTableToDB') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.tmpTableToDB }}</span>
-                    <span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.openTables') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.openTables }}</span>
-                    <span class="input-help">{{ $t('database.openTablesHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.selectFullJoin') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.selectFullJoin }}</span>
-                    <span class="input-help">{{ $t('database.selectFullJoinHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.selectRangeCheck') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.selectRangeCheck }}</span>
-                    <span class="input-help">{{ $t('database.selectRangeCheckHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.sortMergePasses') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.sortMergePasses }}</span>
-                    <span class="input-help">{{ $t('database.sortMergePassesHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('database.tableLocksWaited') }}</span>
-                    </template>
-                    <span class="status-count">{{ mysqlStatus.tableLocksWaited }}</span>
-                    <span class="input-help">{{ $t('database.tableLocksWaitedHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%"></el-form-item>
+            <el-row type="flex" style="margin-left: 50px" justify="center" :gutter="20">
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.queryPerSecond') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.queryPerSecond }}</span>
+                        <span class="input-help">{{ $t('database.connInfoHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.threadCacheHit') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.threadCacheHit }}</span>
+                        <span class="input-help">{{ $t('database.threadCacheHitHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.indexHit') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.indexHit }}</span>
+                        <span class="input-help">{{ $t('database.indexHitHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.innodbIndexHit') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.innodbIndexHit }}</span>
+                        <span class="input-help">{{ $t('database.innodbIndexHitHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.cacheHit') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.cacheHit }}</span>
+                        <span class="input-help">{{ $t('database.cacheHitHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.tmpTableToDB') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.tmpTableToDB }}</span>
+                        <span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.openTables') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.openTables }}</span>
+                        <span class="input-help">{{ $t('database.openTablesHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.selectFullJoin') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.selectFullJoin }}</span>
+                        <span class="input-help">{{ $t('database.selectFullJoinHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.selectRangeCheck') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.selectRangeCheck }}</span>
+                        <span class="input-help">{{ $t('database.selectRangeCheckHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.sortMergePasses') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.sortMergePasses }}</span>
+                        <span class="input-help">{{ $t('database.sortMergePassesHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">{{ $t('database.tableLocksWaited') }}</span>
+                        </template>
+                        <span class="status-count">{{ mysqlStatus.tableLocksWaited }}</span>
+                        <span class="input-help">{{ $t('database.tableLocksWaitedHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                    <el-form-item style="width: 25%"></el-form-item>
+                </el-col>
             </el-row>
         </el-form>
     </div>
diff --git a/frontend/src/views/host/monitor/monitor/index.vue b/frontend/src/views/host/monitor/monitor/index.vue
index ed3190b14..309ddf3c5 100644
--- a/frontend/src/views/host/monitor/monitor/index.vue
+++ b/frontend/src/views/host/monitor/monitor/index.vue
@@ -465,6 +465,7 @@ function initLoadCharts(item: Monitor.MonitorData) {
                 alignTicks: true,
             },
         ],
+        grid: mobile.value ? { left: '15%', right: '15%', bottom: '20%' } : null,
         formatStr: '%',
     };
 }
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index 46e688e68..c47032610 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -73,13 +73,21 @@
                         fix
                         prop="primaryDomain"
                         min-width="120px"
+                        :width="mobile ? 220 : 'auto'"
                         sortable
                     >
                         <template #default="{ row }">
                             <Tooltip @click="openConfig(row.id)" :text="row.primaryDomain" />
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.table.type')" fix show-overflow-tooltip prop="type" sortable>
+                    <el-table-column
+                        min-width="120px"
+                        :label="$t('commons.table.type')"
+                        fix
+                        show-overflow-tooltip
+                        prop="type"
+                        sortable
+                    >
                         <template #default="{ row }">
                             <div v-if="row.type">
                                 {{ $t('website.' + row.type) }}
@@ -97,7 +105,7 @@
                             </el-button>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.table.status')" prop="status" width="100px">
+                    <el-table-column :label="$t('commons.table.status')" prop="status" width="120px">
                         <template #default="{ row }">
                             <el-button
                                 v-if="row.status === 'Running'"
@@ -113,7 +121,7 @@
                             </el-button>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('website.remark')" prop="remark">
+                    <el-table-column :label="$t('website.remark')" prop="remark" min-width="120px">
                         <template #default="{ row }">
                             <MsgInfo :info="row.remark" />
                         </template>
diff --git a/frontend/src/views/website/website/nginx/performance/index.vue b/frontend/src/views/website/website/nginx/performance/index.vue
index c160d9574..8732fd271 100644
--- a/frontend/src/views/website/website/nginx/performance/index.vue
+++ b/frontend/src/views/website/website/nginx/performance/index.vue
@@ -1,9 +1,8 @@
 <template>
     <div>
         <el-form :model="form" :rules="variablesRules" ref="nginxFormRef" label-position="top">
-            <el-row v-loading="loading">
-                <el-col :span="1"><br /></el-col>
-                <el-col :span="9">
+            <el-row v-loading="loading" :gutter="20">
+                <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
                     <el-form-item label="server_names_hash_bucket_size" prop="server_names_hash_bucket_size">
                         <el-input
                             clearable
@@ -28,14 +27,8 @@
                         <el-input clearable type="number" v-model.number="form.keepalive_timeout"></el-input>
                         <span class="input-help">{{ $t('nginx.keepaliveTimeoutHelper') }}</span>
                     </el-form-item>
-                    <el-form-item>
-                        <el-button type="primary" @click="submit(nginxFormRef)">
-                            {{ $t('commons.button.save') }}
-                        </el-button>
-                    </el-form-item>
                 </el-col>
-                <el-col :span="1"><br /></el-col>
-                <el-col :span="9">
+                <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
                     <el-form-item label="gzip" prop="gzip">
                         <el-select v-model="form.gzip">
                             <el-option :label="'on'" :value="'on'"></el-option>
@@ -55,6 +48,11 @@
                     </el-form-item>
                 </el-col>
             </el-row>
+            <el-form-item>
+                <el-button type="primary" @click="submit(nginxFormRef)">
+                    {{ $t('commons.button.save') }}
+                </el-button>
+            </el-form-item>
         </el-form>
     </div>
 </template>