mirror of https://github.com/1Panel-dev/1Panel
feat: 首页样式修改
zhengkunwang223
zhengkunwang223
parent
5ed3df14ec
commit
0f7c915ca7
|
|
@ -1,9 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card :style="{ height: height }">
|
||||
<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 :style="{ height: height }" class="home-card">
|
||||
<div class="header">
|
||||
<span></span>
|
||||
<span>{{ header }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<slot name="body" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,13 +22,26 @@ defineProps({
|
|||
</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);
|
||||
.home-card {
|
||||
.header {
|
||||
span:first-child {
|
||||
background: $primary-color;
|
||||
border-radius: 7px;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,140 +1,52 @@
|
|||
<template>
|
||||
<div>
|
||||
<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>
|
||||
</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>
|
||||
<el-scrollbar max-height="500px">
|
||||
<div class="h-app-card" v-for="(app, index) in apps" :key="index">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="5">
|
||||
<div>
|
||||
<el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<div class="h-app-content">
|
||||
<div>
|
||||
<span class="h-app-title">{{ app.name }}</span>
|
||||
</div>
|
||||
<div class="h-app-desc">
|
||||
<span>
|
||||
{{ app.shortDesc }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button class="h-app-button" type="primary" plain round size="small" @click="goInstall">
|
||||
{{ $t('app.install') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="h-app-divider"></div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { App } from '@/api/interface/app';
|
||||
import { Dashboard } from '@/api/interface/dashboard';
|
||||
import { ref } from 'vue';
|
||||
import { SearchApp } from '@/api/modules/app';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
|
||||
let req = reactive({
|
||||
name: '',
|
||||
tags: [],
|
||||
page: 1,
|
||||
pageSize: 50,
|
||||
});
|
||||
|
||||
const baseInfo = ref({
|
||||
haloID: 0,
|
||||
dateeaseID: 0,
|
||||
|
|
@ -144,6 +56,9 @@ const baseInfo = ref({
|
|||
kubepiID: 0,
|
||||
});
|
||||
|
||||
let loading = ref(false);
|
||||
let apps = ref<App.App[]>([]);
|
||||
|
||||
const acceptParams = (base: Dashboard.BaseInfo): void => {
|
||||
baseInfo.value.haloID = base.haloID;
|
||||
baseInfo.value.dateeaseID = base.dateeaseID;
|
||||
|
|
@ -151,23 +66,65 @@ const acceptParams = (base: Dashboard.BaseInfo): void => {
|
|||
baseInfo.value.metersphereID = base.metersphereID;
|
||||
baseInfo.value.kubeoperatorID = base.kubeoperatorID;
|
||||
baseInfo.value.kubepiID = base.kubepiID;
|
||||
|
||||
search(req);
|
||||
};
|
||||
|
||||
const goInstall = () => {
|
||||
router.push({ name: 'App' });
|
||||
};
|
||||
|
||||
const search = async (req: App.AppReq) => {
|
||||
loading.value = true;
|
||||
await SearchApp(req)
|
||||
.then((res) => {
|
||||
apps.value = res.data.items;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
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 lang="scss">
|
||||
.h-app-card {
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
|
||||
.h-app-content {
|
||||
.h-app-title {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.h-app-desc {
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #646a73;
|
||||
}
|
||||
}
|
||||
}
|
||||
.h-app-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.h-app-divider {
|
||||
margin-top: 5px;
|
||||
border: 0;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.h-app-card:hover {
|
||||
background-color: rgba(0, 94, 235, 0.03);
|
||||
}
|
||||
|
||||
.el-avatar {
|
||||
--el-avatar-bg-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,52 +10,48 @@
|
|||
/>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="16">
|
||||
<CardWithHeader :header="$t('home.overview')" height="150px">
|
||||
<CardWithHeader :header="$t('home.overview')" height="160px">
|
||||
<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 class="h-overview">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<span>{{ $t('menu.website') }}</span>
|
||||
<div class="count">
|
||||
<span @click="goRouter('/websites')">{{ baseInfo?.websiteNumber }}</span>
|
||||
</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>
|
||||
<el-col :span="6">
|
||||
<span>{{ $t('menu.database') }}</span>
|
||||
<div class="count">
|
||||
<span @click="goRouter('/databases')">{{ baseInfo?.databaseNumber }}</span>
|
||||
</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">
|
||||
<el-col :span="6">
|
||||
<span>{{ $t('menu.cronjob') }}</span>
|
||||
<div class="count">
|
||||
<span @click="goRouter('/cronjobs')">
|
||||
{{ baseInfo?.cronjobNumber }}
|
||||
</el-link>
|
||||
</span>
|
||||
</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">
|
||||
<el-col :span="6">
|
||||
<span>{{ $t('home.appInstalled') }}</span>
|
||||
<div class="count">
|
||||
<span @click="goRouter('/apps')">
|
||||
{{ baseInfo?.appInstalldNumber }}
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
<CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="280px">
|
||||
<CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="265px">
|
||||
<template #body>
|
||||
<Status ref="statuRef" />
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
<CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px" height="450px">
|
||||
<CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px" height="465px">
|
||||
<template #body>
|
||||
<el-radio-group
|
||||
style="float: right; margin-left: 5px"
|
||||
|
|
@ -81,29 +77,19 @@
|
|||
>
|
||||
<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'">
|
||||
<div class="monitor-tags" 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>
|
||||
<el-tag>{{ $t('monitor.down') }}: {{ currentChartInfo.netBytesRecv }} KB/s</el-tag>
|
||||
<el-tag>{{ $t('home.totalSend') }}: {{ computeSize(currentInfo.netBytesSent) }}</el-tag>
|
||||
<el-tag>{{ $t('home.totalRecv') }}: {{ computeSize(currentInfo.netBytesRecv) }}</el-tag>
|
||||
</div>
|
||||
<div style="margin-top: 20px" v-if="chartOption === 'io'">
|
||||
<div class="monitor-tags" 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">
|
||||
<el-tag>{{ $t('monitor.write') }}: {{ currentChartInfo.ioWriteBytes }} MB</el-tag>
|
||||
<el-tag>
|
||||
{{ $t('home.rwPerSecond') }}: {{ currentChartInfo.ioCount }} {{ $t('home.time') }}
|
||||
</el-tag>
|
||||
<el-tag style="margin-left: 20px">
|
||||
{{ $t('home.rwPerSecond') }}: {{ currentInfo.ioTime }} ms
|
||||
</el-tag>
|
||||
<el-tag>{{ $t('home.rwPerSecond') }}: {{ currentInfo.ioTime }} ms</el-tag>
|
||||
</div>
|
||||
<div
|
||||
v-if="chartOption === 'io'"
|
||||
|
|
@ -119,28 +105,62 @@
|
|||
</CardWithHeader>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<CardWithHeader :header="$t('home.systemInfo')" height="370px">
|
||||
<CardWithHeader :header="$t('home.systemInfo')" height="330px">
|
||||
<template #body>
|
||||
<el-form style="margin-left: 10px">
|
||||
<el-form-item style="margin-top: 15px" :label="$t('home.hostname')">
|
||||
<el-descriptions :column="1" class="h-systemInfo">
|
||||
<el-descriptions-item class-name="system-content">
|
||||
<template #label>
|
||||
<span class="system-label">
|
||||
{{ $t('home.hostname') }}
|
||||
</span>
|
||||
</template>
|
||||
{{ baseInfo.hostname }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('home.platformVersion')">
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item class-name="system-content">
|
||||
<template #label>
|
||||
<span class="system-label">
|
||||
{{ $t('home.platformVersion') }}
|
||||
</span>
|
||||
</template>
|
||||
{{ baseInfo.platform }}-{{ baseInfo.platformVersion }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('home.kernelVersion')">
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item class-name="system-content">
|
||||
<template #label>
|
||||
<span class="system-label">
|
||||
{{ $t('home.kernelVersion') }}
|
||||
</span>
|
||||
</template>
|
||||
{{ 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')">
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item class-name="system-content">
|
||||
<template #label>
|
||||
<span class="system-label">
|
||||
{{ $t('home.kernelArch') }}
|
||||
</span>
|
||||
</template>
|
||||
{{ baseInfo.kernelArch }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item class-name="system-content">
|
||||
<template #label>
|
||||
<span class="system-label">
|
||||
{{ $t('home.uptime') }}
|
||||
</span>
|
||||
</template>
|
||||
{{ currentInfo.timeSinceUptime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item class-name="system-content">
|
||||
<template #label>
|
||||
<span class="system-label">
|
||||
{{ $t('home.runningTime') }}
|
||||
</span>
|
||||
</template>
|
||||
{{ loadUpTime(currentInfo.uptime) }}
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
|
||||
<CardWithHeader :header="$t('home.app')" style="margin-top: 20px" height="532px">
|
||||
<CardWithHeader :header="$t('home.app')" style="margin-top: 20px" height="581px">
|
||||
<template #body>
|
||||
<App ref="appRef" />
|
||||
</template>
|
||||
|
|
@ -546,10 +566,54 @@ onBeforeUnmount(() => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss">
|
||||
.el-form-item--small {
|
||||
--font-size: 14px;
|
||||
--el-form-label-font-size: var(--font-size);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.h-overview {
|
||||
text-align: center;
|
||||
|
||||
span:first-child {
|
||||
font-size: 18px;
|
||||
color: #646a73;
|
||||
}
|
||||
|
||||
.count {
|
||||
margin-top: 10px;
|
||||
span {
|
||||
font-size: 28px;
|
||||
color: $primary-color;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h-systemInfo {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.system-label {
|
||||
font-weight: 400 !important;
|
||||
font-size: 16px !important;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.system-content {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.monitor-tags {
|
||||
margin-top: 20px;
|
||||
margin-left: 8px;
|
||||
|
||||
.el-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue