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

This commit is contained in:
目棃
2024-02-01 21:47:37 +08:00
parent 0377d1fe2a
commit 4d3e030174

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"
@@ -118,7 +118,7 @@ async function initAbyssData(): Promise<void> {
}); });
curAbyss.value = localAbyss.value[0]; curAbyss.value = localAbyss.value[0];
userTab.value = localAbyssID.value[0]; userTab.value = localAbyssID.value[0];
await TGLogger.Info(`[UserAbyss][initAbyssData] 成功获取 ${abyssGet.length} 条深渊数据`); await TGLogger.Info(`[UserAbyss][initAbyssData] 成功获取 ${abyssGet.length} 条深渊数据`);
} }
async function getAbyssData(): Promise<void> { async function getAbyssData(): Promise<void> {
@@ -231,31 +231,43 @@ async function uploadAbyss(): Promise<void> {
await TGLogger.Warn("[UserAbyss][uploadAbyss] 非最新深渊数据"); await TGLogger.Warn("[UserAbyss][uploadAbyss] 非最新深渊数据");
return; return;
} }
loadingTitle.value = "正在转换深渊数据"; try {
loading.value = true; loadingTitle.value = "正在转换深渊数据";
const transAbyss = Hutao.Abyss.utils.transData(abyssData); loading.value = true;
loadingTitle.value = "正在获取角色数据"; const transAbyss = Hutao.Abyss.utils.transData(abyssData);
const roles = await TGSqlite.getUserCharacter(user.value.gameUid); loadingTitle.value = "正在获取角色数据";
if (!roles) { const roles = await TGSqlite.getUserCharacter(user.value.gameUid);
if (!roles) {
loading.value = false;
return;
}
loadingTitle.value = "正在转换角色数据";
transAbyss.Avatars = Hutao.Abyss.utils.transAvatars(roles);
loadingTitle.value = "正在上传深渊数据";
const res = await Hutao.Abyss.postData(transAbyss);
loading.value = false; loading.value = false;
return; if (res.retcode === 0) {
} showSnackbar({ text: res.message ?? "上传深渊数据成功" });
loadingTitle.value = "正在转换角色数据"; await TGLogger.Info("[UserAbyss][uploadAbyss] 上传深渊数据成功");
transAbyss.Avatars = Hutao.Abyss.utils.transAvatars(roles); } else {
loadingTitle.value = "正在上传深渊数据"; showSnackbar({
const res = await Hutao.Abyss.postData(transAbyss); text: `[${res.retcode}]${res.message}`,
loading.value = false; color: "error",
if (res.retcode === 0) { });
showSnackbar({ text: res.message ?? "上传深渊数据成功" }); await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败");
await TGLogger.Info("[UserAbyss][uploadAbyss] 上传深渊数据成功"); await TGLogger.Error(`[UserAbyss][uploadAbyss] ${res.retcode} ${res.message}`);
} else { }
showSnackbar({ } catch (e) {
text: `[${res.retcode}]${res.message}`, if (e instanceof Error) {
color: "error", showSnackbar({
}); text: e.message,
await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败"); color: "error",
await TGLogger.Error(`[UserAbyss][uploadAbyss] ${res.retcode} ${res.message}`); });
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);