更新 Vuetify 默认设置，修改菜单图标，调整样式变量，优化用户资料组件样式

src/@core/components/ThemeSwitcher.vue

@@ -196,14 +196,14 @@ onMounted(() => {
       </IconBtn>
     </template>
     <VList elevation="0" class="theme-switcher-list">
-      <div class="theme-switcher-header px-3 py-3 mb-2">
+      <div class="theme-switcher-header py-1 mb-2">
-        <div class="text-primary text-h6 font-weight-medium">主题选择</div>
+        <VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle>
       </div>
-      
+
       <div class="theme-switcher-options px-2">
-        <VListItem 
+        <VListItem
-          v-for="theme in props.themes" 
+          v-for="theme in props.themes"
-          :key="theme.name" 
+          :key="theme.name"
           @click="changeTheme(theme.name)"
           class="theme-option"
           :class="{ 'theme-option-active': currentThemeName === theme.name }"
@@ -218,9 +218,9 @@ onMounted(() => {
             <VIcon icon="mdi-check" color="primary" size="small" />
           </template>
         </VListItem>
-        
+
         <VDivider class="my-2" />
-        
+
         <VListItem @click="cssDialog = true" class="theme-option custom-theme-option">
           <template #prepend>
             <div class="theme-icon-wrapper custom-theme-icon">
@@ -258,24 +258,25 @@ onMounted(() => {
 
 <style lang="scss">
 .theme-switcher-header {
-  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
 }
 
 .theme-switcher-options {
-  max-height: 300px;
+  max-block-size: 300px;
   overflow-y: auto;
 }
 
 .theme-option {
   border-radius: 8px;
-  margin: 4px 0;
+  margin-block: 4px;
+  margin-inline: 0;
   transition: all 0.2s ease;
-  
+
   &:hover {
     background-color: rgba(var(--v-theme-primary), 0.04);
     transform: translateX(4px);
   }
-  
+
   &.theme-option-active {
     background-color: rgba(var(--v-theme-primary), 0.08);
   }
@@ -285,13 +286,13 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
   border-radius: 8px;
   background-color: rgba(var(--v-theme-primary), 0.08);
-  margin-right: 12px;
+  block-size: 36px;
+  inline-size: 36px;
+  margin-inline-end: 12px;
   transition: all 0.2s ease;
-  
+
   .v-icon {
     color: rgba(var(--v-theme-primary), 0.9);
   }
@@ -299,7 +300,7 @@ onMounted(() => {
 
 .custom-theme-icon {
   background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.15), rgba(var(--v-theme-info), 0.15));
-  
+
   .v-icon {
     color: rgba(var(--v-theme-primary), 0.9);
   }
@@ -309,15 +310,16 @@ onMounted(() => {
 .app-copy {
   position: fixed !important;
   z-index: -1 !important;
-  pointer-events: none !important;
-  contain: size style !important;
   overflow: clip !important;
+  contain: size style !important;
+  pointer-events: none !important;
 }
 
 .app-transition {
   --clip-size: 0;
   --clip-pos: 0 0;
+
   clip-path: circle(var(--clip-size) at var(--clip-pos));
-  transition: clip-path .35s ease-out;
+  transition: clip-path 0.35s ease-out;
 }
 </style>

src/@core/scss/base/_default-layout-w-vertical-nav.scss

@@ -18,9 +18,6 @@ $header: ".layout-navbar";
     // Add transition
     #{$header} {
       transition: padding 0.2s ease, background-color 0.18s ease;
-      @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
-      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
-      margin-bottom: 16px;
     }
 
     // If navbar is contained => Add border radius to header
@@ -30,20 +27,21 @@ $header: ".layout-navbar";
       }
     }
 
-    .navbar-blur#{$header} {
+    // Scrolled styles for sticky navbar
-      @extend %blurry-bg;
-    }
-
-    // Scrolled styles for sticky navbar (保留原有逻辑，但现在默认就会显示)
     @at-root {
+      /* ℹ️ This html selector with not selector is required when:
+        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
+    */
       html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-fixed,
       &.window-scrolled.layout-navbar-fixed {
+
         #{$header} {
-          // 原有样式已在上面默认应用
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
         }
 
         .navbar-blur#{$header} {
-          // 原有样式已在上面默认应用
+          @extend %blurry-bg;
         }
       }
     }
@@ -58,12 +56,19 @@ $header: ".layout-navbar";
       }
     }
 
+    &:not(.layout-navbar-fixed) {
+      #{$header} {
+        margin-block-start: variables.$vertical-nav-floating-navbar-top;
+      }
+    }
+
     #{$header} {
       @if variables.$layout-vertical-nav-navbar-is-contained {
         border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
       }
 
       background-color: rgb(var(--v-theme-surface));
+
       @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
     }
 

