mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
feat(loading): 添加加载拦截 #4
This commit is contained in:
BTMuli
12
src/assets/css/utils.css
Normal file
12
src/assets/css/utils.css
Normal file
@@ -0,0 +1,12 @@
|
||||
/* 顶部加载条 */
|
||||
.loading-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
/* card action 内的按钮 */
|
||||
.card-btn {
|
||||
background: #455167 !important;
|
||||
color: #faf7e8 !important;
|
||||
}
|
||||
2
src/assets/index.css
Normal file
2
src/assets/index.css
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "css/utils.css";
|
||||
@import "fonts/index.css";
|
||||
@@ -8,6 +8,6 @@ import "@mdi/font/css/materialdesignicons.css";
|
||||
import "vuetify/styles";
|
||||
import { createVuetify } from "vuetify";
|
||||
// 全局样式
|
||||
import "./assets/fonts/index.css";
|
||||
import "./assets/index.css";
|
||||
|
||||
createApp(App).use(router).use(store).use(createVuetify()).mount("#app");
|
||||
|
||||
@@ -12,87 +12,91 @@
|
||||
<v-btn @click="exportJson" prepend-icon="mdi-export" class="ms-2 top-btn"> 导出 </v-btn>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
<!-- todo 列表加载速度优化，主要是天地万象的数据量太大了 -->
|
||||
<v-row class="wrap-view">
|
||||
<!-- 左侧菜单 -->
|
||||
<v-col class="left-wrap">
|
||||
<v-card
|
||||
class="left-list"
|
||||
v-for="(series, index) in seriesList"
|
||||
@click="selectSeries(index)"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-img width="40px" style="margin-right: 10px" :src="series.icon" />
|
||||
</template>
|
||||
<v-list-item-title>{{ series.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle
|
||||
>{{ series.completed_count }} / {{ series.total_count }}</v-list-item-subtitle
|
||||
>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- 右侧内容-->
|
||||
<v-col cols="9" class="right-wrap">
|
||||
<div class="right-list">
|
||||
<div v-if="loading" class="loading-bar">
|
||||
<v-progress-circular indeterminate color="primary" />
|
||||
</div>
|
||||
<div v-else class="wrap">
|
||||
<v-row class="wrap-view">
|
||||
<!-- 左侧菜单 -->
|
||||
<v-col class="left-wrap">
|
||||
<v-card
|
||||
v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
|
||||
@click="openImg()"
|
||||
>
|
||||
<v-list
|
||||
:style="{
|
||||
backgroundImage: 'url(' + getCardInfo.bg || null + ')',
|
||||
backgroundPosition: 'right',
|
||||
backgroundSize: 'auto 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}"
|
||||
>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
|
||||
</template>
|
||||
<v-list-item-title>{{ getCardInfo.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ getCardInfo.description }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
<v-divider></v-divider>
|
||||
<v-card
|
||||
v-for="achievement in selectedAchievement"
|
||||
:key="achievement.id"
|
||||
class="left-list"
|
||||
v-for="(series, index) in seriesList"
|
||||
@click="selectSeries(index)"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="rgb(205, 182, 145)">mdi-trophy-variant-outline</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ achievement.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{
|
||||
achievement.completed ? achievement.completed_time : achievement.description
|
||||
}}</v-list-item-subtitle>
|
||||
<template v-slot:append>
|
||||
<v-btn width="80px" class="reward-btn">
|
||||
<template v-slot:append>
|
||||
<img
|
||||
src="/source/material/原石.webp"
|
||||
alt="原石"
|
||||
class="icon"
|
||||
style="width: 32px"
|
||||
/>
|
||||
</template>
|
||||
{{ achievement.reward }}
|
||||
</v-btn>
|
||||
<v-img width="40px" style="margin-right: 10px" :src="series.icon" />
|
||||
</template>
|
||||
<v-list-item-title>{{ series.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle
|
||||
>{{ series.completed_count }} / {{ series.total_count }}</v-list-item-subtitle
|
||||
>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<!-- 右侧内容-->
|
||||
<v-col cols="9" class="right-wrap">
|
||||
<div class="right-list">
|
||||
<v-card
|
||||
v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
|
||||
@click="openImg()"
|
||||
>
|
||||
<v-list
|
||||
:style="{
|
||||
backgroundImage: 'url(' + getCardInfo.bg || null + ')',
|
||||
backgroundPosition: 'right',
|
||||
backgroundSize: 'auto 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}"
|
||||
>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
|
||||
</template>
|
||||
<v-list-item-title>{{ getCardInfo.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ getCardInfo.description }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
<v-divider></v-divider>
|
||||
<v-card
|
||||
v-for="achievement in selectedAchievement"
|
||||
:key="achievement.id"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="rgb(205, 182, 145)">mdi-trophy-variant-outline</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ achievement.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{
|
||||
achievement.completed ? achievement.completed_time : achievement.description
|
||||
}}</v-list-item-subtitle>
|
||||
<template v-slot:append>
|
||||
<v-btn width="80px" class="reward-btn">
|
||||
<template v-slot:append>
|
||||
<img
|
||||
src="/source/material/原石.webp"
|
||||
alt="原石"
|
||||
class="icon"
|
||||
style="width: 32px"
|
||||
/>
|
||||
</template>
|
||||
{{ achievement.reward }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -130,9 +134,11 @@ const selectedSeries = ref(-1);
|
||||
const selectedAchievement = ref([] as TGAchievement[]);
|
||||
const CardsInfo = ref([] as NameCard[]);
|
||||
const getCardInfo = ref({} as NameCard);
|
||||
const loading = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
onMounted(async () => {
|
||||
await loadData();
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
// 加载数据，数据源：合并后的本地数据
|
||||
|
||||
@@ -125,13 +125,6 @@ function toOuter(url: string, title: string) {
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.loading-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pool-cards {
|
||||
font-family: Genshin, serif;
|
||||
display: flex;
|
||||
|
||||
@@ -1,74 +1,83 @@
|
||||
<template>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font">
|
||||
<v-tab value="notice" title="公告" />
|
||||
<v-tab value="activity" title="活动" />
|
||||
<v-tab value="news" title="新闻" />
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="notice">
|
||||
<div class="cards-grid">
|
||||
<v-card
|
||||
v-for="item in postData.notice"
|
||||
class="justify-space-between flex-nowrap"
|
||||
width="320"
|
||||
>
|
||||
<v-img :src="item.cover" cover style="height: 150px"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
class="ms-2 card-btn"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="activity">
|
||||
<div class="cards-grid">
|
||||
<v-card
|
||||
v-for="item in postData.activity"
|
||||
class="justify-space-between flex-nowrap"
|
||||
width="320"
|
||||
>
|
||||
<v-img :src="item.cover" cover style="height: 150px"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
class="ms-2 card-btn"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
<v-btn v-if="item.status === 1" color="ms-2 card-btn-0">进行中</v-btn>
|
||||
<v-btn v-else-if="item.status === 2" color="ms-2 card-btn-2">已结束</v-btn>
|
||||
<v-btn v-else color="ms-2 card-btn-1">评选中</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="news">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in postData.news" class="justify-space-between flex-nowrap" width="320">
|
||||
<v-img :src="item.cover" cover style="height: 150px"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
class="ms-2 card-btn"
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
<div v-if="loading" class="loading-bar">
|
||||
<v-progress-circular indeterminate color="primary" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font">
|
||||
<v-tab value="notice" title="公告" />
|
||||
<v-tab value="activity" title="活动" />
|
||||
<v-tab value="news" title="新闻" />
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="notice">
|
||||
<div class="cards-grid">
|
||||
<v-card
|
||||
v-for="item in postData.notice"
|
||||
class="justify-space-between flex-nowrap"
|
||||
width="320"
|
||||
>
|
||||
<v-img :src="item.cover" cover style="height: 150px"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
class="ms-2 card-btn"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="activity">
|
||||
<div class="cards-grid">
|
||||
<v-card
|
||||
v-for="item in postData.activity"
|
||||
class="justify-space-between flex-nowrap"
|
||||
width="320"
|
||||
>
|
||||
<v-img :src="item.cover" cover style="height: 150px"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
class="ms-2 card-btn"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
<v-btn v-if="item.status === 1" color="ms-2 card-btn-0">进行中</v-btn>
|
||||
<v-btn v-else-if="item.status === 2" color="ms-2 card-btn-2">已结束</v-btn>
|
||||
<v-btn v-else color="ms-2 card-btn-1">评选中</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="news">
|
||||
<div class="cards-grid">
|
||||
<v-card
|
||||
v-for="item in postData.news"
|
||||
class="justify-space-between flex-nowrap"
|
||||
width="320"
|
||||
>
|
||||
<v-img :src="item.cover" cover style="height: 150px"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
class="ms-2 card-btn"
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -92,6 +101,8 @@ const appStore = useAppStore();
|
||||
|
||||
// 渲染模式
|
||||
const renderMode = ref(appStore.structureRender);
|
||||
// loading
|
||||
const loading = ref(true);
|
||||
|
||||
// 接口 todo：考虑放到 interface 文件夹下?
|
||||
interface CardDataType {
|
||||
@@ -126,6 +137,7 @@ onMounted(async () => {
|
||||
news: transData(newsRaw, "news"),
|
||||
};
|
||||
tab.value = "notice";
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
function transData(rawData: ResponseNewsList, dataType: string): CardDataType[] {
|
||||
@@ -205,11 +217,6 @@ async function getPost(post_id: string): Promise<ResponsePost> {
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
background: #455167 !important;
|
||||
color: #faf7e8 !important;
|
||||
}
|
||||
|
||||
/* 进行中 */
|
||||
.card-btn-0 {
|
||||
background: #3c99aa !important;
|
||||
|
||||
Reference in New Issue
Block a user