🎨 虚拟列表性能优化

src/components/userAchi/tua-achi-list.vue

@@ -3,10 +3,12 @@
     <div v-if="ncData !== undefined">
       <TopNameCard :data="ncData" @selected="showNc = true" />
     </div>
-    <!-- todo 虚拟列表优化 -->
-    <div v-for="(item, index) in renderAchi" :key="index">
+    <v-virtual-scroll :items="renderAchi" :item-height="60" class="tua-al-list">
+      <template #default="{ item }">
         <TuaAchi :modelValue="item" @select-achi="selectAchi" />
-    </div>
+        <div style="height: 10px" />
+      </template>
+    </v-virtual-scroll>
     <ToNameCard v-model="showNc" :data="ncData" v-if="ncData" />
     <ToAchiInfo
       v-if="selectedAchi"
@@ -144,11 +146,14 @@ function switchAchiInfo(next: boolean): void {
   width: 100%;
   height: 100%;
   flex-direction: column;
-  padding-right: 10px;
-  overflow-y: scroll;
+  overflow-y: auto;
   row-gap: 10px;
 }
 
+.tua-al-list {
+  padding-right: 10px;
+}
+
 .card-arrow {
   position: relative;
   display: flex;

src/components/userAchi/tua-achi.vue

@@ -115,6 +115,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
 .achi-container {
   position: relative;
   display: flex;
+  height: 60px;
   align-items: center;
   justify-content: space-between;
   padding: 10px;

src/pages/WIKI/Namecard.vue

@@ -4,7 +4,7 @@
       v-model="search"
       prepend-inner-icon="mdi-magnify"
       label="搜索"
-      hide-details
+      :hide-details="true"
       variant="outlined"
       @click:prepend-inner="searchNamecard"
       @keyup.enter="searchNamecard"

src/pages/common/Achievements.vue

@@ -31,16 +31,17 @@
     </template>
   </v-app-bar>
   <div class="wrap">
-    <div class="left-wrap">
+    <v-virtual-scroll class="left-wrap" :items="seriesList" item-height="60">
+      <template #default="{ item }">
         <TuaSeries
-        v-for="(series, index) in seriesList"
-        :key="index"
-        @click="selectSeries(series)"
+          @click="selectSeries(item)"
           v-model:cur="selectedSeries"
           :uid="uidCur"
-        :series="series"
+          :series="item"
         />
-    </div>
+        <div style="height: 10px" />
+      </template>
+    </v-virtual-scroll>
     <TuaAchiList
       :uid="uidCur"
       :hideFin="hideFin"
@@ -352,12 +353,9 @@ async function deleteUid(): Promise<void> {
 }
 
 .left-wrap {
-  display: flex;
   width: 400px;
   height: 100%;
-  flex-direction: column;
   padding-right: 10px;
   overflow-y: auto;
-  row-gap: 10px;
 }
 </style>