mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
95 lines
2.3 KiB
Vue
95 lines
2.3 KiB
Vue
<template>
|
|
<div class="hta-tus-box">
|
|
<v-tabs v-model="tab" direction="vertical" class="hta-tus-tab">
|
|
<v-tab value="9">第09层</v-tab>
|
|
<v-tab value="10">第10层</v-tab>
|
|
<v-tab value="11">第11层</v-tab>
|
|
<v-tab value="12">第12层</v-tab>
|
|
</v-tabs>
|
|
<v-window v-model="tab" class="hta-tus-window">
|
|
<v-window-item
|
|
v-for="selectItem in select"
|
|
:key="selectItem.Floor"
|
|
:value="selectItem.Floor.toString()"
|
|
>
|
|
<div class="hta-tus-grid">
|
|
<TibWikiAbyss
|
|
v-for="(item, index) in selectItem.Ranks"
|
|
:key="index"
|
|
:model-value="item"
|
|
/>
|
|
</div>
|
|
</v-window-item>
|
|
</v-window>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref } from "vue";
|
|
|
|
import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
|
|
import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
|
|
|
|
interface HtaTabUseProps {
|
|
data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>;
|
|
}
|
|
|
|
interface HtaTabUseData {
|
|
Floor: number;
|
|
Ranks: Array<AbyssDataItem<{ Item: number; Rate: number }>>;
|
|
}
|
|
|
|
const props = defineProps<HtaTabUseProps>();
|
|
|
|
// data
|
|
const tab = ref<string>("9");
|
|
const select = ref<Array<HtaTabUseData>>([]);
|
|
|
|
onMounted(async () => {
|
|
for (const floor of props.data.cur) {
|
|
const floorLast = props.data.last.find((f) => f.Floor === floor.Floor);
|
|
const floorRank = {
|
|
Floor: floor.Floor,
|
|
Ranks: <Array<AbyssDataItem<{ Item: number; Rate: number }>>>[],
|
|
};
|
|
floor.Ranks.sort((a, b) => b.Rate - a.Rate);
|
|
for (const rank of floor.Ranks) {
|
|
const rankLast = floorLast?.Ranks.find((r) => r.Item === rank.Item);
|
|
floorRank.Ranks.push({
|
|
cur: rank,
|
|
last: rankLast ?? { Item: rank.Item, Rate: 0 },
|
|
});
|
|
}
|
|
select.value.push(floorRank);
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.hta-tus-box {
|
|
display: flex;
|
|
height: 100%;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.hta-tus-tab {
|
|
height: 100%;
|
|
color: var(--box-text-4);
|
|
}
|
|
|
|
.hta-tus-window {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.hta-tus-grid {
|
|
display: grid;
|
|
overflow: auto;
|
|
width: 100%;
|
|
max-height: calc(100vh - 100px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
grid-gap: 10px;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 0.2fr));
|
|
}
|
|
</style>
|