♻️ 基础组件封装

src/components/pageHome/ph-calendar-birth.vue

@@ -6,20 +6,21 @@
     </div>
     <div class="tcb-top-active" v-else>
       <span>今天是</span>
-      <img
+      <TMiImg
         v-for="i in cur"
         :key="i.role_id"
         class="tcb-cur"
         :alt="i.name"
         :src="i.head_icon"
         :title="i.name"
+        :ori="true"
       />
       <span>的生日哦~</span>
       <img @click="toBirth(true)" src="/source/UI/act_birthday.png" alt="empty" class="active" />
     </div>
     <div>即将到来：{{ next[0].role_birthday }}</div>
     <div v-for="i in next" :key="i.role_id" class="tcb-item">
-      <img :src="i.head_icon" :alt="i.name" @click="toBirth(i)" :title="i.name" />
+      <TMiImg :src="i.head_icon" :alt="i.name" @click="toBirth(i)" :title="i.name" :ori="true" />
       <div class="tcb-item-info">
         <span>{{ i.name }} 所属：{{ i.belong === "" ? "未知" : i.belong }}</span>
         <span>{{ parseDesc(i.introduce) }}</span>
@@ -28,6 +29,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
 import TSAvatarBirth from "@Sqlite/modules/avatarBirth.js";
 import { storeToRefs } from "pinia";
 import { onBeforeMount, ref, shallowRef } from "vue";

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">
@@ -25,7 +25,7 @@
                     v-if="character.info"
                     :model-value="getCBox(character.info)"
                   />
-                  <img v-else :src="character.icon" alt="character" />
+                  <TMiImg v-else :src="character.icon" alt="character" />
                 </div>
               </div>
             </div>
@@ -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 :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";
 
@@ -102,6 +103,7 @@ async function openPosition(card: TGApp.Plugins.Mys.Position.RenderCard): Promis
       width: 40px;
       height: 40px;
       border-radius: 3px;
+      background: var(--box-bg-2);
       object-fit: contain;
 
       img {