refactor(front): replace filesize library with custom getFileSize function for consistent file size formatting across components

front/components/AboutChartTooltip.vue

@@ -1,53 +1,43 @@
 <script setup lang="ts">
-import { filesize } from "filesize";
+import getFileSize from '~/lib/getFileSize'
 
 const props = defineProps<{
-  data: { name: string; value: string; color: string }[];
-  title: string;
-}>();
+    data: { name: string; value: string; color: string }[]
+    title: string
+}>()
 const dataKeyMap = {
-  file_size: {
-    "zh-CN": "文件大小",
-    en: "File Size",
-  },
-  file_num: {
-    "zh-CN": "文件数量",
-    en: "File Num",
-  },
-  processed: {
-    "zh-CN": "处理数量",
-    en: "Processed",
-  },
-  failed: {
-    "zh-CN": "失败数量",
-    en: "Failed",
-  },
-};
+    file_size: {
+        'zh-CN': '文件大小',
+        en: 'File Size',
+    },
+    file_num: {
+        'zh-CN': '文件数量',
+        en: 'File Num',
+    },
+    processed: {
+        'zh-CN': '处理数量',
+        en: 'Processed',
+    },
+    failed: {
+        'zh-CN': '失败数量',
+        en: 'Failed',
+    },
+}
 </script>
 
 <template>
-  <div class="rounded-md bg-white p-2 flex flex-col gap-2">
-    <div class="text-sm font-medium">{{ title }}</div>
-    <div v-for="(item, index) in data" :key="index">
-      <div class="flex flex-row items-center gap-2">
-        <div
-          class="h-5 w-2 rounded-full"
-          :style="{ backgroundColor: item.color ?? '#222' }"
-        ></div>
-        <div class="text-xs font-medium">
-          {{
-            dataKeyMap?.[item.name as keyof typeof dataKeyMap]?.["en"] ??
-            item.name
-          }}
+    <div class="rounded-md bg-white p-2 flex flex-col gap-2">
+        <div class="text-sm font-medium">{{ title }}</div>
+        <div v-for="(item, index) in data" :key="index">
+            <div class="flex flex-row items-center gap-2">
+                <div class="h-5 w-2 rounded-full" :style="{ backgroundColor: item.color ?? '#222' }"></div>
+                <div class="text-xs font-medium">
+                    {{ dataKeyMap?.[item.name as keyof typeof dataKeyMap]?.['en'] ?? item.name }}
+                </div>
+                <div class="text-sm">
+                    {{ ['file_size']?.includes(item?.name) ? getFileSize(item.value) : item.value }}
+                </div>
+            </div>
         </div>
-        <div class="text-sm">
-          {{
-            ["file_size"]?.includes(item?.name)
-              ? filesize(item.value)
-              : item.value
-          }}
-        </div>
-      </div>
     </div>
-  </div>
 </template>

front/components/FilePreviewView.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { filesize } from 'filesize'
-import type { filePreview } from './FileIcon.vue';
+import getFileSize from '~/lib/getFileSize'
+import type { filePreview } from './FileIcon.vue'
 const props = defineProps<{
     value: File | filePreview
 }>()
