diff --git a/src/components/userAvatar/tua-detail-card.vue b/src/components/userAvatar/tua-detail-card.vue
index 17d1a4ab..90eb831f 100644
--- a/src/components/userAvatar/tua-detail-card.vue
+++ b/src/components/userAvatar/tua-detail-card.vue
@@ -89,18 +89,18 @@ import TuaDcRelic from "./tua-dc-relic.vue";
 import TuaDcTalents from "./tua-dc-talents.vue";
 import TuaDcWeapon from "./tua-dc-weapon.vue";
 
-import { AppCharacterData } from "@/data/index.js";
-
 type fixedLenArr<T, N extends number> = [T, ...Array<T>] & { length: N };
 type RelicList = fixedLenArr<TGApp.Game.Avatar.Relic | false, 5>;
-type TuaDetailCardProps = { avatar: TGApp.Sqlite.Character.TableTrans };
+type TuaDetailCardProps = {
+  avatar: TGApp.Sqlite.Character.TableTrans;
+  costume: TGApp.App.Character.Costume | false;
+};
 
 const props = defineProps<TuaDetailCardProps>();
 const userStore = useUserStore();
 
 const fullIcon = computed<string>(() => {
-  const costume = getCostume();
-  if (costume) return `/WIKI/costume/${costume.id}_full.webp`;
+  if (props.costume) return `/WIKI/costume/${props.costume.id}_full.webp`;
   return props.avatar.avatar.image;
 });
 const relicList = computed<RelicList>(() => {
@@ -133,18 +133,6 @@ async function share(): Promise<void> {
   await generateShareImg(fileName, shareBox);
   loading.value = false;
 }
-
-function getCostume(): TGApp.App.Character.Costume | false {
-  if (props.avatar.costumes.length === 0) return false;
-  const findC = AppCharacterData.find((i) => i.id === props.avatar.cid);
-  if (!findC) return false;
-  let res: TGApp.App.Character.Costume | false = false;
-  for (const costume of props.avatar.costumes) {
-    const findCostume = findC.costumes.find((i) => i.id === costume.id);
-    if (findCostume !== undefined && !findCostume.isDefault) return findCostume;
-  }
-  return res;
-}
 </script>
 <style lang="css" scoped>
 .tua-dc-container {
diff --git a/src/components/userAvatar/tua-detail-overlay.vue b/src/components/userAvatar/tua-detail-overlay.vue
index 6f586778..216b76a9 100644
--- a/src/components/userAvatar/tua-detail-overlay.vue
+++ b/src/components/userAvatar/tua-detail-overlay.vue
@@ -4,22 +4,29 @@
       <div class="tdo-avatars-container">
         <v-tabs
           v-model="avatarTab"
-          density="compact"
           center-active
+          density="compact"
           slider-color="var(--tgc-od-white)"
         >
           <v-tab
             v-for="avatar in avatars"
             :key="avatar.avatar.id"
+            :title="avatar.avatar.name"
             :value="avatar.avatar.id"
             @click="emits('toAvatar', avatar)"
-            :title="avatar.avatar.name"
           >
             <div
-              class="tdo-avatar"
               :class="{ selected: props.avatar.avatar.id === avatar.avatar.id }"
+              class="tdo-avatar"
             >
-              <img :src="avatar.avatar.side_icon" :alt="avatar.avatar.name" />
+              <img
+                :alt="avatar.avatar.name"
+                :src="
+                  props.avatar.avatar.id === avatar.avatar.id && costume
+                    ? `/WIKI/costume/${costume.id}_side.webp`
+                    : avatar.avatar.side_icon
+                "
+              />
             </div>
           </v-tab>
         </v-tabs>
@@ -28,15 +35,15 @@
         <div class="tdo-box-arrow" @click="handleClick('left')">
           <img alt="left" src="@/assets/icons/arrow-right.svg" />
         </div>
-        <v-window class="tdo-box-container" v-model="modeTab">
+        <v-window v-model="modeTab" class="tdo-box-container">
           <v-window-item value="classic">
             <TucDetailOld :model-value="avatar" />
           </v-window-item>
           <v-window-item value="card">
-            <TucDetailCard :avatar />
+            <TucDetailCard :avatar :costume />
           </v-window-item>
           <v-window-item value="dev">
-            <TuaDetailCard :avatar />
+            <TuaDetailCard :avatar :costume />
           </v-window-item>
         </v-window>
         <div class="tdo-box-arrow" @click="handleClick('right')">
@@ -54,6 +61,8 @@ import { computed, ref, watch } from "vue";
 
 import TuaDetailCard from "./tua-detail-card.vue";
 
+import { AppCharacterData } from "@/data/index.js";
+
 type TuaDetailOverlayProps = {
   avatar: TGApp.Sqlite.Character.TableTrans;
   avatars: Array<TGApp.Sqlite.Character.TableTrans>;
@@ -69,6 +78,7 @@ const visible = defineModel<boolean>();
 const modeTab = defineModel<"classic" | "card" | "dev">("mode");
 const avatarTab = ref<number>();
 
+const costume = computed<TGApp.App.Character.Costume | false>(() => getCostume());
 const avatarsWidth = computed<string>(() => {
   switch (modeTab.value) {
     case "classic":
@@ -93,6 +103,18 @@ function handleClick(pos: "left" | "right"): void {
   if (pos === "left") emits("toNext", false);
   else emits("toNext", true);
 }
+
+function getCostume(): TGApp.App.Character.Costume | false {
+  if (props.avatar.costumes.length === 0) return false;
+  const findC = AppCharacterData.find((i) => i.id === props.avatar.cid);
+  if (!findC) return false;
+  let res: TGApp.App.Character.Costume | false = false;
+  for (const costume of props.avatar.costumes) {
+    const findCostume = findC.costumes.find((i) => i.id === costume.id);
+    if (findCostume !== undefined && !findCostume.isDefault) return findCostume;
+  }
+  return res;
+}
 </script>
 <style lang="css" scoped>
 .tdo-box {
diff --git a/src/components/userAvatar/uav-select-chips.vue b/src/components/userAvatar/uav-select-chips.vue
index a1d3c902..72bb6b02 100644
--- a/src/components/userAvatar/uav-select-chips.vue
+++ b/src/components/userAvatar/uav-select-chips.vue
@@ -46,7 +46,7 @@
 
 <script lang="ts" setup>
 import TMiImg from "@comp/app/t-mi-img.vue";
-import { computed, defineProps } from "vue";
+import { computed } from "vue";
 
 export type UavSelectChipsItem = {
   /** 渲染文本 */
diff --git a/src/components/userAvatarCard/tuc-detail-card.vue b/src/components/userAvatarCard/tuc-detail-card.vue
index 9e66acfa..52d2f2bf 100644
--- a/src/components/userAvatarCard/tuc-detail-card.vue
+++ b/src/components/userAvatarCard/tuc-detail-card.vue
@@ -4,7 +4,7 @@
     <div class="duc-doc-bgc" />
     <!-- 左上角色跟武器 -->
     <div class="duc-doc-lt">
-      <DucDetailOlt :costume :data="props.avatar.avatar" mode="character" />
+      <DucDetailOlt :costume="props.costume" :data="props.avatar.avatar" mode="character" />
       <DucDetailOlt :data="props.avatar.weapon" mode="weapon" />
       <div class="duc-relic">
         <DucDetailRelic
@@ -51,9 +51,10 @@ import DucDetailOlt from "./duc-detail-olt.vue";
 import DucDetailOrt from "./duc-detail-ort.vue";
 import DucDetailRelic from "./duc-detail-relic.vue";
 
-import { AppCharacterData } from "@/data/index.js";
-
-type DucDetailOverlayProps = { avatar: TGApp.Sqlite.Character.TableTrans };
+type DucDetailOverlayProps = {
+  avatar: TGApp.Sqlite.Character.TableTrans;
+  costume: TGApp.App.Character.Costume | false;
+};
 type fixedLenArr<T, N extends number> = [T, ...Array<T>] & { length: N };
 type RelicList = fixedLenArr<TGApp.Game.Avatar.Relic | false, 5>;
 
@@ -72,7 +73,6 @@ const relicList = computed<RelicList>(() => {
 });
 
 const nameCard = ref<string | false>(false);
-const costume = ref<TGApp.App.Character.Costume | false>(false);
 
 onMounted(async () => {
   version.value = await app.getVersion();
@@ -83,7 +83,6 @@ watch(() => props.avatar, loadData);
 function loadData(): void {
   const card = TSUserAvatar.getAvatarCard(props.avatar.cid);
   nameCard.value = `/WIKI/nameCard/profile/${card}.webp`;
-  costume.value = getCostume();
 }
 
 async function share(): Promise<void> {
@@ -97,18 +96,6 @@ async function share(): Promise<void> {
   await generateShareImg(fileName, detailBox);
   loading.value = false;
 }
-
-function getCostume(): TGApp.App.Character.Costume | false {
-  if (props.avatar.costumes.length === 0) return false;
-  const findC = AppCharacterData.find((i) => i.id === props.avatar.cid);
-  if (!findC) return false;
-  let res: TGApp.App.Character.Costume | false = false;
-  for (const costume of props.avatar.costumes) {
-    const findCostume = findC.costumes.find((i) => i.id === costume.id);
-    if (findCostume !== undefined && !findCostume.isDefault) return findCostume;
-  }
-  return res;
-}
 </script>
 <style lang="css" scoped>
 .duc-do-container {