diff --git a/package.json b/package.json
index bfa72694f..6522fe07f 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "vue-i18n": "^11.2.8",
     "vue-konva": "^3.3.0",
     "vue-router": "^5.0.3",
-    "vuetify": "^3.12.1",
+    "vuetify": "^4.0.0",
     "webdav": "^5.9.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1133649ed..168dbe48d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,8 +104,8 @@ importers:
         specifier: ^5.0.3
         version: 5.0.3(@vue/compiler-sfc@3.5.29)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))
       vuetify:
-        specifier: ^3.12.1
-        version: 3.12.1(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.29(typescript@5.9.3))
+        specifier: ^4.0.0
+        version: 4.0.0(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.29(typescript@5.9.3))
       webdav:
         specifier: ^5.9.0
         version: 5.9.0
@@ -178,7 +178,7 @@ importers:
         version: 8.0.6(vite@6.4.1(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))
       vite-plugin-vuetify:
         specifier: ^2.1.3
-        version: 2.1.3(vite@6.4.1(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))(vuetify@3.12.1)
+        version: 2.1.3(vite@6.4.1(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))(vuetify@4.0.0)
       vite-plugin-web-extension:
         specifier: 4.5.0
         version: 4.5.0(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)
@@ -3776,8 +3776,8 @@ packages:
       typescript:
         optional: true
 
-  vuetify@3.12.1:
-    resolution: {integrity: sha512-JDHDzs1e195YJ9L3X4nWQySGSMyTxr0BefIY4+l/CpAgTd9pPV5F6oZzI8ZLuikMxS4HhfSGHteOAe6u/zh4vQ==}
+  vuetify@4.0.0:
+    resolution: {integrity: sha512-TRyNWd2KlX1KXbKwuHYRfrX24yLHq85AdVKmokfy5llAgVx7MNW4oBPwFmYLeuuSrWvw5ITtDJ5VjdBIKD5WVw==}
     peerDependencies:
       typescript: '>=4.7'
       vite-plugin-vuetify: '>=2.1.0'
@@ -4972,11 +4972,11 @@ snapshots:
 
   '@vue/shared@3.5.29': {}
 
-  '@vuetify/loader-shared@2.1.2(vue@3.5.29(typescript@5.9.3))(vuetify@3.12.1)':
+  '@vuetify/loader-shared@2.1.2(vue@3.5.29(typescript@5.9.3))(vuetify@4.0.0)':
     dependencies:
       upath: 2.0.1
       vue: 3.5.29(typescript@5.9.3)
-      vuetify: 3.12.1(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.29(typescript@5.9.3))
+      vuetify: 4.0.0(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.29(typescript@5.9.3))
 
   '@vueuse/components@14.2.1(vue@3.5.29(typescript@5.9.3))':
     dependencies:
@@ -7391,14 +7391,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vuetify@2.1.3(vite@6.4.1(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))(vuetify@3.12.1):
+  vite-plugin-vuetify@2.1.3(vite@6.4.1(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))(vuetify@4.0.0):
     dependencies:
-      '@vuetify/loader-shared': 2.1.2(vue@3.5.29(typescript@5.9.3))(vuetify@3.12.1)
+      '@vuetify/loader-shared': 2.1.2(vue@3.5.29(typescript@5.9.3))(vuetify@4.0.0)
       debug: 4.4.3
       upath: 2.0.1
       vite: 6.4.1(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2)
       vue: 3.5.29(typescript@5.9.3)
-      vuetify: 3.12.1(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.29(typescript@5.9.3))
+      vuetify: 4.0.0(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.29(typescript@5.9.3))
     transitivePeerDependencies:
       - supports-color
 
@@ -7508,12 +7508,12 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  vuetify@3.12.1(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.29(typescript@5.9.3)):
+  vuetify@4.0.0(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.29(typescript@5.9.3)):
     dependencies:
       vue: 3.5.29(typescript@5.9.3)
     optionalDependencies:
       typescript: 5.9.3
-      vite-plugin-vuetify: 2.1.3(vite@6.4.1(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))(vuetify@3.12.1)
+      vite-plugin-vuetify: 2.1.3(vite@6.4.1(@types/node@25.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))(vuetify@4.0.0)
 
   walk-up-path@4.0.0: {}
 
