perf: 全局样式调整

src/layout/components/sidebar/components/SideLogo.vue

@@ -1,9 +1,11 @@
 <template>
-  <router-link to="/" class="logo">
+  <router-link h-60 f-c-c to="/">
     <n-icon size="36" color="#316c72">
       <IconLogo />
     </n-icon>
-    <n-gradient-text v-show="!appStore.collapsed" type="primary">{{ title }}</n-gradient-text>
+    <h2 v-show="!appStore.collapsed" ml-10 color-primary text-16 font-bold max-w-140 flex-shrink-0>
+      {{ title }}
+    </h2>
   </router-link>
 </template>
 
@@ -14,20 +16,3 @@ const title = import.meta.env.VITE_APP_TITLE
 
 const appStore = useAppStore()
 </script>
-
-<style lang="scss" scoped>
-.logo {
-  padding: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .n-gradient-text {
-    margin-left: 15px;
-    font-size: 16px;
-    font-weight: bold;
-    max-width: 140px;
-    flex-shrink: 0;
-    white-space: normal;
-  }
-}
-</style>

src/layout/components/sidebar/components/SideMenu.vue

@@ -2,8 +2,9 @@
   <n-menu
     class="side-menu"
     accordion
-    :indent="12"
-    :root-indent="12"
+    :indent="18"
+    :collapsed-icon-size="22"
+    :collapsed-width="64"
     :options="menuOptions"
     :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
     @update:value="handleMenuSelect"
@@ -96,40 +97,18 @@ function handleMenuSelect(key, item) {
 </script>
 
 <style lang="scss">
-.n-menu {
-  margin-top: 10px;
-  padding-left: 10px;
+.side-menu:not(.n-menu--collapsed) {
   .n-menu-item-content {
     &::before {
-      left: 0;
-      right: 0;
-      border-radius: 0;
-      background-color: unset !important;
+      left: 5px;
+      right: 5px;
     }
-    &:hover,
-    &.n-menu-item-content--selected {
-      border-radius: 0 !important;
-
+    &.n-menu-item-content--selected,
+    &:hover {
       &::before {
-        border-right: 3px solid $primaryColor;
-        background-color: #16243a;
-        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba($primaryColor, 0.3) 100%);
+        border-left: 4px solid var(--primaryColor);
       }
     }
   }
-
-  .n-menu-item-content-header {
-    font-size: 14px;
-    font-weight: bold;
-  }
-
-  .n-submenu-children {
-    .n-menu-item-content-header {
-      font-size: 14px;
-      font-weight: normal;
-      position: relative;
-      overflow: visible !important;
-    }
-  }
 }
 </style>

src/layout/components/sidebar/index.vue

@@ -5,6 +5,5 @@ import SideMenu from './components/SideMenu.vue'
 
 <template>
   <SideLogo />
-  <div h-1 bg-gray-200></div>
   <SideMenu />
 </template>

src/layout/components/tags/index.vue

@@ -99,11 +99,11 @@ async function handleContextMenu(e, tagItem) {
     transition: all 0.7s;
     &:hover {
       color: #fff;
-      background-color: $primaryColor;
+      background-color: var(--primaryColor);
     }
   }
   &:hover {
-    color: $primaryColor;
+    color: var(--primaryColor);
   }
 }
 </style>

src/layout/index.vue

@@ -46,6 +46,5 @@ const appStore = useAppStore()
   height: 60px;
   background-color: #fff;
   border-bottom: 1px solid #eee;
-  border-left: 1px solid #eee;
 }
 </style>