更新v1.3.0-beta24-01-25

Squashed commit of the following:

commit 66d0e5e94c
Author: Sun <95302870@qq.com>
Date:   Thu Jan 25 13:20:34 2024 +0800

    更新1.3.0-beta24-01-25

commit 52a81e5f55
Author: Sun <95302870@qq.com>
Date:   Thu Jan 25 13:13:08 2024 +0800

    Squashed commit of the following:

    commit 908d87357c4e22868eff85f377bb8cd22f3785d7
    Author: Sun <95302870@qq.com>
    Date:   Thu Jan 25 13:12:14 2024 +0800

        增加前端版本号

    commit 8ed2b636476c7a14ae4e1761f7712949b7ce60fc
    Author: Sun <95302870@qq.com>
    Date:   Thu Jan 25 12:29:49 2024 +0800

        增加自动获取前端版本号的git tag

commit ba7d70f9ca
Author: Sun <95302870@qq.com>
Date:   Thu Jan 25 10:58:15 2024 +0800

    优化代码

commit 104543b96f
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 21:28:31 2024 +0800

    增加系统状态组件的部分样式

commit 70c87c94c6
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 20:55:05 2024 +0800

    时间组件和搜索栏组件增加样式类型

commit 6bab5a264f
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 20:41:33 2024 +0800

    将项目列表增加样式并优化减少dom嵌套

commit 99d18df7f0
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 20:11:07 2024 +0800

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

commit bf1cc0cc00
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 17:17:41 2024 +0800

    更新关于页面

commit fceacf58b8
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 14:54:37 2024 +0800

    增加隐藏网络模式切换开关

commit e0dcc49f5b
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 13:55:28 2024 +0800

    优化部分错误码

commit 863cdf0fc1
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 12:54:55 2024 +0800

    声明暴露端口

commit 5b25ef9c19
Author: Sun <95302870@qq.com>
Date:   Wed Jan 24 12:38:48 2024 +0800

    修改命令行所有的输出内容为英文

src/components/apps/About/index.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { NDivider, NGradientText } from 'naive-ui'
+import { NDivider, NGradientText, NTag } from 'naive-ui'
 import { onMounted, ref } from 'vue'
 import { get } from '@/api/system/about'
+import { useAppStore } from '@/store'
 import srcSvglogo from '@/assets/logo.svg'
 import srcGitee from '@/assets/about_image/gitee.png'
 import srcGithub from '@/assets/about_image/github.png'
 import srcDocker from '@/assets/about_image/docker.png'
