更新 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="text-primary text-h6 font-weight-medium">主题选择</div>
+      <div class="theme-switcher-header py-1 mb-2">
+        <VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle>
       </div>
-      
+
       <div class="theme-switcher-options px-2">
-        <VListItem 
-          v-for="theme in props.themes" 
-          :key="theme.name" 
+        <VListItem
+          v-for="theme in props.themes"
+          :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} {
-      @extend %blurry-bg;
-    }
-
-    // Scrolled styles for sticky navbar (保留原有逻辑，但现在默认就会显示)
+    // 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
-      z-index: 1;
+      // ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow;Settingz-indexSettingz-indexSettingz-indexSettingz-index
+      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);
-}