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

🎨 调整设置页列表 icon 样式

Browse Source 
close #88
This commit is contained in:
目棃
2024-02-05 11:43:45 +08:00
parent 530ccf2165
commit fa891a6884
3 changed files with 127 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/config/tc-dataDir.vue
View File

@@ -2,7 +2,12 @@
<v-list class="config-list">
<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">
<v-list-item>
<template #prepend>
<div class="config-icon">
<v-icon>mdi-folder-key</v-icon>
</div>
</template>
<v-list-item-title style="cursor: pointer" @click="confirmCUD"
>用户数据目录
</v-list-item-title>
@@ -11,13 +16,23 @@
<v-icon @click="copyPath('user')">mdi-content-copy</v-icon>
</template>
</v-list-item>
<v-list-item prepend-icon="mdi-folder-account" title="应用数据库路径">
<v-list-item title="应用数据库路径">
<template #prepend>
<div class="config-icon">
<v-icon>mdi-folder-account</v-icon>
</div>
</template>
<v-list-item-subtitle @click="openPath('db')">{{ appStore.dbPath }}</v-list-item-subtitle>
<template #append>
<v-icon @click="copyPath('db')">mdi-content-copy</v-icon>
</template>
</v-list-item>
<v-list-item prepend-icon="mdi-folder-multiple">
<v-list-item>
<template #prepend>
<div class="config-icon">
<v-icon>mdi-folder-multiple</v-icon>
</div>
</template>
<v-list-item-title style="cursor: pointer" @click="confirmCLD">日志目录</v-list-item-title>
<v-list-item-subtitle @click="openPath('log')">{{ appStore.logDir }}</v-list-item-subtitle>
<template #append>
@@ -186,4 +201,18 @@ async function openPath(type: "db" | "user" | "log"): Promise<void> {
font-family: var(--font-title);
font-size: large;
}
.config-icon {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
padding: 5px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
margin-right: 15px;
background: var(--box-bg-2);
color: var(--box-text-2);
}
</style>

33
src/components/config/tc-info.vue
View File

@@ -20,18 +20,30 @@
</v-list-item>
<v-list-item title="系统平台">
<template #prepend>
<v-icon>{{ iconPlatform }}</v-icon>
<div class="config-icon">
<v-icon>{{ iconPlatform }}</v-icon>
</div>
</template>
<template #append>
<v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle>
</template>
</v-list-item>
<v-list-item title="系统版本" prepend-icon="mdi-monitor-dashboard">
<v-list-item title="系统版本">
<template #prepend>
<div class="config-icon">
<v-icon>mdi-monitor-dashboard</v-icon>
</div>
</template>
<template #append>
<v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle>
</template>
</v-list-item>
<v-list-item title="数据库更新时间" prepend-icon="mdi-database-sync">
<v-list-item title="数据库更新时间">
<template #prepend>
<div class="config-icon">
<v-icon>mdi-database-sync</v-icon>
</div>
</template>
<template #append>
<v-list-item-subtitle
>{{ dbInfo.find((item) => item.key === "dataUpdated")?.value }}
@@ -42,7 +54,12 @@
{{ dbInfo.find((item) => item.key === "dataUpdated")?.updated }}
</v-list-item-subtitle>
</v-list-item>
<v-list-item title="数据库版本" prepend-icon="mdi-database-search">
<v-list-item title="数据库版本">
<template #prepend>
<div class="config-icon">
<v-icon>mdi-database-search</v-icon>
</div>
</template>
<template #append>
<v-list-item-subtitle
>{{ dbInfo.find((item) => item.key === "appVersion")?.value }}
@@ -117,14 +134,16 @@ function toOuter(url: string) {
}
.config-icon {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
padding: 5px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
margin-right: 15px;
backdrop-filter: blur(20px);
background: var(--app-side-bg);
box-shadow: 0 0 5px var(--common-shadow-1);
background: var(--box-bg-2);
color: var(--box-text-2);
}
</style>