🍱 缓存

src/components/app/t-mi-img.vue

@@ -33,6 +33,10 @@ const localUrl = ref<string>();
 
 onMounted(async () => {
   if (!props.src) return;
+  if (!props.src.startsWith("http")) {
+    localUrl.value = props.src;
+    return;
+  }
   const link = props.ori ? props.src : appStore.getImageUrl(props.src);
   localUrl.value = await saveImgLocal(link);
 });

src/components/pageHome/ph-comp-pool.vue

@@ -9,7 +9,7 @@
       <div class="pool-grid">
         <div v-for="pool in poolSelect" :key="pool.postId" class="pool-card">
           <div class="pool-cover" @click="createPost(pool.postId, pool.title)">
-            <img :src="pool.cover" alt="cover" />
+            <TMiImg :src="pool.cover" alt="cover" :ori="true" />
           </div>
           <div class="pool-bottom">
             <div class="pool-character">
@@ -56,6 +56,7 @@
 </template>
 <script lang="ts" setup>
 import TItembox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
+import TMiImg from "@comp/app/t-mi-img.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import Mys from "@Mys/index.js";
 import { storeToRefs } from "pinia";

src/components/pageHome/ph-position-card.vue

@@ -3,7 +3,7 @@
     <div class="top">
       <div class="main">
         <div class="left" @click="openPosition(props.position)">
-          <img :src="props.position.icon" alt="icon" />
+          <TMiImg :ori="true" :src="props.position.icon" alt="icon" />
         </div>
         <div class="right">
           <div class="title">{{ props.position.title }}</div>
@@ -38,6 +38,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import type { PositionItem } from "@comp/pageHome/ph-comp-position.vue";
 

src/components/viewPost/vp-reply-item.vue

@@ -5,17 +5,16 @@
       v-if="props.modelValue.user.reply_bubble !== null"
       :title="props.modelValue.user.reply_bubble.name"
     >
-      <img :src="props.modelValue.user.reply_bubble.url" alt="bubble" />
+      <TMiImg :ori="true" :src="props.modelValue.user.reply_bubble.url" alt="bubble" />
     </div>
     <div class="tpr-user">
       <div class="tpru-left">
-        <img :src="props.modelValue.user.avatar_url" alt="avatar" class="avatar" />
-        <img
-          :src="props.modelValue.user.pendant"
-          v-if="props.modelValue.user.pendant !== ''"
-          alt="pendant"
-          class="pendant"
-        />
+        <div class="avatar">
+          <TMiImg :ori="true" :src="props.modelValue.user.avatar_url" alt="avatar" />
+        </div>
+        <div class="pendant" v-if="props.modelValue.user.pendant !== ''">
+          <TMiImg :ori="true" :src="props.modelValue.user.pendant" alt="pendant" />
+        </div>
       </div>
       <div class="tpru-right" :title="props.modelValue.user.nickname">
         <span>{{ props.modelValue.user.nickname }}</span>
@@ -101,6 +100,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
 import showDialog from "@comp/func/dialog.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import { event, path } from "@tauri-apps/api";
@@ -277,19 +277,36 @@ async function exportData(): Promise<void> {
 }
 
 .avatar {
+  position: relative;
+  display: flex;
   width: 30px;
   height: 30px;
-  border-radius: 50%;
-  object-fit: cover;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
 }
 
 .pendant {
   position: absolute;
   top: 0;
   left: 0;
+  display: flex;
   width: 40px;
   height: 40px;
-  object-fit: cover;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
 .level {

src/pages/common/PageHome.vue

@@ -13,7 +13,8 @@
         >
           <template #selection="{ item }">
             <div class="select-item main">
-              <img
+              <TMiImg
+                :ori="true"
                 :src="item.raw.icon"
                 :alt="item.raw.title"
                 :title="item.raw.title"
@@ -58,6 +59,7 @@
 </template>
 <script lang="ts" setup>
 import TGameNav from "@comp/app/t-gameNav.vue";
+import TMiImg from "@comp/app/t-mi-img.vue";
 import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import PhCompCalendar from "@comp/pageHome/ph-comp-calendar.vue";