From b13efc519533edda855445cae815ff90df627cda Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Thu, 2 Feb 2023 17:03:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E6=9C=AA=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=BC=95=E7=94=A8=E5=AF=BC=E8=87=B4=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/container/compose/create/index.vue  |   1 +
 .../container/container/create/index.vue      |   1 +
 .../src/views/container/image/pull/index.vue  |   1 +
 .../src/views/container/image/push/index.vue  |   1 +
 .../src/views/container/image/save/index.vue  |   1 +
 .../src/views/container/image/tag/index.vue   |   1 +
 .../views/container/network/create/index.vue  |   1 +
 .../views/container/repo/operator/index.vue   |   1 +
 .../src/views/container/setting/index.vue     | 100 ++++++++----------
 .../container/template/operator/index.vue     |   1 +
 .../views/container/volume/create/index.vue   |   1 +
 frontend/src/views/cronjob/index.vue          |   1 +
 frontend/src/views/cronjob/operate/index.vue  |   1 +
 .../src/views/database/mysql/backup/index.vue |   1 +
 .../src/views/database/mysql/create/index.vue |   1 +
 .../src/views/database/mysql/upload/index.vue |   1 +
 frontend/src/views/home/index.vue             |   5 +-
 frontend/src/views/home/status/index.vue      |  82 +++++---------
 frontend/src/views/host/monitor/index.vue     |   1 +
 .../src/views/host/terminal/command/index.vue |   1 +
 .../host/terminal/terminal/host-create.vue    |  17 +--
 frontend/src/views/setting/about/index.vue    |   1 +
 .../setting/backup-account/operate/index.vue  |   1 +
 .../views/setting/snapshot/status/index.vue   |   1 +
 24 files changed, 104 insertions(+), 120 deletions(-)

diff --git a/frontend/src/views/container/compose/create/index.vue b/frontend/src/views/container/compose/create/index.vue
index 202377d51..4187d384f 100644
--- a/frontend/src/views/container/compose/create/index.vue
+++ b/frontend/src/views/container/compose/create/index.vue
@@ -78,6 +78,7 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { listComposeTemplate, upCompose } from '@/api/modules/container';
 
 const extensions = [javascript(), oneDark];