src/@core/scss/base/_variables.scss

@@ -40,7 +40,7 @@ $theme-colors-name: (
 $default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
 
 // 👉 Vertical nav
-$vertical-nav-background-color-rgb: var(--v-theme-surface) !default;
+$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
 $vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
 
 // ℹ️ This is used to keep consistency between nav items and nav header left & right margin

src/@core/scss/base/_vertical-nav.scss

@@ -12,6 +12,7 @@
 
     @extend %nav;
 
+
     @at-root {
       // ℹ️ Add styles for collapsed vertical nav
       .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
@@ -19,7 +20,7 @@
       }
     }
 
-    background-color: rgb(var(--v-theme-surface)) !important;
+    background-color: variables.$vertical-nav-background-color;
 
     // 👉 Nav header
     .nav-header {
@@ -85,8 +86,8 @@
     }
 
     .ps__rail-y {
-      // ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
+      // ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow;Settingz-indexSettingz-indexSettingz-indexSettingz-index
-      z-index: 1;
+      z-index: 1z-indexz-indexz-index
     }
 
     // 👉 Nav section title

src/@core/scss/base/placeholders/_default-layout-vertical-nav.scss

@@ -4,13 +4,10 @@
 
 %default-layout-vertical-nav-scrolled-sticky-elevated-nav {
   background-color: rgb(var(--v-theme-surface));
-  border-radius: 12px;
-  margin: 8px 8px 8px 0;
 }
 
 %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
   @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
-  box-shadow: 0 4px 16px rgba(var(--v-theme-on-surface), 0.08);
 
   // If navbar is contained => Squeeze navbar content on scroll
   @if variables.$layout-vertical-nav-navbar-is-contained {

src/@core/scss/template/_placeholders.scss

@@ -1,17 +0,0 @@
-// 更新顶栏浮动风格的样式，增强豆腐块效果
-%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
-  padding-block: 0.7rem;
-  background-color: rgb(var(--v-theme-surface));
-  box-shadow: 0 4px 16px rgba(var(--v-theme-on-surface), 0.06) !important;
-  border-radius: 12px;
-  margin: 8px 8px 0 0;
-  width: 100%;
-  z-index: 10;
-  position: relative;
-}
-
-// 更新毛玻璃背景效果
-%blurry-bg {
-  background-color: rgba(var(--v-theme-surface), 0.9) !important;
-  backdrop-filter: blur(6px);
-} 

src/@layouts/components/VerticalNav.vue

