mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-11-29 05:49:07 +08:00
fix: 导航按钮样式改为全局
This commit is contained in:
ssongliu
parent
8674cf0b53
commit
183555e4c6
28
frontend/src/components/card-with-header/index.vue
Normal file
28
frontend/src/components/card-with-header/index.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-divider direction="vertical" />
|
||||
<span style="font-size: 16px; font-weight: 700">{{ header }}</span>
|
||||
<div style="margin-top: 20px"><slot name="body" /></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'CardWithHeader' });
|
||||
defineProps({
|
||||
header: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-divider--vertical {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 2.5em;
|
||||
margin: 0px 8px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
border-left: 5px #0054e1 var(--el-border-style);
|
||||
}
|
||||
</style>
|
||||
@ -191,3 +191,37 @@
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.topRouterCard {
|
||||
.el-card__body {
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 0px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
}
|
||||
}
|
||||
.topRouterButton {
|
||||
.el-radio-button__inner {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background: var(--el-button-bg-color, var(--el-fill-color-blank));
|
||||
border: 0;
|
||||
font-weight: 350;
|
||||
border-left: 0;
|
||||
color: var(--el-button-text-color, var(--el-text-color-regular));
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--el-transition-all);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 8px 15px;
|
||||
font-size: var(--el-font-size-base);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="topCard">
|
||||
<el-card class="topRouterCard">
|
||||
<el-radio-group v-model="activeName" @change="handleChange">
|
||||
<el-radio-button class="topButton" size="large" label="all">
|
||||
<el-radio-button class="topRouterButton" size="default" label="all">
|
||||
{{ $t('app.all') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="installed">
|
||||
<el-radio-button class="topRouterButton" size="default" label="installed">
|
||||
{{ $t('app.installed') }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
@ -53,35 +53,3 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.topCard {
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 0px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
}
|
||||
.topButton .el-radio-button__inner {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background: var(--el-button-bg-color, var(--el-fill-color-blank));
|
||||
border: 0;
|
||||
font-weight: 350;
|
||||
border-left: 0;
|
||||
color: var(--el-button-text-color, var(--el-text-color-regular));
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--el-transition-all);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 8px 15px;
|
||||
font-size: var(--el-font-size-base);
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="topCard">
|
||||
<el-card class="topRouterCard">
|
||||
<el-radio-group :model-value="props.activeName" @change="handleChange">
|
||||
<el-radio-button class="topButton" size="large" label="container">
|
||||
<el-radio-button class="topRouterButton" size="default" label="container">
|
||||
{{ $t('container.container') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="compose">
|
||||
<el-radio-button class="topRouterButton" size="default" label="compose">
|
||||
{{ $t('container.compose') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="image">
|
||||
<el-radio-button class="topRouterButton" size="default" label="image">
|
||||
{{ $t('container.image') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="network">
|
||||
<el-radio-button class="topRouterButton" size="default" label="network">
|
||||
{{ $t('container.network') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="volume">
|
||||
<el-radio-button class="topRouterButton" size="default" label="volume">
|
||||
{{ $t('container.volume') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="repo">
|
||||
<el-radio-button class="topRouterButton" size="default" label="repo">
|
||||
{{ $t('container.repo') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="template">
|
||||
<el-radio-button class="topRouterButton" size="default" label="template">
|
||||
{{ $t('container.composeTemplate') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="setting">
|
||||
<el-radio-button class="topRouterButton" size="default" label="setting">
|
||||
{{ $t('container.setting') }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
@ -75,35 +75,3 @@ const handleChange = (val: string) => {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.topCard {
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 0px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
}
|
||||
.topButton .el-radio-button__inner {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background: var(--el-button-bg-color, var(--el-fill-color-blank));
|
||||
border: 0;
|
||||
font-weight: 350;
|
||||
border-left: 0;
|
||||
color: var(--el-button-text-color, var(--el-text-color-regular));
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--el-transition-all);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 8px 15px;
|
||||
font-size: var(--el-font-size-base);
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="topCard">
|
||||
<el-card class="topRouterCard">
|
||||
<el-radio-group :model-value="props.activeName" @change="handleChange">
|
||||
<el-radio-button class="topButton" size="large" label="mysql">Mysql</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="redis">Redis</el-radio-button>
|
||||
<el-radio-button class="topRouterButton" size="default" label="mysql">Mysql</el-radio-button>
|
||||
<el-radio-button class="topRouterButton" size="default" label="redis">Redis</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-card>
|
||||
</div>
|
||||
@ -34,35 +34,3 @@ const handleChange = (val: string) => {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.topCard {
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 0px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
}
|
||||
.topButton .el-radio-button__inner {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background: var(--el-button-bg-color, var(--el-fill-color-blank));
|
||||
border: 0;
|
||||
font-weight: 350;
|
||||
border-left: 0;
|
||||
color: var(--el-button-text-color, var(--el-text-color-regular));
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--el-transition-all);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 8px 15px;
|
||||
font-size: var(--el-font-size-base);
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,126 +1,131 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="el-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('home.app') }}</span>
|
||||
<el-row style="margin-top: 30px">
|
||||
<el-col :span="4" align="right">
|
||||
<img style="width: 40px; height: 40px" src="../images/halo.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="19">
|
||||
<span style="font-size: 20px">Halo</span>
|
||||
<el-button
|
||||
round
|
||||
plain
|
||||
type="primary"
|
||||
@click="goInstall()"
|
||||
style="float: right; margin-top: 15px; margin-right: 10px"
|
||||
>
|
||||
{{ $t('app.install') }}
|
||||
</el-button>
|
||||
<div>
|
||||
<span style="font-size: 12px">{{ $t('home.haloInfo') }}</span>
|
||||
<el-divider />
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div @click="goInstall()" style="cursor: pointer">
|
||||
<el-card style="height: 110px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<img style="width: 40px; height: 40px" src="../images/halo.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="2"><br /></el-col>
|
||||
<el-col :span="18">
|
||||
<span style="font-size: 20px; color: #214bc8">Halo</span>
|
||||
<div>
|
||||
<span class="input-help">{{ $t('home.haloInfo') }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div @click="goInstall()" style="cursor: pointer">
|
||||
<el-card style="height: 110px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<img style="width: 40px; height: 40px" src="../images/de.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="2"><br /></el-col>
|
||||
<el-col :span="18">
|
||||
<span style="font-size: 20px; color: #0070d6">Dataease</span>
|
||||
<div>
|
||||
<span class="input-help">{{ $t('home.deInfo') }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="12">
|
||||
<div @click="goInstall()" style="cursor: pointer">
|
||||
<el-card style="height: 110px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<img style="width: 40px; height: 40px" src="../images/js.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="2"><br /></el-col>
|
||||
<el-col :span="18">
|
||||
<span style="font-size: 16px; color: #008d75">JumpServer</span>
|
||||
<div>
|
||||
<span class="input-help">{{ $t('home.jsInfo') }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div @click="goInstall()" style="cursor: pointer">
|
||||
<el-card style="height: 110px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<img style="width: 40px; height: 40px" src="../images/ms.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="2"><br /></el-col>
|
||||
<el-col :span="18">
|
||||
<span style="font-size: 16px; color: #723279">MeterSphere</span>
|
||||
<div>
|
||||
<span class="input-help">{{ $t('home.msInfo') }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="12">
|
||||
<div @click="goInstall()" style="cursor: pointer">
|
||||
<el-card style="height: 110px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<img style="width: 40px; height: 40px" src="../images/ko.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="2"><br /></el-col>
|
||||
<el-col :span="18">
|
||||
<span style="font-size: 16px; color: #fc3535">KubeOperator</span>
|
||||
<div>
|
||||
<span class="input-help">{{ $t('home.koInfo') }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div @click="goInstall()" style="cursor: pointer">
|
||||
<el-card style="height: 110px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<img style="width: 40px; height: 40px" src="../images/kubepi.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="2"><br /></el-col>
|
||||
<el-col :span="18">
|
||||
<span style="font-size: 16px; color: #fc3535">KubePi</span>
|
||||
<div>
|
||||
<span class="input-help">{{ $t('home.kubepiInfo') }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-col :span="4" align="right">
|
||||
<img style="width: 40px; height: 40px" src="../images/de.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="19">
|
||||
<span style="font-size: 20px">Dataease</span>
|
||||
<el-button
|
||||
round
|
||||
plain
|
||||
@click="goInstall()"
|
||||
type="primary"
|
||||
style="float: right; margin-top: 15px; margin-right: 10px"
|
||||
>
|
||||
{{ $t('app.install') }}
|
||||
</el-button>
|
||||
<div>
|
||||
<span style="font-size: 12px">{{ $t('home.deInfo') }}</span>
|
||||
<el-divider />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-col :span="4" align="right">
|
||||
<img style="width: 40px; height: 40px" src="../images/js.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="19">
|
||||
<span style="font-size: 20px">JumpServer</span>
|
||||
<el-button
|
||||
round
|
||||
plain
|
||||
@click="goInstall()"
|
||||
type="primary"
|
||||
style="float: right; margin-top: 15px; margin-right: 10px"
|
||||
>
|
||||
{{ $t('app.install') }}
|
||||
</el-button>
|
||||
<div>
|
||||
<span style="font-size: 12px">{{ $t('home.jsInfo') }}</span>
|
||||
<el-divider />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-col :span="4" align="right">
|
||||
<img style="width: 40px; height: 40px" src="../images/ms.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="19">
|
||||
<span style="font-size: 20px">MeterSphere</span>
|
||||
<el-button
|
||||
round
|
||||
plain
|
||||
@click="goInstall()"
|
||||
type="primary"
|
||||
style="float: right; margin-top: 15px; margin-right: 10px"
|
||||
>
|
||||
{{ $t('app.install') }}
|
||||
</el-button>
|
||||
<div>
|
||||
<span style="font-size: 12px">{{ $t('home.msInfo') }}</span>
|
||||
<el-divider />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-col :span="4" align="right">
|
||||
<img style="width: 40px; height: 40px" src="../images/ko.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="19">
|
||||
<span style="font-size: 20px">KubeOperator</span>
|
||||
<el-button round plain type="primary" style="float: right; margin-top: 15px; margin-right: 10px">
|
||||
{{ $t('app.install') }}
|
||||
</el-button>
|
||||
<div>
|
||||
<span style="font-size: 12px">{{ $t('home.koInfo') }}</span>
|
||||
<el-divider />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-col :span="4" align="right">
|
||||
<img style="width: 40px; height: 40px" src="../images/kubepi.jpg" alt="" />
|
||||
</el-col>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="19">
|
||||
<span style="font-size: 20px">KubePi</span>
|
||||
<el-button
|
||||
round
|
||||
plain
|
||||
@click="goInstall()"
|
||||
type="primary"
|
||||
style="float: right; margin-top: 15px; margin-right: 10px"
|
||||
>
|
||||
{{ $t('app.install') }}
|
||||
</el-button>
|
||||
<div>
|
||||
<span style="font-size: 12px">{{ $t('home.kubepiInfo') }}</span>
|
||||
<el-divider />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -156,3 +161,13 @@ defineExpose({
|
||||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-divider--horizontal {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 7px 0;
|
||||
border-top: 1px var(--el-border-color) var(--el-border-style);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,174 +1,149 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="20" class="row-box">
|
||||
<el-col :span="8">
|
||||
<el-card class="el-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('home.overview') }}</span>
|
||||
</div>
|
||||
<el-card class="topRouterCard">
|
||||
<el-radio-group v-model="active">
|
||||
<el-radio-button class="topRouterButton" size="default" label="home">
|
||||
{{ $t('home.overview') }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-card>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="18">
|
||||
<CardWithHeader :header="$t('home.overview')">
|
||||
<template #body>
|
||||
<el-form label-position="top" label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" align="center">
|
||||
<span style="font-size: 16px">{{ $t('menu.website') }}</span>
|
||||
<div>
|
||||
<el-link style="font-size: 24px" @click="goRouter('/websites')" type="primary">
|
||||
{{ baseInfo?.websiteNumber }}
|
||||
</el-link>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" align="center">
|
||||
<span style="font-size: 16px">{{ $t('menu.database') }}</span>
|
||||
<div>
|
||||
<el-link style="font-size: 24px" @click="goRouter('/databases')" type="primary">
|
||||
{{ baseInfo?.databaseNumber }}
|
||||
</el-link>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" align="center">
|
||||
<span style="font-size: 16px">{{ $t('menu.cronjob') }}</span>
|
||||
<div>
|
||||
<el-link style="font-size: 24px" @click="goRouter('/cronjobs')" type="primary">
|
||||
{{ baseInfo?.cronjobNumber }}
|
||||
</el-link>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" align="center">
|
||||
<span style="font-size: 16px">{{ $t('home.appInstalled') }}</span>
|
||||
<div>
|
||||
<el-link style="font-size: 24px" @click="goRouter('/apps')" type="primary">
|
||||
{{ baseInfo?.appInstalldNumber }}
|
||||
</el-link>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card style="font-size: 12px; height: 80px; border-radius: 10px">
|
||||
<svg-icon style="float: left; margin-left: 5px" iconName="p-website"></svg-icon>
|
||||
<span style="float: left; margin-left: 5px; margin-top: 10px">
|
||||
{{ $t('menu.website') }}
|
||||
</span>
|
||||
<el-link
|
||||
style="float: right; font-size: 24px; margin-right: 5px"
|
||||
@click="goRouter('/websites')"
|
||||
type="primary"
|
||||
>
|
||||
{{ baseInfo?.websiteNumber }}
|
||||
</el-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card style="font-size: 12px; height: 80px; border-radius: 10px">
|
||||
<svg-icon style="float: left; margin-left: 5px" iconName="p-database"></svg-icon>
|
||||
<span style="float: left; margin-left: 5px; margin-top: 10px">
|
||||
{{ $t('menu.database') }}
|
||||
</span>
|
||||
<el-link
|
||||
style="float: right; font-size: 24px; margin-right: 5px"
|
||||
@click="goRouter('/databases')"
|
||||
type="primary"
|
||||
>
|
||||
{{ baseInfo?.databaseNumber }}
|
||||
</el-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-top: 20px; margin-top: 30px">
|
||||
<el-col :span="12">
|
||||
<el-card style="font-size: 12px; height: 80px; border-radius: 10px">
|
||||
<svg-icon style="float: left; margin-left: 5px" iconName="p-plan"></svg-icon>
|
||||
<span style="float: left; margin-left: 5px; margin-top: 10px">
|
||||
{{ $t('menu.cronjob') }}
|
||||
</span>
|
||||
<el-link
|
||||
style="float: right; font-size: 24px; margin-right: 5px"
|
||||
@click="goRouter('/cronjobs')"
|
||||
type="primary"
|
||||
>
|
||||
{{ baseInfo?.cronjobNumber }}
|
||||
</el-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card style="font-size: 12px; height: 80px; border-radius: 10px">
|
||||
<svg-icon style="float: left; margin-left: 5px" iconName="p-appstore"></svg-icon>
|
||||
<span style="float: left; margin-left: 5px; margin-top: 10px">
|
||||
{{ $t('home.appInstalled') }}
|
||||
</span>
|
||||
<el-link
|
||||
style="float: right; font-size: 24px; margin-right: 5px"
|
||||
@click="goRouter('/apps')"
|
||||
type="primary"
|
||||
>
|
||||
{{ baseInfo?.appInstalldNumber }}
|
||||
</el-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="el-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('commons.table.status') }}</span>
|
||||
</div>
|
||||
</CardWithHeader>
|
||||
<CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px">
|
||||
<template #body>
|
||||
<Status ref="statuRef" />
|
||||
</template>
|
||||
<Status ref="statuRef" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="el-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('home.systemInfo') }}</span>
|
||||
</CardWithHeader>
|
||||
<CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px">
|
||||
<template #body>
|
||||
<el-radio-group
|
||||
style="float: right; margin-left: 5px"
|
||||
v-model="chartOption"
|
||||
@change="changeOption"
|
||||
>
|
||||
<el-radio-button label="network">{{ $t('home.network') }}</el-radio-button>
|
||||
<el-radio-button label="io">{{ $t('home.io') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-select
|
||||
v-if="chartOption === 'network'"
|
||||
@change="onLoadBaseInfo(false, 'network')"
|
||||
v-model="searchInfo.netOption"
|
||||
style="float: right"
|
||||
>
|
||||
<el-option v-for="item in netOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="chartOption === 'io'"
|
||||
v-model="searchInfo.ioOption"
|
||||
@change="onLoadBaseInfo(false, 'io')"
|
||||
style="float: right"
|
||||
>
|
||||
<el-option v-for="item in ioOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<div style="margin-top: 20px; margin-left: 8px" v-if="chartOption === 'network'">
|
||||
<el-tag>{{ $t('monitor.up') }}: {{ currentChartInfo.netBytesSent }} KB/s</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('monitor.down') }}: {{ currentChartInfo.netBytesRecv }} KB/s
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.totalSend') }}: {{ computeSize(currentInfo.netBytesSent) }}
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.totalRecv') }}: {{ computeSize(currentInfo.netBytesRecv) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div style="margin-top: 20px" v-if="chartOption === 'io'">
|
||||
<el-tag>{{ $t('monitor.read') }}: {{ currentChartInfo.ioReadBytes }} MB</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('monitor.write') }}: {{ currentChartInfo.ioWriteBytes }} MB
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.rwPerSecond') }}: {{ currentChartInfo.ioCount }} {{ $t('home.time') }}
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.rwPerSecond') }}: {{ currentInfo.ioTime }} ms
|
||||
</el-tag>
|
||||
</div>
|
||||
<div
|
||||
v-if="chartOption === 'io'"
|
||||
id="ioChart"
|
||||
style="margin-top: 20px; width: 100%; height: 320px"
|
||||
></div>
|
||||
<div
|
||||
v-if="chartOption === 'network'"
|
||||
id="networkChart"
|
||||
style="margin-top: 20px; width: 100%; height: 320px"
|
||||
></div>
|
||||
</template>
|
||||
<el-form>
|
||||
<el-form-item :label="$t('home.hostname')">{{ baseInfo.hostname }}</el-form-item>
|
||||
<el-form-item :label="$t('home.platformVersion')">
|
||||
{{ baseInfo.platform }}-{{ baseInfo.platformVersion }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('home.kernelVersion')">
|
||||
{{ baseInfo.kernelVersion }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('home.kernelArch')">{{ baseInfo.kernelArch }}</el-form-item>
|
||||
<el-form-item :label="$t('home.uptime')">{{ currentInfo.timeSinceUptime }}</el-form-item>
|
||||
<el-form-item :label="$t('home.runningTime')">
|
||||
{{ loadUpTime(currentInfo.uptime) }}
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</CardWithHeader>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-top: 20px" class="row-box">
|
||||
<el-col :span="12">
|
||||
<App ref="appRef" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="el-card">
|
||||
<el-radio-group v-model="chartOption" @change="changeOption">
|
||||
<el-radio-button label="network">{{ $t('home.network') }}</el-radio-button>
|
||||
<el-radio-button label="io">{{ $t('home.io') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-select
|
||||
v-if="chartOption === 'network'"
|
||||
@change="onLoadBaseInfo(false, 'network')"
|
||||
v-model="searchInfo.netOption"
|
||||
style="float: right"
|
||||
>
|
||||
<el-option v-for="item in netOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="chartOption === 'io'"
|
||||
v-model="searchInfo.ioOption"
|
||||
@change="onLoadBaseInfo(false, 'io')"
|
||||
style="float: right"
|
||||
>
|
||||
<el-option v-for="item in ioOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<div style="margin-top: 20px" v-if="chartOption === 'network'">
|
||||
<el-tag>{{ $t('monitor.up') }}: {{ currentChartInfo.netBytesSent }} KB/s</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('monitor.down') }}: {{ currentChartInfo.netBytesRecv }} KB/s
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.totalSend') }}: {{ computeSize(currentInfo.netBytesSent) }}
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.totalRecv') }}: {{ computeSize(currentInfo.netBytesRecv) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div style="margin-top: 20px" v-if="chartOption === 'io'">
|
||||
<el-tag>{{ $t('monitor.read') }}: {{ currentChartInfo.ioReadBytes }} MB</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('monitor.write') }}: {{ currentChartInfo.ioWriteBytes }} MB
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.rwPerSecond') }}: {{ currentChartInfo.ioCount }} {{ $t('home.time') }}
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.rwPerSecond') }}: {{ currentInfo.ioTime }} ms
|
||||
</el-tag>
|
||||
</div>
|
||||
<div
|
||||
v-if="chartOption === 'io'"
|
||||
id="ioChart"
|
||||
style="margin-top: 20px; width: 100%; height: 320px"
|
||||
></div>
|
||||
<div
|
||||
v-if="chartOption === 'network'"
|
||||
id="networkChart"
|
||||
style="margin-top: 20px; width: 100%; height: 320px"
|
||||
></div>
|
||||
</el-card>
|
||||
<el-col :span="6">
|
||||
<CardWithHeader :header="$t('home.systemInfo')">
|
||||
<template #body>
|
||||
<el-form style="margin-left: 10px">
|
||||
<el-form-item style="margin-top: 15px" :label="$t('home.hostname')">
|
||||
{{ baseInfo.hostname }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('home.platformVersion')">
|
||||
{{ baseInfo.platform }}-{{ baseInfo.platformVersion }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('home.kernelVersion')">
|
||||
{{ baseInfo.kernelVersion }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('home.kernelArch')">{{ baseInfo.kernelArch }}</el-form-item>
|
||||
<el-form-item :label="$t('home.uptime')">{{ currentInfo.timeSinceUptime }}</el-form-item>
|
||||
<el-form-item :label="$t('home.runningTime')">
|
||||
{{ loadUpTime(currentInfo.uptime) }}
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
|
||||
<CardWithHeader :header="$t('home.app')" style="margin-top: 20px">
|
||||
<template #body>
|
||||
<App ref="appRef" />
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -179,6 +154,7 @@ import { onMounted, onBeforeUnmount, ref, reactive } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import Status from '@/views/home/status/index.vue';
|
||||
import App from '@/views/home/app/index.vue';
|
||||
import CardWithHeader from '@/components/card-with-header/index.vue';
|
||||
import i18n from '@/lang';
|
||||
import { Dashboard } from '@/api/interface/dashboard';
|
||||
import { dateFromatForSecond, computeSize } from '@/utils/util';
|
||||
@ -187,6 +163,7 @@ import { loadBaseInfo, loadCurrentInfo } from '@/api/modules/dashboard';
|
||||
import { getIOOptions, getNetworkOptions } from '@/api/modules/monitor';
|
||||
const router = useRouter();
|
||||
|
||||
const active = ref('home');
|
||||
const statuRef = ref();
|
||||
const appRef = ref();
|
||||
|
||||
@ -535,10 +512,10 @@ onBeforeUnmount(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
<style scoped lang="scss">
|
||||
.el-form-item--small {
|
||||
--font-size: 14px;
|
||||
--el-form-label-font-size: var(--font-size);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12" align="center">
|
||||
<el-col :span="6" align="center">
|
||||
<el-popover placement="bottom" :width="300" trigger="hover">
|
||||
<div style="margin-bottom: 10px">
|
||||
<el-tag>{{ baseInfo.cpuModelName }}</el-tag>
|
||||
@ -18,7 +18,8 @@
|
||||
<template #reference>
|
||||
<el-progress
|
||||
type="dashboard"
|
||||
:width="80"
|
||||
:width="100"
|
||||
:stroke-width="10"
|
||||
:percentage="formatNumber(currentInfo.cpuUsedPercent)"
|
||||
>
|
||||
<template #default="{ percentage }">
|
||||
@ -33,8 +34,13 @@
|
||||
( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} ) Core
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col :span="12" align="center">
|
||||
<el-progress type="dashboard" :width="80" :percentage="formatNumber(currentInfo.MemoryUsedPercent)">
|
||||
<el-col :span="6" align="center">
|
||||
<el-progress
|
||||
type="dashboard"
|
||||
:width="100"
|
||||
:stroke-width="10"
|
||||
:percentage="formatNumber(currentInfo.MemoryUsedPercent)"
|
||||
>
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}%</span>
|
||||
<span class="percentage-label">{{ $t('monitor.memory') }}</span>
|
||||
@ -46,9 +52,7 @@
|
||||
{{ formatNumber(currentInfo.memoryTotal / 1024 / 1024) }} ) MB
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" style="margin-top: 30px">
|
||||
<el-col :span="12" align="center">
|
||||
<el-col :span="6" align="center">
|
||||
<el-popover placement="bottom" :width="200" trigger="hover">
|
||||
<el-tag style="margin-top: 5px">
|
||||
{{ $t('home.loadAverage', [1]) }}: {{ formatNumber(currentInfo.load1) }}
|
||||
@ -62,7 +66,8 @@
|
||||
<template #reference>
|
||||
<el-progress
|
||||
type="dashboard"
|
||||
:width="80"
|
||||
:width="100"
|
||||
:stroke-width="10"
|
||||
:percentage="formatNumber(currentInfo.loadUsagePercent)"
|
||||
>
|
||||
<template #default="{ percentage }">
|
||||
@ -75,7 +80,7 @@
|
||||
<br />
|
||||
<span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" align="center">
|
||||
<el-col :span="6" align="center">
|
||||
<el-popover placement="bottom" :width="160" trigger="hover">
|
||||
<el-tag>{{ $t('home.mount') }}: /</el-tag>
|
||||
<div><el-tag style="margin-top: 10px">iNode</el-tag></div>
|
||||
@ -102,7 +107,12 @@
|
||||
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.usedPercent) }}%
|
||||
</el-tag>
|
||||
<template #reference>
|
||||
<el-progress type="dashboard" :width="80" :percentage="formatNumber(currentInfo.usedPercent)">
|
||||
<el-progress
|
||||
type="dashboard"
|
||||
:width="100"
|
||||
:stroke-width="10"
|
||||
:percentage="formatNumber(currentInfo.usedPercent)"
|
||||
>
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}%</span>
|
||||
<span class="percentage-label">{{ $t('monitor.disk') }}</span>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="topCard">
|
||||
<el-card class="topRouterCard">
|
||||
<el-radio-group @change="handleChange" v-model="activeNames">
|
||||
<el-radio-button class="topButton" size="large" label="terminal">
|
||||
<el-radio-button class="topRouterButton" size="default" label="terminal">
|
||||
{{ $t('menu.terminal') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="host">
|
||||
<el-radio-button class="topRouterButton" size="default" label="host">
|
||||
{{ $t('menu.host') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="command">
|
||||
<el-radio-button class="topRouterButton" size="default" label="command">
|
||||
{{ $t('terminal.quickCommand') }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
@ -55,35 +55,3 @@ onUnmounted(() => {
|
||||
terminalTabRef.value?.cleanTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.topCard {
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 0px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
}
|
||||
.topButton .el-radio-button__inner {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background: var(--el-button-bg-color, var(--el-fill-color-blank));
|
||||
border: 0;
|
||||
font-weight: 350;
|
||||
border-left: 0;
|
||||
color: var(--el-button-text-color, var(--el-text-color-regular));
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--el-transition-all);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 8px 15px;
|
||||
font-size: var(--el-font-size-base);
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="topCard">
|
||||
<el-card class="topRouterCard">
|
||||
<el-radio-group :model-value="props.activeName" @change="handleChange">
|
||||
<el-radio-button class="topButton" size="large" label="operation">
|
||||
<el-radio-button class="topRouterButton" size="default" label="operation">
|
||||
{{ $t('logs.operation') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="login">
|
||||
<el-radio-button class="topRouterButton" size="default" label="login">
|
||||
{{ $t('logs.login') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="system">
|
||||
<el-radio-button class="topRouterButton" size="default" label="system">
|
||||
{{ $t('logs.system') }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
@ -45,35 +45,3 @@ const handleChange = (val: string) => {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.topCard {
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 0px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
}
|
||||
.topButton .el-radio-button__inner {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background: var(--el-button-bg-color, var(--el-fill-color-blank));
|
||||
border: 0;
|
||||
font-weight: 350;
|
||||
border-left: 0;
|
||||
color: var(--el-button-text-color, var(--el-text-color-regular));
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--el-transition-all);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 8px 15px;
|
||||
font-size: var(--el-font-size-base);
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="topCard">
|
||||
<el-card class="topRouterCard">
|
||||
<el-radio-group :model-value="props.activeName" @change="handleChange">
|
||||
<el-radio-button class="topButton" size="large" label="panel">
|
||||
<el-radio-button class="topRouterButton" size="default" label="panel">
|
||||
{{ $t('setting.panel') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="safe">
|
||||
<el-radio-button class="topRouterButton" size="default" label="safe">
|
||||
{{ $t('setting.safe') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="backupaccount">
|
||||
<el-radio-button class="topRouterButton" size="default" label="backupaccount">
|
||||
{{ $t('setting.backupAccount') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="monitor">
|
||||
<el-radio-button class="topRouterButton" size="default" label="monitor">
|
||||
{{ $t('menu.monitor') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button class="topButton" size="large" label="about">
|
||||
<el-radio-button class="topRouterButton" size="default" label="about">
|
||||
{{ $t('setting.about') }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
@ -56,35 +56,3 @@ const handleChange = (val: string) => {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.topCard {
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 0px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
}
|
||||
.topButton .el-radio-button__inner {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background: var(--el-button-bg-color, var(--el-fill-color-blank));
|
||||
border: 0;
|
||||
font-weight: 350;
|
||||
border-left: 0;
|
||||
color: var(--el-button-text-color, var(--el-text-color-regular));
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--el-transition-all);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 8px 15px;
|
||||
font-size: var(--el-font-size-base);
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user