From c9aafac5d9277566b9e5e962301996bf96e6f935 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Thu, 26 Dec 2024 19:54:37 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app/t-sidebar.vue          | 13 ++++++------
 src/components/userCombat/tuc-avatars.vue | 25 +++++++++++++----------
 src/components/userCombat/tuc-round.vue   |  2 +-
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/app/t-sidebar.vue b/src/components/app/t-sidebar.vue
index d07eade8..01824ae8 100644
--- a/src/components/app/t-sidebar.vue
+++ b/src/components/app/t-sidebar.vue
@@ -98,13 +98,12 @@
               <img src="/source/UI/wikiWeapon.webp" alt="weaponIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
-          <v-list-item
-            class="side-item-menu"
-            :link="true"
-            href="/wiki/nameCard"
-            prepend-icon="mdi-credit-card-outline"
-            title="名片图鉴"
-          />
+          <v-list-item class="side-item-menu" :link="true" href="/wiki/nameCard">
+            <template #default>
+              <v-icon size="20" color="var(--tgc-yellow-2)">mdi-credit-card-outline</v-icon>
+              <span style="margin-left: 10px; font-size: 0.8125rem">名片图鉴</span>
+            </template>
+          </v-list-item>
           <v-list-item class="side-item-menu" title="材料图鉴" :link="true" href="/wiki/material">
             <template #prepend>
               <img src="/source/UI/wikiGCG.webp" alt="gcgIcon" class="side-icon-menu" />
diff --git a/src/components/userCombat/tuc-avatars.vue b/src/components/userCombat/tuc-avatars.vue
index 4d66af1f..ccbd1085 100644
--- a/src/components/userCombat/tuc-avatars.vue
+++ b/src/components/userCombat/tuc-avatars.vue
@@ -1,21 +1,16 @@
 <template>
-  <div class="tuca-box">
+  <div class="tuca-box" :class="{ grid: props.detail }">
     <TItemBox v-for="(item, idx) in props.modelValue" :key="idx" :model-value="getItemBox(item)" />
   </div>
 </template>
 <script lang="ts" setup>
 import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
-import { computed } from "vue";
 
 import { getZhElement } from "@/utils/toolFunc.js";
 
-type TucAvatarsProps = { modelValue: Array<TGApp.Game.Combat.Avatar> };
+type TucAvatarsProps = { modelValue: Array<TGApp.Game.Combat.Avatar>; detail: boolean };
 
 const props = defineProps<TucAvatarsProps>();
-const columnCnt = computed<number>(() => {
-  if (props.modelValue.length % 2 === 1) return (props.modelValue.length + 1) / 2;
-  return props.modelValue.length / 2;
-});
 
 function getItemBox(item: TGApp.Game.Combat.Avatar): TItemBoxData {
   return {
@@ -37,9 +32,17 @@ function getItemBox(item: TGApp.Game.Combat.Avatar): TItemBoxData {
 </script>
 <style lang="css" scoped>
 .tuca-box {
-  display: grid;
-  width: 100%;
-  grid-gap: 10px;
-  grid-template-columns: repeat(v-bind(columnCnt), 1fr);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+
+  &.grid {
+    display: grid;
+    width: 100%;
+    grid-gap: 10px;
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 </style>
diff --git a/src/components/userCombat/tuc-round.vue b/src/components/userCombat/tuc-round.vue
index 66e7b9e9..973a94a0 100644
--- a/src/components/userCombat/tuc-round.vue
+++ b/src/components/userCombat/tuc-round.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="tucr-content">
       <TucSub title="出演角色" class="main">
-        <TucAvatars :model-value="modelValue.avatars" />
+        <TucAvatars :model-value="modelValue.avatars" :detail="true" />
       </TucSub>
       <TucSub title="辉彩祝福" class="main">
         <TucBuffs :model-value="modelValue.splendour_buff" />