🐛 修复设置页 loading 退出动画无效问题

This commit is contained in:
BTMuli
2023-05-26 14:39:30 +08:00
parent a1b85b3526
commit d962d52bd2

View File

@@ -1,181 +1,177 @@
<template> <template>
<div v-if="loading"> <TOLoading v-model="loading" :title="loadingTitle" />
<TLoading :title="loadingTitle" /> <v-list class="config-list">
</div> <v-list-subheader inset class="config-header">
<div v-else> 应用信息
<v-list class="config-list"> </v-list-subheader>
<v-list-subheader inset class="config-header"> <v-divider inset class="border-opacity-75" />
应用信息 <v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')">
</v-list-subheader> <template #prepend>
<v-divider inset class="border-opacity-75" /> <img class="config-icon" src="/platforms/tauri.webp" alt="Tauri">
<v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')"> </template>
<template #prepend> <template #append>
<img class="config-icon" src="/platforms/tauri.webp" alt="Tauri"> <v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle>
</template> </template>
<template #append> </v-list-item>
<v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle> <v-list-item>
</template> <template #prepend>
</v-list-item> <img class="config-icon" src="/icon.webp" alt="App">
<v-list-item> </template>
<template #prepend> <v-list-item-title>
<img class="config-icon" src="/icon.webp" alt="App"> 应用版本
</template> <v-btn
<v-list-item-title> class="card-btn" size="small"
应用版本 @click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
<v-btn >
class="card-btn" size="small" Alpha
@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')" </v-btn>
> </v-list-item-title>
Alpha <template #append>
</v-btn> <v-list-item-subtitle>{{ versionApp }}.{{ buildTime }}</v-list-item-subtitle>
</v-list-item-title> </template>
<template #append> </v-list-item>
<v-list-item-subtitle>{{ versionApp }}.{{ buildTime }}</v-list-item-subtitle> <v-list-item title="成就版本">
</template> <template #prepend>
</v-list-item> <img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements">
<v-list-item title="成就版本"> </template>
<template #prepend> <template #append>
<img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements"> <v-list-item-subtitle>{{ achievementsStore.lastVersion }}</v-list-item-subtitle>
</template> </template>
<template #append> </v-list-item>
<v-list-item-subtitle>{{ achievementsStore.lastVersion }}</v-list-item-subtitle> <v-list-item title="登录信息">
</template> <v-list-item-subtitle v-show="userInfo.nickname!=='未登录'">
</v-list-item> {{ userInfo.nickname }} uid:{{ userInfo.uid }}
<v-list-item title="登录信息"> </v-list-item-subtitle>
<v-list-item-subtitle v-show="userInfo.nickname!=='未登录'"> <v-list-item-subtitle v-show="userInfo.nickname==='未登录'">
{{ userInfo.nickname }} uid:{{ userInfo.uid }} 未登录请输入 Cookie 登录
</v-list-item-subtitle> </v-list-item-subtitle>
<v-list-item-subtitle v-show="userInfo.nickname==='未登录'"> <template #prepend>
未登录请输入 Cookie 登录 <img class="config-icon" :src="userInfo.avatar" alt="Login">
</v-list-item-subtitle> </template>
<template #prepend> <template #append>
<img class="config-icon" :src="userInfo.avatar" alt="Login"> <v-btn class="card-btn" @click="tryConfirm('refreshUser')">
</template> <template #prepend>
<template #append> <img src="../assets/icons/circle-check.svg" alt="check">
<v-btn class="card-btn" @click="tryConfirm('refreshUser')"> 刷新数据
<template #prepend> </template>
<img src="../assets/icons/circle-check.svg" alt="check"> </v-btn>
刷新数据 </template>
</template> </v-list-item>
</v-btn> <v-list-subheader inset class="config-header">
</template> 系统信息
</v-list-item> </v-list-subheader>
<v-list-subheader inset class="config-header"> <v-divider inset class="border-opacity-75" />
系统信息 <v-list-item title="系统平台">
</v-list-subheader> <template #prepend>
<v-divider inset class="border-opacity-75" /> <v-icon>mdi-desktop-classic</v-icon>
<v-list-item title="系统平台"> </template>
<template #prepend> <template #append>
<v-icon>mdi-desktop-classic</v-icon> <v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle>
</template> </template>
<template #append> </v-list-item>
<v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle> <v-list-item title="系统版本">
</template> <template #prepend>
</v-list-item> <v-icon>mdi-desktop-classic</v-icon>
<v-list-item title="系统版本"> </template>
<template #prepend> <template #append>
<v-icon>mdi-desktop-classic</v-icon> <v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle>
</template> </template>
<template #append> </v-list-item>
<v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle> <v-list-item title="数据库更新时间" prepend-icon="mdi-database">
</template> <template #append>
</v-list-item> <v-list-item-subtitle>{{ dbInfo.find(item => item.key === "dataUpdated")?.value }}</v-list-item-subtitle>
<v-list-item title="数据库更新时间" prepend-icon="mdi-database"> </template>
<template #append> <v-list-item-subtitle>更新于 {{ dbInfo.find(item => item.key === "dataUpdated")?.updated }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ dbInfo.find(item => item.key === "dataUpdated")?.value }}</v-list-item-subtitle> </v-list-item>
</template> <v-list-item title="数据库版本" prepend-icon="mdi-database">
<v-list-item-subtitle>更新于 {{ dbInfo.find(item => item.key === "dataUpdated")?.updated }}</v-list-item-subtitle> <template #append>
</v-list-item> <v-list-item-subtitle>{{ dbInfo.find(item => item.key === "appVersion")?.value }}</v-list-item-subtitle>
<v-list-item title="数据库版本" prepend-icon="mdi-database"> </template>
<template #append> <v-list-item-subtitle>更新于 {{ dbInfo.find(item => item.key === "appVersion")?.updated }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ dbInfo.find(item => item.key === "appVersion")?.value }}</v-list-item-subtitle> </v-list-item>
</template> <v-list-subheader inset class="config-header">
<v-list-item-subtitle>更新于 {{ dbInfo.find(item => item.key === "appVersion")?.updated }}</v-list-item-subtitle> 设置
</v-list-item> </v-list-subheader>
<v-list-subheader inset class="config-header"> <v-divider inset class="border-opacity-75" />
设置 <v-list-item>
</v-list-subheader> <template #prepend>
<v-divider inset class="border-opacity-75" /> <v-icon>mdi-view-dashboard</v-icon>
<v-list-item> </template>
<template #prepend> <v-select v-model="showHome" :items="homeStore.getShowItems()" label="首页显示组件" multiple chips />
<v-icon>mdi-view-dashboard</v-icon> <template #append>
</template> <v-btn class="card-btn" @click="submitHome">
<v-select v-model="showHome" :items="homeStore.getShowItems()" label="首页显示组件" multiple chips /> <template #prepend>
<template #append> <img src="../assets/icons/circle-check.svg" alt="check">
<v-btn class="card-btn" @click="submitHome"> 确定
<template #prepend> </template>
<img src="../assets/icons/circle-check.svg" alt="check"> </v-btn>
确定 </template>
</template> </v-list-item>
</v-btn> <v-list-item prepend-icon="mdi-content-save" title="数据备份" @click="tryConfirm('backup')" />
</template> <v-list-item prepend-icon="mdi-content-save" title="数据恢复" @click="tryConfirm('restore')" />
</v-list-item> <v-list-item prepend-icon="mdi-delete" title="清除用户缓存" @click="tryConfirm('delUser')" />
<v-list-item prepend-icon="mdi-content-save" title="数据备份" @click="tryConfirm('backup')" /> <v-list-item prepend-icon="mdi-delete" title="清除临时数据" @click="tryConfirm('delTemp')" />
<v-list-item prepend-icon="mdi-content-save" title="数据恢复" @click="tryConfirm('restore')" /> <v-list-item prepend-icon="mdi-cog" title="恢复默认设置" @click="tryConfirm('delApp')" />
<v-list-item prepend-icon="mdi-delete" title="清除用户缓存" @click="tryConfirm('delUser')" /> <v-list-subheader inset class="config-header">
<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>
<v-list-subheader inset class="config-header"> <v-divider inset class="border-opacity-75" />
调试 <v-list-item v-if="appStore.devEnv" title="调试模式" subtitle="开启后将显示调试信息">
</v-list-subheader> <template #prepend>
<v-divider inset class="border-opacity-75" /> <v-icon>mdi-bug</v-icon>
<v-list-item v-if="appStore.devEnv" title="调试模式" subtitle="开启后将显示调试信息"> </template>
<template #prepend> <template #append>
<v-icon>mdi-bug</v-icon> <v-switch
</template> v-model="appStore.devMode" :label="appStore.devMode ? '开启' : '关闭'" inset color="#FAC51E"
<template #append> @click="submitDevMode"
<v-switch />
v-model="appStore.devMode" :label="appStore.devMode ? '开启' : '关闭'" inset color="#FAC51E" </template>
@click="submitDevMode" </v-list-item>
/> <v-list-item>
</template> <template #prepend>
</v-list-item> <v-icon>mdi-cookie</v-icon>
<v-list-item> </template>
<template #prepend> <template #title>
<v-icon>mdi-cookie</v-icon> <span style="cursor: pointer" @click="tryConfirm('inputCookie')">手动输入 Cookie</span>
</template> </template>
<template #title> <template #append>
<span style="cursor: pointer" @click="tryConfirm('inputCookie')">手动输入 Cookie</span> <v-icon style="cursor: pointer" @click="toOuter('https://github.com/BTMuli/Tauri.Genshin/issues/18')">
</template> mdi-help-circle-outline
<template #append> </v-icon>
<v-icon style="cursor: pointer" @click="toOuter('https://github.com/BTMuli/Tauri.Genshin/issues/18')"> </template>
mdi-help-circle-outline </v-list-item>
</v-icon> <v-list-item title="重置数据库" prepend-icon="mdi-delete" @click="tryConfirm('resetDB')" />
</template> <v-list-item title="检测 SQLite 数据库完整性" prepend-icon="mdi-database-check" @click="tryConfirm('checkDB')" />
</v-list-item> <v-list-subheader inset class="config-header">
<v-list-item title="重置数据库" prepend-icon="mdi-delete" @click="tryConfirm('resetDB')" /> 路径
<v-list-item title="检测 SQLite 数据库完整性" prepend-icon="mdi-database-check" @click="tryConfirm('checkDB')" /> </v-list-subheader>
<v-list-subheader inset class="config-header"> <v-divider inset class="border-opacity-75" />
路径 <v-list-item prepend-icon="mdi-database">
</v-list-subheader> <v-list-item-title>本地数据库路径</v-list-item-title>
<v-divider inset class="border-opacity-75" /> <v-list-item-subtitle>{{ appStore.dataPath.dbDataPath }}</v-list-item-subtitle>
<v-list-item prepend-icon="mdi-database"> </v-list-item>
<v-list-item-title>本地数据库路径</v-list-item-title> <v-list-item prepend-icon="mdi-folder">
<v-list-item-subtitle>{{ appStore.dataPath.dbDataPath }}</v-list-item-subtitle> <v-list-item-title>本地临时数据路径</v-list-item-title>
</v-list-item> <v-list-item-subtitle>{{ appStore.dataPath.tempDataDir }}</v-list-item-subtitle>
<v-list-item prepend-icon="mdi-folder"> </v-list-item>
<v-list-item-title>本地临时数据路径</v-list-item-title> <v-list-item prepend-icon="mdi-folder">
<v-list-item-subtitle>{{ appStore.dataPath.tempDataDir }}</v-list-item-subtitle> <v-list-item-title>本地用户数据路径</v-list-item-title>
</v-list-item> <v-list-item-subtitle>{{ appStore.dataPath.userDataDir }}</v-list-item-subtitle>
<v-list-item prepend-icon="mdi-folder"> </v-list-item>
<v-list-item-title>本地用户数据路径</v-list-item-title> </v-list>
<v-list-item-subtitle>{{ appStore.dataPath.userDataDir }}</v-list-item-subtitle> <!-- 弹窗提示条 -->
</v-list-item> <v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
</v-list> {{ snackbarText }}
<!-- 弹窗提示条 --> </v-snackbar>
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor"> <!-- 确认弹窗 -->
{{ snackbarText }} <TOConfirm v-model:model-value="confirmShow" v-model:model-input="confirmInput" :title="confirmText" :subtitle="confirmSub" :is-input="isConfirmInput" @confirm="doConfirm(confirmOper)" />
</v-snackbar>
<!-- 确认弹窗 -->
<TConfirm v-model:model-value="confirmShow" v-model:model-input="confirmInput" :title="confirmText" :subtitle="confirmSub" :is-input="isConfirmInput" @confirm="doConfirm(confirmOper)" />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
// vue // vue
import { computed, onMounted, ref } from "vue"; import { computed, onMounted, ref } from "vue";
import TLoading from "../components/main/t-loading.vue"; import TOLoading from "../components/overlay/to-loading.vue";
import TConfirm from "../components/overlay/to-confirm.vue"; import TOConfirm from "../components/overlay/to-confirm.vue";
// tauri // tauri
import { app, fs, os } from "@tauri-apps/api"; import { app, fs, os } from "@tauri-apps/api";
// store // store