💄 队伍出场页面UI调整

BTMuli · Oct 30, 2024 · 41e7135 · 41e7135
1 parent 9d08880
commit 41e7135
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 57 deletions.
diff --git a/src/components/hutaoAbyss/hta-tab-team.vue b/src/components/hutaoAbyss/hta-tab-team.vue
@@ -15,29 +15,19 @@
         <div v-if="select" class="hta-tt-flex">
           <div class="hta-tuf-box">
             <div class="hta-tuf-title">上半</div>
-            <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(',')"
-                  :key="item"
-                  :model-value="item"
-                />
-              </div>
-              <div class="hta-tuf-item-rate">上场{{ items.Rate }}次</div>
-            </div>
+            <v-virtual-scroll :items="selectItem.Up" item-height="100" class="hta-tuf-item">
+              <template #default="{ item }">
+                <HtaTeamLine :model-value="item" />
+              </template>
+            </v-virtual-scroll>
           </div>
           <div class="hta-tuf-box">
             <div class="hta-tuf-title">下半</div>
-            <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(',')"
-                  :key="item"
-                  :model-value="item"
-                />
-              </div>
-              <div class="hta-tuf-item-rate">上场{{ items.Rate }}次</div>
-            </div>
+            <v-virtual-scroll :items="selectItem.Down" item-height="100" class="hta-tuf-item">
+              <template #default="{ item }">
+                <HtaTeamLine :model-value="item" />
+              </template>
+            </v-virtual-scroll>
           </div>
         </div>
       </v-window-item>
@@ -47,7 +37,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 
-import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
+import HtaTeamLine from "./hta-team-line.vue";
 
 interface HtaTabTeamProps {
   modelValue: TGApp.Plugins.Hutao.Abyss.TeamCombination[];
@@ -117,29 +107,10 @@ onMounted(async () => {
 }
 
 .hta-tuf-item {
-  display: flex;
+  position: relative;
   width: 100%;
-  height: 100px;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 5px;
+  max-height: calc(100vh - 200px);
   border-radius: 5px;
   background: var(--box-bg-1);
-  column-gap: 10px;
-}
-
-.hta-tuf-item-icons {
-  display: grid;
-  column-gap: 10px;
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.hta-tuf-item-rate {
-  display: flex;
-  width: calc(100% - 360px);
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-title);
 }
 </style>
diff --git a/src/components/hutaoAbyss/hta-team-line.vue b/src/components/hutaoAbyss/hta-team-line.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="hta-tl-box">
+    <div class="hta-tl-item">
+      <TibWikiAbyss2
+        v-for="item in props.modelValue.Item.split(',')"
+        :key="item"
+        :model-value="item"
+      />
+    </div>
+    <div class="hta-tl-rate">上场{{ props.modelValue.Rate }}次</div>
+  </div>
+</template>
+<script lang="ts" setup>
+import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
+
+interface HtaTeamLineProps {
+  modelValue: { Item: string; Rate: number };
+}
+
+const props = defineProps<HtaTeamLineProps>();
+</script>
+<style lang="css" scoped>
+.hta-tl-box {
+  position: relative;
+  display: flex;
+  width: calc(100% - 20px);
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-radius: 5px;
+  margin: 10px;
+  background: var(--box-bg-2);
+}
+
+.hta-tl-item {
+  display: grid;
+  column-gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.hta-tl-rate {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-title);
+}
+</style>
diff --git a/src/pages/WIKI/Abyss.vue b/src/pages/WIKI/Abyss.vue
@@ -32,7 +32,7 @@
         <HtaTabUp v-if="abyssData.up !== null" :data="abyssData.up" />
       </v-window-item>
       <v-window-item value="team">
-        <HtaTabTeam v-if="abyssData.team !== null" :data="abyssData.team" />
+        <HtaTabTeam v-if="abyssData.team !== null" :model-value="abyssData.team" />
       </v-window-item>
       <v-window-item value="hold">
         <HtaTabHold v-if="abyssData.hold !== null" :data="abyssData.hold" />
@@ -63,15 +63,15 @@ enum AbyssTabEnum {
 type AbyssTab = keyof typeof AbyssTabEnum;
 type AbyssList = Array<{ label: AbyssTabEnum; value: AbyssTab }>;
 export type AbyssDataItem<T> = { cur: T; last: T };
-export type AbyssDataItemType<T extends AbyssTab> = AbyssDataItem<
-  T extends "use"
-    ? TGApp.Plugins.Hutao.Abyss.AvatarUse[]
-    : T extends "up"
-      ? TGApp.Plugins.Hutao.Abyss.AvatarUp[]
-      : T extends "team"
-        ? TGApp.Plugins.Hutao.Abyss.TeamCombination[]
-        : TGApp.Plugins.Hutao.Abyss.AvatarHold[]
->;
+export type AbyssDataItemType<T extends AbyssTab> = T extends "use"
+  ? AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>
+  : T extends "up"
+    ? AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUp[]>
+    : T extends "team"
+      ? TGApp.Plugins.Hutao.Abyss.TeamCombination[]
+      : T extends "hold"
+        ? AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarHold[]>
+        : null;
 type AbyssData = {
   [key in AbyssTab]: AbyssDataItemType<key> | null;
 };
@@ -106,7 +106,7 @@ onMounted(async () => {
     last: await Hutao.Abyss.getOverview(true),
   };
   loadT.value = "正在获取深渊数据";
-  const useData = await getData("use");
+  const useData = <AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>>await getData("use");
   abyssData.value = { use: useData, up: null, team: null, hold: null };
   loading.value = false;
 });
@@ -151,10 +151,7 @@ async function getData(type: AbyssTab): Promise<AbyssDataItemType<AbyssTab>> {
         last: await Hutao.Abyss.avatar.getUpRate(true),
       };
     case "team":
-      return {
-        cur: await Hutao.Abyss.getTeamCollect(),
-        last: await Hutao.Abyss.getTeamCollect(true),
-      };
+      return await Hutao.Abyss.getTeamCollect();
     case "hold":
       return {
         cur: await Hutao.Abyss.avatar.getHoldRate(),