feat: introduce BaseImg component

frontend_nuxt/components/BaseImage.vue

@@ -1,45 +0,0 @@
-<template>
-  <NuxtImg
-    v-bind="attrs"
-    :src="src"
-    :alt="alt"
-    loading="lazy"
-    :placeholder="placeholder"
-    placeholder-class="base-image-ph"
-    @load="onLoad"
-    :class="['base-image', attrs.class, { 'is-loaded': loaded }]"
-  />
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { useAttrs } from 'vue'
-
-const props = defineProps({
-  src: { type: String, required: true },
-  alt: { type: String, default: '' },
-})
-
-const attrs = useAttrs()
-const loaded = ref(false)
-const img = useImage()
-const placeholder = computed(() => img(props.src, { w: 16, h: 16, f: 'webp', q: 40, blur: 2 }))
-
-function onLoad() {
-  loaded.value = true
-}
-</script>
-
-<style scoped>
-.base-image {
-  opacity: 0;
-  transition: opacity 0.25s;
-}
-.base-image.is-loaded {
-  opacity: 1;
-}
-:deep(img.base-image-ph) {
-  filter: blur(10px);
-  transform: scale(1.03);
-}
-</style>

frontend_nuxt/components/BaseImg.vue

@@ -0,0 +1,44 @@
+<template>
+  <NuxtImg
+    :src="src"
+    :alt="alt"
+    :placeholder="placeholder"
+    placeholder-class="ph"
+    :loading="loading"
+    @load="loaded = true"
+    :class="['base-img', { 'is-loaded': loaded }]"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+  loading: { type: String, default: 'lazy' },
+  placeholderOptions: {
+    type: Object,
+    default: () => ({ w: 16, h: 16, f: 'webp', q: 40, blur: 2 }),
+  },
+})
+
+const img = useImage()
+const loaded = ref(false)
+const placeholder = computed(() => img(props.src, props.placeholderOptions))
+</script>
+
+<style scoped>
+.base-img {
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+.base-img.is-loaded {
+  opacity: 1;
+}
+:deep(img.ph) {
+  filter: blur(10px);
+  transform: scale(1.03);
+}
+</style>

frontend_nuxt/components/HeaderComponent.vue

@@ -63,7 +63,7 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <img class="avatar-img" :src="avatar" alt="avatar" />
+                <BaseImg class="avatar-img" :src="avatar" alt="avatar" width="32" height="32" />
                 <i class="fas fa-caret-down dropdown-icon"></i>
               </div>
             </template>
@@ -87,6 +87,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
+import BaseImg from '~/components/BaseImg.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
@@ -149,13 +150,14 @@ const copyInviteLink = async () => {
     if (res.ok) {
       const data = await res.json()
       const inviteLink = data.token ? `${WEBSITE_BASE_URL}/signup?invite_token=${data.token}` : ''
-      /** 
+      /**
        * navigator.clipboard在webkit中有点奇怪的行为
        * https://stackoverflow.com/questions/62327358/javascript-clipboard-api-safari-ios-notallowederror-message
        * https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/
-      */
+       */
       setTimeout(() => {
-        navigator.clipboard.writeText(inviteLink)
+        navigator.clipboard
+          .writeText(inviteLink)
           .then(() => {
             toast.success('邀请链接已复制')
           })

frontend_nuxt/nuxt.config.ts

@@ -2,7 +2,6 @@ import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   ssr: true,
-  modules: ['@nuxt/image'],
   runtimeConfig: {
     public: {
       apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || '',
@@ -14,6 +13,7 @@ export default defineNuxtConfig({
     },
   },
   css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],
+  modules: ['@nuxt/image'],
   app: {
     pageTransition: { name: 'page', mode: 'out-in' },
     head: {

frontend_nuxt/pages/index.vue

@@ -88,7 +88,7 @@
               class="article-member-avatar-item"
               :to="`/users/${member.id}`"
             >
-              <BaseImage class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
+              <img class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
             </NuxtLink>
           </div>