From 0275716ff57137232f728ce1a80ff215df248e90 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Fri, 9 Jun 2023 23:38:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20(#1320)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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.
---
 frontend/src/styles/common.scss               |   5 +
 frontend/src/styles/moblie.scss               |  15 +
 .../src/views/container/setting/index.vue     |   4 +-
 frontend/src/views/cronjob/record/index.vue   | 342 +++++++++---------
 .../redis/setting/persistence/index.vue       |   4 +-
 .../database/redis/setting/status/index.vue   | 244 +++++++------
 .../src/views/host/monitor/monitor/index.vue  | 174 +++++----
 frontend/src/views/log/login/index.vue        |  51 +--
 frontend/src/views/login/entrance/index.vue   |   9 +-
 frontend/src/views/login/index.vue            |  10 +-
 10 files changed, 475 insertions(+), 383 deletions(-)

diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 8ec89c28f..c56448e3e 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -13,6 +13,11 @@
     align-items: center;
 }
 
+.flx-wrap {
+    display: flex;
+    flex-wrap: wrap;
+}
+
 .clearfix::after {
     display: block;
     height: 0;
diff --git a/frontend/src/styles/moblie.scss b/frontend/src/styles/moblie.scss
index 712f27b37..e1d8131ba 100644
--- a/frontend/src/styles/moblie.scss
+++ b/frontend/src/styles/moblie.scss
@@ -65,4 +65,19 @@
             }
         }
     }
+
+    .database-status {
+        .title {
+            margin-left: 10px !important;
+        }
+        .content {
+            margin-left: 10px !important;
+        }
+    }
+
+    @media only screen and (max-width: 768px) {
+        .el-col-xs-24 {
+            margin-bottom: 10px;
+        }
+    }
 }
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index a45237eb9..45c8e5466 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -43,8 +43,8 @@
                 </el-radio-group>
                 <el-row style="margin-top: 20px" v-if="confShowType === 'base'">
                     <el-col :span="1"><br /></el-col>
-                    <el-col :span="10">
-                        <el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="150px">
+                    <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">
                                     <el-input
diff --git a/frontend/src/views/cronjob/record/index.vue b/frontend/src/views/cronjob/record/index.vue
index c2f4c5360..7e632791f 100644
--- a/frontend/src/views/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/record/index.vue
@@ -123,194 +123,198 @@
                 </el-row>
             </template>
             <template #main>
-                <el-row :gutter="20" v-show="hasRecords">
-                    <el-col :span="8">
-                        <div>
-                            <ul class="infinite-list" style="overflow: auto">
-                                <li
-                                    v-for="(item, index) in records"
-                                    :key="index"
-                                    @click="forDetail(item)"
-                                    class="infinite-list-item"
-                                >
-                                    <el-icon v-if="item.status === 'Success'"><Select /></el-icon>
-                                    <el-icon v-if="item.status === 'Waiting'"><Loading /></el-icon>
-                                    <el-icon v-if="item.status === 'Failed'"><CloseBold /></el-icon>
-                                    <span v-if="item.id === currentRecord.id" style="color: red">
-                                        {{ dateFormat(0, 0, item.startTime) }}
-                                    </span>
-                                    <span v-else>{{ dateFormat(0, 0, item.startTime) }}</span>
-                                </li>
-                            </ul>
-                            <div style="margin-top: 10px; font-size: 12px; float: right">
-                                <el-pagination
-                                    :page-size="searchInfo.pageSize"
-                                    :current-page="searchInfo.page"
-                                    @current-change="handleCurrentChange"
-                                    @size-change="handleSizeChange"
-                                    :pager-count="5"
-                                    :page-sizes="[6, 8, 10, 12, 14]"
-                                    small
-                                    layout="total, sizes, prev, pager, next"
-                                    :total="searchInfo.recordTotal"
-                                />
-                            </div>
-                        </div>
-                    </el-col>
-                    <el-col :span="16">
-                        <el-form label-position="top" :v-key="refresh">
-                            <el-row type="flex" justify="center">
-                                <el-form-item class="descriptionWide" v-if="isBackup()">
-                                    <template #label>
-                                        <span class="status-label">{{ $t('cronjob.target') }}</span>
-                                    </template>
-                                    <span class="status-count">{{ dialogData.rowData!.targetDir }}</span>
-                                    <el-button
-                                        v-if="currentRecord?.status === 'Success'"
-                                        type="primary"
-                                        style="margin-left: 10px"
-                                        link
-                                        icon="Download"
-                                        @click="onDownload(currentRecord, dialogData.rowData!.targetDirID)"
+                <div style="overflow: auto">
+                    <el-row :gutter="20" v-show="hasRecords" style="min-width: 900px">
+                        <el-col :span="8">
+                            <div>
+                                <ul class="infinite-list" style="overflow: auto">
+                                    <li
+                                        v-for="(item, index) in records"
+                                        :key="index"
+                                        @click="forDetail(item)"
+                                        class="infinite-list-item"
                                     >
