Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-12 09:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

🥅 完善深渊左侧tab样式，深渊上传try catch

Browse Source
This commit is contained in:
目棃
2024-02-01 21:47:37 +08:00
parent 0377d1fe2a
commit 4d3e030174
1 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/User/Abyss.vue
View File

@@ -1,27 +1,27 @@
<template> <template>
<ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" /> <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
<div class="ua-box"> <div class="ua-box">
<v-tabs v-model="userTab" direction="vertical" align-tabs="start" class="ua-tab"> <div class="ua-left-box">
<div class="ua-tabs"> <v-tabs v-model="userTab" direction="vertical" class="ua-tabs-box">
<v-tab v-for="item in localAbyss" :key="item.id" :value="item.id" @click="toAbyss(item.id)"> <v-tab v-for="item in localAbyss" :key="item.id" :value="item.id" @click="toAbyss(item.id)">
第{{ item.id }}期 第{{ item.id }}期
</v-tab> </v-tab>
</div> </v-tabs>
<div class="ua-tab-bottom"> <div class="ua-tab-bottom">
<v-btn class="ua-btn" @click="shareAbyss"> <v-btn class="ua-btn" @click="shareAbyss" rounded>
<v-icon>mdi-share</v-icon> <v-icon>mdi-share</v-icon>
<span>分享</span> <span>分享</span>
</v-btn> </v-btn>
<v-btn class="ua-btn" @click="getAbyssData"> <v-btn class="ua-btn" @click="getAbyssData" rounded>
<v-icon>mdi-refresh</v-icon> <v-icon>mdi-refresh</v-icon>
<span>刷新</span> <span>刷新</span>
</v-btn> </v-btn>
<v-btn class="ua-btn" @click="uploadAbyss"> <v-btn class="ua-btn" @click="uploadAbyss" rounded>
<v-icon>mdi-cloud-upload</v-icon> <v-icon>mdi-cloud-upload</v-icon>
<span>上传</span> <span>上传</span>
</v-btn> </v-btn>
</div> </div>
</v-tabs> </div>
<v-window v-model="userTab" class="ua-window"> <v-window v-model="userTab" class="ua-window">
<v-window-item <v-window-item
v-for="item in localAbyss" v-for="item in localAbyss"
@@ -231,6 +231,7 @@ async function uploadAbyss(): Promise<void> {
await TGLogger.Warn("[UserAbyss][uploadAbyss] 非最新深渊数据"); await TGLogger.Warn("[UserAbyss][uploadAbyss] 非最新深渊数据");
return; return;
} }
try {
loadingTitle.value = "正在转换深渊数据"; loadingTitle.value = "正在转换深渊数据";
loading.value = true; loading.value = true;
const transAbyss = Hutao.Abyss.utils.transData(abyssData); const transAbyss = Hutao.Abyss.utils.transData(abyssData);
@@ -256,6 +257,17 @@ async function uploadAbyss(): Promise<void> {
await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败"); await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败");
await TGLogger.Error(`[UserAbyss][uploadAbyss] ${res.retcode} ${res.message}`); await TGLogger.Error(`[UserAbyss][uploadAbyss] ${res.retcode} ${res.message}`);
} }
} catch (e) {
if (e instanceof Error) {
showSnackbar({
text: e.message,
color: "error",
});
await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败");
await TGLogger.Error(`[UserAbyss][uploadAbyss] ${e.message}`);
}
}
if (loading.value) loading.value = false;
} }
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
@@ -268,35 +280,32 @@ async function uploadAbyss(): Promise<void> {
border-radius: 5px; border-radius: 5px;
} }
.ua-tab { .ua-left-box {
position: relative;
display: flex;
width: 100px; width: 100px;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-right: 1px solid var(--common-shadow-2);
color: var(--box-text-4); color: var(--box-text-4);
font-family: var(--font-text);
} }
.ua-tabs { .ua-tabs-box {
max-height: calc(100% - 150px); max-height: calc(100% - 150px);
margin-top: 5px;
overflow-y: auto; overflow-y: auto;
} }
/* stylelint-disable selector-class-pattern */
.ua-tab.v-tabs.v-slide-group--vertical {
height: 100%;
}
.ua-tab-bottom { .ua-tab-bottom {
position: absolute;
bottom: 0;
display: flex; display: flex;
width: 100%; width: 100%;
flex-wrap: wrap; flex-direction: column;
padding: 10px; padding: 10px;
gap: 10px; gap: 10px;
} }
.ua-btn { .ua-btn {
border-radius: 5px;
background: var(--tgc-btn-1); background: var(--tgc-btn-1);
color: var(--btn-text); color: var(--btn-text);
font-family: var(--font-text); font-family: var(--font-text);