diff --git a/frontend/src/views/container/container/create/index.vue b/frontend/src/views/container/container/create/index.vue
index 99cee5f3b..334d145e7 100644
--- a/frontend/src/views/container/container/create/index.vue
+++ b/frontend/src/views/container/container/create/index.vue
@@ -205,6 +205,7 @@ import { reactive, ref } from 'vue';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { listImage, listVolume, createContainer } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 
diff --git a/frontend/src/views/container/image/pull/index.vue b/frontend/src/views/container/image/pull/index.vue
index 1e5ec947e..809da3e1f 100644
--- a/frontend/src/views/container/image/pull/index.vue
+++ b/frontend/src/views/container/image/pull/index.vue
@@ -74,6 +74,7 @@ import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { LoadFile } from '@/api/modules/files';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const drawerVisiable = ref(false);
 const form = reactive({
diff --git a/frontend/src/views/container/image/push/index.vue b/frontend/src/views/container/image/push/index.vue
index 99978628c..49756add3 100644
--- a/frontend/src/views/container/image/push/index.vue
+++ b/frontend/src/views/container/image/push/index.vue
@@ -77,6 +77,7 @@ import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { LoadFile } from '@/api/modules/files';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const drawerVisiable = ref(false);
 const form = reactive({
diff --git a/frontend/src/views/container/image/save/index.vue b/frontend/src/views/container/image/save/index.vue
index 93c4e66e6..13e18fac7 100644
--- a/frontend/src/views/container/image/save/index.vue
+++ b/frontend/src/views/container/image/save/index.vue
@@ -54,6 +54,7 @@ import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { imageSave } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/container/image/tag/index.vue b/frontend/src/views/container/image/tag/index.vue
index 923672fa8..a1fcbf52a 100644
--- a/frontend/src/views/container/image/tag/index.vue
+++ b/frontend/src/views/container/image/tag/index.vue
@@ -48,6 +48,7 @@ import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { imageTag } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/container/network/create/index.vue b/frontend/src/views/container/network/create/index.vue
index 50b6ebb83..101ce476c 100644
--- a/frontend/src/views/container/network/create/index.vue
+++ b/frontend/src/views/container/network/create/index.vue
@@ -64,6 +64,7 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { createNetwork } from '@/api/modules/container';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/container/repo/operator/index.vue b/frontend/src/views/container/repo/operator/index.vue
index d18ee7dce..49497f1c2 100644
--- a/frontend/src/views/container/repo/operator/index.vue
+++ b/frontend/src/views/container/repo/operator/index.vue
@@ -79,6 +79,7 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { Container } from '@/api/interface/container';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { createImageRepo, updateImageRepo } from '@/api/modules/container';
 
 const loading = ref(false);
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index e56c1c548..2e80c5374 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -1,55 +1,41 @@
 <template>
     <div>
-        <div class="app-content" style="margin-top: 30px">
-            <el-card class="app-card">
-                <el-row :gutter="20">
-                    <el-col :lg="3" :xl="2">
-                        <div>
-                            <el-tag effect="dark" type="success">Docker</el-tag>
-                        </div>
-                    </el-col>
-                    <el-col :lg="3" :xl="2">
-                        <div>
-                            {{ $t('app.version') }}:
-                            <el-tag type="info">{{ form.version }}</el-tag>
-                        </div>
-                    </el-col>
-                    <el-col :lg="3" :xl="2">
-                        <div>
-                            {{ $t('commons.table.status') }}:
-                            <el-tag v-if="form.status === 'Running'" type="success">
-                                {{ $t('commons.status.running') }}
-                            </el-tag>
-                            <el-tag v-if="form.status === 'Stopped'" type="info">
-                                {{ $t('commons.status.stopped') }}
-                            </el-tag>
-                        </div>
-                    </el-col>
-                    <el-col :lg="4" :xl="6">
-                        <div v-if="form.status === 'Running'">
-                            <el-button type="primary" @click="onOperator('stop')" link style="margin-left: 20px">
-                                {{ $t('container.stop') }}
-                            </el-button>
-                            <el-divider direction="vertical" />
-                            <el-button type="primary" @click="onOperator('restart')" link>
-                                {{ $t('container.restart') }}
-                            </el-button>
-                        </div>
-                        <div v-if="form.status === 'Stopped'">
-                            <el-button type="primary" @click="onOperator('start')" link style="margin-left: 20px">
-                                {{ $t('container.start') }}
-                            </el-button>
-                            <el-divider direction="vertical" />
-                            <el-button type="primary" @click="onOperator('restart')" link>
-                                {{ $t('container.restart') }}
-                            </el-button>
-                        </div>
-                    </el-col>
-                </el-row>
+        <div class="a-card" style="margin-top: 20px">
+            <el-card>
+                <div>
+                    <el-tag style="float: left" effect="dark" type="success">Docker</el-tag>
+                    <el-tag round class="status-content" v-if="form.status === 'Running'" type="success">
+                        {{ $t('commons.status.running') }}
+                    </el-tag>
+                    <el-tag round class="status-content" v-if="form.status === 'Stopped'" type="info">
+                        {{ $t('commons.status.stopped') }}
+                    </el-tag>
+                    <el-tag class="status-content" type="info">{{ $t('app.version') }}: {{ form.version }}</el-tag>
+
+                    <span v-if="form.status === 'Running'" class="buttons">
+                        <el-button type="primary" @click="onOperator('stop')" link>
+                            {{ $t('container.stop') }}
+                        </el-button>
+                        <el-divider direction="vertical" />
+                        <el-button type="primary" @click="onOperator('restart')" link>
+                            {{ $t('container.restart') }}
+                        </el-button>
+                    </span>
+
+                    <span v-if="form.status === 'Stopped'" class="buttons">
+                        <el-button type="primary" @click="onOperator('start')" link>
+                            {{ $t('container.start') }}
+                        </el-button>
+                        <el-divider direction="vertical" />
+                        <el-button type="primary" @click="onOperator('restart')" link>
+                            {{ $t('container.restart') }}
+                        </el-button>
+                    </span>
+                </div>
             </el-card>
         </div>
 
-        <LayoutContent v-loading="loading" style="margin-top: 30px" :title="$t('container.setting')" :divider="true">
+        <LayoutContent v-loading="loading" style="margin-top: 20px" :title="$t('container.setting')" :divider="true">
             <template #main>
                 <el-radio-group v-model="confShowType" @change="changeMode">
                     <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
@@ -262,16 +248,20 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
-.app-card {
-    font-size: 14px;
-    height: 60px;
+<style lang="scss" scoped>
+.a-card {
+    font-size: 17px;
+    .el-card {
+        --el-card-padding: 12px;
+        .buttons {
+            margin-left: 100px;
+        }
+    }
 }
-
-.app-content {
-    height: 50px;
+.status-content {
+    float: left;
+    margin-left: 50px;
 }
-
 body {
     margin: 0;
 }
diff --git a/frontend/src/views/container/template/operator/index.vue b/frontend/src/views/container/template/operator/index.vue
index ce9c9c1d0..01e61cd71 100644
--- a/frontend/src/views/container/template/operator/index.vue
+++ b/frontend/src/views/container/template/operator/index.vue
@@ -63,6 +63,7 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { Container } from '@/api/interface/container';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { createComposeTemplate, updateComposeTemplate } from '@/api/modules/container';
 
 const loading = ref(false);
diff --git a/frontend/src/views/container/volume/create/index.vue b/frontend/src/views/container/volume/create/index.vue
index 35fed29ae..a62842f8d 100644
--- a/frontend/src/views/container/volume/create/index.vue
+++ b/frontend/src/views/container/volume/create/index.vue
@@ -59,6 +59,7 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { createVolume } from '@/api/modules/container';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/cronjob/index.vue b/frontend/src/views/cronjob/index.vue
index 16d772c30..07675d7a2 100644
--- a/frontend/src/views/cronjob/index.vue
+++ b/frontend/src/views/cronjob/index.vue
@@ -103,6 +103,7 @@ import RecordDialog from '@/views/cronjob/record/index.vue';
 import LayoutContent from '@/layout/layout-content.vue';
 import { loadZero } from '@/utils/util';
 import { onMounted, reactive, ref } from 'vue';
+import RouterButton from '@/components/router-button/index.vue';
 import { deleteCronjob, getCronjobPage, handleOnce, updateStatus } from '@/api/modules/cronjob';
 import { loadBackupName } from '@/views/setting/helper';
 import i18n from '@/lang';
diff --git a/frontend/src/views/cronjob/operate/index.vue b/frontend/src/views/cronjob/operate/index.vue
index acf0b0cde..f29f2f4d7 100644
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -170,6 +170,7 @@ import { addCronjob, editCronjob } from '@/api/modules/cronjob';
 import { loadDBNames } from '@/api/modules/database';
 import { CheckAppInstalled } from '@/api/modules/app';
 import { GetWebsiteOptions } from '@/api/modules/website';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface DialogProps {
     title: string;
diff --git a/frontend/src/views/database/mysql/backup/index.vue b/frontend/src/views/database/mysql/backup/index.vue
index a8cf55ecd..30646c498 100644
--- a/frontend/src/views/database/mysql/backup/index.vue
+++ b/frontend/src/views/database/mysql/backup/index.vue
@@ -37,6 +37,7 @@ import { useDeleteData } from '@/hooks/use-delete-data';
 import { backup, recover } from '@/api/modules/database';
 import i18n from '@/lang';
 import { ElMessage } from 'element-plus';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { deleteBackupRecord, downloadBackupRecord, searchBackupRecords } from '@/api/modules/backup';
 import { Backup } from '@/api/interface/backup';
 
diff --git a/frontend/src/views/database/mysql/create/index.vue b/frontend/src/views/database/mysql/create/index.vue
index c78ed3992..cbc4e5c0f 100644
--- a/frontend/src/views/database/mysql/create/index.vue
+++ b/frontend/src/views/database/mysql/create/index.vue
@@ -58,6 +58,7 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { addMysqlDB } from '@/api/modules/database';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const createVisiable = ref(false);
 const form = reactive({
diff --git a/frontend/src/views/database/mysql/upload/index.vue b/frontend/src/views/database/mysql/upload/index.vue
index d5882e090..beaade44e 100644
--- a/frontend/src/views/database/mysql/upload/index.vue
+++ b/frontend/src/views/database/mysql/upload/index.vue
@@ -69,6 +69,7 @@ import { recoverByUpload } from '@/api/modules/database';
 import i18n from '@/lang';
 import { ElMessage, UploadFile, UploadFiles, UploadInstance, UploadProps } from 'element-plus';
 import { File } from '@/api/interface/file';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { BatchDeleteFile, GetFilesList, UploadFileData } from '@/api/modules/files';
 import { loadBaseDir } from '@/api/modules/setting';
 
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index e08398f7c..4ccab56bc 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -160,6 +160,7 @@ import i18n from '@/lang';
 import { Dashboard } from '@/api/interface/dashboard';
 import { dateFormatForSecond, computeSize } from '@/utils/util';
 import { useRouter } from 'vue-router';
+import RouterButton from '@/components/router-button/index.vue';
 import { loadBaseInfo, loadCurrentInfo } from '@/api/modules/dashboard';
 import { getIOOptions, getNetworkOptions } from '@/api/modules/monitor';
 const router = useRouter();
@@ -422,7 +423,7 @@ const loadData = async () => {
             [i18n.global.t('monitor.read'), i18n.global.t('monitor.write')],
             timeIODatas.value,
             [ioReadYDatas, ioWriteYDatas],
-            i18n.global.t('monitor.network'),
+            i18n.global.t('home.io'),
             'MB',
         );
     } else {
@@ -451,7 +452,7 @@ const loadData = async () => {
             [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
             timeNetDatas.value,
             [netTxYDatas, netRxYDatas],
-            i18n.global.t('monitor.network'),
+            i18n.global.t('home.network'),
             'KB/s',
         );
     }
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index 22b77f5a9..8be98a9f1 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -15,7 +15,7 @@
                     CPU-{{ index }}: {{ formatNumber(item) }}%
                 </el-tag>
                 <template #reference>
-                    <div id="cpu" style="width: 100%; height: 200px"></div>
+                    <div id="cpu" style="width: 100%; height: 160px"></div>
                 </template>
             </el-popover>
             <span class="input-help" style="margin-top: -10px">
@@ -23,7 +23,7 @@
             </span>
         </el-col>
         <el-col :span="6" align="center">
-            <div id="memory" style="width: 100%; height: 200px"></div>
+            <div id="memory" style="width: 100%; height: 160px"></div>
             <span class="input-help">
                 ( {{ formatNumber(currentInfo.memoryUsed / 1024 / 1024) }} /
                 {{ formatNumber(currentInfo.memoryTotal / 1024 / 1024) }} ) MB
@@ -41,7 +41,7 @@
                     {{ $t('home.loadAverage', [15]) }}: {{ formatNumber(currentInfo.load15) }}
                 </el-tag>
                 <template #reference>
-                    <div id="load" style="width: 100%; height: 200px"></div>
+                    <div id="load" style="width: 100%; height: 160px"></div>
                 </template>
             </el-popover>
             <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
@@ -79,7 +79,7 @@
                     </el-col>
                 </el-row>
                 <template #reference>
-                    <div id="disk" style="width: 100%; height: 200px"></div>
+                    <div id="disk" style="width: 100%; height: 160px"></div>
                 </template>
             </el-popover>
             <span class="input-help">
@@ -181,70 +181,42 @@ const freshChart = (chartName: string, Title: string, Data: number) => {
         title: [
             {
                 text: Data + '%',
-                x: 'center',
-                top: '55%',
-                textStyle: { fontSize: 16, fontWeight: '100' },
-            },
-            {
-                text: Title,
-                x: 'center',
-                y: 'center',
                 textStyle: {
-                    fontSize: '20',
-                    fontFamily: 'DINAlternate-Bold, DINAlternate',
-                    foontWeight: '600',
+                    color: '#0f0f0f',
+                    lineHeight: 30,
+                    fontSize: 24,
+                    fontWeight: '500',
                 },
+                left: '50%',
+                top: '32%',
+                subtext: Title,
+                subtextStyle: {
+                    color: '#000000',
+                    fontSize: 18,
+                },
+                textAlign: 'center',
             },
         ],
-        backgroundColor: '#FFFFFF',
-        polar: { radius: ['42%', '52%'], center: ['50%', '50%'] },
-        angleAxis: { max: 100, show: false },
-        radiusAxis: {
-            type: 'category',
-            show: true,
-            axisLabel: { show: false },
-            axisLine: { show: false },
-            axisTick: { show: false },
-        },
         series: [
             {
-                name: '',
-                type: 'bar',
-                roundCap: true,
-                barWidth: 30,
-                showBackground: true,
-                backgroundStyle: { color: 'rgba(66, 66, 66, .3)' },
-                data: [Data],
-                coordinateSystem: 'polar',
-                itemStyle: {
+                name: Title,
+                type: 'pie',
+                radius: ['75%', '96%'],
+                center: ['50%', '50%'],
+                color: ['#08a3f0', '#efefef'],
+                label: {
+                    position: 'center',
                     normal: {
-                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                            {
-                                offset: 0,
-                                color: '#16CEB9',
-                            },
-                            { offset: 1, color: '#6648FF' },
-                        ]),
+                        show: false,
                     },
                 },
+                data: [{ value: Data }, { value: 100 - Data }],
             },
             {
-                name: '',
                 type: 'pie',
-                startAngle: 80,
-                radius: ['56%'],
+                radius: ['0%', '65%'],
                 center: ['50%', '50%'],
-                itemStyle: { color: 'rgba(66, 66, 66, .1)', borderWidth: 1, borderColor: '#5269EE' },
-                data: [100],
-            },
-            {
-                name: '',
-                type: 'pie',
-                startAngle: 80,
-                radius: ['38%'],
-                center: ['50%', '50%'],
-                itemStyle: { color: 'rgba(66, 66, 66, .1)', borderWidth: 1, borderColor: '#5269EE' },
-                data: [100],
+                hoverAnimation: false,
             },
         ],
     };
diff --git a/frontend/src/views/host/monitor/index.vue b/frontend/src/views/host/monitor/index.vue
index a56722611..ae4bb96e9 100644
--- a/frontend/src/views/host/monitor/index.vue
+++ b/frontend/src/views/host/monitor/index.vue
@@ -124,6 +124,7 @@ import { loadMonitor, getNetworkOptions } from '@/api/modules/monitor';
 import { Monitor } from '@/api/interface/monitor';
 import { dateFormatWithoutYear } from '@/utils/util';
 import i18n from '@/lang';
+import RouterButton from '@/components/router-button/index.vue';
 
 const zoomStart = ref();
 const monitorBase = ref();
diff --git a/frontend/src/views/host/terminal/command/index.vue b/frontend/src/views/host/terminal/command/index.vue
index 8f8f918a4..f8e3e473f 100644
--- a/frontend/src/views/host/terminal/command/index.vue
+++ b/frontend/src/views/host/terminal/command/index.vue
@@ -76,6 +76,7 @@ import type { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElMessage } from 'element-plus';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref();
 const data = ref();
diff --git a/frontend/src/views/host/terminal/terminal/host-create.vue b/frontend/src/views/host/terminal/terminal/host-create.vue
index 2674d4ee8..75abf1240 100644
--- a/frontend/src/views/host/terminal/terminal/host-create.vue
+++ b/frontend/src/views/host/terminal/terminal/host-create.vue
@@ -4,17 +4,17 @@
             <template #header>
                 <DrawerHeader :header="$t('terminal.addHost')" :back="handleClose" />
             </template>
-            <el-alert
-                v-if="isLocal"
-                style="margin-bottom: 20px"
-                center
-                :title="$t('terminal.connLocalErr')"
-                :closable="false"
-                type="warning"
-            />
             <el-form ref="hostRef" label-width="100px" label-position="top" :model="hostInfo" :rules="rules">
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
+                        <el-alert
+                            v-if="isLocal"
+                            style="margin-bottom: 20px"
+                            center
+                            :title="$t('terminal.connLocalErr')"
+                            :closable="false"
+                            type="warning"
+                        />
                         <el-form-item :label="$t('terminal.ip')" prop="addr">
                             <el-input v-if="!isLocal" clearable v-model="hostInfo.addr" />
                             <div style="margin-left: 12px">
@@ -72,6 +72,7 @@ import { ElForm, ElMessage } from 'element-plus';
 import { Host } from '@/api/interface/host';
 import { Rules } from '@/global/form-rules';
 import { addHost, testByInfo } from '@/api/modules/host';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import i18n from '@/lang';
 import { reactive, ref } from 'vue';
 
diff --git a/frontend/src/views/setting/about/index.vue b/frontend/src/views/setting/about/index.vue
index 51ee6696a..a09b6b582 100644
--- a/frontend/src/views/setting/about/index.vue
+++ b/frontend/src/views/setting/about/index.vue
@@ -65,6 +65,7 @@ import MdEditor from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const version = ref();
 const upgradeInfo = ref();
diff --git a/frontend/src/views/setting/backup-account/operate/index.vue b/frontend/src/views/setting/backup-account/operate/index.vue
index 5b991d616..fe9ea7ae7 100644
--- a/frontend/src/views/setting/backup-account/operate/index.vue
+++ b/frontend/src/views/setting/backup-account/operate/index.vue
@@ -136,6 +136,7 @@ import FileList from '@/components/file-list/index.vue';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup, listBucket } from '@/api/modules/backup';
 import { deepCopy } from '@/utils/util';
 
diff --git a/frontend/src/views/setting/snapshot/status/index.vue b/frontend/src/views/setting/snapshot/status/index.vue
index a7723e889..4f41e5399 100644
--- a/frontend/src/views/setting/snapshot/status/index.vue
+++ b/frontend/src/views/setting/snapshot/status/index.vue
@@ -181,6 +181,7 @@ import { ref } from 'vue';
 import { Setting } from '@/api/interface/setting';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { snapshotRecover, snapshotRollback } from '@/api/modules/setting';
 
 const drawerVisiable = ref(false);