@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/lib/card/components/CheckCard/style.js

@@ -27,6 +27,20 @@ const proCheckCardDisabled = token => ({
     }
   }
 });
+
+/**
+ * 选中态右上角小三角的公共形态：宽高 0、定位、圆角等所有 3 个状态共用的部分。
+ * 颜色 / 透明度由调用方覆盖。
+ */
+const genCheckedAfterBase = token => ({
+  position: 'absolute',
+  insetBlockStart: 2,
+  insetInlineEnd: 2,
+  width: 0,
+  height: 0,
+  borderStartEndRadius: token.borderRadius,
+  content: "''"
+});
 const cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading', {
   '0%': {
     backgroundPosition: '0 50%'
@@ -44,9 +58,9 @@ const genProStyle = token => {
       boxSizing: 'border-box',
       position: 'relative',
       display: 'inline-block',
-      width: '320px',
-      marginInlineEnd: '16px',
-      marginBlockEnd: '16px',
+      width: 320,
+      marginInlineEnd: token.margin,
+      marginBlockEnd: token.margin,
       color: token.colorText,
       fontSize: token.fontSize,
       lineHeight: token.lineHeight,
@@ -57,17 +71,11 @@ const genProStyle = token => {
       cursor: 'pointer',
       transition: `all 0.3s`,
       '&:after': {
-        position: 'absolute',
-        insetBlockStart: 2,
-        insetInlineEnd: 2,
-        width: 0,
-        height: 0,
+        ...genCheckedAfterBase(token),
         opacity: 0,
-        transition: 'all 0.3s ' + token.motionEaseInOut,
-        borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
-        borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
-        borderStartEndRadius: `${token.borderRadius}px`,
-        content: "''"
+        transition: `all 0.3s ${token.motionEaseInOut}`,
+        borderBlockEnd: `${token.borderRadius + 4}px solid transparent`,
+        borderInlineStart: `${token.borderRadius + 4}px solid transparent`
       },
       '&:last-child': {
         marginInlineEnd: 0
@@ -116,25 +124,18 @@ const genProStyle = token => {
         '&:after': {
           opacity: 1,
           border: `${token.borderRadius + 4}px solid ${token.colorPrimary}`,
-          borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
-          borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
-          borderStartEndRadius: `${token.borderRadius}px`
+          borderBlockEnd: `${token.borderRadius + 4}px solid transparent`,
+          borderInlineStart: `${token.borderRadius + 4}px solid transparent`
         }
       },
       '&-disabled': proCheckCardDisabled(token),
       '&[disabled]': proCheckCardDisabled(token),
       '&-checked&-disabled': {
         '&:after': {
-          position: 'absolute',
-          insetBlockStart: 2,
-          insetInlineEnd: 2,
-          width: 0,
-          height: 0,
+          ...genCheckedAfterBase(token),
           border: `${token.borderRadius + 4}px solid ${token.colorTextDisabled}`,
-          borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
-          borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
-          borderStartEndRadius: `${token.borderRadius}px`,
-          content: "''"
+          borderBlockEnd: `${token.borderRadius + 4}px solid transparent`,
+          borderInlineStart: `${token.borderRadius + 4}px solid transparent`
         }
       },
       '&-lg': {
@@ -215,10 +216,10 @@ const genProStyle = token => {
 };
 function useStyle(prefixCls) {
   return (0, _provider.useStyle)('CheckCard', token => {
-    const proListToken = {
+    const checkCardToken = {
       ...token,
       componentCls: `.${prefixCls}`
     };
-    return [genProStyle(proListToken)];
+    return [genProStyle(checkCardToken)];
   });
 }

package/lib/card/components/Loading/style.js

@@ -36,9 +36,10 @@ const genProStyle = token => {
         }
       },
       [`${token.componentCls}-loading-block`]: {
-        height: '14px',
-        marginBlock: '4px',
-        background: `linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))`,
+        height: 14,
+        marginBlock: token.marginXXS,
+        // 用 token.colorFill* 系列色，跟随主题（含 dark 模式）自动反色
+        background: `linear-gradient(90deg, ${token.colorFillSecondary}, ${token.colorFillTertiary}, ${token.colorFillSecondary})`,
         backgroundSize: '600% 600%',
         borderRadius: token.borderRadius,
         animationName: cardLoading,

package/lib/card/components/Operation/index.d.ts

@@ -12,7 +12,7 @@ export interface ProCardOperationProps {
      * @ignore
      */
     className?: string;
-    children?: any;
+    children?: React.ReactNode;
 }
 declare const ProCardOperation: React.FC<ProCardOperationProps>;
 export default ProCardOperation;

package/lib/card/components/Operation/style.js

@@ -15,9 +15,10 @@ const genProStyle = token => {
       marginBlock: token.marginLG,
       marginInline: 0,
       color: token.colorText,
-      fontWeight: '500',
-      fontSize: '20px',
-      lineHeight: '38px'
+      fontWeight: token.fontWeightStrong,
+      // 对齐 antd 的 H4 标题字号（默认 20px），与 Card title 视觉层级一致
+      fontSize: token.fontSizeHeading4,
+      lineHeight: token.lineHeightHeading4
     }
   };
 };

package/lib/card/components/Statistic/index.d.ts

@@ -25,7 +25,7 @@ export interface StatisticProps extends AntdStatisticProps {
     layout?: 'horizontal' | 'vertical' | 'inline';
     /** 趋势 */
     trend?: 'up' | 'down';
-    children?: any;
+    children?: React.ReactNode;
 }
 declare const Statistic: React.FC<StatisticProps>;
 export default Statistic;

package/lib/card/components/Statistic/style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ProAliasToken } from '../../../provider';
-export interface ProListToken extends ProAliasToken {
+export interface StatisticToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {

package/lib/card/components/Statistic/style.js

@@ -49,19 +49,22 @@ const genProStyle = token => {
       [`${token.antCls}-statistic-title`]: {
         color: token.colorText
       },
+      // 趋势上涨：默认接 antd 的 colorError（中国金融语义：红涨）
+      // 海外业务可通过 ConfigProvider 覆盖 token.colorError 或自定义类名覆盖
       '&-trend-up': {
         [`${token.antCls}-statistic-content`]: {
-          color: '#f5222d',
+          color: token.colorError,
           [`${token.componentCls}-trend-icon`]: {
-            borderBlockEndColor: '#f5222d'
+            borderBlockEndColor: token.colorError
           }
         }
       },
+      // 趋势下降：默认接 antd 的 colorSuccess（中国金融语义：绿跌）
       '&-trend-down': {
         [`${token.antCls}-statistic-content`]: {
-          color: '#389e0d',
+          color: token.colorSuccess,
           [`${token.componentCls}-trend-icon`]: {
-            borderBlockEndColor: '#52c41a'
+            borderBlockEndColor: token.colorSuccess
           }
         }
       },
@@ -97,10 +100,10 @@ const genProStyle = token => {
 };
 function useStyle(prefixCls) {
   return (0, _provider.useStyle)('Statistic', token => {
-    const proListToken = {
+    const statisticToken = {
       ...token,
       componentCls: `.${prefixCls}`
     };
-    return [genProStyle(proListToken)];
+    return [genProStyle(statisticToken)];
   });
 }

package/lib/card/components/StatisticCard/style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ProAliasToken } from '../../../provider';
-export interface ProListToken extends ProAliasToken {
+export interface StatisticCardToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {

package/lib/card/components/StatisticCard/style.js

@@ -35,19 +35,19 @@ const genProStyle = token => {
         }
       },
       '&-footer': {
-        marginBlockStart: 8,
-        paddingBlockStart: '16px',
-        borderBlockStart: `rgba(0, 0, 0, 0.08) solid ${token.colorBorder}`
+        marginBlockStart: token.marginXS,
+        paddingBlockStart: token.padding,
+        borderBlockStart: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
       }
     }
   };
 };
 function useStyle(prefixCls) {
   return (0, _provider.useStyle)('StatisticCard', token => {
-    const proListToken = {
+    const statisticCardToken = {
       ...token,
       componentCls: `.${prefixCls}`
     };
-    return [genProStyle(proListToken)];
+    return [genProStyle(statisticCardToken)];
   });
 }

package/lib/card/typing.d.ts

@@ -63,7 +63,7 @@ type CardPropsBase = Pick<AntdCardProps, 'rootClassName' | 'cover'> & {
     /** 拆分卡片方式 */
     split?: 'vertical' | 'horizontal';
     /** 卡片变体，与 antd Card variant 一致 */
-    variant?: 'outlined' | 'borderless';
+    variant?: 'outlined' | 'borderless' | 'filled';
     /**
      * 鼠标移过时可浮起
      *

package/lib/descriptions/FieldRender.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ProCoreActionType, UseEditableMapUtilType } from '../utils';
+import type { ProFieldValueTypeInput } from '../utils/typing';
+import type { ProDescriptionsColumn } from './typing';
+/**
+ * Descriptions 单列：只读 / 可编辑下的 ProFormField 渲染
+ */
+export declare const FieldRender: React.FC<Omit<ProDescriptionsColumn<any>, 'valueType'> & {
+    text: any;
+    valueType: ProFieldValueTypeInput;
+    entity: any;
+    action: ProCoreActionType<any>;
+    index: number;
+    editableUtils?: UseEditableMapUtilType;
+    emptyText?: React.ReactNode;
+}>;

package/lib/descriptions/FieldRender.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldRender = void 0;
+var _icons = require("@ant-design/icons");
+var _react = _interopRequireDefault(require("react"));
+var _form = _interopRequireWildcard(require("../form"));
+var _provider = require("../provider");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Descriptions 单列：只读 / 可编辑下的 ProFormField 渲染
+ */
+const FieldRender = props => {
+  const {
+    valueEnum,
+    action,
+    index,
+    text,
+    entity,
+    mode,
+    render,
+    editableUtils,
+    valueType,
+    plain,
+    dataIndex,
+    request,
+    formItemRender,
+    params,
+    emptyText
+  } = props;
+  const form = _form.default.useFormInstance();
+  const {
+    token
+  } = _provider.proTheme.useToken?.();
+  const fieldConfig = {
+    text,
+    valueEnum,
+    mode: mode || 'read',
+    proFieldProps: {
+      emptyText,
+      render: render ? finText => {
+        return render?.(finText, entity, index, action, {
+          ...props,
+          type: 'descriptions'
+        });
+      } : undefined
+    },
+    ignoreFormItem: true,
+    valueType,
+    request,
+    params,
+    plain
+  };
+  if (mode === 'read' || !mode || valueType === 'option') {
+    const fieldProps = (0, _utils.getFieldPropsOrFormItemProps)(props.fieldProps, undefined, {
+      ...props,
+      rowKey: dataIndex,
+      isEditable: false
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.ProFormField, {
+      name: dataIndex,
+      ...fieldConfig,
+      fieldProps: fieldProps
+    });
+  }
+  const renderDom = () => {
+    const formItemProps = (0, _utils.getFieldPropsOrFormItemProps)(props.formItemProps, form, {
+      ...props,
+      rowKey: dataIndex,
+      isEditable: true
+    });
+    const fieldProps = (0, _utils.getFieldPropsOrFormItemProps)(props.fieldProps, form, {
+      ...props,
+      rowKey: dataIndex,
+      isEditable: true
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: 'flex',
+        gap: token.marginXS,
+        alignItems: 'baseline'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.InlineErrorFormItem, {
+        name: dataIndex,
+        ...formItemProps,
+        style: {
+          margin: 0,
+          ...(formItemProps?.style || {})
+        },
+        initialValue: text || formItemProps?.initialValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.ProFormField, {
+          ...fieldConfig,
+          proFieldProps: {
+            ...fieldConfig.proFieldProps
+          },
+          formItemRender: formItemRender ? () => formItemRender?.({
+            ...props,
+            type: 'descriptions'
+          }, {
+            isEditable: true,
+            recordKey: dataIndex,
+            record: form.getFieldValue([dataIndex].flat(1)),
+            defaultRender: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.ProFormField, {
+              ...fieldConfig,
+              fieldProps: fieldProps
+            }),
+            type: 'descriptions'
+          }, form) : undefined,
+          fieldProps: fieldProps
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          maxHeight: token.controlHeight,
+          alignItems: 'center',
+          gap: token.marginXS
+        },
+        children: editableUtils?.actionRender?.(dataIndex || index, {
+          cancelText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {}),
+          saveText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {}),
+          deleteText: false
+        })
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      marginTop: -5,
+      marginBottom: -5,
+      marginLeft: 0,
+      marginRight: 0,
+      width: '100%'
+    },
+    children: renderDom()
+  });
+};
+exports.FieldRender = FieldRender;

package/lib/descriptions/ProDescriptions.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ProDescriptionsProps } from './typing';
+declare const ProDescriptions: <RecordType extends Record<string, any>, ValueType = "text">(props: ProDescriptionsProps<RecordType, ValueType>) => import("react").JSX.Element;
+export { ProDescriptions };
+export default ProDescriptions;

package/lib/descriptions/ProDescriptions.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProDescriptions = void 0;
+var _antd = require("antd");
+var _react = require("react");
+var _ValueTypeToComponent = _interopRequireDefault(require("../field/ValueTypeToComponent"));
+var _form = _interopRequireDefault(require("../form"));
+var _provider = _interopRequireWildcard(require("../provider"));
+var _skeleton = _interopRequireDefault(require("../skeleton"));
+var _utils = require("../utils");
+var _schemaToDescriptionsItem = require("./schemaToDescriptionsItem");
+var _useFetchData = _interopRequireDefault(require("./useFetchData"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DefaultProDescriptionsDom = dom => dom.children;
+const ProDescriptions = props => {
+  const {
+    request,
+    columns,
+    params,
+    dataSource,
+    onDataSourceChange,
+    formProps,
+    editable,
+    loading,
+    onLoadingChange,
+    actionRef,
+    onRequestError,
+    emptyText: _emptyText,
+    ...rest
+  } = props;
+  const proContext = (0, _react.useContext)(_provider.default);
+  const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const action = (0, _useFetchData.default)(async () => {
+    const data = request ? await request(params) : {
+      data: {}
+    };
+    return data;
+  }, {
+    onRequestError,
+    effects: [(0, _utils.stringify)(params)],
+    manual: !request,
+    dataSource,
+    loading,
+    onLoadingChange,
+    onDataSourceChange
+  });
+  const editableUtils = (0, _utils.useEditableMap)({
+    ...props.editable,
+    childrenColumnName: undefined,
+    dataSource: action.dataSource,
+    setDataSource: action.setDataSource
+  });
+  const valueTypeMap = (0, _react.useMemo)(() => ({
+    ...proContext.valueTypeMap,
+    ..._ValueTypeToComponent.default
+  }), [proContext.valueTypeMap]);
+  const coreAction = (0, _react.useMemo)(() => {
+    const base = {
+      reload: action.reload,
+      dataSource: action.dataSource,
+      setDataSource: action.setDataSource
+    };
+    if (editable && editableUtils) {
+      return {
+        ...base,
+        ...editableUtils
+      };
+    }
+    return base;
+  }, [action.reload, action.dataSource, action.setDataSource, editable, editableUtils]);
+  (0, _react.useEffect)(() => {
+    if (actionRef) {
+      actionRef.current = coreAction;
+    }
+  }, [actionRef, coreAction]);
+  const schemaContent = (0, _react.useMemo)(() => {
+    const resolvedColumns = (columns || []).filter(item => {
+      if (!item) return false;
+      if (item?.valueType && ['index', 'indexBorder'].includes(item?.valueType)) {
+        return false;
+      }
+      return !item?.hideInDescriptions;
+    }).sort((a, b) => {
+      const orderA = a.order;
+      const orderB = b.order;
+      if (orderA != null || orderB != null) {
+        return (orderB ?? 0) - (orderA ?? 0);
+      }
+      return (b.index || 0) - (a.index || 0);
+    });
+    return (0, _schemaToDescriptionsItem.schemaToDescriptionsItem)(resolvedColumns, action.dataSource, coreAction, editable ? editableUtils : undefined, props.emptyText);
+  }, [columns, action.dataSource, coreAction, editable, editableUtils, props.emptyText]);
+  if (action.loading || action.loading === undefined && request) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
+      type: "descriptions",
+      list: false,
+      pageHeader: false
+    });
+  }
+  const {
+    options,
+    children
+  } = schemaContent;
+  const FormComponent = editable ? _form.default : DefaultProDescriptionsDom;
+  let title = null;
+  if (rest.title || rest.tooltip) {
+    title = /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
+      label: rest.title,
+      tooltip: rest.tooltip
+    });
+  }
+  const className = context.getPrefixCls('pro-descriptions');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.ErrorBoundary, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
+      valueTypeMap: valueTypeMap,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormComponent, {
+        form: props.editable?.form,
+        component: false,
+        submitter: false,
+        ...formProps,
+        onFinish: undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Descriptions, {
+          className: className,
+          ...rest,
+          styles: {
+            content: {
+              minWidth: 0
+            }
+          },
+          extra: rest.extra ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+            children: [options, rest.extra]
+          }) : options,
+          title: title,
+          items: children
+        })
+      }, "form")
+    })
+  });
+};
+exports.ProDescriptions = ProDescriptions;
+var _default = exports.default = ProDescriptions;

package/lib/descriptions/getDataFromConfig.d.ts

@@ -0,0 +1,5 @@
+import type { ProDescriptionsColumn } from './typing';
+/**
+ * 根据 dataIndex 从 entity 取值；无 dataIndex 或值为 undefined/null 时用列上的 children
+ */
+export declare function getDataFromConfig(item: ProDescriptionsColumn, entity: Record<string, unknown> | undefined): any;

package/lib/descriptions/getDataFromConfig.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDataFromConfig = getDataFromConfig;
+var _util = require("@rc-component/util");
+/**
+ * 根据 dataIndex 从 entity 取值；无 dataIndex 或值为 undefined/null 时用列上的 children
+ */
+function getDataFromConfig(item, entity) {
+  const {
+    dataIndex
+  } = item;
+  if (dataIndex != null && entity != null) {
+    const data = Array.isArray(dataIndex) ? (0, _util.get)(entity, dataIndex) : entity[dataIndex];
+    if (data !== undefined && data !== null) {
+      return data;
+    }
+  }
+  return item.children;
+}