mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
♻️ 深渊仅显示用户数据，Hutao Api 数据待定
This commit is contained in:
BTMuli
@@ -1,72 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
<ToLoading v-model="loading" :title="loadingTitle" />
|
<ToLoading v-model="loading" :title="loadingTitle" />
|
||||||
<v-tabs v-model="abyssTab" align-tabs="start" class="abyss-tab">
|
<div class="ua-box">
|
||||||
<v-tab value="user">
|
<v-tabs v-model="userTab" direction="vertical" align-tabs="start" class="ua-tab">
|
||||||
深渊记录
|
<v-tab v-for="item in localAbyss" :key="item.id" :value="item.id" @click="toAbyss(item.id)">
|
||||||
</v-tab>
|
第 {{ item.id }} 期
|
||||||
<v-tab value="record">
|
</v-tab>
|
||||||
深渊统计
|
<div class="ua-tab-bottom">
|
||||||
</v-tab>
|
<v-btn class="ua-btn" @click="getAbyssData">
|
||||||
<v-spacer />
|
<v-icon>mdi-refresh</v-icon>
|
||||||
<v-btn v-show="abyssTab==='user'" class="ua-btn" @click="getAbyssData">
|
<span>刷新</span>
|
||||||
<v-icon>mdi-refresh</v-icon>
|
</v-btn>
|
||||||
<span>刷新</span>
|
<!-- <v-btn class="ua-btn" @click="uploadData">-->
|
||||||
</v-btn>
|
<!-- <v-icon>mdi-upload</v-icon>-->
|
||||||
<v-btn v-show="abyssTab==='user'" class="ua-btn">
|
<!-- <span>上传</span>-->
|
||||||
<v-icon>mdi-upload</v-icon>
|
<!-- </v-btn>-->
|
||||||
<span>上传</span>
|
|
||||||
</v-btn>
|
|
||||||
</v-tabs>
|
|
||||||
<v-window v-model="abyssTab">
|
|
||||||
<v-window-item value="user" class="user-window">
|
|
||||||
<v-tabs v-model="userTab" direction="vertical" align-tabs="start" class="ua-tab">
|
|
||||||
<v-tab v-for="item in localAbyss" :key="item.id" :value="item.id" @click="toAbyss(item.id)">
|
|
||||||
第 {{ item.id }} 期
|
|
||||||
</v-tab>
|
|
||||||
</v-tabs>
|
|
||||||
<v-window v-model="userTab" class="ua-window">
|
|
||||||
<v-window-item v-for="item in localAbyss" :key="item.id" :value="item.id" class="ua-window-item">
|
|
||||||
<div class="uaw-title">
|
|
||||||
<span>挑战回顾</span>
|
|
||||||
<span>更新于 {{ item.updated }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="uaw-sub-title">
|
|
||||||
<img src="/src/assets/icons/arrow-right.svg" alt="character">
|
|
||||||
<span>统计周期 {{ item.startTime }} ~ {{ item.endTime }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="uaw-o-box">
|
|
||||||
<TuaOverview title="战斗次数" :val-text="item.totalBattleTimes" />
|
|
||||||
<TuaOverview title="获得渊星" :val-text="item.totalStar" />
|
|
||||||
<TuaOverview title="最深抵达" :val-text="item.maxFloor" />
|
|
||||||
</div>
|
|
||||||
<div class="uaw-o-box">
|
|
||||||
<TuaOverview title="出战次数" :val-icons="item.revealRank" :icon-num="4" />
|
|
||||||
<TuaOverview title="最多击破" :val-icons="item.defeatRank" />
|
|
||||||
<TuaOverview title="最强一击" :val-icons="item.damageRank" />
|
|
||||||
</div>
|
|
||||||
<div class="uaw-o-box">
|
|
||||||
<TuaOverview title="最多承伤" :val-icons="item.takeDamageRank" />
|
|
||||||
<TuaOverview title="元素战技" :val-icons="item.normalSkillRank" />
|
|
||||||
<TuaOverview title="元素爆发" :val-icons="item.energySkillRank" />
|
|
||||||
</div>
|
|
||||||
<div class="uaw-sub-title">
|
|
||||||
<img src="/src/assets/icons/arrow-right.svg" alt="character">
|
|
||||||
<span>详情</span>
|
|
||||||
</div>
|
|
||||||
<div class="uaw-d-box">
|
|
||||||
<TuaDetail v-for="floor in JSON.parse(item.floors) as TGApp.Sqlite.Abyss.Floor[]" :model-value="floor" />
|
|
||||||
</div>
|
|
||||||
</v-window-item>
|
|
||||||
</v-window>
|
|
||||||
<div v-show="localAbyssID.length === 0" class="user-empty">
|
|
||||||
<img src="/source/UI/empty.webp" alt="empty">
|
|
||||||
<span>暂无数据，请尝试刷新</span>
|
|
||||||
</div>
|
</div>
|
||||||
</v-window-item>
|
</v-tabs>
|
||||||
<v-window-item value="record">
|
<v-window v-model="userTab" class="ua-window">
|
||||||
<h1>胡桃深渊数据统计</h1>
|
<v-window-item v-for="item in localAbyss" :key="item.id" :value="item.id" class="ua-window-item">
|
||||||
</v-window-item>
|
<div class="uaw-title">
|
||||||
</v-window>
|
<span>挑战回顾</span>
|
||||||
|
<span>更新于 {{ item.updated }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="uaw-sub-title">
|
||||||
|
<img src="/src/assets/icons/arrow-right.svg" alt="character">
|
||||||
|
<span>统计周期 {{ item.startTime }} ~ {{ item.endTime }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="uaw-o-box">
|
||||||
|
<TuaOverview title="战斗次数" :val-text="item.totalBattleTimes" />
|
||||||
|
<TuaOverview title="获得渊星" :val-text="item.totalStar" />
|
||||||
|
<TuaOverview title="最深抵达" :val-text="item.maxFloor" />
|
||||||
|
</div>
|
||||||
|
<div class="uaw-o-box">
|
||||||
|
<TuaOverview title="最多击破" :val-icons="item.defeatRank" />
|
||||||
|
<TuaOverview title="最多承伤" :val-icons="item.takeDamageRank" />
|
||||||
|
<TuaOverview title="最强一击" :val-icons="item.damageRank" />
|
||||||
|
</div>
|
||||||
|
<div class="uaw-o-box">
|
||||||
|
<TuaOverview title="元素战技" :val-icons="item.normalSkillRank" />
|
||||||
|
<TuaOverview title="出战次数" :val-icons="item.revealRank" :icon-num="4" />
|
||||||
|
<TuaOverview title="元素爆发" :val-icons="item.energySkillRank" />
|
||||||
|
</div>
|
||||||
|
<div class="uaw-sub-title">
|
||||||
|
<img src="/src/assets/icons/arrow-right.svg" alt="character">
|
||||||
|
<span>详情</span>
|
||||||
|
</div>
|
||||||
|
<div class="uaw-d-box">
|
||||||
|
<TuaDetail v-for="floor in JSON.parse(item.floors) as TGApp.Sqlite.Abyss.Floor[]" :model-value="floor" />
|
||||||
|
</div>
|
||||||
|
</v-window-item>
|
||||||
|
</v-window>
|
||||||
|
<div v-show="localAbyssID.length === 0" class="user-empty">
|
||||||
|
<img src="/source/UI/empty.webp" alt="empty">
|
||||||
|
<span>暂无数据，请尝试刷新</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
// vue
|
// vue
|
||||||
@@ -87,7 +75,6 @@ const loading = ref(true);
|
|||||||
const loadingTitle = ref("");
|
const loadingTitle = ref("");
|
||||||
|
|
||||||
// data
|
// data
|
||||||
const abyssTab = ref("user");
|
|
||||||
const userTab = ref(0);
|
const userTab = ref(0);
|
||||||
const abyssCookie = ref({
|
const abyssCookie = ref({
|
||||||
cookie_token: "",
|
cookie_token: "",
|
||||||
@@ -151,42 +138,32 @@ async function getAbyssData (): Promise<void> {
|
|||||||
function toAbyss (id: number): void {
|
function toAbyss (id: number): void {
|
||||||
curAbyss.value = localAbyss.value.find((item) => item.id === id)!;
|
curAbyss.value = localAbyss.value.find((item) => item.id === id)!;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// async function uploadData(){
|
||||||
|
// const latestAbyss = localAbyss.value[0];
|
||||||
|
// const uploadData:TGApp.Plugins.Hutao.AbyssRecordUpload = transAbyssToHutao(latestAbyss, user.value);
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// function transAbyssToHutao(abyss:TGApp.Sqlite.Abyss.SingleTable, user:TGApp.Sqlite.Account.Game): TGApp.Plugins.Hutao.AbyssRecordUpload {
|
||||||
|
// let res = {
|
||||||
|
// uid: user.gameUid,
|
||||||
|
// identity: "tauri-genshin",
|
||||||
|
// spiralAbyss: {} as TGApp.Plugins.Hutao.AbyssRecord,
|
||||||
|
// avatars: [] as TGApp.Plugins.Hutao.AbyssAvatar[],
|
||||||
|
// reservedUserName: user.nickname,
|
||||||
|
// } as TGApp.Plugins.Hutao.AbyssRecordUpload;
|
||||||
|
// const damageRank:TGApp.Sqlite.Abyss.Character = JSON.parse(abyss.damageRank)[0];
|
||||||
|
// const takeDamageRank:TGApp.Sqlite.Abyss.Character = JSON.parse(abyss.takeDamageRank)[0];
|
||||||
|
// const floors:TGApp.Sqlite.Abyss.Floor[] = JSON.parse(abyss.floors);
|
||||||
|
// }
|
||||||
</script>
|
</script>
|
||||||
<style lang="css" scoped>
|
<style lang="css" scoped>
|
||||||
.abyss-tab {
|
.ua-box {
|
||||||
font-family: Genshin, serif;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: var(--content-text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ua-btn {
|
|
||||||
margin-right: 5px;
|
|
||||||
background: #393b40;
|
|
||||||
color: #faf7e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-window {
|
|
||||||
background: rgb(0 0 0 / 10%);
|
background: rgb(0 0 0 / 10%);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: calc(100vh - 100px);
|
height: calc(100vh - 35px);
|
||||||
}
|
|
||||||
|
|
||||||
.user-empty {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50vh - 200px);
|
|
||||||
left: calc(50vw - 400px);
|
|
||||||
background: rgb(0 0 0 / 30%);
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 800px;
|
|
||||||
height: 400px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: #faf7e8;
|
|
||||||
font-family: Genshin, serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ua-tab {
|
.ua-tab {
|
||||||
@@ -196,6 +173,19 @@ function toAbyss (id: number): void {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ua-tab-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ua-btn {
|
||||||
|
margin-top: 5px;
|
||||||
|
background: #393b40;
|
||||||
|
color: #faf7e8;
|
||||||
|
}
|
||||||
|
|
||||||
.ua-window {
|
.ua-window {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: calc(100% - 100px);
|
width: calc(100% - 100px);
|
||||||
@@ -251,4 +241,20 @@ function toAbyss (id: number): void {
|
|||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.user-empty {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50vh - 200px);
|
||||||
|
left: calc(50vw - 400px);
|
||||||
|
background: rgb(0 0 0 / 30%);
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 800px;
|
||||||
|
height: 400px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #faf7e8;
|
||||||
|
font-family: Genshin, serif;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user