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

2025-10-25 06:56:32 +08:00 · 2023-02-02 17:03:16 +08:00 · 2023-02-02 17:03:16 +08:00 · b13efc5195
commit b13efc5195
parent 1946eb2313
24 changed files with 104 additions and 120 deletions
--- 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];
--- 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';

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

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

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

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

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

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

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

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

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