🎨 调整设置页列表 icon 样式

close #88

src/components/config/tc-dataDir.vue

@@ -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>

src/components/config/tc-info.vue

@@ -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>

src/pages/common/Config.vue

@@ -6,17 +6,35 @@
     <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-database-export" title="数据备份" @click="confirmBackup" />
-      <v-list-item prepend-icon="mdi-database-import" title="数据恢复" @click="confirmRestore" />
-      <v-list-item prepend-icon="mdi-database-arrow-up" title="数据更新" @click="confirmUpdate()" />
+      <v-list-item title="数据备份" @click="confirmBackup">
+        <template #prepend>
+          <div class="config-icon">
+            <v-icon>mdi-database-export</v-icon>
+          </div>
+        </template>
+      </v-list-item>
+      <v-list-item title="数据恢复" @click="confirmRestore">
+        <template #prepend>
+          <div class="config-icon">
+            <v-icon>mdi-database-import</v-icon>
+          </div>
+        </template>
+      </v-list-item>
+      <v-list-item title="数据更新" @click="confirmUpdate()">
+        <template #prepend>
+          <div class="config-icon">
+            <v-icon>mdi-database-arrow-up</v-icon>
+          </div>
+        </template>
+      </v-list-item>
       <v-list-subheader :inset="true" class="config-header" title="调试" @click="tryShowReset" />
       <v-divider :inset="true" class="border-opacity-75" />
-      <v-list-item
-        v-if="isDevEnv"
-        title="调试模式"
-        subtitle="开启后将显示调试信息"
-        prepend-icon="mdi-bug-play"
-      >
+      <v-list-item v-if="isDevEnv" title="调试模式" subtitle="开启后将显示调试信息">
+        <template #prepend>
+          <div class="config-icon">
+            <v-icon>mdi-bug-play</v-icon>
+          </div>
+        </template>
         <template #append>
           <v-switch
             v-model="appStore.devMode"
@@ -27,20 +45,38 @@
           />
         </template>
       </v-list-item>
-      <v-list-item prepend-icon="mdi-refresh">
+      <v-list-item>
+        <template #prepend>
+          <div class="config-icon">
+            <v-icon>mdi-refresh</v-icon>
+          </div>
+        </template>
         <v-list-item-title @click="confirmUpdateDevice()">刷新设备信息</v-list-item-title>
         <template #append>
           <v-icon @click="confirmUpdateDevice(true)">mdi-bug</v-icon>
         </template>
       </v-list-item>
-      <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-item title="清除缓存" @click="confirmDelCache">
+        <template #prepend>
+          <div class="config-icon">
+            <v-icon>mdi-database-remove</v-icon>
+          </div>
+        </template>
+      </v-list-item>
+      <v-list-item v-show="showReset" title="重置数据库" @click="confirmResetDB()">
+        <template #prepend>
+          <div class="config-icon">
+            <v-icon>mdi-database-settings</v-icon>
+          </div>
+        </template>
+      </v-list-item>
+      <v-list-item title="恢复默认设置" @click="confirmResetApp">
+        <template #prepend>
+          <div class="config-icon">
+            <v-icon>mdi-cog-sync</v-icon>
+          </div>
+        </template>
+      </v-list-item>
     </v-list>
     <TcDataDir />
   </div>
@@ -445,10 +481,24 @@ function loadHandle(params: TGApp.Component.Loading.EmitParams): void {
 .config-header {
   margin-top: 10px;
   color: var(--common-text-title);
-  font-family: Genshin, serif;
+  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);
+}
+
 .config-right {
   position: fixed;
   top: 16px;