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