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

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,6 +123,17 @@ onMounted(() => {
 </script>
 
 <template>
+  <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">
@@ -335,6 +353,8 @@ onMounted(() => {
             </div>
           </div>
         </div>
+      </VCardText>
+    </VCard>
     <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
       <VCard>
         <VCardItem>
@@ -344,6 +364,7 @@ onMounted(() => {
         <VCardText v-html="releaseDialogBody" />
       </VCard>
     </VDialog>
+  </VDialog>
 </template>
 
 <style type="scss" scoped>

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>
+  <AboutDialog v-if="aboutDialog" v-model="aboutDialog" @close="aboutDialog = false" />
-    <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>
 </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">
+    <VCard max-width="800px" class="mx-auto my-5">
-      <VCardText>
+      <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-block: calc(16px + env(safe-area-inset-top)) 16px;
-  padding-inline: 24px;
 }
 </style>

src/views/system/CacheView.vue

@@ -233,13 +233,37 @@ onMounted(() => {
 
 <template>
   <div>
-    <!-- 工具栏操作按钮 -->
+    <!-- 工具栏统计信息和操作按钮 -->
     <VCard class="mb-4">
       <VCardItem>
-        <VCardTitle>{{ t('setting.cache.title') }}</VCardTitle>
+        <div class="d-flex align-center justify-space-between w-100">
-        <VCardSubtitle>{{ t('setting.cache.subtitle') }}</VCardSubtitle>
+          <!-- 左侧统计信息 -->
+          <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>