mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-11 09:08:14 +08:00
🌈 style(eslint): 第三次格式化
camecase 回头在部分文件 ignore 掉，不然不兼容之前的版本及外部接口 (cherry picked from commit 740b4698e916ce0f7911f5eac934183a94288e61)
This commit is contained in:
BTMuli
54
src/App.vue
54
src/App.vue
@@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<div v-if="isMain">
|
||||
<v-layout>
|
||||
<!-- 侧边栏菜单 -->
|
||||
<TSidebar />
|
||||
<!-- 主体内容 -->
|
||||
<v-main class="app-main">
|
||||
<v-container fluid>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-layout>
|
||||
<!-- 主体内容 -->
|
||||
<v-main class="app-main">
|
||||
<v-container fluid>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</div>
|
||||
<TBackTop />
|
||||
<div v-if="isMain">
|
||||
<v-layout>
|
||||
<!-- 侧边栏菜单 -->
|
||||
<TSidebar />
|
||||
<!-- 主体内容 -->
|
||||
<v-main class="app-main">
|
||||
<v-container fluid>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-layout>
|
||||
<!-- 主体内容 -->
|
||||
<v-main class="app-main">
|
||||
<v-container fluid>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</div>
|
||||
<TBackTop />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -43,7 +43,7 @@ const isMain = ref(true as boolean);
|
||||
|
||||
onMounted(async () => {
|
||||
// 获取当前窗口
|
||||
const win = await window.getCurrent();
|
||||
const win = window.getCurrent();
|
||||
isMain.value = win.label === "tauri-genshin";
|
||||
if (isMain.value) {
|
||||
const title = "Tauri.Genshin v" + (await app.getVersion()) + " Alpha";
|
||||
@@ -93,8 +93,8 @@ async function writeIndex () {
|
||||
</script>
|
||||
<style lang="css">
|
||||
.app-main {
|
||||
min-height: 100vh;
|
||||
background: #ece5d8;
|
||||
backdrop-filter: blur(20px);
|
||||
min-height: 100vh;
|
||||
background: #ece5d8;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,74 +4,74 @@
|
||||
*/
|
||||
|
||||
.anno-body {
|
||||
margin: 20px auto;
|
||||
width: 800px;
|
||||
font-family: "Genshin-Light", serif;
|
||||
margin: 20px auto;
|
||||
width: 800px;
|
||||
font-family: "Genshin-Light", serif;
|
||||
}
|
||||
|
||||
.anno-title {
|
||||
font-family: Genshin, serif;
|
||||
color: #5b738f;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
font-family: Genshin, serif;
|
||||
color: #5b738f;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.anno-subtitle {
|
||||
font-size: 16px;
|
||||
color: #a1aeb6;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
color: #a1aeb6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.anno-img {
|
||||
max-width: 100%;
|
||||
width: 800px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
max-width: 100%;
|
||||
width: 800px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.anno-content {
|
||||
line-height: 2;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.anno-link-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #00c3ff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #00c3ff;
|
||||
}
|
||||
|
||||
.anno-content :deep(a) {
|
||||
color: #00c3ff;
|
||||
text-decoration: none;
|
||||
color: #00c3ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.anno-content :deep(p) {
|
||||
line-height: 2;
|
||||
color: #4b5366;
|
||||
line-height: 2;
|
||||
color: #4b5366;
|
||||
}
|
||||
|
||||
.anno-content :deep(details) {
|
||||
border: #35acce 2px solid;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
border: #35acce 2px solid;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.anno-content :deep(details) div {
|
||||
margin-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.anno-content :deep(details) ::marker {
|
||||
color: #35acce;
|
||||
content: "✧";
|
||||
color: #35acce;
|
||||
content: "✧";
|
||||
}
|
||||
|
||||
.anno-content :deep(ol) {
|
||||
list-style: "✧";
|
||||
list-style: "✧";
|
||||
}
|
||||
|
||||
.anno-content :deep(td) {
|
||||
line-height: 2;
|
||||
padding-left: 10px;
|
||||
line-height: 2;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
@@ -4,122 +4,122 @@
|
||||
*/
|
||||
/* todo scoped 不生效 */
|
||||
.mys-post-body {
|
||||
margin: 20px auto;
|
||||
width: 800px;
|
||||
font-family: "Genshin-Light", serif;
|
||||
margin: 20px auto;
|
||||
width: 800px;
|
||||
font-family: "Genshin-Light", serif;
|
||||
}
|
||||
|
||||
:deep(.mys-post-div) {
|
||||
margin: 20px auto;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
:deep(.mys-post-span) {
|
||||
line-height: 2;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
:deep(.mys-post-link) {
|
||||
color: #00c3ff;
|
||||
text-decoration: none;
|
||||
color: #00c3ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:deep(.mys-post-details) {
|
||||
border: #35acce 2px solid;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: #35acce 2px solid;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:deep(.mys-post-details) ::marker {
|
||||
color: #35acce;
|
||||
content: "✧";
|
||||
color: #35acce;
|
||||
content: "✧";
|
||||
}
|
||||
|
||||
:deep(.mys-post-divider) {
|
||||
margin: 20px auto;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
:deep(.mys-post-divider) img {
|
||||
width: 800px;
|
||||
height: auto;
|
||||
width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:deep(.mys-post-img) {
|
||||
max-width: 100%;
|
||||
width: 800px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
max-width: 100%;
|
||||
width: 800px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:deep(.mys-post-vod) {
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
border-radius: 10px;
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:deep(.mys-post-iframe) {
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:deep(.mys-post-link-card) {
|
||||
width: 800px;
|
||||
height: 200px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
background: #faf7e8;
|
||||
width: 800px;
|
||||
height: 200px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
background: #faf7e8;
|
||||
}
|
||||
|
||||
:deep(.mys-post-unknown) {
|
||||
width: 800px;
|
||||
background: #5b738f;
|
||||
color: #faf7e8;
|
||||
font-family: Consolas, monospace;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
border: 2px solid #485466;
|
||||
width: 800px;
|
||||
background: #5b738f;
|
||||
color: #faf7e8;
|
||||
font-family: Consolas, monospace;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
border: 2px solid #485466;
|
||||
}
|
||||
|
||||
:deep(.mys-post-link-card-cover) {
|
||||
width: auto;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
width: auto;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:deep(.mys-post-link-card-cover) img {
|
||||
max-width: 400px;
|
||||
width: auto;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
max-width: 400px;
|
||||
width: auto;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:deep(.mys-post-link-card-content) {
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
:deep(.mys-post-link-card-title) {
|
||||
font-size: 20px;
|
||||
font-family: Genshin, serif;
|
||||
color: #546d8b;
|
||||
height: 150px;
|
||||
font-size: 20px;
|
||||
font-family: Genshin, serif;
|
||||
color: #546d8b;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
:deep(.mys-post-link-card-price) {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ff6d6d;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ff6d6d;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:deep(.mys-post-link-card-btn) {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
color: #00c3ff;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
color: #00c3ff;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
/* 设置全局字体 */
|
||||
@font-face {
|
||||
font-family: "Genshin";
|
||||
src: url("./汉仪文黑-85W.ttf") format("truetype");
|
||||
font-family: "Genshin";
|
||||
src: url("./汉仪文黑-85W.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Genshin-Light";
|
||||
src: url("./汉仪文黑-55W.ttf") format("truetype");
|
||||
font-family: "Genshin-Light";
|
||||
src: url("./汉仪文黑-55W.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Consolas";
|
||||
src: url("./consolas.ttf") format("truetype");
|
||||
font-family: "Consolas";
|
||||
src: url("./consolas.ttf") format("truetype");
|
||||
}
|
||||
/* 全局字体样式 */
|
||||
.global-font {
|
||||
font-family: "Genshin", sans-serif;
|
||||
font-family: "Genshin", sans-serif;
|
||||
}
|
||||
|
||||
@@ -5,31 +5,31 @@
|
||||
* @since Alpha v0.1.1
|
||||
*/
|
||||
.dev-json {
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
font-family: Consolas, serif;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
font-family: Consolas, serif;
|
||||
}
|
||||
|
||||
/* card action 内的按钮 */
|
||||
.card-btn {
|
||||
background: #4a5366;
|
||||
color: #ece5d8;
|
||||
border-radius: 50px;
|
||||
margin-left: 5px;
|
||||
background: #4a5366;
|
||||
color: #ece5d8;
|
||||
border-radius: 50px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.card-btn img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.card-dev-btn {
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
}
|
||||
|
||||
.card-dev-btn img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div v-show="canTop" class="back-top" @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
|
||||
@@ -50,37 +50,37 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.back-top {
|
||||
position: fixed;
|
||||
right: 0.4rem;
|
||||
bottom: 1rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
position: fixed;
|
||||
right: 0.4rem;
|
||||
bottom: 1rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.back-top :hover {
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 0 10px 5px #546d8b;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 0 10px 5px #546d8b;
|
||||
}
|
||||
|
||||
.back-top img {
|
||||
transition: all 0.3s ease-in-out;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,38 +1,50 @@
|
||||
<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"
|
||||
: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>
|
||||
<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
|
||||
@@ -127,46 +139,46 @@ function showContent (item: CalendarCard) {
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.calendar-card {
|
||||
margin-top: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.calendar-single {
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.calendar-icons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
||||
grid-gap: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 5px;
|
||||
border-radius: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.calendar-icon :hover {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-btn {
|
||||
margin-left: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
color: #faf7e8;
|
||||
border-radius: 10px;
|
||||
margin-left: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
color: #faf7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
<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>
|
||||
</div>
|
||||
</v-overlay>
|
||||
</v-overlay>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -68,64 +68,64 @@ const onConfirm = () => {
|
||||
|
||||
<style scoped>
|
||||
.confirm-div {
|
||||
position: absolute;
|
||||
width: 40vw;
|
||||
height: 20vh;
|
||||
top: 40vh;
|
||||
left: 30vw;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 40vw;
|
||||
height: 20vh;
|
||||
top: 40vh;
|
||||
left: 30vw;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.confirm-box {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.confirm-title {
|
||||
font-family: Genshin, serif;
|
||||
text-align: center;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
color: #393b40;
|
||||
margin: 20px;
|
||||
font-size: 30px;
|
||||
font-family: Genshin, serif;
|
||||
text-align: center;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
color: #393b40;
|
||||
margin: 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.confirm-btn-box {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 30%;
|
||||
min-width: 150px;
|
||||
min-height: 30px;
|
||||
background: #4a5366;
|
||||
color: #faf7e8;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 30%;
|
||||
min-width: 150px;
|
||||
min-height: 30px;
|
||||
background: #4a5366;
|
||||
color: #faf7e8;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
width: calc(100% - 70px);
|
||||
text-align: center;
|
||||
font-family: Genshin-Light, serif;
|
||||
font-size: 20px;
|
||||
width: calc(100% - 70px);
|
||||
text-align: center;
|
||||
font-family: Genshin-Light, serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<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 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>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
interface LoadingProps {
|
||||
@@ -29,59 +29,56 @@ interface LoadingProps {
|
||||
position?: string;
|
||||
}
|
||||
|
||||
withDefaults(
|
||||
defineProps<LoadingProps>(),
|
||||
{
|
||||
title: "加载中",
|
||||
subtitle: "",
|
||||
content: "",
|
||||
empty: false,
|
||||
position: "absolute",
|
||||
},
|
||||
);
|
||||
withDefaults(defineProps<LoadingProps>(), {
|
||||
title: "加载中",
|
||||
subtitle: "",
|
||||
content: "",
|
||||
empty: false,
|
||||
position: "absolute",
|
||||
});
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.loading-div {
|
||||
position: v-bind(position);
|
||||
display: flex;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: rgb(57 59 64 / 50%);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
position: v-bind(position);
|
||||
display: flex;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: rgb(57 59 64 / 50%);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
width: 100%;
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
border: #f4d8a8 1px solid;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
border: #f4d8a8 1px solid;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-title {
|
||||
font-size: 2rem;
|
||||
font-family: Genshin, serif;
|
||||
font-weight: 600;
|
||||
color: #f4d8a8;
|
||||
font-size: 2rem;
|
||||
font-family: Genshin, serif;
|
||||
font-weight: 600;
|
||||
color: #f4d8a8;
|
||||
}
|
||||
|
||||
.loading-subtitle {
|
||||
font-size: 1rem;
|
||||
font-family: Genshin-Light, serif;
|
||||
color: #f4d8a8;
|
||||
font-size: 1rem;
|
||||
font-family: Genshin-Light, serif;
|
||||
color: #f4d8a8;
|
||||
}
|
||||
|
||||
.loading-img {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,45 +1,49 @@
|
||||
<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" :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">
|
||||
<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-clock">
|
||||
<v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" color="#90caf9">
|
||||
{{ poolTimeGet[pool.post_id] }}
|
||||
</v-progress-circular>
|
||||
<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>
|
||||
</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-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
|
||||
@@ -101,7 +105,7 @@ onMounted(async () => {
|
||||
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;
|
||||
((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
|
||||
return pool;
|
||||
});
|
||||
}, 1000);
|
||||
@@ -120,14 +124,14 @@ function checkCover (data: GachaData[]) {
|
||||
return false;
|
||||
}
|
||||
return data.every((item) => {
|
||||
const post_id = item.activity_url.split("/").pop();
|
||||
if (!post_id || isNaN(Number(post_id))) {
|
||||
const postId = item.activity_url.split("/").pop();
|
||||
if (!postId || isNaN(Number(postId))) {
|
||||
return false;
|
||||
}
|
||||
if (!Object.keys(cover).includes(post_id)) {
|
||||
if (!Object.keys(cover).includes(postId)) {
|
||||
return false;
|
||||
} else {
|
||||
const coverUrl = Object.keys(cover).find((key) => key === post_id);
|
||||
const coverUrl = Object.keys(cover).find((key) => key === postId);
|
||||
return coverUrl !== "/source/UI/empty.webp";
|
||||
}
|
||||
});
|
||||
@@ -148,6 +152,7 @@ function toPost (pool: GachaCard) {
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
post_id: pool.post_id.toString(),
|
||||
},
|
||||
}).href;
|
||||
@@ -157,75 +162,75 @@ function toPost (pool: GachaCard) {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.pool-wish-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pool-card {
|
||||
font-family: Genshin, serif;
|
||||
width: 100%;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
width: 100%;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pool-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pool-cover {
|
||||
margin: 0 20px 10px;
|
||||
width: calc(100% - 40px);
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 20px 10px;
|
||||
width: calc(100% - 40px);
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pool-cover img {
|
||||
max-width: 100%;
|
||||
transition: all 0.5s;
|
||||
border-radius: 10px;
|
||||
max-width: 100%;
|
||||
transition: all 0.5s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pool-cover :hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.pool-character {
|
||||
margin: 0 20px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
margin: 0 20px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pool-character img {
|
||||
border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pool-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.pool-character :hover .pool-icon {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pool-clock {
|
||||
width: auto;
|
||||
margin-left: 40px;
|
||||
float: right;
|
||||
font-size: small;
|
||||
height: 80px;
|
||||
width: auto;
|
||||
margin-left: 40px;
|
||||
float: right;
|
||||
font-size: small;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,47 +1,51 @@
|
||||
<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" :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>
|
||||
<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
|
||||
@@ -105,12 +109,12 @@ function getLastPositionTime (time: number) {
|
||||
}
|
||||
|
||||
async function toPost (card: PositionCard) {
|
||||
const post_id = card.post_id;
|
||||
// 获取路由路径
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
post_id,
|
||||
// eslint-disable-next-line camelcase
|
||||
post_id: card.post_id,
|
||||
},
|
||||
}).href;
|
||||
// 打开新窗口
|
||||
@@ -120,22 +124,22 @@ async function toPost (card: PositionCard) {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.position-act-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.position-card {
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.position-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(400px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(400px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,110 +1,110 @@
|
||||
<template>
|
||||
<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-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-database
|
||||
mdi-chevron-right
|
||||
</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">
|
||||
</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-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>
|
||||
<!-- 菜单项 -->
|
||||
<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>
|
||||
@@ -134,13 +134,13 @@ function collapse () {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.side-list {
|
||||
font-family: Genshin-Light, serif;
|
||||
font-family: Genshin-Light, serif;
|
||||
}
|
||||
|
||||
.side-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 32px;
|
||||
border-radius: 5px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 32px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
<template>
|
||||
<!-- 顶部操作栏 -->
|
||||
<v-app-bar style="background: rgb(0 0 0 / 50%); color: #f4d8a8; font-family: Genshin, serif">
|
||||
<template #prepend>
|
||||
<span style="font-size: 30px">{{ title }}</span>
|
||||
</template>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
hide-details
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
/>
|
||||
<template #append>
|
||||
<v-btn prepend-icon="mdi-import" class="ms-2 top-btn" @click="importJson">
|
||||
导入
|
||||
</v-btn>
|
||||
<v-btn prepend-icon="mdi-export" class="ms-2 top-btn" @click="exportJson">
|
||||
导出
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
<div v-show="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-show="!loading" class="wrap">
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="left-wrap">
|
||||
<v-list v-for="(series, index) in seriesList" :key="series.id" class="card-left" @click="selectSeries(index)">
|
||||
<div class="version-icon-series">
|
||||
v{{ series.version }}
|
||||
</div>
|
||||
<v-list-item>
|
||||
<template #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-app-bar style="background: rgb(0 0 0 / 50%); color: #f4d8a8; font-family: Genshin, serif">
|
||||
<template #prepend>
|
||||
<span style="font-size: 30px">{{ title }}</span>
|
||||
</template>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
hide-details
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
/>
|
||||
<template #append>
|
||||
<v-btn prepend-icon="mdi-import" class="ms-2 top-btn" @click="importJson">
|
||||
导入
|
||||
</v-btn>
|
||||
<v-btn prepend-icon="mdi-export" class="ms-2 top-btn" @click="exportJson">
|
||||
导出
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
<div v-show="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<!-- 右侧内容-->
|
||||
<div class="right-wrap">
|
||||
<v-list
|
||||
v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + getCardInfo.bg || null + ')',
|
||||
backgroundPosition: 'right',
|
||||
backgroundSize: 'auto 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
margin: '10px',
|
||||
borderRadius: '10px 50px 50px 10px',
|
||||
color: '#485466',
|
||||
fontFamily: 'Genshin,serif',
|
||||
cursor: 'pointer',
|
||||
}"
|
||||
@click="openImg()"
|
||||
>
|
||||
<v-list-item :title="getCardInfo.name" :subtitle="getCardInfo.description">
|
||||
<template #prepend>
|
||||
<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list v-for="achievement in selectedAchievement" :key="achievement.id" class="card-right">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon :color="achievement.completed ? '#fec90b' : '#485466'">
|
||||
<!-- todo 图标替换 -->
|
||||
{{ achievement.completed ? "mdi-check-circle" : "mdi-circle" }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{ achievement.name }}
|
||||
{{ achievement.progress !== 0 ? "| " + achievement.progress : null }}
|
||||
<span class="version-icon-single">v{{ achievement.version }}</span>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ achievement.description }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
<span v-show="achievement.completed" class="right-time">{{ achievement.completed_time }}</span>
|
||||
<v-card class="reward-card" @click="showMaterial('/source/material/原石.webp')">
|
||||
<v-img src="/source/material/原石.webp" sizes="32" />
|
||||
<div class="reward-num">
|
||||
<span>{{ achievement.reward }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div v-show="!loading" class="wrap">
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="left-wrap">
|
||||
<v-list v-for="(series, index) in seriesList" :key="series.id" class="card-left" @click="selectSeries(index)">
|
||||
<div class="version-icon-series">
|
||||
v{{ series.version }}
|
||||
</div>
|
||||
<v-list-item>
|
||||
<template #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>
|
||||
</div>
|
||||
<!-- 右侧内容-->
|
||||
<div class="right-wrap">
|
||||
<v-list
|
||||
v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + getCardInfo.bg || null + ')',
|
||||
backgroundPosition: 'right',
|
||||
backgroundSize: 'auto 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
margin: '10px',
|
||||
borderRadius: '10px 50px 50px 10px',
|
||||
color: '#485466',
|
||||
fontFamily: 'Genshin,serif',
|
||||
cursor: 'pointer',
|
||||
}"
|
||||
@click="openImg()"
|
||||
>
|
||||
<v-list-item :title="getCardInfo.name" :subtitle="getCardInfo.description">
|
||||
<template #prepend>
|
||||
<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list v-for="achievement in selectedAchievement" :key="achievement.id" class="card-right">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon :color="achievement.completed ? '#fec90b' : '#485466'">
|
||||
<!-- todo 图标替换 -->
|
||||
{{ achievement.completed ? "mdi-check-circle" : "mdi-circle" }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{ achievement.name }}
|
||||
{{ achievement.progress !== 0 ? "| " + achievement.progress : null }}
|
||||
<span class="version-icon-single">v{{ achievement.version }}</span>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ achievement.description }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
<span v-show="achievement.completed" class="right-time">{{ achievement.completed_time }}</span>
|
||||
<v-card class="reward-card" @click="showMaterial('/source/material/原石.webp')">
|
||||
<v-img src="/source/material/原石.webp" sizes="32" />
|
||||
<div class="reward-num">
|
||||
<span>{{ achievement.reward }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
<!-- 弹窗提示 -->
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="#F5810A" top>
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
<!-- 弹窗提示 -->
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="#F5810A" top>
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -271,7 +271,7 @@ async function importJson () {
|
||||
const localTime = localData.completed_time;
|
||||
// 如果本地数据不存在，或者本地数据的 timeStamp 小于远程数据的 timeStamp，更新数据
|
||||
if (data.timestamp !== 0) {
|
||||
const fin_time = new Date(data.timestamp * 1000).toLocaleString("zh", {
|
||||
const finishTime = new Date(data.timestamp * 1000).toLocaleString("zh", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
@@ -279,8 +279,9 @@ async function importJson () {
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
});
|
||||
if (fin_time !== localTime || localData.progress !== data.current) {
|
||||
localData.completed_time = fin_time;
|
||||
if (finishTime !== localTime || localData.progress !== data.current) {
|
||||
// eslint-disable-next-line camelcase
|
||||
localData.completed_time = finishTime;
|
||||
localData.progress = data.current;
|
||||
localData.completed = true;
|
||||
// 更新数据
|
||||
@@ -288,6 +289,7 @@ async function importJson () {
|
||||
}
|
||||
} else {
|
||||
if (localData.progress !== data.current) {
|
||||
// eslint-disable-next-line camelcase
|
||||
localData.completed_time = "";
|
||||
localData.progress = data.current;
|
||||
localData.completed = false;
|
||||
@@ -303,6 +305,7 @@ async function importJson () {
|
||||
seriesDB.map(async (data) => {
|
||||
const seriesId = data.id;
|
||||
const achievementsDB = await ReadTGDataByIndex("Achievements", "series", seriesId);
|
||||
// eslint-disable-next-line camelcase
|
||||
data.completed_count = achievementsDB.filter((data) => {
|
||||
return data.completed === true;
|
||||
}).length;
|
||||
@@ -311,13 +314,13 @@ async function importJson () {
|
||||
);
|
||||
loadingTitle.value = "正在刷新数据";
|
||||
seriesDB = await ReadAllTGData("AchievementSeries");
|
||||
const fin_achievements = seriesDB.reduce((a, b) => {
|
||||
const finishAchievments = seriesDB.reduce((a, b) => {
|
||||
return a + b.completed_count;
|
||||
}, 0);
|
||||
const total_achievements = seriesDB.reduce((a, b) => {
|
||||
const totalAchievements = seriesDB.reduce((a, b) => {
|
||||
return a + b.total_count;
|
||||
}, 0);
|
||||
achievementsStore.flushData(total_achievements, fin_achievements);
|
||||
achievementsStore.flushData(totalAchievements, finishAchievments);
|
||||
// 刷新数据
|
||||
await loadData();
|
||||
}
|
||||
@@ -361,7 +364,7 @@ async function exportJson () {
|
||||
};
|
||||
});
|
||||
UIAF_DATA.info = await UiafOper.getUiafInfo();
|
||||
const is_save = await dialog.save({
|
||||
const isSave = await dialog.save({
|
||||
filters: [
|
||||
{
|
||||
name: "achievements",
|
||||
@@ -369,8 +372,8 @@ async function exportJson () {
|
||||
},
|
||||
],
|
||||
});
|
||||
if (is_save) {
|
||||
await fs.writeTextFile(is_save, JSON.stringify(UIAF_DATA));
|
||||
if (isSave) {
|
||||
await fs.writeTextFile(isSave, JSON.stringify(UIAF_DATA));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -378,102 +381,102 @@ async function exportJson () {
|
||||
<style lang="css" scoped>
|
||||
/* 顶部按钮 */
|
||||
.top-btn {
|
||||
background: #393b40;
|
||||
color: #faf7e8 !important;
|
||||
background: #393b40;
|
||||
color: #faf7e8 !important;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
max-height: 90vh;
|
||||
font-family: Genshin-Light, serif;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
max-height: 90vh;
|
||||
font-family: Genshin-Light, serif;
|
||||
}
|
||||
|
||||
/* 左侧系列 */
|
||||
.left-wrap {
|
||||
float: left;
|
||||
width: 25%;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
float: left;
|
||||
width: 25%;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 右侧成就 */
|
||||
.right-wrap {
|
||||
float: right;
|
||||
width: 75%;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
float: right;
|
||||
width: 75%;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 版本信息 */
|
||||
.version-icon-series {
|
||||
font-family: Genshin, serif;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
background: #546d8b;
|
||||
border-radius: 10px 0 0;
|
||||
border-top: #fff 2px solid;
|
||||
border-left: #fff 2px solid;
|
||||
color: #fec90b;
|
||||
font-size: 10px;
|
||||
font-family: Genshin, serif;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
background: #546d8b;
|
||||
border-radius: 10px 0 0;
|
||||
border-top: #fff 2px solid;
|
||||
border-left: #fff 2px solid;
|
||||
color: #fec90b;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.version-icon-single {
|
||||
font-family: Genshin, serif;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: #ff6d6d !important;
|
||||
font-size: 10px;
|
||||
font-family: Genshin, serif;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: #ff6d6d !important;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.card-left {
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #485466;
|
||||
color: #fec90b;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #485466;
|
||||
color: #fec90b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 成就卡片 */
|
||||
.card-right {
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
}
|
||||
|
||||
/* 成就完成时间 */
|
||||
.right-time {
|
||||
margin-right: 10px;
|
||||
font-size: small;
|
||||
color: #faf7e8;
|
||||
margin-right: 10px;
|
||||
font-size: small;
|
||||
color: #faf7e8;
|
||||
}
|
||||
|
||||
/* 成就奖励 */
|
||||
.reward-card {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: url("/source/material/bg/5-Star.webp");
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: url("/source/material/bg/5-Star.webp");
|
||||
}
|
||||
|
||||
.reward-num {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: #faf7e8;
|
||||
display: flex;
|
||||
font-size: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: #faf7e8;
|
||||
display: flex;
|
||||
font-size: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,90 +1,90 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font mb-2">
|
||||
<v-tab value="activity" title="活动公告" />
|
||||
<v-tab value="game" title="游戏公告" />
|
||||
<v-spacer />
|
||||
<v-btn class="switch-btn" @click="switchNews">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bullhorn</v-icon>
|
||||
</template>
|
||||
切换米游社咨讯
|
||||
</v-btn>
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="activity">
|
||||
<div class="anno-grid">
|
||||
<v-card v-for="item in annoCards.activity" :key="item.id" class="anno-card" width="340">
|
||||
<div class="anno-cover" @click="toPost(item)">
|
||||
<img :src="item.banner" alt="cover">
|
||||
</div>
|
||||
<v-card-title>
|
||||
{{ item.title }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="anno-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img :src="item.tag_icon || '../assets/icons/arrow-right.svg'" alt="right">
|
||||
</template>
|
||||
查看
|
||||
</v-btn>
|
||||
<v-card-subtitle v-show="!appStore.devMode">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
{{ item.start_time.split(" ")[0] }} -
|
||||
{{ item.end_time.split(" ")[0] }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle v-show="appStore.devMode">
|
||||
id: {{ item.id }}
|
||||
</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
查看数据
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="game">
|
||||
<div class="anno-grid">
|
||||
<v-card v-for="item in annoCards.game" :key="item.id" class="anno-card" width="340">
|
||||
<div class="anno-cover" @click="toPost(item)">
|
||||
<img :src="item.banner" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="anno-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img :src="item.tag_icon || '../assets/icons/arrow-right.svg'" alt="right">
|
||||
</template>
|
||||
查看
|
||||
</v-btn>
|
||||
<v-card-subtitle v-show="!appStore.devMode">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
{{ item.start_time.split(" ")[0] }} -
|
||||
{{ item.end_time.split(" ")[0] }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle v-show="appStore.devMode">
|
||||
id: {{ item.id }}
|
||||
</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
查看数据
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font mb-2">
|
||||
<v-tab value="activity" title="活动公告" />
|
||||
<v-tab value="game" title="游戏公告" />
|
||||
<v-spacer />
|
||||
<v-btn class="switch-btn" @click="switchNews">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bullhorn</v-icon>
|
||||
</template>
|
||||
切换米游社咨讯
|
||||
</v-btn>
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="activity">
|
||||
<div class="anno-grid">
|
||||
<v-card v-for="item in annoCards.activity" :key="item.id" class="anno-card" width="340">
|
||||
<div class="anno-cover" @click="toPost(item)">
|
||||
<img :src="item.banner" alt="cover">
|
||||
</div>
|
||||
<v-card-title>
|
||||
{{ item.title }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="anno-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img :src="item.tag_icon || '../assets/icons/arrow-right.svg'" alt="right">
|
||||
</template>
|
||||
查看
|
||||
</v-btn>
|
||||
<v-card-subtitle v-show="!appStore.devMode">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
{{ item.start_time.split(" ")[0] }} -
|
||||
{{ item.end_time.split(" ")[0] }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle v-show="appStore.devMode">
|
||||
id: {{ item.id }}
|
||||
</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
查看数据
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="game">
|
||||
<div class="anno-grid">
|
||||
<v-card v-for="item in annoCards.game" :key="item.id" class="anno-card" width="340">
|
||||
<div class="anno-cover" @click="toPost(item)">
|
||||
<img :src="item.banner" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="anno-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img :src="item.tag_icon || '../assets/icons/arrow-right.svg'" alt="right">
|
||||
</template>
|
||||
查看
|
||||
</v-btn>
|
||||
<v-card-subtitle v-show="!appStore.devMode">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
{{ item.start_time.split(" ")[0] }} -
|
||||
{{ item.end_time.split(" ")[0] }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle v-show="appStore.devMode">
|
||||
id: {{ item.id }}
|
||||
</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
查看数据
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -140,6 +140,7 @@ async function toPost (item: AnnoListCard) {
|
||||
const path = router.resolve({
|
||||
name: "游戏内公告",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
anno_id: item.id,
|
||||
},
|
||||
}).href;
|
||||
@@ -150,6 +151,7 @@ async function toJson (item: AnnoListCard) {
|
||||
const path = router.resolve({
|
||||
name: "游戏内公告（JSON）",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
anno_id: item.id,
|
||||
},
|
||||
}).href;
|
||||
@@ -159,55 +161,55 @@ async function toJson (item: AnnoListCard) {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.anno-grid {
|
||||
font-family: Genshin, serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-gap: 20px;
|
||||
font-family: Genshin, serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.anno-card {
|
||||
border-radius: 10px;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-bottom: #4b5366 1px solid;
|
||||
border-radius: 10px;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-bottom: #4b5366 1px solid;
|
||||
}
|
||||
|
||||
.anno-cover {
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.anno-cover :hover {
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s linear;
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.anno-cover img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
transition: all 0.3s linear;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
.anno-btn {
|
||||
margin-left: 5px;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
margin-left: 5px;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
}
|
||||
|
||||
.anno-btn img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/* switch */
|
||||
.switch-btn {
|
||||
font-family: Genshin, serif;
|
||||
background: #ffca0a;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
color: #546d8b;
|
||||
font-family: Genshin, serif;
|
||||
background: #ffca0a;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
color: #546d8b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,127 +1,127 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-list class="config-list">
|
||||
<v-list-subheader inset class="config-header">
|
||||
应用信息
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')">
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="/platforms/tauri.webp" alt="Tauri">
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="/icon.webp" alt="App">
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
应用版本
|
||||
<v-btn
|
||||
class="card-btn"
|
||||
size="small"
|
||||
@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
|
||||
>
|
||||
Alpha
|
||||
</v-btn>
|
||||
</v-list-item-title>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ versionApp }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="成就版本">
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements">
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
系统信息
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="系统平台">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-desktop-classic</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="系统版本">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-desktop-classic</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
设置
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item prepend-icon="mdi-folder" title="打开用户数据目录" @click="openMergeData" />
|
||||
<v-list-item prepend-icon="mdi-delete" title="清除用户缓存" @click="tryConfirm('delUser')" />
|
||||
<v-list-item prepend-icon="mdi-delete" title="清除临时数据" @click="tryConfirm('delTemp')" />
|
||||
<v-list-item prepend-icon="mdi-cog" title="恢复默认设置" @click="tryConfirm('delApp')" />
|
||||
<v-list-subheader inset class="config-header">
|
||||
调试
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="开发者模式" subtitle="开启后将显示调试信息">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bug</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-switch
|
||||
v-model="appStore.devMode"
|
||||
:label="appStore.devMode ? '开启' : '关闭'"
|
||||
inset
|
||||
color="#FAC51E"
|
||||
@click="submitDevMode"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon>mdi-view-dashboard</v-icon>
|
||||
</template>
|
||||
<v-select v-model="showHome" :items="homeStore.getShowItem()" label="首页显示组件" multiple chips />
|
||||
<template #append>
|
||||
<v-btn class="card-btn" @click="submitHome">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">
|
||||
提交
|
||||
</template>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
路径
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item prepend-icon="mdi-folder">
|
||||
<v-list-item-title>本地应用数据路径</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ appStore.dataPath.app }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-folder">
|
||||
<v-list-item-title>本地用户数据路径</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ appStore.dataPath.user }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<!-- 弹窗提示条 -->
|
||||
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
<!-- 确认弹窗 -->
|
||||
<TConfirm v-model="confirmShow" :title="confirmText" @confirm="doConfirm(confirmOper)" />
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
<TLoading />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-list class="config-list">
|
||||
<v-list-subheader inset class="config-header">
|
||||
应用信息
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')">
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="/platforms/tauri.webp" alt="Tauri">
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="/icon.webp" alt="App">
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
应用版本
|
||||
<v-btn
|
||||
class="card-btn"
|
||||
size="small"
|
||||
@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
|
||||
>
|
||||
Alpha
|
||||
</v-btn>
|
||||
</v-list-item-title>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ versionApp }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="成就版本">
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements">
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
系统信息
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="系统平台">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-desktop-classic</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="系统版本">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-desktop-classic</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
设置
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item prepend-icon="mdi-folder" title="打开用户数据目录" @click="openMergeData" />
|
||||
<v-list-item prepend-icon="mdi-delete" title="清除用户缓存" @click="tryConfirm('delUser')" />
|
||||
<v-list-item prepend-icon="mdi-delete" title="清除临时数据" @click="tryConfirm('delTemp')" />
|
||||
<v-list-item prepend-icon="mdi-cog" title="恢复默认设置" @click="tryConfirm('delApp')" />
|
||||
<v-list-subheader inset class="config-header">
|
||||
调试
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="开发者模式" subtitle="开启后将显示调试信息">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bug</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-switch
|
||||
v-model="appStore.devMode"
|
||||
:label="appStore.devMode ? '开启' : '关闭'"
|
||||
inset
|
||||
color="#FAC51E"
|
||||
@click="submitDevMode"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon>mdi-view-dashboard</v-icon>
|
||||
</template>
|
||||
<v-select v-model="showHome" :items="homeStore.getShowItem()" label="首页显示组件" multiple chips />
|
||||
<template #append>
|
||||
<v-btn class="card-btn" @click="submitHome">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">
|
||||
提交
|
||||
</template>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
路径
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item prepend-icon="mdi-folder">
|
||||
<v-list-item-title>本地应用数据路径</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ appStore.dataPath.app }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-folder">
|
||||
<v-list-item-title>本地用户数据路径</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ appStore.dataPath.user }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<!-- 弹窗提示条 -->
|
||||
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
<!-- 确认弹窗 -->
|
||||
<TConfirm v-model="confirmShow" :title="confirmText" @confirm="doConfirm(confirmOper)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -301,27 +301,27 @@ async function submitHome () {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.config-list {
|
||||
margin: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
background: #faf7e8;
|
||||
color: #fec90b;
|
||||
font-size: large;
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
background: #faf7e8;
|
||||
color: #fec90b;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.config-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
background: #5b738f;
|
||||
border-radius: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
background: #5b738f;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,93 +1,93 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading title="正在加载卡牌列表" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font">
|
||||
<div v-show="!doSearch">
|
||||
<v-tab value="character" title="角色牌" />
|
||||
<v-tab value="action" title="行动牌" />
|
||||
<v-tab value="monster" title="魔物牌" />
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
/>
|
||||
</v-tabs>
|
||||
<div v-if="!doSearch">
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="character">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoC" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="action">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoA" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="monster">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoM" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
<div v-if="loading">
|
||||
<TLoading title="正在加载卡牌列表" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="cards-grid">
|
||||
<div v-for="item in CardsInfoS" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font">
|
||||
<div v-show="!doSearch">
|
||||
<v-tab value="character" title="角色牌" />
|
||||
<v-tab value="action" title="行动牌" />
|
||||
<v-tab value="monster" title="魔物牌" />
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
/>
|
||||
</v-tabs>
|
||||
<div v-if="!doSearch">
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="character">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoC" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="action">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoA" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="monster">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoM" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="cards-grid">
|
||||
<div v-for="item in CardsInfoS" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="error">
|
||||
未找到相关卡牌
|
||||
</v-snackbar>
|
||||
</div>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="error">
|
||||
未找到相关卡牌
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -125,9 +125,9 @@ async function loadData () {
|
||||
CardsInfoM.value = CardsInfo.filter((item) => item.type === "魔物牌") as MonsterCard[];
|
||||
loading.value = false;
|
||||
}
|
||||
function toOuter (card_name: string, card_id: number) {
|
||||
const url = OBC_CONTENT_API.replace("{content_id}", card_id.toString());
|
||||
createTGWindow(url, "GCG", card_name, 1200, 800, true);
|
||||
function toOuter (cardName: string, cardId: number) {
|
||||
const url = OBC_CONTENT_API.replace("{content_id}", cardId.toString());
|
||||
createTGWindow(url, "GCG", cardName, 1200, 800, true);
|
||||
}
|
||||
async function searchCard () {
|
||||
loading.value = true;
|
||||
@@ -147,73 +147,73 @@ async function searchCard () {
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
grid-gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
grid-gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-cls {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 240px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 240px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: absolute;
|
||||
transition: all 0.3s;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
transition: all 0.3s;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.card-cls:hover .card-cover {
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.card-border {
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-border img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: white;
|
||||
display: flex;
|
||||
font-size: small;
|
||||
overflow: hidden;
|
||||
font-family: Genshin, serif;
|
||||
border-radius: 0 0 10px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: white;
|
||||
display: flex;
|
||||
font-size: small;
|
||||
overflow: hidden;
|
||||
font-family: Genshin, serif;
|
||||
border-radius: 0 0 10px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<TLoading v-if="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
|
||||
<component :is="item" v-for="item in components" v-show="!loading" :key="item" :ref="setItemRef" />
|
||||
<TLoading v-if="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
|
||||
<component :is="item" v-for="item in components" v-show="!loading" :key="item" :ref="setItemRef" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@@ -19,7 +19,7 @@ const ANNO_LIST_API = `${Hk4eAnnoApi}/getAnnList?`;
|
||||
const ANNO_CONTENT_API = `${Hk4eAnnoApi}/getAnnContent?`;
|
||||
// 公告 Query
|
||||
const ANNO_QUERY =
|
||||
"game=hk4e&game_biz=hk4e_cn&lang=zh-cn&bundle_id=hk4e_cn&platform=pc®ion=cn_gf01&level=60&uid=500299765";
|
||||
"game=hk4e&game_biz=hk4e_cn&lang=zh-cn&bundle_id=hk4e_cn&platform=pc®ion=cn_gf01&level=60&uid=500299765";
|
||||
|
||||
/**
|
||||
* @description 获取游戏内公告列表
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
* @returns {string} API
|
||||
*/
|
||||
export const OBC_CONTENT_API =
|
||||
"https://bbs.mihoyo.com/ys/obc/content/{content_id}/detail?bbs_presentation_style=no_header";
|
||||
"https://bbs.mihoyo.com/ys/obc/content/{content_id}/detail?bbs_presentation_style=no_header";
|
||||
|
||||
// 杂项接口
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import { type NewsData, type NewsResponse } from "../interface/news";
|
||||
|
||||
// 咨讯 API
|
||||
const NEWS_LIST_API =
|
||||
"https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids={gid}&page_size={page_size}&type={news_type}&last_id={last_id}";
|
||||
"https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids={gid}&page_size={page_size}&type={news_type}&last_id={last_id}";
|
||||
|
||||
/**
|
||||
* @description 咨讯类型
|
||||
@@ -53,11 +53,7 @@ export async function getNoticeList (gid: string = "2", pageSize: number = 20, l
|
||||
* @param {number} lastId 上一次请求的最后一条数据的 id
|
||||
* @return {Promise<NewsData>}
|
||||
*/
|
||||
export async function getActivityList (
|
||||
gid: string = "2",
|
||||
pageSize: number = 20,
|
||||
lastId: number = 0,
|
||||
): Promise<NewsData> {
|
||||
export async function getActivityList (gid: string = "2", pageSize: number = 20, lastId: number = 0): Promise<NewsData> {
|
||||
const url = NEWS_LIST_API.replace("{page_size}", pageSize.toString())
|
||||
.replace("{gid}", gid)
|
||||
.replace("{news_type}", NewsType.ACTIVITY)
|
||||
|
||||
@@ -231,13 +231,13 @@ function DividerParser (data: PostStructuredContent): HTMLDivElement {
|
||||
const img = document.createElement("img");
|
||||
if (data.insert.divider === "line_1") {
|
||||
img.src =
|
||||
"https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2021/01/05/40eb5281cb24042bf34a9f1bcc61eaf5.png";
|
||||
"https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2021/01/05/40eb5281cb24042bf34a9f1bcc61eaf5.png";
|
||||
} else if (data.insert.divider === "line_2") {
|
||||
img.src =
|
||||
"https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2021/01/05/477d4c535e965bec1791203aecdfa8e6.png";
|
||||
"https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2021/01/05/477d4c535e965bec1791203aecdfa8e6.png";
|
||||
} else if (data.insert.divider === "line_3") {
|
||||
img.src =
|
||||
"https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2021/01/05/e7047588e912d60ff87a975e037c7606.png";
|
||||
"https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2021/01/05/e7047588e912d60ff87a975e037c7606.png";
|
||||
} else if (data.insert.divider === "line_4") {
|
||||
img.src = "https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2022/07/13/line_4.png";
|
||||
} else {
|
||||
@@ -265,13 +265,13 @@ function ImageParser (data: PostStructuredContent): HTMLDivElement {
|
||||
throw new Error("data.insert.image is not defined");
|
||||
}
|
||||
// if (!data.attributes) {
|
||||
// throw new Error("data.attributes is not defined");
|
||||
// throw new Error("data.attributes is not defined");
|
||||
// }
|
||||
// if (!data.attributes.width) {
|
||||
// throw new Error("data.attributes.width is not defined");
|
||||
// throw new Error("data.attributes.width is not defined");
|
||||
// }
|
||||
// if (!data.attributes.height) {
|
||||
// throw new Error("data.attributes.height is not defined");
|
||||
// throw new Error("data.attributes.height is not defined");
|
||||
// }
|
||||
const div = document.createElement("div");
|
||||
// 创建图片
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading :empty="loadingEmpty" :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else class="dev-json">
|
||||
<div class="anno-title">
|
||||
活动列表 JSON
|
||||
<div v-if="loading">
|
||||
<TLoading :empty="loadingEmpty" :title="loadingTitle" />
|
||||
</div>
|
||||
<JsonViewer :value="jsonList" copyable boxed />
|
||||
<div class="anno-title">
|
||||
活动内容 JSON
|
||||
<div v-else class="dev-json">
|
||||
<div class="anno-title">
|
||||
活动列表 JSON
|
||||
</div>
|
||||
<JsonViewer :value="jsonList" copyable boxed />
|
||||
<div class="anno-title">
|
||||
活动内容 JSON
|
||||
</div>
|
||||
<JsonViewer :value="jsonContent" copyable boxed />
|
||||
</div>
|
||||
<JsonViewer :value="jsonContent" copyable boxed />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -32,14 +32,14 @@ const loadingTitle = ref("正在加载");
|
||||
const loadingEmpty = ref(false as boolean);
|
||||
|
||||
// 数据
|
||||
const anno_id = Number(useRoute().params.anno_id);
|
||||
const annoId = Number(useRoute().params.anno_id);
|
||||
let jsonList = reactive({});
|
||||
let jsonContent = reactive({});
|
||||
|
||||
onMounted(async () => {
|
||||
await appWindow.show();
|
||||
// 检查数据
|
||||
if (!anno_id) {
|
||||
if (!annoId) {
|
||||
loadingEmpty.value = true;
|
||||
loadingTitle.value = "未找到数据";
|
||||
return;
|
||||
@@ -49,10 +49,10 @@ onMounted(async () => {
|
||||
const listData = await GenshinOper.Announcement.getList();
|
||||
listData.list.map((item: Announcement) => {
|
||||
return item.list.map((single: AnnoListItem) => {
|
||||
return single.ann_id === anno_id ? (jsonList = single) : null;
|
||||
return single.ann_id === annoId ? (jsonList = single) : null;
|
||||
});
|
||||
});
|
||||
jsonContent = await GenshinOper.Announcement.getContent(anno_id);
|
||||
jsonContent = await GenshinOper.Announcement.getContent(annoId);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 200);
|
||||
@@ -60,10 +60,10 @@ onMounted(async () => {
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.anno-title {
|
||||
font-size: 20px;
|
||||
color: #546d8b;
|
||||
font-family: Genshin-Light, serif;
|
||||
font-weight: 600;
|
||||
margin: 20px 0;
|
||||
font-size: 20px;
|
||||
color: #546d8b;
|
||||
font-family: Genshin-Light, serif;
|
||||
font-weight: 600;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div v-if="loading" class="loading">
|
||||
<TLoading :title="loadingTitle" :empty="loadingEmpty" />
|
||||
</div>
|
||||
<div v-else class="anno-body">
|
||||
<div class="anno-title">
|
||||
{{ annoData.title }}
|
||||
<div v-if="loading" class="loading">
|
||||
<TLoading :title="loadingTitle" :empty="loadingEmpty" />
|
||||
</div>
|
||||
<div class="anno-subtitle">
|
||||
{{ annoData.subtitle }}
|
||||
<div v-else class="anno-body">
|
||||
<div class="anno-title">
|
||||
{{ annoData.title }}
|
||||
</div>
|
||||
<div class="anno-subtitle">
|
||||
{{ annoData.subtitle }}
|
||||
</div>
|
||||
<img :src="annoData.banner" alt="cover" class="anno-img">
|
||||
<div class="anno-content" v-html="annoHtml" />
|
||||
</div>
|
||||
<img :src="annoData.banner" alt="cover" class="anno-img">
|
||||
<div class="anno-content" v-html="annoHtml" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -32,14 +32,14 @@ const loadingTitle = ref("正在加载");
|
||||
const loadingEmpty = ref(false as boolean);
|
||||
|
||||
// 数据
|
||||
const anno_id = Number(useRoute().params.anno_id);
|
||||
const annoId = Number(useRoute().params.anno_id);
|
||||
const annoData = ref({} as AnnoContentItem);
|
||||
const annoHtml = ref("");
|
||||
|
||||
onMounted(async () => {
|
||||
await appWindow.show();
|
||||
// 检查数据
|
||||
if (!anno_id) {
|
||||
if (!annoId) {
|
||||
loadingEmpty.value = true;
|
||||
loadingTitle.value = "未找到数据";
|
||||
return;
|
||||
@@ -47,7 +47,7 @@ onMounted(async () => {
|
||||
// 获取数据
|
||||
loadingTitle.value = "正在获取数据...";
|
||||
try {
|
||||
annoData.value = await GenshinOper.Announcement.getContent(anno_id);
|
||||
annoData.value = await GenshinOper.Announcement.getContent(annoId);
|
||||
loadingTitle.value = "正在渲染数据...";
|
||||
annoHtml.value = GenshinOper.Announcement.parser(annoData.value.content);
|
||||
} catch (error) {
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading :empty="loadingEmpty" :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="lottery-div">
|
||||
<div class="lottery-title">
|
||||
抽奖详情 {{ timeStatus }}
|
||||
</div>
|
||||
<v-list class="lottery-list">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-avatar>
|
||||
<v-img :src="lotteryCard.creator.avatar_url" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
{{ lotteryCard.creator.nickname }}
|
||||
<v-list-item-subtitle>{{ lotteryCard.creator.introduce }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
发起人
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>{{ lotteryCard.participantWay }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ lotteryCard.id }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
抽奖 ID
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-btn class="lottery-back" @click="backPost">
|
||||
返回
|
||||
</v-btn>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="showJson = true">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
JSON
|
||||
</v-btn>
|
||||
<div v-if="loading">
|
||||
<TLoading :empty="loadingEmpty" :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-show="showJson" class="dev-json">
|
||||
<JsonViewer :value="jsonData" copyable boxed />
|
||||
</div>
|
||||
<div class="lottery-div">
|
||||
<div class="lottery-title">
|
||||
奖品详情
|
||||
</div>
|
||||
<div v-for="reward in lotteryCard.rewards" :key="reward.rewardName">
|
||||
<div v-else>
|
||||
<div class="lottery-div">
|
||||
<div class="lottery-title">
|
||||
抽奖详情 {{ timeStatus }}
|
||||
</div>
|
||||
<v-list class="lottery-list">
|
||||
<v-list-item :title="reward.rewardName" :subtitle="'中奖人数' + reward.winnerNumber" />
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-avatar>
|
||||
<v-img :src="lotteryCard.creator.avatar_url" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
{{ lotteryCard.creator.nickname }}
|
||||
<v-list-item-subtitle>{{ lotteryCard.creator.introduce }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
发起人
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>{{ lotteryCard.participantWay }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ lotteryCard.id }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
抽奖 ID
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="lottery-grid">
|
||||
<v-list v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-avatar>
|
||||
<v-img :src="user.avatar_url" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
{{ user.nickname }}
|
||||
</v-list-item>
|
||||
<v-btn class="lottery-back" @click="backPost">
|
||||
返回
|
||||
</v-btn>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="showJson = true">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
JSON
|
||||
</v-btn>
|
||||
</div>
|
||||
<div v-show="showJson" class="dev-json">
|
||||
<JsonViewer :value="jsonData" copyable boxed />
|
||||
</div>
|
||||
<div class="lottery-div">
|
||||
<div class="lottery-title">
|
||||
奖品详情
|
||||
</div>
|
||||
<div v-for="reward in lotteryCard.rewards" :key="reward.rewardName">
|
||||
<v-list class="lottery-list">
|
||||
<v-list-item :title="reward.rewardName" :subtitle="'中奖人数' + reward.winnerNumber" />
|
||||
</v-list>
|
||||
<div class="lottery-grid">
|
||||
<v-list v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-avatar>
|
||||
<v-img :src="user.avatar_url" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
{{ user.nickname }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -89,7 +89,7 @@ const loadingEmpty = ref(false as boolean);
|
||||
const appStore = useAppStore();
|
||||
|
||||
// 数据
|
||||
const lottery_id = useRoute().params.lottery_id as string;
|
||||
const lotteryId = useRoute().params.lottery_id as string;
|
||||
const lotteryCard = ref({} as LotteryCard);
|
||||
const showJson = ref(false as boolean);
|
||||
let jsonData = reactive({} as LotteryData);
|
||||
@@ -102,14 +102,14 @@ function backPost () {
|
||||
onMounted(async () => {
|
||||
await appWindow.show();
|
||||
// 检查数据
|
||||
if (!lottery_id) {
|
||||
if (!lotteryId) {
|
||||
loadingEmpty.value = true;
|
||||
loadingTitle.value = "未找到数据";
|
||||
return;
|
||||
}
|
||||
// 获取数据
|
||||
loadingTitle.value = "正在获取数据...";
|
||||
jsonData = await MysOper.Lottery.get(lottery_id);
|
||||
jsonData = await MysOper.Lottery.get(lotteryId);
|
||||
if (!jsonData) {
|
||||
loadingEmpty.value = true;
|
||||
loadingTitle.value = "未找到数据";
|
||||
@@ -143,48 +143,48 @@ onMounted(async () => {
|
||||
</script>
|
||||
<style lang="css">
|
||||
.lottery-div {
|
||||
background: #faf7e8;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
background: #faf7e8;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.lottery-title {
|
||||
font-family: Genshin, serif;
|
||||
font-size: 20px;
|
||||
color: #546d8b;
|
||||
margin: 10px;
|
||||
font-family: Genshin, serif;
|
||||
font-size: 20px;
|
||||
color: #546d8b;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.lottery-list {
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
color: #faf7e8;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
color: #faf7e8;
|
||||
font-family: Genshin-Light, serif;
|
||||
}
|
||||
|
||||
.lottery-sub-list {
|
||||
background: #faf7e8;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
color: #546d8b;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #faf7e8;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
color: #546d8b;
|
||||
font-family: Genshin-Light, serif;
|
||||
}
|
||||
|
||||
.lottery-back {
|
||||
margin: 10px;
|
||||
font-family: Genshin, serif;
|
||||
color: #faf7e8 !important;
|
||||
background: #546d8b !important;
|
||||
margin: 10px;
|
||||
font-family: Genshin, serif;
|
||||
color: #faf7e8 !important;
|
||||
background: #546d8b !important;
|
||||
}
|
||||
|
||||
.lottery-grid {
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
grid-gap: 10px;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,143 +1,143 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="news-tabs">
|
||||
<v-tab value="notice" title="公告" />
|
||||
<v-tab value="activity" title="活动" />
|
||||
<v-tab v-if="showNews" value="news" title="新闻" />
|
||||
<v-spacer />
|
||||
<v-btn v-if="showSwitch" class="switch-btn" @click="switchAnno">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bullhorn</v-icon>
|
||||
</template>
|
||||
切换游戏内公告
|
||||
</v-btn>
|
||||
<v-text-field
|
||||
v-show="appStore.devMode"
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
@click:append="searchPost"
|
||||
@keyup.enter="searchPost"
|
||||
/>
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="notice">
|
||||
<div class="news-grid">
|
||||
<v-card v-for="item in postData.notice" :key="item.post_id" class="news-card" width="340">
|
||||
<div class="news-cover" @click="toPost(item)">
|
||||
<img :src="item.cover" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn class="card-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
JSON
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
<div class="load-news">
|
||||
<v-btn :loading="loadingSub" @click="loadMore('notice')">
|
||||
<template #append>
|
||||
<img src="../assets/icons/arrow-left.svg" alt="right">
|
||||
</template>
|
||||
已加载：{{ rawData.notice.last_id }}，加载更多
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="activity">
|
||||
<div class="news-grid">
|
||||
<v-card v-for="item in postData.activity" :key="item.post_id" class="news-card" width="340">
|
||||
<div class="news-cover" @click="toPost(item)">
|
||||
<img :src="item.cover" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="card-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
<div v-show="!appStore.devMode">
|
||||
<v-btn
|
||||
:style="{
|
||||
background: item.status?.colorCss,
|
||||
color: '#faf7e8 !important',
|
||||
}"
|
||||
>
|
||||
{{ item.status?.status }}
|
||||
</v-btn>
|
||||
<div v-if="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="news-tabs">
|
||||
<v-tab value="notice" title="公告" />
|
||||
<v-tab value="activity" title="活动" />
|
||||
<v-tab v-if="showNews" value="news" title="新闻" />
|
||||
<v-spacer />
|
||||
<v-btn v-if="showSwitch" class="switch-btn" @click="switchAnno">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bullhorn</v-icon>
|
||||
</template>
|
||||
切换游戏内公告
|
||||
</v-btn>
|
||||
<v-text-field
|
||||
v-show="appStore.devMode"
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
@click:append="searchPost"
|
||||
@keyup.enter="searchPost"
|
||||
/>
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="notice">
|
||||
<div class="news-grid">
|
||||
<v-card v-for="item in postData.notice" :key="item.post_id" class="news-card" width="340">
|
||||
<div class="news-cover" @click="toPost(item)">
|
||||
<img :src="item.cover" alt="cover">
|
||||
</div>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
JSON
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
<div class="load-news">
|
||||
<v-btn :loading="loadingSub" @click="loadMore('activity')">
|
||||
<template #append>
|
||||
<img src="../assets/icons/arrow-left.svg" alt="right">
|
||||
</template>
|
||||
已加载:{{ rawData.activity.last_id }}，加载更多
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item v-if="showNews" value="news">
|
||||
<div class="news-grid">
|
||||
<v-card v-for="item in postData.news" :key="item.post_id" class="news-card" width="340">
|
||||
<div class="news-cover" @click="toPost(item)">
|
||||
<img :src="item.cover" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn class="card-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
JSON
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
<div class="load-news">
|
||||
<v-btn :loading="loadingSub" @click="loadMore('news')">
|
||||
<template #append>
|
||||
<img src="../assets/icons/arrow-left.svg" alt="right">
|
||||
</template>
|
||||
已加载：{{ rawData.news.last_id }}，加载更多
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn class="card-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
JSON
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
<div class="load-news">
|
||||
<v-btn :loading="loadingSub" @click="loadMore('notice')">
|
||||
<template #append>
|
||||
<img src="../assets/icons/arrow-left.svg" alt="right">
|
||||
</template>
|
||||
已加载：{{ rawData.notice.lastId }}，加载更多
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="activity">
|
||||
<div class="news-grid">
|
||||
<v-card v-for="item in postData.activity" :key="item.post_id" class="news-card" width="340">
|
||||
<div class="news-cover" @click="toPost(item)">
|
||||
<img :src="item.cover" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="card-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
<div v-show="!appStore.devMode">
|
||||
<v-btn
|
||||
:style="{
|
||||
background: item.status?.colorCss,
|
||||
color: '#faf7e8 !important',
|
||||
}"
|
||||
>
|
||||
{{ item.status?.status }}
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
JSON
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
<div class="load-news">
|
||||
<v-btn :loading="loadingSub" @click="loadMore('activity')">
|
||||
<template #append>
|
||||
<img src="../assets/icons/arrow-left.svg" alt="right">
|
||||
</template>
|
||||
已加载:{{ rawData.activity.lastId }}，加载更多
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item v-if="showNews" value="news">
|
||||
<div class="news-grid">
|
||||
<v-card v-for="item in postData.news" :key="item.post_id" class="news-card" width="340">
|
||||
<div class="news-cover" @click="toPost(item)">
|
||||
<img :src="item.cover" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn class="card-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
JSON
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
<div class="load-news">
|
||||
<v-btn :loading="loadingSub" @click="loadMore('news')">
|
||||
<template #append>
|
||||
<img src="../assets/icons/arrow-left.svg" alt="right">
|
||||
</template>
|
||||
已加载：{{ rawData.news.lastId }}，加载更多
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -152,7 +152,7 @@ import MysOper from "../plugins/Mys";
|
||||
// utils
|
||||
import { createTGWindow } from "../utils/TGWindow";
|
||||
// interface
|
||||
import { NewsCard } from "../plugins/Mys/interface/news";
|
||||
import { NewsCard, NewsData } from "../plugins/Mys/interface/news";
|
||||
|
||||
// 路由
|
||||
const router = useRouter();
|
||||
@@ -184,33 +184,33 @@ const postData = ref({
|
||||
});
|
||||
const rawData = ref({
|
||||
notice: {
|
||||
is_last: false,
|
||||
last_id: 0,
|
||||
isLast: false,
|
||||
lastId: 0,
|
||||
},
|
||||
activity: {
|
||||
is_last: false,
|
||||
last_id: 0,
|
||||
isLast: false,
|
||||
lastId: 0,
|
||||
},
|
||||
news: {
|
||||
is_last: false,
|
||||
last_id: 0,
|
||||
isLast: false,
|
||||
lastId: 0,
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
loadingTitle.value = "正在获取公告数据...";
|
||||
const noticeData = await MysOper.News.get.notice(gid);
|
||||
rawData.value.notice.is_last = noticeData.is_last;
|
||||
rawData.value.notice.last_id = noticeData.list.length;
|
||||
rawData.value.notice.isLast = noticeData.is_last;
|
||||
rawData.value.notice.lastId = noticeData.list.length;
|
||||
loadingTitle.value = "正在获取活动数据...";
|
||||
const activityData = await MysOper.News.get.activity(gid);
|
||||
rawData.value.activity.is_last = activityData.is_last;
|
||||
rawData.value.activity.last_id = activityData.list.length;
|
||||
rawData.value.activity.isLast = activityData.is_last;
|
||||
rawData.value.activity.lastId = activityData.list.length;
|
||||
if (showNews.value) {
|
||||
loadingTitle.value = "正在获取新闻数据...";
|
||||
const newsData = await MysOper.News.get.news(gid);
|
||||
rawData.value.news.is_last = newsData.is_last;
|
||||
rawData.value.news.last_id = newsData.list.length;
|
||||
rawData.value.news.isLast = newsData.is_last;
|
||||
rawData.value.news.lastId = newsData.list.length;
|
||||
postData.value = {
|
||||
notice: MysOper.News.card.notice(noticeData),
|
||||
activity: MysOper.News.card.activity(activityData),
|
||||
@@ -234,50 +234,52 @@ async function switchAnno () {
|
||||
// 加载更多
|
||||
async function loadMore (data: string) {
|
||||
loadingSub.value = true;
|
||||
let getData: NewsData;
|
||||
let getCard: NewsCard[];
|
||||
switch (data) {
|
||||
case "notice":
|
||||
if (rawData.value.notice.is_last) {
|
||||
if (rawData.value.notice.isLast) {
|
||||
snackbarText.value = "已经是最后一页了";
|
||||
snackbarColor.value = "#35acce";
|
||||
snackbar.value = true;
|
||||
loadingSub.value = false;
|
||||
return;
|
||||
}
|
||||
const getNotice = await MysOper.News.get.notice(gid, 20, rawData.value.notice.last_id);
|
||||
rawData.value.notice.last_id = rawData.value.notice.last_id + getNotice.list.length;
|
||||
rawData.value.notice.is_last = getNotice.is_last;
|
||||
const noticeCard = MysOper.News.card.notice(getNotice);
|
||||
postData.value.notice = postData.value.notice.concat(noticeCard);
|
||||
getData = await MysOper.News.get.notice(gid, 20, rawData.value.notice.lastId);
|
||||
rawData.value.notice.lastId = rawData.value.notice.lastId + getData.list.length;
|
||||
rawData.value.notice.isLast = getData.is_last;
|
||||
getCard = MysOper.News.card.notice(getData);
|
||||
postData.value.notice = postData.value.notice.concat(getCard);
|
||||
loadingSub.value = false;
|
||||
break;
|
||||
case "activity":
|
||||
if (rawData.value.activity.is_last) {
|
||||
if (rawData.value.activity.isLast) {
|
||||
snackbarText.value = "已经是最后一页了";
|
||||
snackbarColor.value = "#35acce";
|
||||
snackbar.value = true;
|
||||
loadingSub.value = false;
|
||||
return;
|
||||
}
|
||||
const getActivity = await MysOper.News.get.activity(gid, 20, rawData.value.activity.last_id);
|
||||
rawData.value.activity.last_id = rawData.value.activity.last_id + getActivity.list.length;
|
||||
rawData.value.activity.is_last = getActivity.is_last;
|
||||
const activityCard = MysOper.News.card.activity(getActivity);
|
||||
postData.value.activity = postData.value.activity.concat(activityCard);
|
||||
getData = await MysOper.News.get.activity(gid, 20, rawData.value.activity.lastId);
|
||||
rawData.value.activity.lastId = rawData.value.activity.lastId + getData.list.length;
|
||||
rawData.value.activity.isLast = getData.is_last;
|
||||
getCard = MysOper.News.card.activity(getData);
|
||||
postData.value.activity = postData.value.activity.concat(getCard);
|
||||
loadingSub.value = false;
|
||||
break;
|
||||
case "news":
|
||||
if (rawData.value.news.is_last) {
|
||||
if (rawData.value.news.isLast) {
|
||||
snackbarText.value = "已经是最后一页了";
|
||||
snackbarColor.value = "#35acce";
|
||||
snackbar.value = true;
|
||||
loadingSub.value = false;
|
||||
return;
|
||||
}
|
||||
const getNews = await MysOper.News.get.news(gid, 20, rawData.value.news.last_id);
|
||||
rawData.value.news.last_id = rawData.value.news.last_id + getNews.list.length;
|
||||
rawData.value.news.is_last = getNews.is_last;
|
||||
const newsCard = MysOper.News.card.news(getNews);
|
||||
postData.value.news = postData.value.news.concat(newsCard);
|
||||
getData = await MysOper.News.get.news(gid, 20, rawData.value.news.lastId);
|
||||
rawData.value.news.lastId = rawData.value.news.lastId + getData.list.length;
|
||||
rawData.value.news.isLast = getData.is_last;
|
||||
getCard = MysOper.News.card.news(getData);
|
||||
postData.value.news = postData.value.news.concat(getCard);
|
||||
loadingSub.value = false;
|
||||
break;
|
||||
default:
|
||||
@@ -290,6 +292,7 @@ async function toPost (item: NewsCard | string) {
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
post_id: item,
|
||||
},
|
||||
}).href;
|
||||
@@ -298,6 +301,7 @@ async function toPost (item: NewsCard | string) {
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
post_id: item.post_id.toString(),
|
||||
},
|
||||
}).href;
|
||||
@@ -309,6 +313,7 @@ async function toJson (item: NewsCard | string) {
|
||||
const path = router.resolve({
|
||||
name: "帖子详情（JSON）",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
post_id: item,
|
||||
},
|
||||
}).href;
|
||||
@@ -317,6 +322,7 @@ async function toJson (item: NewsCard | string) {
|
||||
const path = router.resolve({
|
||||
name: "帖子详情（JSON）",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
post_id: item.post_id.toString(),
|
||||
},
|
||||
}).href;
|
||||
@@ -344,70 +350,70 @@ async function searchPost () {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.news-tabs {
|
||||
font-family: Genshin, serif;
|
||||
margin-bottom: 10px;
|
||||
font-family: Genshin, serif;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.news-grid {
|
||||
font-family: Genshin, serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-gap: 20px;
|
||||
font-family: Genshin, serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
border-radius: 10px;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
}
|
||||
|
||||
.news-cover {
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-cover :hover {
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s linear;
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.news-cover img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
transition: all 0.3s linear;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
/* switch */
|
||||
.switch-btn {
|
||||
font-family: Genshin, serif;
|
||||
background: #ffca0a;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
color: #546d8b;
|
||||
font-family: Genshin, serif;
|
||||
background: #ffca0a;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
color: #546d8b;
|
||||
}
|
||||
|
||||
/* load more */
|
||||
.load-news {
|
||||
font-family: Genshin, serif;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s linear;
|
||||
font-family: Genshin, serif;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
.load-news button {
|
||||
background: #546d8b !important;
|
||||
color: #faf7e8 !important;
|
||||
background: #546d8b !important;
|
||||
color: #faf7e8 !important;
|
||||
}
|
||||
|
||||
.load-news button img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading :empty="loadingEmpty" :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else class="dev-json">
|
||||
<JsonViewer :value="jsonData" copyable boxed />
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
<TLoading :empty="loadingEmpty" :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else class="dev-json">
|
||||
<JsonViewer :value="jsonData" copyable boxed />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -23,20 +23,20 @@ const loadingTitle = ref("正在加载");
|
||||
const loadingEmpty = ref(false as boolean);
|
||||
|
||||
// 数据
|
||||
const post_id = Number(useRoute().params.post_id);
|
||||
const postId = Number(useRoute().params.post_id);
|
||||
let jsonData = reactive({});
|
||||
|
||||
onMounted(async () => {
|
||||
await appWindow.show();
|
||||
// 检查数据
|
||||
if (!post_id) {
|
||||
if (!postId) {
|
||||
loadingEmpty.value = true;
|
||||
loadingTitle.value = "未找到数据";
|
||||
return;
|
||||
}
|
||||
// 获取数据
|
||||
loadingTitle.value = "正在获取数据...";
|
||||
jsonData = await MysOper.Post.get(post_id);
|
||||
jsonData = await MysOper.Post.get(postId);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 200);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading :empty="loadingEmpty" :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else class="mys-post-body" v-html="postHtml" />
|
||||
<div v-if="loading">
|
||||
<TLoading :empty="loadingEmpty" :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else class="mys-post-body" v-html="postHtml" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -21,13 +21,13 @@ const loadingTitle = ref("正在加载");
|
||||
const loadingEmpty = ref(false as boolean);
|
||||
|
||||
// 数据
|
||||
const post_id = Number(useRoute().params.post_id);
|
||||
const postId = Number(useRoute().params.post_id);
|
||||
const postHtml = ref("");
|
||||
|
||||
onMounted(async () => {
|
||||
await appWindow.show();
|
||||
// 检查数据
|
||||
if (!post_id) {
|
||||
if (!postId) {
|
||||
loadingEmpty.value = true;
|
||||
loadingTitle.value = "未找到数据";
|
||||
await appWindow.setTitle("未找到数据");
|
||||
@@ -36,7 +36,7 @@ onMounted(async () => {
|
||||
// 获取数据
|
||||
loadingTitle.value = "正在获取数据...";
|
||||
try {
|
||||
const postData = await MysOper.Post.get(post_id);
|
||||
const postData = await MysOper.Post.get(postId);
|
||||
loadingTitle.value = "正在渲染数据...";
|
||||
postHtml.value = MysOper.Post.parser(postData);
|
||||
await appWindow.setTitle(postData.post.subject);
|
||||
|
||||
Reference in New Issue
Block a user