-                                        {{ $t('file.download') }}
-                                    </el-button>
-                                </el-form-item>
-                                <el-form-item class="description" v-if="dialogData.rowData!.type === 'website'">
+                                        <el-icon v-if="item.status === 'Success'"><Select /></el-icon>
+                                        <el-icon v-if="item.status === 'Waiting'"><Loading /></el-icon>
+                                        <el-icon v-if="item.status === 'Failed'"><CloseBold /></el-icon>
+                                        <span v-if="item.id === currentRecord.id" style="color: red">
+                                            {{ dateFormat(0, 0, item.startTime) }}
+                                        </span>
+                                        <span v-else>{{ dateFormat(0, 0, item.startTime) }}</span>
+                                    </li>
+                                </ul>
+                                <div style="margin-top: 10px; font-size: 12px; float: right">
+                                    <el-pagination
+                                        :page-size="searchInfo.pageSize"
+                                        :current-page="searchInfo.page"
+                                        @current-change="handleCurrentChange"
+                                        @size-change="handleSizeChange"
+                                        :pager-count="5"
+                                        :page-sizes="[6, 8, 10, 12, 14]"
+                                        small
+                                        layout="total, sizes, prev, pager, next"
+                                        :total="searchInfo.recordTotal"
+                                    />
+                                </div>
+                            </div>
+                        </el-col>
+                        <el-col :span="16">
+                            <el-form label-position="top" :v-key="refresh">
+                                <el-row type="flex" justify="center">
+                                    <el-form-item class="descriptionWide" v-if="isBackup()">
+                                        <template #label>
+                                            <span class="status-label">{{ $t('cronjob.target') }}</span>
+                                        </template>
+                                        <span class="status-count">{{ dialogData.rowData!.targetDir }}</span>
+                                        <el-button
+                                            v-if="currentRecord?.status === 'Success'"
+                                            type="primary"
+                                            style="margin-left: 10px"
+                                            link
+                                            icon="Download"
+                                            @click="onDownload(currentRecord, dialogData.rowData!.targetDirID)"
+                                        >
+                                            {{ $t('file.download') }}
+                                        </el-button>
+                                    </el-form-item>
+                                    <el-form-item class="description" v-if="dialogData.rowData!.type === 'website'">
+                                        <template #label>
+                                            <span class="status-label">{{ $t('cronjob.website') }}</span>
+                                        </template>
+                                        <span v-if="dialogData.rowData!.website !== 'all'" class="status-count">
+                                            {{ dialogData.rowData!.website }}
+                                        </span>
+                                        <span v-else class="status-count">
+                                            {{ $t('commons.table.all') }}
+                                        </span>
+                                    </el-form-item>
+                                    <el-form-item class="description" v-if="dialogData.rowData!.type === 'database'">
+                                        <template #label>
+                                            <span class="status-label">{{ $t('cronjob.database') }}</span>
+                                        </template>
+                                        <span v-if="dialogData.rowData!.dbName !== 'all'" class="status-count">
+                                            {{ dialogData.rowData!.dbName }}
+                                        </span>
+                                        <span v-else class="status-count">
+                                            {{ $t('commons.table.all') }}
+                                        </span>
+                                    </el-form-item>
+                                    <el-form-item class="description" v-if="dialogData.rowData!.type === 'directory'">
+                                        <template #label>
+                                            <span class="status-label">{{ $t('cronjob.directory') }}</span>
+                                        </template>
+                                        <span v-if="dialogData.rowData!.sourceDir.length <= 12" class="status-count">
+                                            {{ dialogData.rowData!.sourceDir }}
+                                        </span>
+                                        <div v-else>
+                                            <el-popover
+                                                placement="top-start"
+                                                trigger="hover"
+                                                width="250"
+                                                :content="dialogData.rowData!.sourceDir"
+                                            >
+                                                <template #reference>
+                                                    <span class="status-count">
+                                                        {{ dialogData.rowData!.sourceDir.substring(0, 12) }}...
+                                                    </span>
+                                                </template>
+                                            </el-popover>
+                                        </div>
+                                    </el-form-item>
+                                    <el-form-item class="description" v-if="isBackup()">
+                                        <template #label>
+                                            <span class="status-label">{{ $t('cronjob.retainCopies') }}</span>
+                                        </template>
+                                        <span class="status-count">{{ dialogData.rowData!.retainCopies }}</span>
+                                    </el-form-item>
+                                </el-row>
+                                <el-form-item
+                                    class="description"
+                                    v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'directory'"
+                                >
                                     <template #label>
