🎨 优化组件结构，降低dom渲染

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

@@ -1,41 +1,44 @@
 <template>
   <div class="tua-al-container">
     <div v-if="ncData !== undefined" class="tua-al-nc">
-      <TopNameCard :data="ncData" @selected="showNc = true" :finish="isFinish" />
+      <TopNameCard :data="ncData" :finish="isFinish" @selected="showNc = true" />
     </div>
-    <v-virtual-scroll :items="renderAchi" :item-height="60" class="tua-al-list">
+    <v-virtual-scroll :item-height="60" :items="renderAchi" class="tua-al-list">
       <template #default="{ item }">
         <TuaAchi :modelValue="item" @select-achi="selectAchi" />
       </template>
     </v-virtual-scroll>
-    <ToNameCard v-model="showNc" :data="ncData" v-if="ncData" />
-    <ToAchiInfo
+    <ToNameCard v-if="ncData" v-model="showNc" :data="ncData" />
+    <TuaAchiOverlay
       v-if="selectedAchi"
       v-model="showOverlay"
       :data="selectedAchi"
+      @search="handleSearch"
       @select-series="selectSeries"
     >
       <template #left>
         <div class="card-arrow" @click="switchAchiInfo(false)">
-          <img src="@/assets/icons/arrow-right.svg" alt="right" />
+          <img alt="right" src="@/assets/icons/arrow-right.svg" />
         </div>
       </template>
       <template #right>
         <div class="card-arrow" @click="switchAchiInfo(true)">
-          <img src="@/assets/icons/arrow-right.svg" alt="right" />
+          <img alt="right" src="@/assets/icons/arrow-right.svg" />
         </div>
       </template>
-    </ToAchiInfo>
+    </TuaAchiOverlay>
+    <VpOverlaySearch v-model="showSearch" :gid="2" :keyword="searchWd" />
   </div>
 </template>
 <script lang="ts" setup>
 import ToNameCard from "@comp/app/to-nameCard.vue";
 import TopNameCard from "@comp/app/top-nameCard.vue";
 import showSnackbar from "@comp/func/snackbar.js";
+import VpOverlaySearch from "@comp/viewPost/vp-overlay-search.vue";
 import TSUserAchi from "@Sqlm/userAchi.js";
 import { computed, onMounted, ref, shallowRef, watch } from "vue";
 
-import ToAchiInfo from "./tua-achi-overlay.vue";
+import TuaAchiOverlay from "./tua-achi-overlay.vue";
 import TuaAchi from "./tua-achi.vue";
 
 import { AppAchievementSeriesData, AppNameCardsData } from "@/data/index.js";
@@ -59,6 +62,8 @@ const nameCard = ref<string>();
 const showNc = ref<boolean>(false);
 const showOverlay = ref<boolean>(false);
 const isFinish = ref<boolean>(false);
+const searchWd = ref<string>();
+const showSearch = ref<boolean>(false);
 
 const ncData = shallowRef<TGApp.App.NameCard.Item>();
 const achievements = shallowRef<Array<TGApp.App.Achievement.RenderItem>>([]);
@@ -74,6 +79,11 @@ onMounted(async () => await loadAchi());
 watch(() => [props.search, props.isSearch], searchAchi);
 watch(() => [props.series, props.uid], loadAchi);
 
+function handleSearch(kw: string): void {
+  searchWd.value = kw;
+  showSearch.value = true;
+}
+
 async function searchAchi(): Promise<void> {
   if (!props.isSearch) return;
   if (!props.search || props.search === "") {

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

@@ -56,31 +56,28 @@
       <slot name="right"></slot>
     </div>
   </TOverlay>
-  <VpOverlaySearch v-model="showSearch" :keyword="search" :gid="2" />
 </template>
 <script lang="ts" setup>
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
-import VpOverlaySearch from "@comp/viewPost/vp-overlay-search.vue";
 import TGLogger from "@utils/TGLogger.js";
 import { generateShareImg } from "@utils/TGShare.js";
-import { ref } from "vue";
 
 import { AppAchievementSeriesData } from "@/data/index.js";
 
 type ToAchiInfoProps = { data: TGApp.App.Achievement.RenderItem };
-type ToAchiInfoEmits = (e: "select-series", v: number) => void;
+type ToAchiInfoEmits = {
+  (e: "select-series", v: number): void;
+  (e: "search", v: string): void;
+};
 
 const props = defineProps<ToAchiInfoProps>();
 const emits = defineEmits<ToAchiInfoEmits>();
 const visible = defineModel<boolean>();
-const showSearch = ref<boolean>(false);
-const search = ref<string>();
 
 async function searchDirect(word: string): Promise<void> {
   await TGLogger.Info(`[ToAchiInfo][${props.data.id}][Search] 查询 ${word}`);
-  search.value = word;
-  showSearch.value = true;
+  emits("search", word);
 }
 
 async function share(): Promise<void> {