增加系统状态、logo等类名并简化部分组件dom
This commit is contained in:
Sun
parent
bf1cc0cc00
commit
99d18df7f0
@ -18,11 +18,11 @@ const propClass = ref(props.class)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="item-card w-full">
|
||||
<!-- 详情图标 -->
|
||||
<div
|
||||
v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info"
|
||||
class="w-full rounded-2xl transition-all duration-200 flex"
|
||||
class="item-card-info w-full rounded-2xl transition-all duration-200 flex"
|
||||
:class="propClass"
|
||||
:style="{ backgroundColor: backgroundColor ?? defaultBackground }"
|
||||
>
|
||||
@ -32,9 +32,10 @@ const propClass = ref(props.class)
|
||||
<!-- 极简图标（APP） -->
|
||||
<div
|
||||
v-if="cardTypeStyle === PanelPanelConfigStyleEnum.icon"
|
||||
class="item-card-small"
|
||||
>
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto transition-all duration-200"
|
||||
class="item-card-small-icon overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto transition-all duration-200"
|
||||
:class="propClass"
|
||||
:style="{ backgroundColor: backgroundColor ?? defaultBackground }"
|
||||
>
|
||||
@ -43,7 +44,7 @@ const propClass = ref(props.class)
|
||||
|
||||
<div
|
||||
v-if="!iconTextIconHideTitle"
|
||||
class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
|
||||
class="item-card-small-title text-center app-icon-text-shadow cursor-pointer mt-[2px]"
|
||||
:style="{ color: iconTextColor }"
|
||||
>
|
||||
{{ iconText }}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import GenericProgress from '../components/GenericProgress/index.vue'
|
||||
import { correctionNumber, correctionNumberByCardStyle } from './common'
|
||||
import { getCpuState } from '@/api/system/systemMonitor'
|
||||
import type { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
@ -16,10 +17,6 @@ const props = defineProps<Prop>()
|
||||
let timer: NodeJS.Timer
|
||||
const cpuState = ref<SystemMonitor.CPUInfo | null>(null)
|
||||
|
||||
function correctionNumber(v: number, keepNum = 2): number {
|
||||
return v === 0 ? 0 : Number(v.toFixed(keepNum))
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
try {
|
||||
const { data, code } = await getCpuState<SystemMonitor.CPUInfo>()
|
||||
@ -44,16 +41,15 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<GenericProgress
|
||||
:progress-color="progressColor"
|
||||
:progress-rail-color="progressRailColor"
|
||||
:progress-height="5"
|
||||
:percentage="correctionNumber(cpuState?.usages[0] || 0)"
|
||||
:card-type-style="cardTypeStyle"
|
||||
:info-card-right-text="`${correctionNumber(cpuState?.usages[0] || 0)}%`"
|
||||
info-card-left-text="CPU"
|
||||
:text-color="textColor"
|
||||
/>
|
||||
</div>
|
||||
<GenericProgress
|
||||
:progress-color="progressColor"
|
||||
:progress-rail-color="progressRailColor"
|
||||
:progress-height="5"
|
||||
:percentage="correctionNumberByCardStyle(cpuState?.usages[0] || 0, cardTypeStyle)"
|
||||
:card-type-style="cardTypeStyle"
|
||||
:info-card-right-text="`${correctionNumber(cpuState?.usages[0] || 0)}%`"
|
||||
info-card-left-text="CPU"
|
||||
:text-color="textColor"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import GenericProgress from '../components/GenericProgress/index.vue'
|
||||
import { correctionNumberByCardStyle } from './common'
|
||||
import type { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
import { bytesToSize } from '@/utils/cmn'
|
||||
import { getDiskStateByPath } from '@/api/system/systemMonitor'
|
||||
@ -18,10 +19,6 @@ const props = defineProps<Prop>()
|
||||
let timer: NodeJS.Timer
|
||||
const diskState = ref<SystemMonitor.DiskInfo | null>(null)
|
||||
|
||||
function correctionNumber(v: number, keepNum = 2): number {
|
||||
return v === 0 ? 0 : Number(v.toFixed(keepNum))
|
||||
}
|
||||
|
||||
function formatdiskSize(v: number): string {
|
||||
return bytesToSize(v)
|
||||
}
|
||||
@ -54,16 +51,14 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<GenericProgress
|
||||
:progress-color="progressColor"
|
||||
:progress-rail-color="progressRailColor"
|
||||
:progress-height="5"
|
||||
:percentage="correctionNumber(diskState?.usedPercent || 0)"
|
||||
:card-type-style="cardTypeStyle"
|
||||
:info-card-right-text="`${formatdiskSize(formatdiskToByte(diskState?.used || 0))}/${formatdiskSize(formatdiskToByte(diskState?.free || 0))}`"
|
||||
:info-card-left-text="diskState?.mountpoint"
|
||||
:text-color="textColor"
|
||||
/>
|
||||
</div>
|
||||
<GenericProgress
|
||||
:progress-color="progressColor"
|
||||
:progress-rail-color="progressRailColor"
|
||||
:progress-height="5"
|
||||
:percentage="correctionNumberByCardStyle(diskState?.usedPercent || 0, cardTypeStyle)"
|
||||
:card-type-style="cardTypeStyle"
|
||||
:info-card-right-text="`${formatdiskSize(formatdiskToByte(diskState?.used || 0))}/${formatdiskSize(formatdiskToByte(diskState?.free || 0))}`"
|
||||
:info-card-left-text="diskState?.mountpoint"
|
||||
:text-color="textColor"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import GenericProgress from '../components/GenericProgress/index.vue'
|
||||
import { correctionNumberByCardStyle } from './common'
|
||||
import { getMemonyState } from '@/api/system/systemMonitor'
|
||||
import type { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
import { bytesToSize } from '@/utils/cmn'
|
||||
@ -17,10 +18,6 @@ const props = defineProps<Prop>()
|
||||
let timer: NodeJS.Timer
|
||||
const memoryState = ref<SystemMonitor.MemoryInfo | null>(null)
|
||||
|
||||
function correctionNumber(v: number, keepNum = 2): number {
|
||||
return v === 0 ? 0 : Number(v.toFixed(keepNum))
|
||||
}
|
||||
|
||||
function formatMemorySize(v: number): string {
|
||||
return bytesToSize(v)
|
||||
}
|
||||
@ -49,16 +46,14 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<GenericProgress
|
||||
:progress-color="progressColor"
|
||||
:progress-rail-color="progressRailColor"
|
||||
:progress-height="5"
|
||||
:percentage="correctionNumber(memoryState?.usedPercent || 0)"
|
||||
:card-type-style="cardTypeStyle"
|
||||
:info-card-right-text="`${formatMemorySize(memoryState?.used || 0)}/${formatMemorySize((memoryState?.total || 0) - (memoryState?.used || 0) || 0)}`"
|
||||
info-card-left-text="RAM"
|
||||
:text-color="textColor"
|
||||
/>
|
||||
</div>
|
||||
<GenericProgress
|
||||
:progress-color="progressColor"
|
||||
:progress-rail-color="progressRailColor"
|
||||
:progress-height="5"
|
||||
:percentage="correctionNumberByCardStyle(memoryState?.usedPercent || 0, cardTypeStyle)"
|
||||
:card-type-style="cardTypeStyle"
|
||||
:info-card-right-text="`${formatMemorySize(memoryState?.used || 0)}/${formatMemorySize((memoryState?.total || 0) - (memoryState?.used || 0) || 0)}`"
|
||||
info-card-left-text="RAM"
|
||||
:text-color="textColor"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
export function correctionNumberByCardStyle(v: number, cardStyle: PanelPanelConfigStyleEnum): number {
|
||||
let keepNum = 0
|
||||
if (cardStyle === PanelPanelConfigStyleEnum.small)
|
||||
keepNum = 1
|
||||
else if (cardStyle === PanelPanelConfigStyleEnum.info)
|
||||
keepNum = 2
|
||||
|
||||
return correctionNumber(v, keepNum)
|
||||
}
|
||||
|
||||
export function correctionNumber(v: number, keepNum = 2): number {
|
||||
return v === 0 ? 0 : Number(v.toFixed(keepNum))
|
||||
}
|
||||
@ -47,7 +47,7 @@ const refreshInterval = 5000
|
||||
<template #icon>
|
||||
<!-- 图标 -->
|
||||
<div class="w-[60px] h-[70px]">
|
||||
<div class="w-[60px] h-full flex items-center justify-center text-white">
|
||||
<div class="app-icon w-[60px] h-full flex items-center justify-center text-white">
|
||||
<SvgIcon v-if="monitorType === MonitorType.cpu" icon="solar-cpu-bold" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
|
||||
<SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
|
||||
<SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
|
||||
|
||||
@ -27,7 +27,7 @@ const propClass = ref(props.class)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="generic-monitor-card w-full">
|
||||
<ItemCard
|
||||
:card-type-style="cardTypeStyle"
|
||||
:icon-text="iconText"
|
||||
|
||||
@ -17,8 +17,8 @@ defineProps<Prop>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
|
||||
<template v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
|
||||
<div class="w-full">
|
||||
<div class="mb-1 text-xs" :style="{ color: textColor }">
|
||||
<span>
|
||||
{{ infoCardLeftText }}
|
||||
@ -38,20 +38,20 @@ defineProps<Prop>()
|
||||
style="max-width: 135px;"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex justify-center h-full w-full mt-3">
|
||||
<NProgress
|
||||
:color="progressColor"
|
||||
:rail-color="progressRailColor"
|
||||
type="dashboard"
|
||||
:percentage="percentage" :stroke-width="15"
|
||||
style="width: 50px;"
|
||||
>
|
||||
<div class="text-white" style="font-size: 8px;" :style="{ color: textColor }">
|
||||
{{ percentage }}%
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="w-full flex justify-center h-full w-full mt-3">
|
||||
<NProgress
|
||||
:color="progressColor"
|
||||
:rail-color="progressRailColor"
|
||||
type="dashboard"
|
||||
:percentage="percentage" :stroke-width="15"
|
||||
style="width: 50px;"
|
||||
>
|
||||
<div class="text-white" style="font-size: 8px;" :style="{ color: textColor }">
|
||||
{{ percentage }}%
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -323,9 +323,9 @@ function handleAddItem(itemIconGroupId?: number) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full sun-main ">
|
||||
<div class="w-full h-full sun-main">
|
||||
<div
|
||||
class="cover" :style="{
|
||||
class="cover wallpaper" :style="{
|
||||
filter: `blur(${panelState.panelConfig.backgroundBlur}px)`,
|
||||
background: `url(${panelState.panelConfig.backgroundImageSrc}) no-repeat`,
|
||||
backgroundSize: 'cover',
|
||||
@ -345,12 +345,12 @@ function handleAddItem(itemIconGroupId?: number) {
|
||||
<!-- 头 -->
|
||||
<div class="mx-[auto] w-[80%]">
|
||||
<div class="flex mx-[auto] items-center justify-center text-white">
|
||||
<div>
|
||||
<div class="logo">
|
||||
<span class="text-2xl md:text-6xl font-bold text-shadow">
|
||||
{{ panelState.panelConfig.logoText }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-base lg:text-2xl mx-[10px]">
|
||||
<div class="divider text-base lg:text-2xl mx-[10px]">
|
||||
|
|
||||
</div>
|
||||
<div class="text-shadow">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user