mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
🎈 perf(eslint): 第二次 eslint
剩下的全给过了，明天起来跑 devtool 改 bug Signed-off-by: BTMuli <BT-Muli@outlook.com> (cherry picked from commit 59baf08cf897d31cabce4741910ea83c1a3a52d9)
This commit is contained in:
BTMuli
@@ -1,50 +1,50 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div class="back-top" v-show="canTop" @click="handleScrollTop">
|
||||
<img src="../assets/icons/arrow-top.svg" alt="back-icon" />
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div v-show="canTop" class="back-top" @click="handleScrollTop">
|
||||
<img src="../assets/icons/arrow-top.svg" alt="back-icon">
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const scrollTop = ref(0); //滚动条距离顶部的距离
|
||||
const canTop = ref(false); //默认不显示
|
||||
const scrollTop = ref(0); // 滚动条距离顶部的距离
|
||||
const canTop = ref(false); // 默认不显示
|
||||
|
||||
// 监听滚动事件
|
||||
function handleScroll() {
|
||||
scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
// 超过500px显示回到顶部按钮
|
||||
canTop.value = scrollTop.value > 500;
|
||||
// 没超过500，但是到底部了，也显示回到顶部按钮
|
||||
if (!canTop.value) {
|
||||
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
canTop.value = scrollHeight - clientHeight - scrollTop.value <= 0;
|
||||
}
|
||||
function handleScroll () {
|
||||
scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
// 超过500px显示回到顶部按钮
|
||||
canTop.value = scrollTop.value > 500;
|
||||
// 没超过500，但是到底部了，也显示回到顶部按钮
|
||||
if (!canTop.value) {
|
||||
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
canTop.value = scrollHeight - clientHeight - scrollTop.value <= 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 点击回到顶部
|
||||
function handleScrollTop() {
|
||||
let timer = 0;
|
||||
cancelAnimationFrame(timer);
|
||||
timer = requestAnimationFrame(function fn() {
|
||||
if (scrollTop.value > 0) {
|
||||
scrollTop.value -= 50;
|
||||
document.body.scrollTop = document.documentElement.scrollTop = scrollTop.value;
|
||||
timer = requestAnimationFrame(fn);
|
||||
} else {
|
||||
cancelAnimationFrame(timer);
|
||||
canTop.value = false;
|
||||
}
|
||||
});
|
||||
function handleScrollTop () {
|
||||
let timer = 0;
|
||||
cancelAnimationFrame(timer);
|
||||
timer = requestAnimationFrame(function fn () {
|
||||
if (scrollTop.value > 0) {
|
||||
scrollTop.value -= 50;
|
||||
document.body.scrollTop = document.documentElement.scrollTop = scrollTop.value;
|
||||
timer = requestAnimationFrame(fn);
|
||||
} else {
|
||||
cancelAnimationFrame(timer);
|
||||
canTop.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 监听滚动事件
|
||||
// @ts-ignore
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,52 +1,42 @@
|
||||
<template>
|
||||
<v-list class="calendar-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title
|
||||
style="color: #fec90b; margin-left: 10px; margin-bottom: 10px; font-family: Genshin, serif"
|
||||
>
|
||||
<v-icon color="#EBD49E">mdi-calendar-clock</v-icon> 今日素材
|
||||
<span style="color: #faf7e8">{{ new Date().toLocaleDateString() }}</span>
|
||||
<v-btn
|
||||
v-for="text of btnText"
|
||||
@click="getShowCards(text.week)"
|
||||
class="calendar-btn"
|
||||
:style="{
|
||||
border: text.week === weekNow ? '2px solid #fec90b' : '0',
|
||||
background: text.week === btnNow ? '#fec90b' : '#4A5366',
|
||||
}"
|
||||
>
|
||||
{{ text.text }}
|
||||
</v-btn>
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="calendar-grid">
|
||||
<v-card title="天赋培养" class="calendar-single">
|
||||
<v-card-text class="calendar-icons">
|
||||
<v-img
|
||||
v-for="item in showCharacters"
|
||||
:src="item.cover"
|
||||
class="calendar-icon"
|
||||
@click="showContent(item)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card title="武器突破" class="calendar-single">
|
||||
<v-card-text class="calendar-icons">
|
||||
<v-img
|
||||
v-for="item in showWeapons"
|
||||
:src="item.cover"
|
||||
class="calendar-icon"
|
||||
@click="showContent(item)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list class="calendar-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; margin-bottom: 10px; font-family: Genshin, serif">
|
||||
<v-icon color="#EBD49E">
|
||||
mdi-calendar-clock
|
||||
</v-icon> 今日素材
|
||||
<span style="color: #faf7e8">{{ new Date().toLocaleDateString() }}</span>
|
||||
<v-btn
|
||||
v-for="text of btnText"
|
||||
:key="text.week"
|
||||
class="calendar-btn"
|
||||
:style="{
|
||||
border: text.week === weekNow ? '2px solid #fec90b' : '0',
|
||||
background: text.week === btnNow ? '#fec90b' : '#4A5366',
|
||||
}"
|
||||
@click="getShowCards(text.week)"
|
||||
>
|
||||
{{ text.text }}
|
||||
</v-btn>
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="calendar-grid">
|
||||
<v-card title="天赋培养" class="calendar-single">
|
||||
<v-card-text class="calendar-icons">
|
||||
<v-img v-for="item in showCharacters" :key="item.id" :src="item.cover" class="calendar-icon" @click="showContent(item)" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card title="武器突破" class="calendar-single">
|
||||
<v-card-text class="calendar-icons">
|
||||
<v-img v-for="item in showWeapons" :key="item.id" :src="item.cover" class="calendar-icon" @click="showContent(item)" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
// plugins
|
||||
import MysOper from "../plugins/Mys";
|
||||
// interface
|
||||
@@ -63,77 +53,76 @@ const weekNow = ref(new Date().getDay());
|
||||
const btnNow = ref(0 as number);
|
||||
|
||||
const btnText = [
|
||||
{
|
||||
week: 0,
|
||||
text: "周日",
|
||||
},
|
||||
{
|
||||
week: 1,
|
||||
text: "周一",
|
||||
},
|
||||
{
|
||||
week: 2,
|
||||
text: "周二",
|
||||
},
|
||||
{
|
||||
week: 3,
|
||||
text: "周三",
|
||||
},
|
||||
{
|
||||
week: 4,
|
||||
text: "周四",
|
||||
},
|
||||
{
|
||||
week: 5,
|
||||
text: "周五",
|
||||
},
|
||||
{
|
||||
week: 6,
|
||||
text: "周六",
|
||||
},
|
||||
{
|
||||
week: 0,
|
||||
text: "周日",
|
||||
},
|
||||
{
|
||||
week: 1,
|
||||
text: "周一",
|
||||
},
|
||||
{
|
||||
week: 2,
|
||||
text: "周二",
|
||||
},
|
||||
{
|
||||
week: 3,
|
||||
text: "周三",
|
||||
},
|
||||
{
|
||||
week: 4,
|
||||
text: "周四",
|
||||
},
|
||||
{
|
||||
week: 5,
|
||||
text: "周五",
|
||||
},
|
||||
{
|
||||
week: 6,
|
||||
text: "周六",
|
||||
},
|
||||
];
|
||||
|
||||
// show data
|
||||
const showCharacters = ref([] as CalendarCard[]);
|
||||
const showWeapons = ref([] as CalendarCard[]);
|
||||
const router = useRouter();
|
||||
|
||||
// expose
|
||||
defineExpose({
|
||||
name: "素材日历",
|
||||
loading,
|
||||
name: "素材日历",
|
||||
loading,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const calendarData = await MysOper.Calendar.get();
|
||||
if (!calendarData) {
|
||||
await console.error("获取材料日历失败");
|
||||
return;
|
||||
}
|
||||
const calendarCards = MysOper.Calendar.card(calendarData);
|
||||
const week = new Date().getDay();
|
||||
btnNow.value = week;
|
||||
characterCards.value = calendarCards.filter(card => card.type === 2);
|
||||
weaponCards.value = calendarCards.filter(card => card.type === 1);
|
||||
getShowCards(week);
|
||||
loading.value = false;
|
||||
const calendarData = await MysOper.Calendar.get();
|
||||
if (!calendarData) {
|
||||
await console.error("获取材料日历失败");
|
||||
return;
|
||||
}
|
||||
const calendarCards = MysOper.Calendar.card(calendarData);
|
||||
const week = new Date().getDay();
|
||||
btnNow.value = week;
|
||||
characterCards.value = calendarCards.filter((card) => card.type === 2);
|
||||
weaponCards.value = calendarCards.filter((card) => card.type === 1);
|
||||
getShowCards(week);
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
// 根据星期几获取显示内容
|
||||
function getShowCards(choice: number) {
|
||||
btnNow.value = choice;
|
||||
const week = choice === 0 ? 7 : choice;
|
||||
showCharacters.value = characterCards.value
|
||||
.filter(card => card.drop_day.includes(week.toString()))
|
||||
.sort((a, b) => a.sort_day[week] - b.sort_day[week]);
|
||||
showWeapons.value = weaponCards.value
|
||||
.filter(card => card.drop_day.includes(week.toString()))
|
||||
.sort((a, b) => a.sort_day[week] - b.sort_day[week]);
|
||||
function getShowCards (choice: number) {
|
||||
btnNow.value = choice;
|
||||
const week = choice === 0 ? 7 : choice;
|
||||
showCharacters.value = characterCards.value
|
||||
.filter((card) => card.drop_day.includes(week.toString()))
|
||||
.sort((a, b) => a.sort_day[week] - b.sort_day[week]);
|
||||
showWeapons.value = weaponCards.value
|
||||
.filter((card) => card.drop_day.includes(week.toString()))
|
||||
.sort((a, b) => a.sort_day[week] - b.sort_day[week]);
|
||||
}
|
||||
|
||||
function showContent(item: CalendarCard) {
|
||||
// todo：二级跳转，目前先直接跳到角色详情页
|
||||
window.open(OBC_CONTENT_API.replace("{content_id}", item.url));
|
||||
function showContent (item: CalendarCard) {
|
||||
// todo：二级跳转，目前先直接跳到角色详情页
|
||||
window.open(OBC_CONTENT_API.replace("{content_id}", item.url));
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<v-overlay v-model="visible">
|
||||
<div class="confirm-div">
|
||||
<div class="confirm-box">
|
||||
<div class="confirm-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="confirm-btn-box">
|
||||
<button class="confirm-btn" @click="onCancel">
|
||||
<img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel" />
|
||||
<span class="btn-text">
|
||||
{{ cancel }}
|
||||
</span>
|
||||
</button>
|
||||
<button class="confirm-btn" @click="onConfirm">
|
||||
<img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm" />
|
||||
<span class="btn-text">
|
||||
{{ confirm }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-overlay>
|
||||
<v-overlay v-model="visible">
|
||||
<div class="confirm-div">
|
||||
<div class="confirm-box">
|
||||
<div class="confirm-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="confirm-btn-box">
|
||||
<button class="confirm-btn" @click="onCancel">
|
||||
<img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel">
|
||||
<span class="btn-text">
|
||||
{{ cancel }}
|
||||
</span>
|
||||
</button>
|
||||
<button class="confirm-btn" @click="onConfirm">
|
||||
<img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm">
|
||||
<span class="btn-text">
|
||||
{{ confirm }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-overlay>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -29,40 +29,40 @@
|
||||
import { computed } from "vue";
|
||||
|
||||
interface TConfirmProps {
|
||||
title: string;
|
||||
cancel?: string;
|
||||
confirm?: string;
|
||||
/** 此值为 true 时显示对话框 */
|
||||
modelValue: boolean;
|
||||
title: string;
|
||||
cancel?: string;
|
||||
confirm?: string;
|
||||
/** 此值为 true 时显示对话框 */
|
||||
modelValue: boolean;
|
||||
}
|
||||
|
||||
interface TConfirmEmits {
|
||||
(e: "update:show", v: boolean): void;
|
||||
(e: "update:modelValue", v: boolean): void;
|
||||
(e: "confirm"): void;
|
||||
(e: "cancel"): void;
|
||||
(e: "update:show", v: boolean): void;
|
||||
(e: "update:modelValue", v: boolean): void;
|
||||
(e: "confirm"): void;
|
||||
(e: "cancel"): void;
|
||||
}
|
||||
|
||||
const emits = defineEmits<TConfirmEmits>();
|
||||
const props = withDefaults(defineProps<TConfirmProps>(), {
|
||||
title: "确认",
|
||||
cancel: "取消",
|
||||
confirm: "确定",
|
||||
title: "确认",
|
||||
cancel: "取消",
|
||||
confirm: "确定",
|
||||
});
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: v => emits("update:modelValue", v),
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emits("update:modelValue", v),
|
||||
});
|
||||
|
||||
const onCancel = () => {
|
||||
visible.value = false;
|
||||
emits("cancel");
|
||||
visible.value = false;
|
||||
emits("cancel");
|
||||
};
|
||||
|
||||
const onConfirm = () => {
|
||||
visible.value = false;
|
||||
emits("confirm");
|
||||
visible.value = false;
|
||||
emits("confirm");
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -73,7 +73,7 @@ const onConfirm = () => {
|
||||
height: 20vh;
|
||||
top: 40vh;
|
||||
left: 30vw;
|
||||
background: #ffffff;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
||||
@@ -1,35 +1,43 @@
|
||||
<template>
|
||||
<div class="loading-div">
|
||||
<div class="loading-content">
|
||||
<div class="loading-title">
|
||||
{{ title }}
|
||||
<v-progress-circular indeterminate color="#f4d8a8" v-show="!empty" />
|
||||
</div>
|
||||
<div class="loading-subtitle" v-show="subtitle">{{ subtitle }}</div>
|
||||
<div class="loading-img" v-if="!empty">
|
||||
<img src="/source/UI/loading.webp" alt="loading" />
|
||||
</div>
|
||||
<div class="loading-img" v-else>
|
||||
<img src="/source/UI/empty.webp" alt="empty" />
|
||||
</div>
|
||||
<div class="loading-text" v-show="content">{{ content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loading-div">
|
||||
<div class="loading-content">
|
||||
<div class="loading-title">
|
||||
{{ title }}
|
||||
<v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
|
||||
</div>
|
||||
<div v-if="subtitle !== ''" class="loading-subtitle">
|
||||
{{ subtitle }}
|
||||
</div>
|
||||
<div v-if="!empty" class="loading-img">
|
||||
<img src="/source/UI/loading.webp" alt="loading">
|
||||
</div>
|
||||
<div v-else class="loading-img">
|
||||
<img src="/source/UI/empty.webp" alt="empty">
|
||||
</div>
|
||||
<div v-if="content !== ''" class="loading-text">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
interface LoadingProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
content?: string;
|
||||
empty?: boolean;
|
||||
position?: string;
|
||||
}
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
content?: string;
|
||||
empty?: boolean;
|
||||
position?: string;
|
||||
}>(),
|
||||
{
|
||||
title: "加载中",
|
||||
empty: false,
|
||||
position: "absolute",
|
||||
}
|
||||
defineProps<LoadingProps>(),
|
||||
{
|
||||
title: "加载中",
|
||||
subtitle: "",
|
||||
content: "",
|
||||
empty: false,
|
||||
position: "absolute",
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
@@ -40,7 +48,7 @@ withDefaults(
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: rgba(57, 59, 64, 0.5);
|
||||
background: rgb(57 59 64 / 50%);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@@ -1,56 +1,45 @@
|
||||
<template>
|
||||
<v-list class="pool-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
|
||||
<img src="../assets/icons/icon-wish.svg" alt="wish" class="pool-wish-icon" />
|
||||
限时祈愿</v-list-item-title
|
||||
>
|
||||
<div v-if="!loading" class="pool-grid">
|
||||
<v-card
|
||||
v-for="pool in poolCards"
|
||||
style="background: #faf7e8; color: #546d8b; border-radius: 10px"
|
||||
>
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="pool.title" :subtitle="pool.subtitle">
|
||||
<template v-slot:prepend>
|
||||
<v-img
|
||||
:src="pool.voice.icon"
|
||||
style="transform: translate(0, -10px); width: 60px; height: 60px"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<audio :src="pool.voice.url" controls />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="pool-cover" @click="toPost(pool)">
|
||||
<img :src="pool.cover" alt="cover" />
|
||||
</div>
|
||||
<div class="pool-character">
|
||||
<div v-for="character in pool.characters" @click="toOuter(character.url, pool.title)">
|
||||
<img :src="character.icon" class="pool-icon" alt="character" />
|
||||
</div>
|
||||
<div class="pool-clock">
|
||||
<v-progress-circular
|
||||
:model-value="poolTimePass[pool.post_id]"
|
||||
size="100"
|
||||
width="10"
|
||||
color="#90caf9"
|
||||
>
|
||||
{{ poolTimeGet[pool.post_id] }}
|
||||
</v-progress-circular>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ pool.time.start }}~{{ pool.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list class="pool-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
|
||||
<img src="../assets/icons/icon-wish.svg" alt="wish" class="pool-wish-icon">
|
||||
限时祈愿
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="pool-grid">
|
||||
<v-card v-for="pool in poolCards" :key="pool.post_id" style="background: #faf7e8; color: #546d8b; border-radius: 10px">
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="pool.title" :subtitle="pool.subtitle">
|
||||
<template #prepend>
|
||||
<v-img :src="pool.voice.icon" style="transform: translate(0, -10px); width: 60px; height: 60px" />
|
||||
</template>
|
||||
<template #append>
|
||||
<audio :src="pool.voice.url" controls />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="pool-cover" @click="toPost(pool)">
|
||||
<img :src="pool.cover" alt="cover">
|
||||
</div>
|
||||
<div class="pool-character">
|
||||
<div v-for="character in pool.characters" :key="character.url" @click="toOuter(character.url, pool.title)">
|
||||
<img :src="character.icon" class="pool-icon" alt="character">
|
||||
</div>
|
||||
<div class="pool-clock">
|
||||
<v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" color="#90caf9">
|
||||
{{ poolTimeGet[pool.post_id] }}
|
||||
</v-progress-circular>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ pool.time.start }}~{{ pool.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -82,78 +71,87 @@ const poolTimePass = ref({} as Map<number>);
|
||||
|
||||
// expose
|
||||
defineExpose({
|
||||
name: "限时祈愿",
|
||||
loading,
|
||||
name: "限时祈愿",
|
||||
loading,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const gachaData = await MysOper.Gacha.get();
|
||||
if (!gachaData) {
|
||||
await console.error("获取限时祈愿数据失败");
|
||||
return;
|
||||
}
|
||||
if (!checkCover(gachaData)) {
|
||||
poolCards.value = await MysOper.Gacha.card(gachaData);
|
||||
let coverData: Map<string> = {};
|
||||
poolCards.value.map(pool => {
|
||||
coverData[pool.post_id] = pool.cover;
|
||||
});
|
||||
homeStore.poolCover = coverData;
|
||||
} else {
|
||||
poolCards.value = await MysOper.Gacha.card(gachaData, homeStore.poolCover);
|
||||
}
|
||||
poolCards.value.map(pool => {
|
||||
poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
|
||||
poolTimePass.value[pool.post_id] = pool.time.end_stamp - Date.now();
|
||||
});
|
||||
await setInterval(() => {
|
||||
poolCards.value.map(pool => {
|
||||
poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
|
||||
poolTimePass.value[pool.post_id] =
|
||||
const gachaData = await MysOper.Gacha.get();
|
||||
if (!gachaData) {
|
||||
await console.error("获取限时祈愿数据失败");
|
||||
return;
|
||||
}
|
||||
if (!checkCover(gachaData)) {
|
||||
poolCards.value = await MysOper.Gacha.card(gachaData);
|
||||
const coverData: Map<string> = {};
|
||||
poolCards.value.map((pool) => {
|
||||
coverData[pool.post_id] = pool.cover;
|
||||
return pool;
|
||||
});
|
||||
homeStore.poolCover = coverData;
|
||||
} else {
|
||||
poolCards.value = await MysOper.Gacha.card(gachaData, homeStore.poolCover);
|
||||
}
|
||||
poolCards.value.map((pool) => {
|
||||
poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
|
||||
poolTimePass.value[pool.post_id] = pool.time.end_stamp - Date.now();
|
||||
return pool;
|
||||
});
|
||||
await setInterval(() => {
|
||||
poolCards.value.map((pool) => {
|
||||
poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
|
||||
poolTimePass.value[pool.post_id] =
|
||||
((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
|
||||
});
|
||||
}, 1000);
|
||||
loading.value = false;
|
||||
return pool;
|
||||
});
|
||||
}, 1000);
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
// 检测是否有新的限时祈愿
|
||||
function checkCover(data: GachaData[]) {
|
||||
// 如果没有缓存
|
||||
if (!homeStore.poolCover || Object.keys(homeStore.poolCover).length === 0) {
|
||||
return false;
|
||||
}
|
||||
// 获取缓存
|
||||
const cover = homeStore.poolCover;
|
||||
return data.every(item => {
|
||||
const post_id = item.activity_url.split("/").pop();
|
||||
if (!post_id || isNaN(Number(post_id))) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
cover[Number(post_id)] !== undefined && cover[Number(post_id)] !== "/source/UI/empty.webp"
|
||||
);
|
||||
});
|
||||
function checkCover (data: GachaData[]) {
|
||||
// 如果没有缓存
|
||||
if (!homeStore.poolCover || Object.keys(homeStore.poolCover).length === 0) {
|
||||
return false;
|
||||
}
|
||||
// 获取缓存
|
||||
const cover = homeStore.poolCover satisfies Map<string>;
|
||||
if (cover === undefined || cover === null) {
|
||||
return false;
|
||||
}
|
||||
return data.every((item) => {
|
||||
const post_id = item.activity_url.split("/").pop();
|
||||
if (!post_id || isNaN(Number(post_id))) {
|
||||
return false;
|
||||
}
|
||||
if (!Object.keys(cover).includes(post_id)) {
|
||||
return false;
|
||||
} else {
|
||||
const coverUrl = Object.keys(cover).find((key) => key === post_id);
|
||||
return coverUrl !== "/source/UI/empty.webp";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toOuter(url: string, title: string) {
|
||||
createTGWindow(url, "祈愿", title, 1200, 800, true);
|
||||
function toOuter (url: string, title: string) {
|
||||
createTGWindow(url, "祈愿", title, 1200, 800, true);
|
||||
}
|
||||
|
||||
function getLastPoolTime(time: number) {
|
||||
const hour = Math.floor(time / 1000 / 60 / 60);
|
||||
const minute = Math.floor((time / 1000 / 60 / 60 - hour) * 60);
|
||||
const second = Math.floor(((time / 1000 / 60 / 60 - hour) * 60 - minute) * 60);
|
||||
return `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
|
||||
function getLastPoolTime (time: number) {
|
||||
const hour = Math.floor(time / 1000 / 60 / 60);
|
||||
const minute = Math.floor((time / 1000 / 60 / 60 - hour) * 60);
|
||||
const second = Math.floor(((time / 1000 / 60 / 60 - hour) * 60 - minute) * 60);
|
||||
return `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function toPost(pool: GachaCard) {
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
post_id: pool.post_id.toString(),
|
||||
},
|
||||
}).href;
|
||||
createTGWindow(path, "限时祈愿", pool.title, 960, 720, false);
|
||||
function toPost (pool: GachaCard) {
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
post_id: pool.post_id.toString(),
|
||||
},
|
||||
}).href;
|
||||
createTGWindow(path, "限时祈愿", pool.title, 960, 720, false);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -165,7 +163,7 @@ function toPost(pool: GachaCard) {
|
||||
}
|
||||
|
||||
.pool-card {
|
||||
font-family: "Genshin", serif;
|
||||
font-family: Genshin, serif;
|
||||
width: 100%;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -1,52 +1,47 @@
|
||||
<template>
|
||||
<v-list class="position-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
|
||||
<img src="../assets/icons/board.svg" alt="act" class="position-act-icon" />
|
||||
近期活动
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="position-grid">
|
||||
<v-card
|
||||
v-for="card in positionCards"
|
||||
style="background: #faf7e8; color: #546d8b; border-radius: 10px"
|
||||
>
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="card.title" :subtitle="card.abstract">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar rounded="0" @click="toPost(card)" style="cursor: pointer">
|
||||
<v-img :src="card.icon" style="border-radius: 10px" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-divider class="border-opacity-75"></v-divider>
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ card.time.start }}~{{ card.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<span style="width: 80%; margin-left: 10px">
|
||||
<v-icon>mdi-clock-outline</v-icon>
|
||||
剩余时间：
|
||||
<span style="color: #90caf9" v-if="positionTimeGet[card.post_id] !== '已结束'">{{
|
||||
positionTimeGet[card.post_id]
|
||||
}}</span>
|
||||
<span style="color: #ff6d6d" v-if="positionTimeGet[card.post_id] === '已结束'"
|
||||
>已结束</span
|
||||
>
|
||||
</span>
|
||||
<v-btn @click="toPost(card)" class="card-btn">
|
||||
<template v-slot:prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check" />查看
|
||||
</template>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list class="position-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
|
||||
<img src="../assets/icons/board.svg" alt="act" class="position-act-icon">
|
||||
近期活动
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="position-grid">
|
||||
<v-card v-for="card in positionCards" :key="card.post_id" style="background: #faf7e8; color: #546d8b; border-radius: 10px">
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="card.title" :subtitle="card.abstract">
|
||||
<template #prepend>
|
||||
<v-avatar rounded="0" style="cursor: pointer" @click="toPost(card)">
|
||||
<v-img :src="card.icon" style="border-radius: 10px" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-divider class="border-opacity-75" />
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ card.time.start }}~{{ card.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<span style="width: 80%; margin-left: 10px">
|
||||
<v-icon>mdi-clock-outline</v-icon>
|
||||
剩余时间：
|
||||
<span v-if="positionTimeGet[card.post_id] !== '已结束'" style="color: #90caf9">{{
|
||||
positionTimeGet[card.post_id]
|
||||
}}</span>
|
||||
<span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #ff6d6d">已结束</span>
|
||||
</span>
|
||||
<v-btn class="card-btn" @click="toPost(card)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -71,55 +66,55 @@ const router = useRouter();
|
||||
|
||||
// expose
|
||||
defineExpose({
|
||||
name: "近期活动",
|
||||
loading,
|
||||
name: "近期活动",
|
||||
loading,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const positionData = await MysOper.Position.get();
|
||||
if (!positionData) {
|
||||
console.error("获取近期活动失败");
|
||||
return;
|
||||
}
|
||||
positionCards.value = MysOper.Position.card(positionData);
|
||||
positionCards.value.forEach(card => {
|
||||
positionTimeGet.value[card.post_id] = getLastPositionTime(card.time.end_stamp - Date.now());
|
||||
positionTimeEnd.value[card.post_id] = card.time.end_stamp;
|
||||
});
|
||||
await setInterval(() => {
|
||||
positionCards.value.forEach(card => {
|
||||
const time = card.time.end_stamp - Date.now();
|
||||
if (time <= 0) {
|
||||
positionTimeGet.value[card.post_id] = "已结束";
|
||||
return;
|
||||
}
|
||||
positionTimeGet.value[card.post_id] = getLastPositionTime(time);
|
||||
});
|
||||
}, 1000);
|
||||
loading.value = false;
|
||||
const positionData = await MysOper.Position.get();
|
||||
if (!positionData) {
|
||||
console.error("获取近期活动失败");
|
||||
return;
|
||||
}
|
||||
positionCards.value = MysOper.Position.card(positionData);
|
||||
positionCards.value.forEach((card) => {
|
||||
positionTimeGet.value[card.post_id] = getLastPositionTime(card.time.end_stamp - Date.now());
|
||||
positionTimeEnd.value[card.post_id] = card.time.end_stamp;
|
||||
});
|
||||
await setInterval(() => {
|
||||
positionCards.value.forEach((card) => {
|
||||
const time = card.time.end_stamp - Date.now();
|
||||
if (time <= 0) {
|
||||
positionTimeGet.value[card.post_id] = "已结束";
|
||||
return;
|
||||
}
|
||||
positionTimeGet.value[card.post_id] = getLastPositionTime(time);
|
||||
});
|
||||
}, 1000);
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
function getLastPositionTime(time: number) {
|
||||
const day = Math.floor(time / (24 * 3600 * 1000));
|
||||
const hour = Math.floor((time % (24 * 3600 * 1000)) / (3600 * 1000));
|
||||
const minute = Math.floor((time % (3600 * 1000)) / (60 * 1000));
|
||||
const second = Math.floor((time % (60 * 1000)) / 1000);
|
||||
return `${day}天 ${hour.toFixed(0).padStart(2, "0")}:${minute
|
||||
.toFixed(0)
|
||||
.padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
|
||||
function getLastPositionTime (time: number) {
|
||||
const day = Math.floor(time / (24 * 3600 * 1000));
|
||||
const hour = Math.floor((time % (24 * 3600 * 1000)) / (3600 * 1000));
|
||||
const minute = Math.floor((time % (3600 * 1000)) / (60 * 1000));
|
||||
const second = Math.floor((time % (60 * 1000)) / 1000);
|
||||
return `${day}天 ${hour.toFixed(0).padStart(2, "0")}:${minute.toFixed(0).padStart(2, "0")}:${second
|
||||
.toFixed(0)
|
||||
.padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
async function toPost(card: PositionCard) {
|
||||
const post_id = card.post_id;
|
||||
// 获取路由路径
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
post_id: post_id,
|
||||
},
|
||||
}).href;
|
||||
// 打开新窗口
|
||||
createTGWindow(path, "近期活动", card.title, 960, 720, false);
|
||||
async function toPost (card: PositionCard) {
|
||||
const post_id = card.post_id;
|
||||
// 获取路由路径
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
post_id,
|
||||
},
|
||||
}).href;
|
||||
// 打开新窗口
|
||||
createTGWindow(path, "近期活动", card.title, 960, 720, false);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -132,7 +127,7 @@ async function toPost(card: PositionCard) {
|
||||
|
||||
.position-card {
|
||||
margin-top: 10px;
|
||||
font-family: "Genshin", serif;
|
||||
font-family: Genshin, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@@ -1,104 +1,110 @@
|
||||
<template>
|
||||
<v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #faf7e8">
|
||||
<v-list class="sideList" density="compact" v-model:opened="open" nav>
|
||||
<!-- 负责收缩侧边栏 -->
|
||||
<v-list-item @click="collapse">
|
||||
<template v-slot:prepend v-if="rail">
|
||||
<v-list-item-action>
|
||||
<v-icon color="rgb(205, 182, 145)">mdi-chevron-right</v-icon>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
<template v-slot:append v-else>
|
||||
<v-list-item-action>
|
||||
<v-icon color="rgb(205, 182, 145)">mdi-chevron-left</v-icon>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<!-- 菜单项 -->
|
||||
<v-list-item value="home" title="首页" link href="/">
|
||||
<template v-slot:prepend>
|
||||
<img src="/source/UI/paimon.webp" alt="homeIcon" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="公告" value="announcements" link href="/announcements">
|
||||
<template v-slot:prepend>
|
||||
<img src="../assets/icons/board.svg" alt="annoIcon" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-group value="mihoyo" fluid>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item title="米游社" v-bind="props">
|
||||
<template v-slot:prepend>
|
||||
<img src="/platforms/mhy/mys.webp" alt="mihoyo" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item title="原神" value="mhy-ys" link href="/news/2">
|
||||
<template v-slot:prepend>
|
||||
<img src="/platforms/mhy/ys.webp" alt="ys" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="崩坏3" value="mhy-bh3" link href="/news/1">
|
||||
<template v-slot:prepend>
|
||||
<img src="/platforms/mhy/bh3.webp" alt="bh3" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="崩坏2" value="mhy-bh2" link href="/news/3">
|
||||
<template v-slot:prepend>
|
||||
<img src="/platforms/mhy/bh2.webp" alt="bh2" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="未定事件簿" value="mhy-wd" link href="/news/4">
|
||||
<template v-slot:prepend>
|
||||
<img src="/platforms/mhy/wd.webp" alt="wd" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="星穹铁道" value="mhy-sr" link href="/news/6">
|
||||
<template v-slot:prepend>
|
||||
<img src="/platforms/mhy/sr.webp" alt="sr" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="绝区零" value="mhy-zzz" link href="/news/8">
|
||||
<template v-slot:prepend>
|
||||
<img src="/platforms/mhy/zzz.webp" alt="zzz" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="大别野" value="mhy-dby" link href="/news/5">
|
||||
<template v-slot:prepend>
|
||||
<img src="/platforms/mhy/dby.webp" alt="dby" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="成就" value="achievements" link href="/achievements">
|
||||
<template v-slot:prepend>
|
||||
<img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-group value="database" fluid>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item title="数据库" v-bind="props">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="rgb(205, 182, 145)">mdi-database</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item title="GCG" value="db-GCG" link href="/GCG">
|
||||
<template v-slot:prepend>
|
||||
<img src="../assets/icons/GCG.svg" alt="gcgIcon" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="设置" value="config" link href="/config">
|
||||
<template v-slot:prepend>
|
||||
<img src="../assets/icons/setting.svg" alt="setting" class="sideIcon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #faf7e8">
|
||||
<v-list v-model:opened="open" class="side-list" density="compact" nav>
|
||||
<!-- 负责收缩侧边栏 -->
|
||||
<v-list-item @click="collapse">
|
||||
<template v-if="rail" #prepend>
|
||||
<v-list-item-action>
|
||||
<v-icon color="rgb(205, 182, 145)">
|
||||
mdi-chevron-right
|
||||
</v-icon>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
<template v-else #append>
|
||||
<v-list-item-action>
|
||||
<v-icon color="rgb(205, 182, 145)">
|
||||
mdi-chevron-left
|
||||
</v-icon>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<!-- 菜单项 -->
|
||||
<v-list-item value="home" title="首页" link href="/">
|
||||
<template #prepend>
|
||||
<img src="/source/UI/paimon.webp" alt="homeIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="公告" value="announcements" link href="/announcements">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/board.svg" alt="annoIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider />
|
||||
<v-list-group value="mihoyo" fluid>
|
||||
<template #activator="{ props }">
|
||||
<v-list-item title="米游社" v-bind="props">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item title="原神" value="mhy-ys" link href="/news/2">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/ys.webp" alt="ys" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="崩坏3" value="mhy-bh3" link href="/news/1">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/bh3.webp" alt="bh3" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="崩坏2" value="mhy-bh2" link href="/news/3">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/bh2.webp" alt="bh2" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="未定事件簿" value="mhy-wd" link href="/news/4">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/wd.webp" alt="wd" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="星穹铁道" value="mhy-sr" link href="/news/6">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/sr.webp" alt="sr" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="绝区零" value="mhy-zzz" link href="/news/8">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/zzz.webp" alt="zzz" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="大别野" value="mhy-dby" link href="/news/5">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/dby.webp" alt="dby" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-divider />
|
||||
<v-list-item title="成就" value="achievements" link href="/achievements">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider />
|
||||
<v-list-group value="database" fluid>
|
||||
<template #activator="{ props }">
|
||||
<v-list-item title="数据库" v-bind="props">
|
||||
<template #prepend>
|
||||
<v-icon color="rgb(205, 182, 145)">
|
||||
mdi-database
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item title="GCG" value="db-GCG" link href="/GCG">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-divider />
|
||||
<v-list-item title="设置" value="config" link href="/config">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/setting.svg" alt="setting" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -111,27 +117,27 @@ const appStore = useAppStore();
|
||||
|
||||
const rail = ref(appStore.sidebar.collapse);
|
||||
const open = computed({
|
||||
get() {
|
||||
return appStore.getSubmenu();
|
||||
},
|
||||
set(value: string[]) {
|
||||
appStore.sidebar.submenu.mihoyo = value.includes("mihoyo");
|
||||
appStore.sidebar.submenu.database = value.includes("database");
|
||||
},
|
||||
get () {
|
||||
return appStore.getSubmenu();
|
||||
},
|
||||
set (value: string[]) {
|
||||
appStore.sidebar.submenu.mihoyo = value.includes("mihoyo");
|
||||
appStore.sidebar.submenu.database = value.includes("database");
|
||||
},
|
||||
});
|
||||
|
||||
function collapse() {
|
||||
rail.value = !rail.value;
|
||||
appStore.sidebar.collapse = rail.value;
|
||||
function collapse () {
|
||||
rail.value = !rail.value;
|
||||
appStore.sidebar.collapse = rail.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.sideList {
|
||||
font-family: "Genshin-Light", serif;
|
||||
.side-list {
|
||||
font-family: Genshin-Light, serif;
|
||||
}
|
||||
|
||||
.sideIcon {
|
||||
.side-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 32px;
|
||||
|
||||
Reference in New Issue
Block a user