-                                        <span class="status-label">{{ $t('cronjob.website') }}</span>
+                                        <span class="status-label">{{ $t('cronjob.exclusionRules') }}</span>
                                     </template>
-                                    <span v-if="dialogData.rowData!.website !== 'all'" class="status-count">
-                                        {{ dialogData.rowData!.website }}
-                                    </span>
-                                    <span v-else class="status-count">
-                                        {{ $t('commons.table.all') }}
-                                    </span>
-                                </el-form-item>
-                                <el-form-item class="description" v-if="dialogData.rowData!.type === 'database'">
-                                    <template #label>
-                                        <span class="status-label">{{ $t('cronjob.database') }}</span>
-                                    </template>
-                                    <span v-if="dialogData.rowData!.dbName !== 'all'" class="status-count">
-                                        {{ dialogData.rowData!.dbName }}
-                                    </span>
-                                    <span v-else class="status-count">
-                                        {{ $t('commons.table.all') }}
-                                    </span>
-                                </el-form-item>
-                                <el-form-item class="description" v-if="dialogData.rowData!.type === 'directory'">
-                                    <template #label>
-                                        <span class="status-label">{{ $t('cronjob.directory') }}</span>
-                                    </template>
-                                    <span v-if="dialogData.rowData!.sourceDir.length <= 12" class="status-count">
-                                        {{ dialogData.rowData!.sourceDir }}
+                                    <span v-if="dialogData.rowData!.exclusionRules.length <= 12" class="status-count">
+                                        {{ dialogData.rowData!.exclusionRules }}
                                     </span>
                                     <div v-else>
                                         <el-popover
                                             placement="top-start"
                                             trigger="hover"
                                             width="250"
-                                            :content="dialogData.rowData!.sourceDir"
+                                            :content="dialogData.rowData!.exclusionRules"
                                         >
                                             <template #reference>
                                                 <span class="status-count">
-                                                    {{ dialogData.rowData!.sourceDir.substring(0, 12) }}...
+                                                    {{ dialogData.rowData!.exclusionRules.substring(0, 12) }}...
                                                 </span>
                                             </template>
                                         </el-popover>
                                     </div>
                                 </el-form-item>
-                                <el-form-item class="description" v-if="isBackup()">
-                                    <template #label>
-                                        <span class="status-label">{{ $t('cronjob.retainCopies') }}</span>
-                                    </template>
-                                    <span class="status-count">{{ dialogData.rowData!.retainCopies }}</span>
-                                </el-form-item>
-                            </el-row>
-                            <el-form-item
-                                class="description"
-                                v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'directory'"
-                            >
-                                <template #label>
-                                    <span class="status-label">{{ $t('cronjob.exclusionRules') }}</span>
-                                </template>
-                                <span v-if="dialogData.rowData!.exclusionRules.length <= 12" class="status-count">
-                                    {{ dialogData.rowData!.exclusionRules }}
-                                </span>
-                                <div v-else>
-                                    <el-popover
-                                        placement="top-start"
-                                        trigger="hover"
-                                        width="250"
-                                        :content="dialogData.rowData!.exclusionRules"
-                                    >
-                                        <template #reference>
-                                            <span class="status-count">
-                                                {{ dialogData.rowData!.exclusionRules.substring(0, 12) }}...
-                                            </span>
+                                <el-row type="flex" justify="center">
+                                    <el-form-item class="descriptionWide">
+                                        <template #label>
+                                            <span class="status-label">{{ $t('commons.search.timeStart') }}</span>
                                         </template>
-                                    </el-popover>
-                                </div>
-                            </el-form-item>
-                            <el-row type="flex" justify="center">
-                                <el-form-item class="descriptionWide">
-                                    <template #label>
-                                        <span class="status-label">{{ $t('commons.search.timeStart') }}</span>
-                                    </template>
-                                    <span class="status-count">{{ dateFormat(0, 0, currentRecord?.startTime) }}</span>
-                                </el-form-item>
-                                <el-form-item class="description">
-                                    <template #label>
-                                        <span class="status-label">{{ $t('commons.table.interval') }}</span>
-                                    </template>
-                                    <span class="status-count" v-if="currentRecord?.interval! <= 1000">
-                                        {{ currentRecord?.interval }} ms
-                                    </span>
-                                    <span class="status-count" v-if="currentRecord?.interval! > 1000">
-                                        {{ currentRecord?.interval! / 1000 }} s
-                                    </span>
-                                </el-form-item>
-                                <el-form-item class="description">
-                                    <template #label>
-                                        <span class="status-label">{{ $t('commons.table.status') }}</span>
-                                    </template>
-                                    <el-tooltip v-if="currentRecord?.status === 'Failed'" placement="top">
-                                        <template #content>
-                                            <div style="width: 300px; word-break: break-all">
-                                                {{ currentRecord?.message }}
-                                            </div>
+                                        <span class="status-count">
+                                            {{ dateFormat(0, 0, currentRecord?.startTime) }}
+                                        </span>
+                                    </el-form-item>
+                                    <el-form-item class="description">
+                                        <template #label>
+                                            <span class="status-label">{{ $t('commons.table.interval') }}</span>
                                         </template>
