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

fix(config): 设置页样式美化

Browse Source
This commit is contained in:
BTMuli
2023-03-31 23:09:44 +08:00
parent 6c8f460e56
commit 74eeaed166
1 changed files with 84 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/pages/Config.vue
View File

@@ -3,87 +3,74 @@
<t-loading /> <t-loading />
</div> </div>
<div v-else> <div v-else>
<v-card class="config-card" title="关于"> <v-list class="config-list">
<v-list> <v-list-subheader inset class="config-header">关于</v-list-subheader>
<v-list-item> <v-divider inset class="border-opacity-75" />
<template v-slot:prepend> <v-list-item>
<img class="config-icon" src="/icon.webp" alt="App" /> <template v-slot:prepend>
</template> <img class="config-icon" src="/icon.webp" alt="App" />
<v-list-item-title> </template>
应用版本 <v-list-item-title>
<v-btn 应用版本
color="info" <v-btn
size="small" color="#455167"
@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')" size="small"
>Alpha</v-btn @click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
> >Alpha</v-btn
</v-list-item-title> >
<template v-slot:append> </v-list-item-title>
<v-list-item-subtitle>{{ versionApp }}</v-list-item-subtitle> <template v-slot:append>
</template> <v-list-item-subtitle>{{ versionApp }}</v-list-item-subtitle>
</v-list-item> </template>
<v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')"> </v-list-item>
<template v-slot:prepend> <v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')">
<img class="config-icon" src="/tauri.webp" alt="Tauri" /> <template v-slot:prepend>
</template> <img class="config-icon" src="/tauri.webp" alt="Tauri" />
<template v-slot:append> </template>
<v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle> <template v-slot:append>
</template> <v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle>
</v-list-item> </template>
<v-list-item title="成就版本"> </v-list-item>
<template v-slot:prepend> <v-list-item title="成就版本">
<img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements" /> <template v-slot:prepend>
</template> <img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements" />
<template v-slot:append> </template>
<v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle> <template v-slot:append>
</template> <v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle>
</v-list-item> </template>
</v-list> </v-list-item>
</v-card> <v-list-subheader inset class="config-header">设置</v-list-subheader>
<v-card class="config-card" title="配置"> <v-divider inset class="border-opacity-75" />
<v-list> <v-list-item @click="openMergeData" prepend-icon="mdi-folder" title="打开用户数据目录" />
<v-list-item @click="openMergeData" prepend-icon="mdi-folder"> <v-list-item @click="deleteData" prepend-icon="mdi-delete" title="清除用户缓存" />
<v-list-item-title>打开用户数据目录</v-list-item-title> <v-list-item @click="deleteTemp" prepend-icon="mdi-delete" title="清除临时数据" />
</v-list-item> <v-list-item @click="setDefaultConfig" prepend-icon="mdi-cog" title="恢复默认设置" />
<v-list-item @click="deleteData" prepend-icon="mdi-delete"> <v-list-subheader inset class="config-header">调试</v-list-subheader>
<v-list-item-title>清除用户缓存</v-list-item-title> <v-divider inset class="border-opacity-75" />
</v-list-item> <v-list-item title="开发者模式" subtitle="开启后将显示调试信息">
<v-list-item @click="deleteTemp" prepend-icon="mdi-delete"> <template v-slot:prepend>
<v-list-item-title>删除临时数据</v-list-item-title> <v-icon>mdi-bug</v-icon>
</v-list-item> </template>
<v-list-item @click="setDefaultConfig" prepend-icon="mdi-cog"> <template v-slot:append>
<v-list-item-title>初始化数据</v-list-item-title> <v-switch
</v-list-item> :label="appStore.devMode ? '开启' : '关闭'"
</v-list> inset
</v-card> v-model="appStore.devMode"
<v-card class="config-card"> color="#FAC51E"
<v-list> />
<v-list-item> </template>
<v-list-item-title>开发者模式</v-list-item-title> </v-list-item>
<v-list-item-subtitle>开启后将显示调试信息</v-list-item-subtitle> <v-list-subheader inset class="config-header">路径</v-list-subheader>
<template v-slot:append> <v-divider inset class="border-opacity-75" />
<v-switch <v-list-item prepend-icon="mdi-folder">
:label="appStore.devMode ? '开启' : '关闭'" <v-list-item-title>本地应用数据路径</v-list-item-title>
inset <v-list-item-subtitle>{{ appStore.dataPath.app }}</v-list-item-subtitle>
v-model="appStore.devMode" </v-list-item>
color="#0781D8" <v-list-item prepend-icon="mdi-folder">
/> <v-list-item-title>本地用户数据路径</v-list-item-title>
</template> <v-list-item-subtitle>{{ appStore.dataPath.user }}</v-list-item-subtitle>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-card>
<v-card class="config-card">
<v-list>
<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-card>
</div> </div>
</template> </template>
@@ -178,17 +165,27 @@ async function setDefaultConfig() {
</script> </script>
<style lang="css"> <style lang="css">
.config-card { .config-list {
margin-bottom: 10px; margin: 10px;
font-family: "Genshin", sans-serif; font-family: "Genshin-Light", serif;
background: rgba(0, 0, 0, 0.5);
color: #faf7e8;
border-radius: 10px;
}
.config-header {
margin-top: 10px;
background: #76726c;
color: #f4d8a8;
font-size: large;
} }
.config-icon { .config-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 5px; margin-right: 15px;
padding: 5px; padding: 5px;
background: #393b40; background: #2d2f33;
border-radius: 5px; border-radius: 10px;
} }
</style> </style>