蓝红票功能

web/src/components/AppMenu.vue

@@ -1,11 +1,11 @@
-<template>
+<template>
   <n-menu
     :collapsed="authStore.layoutCollapsed"
-    :collapsed-width="72"
+    :collapsed-width="84"
     :collapsed-icon-size="18"
     :options="menuOptions"
     :value="activePath"
-    :indent="18"
+    :indent="16"
     @update:value="handleSelect"
   />
 </template>
@@ -30,14 +30,13 @@ function renderIcon(icon?: string | null) {
 }
 
 function toOption(menu: MenuNode): MenuOption | null {
-  if (!menu.visible) return null
-  if (menu.type === 'BUTTON') return null
+  if (!menu.visible || menu.type === 'BUTTON') return null
 
   const children = (menu.children ?? [])
     .map((item) => toOption(item))
     .filter((item): item is MenuOption => Boolean(item))
 
-  const key = (menu.path && menu.type !== 'CATALOG') ? menu.path : `catalog-${menu.id}`
+  const key = menu.path && menu.type !== 'CATALOG' ? menu.path : `catalog-${menu.id}`
   return {
     key,
     label: menu.title,
@@ -60,19 +59,40 @@ function handleSelect(key: string) {
 
 <style scoped>
 :deep(.n-menu) {
+  height: 100%;
   overflow-x: hidden;
+  overflow-y: auto;
   font-size: 13px;
+  background: transparent;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-:deep(.n-menu-item) {
+:deep(.n-menu::-webkit-scrollbar) {
+  display: none;
+}
+
+:deep(.n-menu-content),
+:deep(.n-menu-content-wrapper) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+:deep(.n-menu-content::-webkit-scrollbar),
+:deep(.n-menu-content-wrapper::-webkit-scrollbar) {
+  display: none;
+}
+
+:deep(.n-menu-item),
+:deep(.n-submenu) {
   margin: 2px 0;
 }
 
-:deep(.n-menu-item-content) {
-  color: #64748b;
+:deep(.n-menu-item-content),
+:deep(.n-submenu .n-menu-item-content-header) {
   transition:
-    background 0.18s ease,
-    color 0.18s ease;
+    background 0.16s ease,
+    color 0.16s ease;
 }
 
 :deep(.n-menu-item-content-header),
@@ -86,11 +106,32 @@ function handleSelect(key: string) {
   white-space: nowrap;
 }
 
-:deep(.n-menu-item-content--selected::before) {
-  background: #eff6ff;
-}
-
 :deep(.n-menu-item-content--selected) {
   font-weight: 600;
+  box-shadow: none;
+}
+
+:deep(.n-menu-item-content--selected::before) {
+  background: transparent;
+}
+
+:deep(.n-menu--collapsed .n-menu-item-content),
+:deep(.n-menu--collapsed .n-submenu .n-menu-item-content-header) {
+  justify-content: center;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+:deep(.n-menu--collapsed .n-menu-item-content__icon),
+:deep(.n-menu--collapsed .n-submenu .n-menu-item-content-header__icon) {
+  margin-right: 0 !important;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+:deep(.n-menu-item-content__icon .n-icon),
+:deep(.n-menu-item-content-header__icon .n-icon) {
+  font-size: 18px;
 }
 </style>