fix: 解决未添加引用导致导航栏失效的问题

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];

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';
 

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({

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({

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);
 

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);
 

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);
 

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);

frontend/src/views/container/setting/index.vue

@@ -1,55 +1,41 @@
 <template>
     <div>
-        <div class="app-content" style="margin-top: 30px">
+        <div class="a-card" style="margin-top: 20px">
-            <el-card class="app-card">
+            <el-card>
-                <el-row :gutter="20">
+                <div>
-                    <el-col :lg="3" :xl="2">
+                    <el-tag style="float: left" effect="dark" type="success">Docker</el-tag>
-                        <div>
+                    <el-tag round class="status-content" v-if="form.status === 'Running'" type="success">
-                            <el-tag effect="dark" type="success">Docker</el-tag>
+                        {{ $t('commons.status.running') }}
-                        </div>
+                    </el-tag>
-                    </el-col>
+                    <el-tag round class="status-content" v-if="form.status === 'Stopped'" type="info">
-                    <el-col :lg="3" :xl="2">
+                        {{ $t('commons.status.stopped') }}
-                        <div>
+                    </el-tag>
-                            {{ $t('app.version') }}:
+                    <el-tag class="status-content" type="info">{{ $t('app.version') }}: {{ form.version }}</el-tag>
-                            <el-tag type="info">{{ form.version }}</el-tag>
+
-                        </div>
+                    <span v-if="form.status === 'Running'" class="buttons">
-                    </el-col>
+                        <el-button type="primary" @click="onOperator('stop')" link>
-                    <el-col :lg="3" :xl="2">
+                            {{ $t('container.stop') }}
-                        <div>
+                        </el-button>
-                            {{ $t('commons.table.status') }}:
+                        <el-divider direction="vertical" />
-                            <el-tag v-if="form.status === 'Running'" type="success">
+                        <el-button type="primary" @click="onOperator('restart')" link>
-                                {{ $t('commons.status.running') }}
+                            {{ $t('container.restart') }}
-                            </el-tag>
+                        </el-button>
-                            <el-tag v-if="form.status === 'Stopped'" type="info">
+                    </span>
-                                {{ $t('commons.status.stopped') }}
+
-                            </el-tag>
+                    <span v-if="form.status === 'Stopped'" class="buttons">
-                        </div>
+                        <el-button type="primary" @click="onOperator('start')" link>
-                    </el-col>
+                            {{ $t('container.start') }}
-                    <el-col :lg="4" :xl="6">
+                        </el-button>
-                        <div v-if="form.status === 'Running'">
+                        <el-divider direction="vertical" />
-                            <el-button type="primary" @click="onOperator('stop')" link style="margin-left: 20px">
+                        <el-button type="primary" @click="onOperator('restart')" link>
-                                {{ $t('container.stop') }}
+                            {{ $t('container.restart') }}
-                            </el-button>
+                        </el-button>
-                            <el-divider direction="vertical" />
+                    </span>
-                            <el-button type="primary" @click="onOperator('restart')" link>
+                </div>
-                                {{ $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>
             </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">
+<style lang="scss" scoped>
-.app-card {
+.a-card {
-    font-size: 14px;
+    font-size: 17px;
-    height: 60px;
+    .el-card {
+        --el-card-padding: 12px;
+        .buttons {
+            margin-left: 100px;
+        }
+    }
 }
-
+.status-content {
-.app-content {
+    float: left;
-    height: 50px;
+    margin-left: 50px;
 }
-
 body {
     margin: 0;
 }

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);

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);
 

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';

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;

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';
 

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({

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';
 

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',
         );
     }

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',
+                    color: '#0f0f0f',
-                    fontFamily: 'DINAlternate-Bold, DINAlternate',
+                    lineHeight: 30,
-                    foontWeight: '600',
+                    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: '',
+                name: Title,
-                type: 'bar',
+                type: 'pie',
-                roundCap: true,
+                radius: ['75%', '96%'],
-                barWidth: 30,
+                center: ['50%', '50%'],
-                showBackground: true,
+                color: ['#08a3f0', '#efefef'],
-                backgroundStyle: { color: 'rgba(66, 66, 66, .3)' },
+                label: {
-                data: [Data],
+                    position: 'center',
-                coordinateSystem: 'polar',
-                itemStyle: {
                     normal: {
-                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                        show: false,
-                            {
-                                offset: 0,
-                                color: '#16CEB9',
-                            },
-                            { offset: 1, color: '#6648FF' },
-                        ]),
                     },
                 },
+                data: [{ value: Data }, { value: 100 - Data }],
             },
             {
-                name: '',
                 type: 'pie',
-                startAngle: 80,
+                radius: ['0%', '65%'],
-                radius: ['56%'],
                 center: ['50%', '50%'],
-                itemStyle: { color: 'rgba(66, 66, 66, .1)', borderWidth: 1, borderColor: '#5269EE' },
+                hoverAnimation: false,
-                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],
             },
         ],
     };

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();

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();

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';
 

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();

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';
 

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);