优化关于对话框和快捷栏的布局

src/components/dialog/AboutDialog.vue

@@ -2,10 +2,17 @@
 import { formatDateDifference } from '@/@core/utils/formatters'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
 
 // 国际化
 const { t } = useI18n()
 
+// 定义事件
+const emit = defineEmits(['close'])
+
+// 显示器
+const display = useDisplay()
+
 // 系统环境变量
 const systemEnv = ref<any>({})
 
@@ -116,233 +123,247 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="px-3">
-    <div class="section">
-      <div class="section border-gray-800">
-        <dl>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.softwareVersion') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow flex flex-row items-center truncate">
-                  <code class="truncate">{{ systemEnv.VERSION }}</code>
-                  <a
-                    v-if="latestRelease === systemEnv.VERSION"
-                    href="https://github.com/jxxghp/MoviePilot/releases"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <span
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap bg-green-500 bg-opacity-80 border border-green-500 !text-green-100 ml-2 !cursor-pointer transition hover:bg-green-400"
-                    >
-                      {{ t('setting.about.latest') }}
-                    </span>
-                  </a>
-                </span>
-              </dd>
-            </div>
-          </div>
-          <div v-if="systemEnv.FRONTEND_VERSION">
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.frontendVersion') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow flex flex-row items-center truncate">
-                  <code class="truncate">{{ systemEnv.FRONTEND_VERSION }}</code>
-                </span>
-              </dd>
-            </div>
-          </div>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.authVersion') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow flex flex-row items-center truncate">
-                  <code class="truncate">{{ systemEnv.AUTH_VERSION }}</code>
-                </span>
-              </dd>
-            </div>
-          </div>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.indexerVersion') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow flex flex-row items-center truncate">
-                  <code class="truncate">{{ systemEnv.INDEXER_VERSION }}</code>
-                </span>
-              </dd>
-            </div>
-          </div>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.configDir') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow undefined">
-                  <code>{{ systemEnv.CONFIG_DIR }}</code>
-                </span>
-              </dd>
-            </div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.dataDir') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow undefined"
-                  ><code>{{ t('setting.about.dataDirectory') }}</code></span
-                >
-              </dd>
-            </div>
-          </div>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.timezone') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow undefined">
-                  <code>{{ systemEnv.TZ }}</code>
-                </span>
-              </dd>
-            </div>
-          </div>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.supportingSites') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <div class="flex flex-col gap-2">
-                  <div class="flex flex-wrap gap-2 mt-1 ms-1">
-                    <VChip v-for="site in displayedSites" :key="site.name" variant="outlined" size="small">
-                      <span class="truncate max-w-32">{{ site.name }}</span>
-                    </VChip>
-                    <VChip
-                      v-if="!sitesExpanded && uniqueSupportingSites.length > 5"
-                      variant="tonal"
-                      size="small"
-                      @click="toggleSitesExpanded"
-                    >
-                      <span> {{ uniqueSupportingSites.length }}+ ...</span>
-                    </VChip>
-                    <VChip
-                      v-if="sitesExpanded && uniqueSupportingSites.length > 5"
-                      variant="tonal"
-                      size="small"
-                      @click="toggleSitesExpanded"
-                    >
-                      <span>< {{ t('setting.about.collapse') }}</span>
-                    </VChip>
+  <VDialog max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-information" class="me-2" />
+          {{ t('setting.about.title') }}
+        </VCardTitle>
+        <VDialogCloseBtn @click="emit('close')" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <div class="px-3">
+          <div class="section">
+            <div class="section border-gray-800">
+              <dl>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.softwareVersion') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow flex flex-row items-center truncate">
+                        <code class="truncate">{{ systemEnv.VERSION }}</code>
+                        <a
+                          v-if="latestRelease === systemEnv.VERSION"
+                          href="https://github.com/jxxghp/MoviePilot/releases"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <span
+                            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap bg-green-500 bg-opacity-80 border border-green-500 !text-green-100 ml-2 !cursor-pointer transition hover:bg-green-400"
+                          >
+                            {{ t('setting.about.latest') }}
+                          </span>
+                        </a>
+                      </span>
+                    </dd>
                   </div>
                 </div>
