优化主题切换器和用户通知组件样式，添加文件大小显示，调整布局和样式变量

2026-07-12 16:01:35 +08:00 · 2025-04-08 13:32:36 +08:00
parent 34a33f87b2
commit 6e1503334e
7 changed files with 87 additions and 65 deletions
--- a/src/@core/components/ThemeSwitcher.vue
+++ b/src/@core/components/ThemeSwitcher.vue
@@ -196,9 +196,9 @@ onMounted(() => {
      </IconBtn>
    </template>
    <VList elevation="0" class="theme-switcher-list">
-      <div class="theme-switcher-header py-1 mb-2">
+      <VCardItem class="theme-switcher-header">
        <VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle>
-      </div>
+      </VCardItem>

      <div class="theme-switcher-options px-2">
        <VListItem
@@ -258,7 +258,10 @@ onMounted(() => {

 <style lang="scss">
 .theme-switcher-header {
-  border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
+  border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  padding-block: 12px;
+  padding-inline: 16px;
 }

 .theme-switcher-options {
--- a/src/@layouts/components/VerticalNavLayout.vue
+++ b/src/@layouts/components/VerticalNavLayout.vue
@@ -101,6 +101,13 @@ export default defineComponent({
@use '@layouts/styles/placeholders';
@use '@layouts/styles/mixins';

+.layout-page-content {
+  position: relative;
+  z-index: 1;
+  margin-block-start: 0;
+  padding-block-start: 0;
+}
+
 .layout-wrapper.layout-nav-type-vertical {
  // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
  block-size: 100%;
@@ -208,11 +215,4 @@ export default defineComponent({
    padding-inline-start: 0;
  }
 }
-
-.layout-page-content {
-  position: relative;
-  z-index: 1;
-  margin-block-start: calc(variables.$layout-vertical-nav-navbar-height - 42px);
-  padding-block-start: 0;
-}
 </style>
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -188,6 +188,8 @@ export interface TransferHistory {
  errmsg?: string
  // 日期
  date?: string
+  // 源文件项
+  src_fileitem?: FileItem
 }

 // 媒体信息
--- a/src/layouts/components/UserNotification.vue
+++ b/src/layouts/components/UserNotification.vue
@@ -106,8 +106,10 @@ onBeforeUnmount(() => {

 <style lang="scss" scoped>
 .notification-header {
-  padding: 16px;
+  background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
  border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  padding-block: 12px;
+  padding-inline: 16px;
 }

 .notification-list {
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -86,7 +86,7 @@ const userLevel = computed(() => userStore.level)
    <VImg :src="avatar" />

    <VMenu activator="parent" width="230" location="bottom end" offset="14px" class="user-menu">
-      <VList elevation="0" class="user-profile-list px-2">
+      <VList elevation="0" class="overflow-hidden">
        <!-- 👉 User Avatar & Name -->
        <div class="user-profile-header px-2 py-4 mb-2">
          <div class="d-flex align-center">
@@ -103,59 +103,59 @@ const userLevel = computed(() => userStore.level)
            </div>
          </div>
        </div>
+        <div class="px-2">
+          <!-- 👉 Profile -->
+          <VListItem link @click="router.push('/profile')" class="user-menu-item mb-1">
+            <template #prepend>
+              <div class="user-menu-icon">
+                <VIcon icon="mdi-account-outline" />
+              </div>
+            </template>
+            <VListItemTitle>个人信息</VListItemTitle>
+          </VListItem>

-        <!-- 👉 Profile -->
-        <VListItem link @click="router.push('/profile')" class="user-menu-item mb-1">
-          <template #prepend>
-            <div class="user-menu-icon">
-              <VIcon icon="mdi-account-outline" />
-            </div>
-          </template>
-          <VListItemTitle>个人信息</VListItemTitle>
-        </VListItem>
+          <VListItem link @click="router.push('/apps')" class="user-menu-item mb-1">
+            <template #prepend>
+              <div class="user-menu-icon">
+                <VIcon icon="mdi-view-grid-outline" />
+              </div>
+            </template>
+            <VListItemTitle>功能视图</VListItemTitle>
+          </VListItem>

-        <VListItem link @click="router.push('/apps')" class="user-menu-item mb-1">
-          <template #prepend>
-            <div class="user-menu-icon">
-              <VIcon icon="mdi-view-grid-outline" />
-            </div>
-          </template>
-          <VListItemTitle>功能视图</VListItemTitle>
-        </VListItem>
+          <!-- 👉 Site Auth -->
+          <VListItem v-if="userLevel < 2 && superUser" link @click="showSiteAuthDialog" class="user-menu-item mb-1">
+            <template #prepend>
+              <div class="user-menu-icon">
+                <VIcon icon="mdi-lock-check-outline" />
+              </div>
+            </template>
+            <VListItemTitle>用户认证</VListItemTitle>
+          </VListItem>

-        <!-- 👉 Site Auth -->
-        <VListItem v-if="userLevel < 2 && superUser" link @click="showSiteAuthDialog" class="user-menu-item mb-1">
-          <template #prepend>
-            <div class="user-menu-icon">
-              <VIcon icon="mdi-lock-check-outline" />
-            </div>
-          </template>
-          <VListItemTitle>用户认证</VListItemTitle>
-        </VListItem>
+          <!-- 👉 FAQ -->
+          <VListItem href="https://wiki.movie-pilot.org" target="_blank" class="user-menu-item mb-1">
+            <template #prepend>
+              <div class="user-menu-icon">
+                <VIcon icon="mdi-help-circle-outline" />
+              </div>
+            </template>
+            <VListItemTitle>帮助文档</VListItemTitle>
+          </VListItem>

-        <!-- 👉 FAQ -->
-        <VListItem href="https://wiki.movie-pilot.org" target="_blank" class="user-menu-item mb-1">
-          <template #prepend>
-            <div class="user-menu-icon">
-              <VIcon icon="mdi-help-circle-outline" />
-            </div>
-          </template>
-          <VListItemTitle>帮助文档</VListItemTitle>
-        </VListItem>
-
-        <!-- Divider -->
-        <VDivider v-if="superUser" class="my-3" />
-
-        <!-- 👉 restart -->
-        <VListItem v-if="superUser" @click="showRestartDialog" class="user-menu-item mb-1">
-          <template #prepend>
-            <div class="user-menu-icon restart-icon">
-              <VIcon icon="mdi-restart" />
-            </div>
-          </template>
-          <VListItemTitle>重启</VListItemTitle>
-        </VListItem>
+          <!-- Divider -->
+          <VDivider v-if="superUser" class="my-3" />

+          <!-- 👉 restart -->
+          <VListItem v-if="superUser" @click="showRestartDialog" class="user-menu-item mb-1">
+            <template #prepend>
+              <div class="user-menu-icon restart-icon">
+                <VIcon icon="mdi-restart" />
+              </div>
+            </template>
+            <VListItemTitle>重启</VListItemTitle>
+          </VListItem>
+        </div>
        <!-- 👉 Logout -->
        <div class="px-2 mt-3 mb-2">
          <VBtn color="error" block class="logout-btn" @click="logout">
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -285,7 +285,7 @@ html.v-overlay-scroll-blocked body {
 }

 .v-overlay__content .v-list{
-  padding: 4px !important;
+  padding: 0;
  margin: 0 !important;
  background-color: rgb(var(--v-theme-surface)) !important;
 }
--- a/src/views/reorganize/TransferHistoryView.vue
+++ b/src/views/reorganize/TransferHistoryView.vue
@@ -10,6 +10,7 @@ import { useRoute } from 'vue-router'
 import router from '@/router'
 import { useDisplay } from 'vuetify'
 import { storageDict } from '@/api/constants'
+import { formatFileSize } from '@/@core/utils/formatters'

 // APP
 const display = useDisplay()
@@ -57,6 +58,11 @@ const headers = [
    key: 'mode',
    sortable: true,
  },
+  {
+    title: '大小',
+    key: 'size',
+    sortable: true,
+  },
  {
    title: '时间',
    key: 'date',
@@ -91,6 +97,11 @@ const groupHeaders = [
    key: 'mode',
    sortable: true,
  },
+  {
+    title: '大小',
+    key: 'size',
+    sortable: true,
+  },
  {
    title: '时间',
    key: 'date',
@@ -415,7 +426,7 @@ onMounted(fetchData)
 </script>

 <template>
-  <VCard>
+  <VCard class="bg-transparent">
    <VCardItem>
      <VCardTitle>
        <VRow>
@@ -523,6 +534,9 @@ onMounted(fetchData)
          </template>
        </VTooltip>
      </template>
+      <template #item.size="{ item }">
+        <small>{{ formatFileSize(item?.src_fileitem?.size || 0) }}</small>
+      </template>
      <template #item.date="{ item }">
        <small>{{ item?.date }}</small>
      </template>
@@ -607,6 +621,9 @@ onMounted(fetchData)
          </template>
        </VTooltip>
      </template>
+      <template #item.size="{ item }">
+        <small>{{ formatFileSize(item?.src_fileitem?.size || 0) }}</small>
+      </template>
      <template #item.date="{ item }">
        <small>{{ item?.date }}</small>
      </template>
@@ -633,11 +650,9 @@ onMounted(fetchData)
      </template>
      <template #no-data> 没有数据 </template>
    </VDataTableVirtual>
-    <!-- 分页 -->
-    <VDivider />
    <div class="flex items-center justify-between">
      <div class="w-auto">
-        <VSelect v-model="itemsPerPage" :items="pageRange" density="compact" variant="solo" flat />
+        <VSelect v-model="itemsPerPage" :items="pageRange" density="compact" variant="plain" flat />
      </div>
      <div class="w-auto text-sm">{{ pageTip.begin }} - {{ pageTip.end }} / {{ totalItems }}</div>
      <VPagination