refactor(layout): update path-to-regexp to version 8.1.0 (#8725)

* refactor(layout): update path-to-regexp to version 8.1.0

* fix test

* fix test

* 支持更多的卡片设置

.github/workflows/preview-build.yml

@@ -28,7 +28,7 @@ jobs:
           zip -r dist.zip dist
 
       - name: upload dist artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: dist
           path: dist.zip
@@ -40,7 +40,7 @@ jobs:
 
       - name: Upload PR number
         if: ${{ always() }}
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: pr
           path: ./pr-id.txt

package.json

@@ -46,20 +46,20 @@
   },
   "devDependencies": {
     "@ant-design/antd-theme-variable": "^1.0.0",
-    "@ant-design/cssinjs": "^1.21.0",
+    "@ant-design/cssinjs": "^1.21.1",
     "@ant-design/icons": "^5.4.0",
     "@babel/core": "^7.25.2",
     "@babel/eslint-plugin": "^7.25.1",
-    "@babel/parser": "^7.25.3",
+    "@babel/parser": "^7.25.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@babel/traverse": "^7.25.3",
+    "@babel/traverse": "^7.25.6",
     "@emotion/babel-plugin": "^11.12.0",
     "@emotion/cache": "^11.13.1",
     "@emotion/css": "^11.13.0",
-    "@emotion/serialize": "^1.3.0",
+    "@emotion/serialize": "^1.3.1",
     "@floating-ui/react": "^0.19.2",
     "@octokit/core": "^3.6.0",
     "@octokit/rest": "^18.12.0",
@@ -74,42 +74,42 @@
     "@types/lodash-es": "^4.17.12",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^14.18.63",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-responsive": "^8.0.8",
     "@types/shallowequal": "^1.1.5",
     "@types/warning": "^3.0.3",
-    "@umijs/babel-preset-umi": "^3.5.42",
+    "@umijs/babel-preset-umi": "^3.5.43",
     "@umijs/doctor": "^1.2.1",
     "@umijs/fabric": "^4.0.1",
     "@umijs/plugin-analytics": "^0.2.4",
-    "@umijs/test": "^3.5.42",
-    "@umijs/test-utils": "^3.5.42",
-    "@umijs/utils": "^4.3.11",
+    "@umijs/test": "^3.5.43",
+    "@umijs/test-utils": "^3.5.43",
+    "@umijs/utils": "^4.3.20",
     "@vitest/coverage-istanbul": "^0.34.6",
     "animated-scroll-to": "^2.3.0",
-    "antd": "^5.20.0",
-    "antd-style": "^3.6.2",
+    "antd": "^5.20.6",
+    "antd-style": "^3.6.3",
     "babel-loader": "^9.1.3",
     "babel-types": "^6.26.0",
     "chalk": "^4.1.2",
     "chroma-js": "^2.6.0",
     "copy-to-clipboard": "^3.3.3",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.12",
-    "dumi": "~2.4.7",
+    "dayjs": "^1.11.13",
+    "dumi": "~2.4.10",
     "dumi-theme-antd-style": "~0.31.1",
     "esbuild": "^0.15.18",
     "eslint": "^8.57.0",
     "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.36.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-unicorn": "^47.0.0",
     "execa": "^5.1.1",
-    "express": "^4.19.2",
+    "express": "^4.21.0",
     "fast-deep-equal": "^3.1.3",
-    "father": "^4.4.6",
+    "father": "^4.5.0",
     "gh-pages": "^5.0.0",
     "glob": "^8.1.0",
     "identity-obj-proxy": "^3.0.0",
@@ -129,14 +129,14 @@
     "polished": "^4.3.1",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-packagejson": "^2.5.1",
+    "prettier-plugin-packagejson": "^2.5.2",
     "pretty-quick": "^3.3.1",
     "query-string": "^6.14.1",
-    "rc-field-form": "^2.2.1",
+    "rc-field-form": "^2.4.0",
     "rc-footer": "^0.6.8",
     "rc-resize-observer": "^1.4.0",
     "rc-steps": "^6.0.1",
-    "rc-table": "^7.47.1",
+    "rc-table": "^7.47.5",
     "rc-util": "^5.43.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -154,16 +154,16 @@
     "stylelint": "^13.13.1",
     "timezone-mock": "^1.3.6",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.4",
-    "umi": "^4.3.11",
+    "typescript": "^5.6.2",
+    "umi": "^4.3.20",
     "umi-request": "^1.4.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vitest": "^1.6.0",
     "write-pkg": "^4.0.0",
     "xhr-mock": "^2.5.1",
     "yorkie": "^2.0.0",
-    "zustand": "^4.5.4"
+    "zustand": "^4.5.5"
   },
   "gitHooks": {
     "pre-commit": "pretty-quick --staged",

packages/field/src/index.tsx

@@ -672,7 +672,7 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
 };
 
 export const ProField = React.forwardRef(
-  ProFieldComponent,
+  ProFieldComponent as any,
 ) as typeof ProFieldComponent;
 
 export default ProField;

