From cb98a236c6a2ef9eba8af1ae9fa2205bbab7bbe7 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Mon, 17 Jul 2023 15:04:58 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E6=8D=A2=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E7=A7=8D=E6=B8=B2=E6=9F=93=E6=96=B9=E5=BC=8F=20#32?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hutaoAbyss/hta-tab-team.vue | 34 ++++++++++------------
 src/components/hutaoAbyss/hta-tab-up.vue   | 31 +++++++++-----------
 src/components/hutaoAbyss/hta-tab-use.vue  | 29 +++++++++---------
 3 files changed, 43 insertions(+), 51 deletions(-)

diff --git a/src/components/hutaoAbyss/hta-tab-team.vue b/src/components/hutaoAbyss/hta-tab-team.vue
index c574ffc1..2eced328 100644
--- a/src/components/hutaoAbyss/hta-tab-team.vue
+++ b/src/components/hutaoAbyss/hta-tab-team.vue
@@ -7,11 +7,15 @@
       <v-tab value="12">第12层</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="hta-tt-window">
-      <v-window-item :value="tab">
+      <v-window-item
+        v-for="selectItem in select"
+        :key="selectItem.Floor"
+        :value="selectItem.Floor.toString()"
+      >
         <div v-if="select" class="hta-tt-flex">
           <div class="hta-tuf-box">
             <div class="hta-tuf-title">上半</div>
-            <div v-for="items in select.Up" :key="items.Rate" class="hta-tuf-item">
+            <div v-for="items in selectItem.Up" :key="items.Rate" class="hta-tuf-item">
               <div class="hta-tuf-item-icons">
                 <TibWikiAbyss2
                   v-for="item in items.Item.split(',')"
@@ -24,7 +28,7 @@
           </div>
           <div class="hta-tuf-box">
             <div class="hta-tuf-title">下半</div>
-            <div v-for="items in select.Down" :key="items.Rate" class="hta-tuf-item">
+            <div v-for="items in selectItem.Down" :key="items.Rate" class="hta-tuf-item">
               <div class="hta-tuf-item-icons">
                 <TibWikiAbyss2
                   v-for="item in items.Item.split(',')"
@@ -42,7 +46,7 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
 
 interface HtaTabTeamProps {
@@ -53,21 +57,14 @@ const props = defineProps<HtaTabTeamProps>();
 
 // data
 const tab = ref<string>("9");
-const select = ref<TGApp.Plugins.Hutao.Abyss.TeamCombination>();
-
-function loadData(): void {
-  select.value = props.modelValue.filter((item) => item.Floor.toString() === tab.value)?.[0];
-  select.value?.Up.sort((a, b) => b.Rate - a.Rate);
-  select.value?.Down.sort((a, b) => b.Rate - a.Rate);
-}
+const select = ref<TGApp.Plugins.Hutao.Abyss.TeamCombination[]>([]);
 
 onMounted(async () => {
-  loadData();
-});
-
-// 监听 tab 变化
-watch(tab, () => {
-  loadData();
+  props.modelValue.forEach((item) => {
+    item.Up.sort((a, b) => b.Rate - a.Rate);
+    item.Down.sort((a, b) => b.Rate - a.Rate);
+    select.value.push(item);
+  });
 });
 </script>
 <style lang="css" scoped>
@@ -82,7 +79,7 @@ watch(tab, () => {
 .hta-tt-tab {
   position: absolute;
   height: 100%;
-  color: var(--common-text-content);
+  color: var(--common-text-title);
   font-family: var(--font-text);
 }
 
@@ -92,6 +89,7 @@ watch(tab, () => {
   height: 100%;
   max-height: calc(100vh - 130px);
   margin-left: 100px;
+  overflow-x: hidden;
 }
 
 .hta-tt-flex {
diff --git a/src/components/hutaoAbyss/hta-tab-up.vue b/src/components/hutaoAbyss/hta-tab-up.vue
index 5c377976..7a66dfba 100644
--- a/src/components/hutaoAbyss/hta-tab-up.vue
+++ b/src/components/hutaoAbyss/hta-tab-up.vue
@@ -7,9 +7,13 @@
       <v-tab value="12">第12层</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="hta-tu-window">
-      <v-window-item :value="tab">
-        <div v-if="select" class="hta-tu-grid">
-          <TibWikiAbyss v-for="item in select.Ranks" :key="item.Item" :model-value="item" />
+      <v-window-item
+        v-for="selectItem in select"
+        :key="selectItem.Floor"
+        :value="selectItem.Floor.toString()"
+      >
+        <div class="hta-tu-grid">
+          <TibWikiAbyss v-for="item in selectItem.Ranks" :key="item.Item" :model-value="item" />
         </div>
       </v-window-item>
     </v-window>
@@ -17,31 +21,24 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
 
 interface HtaTabUseProps {
-  modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUse[];
+  modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUp[];
 }
 
 const props = defineProps<HtaTabUseProps>();
 
 // data
 const tab = ref<string>("9");
-const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse>();
-
-function loadData(): void {
-  select.value = props.modelValue.filter((item) => item.Floor.toString() === tab.value)?.[0];
-  select.value?.Ranks.sort((a, b) => b.Rate - a.Rate);
-}
+const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUp[]>([]);
 
 onMounted(async () => {
-  loadData();
-});
-
-// 监听 tab 变化
-watch(tab, () => {
-  loadData();
+  props.modelValue.forEach((item) => {
+    item.Ranks.sort((a, b) => b.Rate - a.Rate);
+    select.value.push(item);
+  });
 });
 </script>
 <style lang="css" scoped>
diff --git a/src/components/hutaoAbyss/hta-tab-use.vue b/src/components/hutaoAbyss/hta-tab-use.vue
index 5c377976..9332f4b6 100644
--- a/src/components/hutaoAbyss/hta-tab-use.vue
+++ b/src/components/hutaoAbyss/hta-tab-use.vue
@@ -7,9 +7,13 @@
       <v-tab value="12">第12层</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="hta-tu-window">
-      <v-window-item :value="tab">
-        <div v-if="select" class="hta-tu-grid">
-          <TibWikiAbyss v-for="item in select.Ranks" :key="item.Item" :model-value="item" />
+      <v-window-item
+        v-for="selectItem in select"
+        :key="selectItem.Floor"
+        :value="selectItem.Floor.toString()"
+      >
+        <div class="hta-tu-grid">
+          <TibWikiAbyss v-for="item in selectItem.Ranks" :key="item.Item" :model-value="item" />
         </div>
       </v-window-item>
     </v-window>
@@ -17,7 +21,7 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
 
 interface HtaTabUseProps {
@@ -28,20 +32,13 @@ const props = defineProps<HtaTabUseProps>();
 
 // data
 const tab = ref<string>("9");
-const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse>();
-
-function loadData(): void {
-  select.value = props.modelValue.filter((item) => item.Floor.toString() === tab.value)?.[0];
-  select.value?.Ranks.sort((a, b) => b.Rate - a.Rate);
-}
+const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>([]);
 
 onMounted(async () => {
-  loadData();
-});
-
-// 监听 tab 变化
-watch(tab, () => {
-  loadData();
+  props.modelValue.forEach((item) => {
+    item.Ranks.sort((a, b) => b.Rate - a.Rate);
+    select.value.push(item);
+  });
 });
 </script>
 <style lang="css" scoped>