-              </dd>
+                <div v-if="systemEnv.FRONTEND_VERSION">
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.frontendVersion') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow flex flex-row items-center truncate">
+                        <code class="truncate">{{ systemEnv.FRONTEND_VERSION }}</code>
+                      </span>
+                    </dd>
+                  </div>
+                </div>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.authVersion') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow flex flex-row items-center truncate">
+                        <code class="truncate">{{ systemEnv.AUTH_VERSION }}</code>
+                      </span>
+                    </dd>
+                  </div>
+                </div>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.indexerVersion') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow flex flex-row items-center truncate">
+                        <code class="truncate">{{ systemEnv.INDEXER_VERSION }}</code>
+                      </span>
+                    </dd>
+                  </div>
+                </div>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.configDir') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow undefined">
+                        <code>{{ systemEnv.CONFIG_DIR }}</code>
+                      </span>
+                    </dd>
+                  </div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.dataDir') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow undefined"
+                        ><code>{{ t('setting.about.dataDirectory') }}</code></span
+                      >
+                    </dd>
+                  </div>
+                </div>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.timezone') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow undefined">
+                        <code>{{ systemEnv.TZ }}</code>
+                      </span>
+                    </dd>
+                  </div>
+                </div>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.supportingSites') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <div class="flex flex-col gap-2">
+                        <div class="flex flex-wrap gap-2 mt-1 ms-1">
+                          <VChip v-for="site in displayedSites" :key="site.name" variant="outlined" size="small">
+                            <span class="truncate max-w-32">{{ site.name }}</span>
+                          </VChip>
+                          <VChip
+                            v-if="!sitesExpanded && uniqueSupportingSites.length > 5"
+                            variant="tonal"
+                            size="small"
+                            @click="toggleSitesExpanded"
+                          >
+                            <span> {{ uniqueSupportingSites.length }}+ ...</span>
+                          </VChip>
+                          <VChip
+                            v-if="sitesExpanded && uniqueSupportingSites.length > 5"
+                            variant="tonal"
+                            size="small"
+                            @click="toggleSitesExpanded"
+                          >
+                            <span>< {{ t('setting.about.collapse') }}</span>
+                          </VChip>
+                        </div>
+                      </div>
+                    </dd>
+                  </div>
+                </div>
+              </dl>
             </div>
           </div>
-        </dl>
-      </div>
-    </div>
-    <div class="section">
-      <div>
-        <h3 class="heading">{{ t('setting.about.support') }}</h3>
-      </div>
-      <div class="section border-t border-gray-800">
-        <dl>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.documentation') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow undefined">
-                  <a
-                    href="https://movie-pilot.org"
-                    target="_blank"
-                    rel="noreferrer"
-                    class="text-indigo-500 transition duration-300 hover:underline"
+          <div class="section">
+            <div>
+              <h3 class="heading">{{ t('setting.about.support') }}</h3>
+            </div>
+            <div class="section border-t border-gray-800">
+              <dl>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.documentation') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow undefined">
+                        <a
+                          href="https://movie-pilot.org"
+                          target="_blank"
+                          rel="noreferrer"
+                          class="text-indigo-500 transition duration-300 hover:underline"
+                        >
+                          https://movie-pilot.org
+                        </a>
+                      </span>
+                    </dd>
+                  </div>
+                </div>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.feedback') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow undefined">
+                        <a
+                          href="https://github.com/jxxghp/MoviePilot/issues/new/choose"
+                          target="_blank"
+                          rel="noreferrer"
+                          class="text-indigo-500 transition duration-300 hover:underline"
+                        >
+                          https://github.com/jxxghp/MoviePilot/issues/new/choose
+                        </a>
+                      </span>
+                    </dd>
+                  </div>
+                </div>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.channel') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow undefined">
+                        <a
+                          href="https://t.me/moviepilot_channel"
+                          target="_blank"
+                          rel="noreferrer"
+                          class="text-indigo-500 transition duration-300 hover:underline"
+                        >
+                          https://t.me/moviepilot_channel
+                        </a>
+                      </span>
+                    </dd>
+                  </div>
+                </div>
+              </dl>
+            </div>
+          </div>
+          <div class="section">
+            <div>
+              <h3 class="heading">{{ t('setting.about.versions') }}</h3>
+              <div class="section space-y-3">
+                <div>
+                  <div
+                    v-for="release in allRelease"
+                    :key="release.tag_name"
+                    class="mb-3 flex w-full flex-col space-y-3 rounded-md px-4 py-2 ring-1 ring-gray-400 sm:flex-row sm:space-y-0 sm:space-x-3"
                   >