packages/form/src/BaseForm/createField.tsx

@@ -76,7 +76,7 @@ function createField<P extends ProFormFieldItemProps = any>(
       ignoreWidth,
       defaultProps,
       ...defaultFormItemProps
-    } = { ...props?.filedConfig, ...config } || {};
+    } = { ...props?.filedConfig, ...config };
     const {
       label,
       tooltip,

packages/layout/package.json

@@ -43,7 +43,7 @@
     "classnames": "^2.3.2",
     "lodash-es": "^4.17.21",
     "omit.js": "^2.0.2",
-    "path-to-regexp": "2.4.0",
+    "path-to-regexp": "8.1.0",
     "rc-resize-observer": "^1.1.0",
     "rc-util": "^5.0.6",
     "swr": "^2.0.0",

packages/layout/src/components/SiderMenu/BaseMenu.tsx

@@ -343,6 +343,7 @@ class MenuUtil {
       disabled: item.disabled,
       key: item.key! || item.path!,
       onClick: item.onTitleClick,
+      // eslint-disable-next-line react/no-is-mounted
       label: this.getMenuItemPath(item, level, noGroupLevel),
     };
   };

packages/layout/src/components/layout.$tab-api.md

@@ -117,4 +117,4 @@ PageContainer 配置 `fixedHeader` 可以将吸顶 header。
 
 <code src="../demos/error-boundaries.tsx" title="layout 自带了错误处理功能，防止白屏" iframe="650"></code>
 
-<code src="../demos/splitMenus.tsx" title="沉浸式导航" debug iframe="650"></code>
+<code src="../demos/splitMenus.tsx" title="splitMenus" debug iframe="650"></code>

packages/layout/src/getPageTitle.ts

@@ -1,4 +1,4 @@
-import pathToRegexp from 'path-to-regexp';
+import { match } from 'path-to-regexp';
 import type { ProSettings } from './defaultSettings';
 import type { MenuDataItem } from './typing';
 