@@ -59,9 +59,6 @@ function handleNavScroll(evt: Event) {
         </RouterLink>
       </slot>
     </div>
-    <slot name="before-nav-items">
-      <div class="vertical-nav-items-shadow" />
-    </slot>
     <slot name="nav-items" :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled">
       <PerfectScrollbar
         tag="ul"
@@ -98,11 +95,6 @@ function handleNavScroll(evt: Event) {
   transition: transform 0.25s ease-in-out, inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
   visibility: hidden;
   will-change: transform, inline-size;
-  background-color: rgb(var(--v-theme-surface));
-  box-shadow: 0 2px 8px rgba(var(--v-theme-on-surface), 0.08);
-  border-radius: 0 8px 8px 0;
-  margin: 8px 0 8px 8px;
-  max-height: calc(100% - 16px);
 
   &:not(.overlay-nav) {
     visibility: visible;

src/@layouts/components/VerticalNavLayout.vue

@@ -116,8 +116,8 @@ export default defineComponent({
 
   .layout-navbar {
     position: fixed;
-    width: calc(100vw - variables.$layout-vertical-nav-width - 1rem);
     z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
+    inline-size: calc(100vw - variables.$layout-vertical-nav-width - 1rem);
     inset-block-start: 0;
 
     .navbar-content-container {
@@ -203,16 +203,16 @@ export default defineComponent({
 
 .layout-wrapper.layout-nav-type-vertical.layout-overlay-nav {
   .layout-navbar {
-    width: calc(100% - 0px);
+    inline-size: calc(100% - 0px);
-    margin-left: 8px;
+    margin-inline-start: 8px;
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
 
 .layout-page-content {
-  margin-top: calc(variables.$layout-vertical-nav-navbar-height - 42px);
-  padding-top: 0px;
   position: relative;
   z-index: 1;
+  margin-block-start: calc(variables.$layout-vertical-nav-navbar-height - 42px);
+  padding-block-start: 0;
 }
-</style>
+</style>

src/@layouts/styles/_default-layout.scss

@@ -5,61 +5,60 @@
 @use "@configured-variables" as variables;
 
 html {
-  min-height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
   background: rgb(var(--v-theme-background));
+  min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
   overflow-y: overlay;
 }
 
 body {
-  overscroll-behavior-y: contain;
-  --webkit-overflow-scrolling: touch;
   background: rgb(var(--v-theme-background));
+  overscroll-behavior-y: contain;
+
+  --webkit-overflow-scrolling: touch;
 }
 
 body,
 #app,
 .v-application {
-  min-height: 100%;
+  min-block-size: 100%;
 }
 
 .layout-vertical-nav {
-  padding-top: env(safe-area-inset-top);
+  padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
 }
 
 .navbar-content-container {
-  padding-top: env(safe-area-inset-top);
+  padding-block-start: env(safe-area-inset-top);
 }
 
 .layout-page-content {
   @include mixins.boxed-content(true);
 
-  flex-grow: 1;
   overflow: hidden;
-  // TODO: Use grid gutter variable here
+  flex-grow: 1;
+
+  // TODO: Use grid gutter variable here;
   padding-block: 1.5rem;
-  padding-top: calc(env(safe-area-inset-top) + 4.25rem);
+  padding-block-start: calc(env(safe-area-inset-top) + 4.25rem);
-  // display: flex;
+
-  background-color: rgb(var(--v-theme-background));
+  // display: flex;display
+
 
   .page-content-container {
-    // flex: 1;
+    // flex: 1;flex
     display: flex;
-    background-color: rgb(var(--v-theme-background));
 
     & > div:first-child {
-      flex: auto;
       position: relative;
-      width: calc(100vw - variables.$layout-vertical-nav-width - 0.5rem);
+      flex: auto;
-      background-color: rgb(var(--v-theme-background));
+      inline-size: calc(100vw - variables.$layout-vertical-nav-width - 0.5rem);
     }
   }
 }
 
-@media screen and (max-width: 1280px){
+@media screen and (width <= 1280px){
   .page-content-container > div:first-child  {
-    width: calc(100vw - 1rem) !important;
+    inline-size: calc(100vw - 1rem) !important;
-    background-color: rgb(var(--v-theme-background));
   }
 }
 
@@ -69,7 +68,7 @@ body,
   }
 
   .footer-content-container-noheight {
-    block-size: 0px !important;
+    block-size: 0 !important;
   }
 
   .layout-footer-sticky & {

src/layouts/components/ShortcutBar.vue

@@ -111,8 +111,8 @@ onMounted(() => {
     location="top end"
     origin="top end"
     transition="scale-transition"
-    :close-on-content-click="false"
+    close-on-content-click
-    :close-on-back="true"
+    close-on-back
   >
     <!-- Menu Activator -->
     <template #activator="{ props }">
@@ -302,20 +302,19 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .shortcut-menu-card {
-  border-radius: 16px;
   overflow: hidden;
-  box-shadow: 0 8px 30px rgba(var(--v-theme-on-surface), 0.12), 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
 }
 
 .shortcut-header {
   background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
-  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  padding: 12px 16px;
+  padding-block: 12px;
+  padding-inline: 16px;
 }
 
 .shortcut-close-btn {
   transition: transform 0.3s ease;
+
   &:hover {
     transform: rotate(90deg);
   }
@@ -327,58 +326,54 @@ onMounted(() => {
 
 .shortcut-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
   gap: 16px;
+  grid-template-columns: repeat(2, 1fr);
 }
 
 .shortcut-item {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  border-radius: 12px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-  background-color: rgba(var(--v-theme-surface));
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
   position: relative;
   z-index: 1;
+  display: flex;
   overflow: hidden;
-  
+  align-items: center;
+  padding: 16px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  border-radius: 12px;
+  background-color: rgba(var(--v-theme-surface));
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
   &::before {
-    content: '';
     position: absolute;
     z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.08) 0%, rgba(var(--v-theme-primary), 0) 60%);
+    content: '';
+    inset: 0;
     opacity: 0;
     transition: opacity 0.3s ease;
   }
-  
+
   &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 6px 20px rgba(var(--v-theme-on-surface), 0.12);
     border-color: rgba(var(--v-theme-primary), 0.15);
-    
+    transform: translateY(-4px);
+
     &::before {
       opacity: 1;
     }
-    
+
     .shortcut-icon-wrapper {
-      transform: scale(1.1);
       background-color: rgba(var(--v-theme-primary), 0.12);
-      
+      transform: scale(1.1);
+
       .v-icon {
         transform: scale(1.2);
       }
     }
   }
-  
+
   &:active {
-    transform: translateY(0);
     box-shadow: 0 3px 10px rgba(var(--v-theme-on-surface), 0.08);
+    transform: translateY(0);
   }
 }
 
@@ -386,16 +381,16 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
   border-radius: 12px;
   background-color: rgba(var(--v-theme-primary), 0.08);
-  margin-right: 16px;
+  block-size: 48px;
+  inline-size: 48px;
+  margin-inline-end: 16px;
   transition: all 0.3s ease;
-  
+
   .v-icon {
-    transition: transform 0.3s ease;
     color: rgba(var(--v-theme-primary), 1);
+    transition: transform 0.3s ease;
   }
 }
 
@@ -404,14 +399,14 @@ onMounted(() => {
 }
 
 .shortcut-title {
-  font-weight: 600;
-  font-size: 1rem;
-  margin-bottom: 4px;
   color: rgba(var(--v-theme-on-surface), 0.95);
+  font-size: 1rem;
+  font-weight: 600;
+  margin-block-end: 4px;
 }
 
 .shortcut-subtitle {
-  font-size: 0.8rem;
   color: rgba(var(--v-theme-on-surface), 0.7);
+  font-size: 0.8rem;
 }
 </style>

src/layouts/components/UserNotification.vue

@@ -40,76 +40,6 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.notification-header {
-  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  padding: 16px;
-  
-  .v-card-title {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: rgba(var(--v-theme-primary), 0.9);
-  }
-}
-
-.notification-list {
-  max-height: 500px;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.notification-item {
-  border-radius: 12px;
-  margin-bottom: 8px;
-  transition: all 0.2s ease;
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
-  
-  &:hover {
-    background-color: rgba(var(--v-theme-primary), 0.03);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(var(--v-theme-on-surface), 0.06);
-  }
-  
-  .notification-avatar {
-    background-color: rgba(var(--v-theme-primary), 0.1);
-    box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.15);
-  }
-  
-  .notification-title {
-    font-weight: 600;
-    font-size: 0.95rem;
-  }
-  
-  .notification-text {
-    font-size: 0.85rem;
-    color: rgba(var(--v-theme-on-surface), 0.75);
-    margin-top: 6px;
-  }
-  
-  .notification-time {
-    font-size: 0.8rem;
-    color: rgba(var(--v-theme-primary), 0.8);
-    margin-top: 6px;
-  }
-}
-
-.no-notification {
-  padding: 30px 0;
-  color: rgba(var(--v-theme-on-surface), 0.6);
-  font-size: 0.95rem;
-}
-
-.mark-read-btn {
-  transition: all 0.2s ease;
-  border-radius: 8px;
-  
-  &:hover {
-    background-color: rgba(var(--v-theme-primary), 0.1);
-    transform: scale(1.05);
-  }
-}
-</style>
-
 <template>
   <VMenu v-model="appsMenu" width="400" transition="scale-transition" close-on-content-click class="notification-menu">
     <!-- Menu Activator -->
@@ -126,7 +56,7 @@ onBeforeUnmount(() => {
     <!-- Menu Content -->
     <VCard elevation="0">
       <VCardItem class="notification-header">
-        <VCardTitle>通知中心</VCardTitle>
+        <VCardTitle class="font-weight-medium text-primary">通知中心</VCardTitle>
         <template #append>
           <VTooltip text="设为已读">
             <template #activator="{ props }">
@@ -173,3 +103,72 @@ onBeforeUnmount(() => {
     </VCard>
   </VMenu>
 </template>
+
+<style lang="scss" scoped>
+.notification-header {
+  padding: 16px;
+  border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.notification-list {
+  padding: 8px;
+  max-block-size: 500px;
+  overflow-y: auto;
+}
+
+.notification-item {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  border-radius: 12px;
+  margin-block-end: 8px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(var(--v-theme-primary), 0.03);
+    box-shadow: 0 4px 8px rgba(var(--v-theme-on-surface), 0.06);
+    transform: translateY(-2px);
+  }
+
+  .notification-avatar {
+    background-color: rgba(var(--v-theme-primary), 0.1);
+    box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.15);
+  }
+
+  .notification-title {
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+
+  .notification-text {
+    color: rgba(var(--v-theme-on-surface), 0.75);
+    font-size: 0.85rem;
+    margin-block-start: 6px;
+  }
+
+  .notification-time {
+    color: rgba(var(--v-theme-primary), 0.8);
+    font-size: 0.8rem;
+    margin-block-start: 6px;
+  }
+}
+
+.no-notification {
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  font-size: 0.95rem;
+  padding-block: 30px;
+  padding-inline: 0;
+}
+
+.mark-read-btn {
+  border-radius: 8px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(var(--v-theme-primary), 0.1);
+    transform: scale(1.05);
+  }
+}
+
+.notification-menu .v-overlay__content {
+  overflow: hidden;
+}
+</style>

src/layouts/components/UserProfile.vue

@@ -197,32 +197,32 @@ const userLevel = computed(() => userStore.level)
 <style lang="scss" scoped>
 .user-profile-header {
   background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.05), rgba(var(--v-theme-primary), 0.02));
-  border-radius: 12px;
 }
 
 .user-role {
-  font-size: 0.875rem;
   color: rgba(var(--v-theme-primary), 0.9);
+  font-size: 0.875rem;
   font-weight: 500;
-  margin-bottom: 4px;
+  margin-block-end: 4px;
 }
 
 .user-name {
+  color: rgba(var(--v-theme-on-surface), 0.9);
   font-size: 1.125rem;
   font-weight: 600;
-  color: rgba(var(--v-theme-on-surface), 0.9);
 }
 
 .user-avatar {
-  box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.2);
   border: 2px solid rgba(var(--v-theme-on-surface), 0.1);
+  box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.2);
 }
 
 .user-menu-item {
   border-radius: 8px;
-  margin: 4px 0;
+  margin-block: 4px;
+  margin-inline: 0;
   transition: all 0.2s ease;
-  
+
   &:hover {
     background-color: rgba(var(--v-theme-primary), 0.06);
     transform: translateX(4px);
@@ -233,13 +233,13 @@ const userLevel = computed(() => userStore.level)
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
   border-radius: 8px;
   background-color: rgba(var(--v-theme-primary), 0.08);
-  margin-right: 12px;
+  block-size: 36px;
+  inline-size: 36px;
+  margin-inline-end: 12px;
   transition: all 0.2s ease;
-  
+
   .v-icon {
     color: rgba(var(--v-theme-primary), 0.9);
   }
@@ -247,17 +247,22 @@ const userLevel = computed(() => userStore.level)
 
 .restart-icon {
   background-color: rgba(var(--v-theme-error), 0.1);
-  
+
   .v-icon {
     color: rgba(var(--v-theme-error), 0.9);
   }
 }
 
 .logout-btn {
-  border-radius: 10px;
   padding: 12px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(var(--v-theme-error), 0.2);
   font-weight: 500;
   letter-spacing: 0.5px;
-  box-shadow: 0 4px 12px rgba(var(--v-theme-error), 0.2);
+}
+
+.user-menu .v-overlay__content {
+  border-radius: 8px !important;
+  box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
 }
 </style>

src/plugins/vuetify/defaults.ts

@@ -47,6 +47,9 @@ export default {
     color: 'primary',
     elevation: 0,
   },
+  VListItem: {
+    rounded: 'md',
+  },
   VPagination: {
     activeColor: 'primary',
   },

src/router/menu.ts

@@ -90,7 +90,7 @@ export const SystemNavMenus = [
   },
   {
     title: '插件',
-    icon: 'mdi-apps',
+    icon: 'mdi-puzzle-outline',
     to: '/plugins',
     header: '系统',
     admin: true,
@@ -104,7 +104,7 @@ export const SystemNavMenus = [
   },
   {
     title: '用户管理',
-    icon: 'mdi-account-group',
+    icon: 'mdi-account-group-outline',
     to: '/user',
     header: '系统',
     admin: true,

src/styles/styles.scss

@@ -54,18 +54,6 @@ html.v-overlay-scroll-blocked body {
   margin-block-start: env(safe-area-inset-top);
 }
 
-.v-dialog > .v-overlay__content {
-  margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
-}
-
-.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card {
-  padding-block-end: env(safe-area-inset-bottom);
-}
-
-.v-dialog--fullscreen > .v-overlay__content > .v-card {
-  padding-block-end: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom));
-}
-
 /* router view transition fade-slide */
 .fade-slide-leave-active,
 .fade-slide-enter-active {
@@ -260,24 +248,6 @@ html.v-overlay-scroll-blocked body {
   padding-block-end: env(safe-area-inset-bottom);
 }
 
-.v-overlay__content .v-list{
-  background-color: rgb(var(--v-theme-surface)) !important;
-  border-radius: 8px !important;
-  box-shadow: none !important;
-  padding: 4px !important;
-  margin: 0 !important;
-}
-
-.v-overlay__content .v-card:not(.bg-primary){
-  background-color: rgb(var(--v-theme-surface)) !important;
-  border-radius: 8px !important;
-  box-shadow: none !important;
-
-  .v-list, .v-table {
-    background-color: transparent !important;
-  }
-}
-
 .text-shadow {
   text-shadow: 1px 1px #777;
 }
@@ -292,10 +262,9 @@ html.v-overlay-scroll-blocked body {
   inset: 0;
 }
 
-/* 菜单项样式 */
 .v-list-item {
-  border-radius: 4px !important;
+  margin-block: 2px !important;
-  margin: 2px 0 !important;
+  margin-inline: 0 !important;
   transition: background-color 0.15s ease;
 }
 
@@ -303,33 +272,6 @@ html.v-overlay-scroll-blocked body {
   background-color: rgba(var(--v-theme-on-surface), 0.04) !important;
 }
 
-/* 下拉菜单整体样式 */
-.v-menu > .v-overlay__content {
-  border-radius: 8px !important;
-  box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
-  overflow: hidden;
-}
-
-/* 通知弹窗样式 */
-.notification-menu .v-overlay__content {
-  border-radius: 8px !important;
-  box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
-  overflow: hidden;
-}
-
-/* 主题切换菜单样式 */
-.theme-menu .v-overlay__content {
-  border-radius: 8px !important;
-  box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
-}
-
-/* 用户菜单样式 */
-.user-menu .v-overlay__content {
-  border-radius: 8px !important;
-  box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
-}
-
-/* 菜单按钮交互效果 */
 .v-btn.v-btn--icon {
   transition: opacity 0.15s ease;
 }
@@ -338,26 +280,36 @@ html.v-overlay-scroll-blocked body {
   opacity: 0.85;
 }
 
-/* 菜单弹出动画优化 */
 .v-overlay__content {
   transition: opacity 0.2s ease !important;
 }
 
-/* 菜单卡片和列表 */
 .v-overlay__content .v-list{
-  background-color: rgb(var(--v-theme-surface)) !important;
-  border-radius: 8px !important;
-  box-shadow: none !important;
   padding: 4px !important;
   margin: 0 !important;
+  background-color: rgb(var(--v-theme-surface)) !important;
 }
 
 .v-overlay__content .v-card:not(.bg-primary){
   background-color: rgb(var(--v-theme-surface)) !important;
-  border-radius: 8px !important;
-  box-shadow: none !important;
 
   .v-list, .v-table {
     background-color: transparent !important;
   }
 }
+
+.v-menu > .v-overlay__content {
+  overflow: hidden;
+}
+
+.v-dialog--fullscreen > .v-overlay__content > .v-card {
+  padding-block-end: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom));
+}
+
+.v-dialog > .v-overlay__content {
+  margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
+}
+
+.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card {
+  padding-block-end: env(safe-area-inset-bottom);
+}