-                    https://movie-pilot.org
-                  </a>
-                </span>
-              </dd>
-            </div>
-          </div>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.feedback') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow undefined">
-                  <a
-                    href="https://github.com/jxxghp/MoviePilot/issues/new/choose"
-                    target="_blank"
-                    rel="noreferrer"
-                    class="text-indigo-500 transition duration-300 hover:underline"
-                  >
-                    https://github.com/jxxghp/MoviePilot/issues/new/choose
-                  </a>
-                </span>
-              </dd>
-            </div>
-          </div>
-          <div>
-            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">{{ t('setting.about.channel') }}</dt>
-              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                <span class="flex-grow undefined">
-                  <a
-                    href="https://t.me/moviepilot_channel"
-                    target="_blank"
-                    rel="noreferrer"
-                    class="text-indigo-500 transition duration-300 hover:underline"
-                  >
-                    https://t.me/moviepilot_channel
-                  </a>
-                </span>
-              </dd>
-            </div>
-          </div>
-        </dl>
-      </div>
-    </div>
-    <div class="section">
-      <div>
-        <h3 class="heading">{{ t('setting.about.versions') }}</h3>
-        <div class="section space-y-3">
-          <div>
-            <div
-              v-for="release in allRelease"
-              :key="release.tag_name"
-              class="mb-3 flex w-full flex-col space-y-3 rounded-md px-4 py-2 ring-1 ring-gray-400 sm:flex-row sm:space-y-0 sm:space-x-3"
-            >
-              <div class="flex w-full flex-grow items-center justify-start space-x-2 truncate sm:justify-start">
-                <span class="truncate text-lg font-bold">
-                  <span class="mr-2 whitespace-nowrap text-xs font-normal">{{
-                    releaseTime(release.published_at)
-                  }}</span>
-                  {{ release.tag_name }}
-                </span>
-                <span
-                  v-if="release.tag_name === latestRelease"
-                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-green-500 bg-opacity-80 border border-green-500 !text-green-100"
-                >
-                  {{ t('setting.about.latestVersion') }}
-                </span>
-                <span
-                  v-if="release.tag_name === systemEnv.VERSION"
-                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100"
-                >
-                  {{ t('setting.about.currentVersion') }}
-                </span>
+                    <div class="flex w-full flex-grow items-center justify-start space-x-2 truncate sm:justify-start">
+                      <span class="truncate text-lg font-bold">
+                        <span class="mr-2 whitespace-nowrap text-xs font-normal">{{
+                          releaseTime(release.published_at)
+                        }}</span>
+                        {{ release.tag_name }}
+                      </span>
+                      <span
+                        v-if="release.tag_name === latestRelease"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-green-500 bg-opacity-80 border border-green-500 !text-green-100"
+                      >
+                        {{ t('setting.about.latestVersion') }}
+                      </span>
+                      <span
+                        v-if="release.tag_name === systemEnv.VERSION"
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100"
+                      >
+                        {{ t('setting.about.currentVersion') }}
+                      </span>
+                    </div>
+                    <VBtn @click.stop="showReleaseDialog(release.tag_name, release.body)">
+                      <template #prepend>
+                        <VIcon icon="mdi-text-box-outline" />
+                      </template>
+                      {{ t('setting.about.viewChangelog') }}
+                    </VBtn>
+                  </div>
+                </div>
               </div>
-              <VBtn @click.stop="showReleaseDialog(release.tag_name, release.body)">
-                <template #prepend>
-                  <VIcon icon="mdi-text-box-outline" />
-                </template>
-                {{ t('setting.about.viewChangelog') }}
-              </VBtn>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
-    <VCard>
-      <VCardItem>
-        <VDialogCloseBtn @click="releaseDialog = false" />
-        <VCardTitle>{{ releaseDialogTitle }} {{ t('setting.about.changelog') }}</VCardTitle>
-      </VCardItem>
-      <VCardText v-html="releaseDialogBody" />
+      </VCardText>
     </VCard>
+    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+      <VCard>
+        <VCardItem>
+          <VDialogCloseBtn @click="releaseDialog = false" />
+          <VCardTitle>{{ releaseDialogTitle }} {{ t('setting.about.changelog') }}</VCardTitle>
+        </VCardItem>
+        <VCardText v-html="releaseDialogBody" />
+      </VCard>
+    </VDialog>
   </VDialog>
 </template>
 

src/layouts/components/ShortcutBar.vue

@@ -94,20 +94,6 @@ const shortcuts = [
     dialog: 'netTest',
     dialogRef: netTestDialog,
   },