@@ -13,9 +13,17 @@ export const matchParamsPath = (
   // Internal logic use breadcrumbMap to ensure the order
   // 内部逻辑使用 breadcrumbMap 来确保查询顺序
   if (breadcrumbMap) {
-    const pathKey = [...breadcrumbMap.keys()].find((key) =>
-      pathToRegexp(key).test(pathname),
-    );
+    const pathKey = [...breadcrumbMap.keys()].find((key) => {
+      try {
+        if (key.startsWith('http')) {
+          return false;
+        }
+        return match(key)(pathname);
+      } catch (error) {
+        console.log('key', key, error);
+        return false;
+      }
+    });
     if (pathKey) {
       return breadcrumbMap.get(pathKey) as BreadcrumbItem;
     }
@@ -24,9 +32,17 @@ export const matchParamsPath = (
   // External uses use breadcrumb
   // 外部用户使用 breadcrumb 参数
   if (breadcrumb) {
-    const pathKey = Object.keys(breadcrumb).find((key) =>
-      pathToRegexp(key).test(pathname),
-    );
+    const pathKey = Object.keys(breadcrumb).find((key) => {
+      try {
+        if (key?.startsWith('http')) {
+          return false;
+        }
+        return match(key)(pathname);
+      } catch (error) {
+        console.log('key', key, error);
+        return false;
+      }
+    });
 
     if (pathKey) {
       return breadcrumb[pathKey];

packages/layout/src/utils/getBreadcrumbProps.tsx

@@ -6,7 +6,7 @@ import type {
   ItemType,
 } from 'antd/lib/breadcrumb/Breadcrumb';
 import type H from 'history';
-import pathToRegexp from 'path-to-regexp';
+import { match } from 'path-to-regexp';
 import type { ProLayoutProps } from '../ProLayout';
 import type { ProSettings } from '../defaultSettings';
 import type { MenuDataItem, MessageDescriptor, WithFalse } from '../typing';
@@ -78,9 +78,17 @@ export const getBreadcrumb = (
     // Find the first matching path in the order defined by route config
     // 按照 route config 定义的顺序找到第一个匹配的路径
     const keys: string[] = Array.from(breadcrumbMap.keys()) || [];
-    const targetPath = keys.find((path) =>
+    const targetPath = keys.find(
+      (path) => {
+        try {
+          if (path?.startsWith('http')) return false;
+          return match(path.replace('?', ''))(url);
+        } catch (error) {
+          console.log('path', path, error);
+          return false;
+        }
+      },
       // remove ? ,不然会重复
-      pathToRegexp(path.replace('?', '')).test(url),
     );
     if (targetPath) breadcrumbItem = breadcrumbMap.get(targetPath);
   }

packages/table/src/components/EditableTable/index.tsx

@@ -135,7 +135,7 @@ function RecordCreator<T = Record<string, any>>(
       // 如果返回了false，接触掉默认行为
       const isOk = await children.props.onClick?.(e);
       if (isOk === false) return;
-      actionRef?.current?.addEditRecord(record, {
+      actionRef?.current?.addEditRecord(record as any, {
         position,
         newRecordType,
         parentKey: parentKey as React.Key,

packages/table/src/utils/cellRenderToFromItem.tsx

@@ -12,6 +12,7 @@ import {
   runFunction,
 } from '@ant-design/pro-utils';
 import { Form } from 'antd';
+import { AnyObject } from 'antd/es/_util/type';
 import get from 'rc-util/lib/utils/get';
 import React, {
   useCallback,
@@ -40,7 +41,7 @@ export const spellNamePath = (...rest: any[]): React.Key[] => {
     .flat(1);
 };
 
-type CellRenderFromItemProps<T> = {
+type CellRenderFromItemProps<T extends AnyObject> = {
   text: string | number | (string | number)[];
   valueType: ProColumnType['valueType'];
   index: number;
@@ -63,7 +64,9 @@ type CellRenderFromItemProps<T> = {
   editableUtils: UseEditableUtilType;
 };
 
-const CellRenderFromItem = <T,>(props: CellRenderFromItemProps<T>) => {
+const CellRenderFromItem = <T extends AnyObject>(
+  props: CellRenderFromItemProps<T>,
+) => {
   const formContext = useContext(FieldContext);
 
   const {
@@ -83,7 +86,7 @@ const CellRenderFromItem = <T,>(props: CellRenderFromItemProps<T>) => {
 
   const key = recordKey || index;
   const realIndex = useMemo(
-    () => editableUtils?.getRealIndex?.(rowData) ?? index,
+    () => editableUtils?.getRealIndex?.(rowData!) ?? index,
     [editableUtils, index, rowData],
   );
   const [formItemName, setName] = useState<React.Key[]>(() =>
@@ -266,7 +269,7 @@ const CellRenderFromItem = <T,>(props: CellRenderFromItemProps<T>) => {
  * @param text
  * @param valueType
  */
-function cellRenderToFromItem<T>(
+function cellRenderToFromItem<T extends AnyObject>(
   config: CellRenderFromItemProps<T>,
 ): React.ReactNode {
   const { text, valueType, rowData, columnProps, index } = config;
@@ -289,7 +292,7 @@ function cellRenderToFromItem<T>(
     return cellRenderToFromItem({
       ...config,
       valueType: valueType(rowData, config.type) || 'text',
-    });
+    } as any);
   }
 
   const columnKey = columnProps?.key || columnProps?.dataIndex?.toString();

packages/table/src/utils/columnRender.tsx

@@ -6,6 +6,7 @@ import type {
   UseEditableUtilType,
 } from '@ant-design/pro-utils';
 import { LabelIconTip, genCopyable, isNil } from '@ant-design/pro-utils';
+import { AnyObject } from 'antd/es/_util/type';
 import get from 'rc-util/lib/utils/get';
 import React from 'react';
 import { isMergeCell } from '.';
@@ -95,7 +96,7 @@ export const defaultOnFilter = (
  *
  * @param param0
  */
-export function columnRender<T>({
+export function columnRender<T extends AnyObject>({
   columnProps,
   text,
   rowData,

packages/table/src/utils/genProColumnToColumn.tsx

@@ -11,6 +11,7 @@ import {
 } from '@ant-design/pro-utils';
 import type { TableColumnType, TableProps } from 'antd';
 import { Table } from 'antd';
+import { AnyObject } from 'antd/es/_util/type';
 import type { ContainerType } from '../Store/Provide';
 import type { ProColumns } from '../typing';
 import {
@@ -41,7 +42,7 @@ type ColumnToColumnParams<T> = {
  * @param map
  * @param columnEmptyText
  */
-export function genProColumnToColumn<T>(
+export function genProColumnToColumn<T extends AnyObject>(
   params: ColumnToColumnParams<T> & { marginSM: number },
   parents?: ProColumns<T, any>,
 ): ColumnToColumnReturnType<T> {

packages/utils/src/useEditableArray/index.tsx

@@ -3,6 +3,7 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { useIntl } from '@ant-design/pro-provider';
 import type { FormInstance, FormProps } from 'antd';
 import { Form, Popconfirm, message } from 'antd';
+import { AnyObject } from 'antd/es/_util/type';
 import type { NamePath } from 'antd/lib/form/interface';
 import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap';
 import type { GetRowKey } from 'antd/lib/table/interface';
@@ -558,7 +559,7 @@ export function defaultActionRender<T>(
  *
  * @param props
  */
-export function useEditableArray<RecordType>(
+export function useEditableArray<RecordType extends AnyObject>(
   props: RowEditableConfig<RecordType> & {
     getRowKey: GetRowKey<RecordType>;
     dataSource: RecordType[];