refactor(front): replace MD5 with SHA1 for user avatar generation and update related components to use native hash calculation

front/components/About/AboutBaseInfo.vue

@@ -2,12 +2,12 @@
 import { useQuery } from '@tanstack/vue-query'
 import { Skeleton } from '@/components/ui/skeleton'
 import getFileSize from '~/lib/getFileSize'
-import SparkMD5 from 'spark-md5'
 import useMyAppConfig from '@/composables/useMyAppConfig'
 import { useFeatureMeta } from '@/composables/useFeatureMeta'
 import Progress from '~/components/ui/progress/Progress.vue'
 import renderI18n from '~/lib/renderI18n'
 import { I18nT } from 'vue-i18n'
+import { calcNativeHash } from '~/lib/calcFileHash'
 
 const { locale } = useI18n()
 const appConfig = useMyAppConfig()
@@ -34,9 +34,12 @@ const { data, isLoading } = useQuery({
 })
 const { t } = useI18n()
 
-const genUserAvatar = (email: string) => {
-    return `https://www.gravatar.com/avatar/${SparkMD5.hash(email)}?d=retro`
-}
+const { state: userAvatar } = useAsyncState(async () => {
+    if (!data?.value?.email) return null
+    const buffer = new TextEncoder().encode(data?.value?.email)
+    const hash = await calcNativeHash(buffer)
+    return `https://www.gravatar.com/avatar/${hash}?d=retro`
+}, null)
 </script>
 
 <template>
@@ -88,7 +91,7 @@ const genUserAvatar = (email: string) => {
                     "
                 >
                     <Avatar class="size-10">
-                        <AvatarImage v-if="!!data?.avatar || !!data?.email" :src="data?.avatar || genUserAvatar(data?.email as string)" />
+                        <AvatarImage v-if="!!data?.avatar || !!data?.email" :src="data?.avatar || (userAvatar as string)" />
                         <AvatarFallback class="bg-black/10 font-bold">
                             {{ data?.name?.charAt(0)?.toUpperCase() }}
                         </AvatarFallback>

front/lib/calcFileHash.ts

@@ -13,10 +13,7 @@ const calcFileHash = async (props: CalcFileHashProps) => {
 
     if (engine === 'native') {
         const buffer = await file.arrayBuffer()
-        const hashBuffer = await crypto.subtle.digest('SHA-1', buffer)
-        return Array.from(new Uint8Array(hashBuffer))
-            .map((b) => b.toString(16).padStart(2, '0'))
-            .join('')
+        return calcNativeHash(buffer)
     }
 
     const chunkBytes = chunkSize * 1024 * 1024
@@ -31,4 +28,11 @@ const calcFileHash = async (props: CalcFileHashProps) => {
     return hasher.digest('hex')
 }
 
+export const calcNativeHash = async (buffer: BufferSource) => {
+    const hashBuffer = await crypto.subtle.digest('SHA-1', buffer)
+    return Array.from(new Uint8Array(hashBuffer))
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('')
+}
+
 export default calcFileHash

front/package.json

@@ -37,7 +37,7 @@
         "clsx": "^2.1.1",
         "dayjs": "^1.11.20",
         "filesize": "^10.1.6",
-        "js-md5": "^0.8.3",
+        "hash-wasm": "^4.12.0",
         "lodash-es": "^4.18.1",
         "lucide-vue-next": "^0.542.0",
         "markdown-it": "^14.1.1",
@@ -50,7 +50,6 @@
         "qrcode": "^1.5.4",
         "reka-ui": "^2.9.3",
         "shadcn-nuxt": "2.0.1",
-        "spark-md5": "^3.0.2",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.2",
         "tiptap-markdown": "^0.9.0",
@@ -69,10 +68,10 @@
         "@types/lodash-es": "^4.17.12",
         "@types/markdown-it": "^14.1.2",
         "@types/qrcode": "^1.5.6",
-        "@types/spark-md5": "^3.0.5",
         "@vueuse/core": "^13.9.0",
         "@vueuse/nuxt": "^13.9.0",
         "typescript": "^5.9.3",
+        "vitest": "^4.1.3",
         "vue3-pixi-nuxt": "1.0.0-beta.2"
     }
 }