-                                        <el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
-                                    </el-tooltip>
-                                    <el-tag type="success" v-if="currentRecord?.status === 'Success'">
-                                        {{ $t('commons.table.statusSuccess') }}
-                                    </el-tag>
-                                    <el-tag type="info" v-if="currentRecord?.status === 'Waiting'">
-                                        {{ $t('commons.table.statusWaiting') }}
-                                    </el-tag>
-                                </el-form-item>
-                            </el-row>
-                            <el-row v-if="currentRecord?.records">
-                                <span>{{ $t('commons.table.records') }}</span>
-                                <codemirror
-                                    ref="mymirror"
-                                    :autofocus="true"
-                                    :placeholder="$t('cronjob.noLogs')"
-                                    :indent-with-tab="true"
-                                    :tabSize="4"
-                                    style="height: calc(100vh - 484px); width: 100%; margin-top: 5px"
-                                    :lineWrapping="true"
-                                    :matchBrackets="true"
-                                    theme="cobalt"
-                                    :styleActiveLine="true"
-                                    :extensions="extensions"
-                                    v-model="currentRecordDetail"
-                                    :disabled="true"
-                                />
-                            </el-row>
-                        </el-form>
-                    </el-col>
-                </el-row>
+                                        <span class="status-count" v-if="currentRecord?.interval! <= 1000">
+                                            {{ currentRecord?.interval }} ms
+                                        </span>
+                                        <span class="status-count" v-if="currentRecord?.interval! > 1000">
+                                            {{ currentRecord?.interval! / 1000 }} s
+                                        </span>
+                                    </el-form-item>
+                                    <el-form-item class="description">
+                                        <template #label>
+                                            <span class="status-label">{{ $t('commons.table.status') }}</span>
+                                        </template>
+                                        <el-tooltip v-if="currentRecord?.status === 'Failed'" placement="top">
+                                            <template #content>
+                                                <div style="width: 300px; word-break: break-all">
+                                                    {{ currentRecord?.message }}
+                                                </div>
+                                            </template>
+                                            <el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
+                                        </el-tooltip>
+                                        <el-tag type="success" v-if="currentRecord?.status === 'Success'">
+                                            {{ $t('commons.table.statusSuccess') }}
+                                        </el-tag>
+                                        <el-tag type="info" v-if="currentRecord?.status === 'Waiting'">
+                                            {{ $t('commons.table.statusWaiting') }}
+                                        </el-tag>
+                                    </el-form-item>
+                                </el-row>
+                                <el-row v-if="currentRecord?.records">
+                                    <span>{{ $t('commons.table.records') }}</span>
+                                    <codemirror
+                                        ref="mymirror"
+                                        :autofocus="true"
+                                        :placeholder="$t('cronjob.noLogs')"
+                                        :indent-with-tab="true"
+                                        :tabSize="4"
+                                        style="height: calc(100vh - 484px); width: 100%; margin-top: 5px"
+                                        :lineWrapping="true"
+                                        :matchBrackets="true"
+                                        theme="cobalt"
+                                        :styleActiveLine="true"
+                                        :extensions="extensions"
+                                        v-model="currentRecordDetail"
+                                        :disabled="true"
+                                    />
+                                </el-row>
+                            </el-form>
+                        </el-col>
+                    </el-row>
+                </div>
                 <div class="app-warn" v-show="!hasRecords">
                     <div>
                         <span>{{ $t('cronjob.noRecord') }}</span>
diff --git a/frontend/src/views/database/redis/setting/persistence/index.vue b/frontend/src/views/database/redis/setting/persistence/index.vue
index c113a315a..b56e721cb 100644
--- a/frontend/src/views/database/redis/setting/persistence/index.vue
+++ b/frontend/src/views/database/redis/setting/persistence/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="persistenceShow">
         <el-row :gutter="20" style="margin-top: 5px" class="row-box">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                 <el-card class="el-card">
                     <template #header>
                         <div class="card-header">
