增加系统状态、logo等类名并简化部分组件dom

src/components/common/ItemCard/index.vue

@@ -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 }}

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue

@@ -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)"
+    :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%;"
   />
-  </div>
 </template>

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue

@@ -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)"
+    :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"
   />
-  </div>
 </template>

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue

@@ -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)"
+    :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"
   />
-  </div>
 </template>

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/common.ts

@@ -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))
+}

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue

@@ -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" />

src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue

@@ -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"

src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue

@@ -17,8 +17,8 @@ defineProps<Prop>()
 </script>
 
 <template>
+  <template v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
     <div class="w-full">
-    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
       <div class="mb-1 text-xs" :style="{ color: textColor }">
         <span>
           {{ infoCardLeftText }}
@@ -38,8 +38,9 @@ defineProps<Prop>()
         style="max-width: 135px;"
       />
     </div>
-    <div v-else>
+  </template>
-      <div class="flex justify-center h-full w-full mt-3">
+  <template v-else>
+    <div class="w-full flex justify-center h-full w-full mt-3">
       <NProgress
         :color="progressColor"
         :rail-color="progressRailColor"
@@ -52,6 +53,5 @@ defineProps<Prop>()
         </div>
       </NProgress>
     </div>
-    </div>
+  </template>
-  </div>
 </template>

src/views/home/index.vue

@@ -325,7 +325,7 @@ function handleAddItem(itemIconGroupId?: number) {
 <template>
   <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">