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

fix(achievements): 优化了下，样式布局应该会更简单

Browse Source
This commit is contained in:
BTMuli
2023-04-04 00:48:44 +08:00
parent 8cb6e2eece
commit 6c0c960da7
1 changed files with 122 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/pages/Achievements.vue
View File

@@ -18,91 +18,91 @@
<v-btn @click="exportJson" prepend-icon="mdi-export" class="ms-2 top-btn"> 导出 </v-btn> <v-btn @click="exportJson" prepend-icon="mdi-export" class="ms-2 top-btn"> 导出 </v-btn>
</template> </template>
</v-app-bar> </v-app-bar>
<div v-if="loading"> <div v-show="loading">
<t-loading title="正在加载成就" /> <t-loading :title="loadingTitle" />
</div> </div>
<div v-else class="wrap"> <div v-show="!loading" class="wrap">
<v-row class="wrap-view"> <!-- 左侧菜单 -->
<!-- 左侧菜单 --> <div class="left-wrap">
<v-col class="left-wrap"> <v-list class="card-left" v-for="(series, index) in seriesList" @click="selectSeries(index)">
<v-list <div class="version-icon-series">v{{ series.version }}</div>
class="card-left" <v-list-item>
v-for="(series, index) in seriesList" <template v-slot:prepend>
@click="selectSeries(index)" <v-img width="40px" style="margin-right: 10px" :src="series.icon" />
> </template>
<div class="version-icon-series">v{{ series.version }}</div> <v-list-item-title>
<v-list-item> {{ series.name }}
<template v-slot:prepend> </v-list-item-title>
<v-img width="40px" style="margin-right: 10px" :src="series.icon" /> <v-list-item-subtitle>
</template> {{ series.completed_count }} / {{ series.total_count }}
<v-list-item-title> </v-list-item-subtitle>
{{ series.name }} </v-list-item>
</v-list-item-title> </v-list>
<v-list-item-subtitle> </div>
{{ series.completed_count }} / {{ series.total_count }} <!-- 右侧内容-->
</v-list-item-subtitle> <div class="right-wrap">
</v-list-item> <v-list
</v-list> v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
</v-col> @click="openImg()"
<!-- 右侧内容--> :style="{
<v-col cols="9" class="right-wrap"> backgroundImage: 'url(' + getCardInfo.bg || null + ')',
<v-list backgroundPosition: 'right',
v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17" backgroundSize: 'auto 100%',
@click="openImg()" backgroundRepeat: 'no-repeat',
:style="{ margin: '10px',
backgroundImage: 'url(' + getCardInfo.bg || null + ')', borderRadius: '10px 50px 50px 10px',
backgroundPosition: 'right', color: '#485466',
backgroundSize: 'auto 100%', fontFamily: 'Genshin,serif',
backgroundRepeat: 'no-repeat', cursor: 'pointer',
margin: '10px', }"
borderRadius: '10px 50px 50px 10px', >
color: '#485466', <v-list-item :title="getCardInfo.name" :subtitle="getCardInfo.description">
fontFamily: 'Genshin,serif', <template v-slot:prepend>
cursor: 'pointer', <v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
}" </template>
> </v-list-item>
<v-list-item :title="getCardInfo.name" :subtitle="getCardInfo.description"> </v-list>
<template v-slot:prepend> <v-list class="card-right" v-for="achievement in selectedAchievement" :key="achievement.id">
<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" /> <v-list-item>
</template> <template v-slot:prepend>
</v-list-item> <v-icon :color="achievement.completed ? '#fec90b' : '#485466'">
</v-list> <!-- todo 图标替换 -->
<v-list class="card-right" v-for="achievement in selectedAchievement" :key="achievement.id"> {{ achievement.completed ? "mdi-check-circle" : "mdi-circle" }}
<v-list-item> </v-icon>
<template v-slot:prepend> </template>
<v-icon :color="achievement.completed ? '#fec90b' : '#485466'"> <v-list-item-title>
<!-- todo 图标替换 --> {{ achievement.name }}
{{ achievement.completed ? "mdi-check-circle" : "mdi-circle" }} {{ achievement.progress !== 0 ? "| " + achievement.progress : null }}
</v-icon> <span class="version-icon-single">v{{ achievement.version }}</span>
</template> </v-list-item-title>
<v-list-item-title> <v-list-item-subtitle>{{ achievement.description }}</v-list-item-subtitle>
{{ achievement.name }} <template v-slot:append>
{{ achievement.progress !== 0 ? "| " + achievement.progress : null }} <span v-show="achievement.completed" class="right-time">{{
<span class="version-icon-single">v{{ achievement.version }}</span> achievement.completed_time
</v-list-item-title> }}</span>
<v-list-item-subtitle>{{ achievement.description }}</v-list-item-subtitle> <v-card class="reward-card" @click="showMaterial('/source/material/原石.webp')">
<template v-slot:append> <v-img src="/source/material/原石.webp" sizes="32" />
<span v-show="achievement.completed" class="right-time">{{ <div class="reward-num">
achievement.completed_time <span>{{ achievement.reward }}</span>
}}</span> </div>
<v-card class="reward-card" @click="showMaterial('/source/material/原石.webp')"> </v-card>
<v-img src="/source/material/原石.webp" sizes="32" /> </template>
<div class="reward-num"> </v-list-item>
<span>{{ achievement.reward }}</span> </v-list>
</div> </div>
</v-card> <!-- 弹窗提示 -->
</template> <v-snackbar v-model="snackbar" timeout="1500" color="#F5810A" top>
</v-list-item> {{ snackbarText }}
</v-list> </v-snackbar>
</v-col>
</v-row>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
// Node // vue
import { dialog, fs } from "@tauri-apps/api";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import TLoading from "../components/t-loading.vue";
// tauri
import { dialog, fs } from "@tauri-apps/api";
// Store // Store
import useAchievementsStore from "../store/modules/achievements"; import useAchievementsStore from "../store/modules/achievements";
// Interface // Interface
@@ -122,21 +122,28 @@ import {
ReadTGDataByKey, ReadTGDataByKey,
UpdateTGDataByKey, UpdateTGDataByKey,
} from "../utils/TGIndex"; } from "../utils/TGIndex";
import TLoading from "../components/t-loading.vue";
// Store // Store
const achievementsStore = useAchievementsStore(); const achievementsStore = useAchievementsStore();
// Data // loading
const loading = ref(true);
const loadingTitle = ref("正在加载数据");
// data
const title = ref(achievementsStore.title); const title = ref(achievementsStore.title);
const CardsInfo = ref([] as NameCard[]);
const getCardInfo = ref({} as NameCard);
// series
const seriesList = ref([] as TGSeries[]); const seriesList = ref([] as TGSeries[]);
const selectedIndex = ref(-1); const selectedIndex = ref(-1);
const selectedSeries = ref(-1); const selectedSeries = ref(-1);
const selectedAchievement = ref([] as TGAchievement[]); const selectedAchievement = ref([] as TGAchievement[]);
const CardsInfo = ref([] as NameCard[]);
const getCardInfo = ref({} as NameCard); // render
const search = ref(""); const search = ref("");
const loading = ref(true); const snackbar = ref(false);
const snackbarText = ref("");
onMounted(async () => { onMounted(async () => {
await loadData(); await loadData();
@@ -144,12 +151,15 @@ onMounted(async () => {
// 加载数据，数据源：合并后的本地数据 // 加载数据，数据源：合并后的本地数据
async function loadData() { async function loadData() {
loadingTitle.value = "正在获取成就系列数据";
const seriesDB: TGSeries[] = await ReadAllTGData("AchievementSeries"); const seriesDB: TGSeries[] = await ReadAllTGData("AchievementSeries");
loadingTitle.value = "正在获取成就系列名片数据";
CardsInfo.value = await ReadTGDataByIndex("NameCard", "type", 1); CardsInfo.value = await ReadTGDataByIndex("NameCard", "type", 1);
// 按照 order 排序 loadingTitle.value = "对成就系列数据进行排序";
seriesList.value = seriesDB.sort((a, b) => a.order - b.order); seriesList.value = seriesDB.sort((a, b) => a.order - b.order);
loadingTitle.value = "正在获取成就数据";
const getAchievements = await ReadAllTGData("Achievements"); const getAchievements = await ReadAllTGData("Achievements");
// 未完成的排在前面 loadingTitle.value = "正在对成就数据进行排序";
getAchievements.sort((a, b) => { getAchievements.sort((a, b) => {
if (a.completed === b.completed) { if (a.completed === b.completed) {
return a.id - b.id; return a.id - b.id;
@@ -157,13 +167,21 @@ async function loadData() {
return a.completed ? 1 : -1; return a.completed ? 1 : -1;
} }
}); });
loadingTitle.value = "正在渲染成就数据";
selectedAchievement.value = getAchievements; selectedAchievement.value = getAchievements;
loading.value = false;
title.value = achievementsStore.title; title.value = achievementsStore.title;
loading.value = false;
} }
// 渲染选中的成就系列 // 渲染选中的成就系列
async function selectSeries(index: number) { async function selectSeries(index: number) {
// 如果选中的是已经选中的系列，则不进行操作
if (selectedIndex.value === index) {
snackbarText.value = "已经选中该系列";
snackbar.value = true;
return;
}
loading.value = true; loading.value = true;
loadingTitle.value = "正在获取对应的成就数据";
const getAchievements = await ReadTGDataByIndex( const getAchievements = await ReadTGDataByIndex(
"Achievements", "Achievements",
"series", "series",
@@ -171,13 +189,14 @@ async function selectSeries(index: number) {
); );
selectedIndex.value = index; selectedIndex.value = index;
selectedSeries.value = seriesList.value[index].id; selectedSeries.value = seriesList.value[index].id;
loadingTitle.value = "正在查找对应的成就名片";
let getCard: NameCard; let getCard: NameCard;
if (selectedSeries.value !== 0 && selectedSeries.value !== 17) { if (selectedSeries.value !== 0 && selectedSeries.value !== 17) {
getCard = CardsInfo.value.find(card => card.name === seriesList.value[index].card)!; getCard = CardsInfo.value.find(card => card.name === seriesList.value[index].card)!;
} else { } else {
getCard = {} as NameCard; getCard = {} as NameCard;
} }
// 未完成的排在前面 loadingTitle.value = "正在对成就数据进行排序";
getAchievements.sort((a, b) => { getAchievements.sort((a, b) => {
if (a.completed === b.completed) { if (a.completed === b.completed) {
return a.id - b.id; return a.id - b.id;
@@ -185,6 +204,7 @@ async function selectSeries(index: number) {
return a.completed ? 1 : -1; return a.completed ? 1 : -1;
} }
}); });
loadingTitle.value = "正在渲染成就数据";
selectedAchievement.value = getAchievements; selectedAchievement.value = getAchievements;
getCardInfo.value = getCard; getCardInfo.value = getCard;
loading.value = false; loading.value = false;
@@ -363,13 +383,24 @@ async function exportJson() {
.wrap { .wrap {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
}
.wrap-view {
overflow: auto; overflow: auto;
max-height: 90vh; max-height: 90vh;
font-family: Genshin-Light, "serif"; font-family: Genshin-Light, "serif";
} }
/* 左侧系列 */
.left-wrap {
float: left;
width: 25%;
max-height: calc(100vh - 100px);
overflow: auto;
}
/* 右侧成就 */
.right-wrap {
float: right;
width: 75%;
max-height: calc(100vh - 100px);
overflow: auto;
}
/* 版本信息 */ /* 版本信息 */
.version-icon-series { .version-icon-series {
font-family: Genshin, serif; font-family: Genshin, serif;
@@ -394,11 +425,6 @@ async function exportJson() {
font-size: 10px; font-size: 10px;
} }
/* 左侧系列 */
.left-wrap {
height: 100%;
overflow: auto;
}
.card-left { .card-left {
border-radius: 10px; border-radius: 10px;
margin: 10px; margin: 10px;
@@ -407,11 +433,6 @@ async function exportJson() {
cursor: pointer; cursor: pointer;
} }
/* 右侧成就 */
.right-wrap {
height: 100%;
overflow: auto;
}
/* 成就卡片 */ /* 成就卡片 */
.card-right { .card-right {
border-radius: 10px; border-radius: 10px;