style: Update formatFileSize function to accept decimals parameter

src/@core/utils/formatters.ts

@@ -60,7 +60,7 @@ export const prefixWithPlus = (value: number) => (value > 0 ? `+${value}` : valu
 export const formatSeason = (value: string) => (value ? `S${value.padStart(2, '0')}` : '')
 
 // 格式化为xx[TGMK]B
-export function formatFileSize(bytes: number) {
+export function formatFileSize(bytes: number, decimals = 2) {
   if (bytes < 0) throw new Error('字节数不能为负数。')
 
   const units = ['B', 'KB', 'MB', 'GB', 'TB']
@@ -72,7 +72,7 @@ export function formatFileSize(bytes: number) {
     unitIndex++
   }
 
-  return `${size.toFixed(2)} ${units[unitIndex]}`
+  return `${size.toFixed(decimals)} ${units[unitIndex]}`
 }
 
 // 将时间秒格式化为时分秒

src/components/cards/DownloaderCard.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import api from '@/api'
+import { formatFileSize } from '@/@core/utils/formatters'
 import { DownloaderConf } from '@/api/types'
-import { formatBytes } from '@core/utils/formatters'
+import type { DownloaderInfo } from '@/api/types'
 import qbittorrent_image from '@images/logos/qbittorrent.png'
 import transmission_image from '@images/logos/transmission.png'
 
@@ -15,6 +17,9 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'change'])
 
+// timeout定时器
+let timeoutTimer: NodeJS.Timeout | undefined = undefined
+
 // 上传速率
 const upload_rate = ref(0)
 
@@ -36,6 +41,29 @@ const downloaderInfo = ref<DownloaderConf>({
   config: {},
 })
 
+// 调用API查询下载器数据
+async function loadDownloaderInfo() {
+  try {
+    const res: DownloaderInfo = await api.get('dashboard/downloader', {
+      params: {
+        name: props.downloader.name,
+      },
+    })
+
+    if (res) {
+      upload_rate.value = res.upload_speed
+      download_rate.value = res.download_speed
+      // 定时查询
+      clearTimeout(timeoutTimer)
+      if (props.downloader.enabled) {
+        timeoutTimer = setTimeout(loadDownloaderInfo, 3000)
+      }
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
 // 打开详情弹窗
 function openDownloaderInfoDialog() {
   downloaderInfo.value = props.downloader
@@ -52,7 +80,7 @@ function saveDownloaderInfo() {
 
 // 速度
 const getSpeedText = computed(() => {
-  return `↑ ${upload_rate.value}/s ↓ ${download_rate.value}/s`
+  return `↑ ${formatFileSize(upload_rate.value, 1)}/s ↓ ${formatFileSize(download_rate.value, 1)}/s`
 })
 
 // 根据存储类型选择图标
@@ -71,6 +99,17 @@ const getIcon = computed(() => {
 function onClose() {
   emit('close')
 }
+
+onMounted(async () => {
+  if (props.downloader.enabled) {
+    await loadDownloaderInfo()
+    timeoutTimer = setTimeout(loadDownloaderInfo, 3000)
+  }
+})
+
+onUnmounted(() => {
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
 </script>
 <template>
   <div>
@@ -93,7 +132,7 @@ function onClose() {
             />
             <span class="text-h6 mb-1">{{ downloader.name }}</span>
           </div>
-          <div class="text-body-1 mb-3">{{ getSpeedText }}</div>
+          <div class="text-body-1 mb-3" v-if="props.downloader.enabled">{{ getSpeedText }}</div>
         </div>
         <VImg :src="getIcon" cover class="mt-10" max-width="4rem" />
       </VCardText>

src/styles/styles.scss

@@ -177,7 +177,7 @@
 }
 
 .grid-customrule-card {
-  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(1rem, 1fr));
   padding-block-end: 1rem;
 }