@@ -36,7 +36,7 @@
                     </el-form>
                 </el-card>
             </el-col>
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                 <el-card class="el-card">
                     <template #header>
                         <div class="card-header">
diff --git a/frontend/src/views/database/redis/setting/status/index.vue b/frontend/src/views/database/redis/setting/status/index.vue
index 1dc3dc6ed..a7874e30a 100644
--- a/frontend/src/views/database/redis/setting/status/index.vue
+++ b/frontend/src/views/database/redis/setting/status/index.vue
@@ -1,108 +1,131 @@
 <template>
-    <div v-if="statusShow">
+    <div v-if="statusShow" class="database-status">
         <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">uptime_in_days</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.uptime_in_days }}</span>
-                    <span class="input-help">{{ $t('database.uptimeInDays') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">tcp_port</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.tcp_port }}</span>
-                    <span class="input-help">{{ $t('database.tcpPort') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">connected_clients</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.connected_clients }}</span>
-                    <span class="input-help">{{ $t('database.connectedClients') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%"></el-form-item>
+            <el-row class="content">
+                <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">uptime_in_days</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.uptime_in_days }}</span>
+                        <span class="input-help">{{ $t('database.uptimeInDays') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">tcp_port</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.tcp_port }}</span>
+                        <span class="input-help">{{ $t('database.tcpPort') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">connected_clients</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.connected_clients }}</span>
+                        <span class="input-help">{{ $t('database.connectedClients') }}</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">used_memory_rss</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.used_memory_rss }}</span>
-                    <span class="input-help">{{ $t('database.usedMemoryRss') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">used_memory</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.used_memory }}</span>
-                    <span class="input-help">{{ $t('database.usedMemory') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">mem_fragmentation_ratio</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.mem_fragmentation_ratio }}</span>
-                    <span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">total_connections_received</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.total_connections_received }}</span>
-                    <span class="input-help">{{ $t('database.totalConnectionsReceived') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">total_commands_processed</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.total_commands_processed }}</span>
-                    <span class="input-help">{{ $t('database.totalCommandsProcessed') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">instantaneous_ops_per_sec</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.instantaneous_ops_per_sec }}</span>
-                    <span class="input-help">{{ $t('database.instantaneousOpsPerSec') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">keyspace_hits</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.keyspace_hits }}</span>
-                    <span class="input-help">{{ $t('database.keyspaceHits') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">keyspace_misses</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.keyspace_misses }}</span>
-                    <span class="input-help">{{ $t('database.keyspaceMisses') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">hit</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.hit }}</span>
-                    <span class="input-help">{{ $t('database.hit') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">latest_fork_usec</span>
-                    </template>
-                    <span class="status-count">{{ redisStatus.latest_fork_usec }}</span>
-                    <span class="input-help">{{ $t('database.latestForkUsec') }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%"></el-form-item>
-                <el-form-item style="width: 25%"></el-form-item>
+            <el-row class="content">
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">used_memory_rss</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.used_memory_rss }}</span>
+                        <span class="input-help">{{ $t('database.usedMemoryRss') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">used_memory</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.used_memory }}</span>
+                        <span class="input-help">{{ $t('database.usedMemory') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">mem_fragmentation_ratio</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.mem_fragmentation_ratio }}</span>
+                        <span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="8" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">total_connections_received</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.total_connections_received }}</span>
+                        <span class="input-help">{{ $t('database.totalConnectionsReceived') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">total_commands_processed</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.total_commands_processed }}</span>
+                        <span class="input-help">{{ $t('database.totalCommandsProcessed') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">instantaneous_ops_per_sec</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.instantaneous_ops_per_sec }}</span>
+                        <span class="input-help">{{ $t('database.instantaneousOpsPerSec') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">keyspace_hits</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.keyspace_hits }}</span>
+                        <span class="input-help">{{ $t('database.keyspaceHits') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">keyspace_misses</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.keyspace_misses }}</span>
+                        <span class="input-help">{{ $t('database.keyspaceMisses') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">hit</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.hit }}</span>
+                        <span class="input-help">{{ $t('database.hit') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
+                    <el-form-item>
+                        <template #label>
+                            <span class="status-label">latest_fork_usec</span>
+                        </template>
+                        <span class="status-count">{{ redisStatus.latest_fork_usec }}</span>
+                        <span class="input-help">{{ $t('database.latestForkUsec') }}</span>
+                    </el-form-item>
+                </el-col>
             </el-row>
         </el-form>
     </div>
@@ -169,16 +192,21 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.devider {
-    display: block;
-    height: 1px;
-    width: 100%;
-    margin: 12px 0;
-    border-top: 1px var(--el-border-color) var(--el-border-style);
-}
-.title {
-    font-size: 20px;
-    font-weight: 500;
-    margin-left: 50px;
+.database-status {
+    .devider {
+        display: block;
+        height: 1px;
+        width: 100%;
+        margin: 12px 0;
+        border-top: 1px var(--el-border-color) var(--el-border-style);
+    }
+    .title {
+        font-size: 20px;
+        font-weight: 500;
+        margin-left: 50px;
+    }
+    .content {
+        margin-left: 50px;
+    }
 }
 </style>
diff --git a/frontend/src/views/host/monitor/monitor/index.vue b/frontend/src/views/host/monitor/monitor/index.vue
index d62f65c61..b08571537 100644
--- a/frontend/src/views/host/monitor/monitor/index.vue
+++ b/frontend/src/views/host/monitor/monitor/index.vue
@@ -6,17 +6,20 @@
             <el-col :span="24">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span class="title">{{ $t('monitor.avgLoad') }}</span>
-                        <el-date-picker
-                            @change="search('load')"
-                            v-model="timeRangeLoad"
-                            type="datetimerange"
-                            :range-separator="$t('commons.search.timeRange')"
-                            :start-placeholder="$t('commons.search.timeStart')"
-                            :end-placeholder="$t('commons.search.timeEnd')"
-                            :shortcuts="shortcuts"
-                            style="float: right; margin-top: -5px; width: 360px"
-                        ></el-date-picker>
+                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                            <span class="title">{{ $t('monitor.avgLoad') }}</span>
+                            <el-date-picker
+                                @change="search('load')"
+                                v-model="timeRangeLoad"
+                                type="datetimerange"
+                                :range-separator="$t('commons.search.timeRange')"
+                                :start-placeholder="$t('commons.search.timeStart')"
+                                :end-placeholder="$t('commons.search.timeEnd')"
+                                :shortcuts="shortcuts"
+                                style="max-width: 360px; width: 100%"
+                                :size="mobile ? 'small' : 'default'"
+                            ></el-date-picker>
+                        </div>
                     </template>
                     <div id="loadLoadChart" class="chart"></div>
                 </el-card>
@@ -26,17 +29,20 @@
             <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span class="title">CPU</span>
-                        <el-date-picker
-                            @change="search('cpu')"
-                            v-model="timeRangeCpu"
-                            type="datetimerange"
-                            :range-separator="$t('commons.search.timeRange')"
-                            :start-placeholder="$t('commons.search.timeStart')"
-                            :end-placeholder="$t('commons.search.timeEnd')"
-                            :shortcuts="shortcuts"
-                            style="float: right; margin-top: -5px; width: 360px"
-                        ></el-date-picker>
+                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                            <span class="title">CPU</span>
+                            <el-date-picker
+                                @change="search('cpu')"
+                                v-model="timeRangeCpu"
+                                type="datetimerange"
+                                :range-separator="$t('commons.search.timeRange')"
+                                :start-placeholder="$t('commons.search.timeStart')"
+                                :end-placeholder="$t('commons.search.timeEnd')"
+                                :shortcuts="shortcuts"
+                                style="max-width: 360px; width: 100%"
+                                :size="mobile ? 'small' : 'default'"
+                            ></el-date-picker>
+                        </div>
                     </template>
                     <div id="loadCPUChart" class="chart"></div>
                 </el-card>
@@ -44,17 +50,20 @@
             <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span class="title">{{ $t('monitor.memory') }}</span>
-                        <el-date-picker
-                            @change="search('memory')"
-                            v-model="timeRangeMemory"
-                            type="datetimerange"
-                            :range-separator="$t('commons.search.timeRange')"
-                            :start-placeholder="$t('commons.search.timeStart')"
-                            :end-placeholder="$t('commons.search.timeEnd')"
-                            :shortcuts="shortcuts"
-                            style="float: right; margin-top: -5px; width: 360px"
-                        ></el-date-picker>
+                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                            <span class="title">{{ $t('monitor.memory') }}</span>
+                            <el-date-picker
+                                @change="search('memory')"
+                                v-model="timeRangeMemory"
+                                type="datetimerange"
+                                :range-separator="$t('commons.search.timeRange')"
+                                :start-placeholder="$t('commons.search.timeStart')"
+                                :end-placeholder="$t('commons.search.timeEnd')"
+                                :shortcuts="shortcuts"
+                                style="max-width: 360px; width: 100%"
+                                :size="mobile ? 'small' : 'default'"
+                            ></el-date-picker>
+                        </div>
                     </template>
                     <div id="loadMemoryChart" class="chart"></div>
                 </el-card>
@@ -64,17 +73,20 @@
             <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span class="title">{{ $t('monitor.disk') }} IO</span>
-                        <el-date-picker
-                            @change="search('io')"
-                            v-model="timeRangeIO"
-                            type="datetimerange"
-                            :range-separator="$t('commons.search.timeRange')"
-                            :start-placeholder="$t('commons.search.timeStart')"
-                            :end-placeholder="$t('commons.search.timeEnd')"
-                            :shortcuts="shortcuts"
-                            style="float: right; margin-top: -5px; width: 360px"
-                        ></el-date-picker>
+                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                            <span class="title">{{ $t('monitor.disk') }} IO</span>
+                            <el-date-picker
+                                @change="search('io')"
+                                v-model="timeRangeIO"
+                                type="datetimerange"
+                                :range-separator="$t('commons.search.timeRange')"
+                                :start-placeholder="$t('commons.search.timeStart')"
+                                :end-placeholder="$t('commons.search.timeEnd')"
+                                :shortcuts="shortcuts"
+                                style="max-width: 360px; width: 100%"
+                                :size="mobile ? 'small' : 'default'"
+                            ></el-date-picker>
+                        </div>
                     </template>
                     <div id="loadIOChart" class="chart"></div>
                 </el-card>
@@ -82,34 +94,43 @@
             <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span class="title">{{ $t('monitor.network') }} IO:</span>
-                        <el-popover placement="bottom" :width="200" trigger="click">
-                            <el-select @change="search('network')" v-model="networkChoose">
-                                <template #prefix>{{ $t('monitor.networkCard') }}</template>
-                                <div v-for="item in netOptions" :key="item">
-                                    <el-option v-if="item === 'all'" :label="$t('commons.table.all')" :value="item" />
-                                    <el-option v-else :label="item" :value="item" />
-                                </div>
-                            </el-select>
-                            <template #reference>
-                                <span class="networkOption" v-if="networkChoose === 'all'">
-                                    {{ $t('commons.table.all') }}
-                                </span>
-                                <span v-else class="networkOption">
-                                    {{ networkChoose }}
-                                </span>
-                            </template>
-                        </el-popover>
-                        <el-date-picker
-                            @change="search('network')"
-                            v-model="timeRangeNetwork"
-                            type="datetimerange"
-                            :range-separator="$t('commons.search.timeRange')"
-                            :start-placeholder="$t('commons.search.timeStart')"
-                            :end-placeholder="$t('commons.search.timeEnd')"
-                            :shortcuts="shortcuts"
-                            style="float: right; margin-top: -5px; width: 360px"
-                        ></el-date-picker>
+                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                            <div>
+                                <span class="title">{{ $t('monitor.network') }} IO:</span>
+                                <el-popover placement="bottom" :width="200" trigger="click">
+                                    <el-select @change="search('network')" v-model="networkChoose">
+                                        <template #prefix>{{ $t('monitor.networkCard') }}</template>
+                                        <div v-for="item in netOptions" :key="item">
+                                            <el-option
+                                                v-if="item === 'all'"
+                                                :label="$t('commons.table.all')"
+                                                :value="item"
+                                            />
+                                            <el-option v-else :label="item" :value="item" />
+                                        </div>
+                                    </el-select>
+                                    <template #reference>
+                                        <span class="networkOption" v-if="networkChoose === 'all'">
+                                            {{ $t('commons.table.all') }}
+                                        </span>
+                                        <span v-else class="networkOption">
+                                            {{ networkChoose }}
+                                        </span>
+                                    </template>
+                                </el-popover>
+                            </div>
+                            <el-date-picker
+                                @change="search('network')"
+                                v-model="timeRangeNetwork"
+                                type="datetimerange"
+                                :range-separator="$t('commons.search.timeRange')"
+                                :start-placeholder="$t('commons.search.timeStart')"
+                                :end-placeholder="$t('commons.search.timeEnd')"
+                                :shortcuts="shortcuts"
+                                style="max-width: 360px; width: 100%"
+                                :size="mobile ? 'small' : 'default'"
+                            ></el-date-picker>
+                        </div>
                     </template>
                     <div id="loadNetworkChart" class="chart"></div>
                 </el-card>
@@ -119,13 +140,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
+import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
 import * as echarts from 'echarts';
 import { loadMonitor, getNetworkOptions } from '@/api/modules/monitor';
 import { Monitor } from '@/api/interface/monitor';
 import { dateFormatWithoutYear } from '@/utils/util';
 import i18n from '@/lang';
 import MonitorRouter from '@/views/host/monitor/index.vue';
+import { GlobalStore } from '@/store';
+
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const zoomStart = ref();
 const monitorBase = ref();
diff --git a/frontend/src/views/log/login/index.vue b/frontend/src/views/log/login/index.vue
index f1138dbe0..007c3a8aa 100644
--- a/frontend/src/views/log/login/index.vue
+++ b/frontend/src/views/log/login/index.vue
@@ -15,39 +15,44 @@
                         </el-button>
                     </el-col>
                     <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
-                        <TableSetting @search="search()" />
-                        <div class="search-button">
-                            <el-input
-                                v-model="searchIP"
-                                clearable
-                                @clear="search()"
-                                suffix-icon="Search"
-                                @keyup.enter="search()"
-                                @change="search()"
-                                :placeholder="$t('commons.button.search') + ' ip'"
-                            ></el-input>
+                        <div class="flx-align-center">
+                            <div class="search-button">
+                                <el-input
+                                    v-model="searchIP"
+                                    clearable
+                                    @clear="search()"
+                                    suffix-icon="Search"
+                                    @keyup.enter="search()"
+                                    @change="search()"
+                                    :placeholder="$t('commons.button.search') + ' ip'"
+                                ></el-input>
+                            </div>
+                            <TableSetting @search="search()" />
                         </div>
                     </el-col>
                 </el-row>
             </template>
 
             <template #search>
-                <el-select v-model="searchStatus" @change="search()" clearable>
-                    <template #prefix>{{ $t('commons.table.status') }}</template>
-                    <el-option :label="$t('commons.table.all')" value=""></el-option>
-                    <el-option :label="$t('commons.status.success')" value="Success"></el-option>
-                    <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
-                </el-select>
-                <el-button type="primary" plain @click="onClean()" style="margin-left: 10px">
-                    {{ $t('logs.deleteLogs') }}
-                </el-button>
+                <div class="flx-align-center">
+                    <el-select v-model="searchStatus" @change="search()" clearable>
+                        <template #prefix>{{ $t('commons.table.status') }}</template>
+                        <el-option :label="$t('commons.table.all')" value=""></el-option>
+                        <el-option :label="$t('commons.status.success')" value="Success"></el-option>
+                        <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
+                    </el-select>
+
+                    <el-button type="primary" plain @click="onClean()" style="margin-left: 10px">
+                        {{ $t('logs.deleteLogs') }}
+                    </el-button>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
-                    <el-table-column min-width="40" :label="$t('logs.loginIP')" prop="ip" />
-                    <el-table-column min-width="40" :label="$t('logs.loginAddress')" prop="address" />
+                    <el-table-column :label="$t('logs.loginIP')" prop="ip" />
+                    <el-table-column :label="$t('logs.loginAddress')" prop="address" />
                     <el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
-                    <el-table-column min-width="40" :label="$t('logs.loginStatus')" prop="status">
+                    <el-table-column :label="$t('logs.loginStatus')" prop="status">
                         <template #default="{ row }">
                             <div v-if="row.status === 'Success'">
                                 <el-tag type="success">{{ $t('commons.status.success') }}</el-tag>
diff --git a/frontend/src/views/login/entrance/index.vue b/frontend/src/views/login/entrance/index.vue
index a4440732d..687f22ef4 100644
--- a/frontend/src/views/login/entrance/index.vue
+++ b/frontend/src/views/login/entrance/index.vue
@@ -145,9 +145,9 @@ onMounted(() => {
             font-size: 40px;
             font-family: pingFangSC-Regular;
             font-weight: 600;
-            // @media only screen and (max-width: 1440px) {
-            //     margin-left: 0;
-            // }
+            @media only screen and (max-width: 768px) {
+                font-size: 35px;
+            }
         }
         @media only screen and (max-width: 1110px) {
             margin-bottom: 20px;
@@ -170,6 +170,9 @@ onMounted(() => {
         @media only screen and (max-width: 1110px) {
             margin: 60px auto 0;
         }
+        @media only screen and (max-width: 768px) {
+            width: 100%;
+        }
     }
 }
 </style>
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index b4257c220..0bf1d1a6a 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -100,9 +100,9 @@ onMounted(() => {
             font-size: 40px;
             font-family: pingFangSC-Regular;
             font-weight: 600;
-            // @media only screen and (max-width: 1440px) {
-            //     margin-left: 0;
-            // }
+            @media only screen and (max-width: 768px) {
+                font-size: 35px;
+            }
         }
         @media only screen and (max-width: 1110px) {
             margin-bottom: 20px;
@@ -125,6 +125,10 @@ onMounted(() => {
         @media only screen and (max-width: 1110px) {
             margin: 60px auto 0;
         }
+
+        @media only screen and (max-width: 768px) {
+            width: 100%;
+        }
     }
 }
 </style>