From 99d18df7f0a57ec1cead9bce7b2b4b11427cc2e2 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Wed, 24 Jan 2024 20:11:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=B3=BB=E7=BB=9F=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E3=80=81logo=E7=AD=89=E7=B1=BB=E5=90=8D=E5=B9=B6?=
 =?UTF-8?q?=E7=AE=80=E5=8C=96=E9=83=A8=E5=88=86=E7=BB=84=E4=BB=B6dom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ItemCard/index.vue      |  9 ++---
 .../AppIconSystemMonitor/CPU.vue              | 28 +++++++--------
 .../AppIconSystemMonitor/Disk.vue             | 27 ++++++---------
 .../AppIconSystemMonitor/Memory.vue           | 27 ++++++---------
 .../AppIconSystemMonitor/common.ts            | 15 ++++++++
 .../AppIconSystemMonitor/index.vue            |  2 +-
 .../components/GenericMonitorCard/index.vue   |  2 +-
 .../components/GenericProgress/index.vue      | 34 +++++++++----------
 src/views/home/index.vue                      |  8 ++---
 9 files changed, 77 insertions(+), 75 deletions(-)
 create mode 100644 src/components/deskModule/SystemMonitor/AppIconSystemMonitor/common.ts

diff --git a/src/components/common/ItemCard/index.vue b/src/components/common/ItemCard/index.vue
index 7685a7f..214688e 100644
--- a/src/components/common/ItemCard/index.vue
+++ b/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 }}
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
index 462fcb0..c4fff8d 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
+++ b/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)"
-      :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>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
index a813ee0..ea75c66 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
+++ b/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)"
-      :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>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
index c9e1b1f..d044c09 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
+++ b/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)"
-      :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>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/common.ts b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/common.ts
new file mode 100644
index 0000000..cd79578
--- /dev/null
+++ b/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))
+}
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
index d02f466..d9d84f2 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
+++ b/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" />
diff --git a/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue b/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
index 58cf3ea..d4f601f 100644
--- a/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
+++ b/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"
diff --git a/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue b/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue
index f42ec5e..0a27dcc 100644
--- a/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue
+++ b/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue
@@ -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>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e225b5a..a4bd49d 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -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">