fix: Nav样式问题、性能优化 (#6280)

Co-authored-by: wanglinfang <wanglinfang@baidu.com>

packages/amis-ui/scss/components/_menu.scss

@@ -40,6 +40,14 @@
         .#{$ns}Nav-Menu-submenu-arrow {
           color: var(--Menu-dark-fontColor);
         }
+
+        &:hover {
+          .#{$ns}Nav-Menu-item-label,
+          .#{$ns}Nav-Menu-item-icon,
+          .#{$ns}Nav-Menu-submenu-arrow {
+            color: var(--Menu-dark-fontColor-onHover);
+          }
+        }
       }
     }
 
@@ -186,6 +194,7 @@
     align-items: center;
     height: var(--Nav-Item-height);
     flex-grow: 1;
+    overflow: hidden;
   }
 
   &-item-divider {
@@ -334,6 +343,9 @@
   &-submenu {
     .#{$ns}Badge {
       position: static;
+      flex: 1;
+      width: 0;
+      display: flex;
     }
     .#{$ns}Nav-Menu-item-wrap {
       display: flex;
@@ -542,7 +554,7 @@
   &-submenu-title {
     margin: 0;
     position: relative;
-    padding: 0 var(--Menu-Submenu-item-paddingX) 0 px2rem(16px);
+    padding: 0 px2rem(16px);
     line-height: var(--Nav-Item-height);
     display: block;
     white-space: nowrap;
@@ -568,7 +580,8 @@
 
       &:hover {
         .#{$ns}Nav-Menu-item-label,
-        .#{$ns}Nav-Menu-item-icon {
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-submenu-arrow {
           color: var(--Menu-dark-fontColor-onHover);
         }
       }
@@ -961,7 +974,8 @@
       color: var(--Menu-dark-ancestor-fontColor-onActive);
 
       .#{$ns}Nav-Menu-item-label,
-      .#{$ns}Nav-Menu-item-icon {
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-submenu-arrow {
         color: var(--Menu-dark-ancestor-fontColor-onActive);
       }
     }

packages/amis-ui/src/components/menu/index.tsx

@@ -242,7 +242,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
     mode: 'inline',
     direction: 'ltr',
     prefix: '',
-    triggerSubMenuAction: 'hover',
+    triggerSubMenuAction: 'click',
     inlineIndent: 15,
     popOverContainer: () => document.body,
     renderLink: (link: MenuItemProps) => {
@@ -279,13 +279,17 @@ export class Menu extends React.Component<MenuProps, MenuState> {
   componentDidUpdate(prevProps: MenuProps, prevState: MenuState) {
     const props = this.props;
     const isOpen = prevProps.isOpen;
-
+    let isNavDiff = prevProps.navigations.length !== props.navigations.length;
-    if (
+    if (!isNavDiff) {
-      !isEqualWith(prevProps.navigations, props.navigations, (prev, cur) =>
+      // 顺序也要保持一致
-        isEqual(prev, cur)
+      for (let [index, item] of props.navigations.entries()) {
-      ) ||
+        if (!isEqual(item, prevProps.navigations[index])) {
-      !isEqual(prevProps.location, props.location)
+          isNavDiff = true;
-    ) {
+          break;
+        }
+      }
+    }
+    if (isNavDiff || !isEqual(prevProps.location, props.location)) {
       const {transformedNav, activeKey, defaultOpenKeys, openKeys} =
         this.normalizeNavigations({
           ...props,

packages/amis/src/renderers/Nav.tsx

@@ -254,6 +254,11 @@ export interface NavSchema extends BaseSchema {
    * 自定义展开图标位置 默认在前面 before after
    */
   expandPosition?: string;
+
+  /**
+   * 主题配色 默认light
+   */
+  themeColor?: 'light' | 'dark';
 }
 
 export interface Link {
@@ -637,6 +642,7 @@ export class Navigation extends React.Component<
       indentSize,
       accordion,
       draggable,
+      themeColor,
       expandPosition,
       render
     } = this.props;
@@ -681,6 +687,7 @@ export class Navigation extends React.Component<
               isOpen={(item: NavigationItem) => !!item.open}
               stacked={!!stacked}
               mode={mode}
+              themeColor={themeColor}
               location={location}
               onSelect={this.handleClick}
               onToggle={this.toggleLink}
@@ -1177,7 +1184,6 @@ export class NavigationRenderer extends React.Component<RendererProps> {
     | {
         loadConfig: (ctx?: any) => Promise<any> | void;
         setConfig: (value: any) => void;
-        setFilterConfig: (value: any) => void;
       }
     | undefined = undefined;
 

tsconfig.json

@@ -25,7 +25,8 @@
       "amis-formula": ["./packages/amis-formula/src/index.ts"],
       "amis-ui": ["./packages/amis-ui/src/index.tsx"],
       "amis": ["./packages/amis/src/index.tsx"]
-    }
+    },
+    "downlevelIteration": true
   },
   "types": ["typePatches"],
   "references": [],