统一顶栏及侧边栏各项ui风格

src/@layouts/components/VerticalNav.vue

@@ -98,6 +98,11 @@ 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,7 +116,7 @@ export default defineComponent({
 
   .layout-navbar {
     position: fixed;
-    width: calc(100vw - variables.$layout-vertical-nav-width - 0.5rem);
+    width: calc(100vw - variables.$layout-vertical-nav-width - 1rem);
     z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
     inset-block-start: 0;
 
@@ -171,7 +171,7 @@ export default defineComponent({
   }
 
   &:not(.layout-overlay-nav) .layout-content-wrapper {
-    padding-inline-start: variables.$layout-vertical-nav-width;
+    padding-inline-start: calc(variables.$layout-vertical-nav-width + 8px);
   }
 
   // Adjust right column pl when vertical nav is collapsed
@@ -203,7 +203,16 @@ export default defineComponent({
 
 .layout-wrapper.layout-nav-type-vertical.layout-overlay-nav {
   .layout-navbar {
-    width: 100%;
+    width: calc(100% - 0px);
+    margin-left: 8px;
+    padding-left: 0;
   }
 }
+
+.layout-page-content {
+  margin-top: calc(variables.$layout-vertical-nav-navbar-height - 42px);
+  padding-top: 0px;
+  position: relative;
+  z-index: 1;
+}
 </style>

src/@layouts/components/VerticalNavLink.vue

@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <li class="nav-link" :class="{ disabled: item.disable }">
     <Component :is="item.to ? 'RouterLink' : 'a'" :to="item.to" :href="item.href">
-      <VIcon :icon="item.icon" class="nav-item-icon" />
+      <VIcon :icon="item.icon as string" class="nav-item-icon" />
       <!-- 👉 Title -->
       <span class="nav-item-title">
         {{ item.title }}

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

@@ -40,16 +40,18 @@ body,
   padding-block: 1.5rem;
   padding-top: calc(env(safe-area-inset-top) + 4.25rem);
   // display: flex;
-
+  background-color: rgb(var(--v-theme-background));
 
   .page-content-container {
     // flex: 1;
     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);
+      background-color: rgb(var(--v-theme-background));
     }
   }
 }
@@ -57,6 +59,7 @@ body,
 @media screen and (max-width: 1280px){
   .page-content-container > div:first-child  {
     width: calc(100vw - 1rem) !important;
+    background-color: rgb(var(--v-theme-background));
   }
 }