fix: nav刷新数据源保留展开状态、响应式收纳样式问题修复

packages/amis-ui/package.json

@@ -57,8 +57,7 @@
     "monaco-editor": "0.30.1",
     "prop-types": "^15.6.1",
     "rc-input-number": "^7.4.0",
-    "rc-menu": "^9.8.4",
-    "rc-overflow": "^1.3.1",
+    "rc-menu": "^9.12.2",
     "rc-progress": "3.4.2",
     "react-color": "^2.19.3",
     "react-draggable": "^4.4.5",

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

@@ -485,6 +485,12 @@
       .#{$ns}Nav-Menu-overflowedIcon {
         margin-right: 0;
         line-height: inherit; // 到了saas中 会被fortawesome的样式影响 因此需要覆盖一下
+
+        i,
+        svg,
+        img {
+          float: none;
+        }
       }
     }
 

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

@@ -12,7 +12,6 @@ import RcMenu, {
   Divider as RcDivider,
   ItemGroup
 } from 'rc-menu';
-import Overflow from 'rc-overflow';
 import Sortable from 'sortablejs';
 import {
   mapTree,
@@ -29,6 +28,9 @@ import MenuItem, {MenuItemProps} from './MenuItem';
 import SubMenu, {SubMenuProps} from './SubMenu';
 import {MenuContext} from './MenuContext';
 
+const INVALIDATE = 'invalidate';
+const RESPONSIVE = 'responsive';
+
 export interface NavigationItem {
   id?: string;
   label?: string | React.ReactNode;
@@ -669,6 +671,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
       expandBefore,
       onDragStart
     } = this.props;
+
     const {navigations, activeKey, defaultOpenKeys, openKeys} = this.state;
     const isDarkTheme = themeColor === 'dark';
     const rcMode = stacked
@@ -734,8 +737,8 @@ export class Menu extends React.Component<MenuProps, MenuState> {
           // @ts-ignore
           maxCount={
             stacked || disabledOverflow
-              ? Overflow.INVALIDATE
-              : overflowMaxCount || Overflow.RESPONSIVE
+              ? INVALIDATE
+              : overflowMaxCount || RESPONSIVE
           }
           component={overflowComponent || 'ul'}
           style={overflowStyle}

packages/amis/package.json

@@ -65,7 +65,6 @@
     "office-viewer": "^0.2.1",
     "prop-types": "^15.6.1",
     "qrcode.react": "^3.1.0",
-    "rc-overflow": "^1.2.4",
     "react-cropper": "^2.1.8",
     "react-dropzone": "^11.4.2",
     "react-error-boundary": "^4.0.11",

packages/amis/src/renderers/Nav.tsx

@@ -40,7 +40,7 @@ import {ScopedContext, IScopedContext} from 'amis-core';
 import type {NavigationItem} from 'amis-ui/lib/components/menu';
 import type {MenuItemProps} from 'amis-ui/lib/components/menu/MenuItem';
 
-import type {LinkItem, Payload} from 'amis-core';
+import type {Payload} from 'amis-core';
 import type {
   BaseSchema,
   SchemaObject,
@@ -313,6 +313,11 @@ export interface NavSchema extends BaseSchema {
      * 是否立马搜索。
      */
     searchImediately?: boolean;
+
+    /**
+     * 指定唯一标识字段
+     */
+    valueField?: string;
   };
 }
 
@@ -1035,7 +1040,8 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
         location,
         level,
         defaultOpenLevel,
-        disabled
+        disabled,
+        valueField
       } = props;
 
       const isActive = (link: Link, depth: number) => {
@@ -1080,17 +1086,29 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
             __id: link.__id ?? guid()
           };
 
+          let originLink = null;
+          // 懒加载的菜单项不保留展开状态
+          if (!link.defer && valueField && link[valueField]) {
+            originLink = findTree(
+              origin || [],
+              originItem => originItem[valueField] === link[valueField]
+            );
+          }
+
           // defaultOpenLevel depth <= defaultOpenLevel的默认全部展开
           // 优先级比unfolded属性低 如果用户配置了unfolded为false 那么默认不展开
-          item.unfolded =
-            typeof link.unfolded !== 'undefined'
-              ? isUnfolded(item, {unfoldedField, foldedField})
-              : defaultOpenLevel && depth <= defaultOpenLevel
-              ? true
-              : link.children &&
-                !!findTree(link.children, (child, i, d) =>
-                  isActive(child, depth + d)
-                );
+          // 如果defer菜单项，unfolded默认设置了true，那么会有问题
+          // 先前相同菜单做了展开收起操作的话 优先级最高
+          item.unfolded = originLink
+            ? isUnfolded(originLink, {unfoldedField, foldedField})
+            : typeof link.unfolded !== 'undefined'
+            ? isUnfolded(item, {unfoldedField, foldedField})
+            : defaultOpenLevel && depth <= defaultOpenLevel
+            ? true
+            : link.children &&
+              !!findTree(link.children, (child, i, d) =>
+                isActive(child, depth + d)
+              );
 
           return item;
         },