-  {
-    title: t('shortcut.system.title'),
-    subtitle: t('shortcut.system.subtitle'),
-    icon: 'mdi-cog',
-    dialog: 'systemTest',
-    dialogRef: systemTestDialog,
-  },
-  {
-    title: t('shortcut.message.title'),
-    subtitle: t('shortcut.message.subtitle'),
-    icon: 'mdi-message',
-    dialog: 'message',
-    dialogRef: messageDialog,
-  },
   {
     title: t('shortcut.words.title'),
     subtitle: t('shortcut.words.subtitle'),
@@ -122,6 +108,20 @@ const shortcuts = [
     dialog: 'cache',
     dialogRef: cacheDialog,
   },
+  {
+    title: t('shortcut.system.title'),
+    subtitle: t('shortcut.system.subtitle'),
+    icon: 'mdi-cog',
+    dialog: 'systemTest',
+    dialogRef: systemTestDialog,
+  },
+  {
+    title: t('shortcut.message.title'),
+    subtitle: t('shortcut.message.subtitle'),
+    icon: 'mdi-message',
+    dialog: 'message',
+    dialogRef: messageDialog,
+  },
 ]
 
 // 打开对话框
@@ -388,6 +388,38 @@ onMounted(() => {
       </VCardText>
     </VCard>
   </VDialog>
+  <!-- 词表设置弹窗 -->
+  <VDialog v-if="wordsDialog" v-model="wordsDialog" max-width="60rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-file-word-box" class="me-2" />
+          {{ t('shortcut.words.subtitle') }}
+        </VCardTitle>
+        <VDialogCloseBtn @click="wordsDialog = false" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <WordsView />
+      </VCardText>
+    </VCard>
+  </VDialog>
+  <!-- 缓存管理弹窗 -->
+  <VDialog v-if="cacheDialog" v-model="cacheDialog" max-width="90rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-database" class="me-2" />
+          {{ t('shortcut.cache.subtitle') }}
+        </VCardTitle>
+        <VDialogCloseBtn @click="cacheDialog = false" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <CacheView />
+      </VCardText>
+    </VCard>
+  </VDialog>
   <!-- 系统健康检查弹窗 -->
   <VDialog
     v-if="systemTestDialog"
@@ -455,36 +487,4 @@ onMounted(() => {
       </VCardActions>
     </VCard>
   </VDialog>
-  <!-- 词表设置弹窗 -->
-  <VDialog v-if="wordsDialog" v-model="wordsDialog" max-width="60rem" scrollable :fullscreen="!display.mdAndUp.value">
-    <VCard>
-      <VCardItem>
-        <VCardTitle>
-          <VIcon icon="mdi-file-word-box" class="me-2" />
-          {{ t('shortcut.words.subtitle') }}
-        </VCardTitle>
-        <VDialogCloseBtn @click="wordsDialog = false" />
-      </VCardItem>
-      <VDivider />
-      <VCardText>
-        <WordsView />
-      </VCardText>
-    </VCard>
-  </VDialog>
-  <!-- 缓存管理弹窗 -->
-  <VDialog v-if="cacheDialog" v-model="cacheDialog" max-width="90rem" scrollable :fullscreen="!display.mdAndUp.value">
-    <VCard>
-      <VCardItem>
-        <VCardTitle>
-          <VIcon icon="mdi-database" class="me-2" />
-          {{ t('shortcut.cache.subtitle') }}
-        </VCardTitle>
-        <VDialogCloseBtn @click="cacheDialog = false" />
-      </VCardItem>
-      <VDivider />
-      <VCardText>
-        <CacheView />
-      </VCardText>
-    </VCard>
-  </VDialog>
 </template>

src/layouts/components/UserProfile.vue

@@ -796,21 +796,7 @@ onUnmounted(() => {
   </VDialog>
 
   <!-- 关于对话框 -->
-  <VDialog v-if="aboutDialog" v-model="aboutDialog" max-width="50rem" scrollable>
-    <VCard>
-      <VCardItem>
-        <VCardTitle>
-          <VIcon icon="mdi-information" class="me-2" />
-          {{ t('setting.about.title') }}
-        </VCardTitle>
-        <VDialogCloseBtn @click="aboutDialog = false" />
-      </VCardItem>
-      <VDivider />
-      <VCardText>
-        <AboutDialog />
-      </VCardText>
-    </VCard>
-  </VDialog>
+  <AboutDialog v-if="aboutDialog" v-model="aboutDialog" @close="aboutDialog = false" />
 </template>
 
 <style lang="scss" scoped>

src/locales/en-US.ts

@@ -1723,6 +1723,8 @@ export default {
     cache: {
       title: 'Cache Management',
       subtitle: 'Manage torrent cache data',
+      totalCount: 'Total Count',
+      siteCount: 'Site Count',
       filterByTitle: 'Filter by Title',
       filterBySite: 'Filter by Site',
       selectSite: 'Select Site',

src/locales/zh-CN.ts

@@ -1699,6 +1699,8 @@ export default {
     cache: {
       title: '缓存管理',
       subtitle: '管理缓存的站点资源',
+      totalCount: '总条数',
+      siteCount: '站点数',
       filterByTitle: '按标题筛选',
       filterBySite: '按站点筛选',
       selectSite: '选择站点',

src/pages/setup.vue

@@ -42,7 +42,7 @@ onMounted(async () => {
     <div class="setup-wizard-header">
       <div class="d-flex align-center justify-space-between">
         <!-- 左侧占位 -->
-        <div style="inline-size: 72px"></div>
+        <div v-if="display.mdAndUp.value" style="inline-size: 96px"></div>
 
         <!-- 中间标题 -->
         <div class="d-flex align-center text-center">
@@ -53,7 +53,7 @@ onMounted(async () => {
         </div>
 
         <!-- 右侧按钮组 -->
-        <div class="d-flex gap-2">
+        <div v-if="display.mdAndUp.value" class="d-flex gap-2 px-3">
           <VBtn
             variant="text"
             icon="mdi-cog"
@@ -67,8 +67,8 @@ onMounted(async () => {
     </div>
 
     <!-- 向导内容 -->
-    <VCard max-width="800px" class="mx-auto my-7">
-      <VCardText>
+    <VCard max-width="800px" class="mx-auto my-5">
+      <VCardText class="px-1">
         <!-- 加载状态 -->
         <div v-if="isLoading" class="d-flex flex-column align-center justify-center py-16">
           <VProgressCircular indeterminate color="primary" size="64" class="mb-4" />
@@ -185,7 +185,6 @@ onMounted(async () => {
   border-block-end: 1px solid rgb(var(--v-theme-outline-variant));
   box-shadow: 0 0 5px rgba(0, 0, 0, 4%);
   inset-block-start: 0;
-  padding-block: 16px;
-  padding-inline: 24px;
+  padding-block: calc(16px + env(safe-area-inset-top)) 16px;
 }
 </style>

src/views/system/CacheView.vue

@@ -233,13 +233,37 @@ onMounted(() => {
 
 <template>
   <div>
-    <!-- 工具栏操作按钮 -->
+    <!-- 工具栏统计信息和操作按钮 -->
     <VCard class="mb-4">
       <VCardItem>
-        <VCardTitle>{{ t('setting.cache.title') }}</VCardTitle>
-        <VCardSubtitle>{{ t('setting.cache.subtitle') }}</VCardSubtitle>
+        <div class="d-flex align-center justify-space-between w-100">
+          <!-- 左侧统计信息 -->
+          <div class="d-flex align-center gap-6">
+            <!-- 统计信息卡片 -->
+            <div class="d-flex gap-4">
+              <VCard variant="tonal" color="primary" class="pa-3">
+                <div class="d-flex align-center gap-2">
+                  <VIcon color="primary">mdi-database</VIcon>
+                  <div>
+                    <div class="text-h6 font-weight-bold">{{ cacheData.count }}</div>
+                    <div class="text-caption text-medium-emphasis">{{ t('setting.cache.totalCount') }}</div>
+                  </div>
+                </div>
+              </VCard>
 
-        <template #append>
+              <VCard variant="tonal" color="success" class="pa-3">
+                <div class="d-flex align-center gap-2">
+                  <VIcon color="success">mdi-web</VIcon>
+                  <div>
+                    <div class="text-h6 font-weight-bold">{{ cacheData.sites }}</div>
+                    <div class="text-caption text-medium-emphasis">{{ t('setting.cache.siteCount') }}</div>
+                  </div>
+                </div>
+              </VCard>
+            </div>
+          </div>
+
+          <!-- 右侧操作按钮 -->
           <div class="d-flex gap-2">
             <VBtn icon color="primary" :loading="loading" @click="refreshCache">
               <VIcon>mdi-refresh</VIcon>
@@ -264,7 +288,7 @@ onMounted(() => {
               <VTooltip activator="parent" location="bottom">{{ t('setting.cache.clearAll') }}</VTooltip>
             </VBtn>
           </div>
-        </template>
+        </div>
       </VCardItem>
     </VCard>