@@ -17,6 +17,6 @@ const fileInfo = computed(() => {
             <div class="truncate">{{ fileInfo?.name }}</div>
             <div>{{ `.${fileInfo?.ext}` }}</div>
         </div>
-        <div class="text-xs opacity-50">{{ filesize(value?.size ?? 0) }}</div>
+        <div class="text-xs opacity-50">{{ getFileSize(value?.size ?? 0) }}</div>
     </div>
-</template>
+</template>

front/components/Home/File/FileUploadProgressView.vue

@@ -3,7 +3,7 @@ import { LucidePlay, LucideSettings, LucideSquare } from 'lucide-vue-next'
 import Button from '@/components/ui/button/Button.vue'
 import FileUploadBlockProgressView from '@/components/FileUploadBlockProgressView.vue'
 import { motion } from 'motion-v'
-import { filesize } from 'filesize'
+import getFileSize from '~/lib/getFileSize'
 import { cx } from 'class-variance-authority'
 import asyncWorker from '@/lib/asyncWorker'
 import calcFileHashWorker from '@/lib/calcFileHashWorker?worker'
@@ -338,12 +338,13 @@ const handleShowSpeedInfo = () => {
         <div class="rounded-xl p-3 bg-white/80 flex flex-col gap-2 col-span-4 md:col-span-3 h-32 md:h-auto">
             <div class="flex flex-col gap-1">
                 <div @click="handleShowSpeedInfo" class="flex flex-row gap-1 items-center text-xs opacity-70">
-                    总上传进度 <LucideInfo class="size-3" />
+                    总上传进度
+                    <LucideInfo class="size-3" />
                 </div>
                 <div class="text-2xl font-bold">
                     {{
                         `${
-                            filesize(
+                            getFileSize(
                                 Object.entries(speedChartData)
                                     ?.filter((r) => dayjs().unix() - 60 < parseInt(r[0]))
                                     ?.reduce((acc, curr) => acc + curr[1]?.reduce((_acc, _curr) => _acc + _curr.value, 0), 0) / 60
@@ -415,16 +416,19 @@ const handleShowSpeedInfo = () => {
         <div class="col-span-4 flex flex-col bg-white/80 rounded-xl p-3 text-md gap-5">
             <div>文件列表</div>
             <div class="flex flex-col -mx-3 text-sm">
-                <div class="grid grid-cols-[2fr_5rem_5rem] md:grid-cols-[2fr_5rem_5rem_4fr] gap-2 border-b border-black/20 pb-2 px-3">
+                <div class="grid grid-cols-[2fr_6rem_6rem] md:grid-cols-[2fr_6rem_6rem_4fr] gap-2 border-b border-black/20 pb-2 px-3">
                     <div>文件名</div>
                     <div>文件大小</div>
-                    <div @click="handleShowSpeedInfo" class="flex flex-row gap-1 items-center">上传速度 <LucideInfo class="size-3" /></div>
+                    <div @click="handleShowSpeedInfo" class="flex flex-row gap-1 items-center">
+                        上传速度
+                        <LucideInfo class="size-3" />
+                    </div>
                     <div class="hidden md:block">进度</div>
                 </div>
                 <div
                     :class="
                         cx(
-                            'grid grid-cols-[2fr_5rem_5rem] md:grid-cols-[2fr_5rem_5rem_4fr] gap-2 py-2 border-b border-black/20 items-center hover:bg-primary/30 px-3 cursor-pointer',
+                            'grid grid-cols-[2fr_6rem_6rem] md:grid-cols-[2fr_6rem_6rem_4fr] gap-2 py-2 border-b border-black/20 items-center hover:bg-primary/30 px-3 cursor-pointer',
                             selectedFile === item?.fileId && 'bg-primary text-white hover:!bg-primary'
                         )
                     "
@@ -462,16 +466,16 @@ const handleShowSpeedInfo = () => {
                         </Button>
                         <div class="truncate">{{ item?.file?.name }}</div>
                     </div>
-                    <div>{{ filesize(item?.file?.size) }}</div>
+                    <div>{{ getFileSize(item?.file?.size) }}</div>
                     <div>
                         {{
-                            `${filesize(
+                            `${getFileSize(
                                 (Object.entries(item?.uploadInfo?.chunks || {})?.filter(
                                     ([, chunk]) => chunk.status === 'success' && dayjs().unix() - 60 < chunk.createdAt
                                 )?.length /
                                     60) *
                                     (item?.uploadInfo?.ChunkSize || 0)
-                            )}/s`
+                            )} /s`
                         }}
                     </div>
                     <div
@@ -519,7 +523,7 @@ const handleShowSpeedInfo = () => {
             <div>上传详情</div>
             <div class="grid grid-cols-3 text-sm gap-3">
                 <div>
-                    区块： {{ selectedUploadfile?.uploadInfo?.chunkLength }} x {{ filesize(selectedUploadfile?.uploadInfo?.ChunkSize as number) }}
+                    区块： {{ selectedUploadfile?.uploadInfo?.chunkLength }} x {{ getFileSize(selectedUploadfile?.uploadInfo?.ChunkSize as number) }}
                 </div>
                 <div class="truncate col-span-2">hash: {{ selectedUploadfile?.hash }}</div>
                 <div>已完成: {{ selectedUploadfileChunk?.filter((r) => r.status === 'success')?.length || 0 }}</div>

front/lib/getFileSize.ts

@@ -0,0 +1,7 @@
+import { filesize } from 'filesize'
+
+const getFileSize = (size: number) => {
+    return filesize(size, { standard: 'jedec' })
+}
+
+export default getFileSize

front/pages/about.vue

@@ -5,7 +5,7 @@ import { cx } from 'class-variance-authority'
 import { useQuery } from '@tanstack/vue-query'
 import { Skeleton } from '@/components/ui/skeleton'
 import AboutChartTooltip from '@/components/AboutChartTooltip.vue'
-import { filesize } from 'filesize'
+import getFileSize from '~/lib/getFileSize'
 import SparkMD5 from 'spark-md5'
 import useMyAppConfig from '@/composables/useMyAppConfig'
 import dayjs from 'dayjs'
@@ -137,8 +137,8 @@ const users = computed(() => {
                 <div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
                     <div class="opacity-75 text-xs">{{ t('about.storage') }}</div>
                     <div class="text-right flex flex-row items-baseline">
-                        <span class="text-lg font-semibold">{{ filesize(currentFileSize ?? 0) }}</span>
-                        <span class="text-md opacity-75">/ {{ filesize(data?.max_limit?.file_size ?? 0) }}</span>
+                        <span class="text-lg font-semibold">{{ getFileSize(currentFileSize ?? 0) }}</span>
+                        <span class="text-md opacity-75">/ {{ getFileSize(data?.max_limit?.file_size ?? 0) }}</span>
                     </div>
                     <Progress class="h-1" :model-value="(currentFileSize / (data?.max_limit?.file_size ?? 0)) * 100" />
                 </div>