diff --git a/src/entries/options/components/SentToDownloaderDialog/Index.vue b/src/entries/options/components/SentToDownloaderDialog/Index.vue
index afec4e935..19708146d 100644
--- a/src/entries/options/components/SentToDownloaderDialog/Index.vue
+++ b/src/entries/options/components/SentToDownloaderDialog/Index.vue
@@ -215,13 +215,13 @@ function dialogLeave() {
                 placeholder="选择下载器"
                 @update:model-value="restoreAddTorrentOptions"
               >
-                <template #selection="{ item: { raw: downloader } }">
+                <template #selection="{ item: downloader }">
                   <v-list-item
                     :prepend-avatar="getDownloaderIcon(downloader.type)"
                     :title="downloaderTitle(downloader)"
                   />
                 </template>
-                <template #item="{ props, item: { raw: downloader } }">
+                <template #item="{ props, item: downloader }">
                   <v-list-item
                     v-bind="props"
                     :prepend-avatar="getDownloaderIcon(downloader.type)"
diff --git a/src/entries/options/components/TorrentTitleTd.vue b/src/entries/options/components/TorrentTitleTd.vue
index d1851d70f..77e128629 100644
--- a/src/entries/options/components/TorrentTitleTd.vue
+++ b/src/entries/options/components/TorrentTitleTd.vue
@@ -52,8 +52,8 @@ function doAdvanceSearch(site: TSupportSocialSite, sid: string) {
 </script>
 
 <template>
-  <v-container ref="container" class="t_main">
-    <v-row>
+  <v-container ref="container" class="t_main pa-0">
+    <v-row gap="0">
       <!-- 种子主标题信息 -->
       <span
         :style="{
@@ -73,7 +73,7 @@ function doAdvanceSearch(site: TSupportSocialSite, sid: string) {
       </span>
 
       <!-- 种子的媒体信息 -->
-      <div ref="social" class="ml-2">
+      <div ref="social">
         <template v-if="showSocial && configStore.searchEntifyControl.showSocialInformation">
           <template v-for="(meta, key) in socialBuildUrlMap" :key="key">
             <v-menu v-if="item[`ext_${key}`]" open-on-hover>
@@ -153,7 +153,10 @@ function doAdvanceSearch(site: TSupportSocialSite, sid: string) {
         </template>
       </div>
     </v-row>
-    <v-row v-if="configStore.searchEntifyControl.showTorrentTag || configStore.searchEntifyControl.showTorrentSubtitle">
+    <v-row
+      v-if="configStore.searchEntifyControl.showTorrentTag || configStore.searchEntifyControl.showTorrentSubtitle"
+      gap="0"
+    >
       <!-- 种子标签信息 -->
       <div ref="tags">
         <template v-if="configStore.searchEntifyControl.showTorrentTag && item.tags && item.tags.length > 0">
diff --git a/src/entries/options/views/Devtools/Debugger.vue b/src/entries/options/views/Devtools/Debugger.vue
index bd1f4ef96..6950f8256 100644
--- a/src/entries/options/views/Devtools/Debugger.vue
+++ b/src/entries/options/views/Devtools/Debugger.vue
@@ -186,7 +186,7 @@ async function resetFnWrapper(resetFn: resetItem["resetFn"]) {
           </td>
           <td>
             <v-container>
-              <v-row dense>
+              <v-row density="compact">
                 <v-col class="d-flex align-center">
                   <v-btn @click="enableLibrary" class="mr-3">启用</v-btn>
                   在console中启用 <code>sendMessage, axios, Sizzle, es-toolkit ( as _ ）, datefns</code> 等方法
@@ -201,7 +201,7 @@ async function resetFnWrapper(resetFn: resetItem["resetFn"]) {
           </td>
           <td>
             <v-container>
-              <v-row dense>
+              <v-row density="compact">
                 <v-col cols="4">
                   <v-autocomplete v-model="selectedSite" :items="definitionList" hide-details label="site" />
                 </v-col>
@@ -224,7 +224,7 @@ async function resetFnWrapper(resetFn: resetItem["resetFn"]) {
           </td>
           <td>
             <v-container>
-              <v-row dense>
+              <v-row density="compact">
                 <v-col cols="4">
                   <v-autocomplete
                     v-model="simpleServer[serverType].selected"
@@ -267,7 +267,7 @@ async function resetFnWrapper(resetFn: resetItem["resetFn"]) {
           </td>
           <td>
             <v-container>
-              <v-row dense>
+              <v-row density="compact">
                 <v-col cols="4">
                   <v-autocomplete
                     v-model="selectedPiniaStore"
diff --git a/src/entries/options/views/Layout/Navigation.vue b/src/entries/options/views/Layout/Navigation.vue
index 3a55e7114..b9b4df644 100644
--- a/src/entries/options/views/Layout/Navigation.vue
+++ b/src/entries/options/views/Layout/Navigation.vue
@@ -73,7 +73,7 @@ function clickMenuItem() {
     <!-- 页脚，用于展示版本信息 -->
     <template v-slot:append>
       <v-footer>
-        <v-row justify="center">
+        <v-row class="justify-center">
           <span class="pa-2 text-grey-darken-1">
             &copy; {{ year }},
             <a :href="`${REPO_URL}${git.long ? `/commit/${git.long}` : ''}`" target="_blank">{{ ext_version }}</a>
diff --git a/src/entries/options/views/Overview/DownloadHistory/Index.vue b/src/entries/options/views/Overview/DownloadHistory/Index.vue
index b87c02a76..7f7ba9a4e 100644
--- a/src/entries/options/views/Overview/DownloadHistory/Index.vue
+++ b/src/entries/options/views/Overview/DownloadHistory/Index.vue
@@ -97,7 +97,7 @@ onMounted(() => {
   <v-alert :title="t('route.Overview.DownloadHistory')" type="info" />
   <v-card>
     <v-card-title>
-      <v-row class="ma-0">
+      <v-row class="ma-0" gap="0">
         <!-- 按钮组 -->
         <NavButton
           color="green"
diff --git a/src/entries/options/views/Overview/MediaServerEntity/ItemInformationDialog.vue b/src/entries/options/views/Overview/MediaServerEntity/ItemInformationDialog.vue
index a048c84fc..d70878b51 100644
--- a/src/entries/options/views/Overview/MediaServerEntity/ItemInformationDialog.vue
+++ b/src/entries/options/views/Overview/MediaServerEntity/ItemInformationDialog.vue
@@ -70,7 +70,7 @@ function secondsToISO8601(seconds: number) {
       <v-divider />
 
       <v-card-text>
-        <v-row align="center">
+        <v-row class="align-center">
           <v-col cols="8" offset="2" offset-sm="0" sm="4">
             <v-img :src="item.poster" :title="item.name" />
           </v-col>
diff --git a/src/entries/options/views/Overview/MyData/HistoryDataViewDialog.vue b/src/entries/options/views/Overview/MyData/HistoryDataViewDialog.vue
index 9773f6a86..13dec238b 100644
--- a/src/entries/options/views/Overview/MyData/HistoryDataViewDialog.vue
+++ b/src/entries/options/views/Overview/MyData/HistoryDataViewDialog.vue
@@ -128,14 +128,14 @@ function exportSiteHistoryData() {
 
           <!-- 上传、下载 -->
           <template #item.uploaded="{ item }">
-            <v-container>
-              <v-row class="flex-nowrap" justify="end">
+            <v-container class="pa-0">
+              <v-row class="flex-nowrap justify-end" gap="0">
                 <span class="text-no-wrap">
                   {{ typeof item.uploaded !== "undefined" ? formatSize(item.uploaded) : "-" }}
                 </span>
                 <v-icon color="green-darken-4" icon="mdi-chevron-up" small></v-icon>
               </v-row>
-              <v-row class="flex-nowrap" justify="end">
+              <v-row class="flex-nowrap justify-end" gap="0">
                 <span class="text-no-wrap">
                   {{ typeof item.downloaded !== "undefined" ? formatSize(item.downloaded) : "-" }}
                 </span>
@@ -168,11 +168,11 @@ function exportSiteHistoryData() {
 
           <!-- 魔力/积分 -->
           <template #item.bonus="{ item }">
-            <v-container>
-              <v-row justify="end" align="center">
+            <v-container class="pa-0">
+              <v-row class="align-center justify-end" gap="0">
                 <span class="text-no-wrap">{{ item.bonus ? formatNumber(item.bonus) : "-" }}</span>
               </v-row>
-              <v-row justify="end" align="center">
+              <v-row class="align-center justify-end" gap="0">
                 <span class="text-no-wrap">{{ item.seedingBonus ? formatNumber(item.seedingBonus) : "-" }}</span>
               </v-row>
             </v-container>
diff --git a/src/entries/options/views/Overview/MyData/Index.vue b/src/entries/options/views/Overview/MyData/Index.vue
index 715813342..9a0da0bb6 100644
--- a/src/entries/options/views/Overview/MyData/Index.vue
+++ b/src/entries/options/views/Overview/MyData/Index.vue
@@ -200,7 +200,7 @@ function viewStatistic() {
   <v-alert :title="t('route.Overview.MyData')" type="info" />
   <v-card>
     <v-card-title>
-      <v-row class="ma-0">
+      <v-row class="ma-0" gap="0">
         <!-- 刷新，取消刷新 -->
         <NavButton
           v-if="runtimeStore.isUserInfoFlush"
@@ -455,14 +455,14 @@ function viewStatistic() {
 
       <!-- 上传、下载 -->
       <template #item.uploaded="{ item }">
-        <v-container>
-          <v-row class="flex-nowrap" justify="end">
+        <v-container class="pa-0">
+          <v-row class="flex-nowrap justify-end" gap="0">
             <span class="text-no-wrap">
               {{ typeof item.uploaded !== "undefined" ? formatSize(item.uploaded) : "-" }}
             </span>
             <v-icon color="green-darken-4" icon="mdi-chevron-up" size="small"></v-icon>
           </v-row>
-          <v-row class="flex-nowrap" justify="end">
+          <v-row class="flex-nowrap justify-end" gap="0">
             <span class="text-no-wrap">
               {{ typeof item.downloaded !== "undefined" ? formatSize(item.downloaded) : "-" }}
             </span>
@@ -473,14 +473,14 @@ function viewStatistic() {
 
       <!-- 真实上传、下载 -->
       <template #item.trueUploaded="{ item }">
-        <v-container>
-          <v-row class="flex-nowrap" justify="end">
+        <v-container class="pa-0">
+          <v-row class="flex-nowrap justify-end" gap="0">
             <span class="text-no-wrap">
               {{ typeof item.trueUploaded !== "undefined" ? formatSize(item.trueUploaded) : "-" }}
             </span>
             <v-icon color="green-darken-4" icon="mdi-chevron-up" size="small"></v-icon>
           </v-row>
-          <v-row class="flex-nowrap" justify="end">
+          <v-row class="flex-nowrap justify-end" gap="0">
             <span class="text-no-wrap">
               {{ typeof item.trueDownloaded !== "undefined" ? formatSize(item.trueDownloaded) : "-" }}
             </span>
@@ -506,11 +506,15 @@ function viewStatistic() {
 
       <!-- 做种数， H&R 情况  -->
       <template #item.seeding="{ item }">
-        <v-container class="py-0">
-          <v-row align="center" class="flex-nowrap my-0" justify="end">
+        <v-container class="pa-0">
+          <v-row class="flex-nowrap my-0 align-center justify-end" gap="0">
             <span class="text-no-wrap">{{ item.seeding ?? "-" }}</span>
           </v-row>
-          <v-row v-if="configStore.myDataTableControl.showHnR" align="center" class="flex-nowrap my-0" justify="end">
+          <v-row
+            v-if="configStore.myDataTableControl.showHnR"
+            class="flex-nowrap my-0 align-center justify-end"
+            gap="0"
+          >
             <span
               v-if="typeof item.hnrPreWarning !== 'undefined' && item.hnrPreWarning > 0"
               class="d-inline-flex align-center ml-2"
@@ -552,8 +556,8 @@ function viewStatistic() {
 
       <!-- 魔力/积分 -->
       <template #item.bonus="{ item }">
-        <v-container>
-          <v-row align="center" class="flex-nowrap" justify="end">
+        <v-container class="pa-0">
+          <v-row class="flex-nowrap align-center justify-end" gap="0">
             <v-icon :title="t('levelRequirement.bonus')" color="green-darken-4" icon="mdi-currency-usd" size="small" />
             <BonusFormatSpan :num="item.bonus" />
           </v-row>
@@ -563,9 +567,8 @@ function viewStatistic() {
               item.seedingBonus !== '' &&
               !isUndefined(item.seedingBonus)
             "
-            align="center"
-            class="flex-nowrap"
-            justify="end"
+            class="flex-nowrap align-center justify-end"
+            gap="0"
           >
             <v-icon
               :title="t('levelRequirement.seedingBonus')"
diff --git a/src/entries/options/views/Overview/MyData/UserDataStatistic/Index.vue b/src/entries/options/views/Overview/MyData/UserDataStatistic/Index.vue
index 6acb259c0..3af0dbef1 100644
--- a/src/entries/options/views/Overview/MyData/UserDataStatistic/Index.vue
+++ b/src/entries/options/views/Overview/MyData/UserDataStatistic/Index.vue
@@ -380,7 +380,7 @@ function saveControl() {
 
 <template>
   <v-card>
-    <v-row class="pa-2" justify="start">
+    <v-row class="pa-2 justify-start">
       <v-col ref="chartContainer" id="chartContainer" style="max-width: 800px">
         <!-- 总上传、总下载、总积分 -->
         <v-chart
@@ -441,7 +441,7 @@ function saveControl() {
         <v-alert title="数据图表样式设置" type="info" class="mb-2"> </v-alert>
 
         <v-row>
-          <v-col align-self="center">
+          <v-col class="align-self-center">
             <v-label>用户名</v-label>
           </v-col>
           <v-col cols="12" sm="10">
@@ -466,7 +466,7 @@ function saveControl() {
         </v-row>
 
         <v-row>
-          <v-col align-self="center">
+          <v-col class="align-self-center">
             <v-label>展示图表</v-label>
           </v-col>
           <v-col cols="12" sm="10">
@@ -489,7 +489,7 @@ function saveControl() {
         </v-row>
 
         <v-row>
-          <v-col align-self="center">
+          <v-col class="align-self-center">
             <v-label>时间段</v-label>
           </v-col>
           <v-col cols="12" sm="10">
@@ -535,7 +535,7 @@ function saveControl() {
         </v-row>
 
         <v-row>
-          <v-col align-self="center">
+          <v-col class="align-self-center">
             <v-label>图表设置</v-label>
           </v-col>
           <v-col cols="12" sm="10">
diff --git a/src/entries/options/views/Overview/MyData/UserDataTimeline/Index.vue b/src/entries/options/views/Overview/MyData/UserDataTimeline/Index.vue
index a0a881d27..3b230b02d 100644
--- a/src/entries/options/views/Overview/MyData/UserDataTimeline/Index.vue
+++ b/src/entries/options/views/Overview/MyData/UserDataTimeline/Index.vue
@@ -226,7 +226,7 @@ function saveControl() {
 
 <template>
   <v-card>
-    <v-row class="pa-2" justify="start">
+    <v-row class="pa-2 justify-start">
       <v-col
         ref="canvasContainer"
         :style="{
@@ -619,7 +619,7 @@ function saveControl() {
         </v-row>
 
         <v-row>
-          <v-col class="ml-2" align-self="center">
+          <v-col class="ml-2 align-self-center">
             <v-label>展示内容</v-label>
           </v-col>
           <v-col cols="12" sm="10">
@@ -652,7 +652,7 @@ function saveControl() {
         </v-row>
 
         <v-row>
-          <v-col class="ml-2" align-self="center">
+          <v-col class="ml-2 align-self-center">
             <v-label>时间显示方式</v-label>
           </v-col>
           <v-col cols="12" sm="10">
diff --git a/src/entries/options/views/Overview/SearchEntity/Index.vue b/src/entries/options/views/Overview/SearchEntity/Index.vue
index 8acbec97c..d34234133 100644
--- a/src/entries/options/views/Overview/SearchEntity/Index.vue
+++ b/src/entries/options/views/Overview/SearchEntity/Index.vue
@@ -375,13 +375,13 @@ function cancelSearchQueue() {
 
         <!-- 种子大小，下载情况 -->
         <template #item.size="{ item }">
-          <v-container no-gutters>
-            <v-row>
+          <v-container>
+            <v-row no-gutters>
               <v-col class="pa-0">
                 <span class="t_size text-no-wrap">{{ formatSize(item.size ?? 0) }}</span>
               </v-col>
             </v-row>
-            <v-row v-if="item.status && (item.status as ETorrentStatus) !== ETorrentStatus.unknown">
+            <v-row v-if="item.status && (item.status as ETorrentStatus) !== ETorrentStatus.unknown" no-gutters>
               <v-col class="pa-0">
                 <TorrentProcessTd :torrent="item"></TorrentProcessTd>
               </v-col>
diff --git a/src/entries/options/views/Settings/SetBackup/AddDialog.vue b/src/entries/options/views/Settings/SetBackup/AddDialog.vue
index 450e1c215..f40570ff9 100644
--- a/src/entries/options/views/Settings/SetBackup/AddDialog.vue
+++ b/src/entries/options/views/Settings/SetBackup/AddDialog.vue
@@ -94,15 +94,11 @@ function resetDialog() {
               "
               @update:model-value="(e) => updateStoredDownloaderConfigByDefault(e)"
             >
-              <template #selection="{ item: { raw: backupServer } }">
-                <v-list-item :prepend-avatar="getBackupServerIcon(backupServer.type)" :title="backupServer.type" />
+              <template #selection="{ item }">
+                <v-list-item :prepend-avatar="getBackupServerIcon(item.type)" :title="item.type" />
               </template>
-              <template #item="{ props, item: { raw: backupServer } }">
-                <v-list-item
-                  v-bind="props"
-                  :prepend-avatar="getBackupServerIcon(backupServer.type)"
-                  :title="backupServer.type"
-                >
+              <template #item="{ props, item }">
+                <v-list-item v-bind="props" :prepend-avatar="getBackupServerIcon(item.type)" :title="item.type">
                 </v-list-item>
               </template>
             </v-autocomplete>
diff --git a/src/entries/options/views/Settings/SetBackup/Index.vue b/src/entries/options/views/Settings/SetBackup/Index.vue
index 9835bf88f..413b656af 100644
--- a/src/entries/options/views/Settings/SetBackup/Index.vue
+++ b/src/entries/options/views/Settings/SetBackup/Index.vue
@@ -88,7 +88,7 @@ async function confirmDeleteBackupServer(id: TBackupServerKey) {
   <v-alert :title="t('route.Settings.SetBackup')" type="info" />
   <v-card class="set-backup">
     <v-card-title>
-      <v-row class="ma-0">
+      <v-row class="ma-0" gap="0">
         <NavButton :text="t('common.btn.add')" color="success" icon="mdi-plus" @click="showAddDialog = true" />
         <NavButton
           :disabled="tableSelected.length === 0"
diff --git a/src/entries/options/views/Settings/SetBase/SearchEntityWindow.vue b/src/entries/options/views/Settings/SetBase/SearchEntityWindow.vue
index 2f95440e5..f572d9501 100644
--- a/src/entries/options/views/Settings/SetBase/SearchEntityWindow.vue
+++ b/src/entries/options/views/Settings/SetBase/SearchEntityWindow.vue
@@ -29,7 +29,7 @@ async function clearLastFilter(v: boolean) {
         hide-details
       />
 
-      <v-row dense>
+      <v-row density="compact">
         <v-col cols="12" md="2" class="d-flex align-center justify-center">
           <v-label>搜索方案</v-label>
         </v-col>
@@ -62,7 +62,7 @@ async function clearLastFilter(v: boolean) {
         </v-col>
       </v-row>
 
-      <v-row dense>
+      <v-row density="compact">
         <v-col cols="12" md="2" class="d-flex align-center justify-center">
           <v-label>结果筛选</v-label>
         </v-col>
diff --git a/src/entries/options/views/Settings/SetBase/UiWindow.vue b/src/entries/options/views/Settings/SetBase/UiWindow.vue
index c165c4b2d..c18f8e7d4 100644
--- a/src/entries/options/views/Settings/SetBase/UiWindow.vue
+++ b/src/entries/options/views/Settings/SetBase/UiWindow.vue
@@ -46,11 +46,11 @@ defineExpose({
       <!-- 明亮模式设置 -->
       <v-select v-model="configStore.theme" :label="t('SetBase.ui.displayMode.index')" :items="supportTheme">
         <template #selection="{ item }">
-          {{ t("SetBase.ui.displayMode." + item.raw) }}
+          {{ t("SetBase.ui.displayMode." + item) }}
         </template>
 
-        <template #item="{ item, props }">
-          <v-list-item v-bind="props" :title="t('SetBase.ui.displayMode.' + item.raw)" />
+        <template #item="{ props, item }">
+          <v-list-item v-bind="props" :title="t('SetBase.ui.displayMode.' + item)" />
         </template>
       </v-select>
 
@@ -99,7 +99,7 @@ defineExpose({
       <template v-if="configStore.contentScript.enabled">
         <v-alert type="warning" variant="tonal"> 启用或禁用相关功能后需要保存设置，并刷新站点页面才能生效。 </v-alert>
 
-        <v-row dense>
+        <v-row density="compact">
           <v-col cols="12" md="2" class="d-flex align-center justify-center">
             <v-label>基本设置</v-label>
           </v-col>
@@ -122,7 +122,7 @@ defineExpose({
           </v-col>
         </v-row>
 
-        <v-row dense>
+        <v-row density="compact">
           <v-col cols="12" md="2" class="d-flex align-center justify-center">
             <v-label>侧边栏样式</v-label>
           </v-col>
@@ -156,7 +156,7 @@ defineExpose({
           </v-col>
         </v-row>
 
-        <v-row dense>
+        <v-row density="compact">
           <v-col cols="12" md="2" class="d-flex align-center justify-center">
             <v-label>侧边栏功能</v-label>
           </v-col>
diff --git a/src/entries/options/views/Settings/SetDownloader/AddDialog.vue b/src/entries/options/views/Settings/SetDownloader/AddDialog.vue
index de9ee01db..0cdf876ca 100644
--- a/src/entries/options/views/Settings/SetDownloader/AddDialog.vue
+++ b/src/entries/options/views/Settings/SetDownloader/AddDialog.vue
@@ -104,15 +104,11 @@ async function saveStoredDownloaderConfig() {
               persistent-hint
               @update:model-value="(e) => updateStoredDownloaderConfigByDefault(e)"
             >
-              <template #selection="{ item: { raw: downloader } }">
-                <v-list-item :prepend-avatar="getDownloaderIcon(downloader.type)" :title="downloader.type" />
+              <template #selection="{ item }">
+                <v-list-item :prepend-avatar="getDownloaderIcon(item.type)" :title="item.type" />
               </template>
-              <template #item="{ props, item: { raw: downloader } }">
-                <v-list-item
-                  v-bind="props"
-                  :prepend-avatar="getDownloaderIcon(downloader.type)"
-                  :title="downloader.type"
-                >
+              <template #item="{ props, item }">
+                <v-list-item v-bind="props" :prepend-avatar="getDownloaderIcon(item.type)" :title="item.type">
                 </v-list-item>
               </template>
             </v-autocomplete>
diff --git a/src/entries/options/views/Settings/SetDownloader/DefaultDownloaderEditDialog.vue b/src/entries/options/views/Settings/SetDownloader/DefaultDownloaderEditDialog.vue
index 1485870f2..6bad3a8bf 100644
--- a/src/entries/options/views/Settings/SetDownloader/DefaultDownloaderEditDialog.vue
+++ b/src/entries/options/views/Settings/SetDownloader/DefaultDownloaderEditDialog.vue
@@ -78,14 +78,14 @@ function enterDialog() {
             item-value="id"
             @update:model-value="(e) => updateDefaultDownloaderInput(e)"
           >
-            <template #selection="{ item: { raw: downloader } }">
+            <template #selection="{ item: downloader }">
               <v-list-item
                 :prepend-avatar="getDownloaderIcon(downloader.type)"
                 :subtitle="downloader.address"
                 :title="downloader.name"
               />
             </template>
-            <template #item="{ props, item: { raw: downloader } }">
+            <template #item="{ props, item: downloader }">
               <v-list-item
                 v-bind="props"
                 :prepend-avatar="getDownloaderIcon(downloader.type)"
diff --git a/src/entries/options/views/Settings/SetDownloader/Index.vue b/src/entries/options/views/Settings/SetDownloader/Index.vue
index 990615353..442a2c652 100644
--- a/src/entries/options/views/Settings/SetDownloader/Index.vue
+++ b/src/entries/options/views/Settings/SetDownloader/Index.vue
@@ -106,7 +106,7 @@ async function confirmDeleteDownloader(downloaderId: TDownloaderKey) {
   <v-alert :title="t('route.Settings.SetDownloader')" type="info" />
   <v-card class="set-downloader">
     <v-card-title>
-      <v-row class="ma-0">
+      <v-row class="ma-0" gap="0">
         <NavButton :text="t('common.btn.add')" color="success" icon="mdi-plus" @click="showAddDialog = true" />
 
         <NavButton
diff --git a/src/entries/options/views/Settings/SetMediaServer/AddDialog.vue b/src/entries/options/views/Settings/SetMediaServer/AddDialog.vue
index 1abac2755..451f5f372 100644
--- a/src/entries/options/views/Settings/SetMediaServer/AddDialog.vue
+++ b/src/entries/options/views/Settings/SetMediaServer/AddDialog.vue
@@ -93,15 +93,11 @@ async function saveStoredMediaServerConfig() {
               persistent-hint
               @update:model-value="(e) => updateStoredMediaServerConfigByDefault(e)"
             >
-              <template #selection="{ item: { raw: downloader } }">
-                <v-list-item :prepend-avatar="getMediaServerIcon(downloader.type)" :title="downloader.type" />
+              <template #selection="{ item }">
+                <v-list-item :prepend-avatar="getMediaServerIcon(item.type)" :title="item.type" />
               </template>
-              <template #item="{ props, item: { raw: downloader } }">
-                <v-list-item
-                  v-bind="props"
-                  :prepend-avatar="getMediaServerIcon(downloader.type)"
-                  :title="downloader.type"
-                >
+              <template #item="{ props, item }">
+                <v-list-item v-bind="props" :prepend-avatar="getMediaServerIcon(item.type)" :title="item.type">
                 </v-list-item>
               </template>
             </v-autocomplete>
diff --git a/src/entries/options/views/Settings/SetMediaServer/Index.vue b/src/entries/options/views/Settings/SetMediaServer/Index.vue
index 690339340..754eecfe4 100644
--- a/src/entries/options/views/Settings/SetMediaServer/Index.vue
+++ b/src/entries/options/views/Settings/SetMediaServer/Index.vue
@@ -51,7 +51,7 @@ async function confirmDeleteMediaServer(mediaServerId: TMediaServerKey) {
   <v-alert :title="t('route.Settings.SetMediaServer')" type="info" />
   <v-card class="set-media-server">
     <v-card-title>
-      <v-row class="ma-0">
+      <v-row class="ma-0" gap="0">
         <NavButton :text="t('common.btn.add')" color="success" icon="mdi-plus" @click="showAddDialog = true" />
         <NavButton
           :disabled="tableSelected.length === 0"
diff --git a/src/entries/options/views/Settings/SetSearchSolution/Index.vue b/src/entries/options/views/Settings/SetSearchSolution/Index.vue
index 17f1e5fec..5e45b2d4d 100644
--- a/src/entries/options/views/Settings/SetSearchSolution/Index.vue
+++ b/src/entries/options/views/Settings/SetSearchSolution/Index.vue
@@ -163,7 +163,7 @@ async function copySearchSolution(solutionId: TSolutionKey) {
   </v-alert>
   <v-card>
     <v-card-title>
-      <v-row class="ma-0">
+      <v-row class="ma-0" gap="0">
         <NavButton :text="t('common.btn.add')" color="success" icon="mdi-plus" @click="addSearchSolution" />
 
         <NavButton
diff --git a/src/entries/options/views/Settings/SetSearchSolution/SiteCategoryPanel.vue b/src/entries/options/views/Settings/SetSearchSolution/SiteCategoryPanel.vue
index 210f04323..104396b90 100644
--- a/src/entries/options/views/Settings/SetSearchSolution/SiteCategoryPanel.vue
+++ b/src/entries/options/views/Settings/SetSearchSolution/SiteCategoryPanel.vue
@@ -157,8 +157,8 @@ onMounted(async () => {
           {{ t("SetSearchSolution.spDialog.noDefNotice") }}
         </div>
       </v-col>
-      <v-col align-self="center">
-        <v-row justify="end">
+      <v-col class="align-self-center">
+        <v-row class="justify-end">
           <v-btn
             :title="t('SetSearchSolution.spDialog.action.reset')"
             color="red"
@@ -167,7 +167,7 @@ onMounted(async () => {
             @click="() => resetSelectCategory()"
           />
         </v-row>
-        <v-row justify="end">
+        <v-row class="justify-end">
           <v-btn
             :title="t('SetSearchSolution.spDialog.action.create')"
             color="indigo"
@@ -176,7 +176,7 @@ onMounted(async () => {
             @click="() => showCustomSolutionDialogFn()"
           ></v-btn>
         </v-row>
-        <v-row justify="end">
+        <v-row class="justify-end">
           <v-btn
             :title="t('SetSearchSolution.spDialog.action.add')"
             color="blue"
diff --git a/src/entries/options/views/Settings/SetSite/AddDialog.vue b/src/entries/options/views/Settings/SetSite/AddDialog.vue
index e6d92bab4..6cde9bd8b 100644
--- a/src/entries/options/views/Settings/SetSite/AddDialog.vue
+++ b/src/entries/options/views/Settings/SetSite/AddDialog.vue
@@ -81,7 +81,7 @@ async function saveSite() {
               item-value="id"
               persistent-hint
             >
-              <template #selection="{ item: { raw: site } }">
+              <template #selection="{ item: site }">
                 <v-list-item>
                   <template #prepend>
                     <SiteFavicon :site-id="site.id" class="mr-2" flush-on-no-image />
@@ -91,7 +91,7 @@ async function saveSite() {
                   </v-list-item-title>
                 </v-list-item>
               </template>
-              <template #item="{ props, item: { raw: site } }">
+              <template #item="{ props, item: site }">
                 <v-list-item v-bind="props">
                   <template #prepend>
                     <SiteFavicon :site-id="site.id" class="mr-2" />
diff --git a/src/entries/options/views/Settings/SetSite/Index.vue b/src/entries/options/views/Settings/SetSite/Index.vue
index 79038510b..32d60114d 100644
--- a/src/entries/options/views/Settings/SetSite/Index.vue
+++ b/src/entries/options/views/Settings/SetSite/Index.vue
@@ -116,7 +116,7 @@ async function flushSiteFavicon(siteId: TSiteID | TSiteID[]) {
   <v-alert :title="t('route.Settings.SetSite')" type="info" />
   <v-card class="set-site">
     <v-card-title>
-      <v-row class="ma-0">
+      <v-row class="ma-0" gap="0">
         <NavButton :text="t('common.btn.add')" color="success" icon="mdi-plus" @click="showAddDialog = true" />
 
         <NavButton
diff --git a/src/extends/pinia/webExtPersistence.ts b/src/extends/pinia/webExtPersistence.ts
index e6414576a..7a97c0bf2 100644
--- a/src/extends/pinia/webExtPersistence.ts
+++ b/src/extends/pinia/webExtPersistence.ts
@@ -129,7 +129,7 @@ export function piniaWebExtPersistencePlugin(context: PiniaPluginContext) {
 
   function onChanged(changes: Record<string, chrome.storage.StorageChange>, areaName: string) {
     if (areaName === storageArea && Object.hasOwn(changes, key)) {
-      store.$patch(changes[key].newValue);
+      store.$patch(changes[key].newValue as Parameters<typeof store.$patch>[0]);
     }
   }