@zat-design/sisyphus-react 4.6.4 → 4.6.5-beta.2

package/es/ProForm/components/combination/FormList/style/index.less

@@ -49,8 +49,7 @@
   }
 }
 
-.pro-form-list,
-.pro-form-list-tabs {
+.pro-form-list {
   .@{ant-prefix}-tabs-nav {
     margin-bottom: 0 !important;
   }
@@ -116,63 +115,94 @@
       background: transparent !important;
     }
   }
-
-  .pro-form-list-tool-btn-tabs {
-    width: auto;
-    min-width: 20px;
-    height: 20px;
-    padding: 0;
-
-    &:hover {
-      background: transparent !important;
-    }
-  }
 }
 
 .pro-form-list-tabs {
   &.@{ant-prefix}-tabs > .@{ant-prefix}-tabs-nav {
+    margin-bottom: 0;
+    padding-top: 8px;
+
+    &::before {
+      display: none;
+    }
+
     .@{ant-prefix}-tabs-nav-wrap {
+      min-width: 0;
       overflow-x: clip;
       overflow-y: visible;
     }
 
     .@{ant-prefix}-tabs-nav-list {
       overflow: visible;
+      align-items: center;
+      gap: 12px;
     }
   }
 
   &.@{ant-prefix}-tabs-card > .@{ant-prefix}-tabs-nav {
-    &::before {
-      border-bottom-color: var(--ant-color-border, #d9d9d9);
-    }
-
     .@{ant-prefix}-tabs-tab {
-      padding: 0;
-      border-color: var(--ant-color-border, #d9d9d9);
-      border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0;
-
-      &.@{ant-prefix}-tabs-tab-active {
-        border-bottom-color: var(--ant-color-bg-container, #fff);
+      height: 32px;
+      // 覆盖全局 card Tabs 的强制内外边距，间距统一交给 nav-list。
+      padding: 0 !important;
+      margin: 0 !important;
+      background: transparent;
+      border: 0;
+
+      &.@{ant-prefix}-tabs-tab-active .pro-form-list-tabs-label {
+        color: var(--pro-form-list-tabs-primary);
+        background: var(--pro-form-list-tabs-primary-bg);
+        border-color: var(--pro-form-list-tabs-primary);
       }
     }
 
-    .@{ant-prefix}-tabs-tab + .@{ant-prefix}-tabs-tab,
-    .@{ant-prefix}-tabs-nav-add {
-      margin-left: 4px;
+    .@{ant-prefix}-tabs-tab-btn {
+      color: inherit;
+      text-shadow: none;
     }
 
     .@{ant-prefix}-tabs-nav-add {
       width: auto;
-      padding: 0 @zaui-space-size-xs;
-      border-color: var(--ant-color-border, #d9d9d9);
-      border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0;
+      min-width: 32px;
+      height: 32px;
+      padding: 0 12px;
+      margin: 0;
+      color: var(--pro-form-list-tabs-muted);
+      background: var(--pro-form-list-tabs-bg);
+      border: 1px dashed var(--pro-form-list-tabs-border);
+      border-radius: 16px;
+
+      &:focus:not(:hover) {
+        color: var(--pro-form-list-tabs-muted);
+        border-color: var(--pro-form-list-tabs-border);
+      }
+
+      &:hover {
+        color: var(--pro-form-list-tabs-primary-hover);
+        border-color: var(--pro-form-list-tabs-primary-hover);
+      }
     }
   }
 
   .pro-form-list-tabs-label {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: 4px;
+    height: 32px;
+    padding: 0 12px;
+    color: var(--pro-form-list-tabs-text);
+    background: var(--pro-form-list-tabs-bg);
+    border: 1px solid var(--pro-form-list-tabs-border);
+    border-radius: 16px;
+
+    &:hover {
+      color: var(--pro-form-list-tabs-primary-hover);
+      border-color: var(--pro-form-list-tabs-primary-hover);
+    }
+
+    &[data-drag-over='true'] {
+      border-color: var(--pro-form-list-tabs-primary-hover);
+    }
   }
 
   .pro-form-list-tabs-title {
@@ -180,15 +210,20 @@
   }
 
   .pro-form-list-tabs-error-badge {
+    // 角标以整个胶囊为定位容器，随拖动一起移动。
+    position: static;
     display: inline-flex;
+    color: inherit;
 
     .@{ant-prefix}-badge-count {
-      top: 0;
-      right: 0;
+      top: 4px;
+      right: 4px;
       z-index: 2;
       pointer-events: none;
       transform: translate(50%, -50%);
-      box-shadow: 0 0 0 2px var(--ant-color-bg-container, #fff);
+      color: var(--pro-form-list-tabs-solid-text);
+      background: var(--pro-form-list-tabs-error);
+      box-shadow: 0 0 0 2px var(--pro-form-list-tabs-bg);
       transition: none;
       animation: none;
 
@@ -204,36 +239,132 @@
     align-items: center;
   }
 
+  .pro-form-list-tabs-add {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    white-space: nowrap;
+    .pro-form-list-tabs-add-label {
+      font-size: 14px;
+    }
+  }
+
+  .pro-form-list-tabs-content {
+    padding: 12px 0 0;
+    border: 0;
+  }
+}
+
+.pro-form-list-tabs,
+.pro-form-list-tabs-dropdown {
   .pro-form-list-tabs-drag-handle {
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
+    color: var(--pro-form-list-tabs-muted);
+    touch-action: none;
+
     .pro-icon {
       cursor: move;
     }
   }
-  .pro-form-list-delete-icon {
-    &:hover {
-      background: transparent !important;
+
+  .pro-form-list-action {
+    padding-bottom: 0;
+
+    [data-form-list-action] {
+      min-width: 20px;
+      height: 20px;
+      padding: 0;
+      color: inherit;
+    }
+
+    [data-form-list-action='delete'] {
+      color: var(--pro-form-list-tabs-close);
+      border-radius: 4px;
+      transition: color 0.2s;
+
+      &:hover {
+        color: var(--pro-form-list-tabs-muted);
+        background: transparent;
+      }
     }
   }
+}
 
-  .pro-form-list-tabs-add {
-    display: inline-flex;
+.pro-form-list-tabs-dropdown {
+  min-width: 180px;
+  max-width: calc(100vw - 32px);
+
+  .@{ant-prefix}-tabs-dropdown-menu-item {
+    &:hover,
+    &-active,
+    &-selected {
+      background: transparent;
+    }
+  }
+
+  .@{ant-prefix}-tabs-dropdown-menu-item > span {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .pro-form-list-tabs-label {
+    display: flex;
+    align-items: center;
     gap: 4px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .pro-form-list-tabs-error-badge {
+    display: flex;
+    flex: 1;
     align-items: center;
+    gap: 8px;
+    min-width: 0;
+    color: inherit;
+  }
+
+  .pro-form-list-tabs-title-content {
+    display: contents;
+  }
+
+  .pro-form-list-tabs-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
     white-space: nowrap;
-    .pro-form-list-tabs-add-label {
-      font-size: 14px;
-    }
+    text-overflow: ellipsis;
   }
 
   .pro-form-list-action {
-    padding-bottom: 0;
+    order: 2;
+    flex-shrink: 0;
+    margin-inline-start: auto;
   }
 
-  .pro-form-list-tabs-content {
-    padding: 12px 0 0;
-    border: 0;
+  .@{ant-prefix}-badge-count {
+    position: static;
+    order: 1;
+    flex-shrink: 0;
+    transform: none;
+  }
+}
+
+.pro-form-list-tabs-drag-overlay {
+  pointer-events: none;
+
+  .pro-form-list-tabs-label {
+    width: max-content;
+    min-width: 100%;
+  }
+
+  &[data-active='true'] .pro-form-list-tabs-label {
+    color: var(--pro-form-list-tabs-primary);
+    background: var(--pro-form-list-tabs-primary-bg);
+    border-color: var(--pro-form-list-tabs-primary);
   }
 }
 

package/es/ProLayout/components/Layout/Menu/FoldMenu/index.js

@@ -2,16 +2,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { Popover, Tooltip } from "antd";
 import classnames from "classnames";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useLocation } from "react-router-dom";
 import ProIcon from "../../../../../ProIcon";
 import SideMenu from "../SideMenu";
 import { LayoutContext } from "../../../../index";
-import { getUrlParams, getPathNameKey, findMenuItemByKey } from "../../../../utils";
+import { findMenuItemByKey, resolveMenuKeyIdPath } from "../../../../utils";
 const Link = RouterLink;
 const FoldMenu = (props) => {
   const { style, dataSource, onMenuClick } = props;
   const { menus, iconfontUrl, notice, collapsed, headerHeight } = dataSource;
-  const pathNamePrefix = `/${window.location.pathname.split("/")[1]}`;
+  const location = useLocation();
   const noticeCls = classnames({
     "pro-layout-menu-tooltip": true,
     "pro-layout-menu-tooltip-has-notice": notice,
@@ -22,17 +22,16 @@ const FoldMenu = (props) => {
     onSelected: () => {
     }
   };
+  const currentKeyIdPath = resolveMenuKeyIdPath({
+    menus,
+    pathname: location.pathname,
+    search: location.search,
+    selectedPath
+  });
   return /* @__PURE__ */ jsx("div", { className: "pro-layout-menu-fold", style: { ...style }, children: /* @__PURE__ */ jsx("ul", { className: "pro-layout-menu-fold-list", style: { ...style }, children: menus.filter((item) => !item.hideInMenu).map((item, index) => {
     var _a;
     const { id, url, name, icon, imgUrl, imgActiveUrl, children } = item;
     const toPath = item.redirectUrl || item.url;
-    const selectedMenu = getUrlParams("activeMenu");
-    const pathToMatch = selectedPath || selectedMenu || window.location.pathname;
-    const currentKeyIdPath = getPathNameKey({
-      menus,
-      pathName: pathToMatch
-      // 优先匹配上下文路径
-    }) || [];
     const cls = classnames({
       active: currentKeyIdPath.includes(id)
     });
@@ -42,7 +41,7 @@ const FoldMenu = (props) => {
         "img",
         {
           className: "pro-layout-icon",
-          src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
+          src: currentKeyIdPath.includes(id) ? imgActiveUrl || imgUrl : imgUrl,
           alt: "icon"
         }
       ) : /* @__PURE__ */ jsx(

package/es/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -4,15 +4,14 @@ import { Menu } from "antd";
 import { useDeepCompareEffect, useSetState } from "ahooks";
 import { CaretDownOutlined } from "@ant-design/icons";
 import classnames from "classnames";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useLocation } from "react-router-dom";
 import cloneDeep from "lodash/cloneDeep";
 import { LayoutContext } from "../../../../index";
-import { getIdsByPathName, findMenuItemByKey } from "../../../../utils";
+import { findMenuItemByKey, resolveMenuKeyIdPath } from "../../../../utils";
 import { canOpenAsTab } from "../../../TabsManager/utils";
 import ProIcon from "../../../../../ProIcon";
 const Link = RouterLink;
 const OpenMenu = (props) => {
-  var _a;
   const { className, dataSource, style, onMenuClick, textVisible = true } = props;
   const { menus, sideMenu } = dataSource || {};
   const linkRef = useRef(null);
@@ -21,7 +20,7 @@ const OpenMenu = (props) => {
     openKeys: [],
     router: ""
   });
-  const query = new URLSearchParams(window.location.search);
+  const location = useLocation();
   const layoutContext = useContext(LayoutContext);
   const layoutSelectedPath = layoutContext == null ? void 0 : layoutContext.selectedPath;
   const layoutOnSelected = layoutContext == null ? void 0 : layoutContext.onSelected;
@@ -31,8 +30,12 @@ const OpenMenu = (props) => {
     "pro-layout-menu-text-hidden": textVisible === false,
     [`${className}`]: className
   });
-  const preferredPath = query.get("activeMenu") || (layoutSelectedPath === "##EMPTY##" ? null : layoutSelectedPath) || window.location.pathname;
-  const selectKeyIdPath = preferredPath ? ((_a = getIdsByPathName(menus, preferredPath)) == null ? void 0 : _a.map((item) => String(item))) || [] : [];
+  const selectKeyIdPath = resolveMenuKeyIdPath({
+    menus,
+    pathname: location.pathname,
+    search: location.search,
+    selectedPath: layoutSelectedPath
+  }).map((item) => String(item));
   const selectedRootKey = selectKeyIdPath[0];
   const itemsTransform = useMemo(() => {
     const result = cloneDeep(menus);
@@ -41,8 +44,8 @@ const OpenMenu = (props) => {
     }
     const menuDeep = (data) => {
       data.forEach((item) => {
-        var _a2, _b, _c;
-        const isFirstMenu = ((_a2 = item.keyIdPath) == null ? void 0 : _a2.length) === 1 || sideMenu && ((_b = item.keyIdPath) == null ? void 0 : _b.length) === 2;
+        var _a, _b, _c;
+        const isFirstMenu = ((_a = item.keyIdPath) == null ? void 0 : _a.length) === 1 || sideMenu && ((_b = item.keyIdPath) == null ? void 0 : _b.length) === 2;
         item.label = /* @__PURE__ */ jsxs(
           "div",
           {
@@ -140,7 +143,7 @@ const OpenMenu = (props) => {
           }
           if (menuItem && canOpenAsTab(menuItem) && shouldActivate) {
             setState({
-              selectedKeys: keyPath,
+              selectedKeys: menuKeyPath,
               router: menuRouter
             });
             layoutOnSelected == null ? void 0 : layoutOnSelected({

package/es/ProLayout/utils/index.d.ts

@@ -6,6 +6,16 @@ import type { MenusType } from '../propTypes';
  * @return result
  */
 export declare const getIdsByPathName: (menus: any[], activeMenu?: string) => number[];
+interface ResolveMenuKeyIdPathOptions {
+    menus: any[];
+    pathname: string;
+    search?: string;
+    selectedPath?: string;
+}
+/**
+ * 统一解析菜单激活路径：显式 activeMenu 优先，其次匹配真实路由，最后回退上次选择。
+ */
+export declare const resolveMenuKeyIdPath: ({ menus, pathname, search, selectedPath, }: ResolveMenuKeyIdPathOptions) => number[];
 /**
  * 转换菜单数据源评价keyUrlPath与keyIdPath
  * @param menuData 菜单数据源
@@ -41,3 +51,4 @@ export declare const getPathNameKey: ({ menus, pathName }: {
  * @returns 找到的菜单项数据或null
  */
 export declare const findMenuItemByKey: (menus: any[], key: string) => any;
+export {};

package/es/ProLayout/utils/index.js

@@ -1,12 +1,21 @@
 import isPlainObject from "lodash/isPlainObject";
 const updateBestMatch = (pathName, itemUrl, itemRedirectUrl, keyIdPath, bestMatch) => {
-  if (itemUrl && pathName.includes(itemUrl)) {
+  const isSameOrNestedPath = (candidate) => {
+    if (!candidate)
+      return false;
+    const normalizedCandidate = candidate.length > 1 ? candidate.replace(/\/+$/, "") : candidate;
+    if (pathName === normalizedCandidate)
+      return true;
+    const boundary = pathName.charAt(normalizedCandidate.length);
+    return pathName.startsWith(normalizedCandidate) && ["/", "?", "#"].includes(boundary);
+  };
+  if (isSameOrNestedPath(itemUrl)) {
     const urlLength = itemUrl.length;
     if (!bestMatch || urlLength > bestMatch.urlLength) {
       return { keyIdPath, urlLength };
     }
   }
-  if (itemRedirectUrl && pathName.includes(itemRedirectUrl)) {
+  if (isSameOrNestedPath(itemRedirectUrl)) {
     const urlLength = itemRedirectUrl.length;
     if (!bestMatch || urlLength > bestMatch.urlLength) {
       return { keyIdPath, urlLength };
@@ -14,6 +23,27 @@ const updateBestMatch = (pathName, itemUrl, itemRedirectUrl, keyIdPath, bestMatc
   }
   return bestMatch;
 };
+const getExactMenuKeyIdPath = (menus, pathname) => {
+  const normalizePathname = (value) => {
+    if (!value)
+      return "";
+    const path = value.split(/[?#]/)[0];
+    return path.length > 1 ? path.replace(/\/+$/, "") : path;
+  };
+  const targetPathname = normalizePathname(pathname);
+  for (const item of menus || []) {
+    const routes = [item == null ? void 0 : item.redirectUrl, item == null ? void 0 : item.router, item == null ? void 0 : item.url].map(normalizePathname);
+    if (targetPathname && routes.includes(targetPathname)) {
+      return item.keyIdPath || [];
+    }
+    if (Array.isArray(item == null ? void 0 : item.children) && item.children.length) {
+      const childPath = getExactMenuKeyIdPath(item.children, pathname);
+      if (childPath.length)
+        return childPath;
+    }
+  }
+  return [];
+};
 const getIdsByPathName = (menus, activeMenu) => {
   const _pathName = activeMenu || window.location.pathname;
   let result;
@@ -42,6 +72,26 @@ const getIdsByPathName = (menus, activeMenu) => {
   menuDeep(menus);
   return result || (bestMatch == null ? void 0 : bestMatch.keyIdPath) || [];
 };
+const resolveMenuKeyIdPath = ({
+  menus,
+  pathname,
+  search = "",
+  selectedPath
+}) => {
+  if (selectedPath === "##EMPTY##")
+    return [];
+  const activeMenu = new URLSearchParams(search).get("activeMenu");
+  const activeMenuPath = activeMenu ? getIdsByPathName(menus, activeMenu) : [];
+  if (activeMenuPath.length)
+    return activeMenuPath;
+  const exactRoutePath = getExactMenuKeyIdPath(menus, pathname);
+  if (exactRoutePath.length)
+    return exactRoutePath;
+  const nestedRoutePath = getIdsByPathName(menus, pathname);
+  if (nestedRoutePath.length)
+    return nestedRoutePath;
+  return selectedPath ? getIdsByPathName(menus, selectedPath) : [];
+};
 const transformMenu = (menuData, pathPrefix) => {
   const data = [...menuData];
   const menuDeep = (menuDeepItem) => {
@@ -163,6 +213,7 @@ export {
   getIdsByPathName,
   getPathNameKey,
   getUrlParams,
+  resolveMenuKeyIdPath,
   transformMenu,
   transformMenus
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.6.4",
+  "version": "4.6.5-beta.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public",
@@ -106,6 +106,14 @@
   "engines": {
     "node": ">=20.0.0"
   },
+  "resolutions": {
+    "@umijs/bundler-utils@3.5.43": "3.5.43"
+  },
+  "overrides": {
+    "@umijs/bundler-webpack@3.5.43": {
+      "@umijs/bundler-utils": "3.5.43"
+    }
+  },
   "browserslist": [
     "last 2 versions",
     "Firefox ESR",