Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 设置页样式变更

Browse Source
This commit is contained in:
BTMuli
2023-12-26 00:31:32 +08:00
parent 65f4309bf5
commit ba6787504e
1 changed files with 176 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
src/pages/common/Config.vue
View File

@@ -1,150 +1,147 @@
<template> <template>
<ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" /> <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
<ToGameLogin v-model="scan" /> <ToGameLogin v-model="scan" />
<v-list class="config-list"> <div class="config-box">
<v-list-subheader :inset="true" class="config-header" title="应用信息" /> <v-list class="config-list">
<v-divider :inset="true" class="border-opacity-75" /> <v-list-subheader :inset="true" class="config-header" title="应用信息" />
<v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')"> <v-divider :inset="true" class="border-opacity-75" />
<template #prepend> <v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')">
<img class="config-icon" src="/platforms/tauri.webp" alt="Tauri" /> <template #prepend>
</template> <img class="config-icon" src="/platforms/tauri.webp" alt="Tauri" />
<template #append> </template>
<v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle> <template #append>
</template> <v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle>
</v-list-item> </template>
<v-list-item> </v-list-item>
<template #prepend> <v-list-item title="成就版本">
<img class="config-icon" src="/icon.webp" alt="App" /> <template #prepend>
</template> <img class="config-icon" src="../../assets/icons/achievements.svg" alt="Achievements" />
<v-list-item-title> </template>
应用版本 <template #append>
<v-btn <v-list-item-subtitle>{{ achievementsStore.lastVersion }}</v-list-item-subtitle>
size="small" </template>
variant="outlined" </v-list-item>
@click="toOuter('https://github.com/BTMuli/TeyvatGuide/releases/latest')" <v-list-item title="登录信息">
> <v-list-item-subtitle v-show="userInfo?.nickname !== '未登录'">
BETA {{ userInfo?.nickname }} uid:{{ userInfo?.uid }}
</v-btn>
</v-list-item-title>
<template #append>
<v-list-item-subtitle>{{ versionApp }}.{{ buildTime }}</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.lastVersion }}</v-list-item-subtitle>
</template>
</v-list-item>
<v-list-item title="登录信息">
<v-list-item-subtitle v-show="userInfo?.nickname !== '未登录'">
{{ userInfo?.nickname }} uid:{{ userInfo?.uid }}
</v-list-item-subtitle>
<v-list-item-subtitle v-show="userInfo?.nickname === '未登录'">
未登录，请扫码登录！
</v-list-item-subtitle>
<template #prepend>
<img class="config-icon" :src="userInfo?.avatar" alt="Login" />
</template>
<template #append>
<v-btn class="config-btn" @click="confirmScanLogin">扫码登录</v-btn>
<v-btn class="config-btn" @click="confirmRefreshUser"> 刷新数据</v-btn>
</template>
</v-list-item>
<v-list-subheader :inset="true" class="config-header" title="系统信息" />
<v-divider :inset="true" class="border-opacity-75" />
<v-list-item title="系统平台" prepend-icon="mdi-microsoft-windows">
<template #append>
<v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle>
</template>
</v-list-item>
<v-list-item title="系统版本" prepend-icon="mdi-monitor-dashboard">
<template #append>
<v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle>
</template>
</v-list-item>
<v-list-item title="数据库更新时间" prepend-icon="mdi-database-sync">
<template #append>
<v-list-item-subtitle
>{{ dbInfo.find((item) => item.key === "dataUpdated")?.value }}
</v-list-item-subtitle> </v-list-item-subtitle>
</template> <v-list-item-subtitle v-show="userInfo?.nickname === '未登录'">
<v-list-item-subtitle 未登录，请扫码登录！
>更新于
{{ dbInfo.find((item) => item.key === "dataUpdated")?.updated }}
</v-list-item-subtitle>
</v-list-item>
<v-list-item title="数据库版本" prepend-icon="mdi-database-search">
<template #append>
<v-list-item-subtitle
>{{ dbInfo.find((item) => item.key === "appVersion")?.value }}
</v-list-item-subtitle> </v-list-item-subtitle>
</template> <template #prepend>
<v-list-item-subtitle <img class="config-icon" :src="userInfo?.avatar" alt="Login" />
>更新于 </template>
{{ dbInfo.find((item) => item.key === "appVersion")?.updated }} <template #append>
</v-list-item-subtitle> <v-btn class="config-btn" @click="confirmScanLogin">扫码登录</v-btn>
</v-list-item> <v-btn class="config-btn" @click="confirmRefreshUser"> 刷新数据</v-btn>
<v-list-subheader :inset="true" class="config-header" title="设置" /> </template>
<v-divider :inset="true" class="border-opacity-75" /> </v-list-item>
<v-list-item prepend-icon="mdi-camera-iris"> <v-list-subheader :inset="true" class="config-header" title="系统信息" />
<v-select <v-divider :inset="true" class="border-opacity-75" />
v-model="showHome" <v-list-item title="系统平台" prepend-icon="mdi-microsoft-windows">
:items="homeStore.getShowItems()" <template #append>
label="首页显示组件" <v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle>
:multiple="true" </template>
:chips="true" </v-list-item>
:theme="vuetifyTheme" <v-list-item title="系统版本" prepend-icon="mdi-monitor-dashboard">
/> <template #append>
<template #append> <v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle>
<v-btn class="config-btn" @click="submitHome"> 确定</v-btn> </template>
</template> </v-list-item>
</v-list-item> <v-list-item title="数据库更新时间" prepend-icon="mdi-database-sync">
<v-list-item prepend-icon="mdi-database-export" title="数据备份" @click="confirmBackup" /> <template #append>
<v-list-item prepend-icon="mdi-database-import" title="数据恢复" @click="confirmRestore" /> <v-list-item-subtitle
<v-list-item prepend-icon="mdi-database-arrow-up" title="数据更新" @click="confirmUpdate()" /> >{{ dbInfo.find((item) => item.key === "dataUpdated")?.value }}
<v-list-subheader :inset="true" class="config-header" title="调试" @click="tryShowReset" /> </v-list-item-subtitle>
<v-divider :inset="true" class="border-opacity-75" /> </template>
<v-list-item <v-list-item-subtitle
v-if="isDevEnv" >更新于
title="调试模式" {{ dbInfo.find((item) => item.key === "dataUpdated")?.updated }}
subtitle="开启后将显示调试信息" </v-list-item-subtitle>
prepend-icon="mdi-bug-play" </v-list-item>
> <v-list-item title="数据库版本" prepend-icon="mdi-database-search">
<template #append> <template #append>
<v-switch <v-list-item-subtitle
v-model="appStore.devMode" >{{ dbInfo.find((item) => item.key === "appVersion")?.value }}
:label="appStore.devMode ? '开启' : '关闭'" </v-list-item-subtitle>
:inset="true" </template>
color="#FAC51E" <v-list-item-subtitle
@click="submitDevMode" >更新于
{{ dbInfo.find((item) => item.key === "appVersion")?.updated }}
</v-list-item-subtitle>
</v-list-item>
<v-list-subheader :inset="true" class="config-header" title="设置" />
<v-divider :inset="true" class="border-opacity-75" />
<v-list-item prepend-icon="mdi-camera-iris">
<v-select
v-model="showHome"
:items="homeStore.getShowItems()"
label="首页显示组件"
:multiple="true"
:chips="true"
:theme="vuetifyTheme"
/> />
</template> <template #append>
</v-list-item> <v-btn class="config-btn" @click="submitHome"> 确定</v-btn>
<v-list-item prepend-icon="mdi-refresh" title="刷新设备信息" @click="confirmUpdateDevice" /> </template>
<v-list-item prepend-icon="mdi-database-remove" title="清除缓存" @click="confirmDelCache" /> </v-list-item>
<v-list-item <v-list-item prepend-icon="mdi-database-export" title="数据备份" @click="confirmBackup" />
v-show="showReset" <v-list-item prepend-icon="mdi-database-import" title="数据恢复" @click="confirmRestore" />
title="重置数据库" <v-list-item prepend-icon="mdi-database-arrow-up" title="数据更新" @click="confirmUpdate()" />
prepend-icon="mdi-database-settings" <v-list-subheader :inset="true" class="config-header" title="调试" @click="tryShowReset" />
@click="confirmResetDB()" <v-divider :inset="true" class="border-opacity-75" />
/> <v-list-item
<v-list-item prepend-icon="mdi-cog-sync" title="恢复默认设置" @click="confirmResetApp" /> v-if="isDevEnv"
<v-list-subheader :inset="true" class="config-header" title="路径" /> title="调试模式"
<v-divider :inset="true" class="border-opacity-75" /> subtitle="开启后将显示调试信息"
<v-list-item prepend-icon="mdi-bug-play"
prepend-icon="mdi-folder-key" >
title="本地数据库路径" <template #append>
:subtitle="appStore.dataPath.dbDataPath" <v-switch
/> v-model="appStore.devMode"
<v-list-item :label="appStore.devMode ? '开启' : '关闭'"
prepend-icon="mdi-folder-account" :inset="true"
title="本地用户数据路径" color="#FAC51E"
:subtitle="appStore.dataPath.userDataDir" @click="submitDevMode"
/> />
</v-list> </template>
</v-list-item>
<v-list-item prepend-icon="mdi-refresh" title="刷新设备信息" @click="confirmUpdateDevice" />
<v-list-item prepend-icon="mdi-database-remove" title="清除缓存" @click="confirmDelCache" />
<v-list-item
v-show="showReset"
title="重置数据库"
prepend-icon="mdi-database-settings"
@click="confirmResetDB()"
/>
<v-list-item prepend-icon="mdi-cog-sync" title="恢复默认设置" @click="confirmResetApp" />
<v-list-subheader :inset="true" class="config-header" title="路径" />
<v-divider :inset="true" class="border-opacity-75" />
<v-list-item
prepend-icon="mdi-folder-key"
title="本地数据库路径"
:subtitle="appStore.dataPath.dbDataPath"
/>
<v-list-item
prepend-icon="mdi-folder-account"
title="本地用户数据路径"
:subtitle="appStore.dataPath.userDataDir"
/>
</v-list>
<div class="config-app">
<img class="config-app-icon" src="/icon.webp" alt="App" />
<div
class="config-app-info click"
title="点击前往 Github Release"
@click="toOuter('https://github.com/BTMuli/TeyvatGuide/releases/latest')"
>
TeyvatGuide Beta
</div>
<div class="config-app-info">
v{{ versionApp }}.{{ buildTime === "" ? "Dev" : buildTime }}
</div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -636,9 +633,14 @@ function submitHome(): void {
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.config-box {
position: relative;
display: compact;
}
.config-list { .config-list {
border-radius: 10px; border-radius: 10px;
margin: 10px; margin-right: 220px;
background: var(--box-bg-1); background: var(--box-bg-1);
color: var(--box-text-4); color: var(--box-text-4);
font-family: var(--font-text); font-family: var(--font-text);
@@ -670,4 +672,36 @@ function submitHome(): void {
background: var(--tgc-btn-1); background: var(--tgc-btn-1);
color: var(--btn-text); color: var(--btn-text);
} }
.config-app {
position: fixed;
top: 16px;
right: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 10px;
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
box-shadow: 0 0 5px var(--common-shadow-4);
}
.config-app-icon {
width: 200px;
aspect-ratio: 1 / 1;
}
.config-app-info {
color: var(--tgc-white-1);
font-family: var(--font-title);
font-size: 14px;
text-align: center;
text-shadow: 0 0 5px var(--common-shadow-4);
}
.config-app-info.click {
border-bottom: 1px inset var(--tgc-white-4);
cursor: pointer;
}
</style> </style>