-import srcQQGroupQR from '@/assets/about_image/qq_group_qr.jpg'
+import srcBilibili from '@/assets/about_image/bilibili.png'
+import srcYoutube from '@/assets/about_image/youtube.png'
+import srcQQGroupQR from '@/assets/about_image/qq_group_qr2.png'
 import { RoundCardModal } from '@/components/common'
 
 interface Version {
@@ -14,8 +17,10 @@ interface Version {
   versionCode: number
 }
 
+const appStore = useAppStore()
 const versionName = ref('')
 const qqGroupQRShow = ref(false)
+const frontVersion = import.meta.env.VITE_APP_VERSION || 'unknown'
 
 onMounted(() => {
   get<Version>().then((res) => {
@@ -26,43 +31,44 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pt-10">
-    <div>
-      <div class="flex flex-col items-center justify-center">
-        <img :src="srcSvglogo" width="100" height="100" alt="">
-        <div class="text-3xl font-semibold">
-          {{ $t('common.appName') }}
-        </div>
-        <div class="text-xl">
-          <NGradientText type="info">
-            <a href="https://github.com/hslr-s/sun-panel/releases" class="font-semibold" :title="$t('apps.about.viewUpdateLog')" target="_blank">v{{ versionName }}</a>
-          </NGradientText>
-        </div>
+  <div class="pt-5">
+    <div class="flex flex-col items-center justify-center">
+      <img :src="srcSvglogo" width="100" height="100" alt="">
+      <div class="text-3xl font-semibold">
+        {{ $t('common.appName') }}
       </div>
-    </div>
-    <NDivider> • </NDivider>
-    <div class="flex flex-col items-center justify-center text-base">
-      <div>
+      <div class="text-xl">
+        <NGradientText type="info">
+          <a href="https://github.com/hslr-s/sun-panel/releases" class="font-semibold" :title="$t('apps.about.viewUpdateLog')" target="_blank">v{{ versionName }}</a>
+        </NGradientText>
+      </div>
+      <div class="mt-2">
         <a href="https://github.com/hslr-s/sun-panel/releases" target="_blank" class="link">{{ $t('apps.about.checkUpdate') }}</a>
       </div>
+    </div>
 
+    <NDivider style="margin:10px 0">
+      •
+    </NDivider>
+    <div class="flex flex-col items-center justify-center text-base">
+      <div>
+        {{ $t('apps.about.author') }}<a href="https://github.com/hslr-s" target="_blank" class="link">红烧猎人</a> | <a href="https://github.com/hslr-s/sun-panel/blob/master/doc/donate.md" target="_blank" class="text-red-600 hover:text-red-900">{{ $t('apps.about.donate') }}</a>
+      </div>
       <div>
         {{ $t('apps.about.issue') }}<a href="https://github.com/hslr-s/sun-panel/issues" target="_blank" class="link">Github Issues</a>
       </div>
-
       <div>
-        {{ $t('apps.about.QQGroup') }}<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=_I9WIoJn1roIdoaAqelSj9qClLKlXIa1&authKey=GfsQP2GagHnus0jMc7U8Sm6VhWjtsipXUzCHbFwQsGyHMgmYWx6ZbAP%2Bhut%2B4D6N&noverify=0&group_code=276594668" target="_blank" class="link">{{ $t("apps.about.addQQGroupUrl") }}</a>
+        {{ $t('apps.about.discussions') }}<a href="https://github.com/hslr-s/sun-panel/discussions" target="_blank" class="link">Github Discussions</a>
+      </div>
+      <div>
+        {{ $t('apps.about.QQGroup') }}<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=K6UII6aEPZUeDRIPOEpOSJZH-Vmr_RPu&authKey=jEXhnVekLbDDx5UkQzKtd3bRmhZggkGBxmvW4NT5LLIAFP7toMmqABwvkANGHbLb&noverify=0&group_code=831615449" target="_blank" class="link">{{ $t("apps.about.addQQGroupUrl") }}</a>
         |
         <span class="link cursor-pointer" @click="qqGroupQRShow = !qqGroupQRShow">
           {{ $t('apps.about.QR') }}
         </span>
       </div>
 
-      <div>
-        {{ $t('apps.about.author') }}<a href="https://github.com/hslr-s" target="_blank" class="link">红烧猎人</a> | <a href="https://github.com/hslr-s/sun-panel/blob/master/doc/donate.md" target="_blank" class="text-red-600 hover:text-red-900">{{ $t('apps.about.donate') }}</a>
-      </div>
-
-      <div class="flex mt-[10px]">
+      <div class="flex mt-[10px] flex-wrap justify-center">
         <div class="flex items-center mx-[10px]">
           <img class="w-[20px] h-[20px] mr-[5px]" :src="srcGithub" alt="">
           <a href="https://github.com/hslr-s/sun-panel" target="_blank" class="link">Github</a>
@@ -75,6 +81,21 @@ onMounted(() => {
           <img class="w-[20px] h-[20px] mr-[5px]" :src="srcDocker" alt="">
           <a href="https://hub.docker.com/r/hslr/sun-panel" target="_blank" class="link">Docker</a>
         </div>
+        <div class="flex items-center mx-[10px]">
+          <img class="w-[20px] h-[20px] mr-[5px]" :src="srcBilibili" alt="">
+          <!-- <a href="https://space.bilibili.com/27407696/channel/collectiondetail?sid=2023810" target="_blank" class="link">Bilibili</a> -->
+          <a href="https://space.bilibili.com/27407696/channel/collectiondetail?sid=2023810" target="_blank" class="link">Bilibili</a>
+        </div>
+        <div v-if="appStore.language !== 'zh-CN'" class="flex items-center mx-[10px]">
+          <img class="w-[20px] h-[20px] mr-[5px]" :src="srcYoutube" alt="">
+          <a href="https://www.youtube.com/channel/UCKwbFmKU25R602z6P2fgPYg" target="_blank" class="link">YouTube</a>
+        </div>
+      </div>
+
+      <div class="mt-5">
+        <NTag :bordered="false" size="small">
+          {{ $t("apps.about.frontVersionText") }}: FV-{{ frontVersion }}
+        </NTag>
       </div>
 
       <RoundCardModal v-model:show="qqGroupQRShow" title="交流群二维码" style="width: 300px;">

src/components/apps/Style/index.vue

@@ -237,6 +237,13 @@ function resetPanelConfig() {
       </div>
 
       <NGrid cols="2">
+        <NGridItem span="12 400:12">
+          <div class="flex items-center mt-[5px]">
+            <span class="mr-[10px]">{{ $t('apps.baseSettings.netModeChangeButtonShow') }}</span>
+            <NSwitch v-model:value="panelState.panelConfig.netModeChangeButtonShow" />
+          </div>
+        </NGridItem>
+
         <NGridItem span="12 400:12">
           <div class="flex items-center mt-[10px]">
             <span class="mr-[10px]">{{ $t('apps.baseSettings.maxWidth') }}</span>

src/components/apps/UserInfo/index.vue

@@ -104,14 +104,6 @@ function handleUpdatePassword(e: MouseEvent) {
         updatePasswordModalState.value.show = false
         ms.success(t('common.success'))
       }
-      else if (code === 0) {
-        // 旧密码错误
-
-      }
-      else {
-        // 其他错误
-        ms.error(`${t('common.failed')}:${msg}`)
-      }
     }).finally(() => {
       updatePasswordModalState.value.loading = false
     }).catch(() => {

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/common/ItemIcon/index.vue

@@ -21,32 +21,32 @@ const iconExt = computed(() => {
 </script>
 
 <template>
-  <div :style="defaultStyle">
+  <div class="item-icon" :style="defaultStyle">
     <slot>
-      <div v-if="itemIcon">
-        <div v-if="itemIcon?.itemType === 1">
+      <template v-if="itemIcon">
+        <template v-if="itemIcon?.itemType === 1">
           <NAvatar :size="props.size" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground }">
             {{ itemIcon.text }}
           </NAvatar>
-        </div>
+        </template>
 
-        <div v-else-if="itemIcon?.itemType === 2">
+        <template v-else-if="itemIcon?.itemType === 2">
           <div v-if="iconExt === 'svg'" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground, ...defaultStyle }" class="flex justify-center items-center">
             <img :src="itemIcon?.src" class="w-[35px] h-[35px]">
           </div>
           <NImage v-else :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground, ...defaultStyle }" :src="itemIcon?.src" preview-disabled />
-        </div>
+        </template>
 
-        <div v-else-if="itemIcon?.itemType === 3">
+        <template v-else-if="itemIcon?.itemType === 3">
           <NAvatar :size="props.size" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground }">
             <SvgIconOnline style="font-size: 35px;" :icon="itemIcon.text" />
           </NAvatar>
-        </div>
-      </div>
+        </template>
+      </template>
 
-      <div v-else>
+      <template v-else>
         <NAvatar :size="props.size" />
-      </div>
+      </template>
     </slot>
   </div>
 </template>

src/components/custom/GithubSite.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="text-neutral-400">
-    <span>Star on</span>
-    <a href="https://github.com/Chanzhaoyu/chatgpt-bot" target="_blank" class="text-blue-500">
-      GitHub
-    </a>
-  </div>
-</template>

src/components/custom/index.ts

@@ -1,3 +0,0 @@
-import GithubSite from './GithubSite.vue'
-
-export { GithubSite }

src/components/deskModule/Clock/index.vue

@@ -67,15 +67,15 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="w-full text-center">
-    <span class="text-2xl sm:text-2xl md:text-3xl font-[600]">
+  <div class="clock w-full text-center">
+    <span class="clock-time text-2xl sm:text-2xl md:text-3xl font-[600]">
       {{ currentDate.time }}
     </span>
     <div class="hidden sm:hidden md:block">
-      <span class="mr-1">
+      <span class="clock-date mr-1">
         {{ currentDate.date }}
       </span>
-      <span>
+      <span class="clock-week">
         {{ currentDate.week }}
       </span>
     </div>

src/components/deskModule/SearchBox/index.vue

@@ -120,18 +120,18 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full" @keydown.enter="handleSearchClick">
+  <div class="search-box w-full" @keydown.enter="handleSearchClick" @keydown.esc="handleClearSearchTerm">
     <div class="search-container flex rounded-2xl items-center justify-center text-white w-full" :style="{ background, color: textColor }" :class="{ focused: isFocused }">
-      <div class="w-[40px] flex justify-center cursor-pointer" @click="handleEngineClick">
+      <div class="search-box-btn-engine w-[40px] flex justify-center cursor-pointer" @click="handleEngineClick">
         <NAvatar :src="state.currentSearchEngine.iconSrc" style="background-color: transparent;" :size="20" />
       </div>
 
       <input v-model="searchTerm" :placeholder="$t('deskModule.searchBox.inputPlaceholder')" @focus="onFocus" @blur="onBlur" @input="handleItemSearch">
 
-      <div v-if="searchTerm !== ''" class="w-[25px] mr-[10px] flex justify-center cursor-pointer" @click="handleClearSearchTerm">
+      <div v-if="searchTerm !== ''" class="search-box-btn-clear w-[25px] mr-[10px] flex justify-center cursor-pointer" @click="handleClearSearchTerm">
         <SvgIcon style="width: 20px;height: 20px;" icon="line-md:close-small" />
       </div>
-      <div class="w-[25px] flex justify-center cursor-pointer" @click="handleSearchClick">
+      <div class="search-box-btn-search w-[25px] flex justify-center cursor-pointer" @click="handleSearchClick">
         <SvgIcon style="width: 20px;height: 20px;" icon="iconamoon:search-fill" />
       </div>
     </div>

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>

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>

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>

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

src/components/deskModule/SystemMonitor/index.vue

@@ -171,7 +171,7 @@ function handleRightMenuSelect(key: string | number) {
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="system-monitor w-full">
     <div
       class="mt-[50px]"
       :class="monitorGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)]  p-[10px] rounded-2xl' : ''"
@@ -179,13 +179,13 @@ function handleRightMenuSelect(key: string | number) {
       @mouseleave="handleSetHoverStatus(false)"
     >
       <!-- 分组标题 -->
-      <div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
+      <div class="system-monitor-header text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
         <span v-if="showTitle" class="text-shadow">
           {{ $t('deskModule.systemMonitor.systemState') }}
         </span>
         <div
           v-if="allowEdit"
-          class="ml-2 delay-100 transition-opacity flex"
+          class="system-monitor-buttons ml-2 delay-100 transition-opacity flex"
           :class="monitorGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
         >
           <span class="mr-2 cursor-pointer" @click="handleAddItem()">
@@ -198,7 +198,7 @@ function handleRightMenuSelect(key: string | number) {
       </div>
 
       <!-- 详情图标 -->
-      <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
+      <template v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
         <VueDraggable
           v-model="monitorDatas" item-key="sort" :animation="300"
           class="icon-info-box"
@@ -221,39 +221,37 @@ function handleRightMenuSelect(key: string | number) {
             />
           </div>
         </VueDraggable>
-      </div>
+      </template>
 
       <!-- APP图标宫型盒子 -->
-      <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
-        <div v-if="monitorDatas">
-          <VueDraggable
-            v-model="monitorDatas" item-key="sort" :animation="300"
-            class="icon-small-box"
-            filter=".not-drag"
-            :disabled="!monitorGroup.sortStatus"
+      <template v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
+        <VueDraggable
+          v-model="monitorDatas" item-key="sort" :animation="300"
+          class="icon-small-box"
+          filter=".not-drag"
+          :disabled="!monitorGroup.sortStatus"
+        >
+          <div
+            v-for="item, index in monitorDatas" :key="index"
+            :title="item.description"
+            @click="handleClick(index, item)"
+            @contextmenu="(e) => handleContextMenu(e, index, item)"
           >
-            <div
-              v-for="item, index in monitorDatas" :key="index"
-              :title="item.description"
-              @click="handleClick(index, item)"
-              @contextmenu="(e) => handleContextMenu(e, index, item)"
-            >
-              <AppIconSystemMonitor
-                :extend-param="item.extendParam"
-                :icon-text-icon-hide-title="false"
-                :card-type-style="panelState.panelConfig.iconStyle"
-                :monitor-type="item.monitorType"
-                :card-style="cardStyle"
-                :icon-text-color="panelState.panelConfig.iconTextColor"
-              />
-            </div>
-          </vuedraggable>
-        </div>
-      </div>
+            <AppIconSystemMonitor
+              :extend-param="item.extendParam"
+              :icon-text-icon-hide-title="false"
+              :card-type-style="panelState.panelConfig.iconStyle"
+              :monitor-type="item.monitorType"
+              :card-style="cardStyle"
+              :icon-text-color="panelState.panelConfig.iconTextColor"
+            />
+          </div>
+        </vuedraggable>
+      </template>
 
       <!-- 编辑栏 -->
-      <div v-if="monitorGroup.sortStatus && allowEdit" class="flex mt-[10px]">
-        <div>
+      <template v-if="monitorGroup.sortStatus && allowEdit">
+        <div class="system-monitor-edit-bar flex mt-[10px]">
           <NButton color="#2a2a2a6b" @click="handleSaveSort()">
             <template #icon>
               <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
@@ -263,7 +261,7 @@ function handleRightMenuSelect(key: string | number) {
             </div>
           </NButton>
         </div>
-      </div>
+      </template>
     </div>
 
     <Edit v-model:visible="editShowStatus" :monitor-data="editData" :index="editIndex" @done="handleSaveDone" />