feat(global-config): add loading config and enhance dialog config

packages/components/config-provider/config-provider.en-US.md

@@ -86,6 +86,7 @@ imageViewer | Object | - | imageViewer global configs。Typescript: `ImageViewer
 input | Object | - | Input global configs。Typescript: `InputConfig` | N
 isContextEffectPlugin | Boolean | false | Whether the global configuration affects the components used by the functional invocation method | N
 list | Object | - | List global configs。Typescript: `ListConfig` | N
+loading | Object | - | Loading global configs。Typescript: `LoadingConfig` | N
 message | Object | - | Message Component global configs。Typescript: `MessageConfig` | N
 pagination | Object | - | Pagination global configs。Typescript: `PaginationConfig` | N
 popconfirm | Object | - | Popconfirm global configs。Typescript: `PopconfirmConfig` | N
@@ -200,6 +201,8 @@ closeOnEscKeydown | Boolean | true | trigger dialog close on `ESC` keydown | N
 closeOnOverlayClick | Boolean | true | \- | N
 confirm | Object | - | Typescript: `string \| ButtonProps` | N
 confirmBtnTheme | Object | - | Typescript: `{ default: string; info: string; warning: string; danger: string; success: string; }` | N
+placement | String | top | options: top/center | N
+zIndex | Number | - | \- | N
 
 ### DrawerConfig
 
@@ -251,6 +254,7 @@ name | type | default | description | required
 errorText | String | - | \- | N
 mirrorTipText | String | - | mirror operation text | N
 originalSizeTipText | String | - | original size tips | N
+previewText | String | - | preview text | N
 rotateTipText | String | - | rotate operation text | N
 
 ### InputConfig
@@ -268,6 +272,12 @@ name | type | default | description | required
 loadingMoreText | String | - | \- | N
 loadingText | String | - | \- | N
 
+### LoadingConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+`LoadingProps` | \- | - | extends `LoadingProps` | N
+
 ### MessageConfig
 
 name | type | default | description | required
@@ -286,7 +296,7 @@ total | String | - | \- | N
 
 name | params | return | description
 -- | -- | -- | --
-jumper | `(jumperProps: JumperProps)` | `TNode<JumperProps>` | [see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts)。<br/>`interface JumperProps { current: number; pageCount: number; onChange: (current: number) => void; }`<br/>
+jumper | `(jumperProps: JumperProps)` | `TNode<JumperProps>` | [see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。<br/>`interface JumperProps { current: number; pageCount: number; onChange: (current: number) => void; }`<br/>
 
 ### PopconfirmConfig
 

packages/components/config-provider/config-provider.md

@@ -86,6 +86,7 @@ imageViewer | Object | - | 图片预览器全局配置。TS 类型：`ImageViewe
 input | Object | - | 输入框组件全局配置。TS 类型：`InputConfig` | N
 isContextEffectPlugin | Boolean | false | 全局配置是否影响函数式调用方法使用的组件  | N
 list | Object | - | 列表组件全局配置。TS 类型：`ListConfig` | N
+loading | Object | - | 加载中组件全局配置。TS 类型：`LoadingConfig` | N
 message | Object | - | 消息组件全局配置。TS 类型：`MessageConfig` | N
 pagination | Object | - | 分页组件全局配置。TS 类型：`PaginationConfig` | N
 popconfirm | Object | - | 气泡确认框全局配置。TS 类型：`PopconfirmConfig` | N
@@ -200,6 +201,8 @@ closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发对话框关闭
 closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发关闭事件 | N
 confirm | Object | - | 确认按钮风格。TS 类型：`string \| ButtonProps` | N
 confirmBtnTheme | Object | - | 确认按钮主题色，即 Dialog 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; info: string; warning: string; danger: string; success: string; }` | N
+placement | String | top | 全局配置的对话框位置，垂直水平居中显示 和 靠近顶部（top:20%）显示。可选项：top/center | N
+zIndex | Number | - | 对话框层级，默认为 2500 | N
 
 ### DrawerConfig
 
@@ -251,6 +254,7 @@ replaceImageSrc | Function | - | 统一替换图片 `src` 地址，参数为组
 errorText | String | - | 全局语言配置，默认为 “图片加载失败，可尝试重新加载” | N
 mirrorTipText | String | - | 全局语言配置，默认为 “镜像” | N
 originalSizeTipText | String | - | 全局语言配置，默认为 “原始大小” | N
+previewText | String | - | 全局语言配置，默认为 “预览” | N
 rotateTipText | String | - | 全局语言配置，默认为 “旋转” | N
 
 ### InputConfig
@@ -268,6 +272,12 @@ placeholder | String | - | 语言配置，“请输入”占位符描述文本 |
 loadingMoreText | String | - | 语言配置，'点击加载更多' 描述文本 | N
 loadingText | String | - | 语言配置，'正在加载中，请稍后' 描述文本 | N
 
+### LoadingConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+`LoadingProps` | \- | - | 继承 `LoadingProps` 中的全部属性 | N
+
 ### MessageConfig
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -286,7 +296,7 @@ total | String | - | 语言配置，数据总条数文本，示例：`'共 {tota
 
 名称 | 参数 | 返回值 | 描述
 -- | -- | -- | --
-jumper | `(jumperProps: JumperProps)` | `TNode<JumperProps>` | 自定义跳转组件。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts)。<br/>`interface JumperProps { current: number; pageCount: number; onChange: (current: number) => void; }`<br/>
+jumper | `(jumperProps: JumperProps)` | `TNode<JumperProps>` | 自定义跳转组件。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。<br/>`interface JumperProps { current: number; pageCount: number; onChange: (current: number) => void; }`<br/>
 
 ### PopconfirmConfig
 

packages/components/config-provider/type.ts

@@ -9,8 +9,9 @@ import { CalendarController } from '../calendar';
 import { ButtonProps } from '../button';
 import { FormErrorMessage } from '../form';
 import { ImageProps } from '../image';
+import { LoadingProps } from '../loading';
 import { MessageOptions } from '../message';
-import { TNode, TElement, SizeEnum, AttachNode } from '../common';
+import type { TNode, TElement, SizeEnum, AttachNode } from '../common';
 
 export interface TdConfigProviderProps {
   /**
@@ -110,6 +111,10 @@ export interface GlobalConfigProvider {
    * 列表组件全局配置
    */
   list?: ListConfig;
+  /**
+   * 加载中组件全局配置
+   */
+  loading?: LoadingConfig;
   /**
    * 消息组件全局配置
    */
@@ -457,6 +462,15 @@ export interface DialogConfig {
    * 确认按钮主题色，即 Dialog 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }
    */
   confirmBtnTheme?: { default: string; info: string; warning: string; danger: string; success: string };
+  /**
+   * 全局配置的对话框位置，垂直水平居中显示 和 靠近顶部（top:20%）显示
+   * @default top
+   */
+  placement?: 'top' | 'center';
+  /**
+   * 对话框层级，默认为 2500
+   */
+  zIndex?: number;
 }
 
 export interface DrawerConfig {
@@ -573,15 +587,15 @@ export interface ImageViewerConfig {
    */
   originalSizeTipText?: string;
   /**
-   * 全局语言配置，默认为 “旋转”
+   * 全局语言配置，默认为 “预览”
    * @default ''
    */
-  rotateTipText?: string;
+  previewText?: string;
   /**
-   * 全局语言配置，默认为 “预览”
+   * 全局语言配置，默认为 “旋转”
    * @default ''
    */
-  previewText?: string;
+  rotateTipText?: string;
 }
 
 export interface InputConfig {
@@ -615,6 +629,8 @@ export interface ListConfig {
   loadingText?: string;
 }
 
+export interface LoadingConfig extends LoadingProps {}
+
 export interface MessageConfig extends MessageOptions {}
 
 export interface PaginationConfig {

packages/components/dialog/Dialog.tsx

@@ -27,10 +27,14 @@ export interface DialogProps extends TdDialogProps, StyledProps {
 }
 
 const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
-  const props = useDefaultProps<DialogProps>(originalProps, dialogDefaultProps);
+  const { classPrefix, dialog: globalDialogConfig } = useConfig();
+  const props = useDefaultProps<DialogProps>(originalProps, {
+    ...dialogDefaultProps,
+    placement: globalDialogConfig?.placement ?? dialogDefaultProps.placement,
+    zIndex: globalDialogConfig?.zIndex,
+  });
   const { children, ...restProps } = props;
 
-  const { classPrefix } = useConfig();
   const componentCls = `${classPrefix}-dialog`;
 
   const wrapRef = useRef<HTMLDivElement>(null);
@@ -73,6 +77,8 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
     onCloseBtnClick,
     forceRender,
     lazy,
+    top,
+    placement,
     ...restState
   } = state;
 
@@ -244,11 +250,11 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
               className={classNames(
                 isFullScreen ? `${componentCls}__position_fullscreen` : `${componentCls}__position`,
                 {
-                  [`${componentCls}--top`]: !isFullScreen && (!!props.top || props.placement === 'top'),
-                  [`${componentCls}--center`]: !isFullScreen && props.placement === 'center' && !props.top,
+                  [`${componentCls}--top`]: !isFullScreen && (!!top || placement === 'top'),
+                  [`${componentCls}--center`]: !isFullScreen && placement === 'center' && !top,
                 },
               )}
-              style={{ paddingTop: isFullScreen ? undefined : pxCompat(props.top) }}
+              style={{ paddingTop: isFullScreen ? undefined : pxCompat(top) }}
               onClick={onMaskClick}
             >
               <CSSTransition

packages/components/dialog/__tests__/dialog.test.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { fireEvent, mockTimeout, render, vi } from '@test/utils';
 import userEvent from '@testing-library/user-event';
 
+import { ConfigContext } from '../../config-provider';
+import { defaultGlobalConfig } from '../../config-provider/ConfigContext';
 import Dialog from '../index';
 import { DialogPlugin } from '../plugin';
 
@@ -195,4 +197,42 @@ describe('Dialog组件测试', () => {
 
     expect(container.querySelector('.t-dialog__header')).toBeNull();
   });
+
+  test('global dialog placement and zIndex works', async () => {
+    render(
+      <ConfigContext.Provider
+        value={{
+          globalConfig: {
+            ...defaultGlobalConfig,
+            dialog: { ...(defaultGlobalConfig.dialog || {}), placement: 'center', zIndex: 4321 },
+          },
+        }}
+      >
+        <Dialog header="Global Config" body="This is a dialog" visible />
+      </ConfigContext.Provider>,
+    );
+
+    expect(document.querySelector('.t-dialog--center')).toBeInTheDocument();
+    expect(document.querySelector('.t-dialog--top')).not.toBeInTheDocument();
+    expect(document.querySelector('.t-dialog__ctx')).toHaveStyle({ zIndex: '4321' });
+  });
+
+  test('dialog props should override global dialog config', async () => {
+    render(
+      <ConfigContext.Provider
+        value={{
+          globalConfig: {
+            ...defaultGlobalConfig,
+            dialog: { ...(defaultGlobalConfig.dialog || {}), placement: 'center', zIndex: 4321 },
+          },
+        }}
+      >
+        <Dialog header="Global Config" body="This is a dialog" visible placement="top" zIndex={1234} />
+      </ConfigContext.Provider>,
+    );
+
+    expect(document.querySelector('.t-dialog--top')).toBeInTheDocument();
+    expect(document.querySelector('.t-dialog--center')).not.toBeInTheDocument();
+    expect(document.querySelector('.t-dialog__ctx')).toHaveStyle({ zIndex: '1234' });
+  });
 });

packages/components/image-viewer/__tests__/__snapshots__/image-viewer.test.tsx.snap

@@ -3341,7 +3341,6 @@ exports[`ImageViewer 快照测试 > modeless 模式 > image-viewer-modeless 1`]
         >
           <div
             class="t-dialog t-dialog--default t-dialog-zoom-appear t-dialog-zoom-appear-active"
-            placement="center"
             style="display: block; transform-origin: 0px 0px;"
           >
             <div
@@ -3695,7 +3694,6 @@ exports[`ImageViewer 快照测试 > modeless 模式切换图片 > image-viewer-m
         >
           <div
             class="t-dialog t-dialog--default t-dialog-zoom-appear t-dialog-zoom-appear-active"
-            placement="center"
             style="display: block; transform-origin: 0px 0px;"
           >
             <div

packages/components/loading/Loading.tsx

@@ -15,6 +15,7 @@ import type { TdLoadingProps } from './type';
 export interface LoadingProps extends TdLoadingProps, StyledProps {}
 
 const Loading: React.FC<LoadingProps> = (props) => {
+  const { classPrefix, loading: globalLoadingConfig } = useConfig();
   const {
     attach,
     indicator,
@@ -31,12 +32,10 @@ const Loading: React.FC<LoadingProps> = (props) => {
     zIndex,
     className,
     style,
-  } = useDefaultProps<LoadingProps>(props, loadingDefaultProps);
+  } = useDefaultProps<LoadingProps>(props, { ...loadingDefaultProps, ...globalLoadingConfig });
 
   const [showLoading, setShowLoading] = useState(() => (delay ? false : loading));
 
-  const { classPrefix } = useConfig();
-
   const name = `${classPrefix}-loading`;
   const centerClass = `${classPrefix}-loading--center`;
   const inheritColorClass = `${classPrefix}-loading--inherit-color`;

packages/components/loading/__tests__/loading.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { fireEvent, render } from '@test/utils';
 
+import { ConfigContext } from '../../config-provider';
+import { defaultGlobalConfig } from '../../config-provider/ConfigContext';
 import Loading from '../Loading';
 import { LoadingPlugin as loading } from '../plugin';
 
@@ -43,6 +45,42 @@ describe('Loading 组件测试', () => {
     expect(container.querySelector('.t-size-m')).toBeNull();
   });
 
+  test('global loading config works', async () => {
+    const { container } = render(
+      <ConfigContext.Provider
+        value={{
+          globalConfig: {
+            ...defaultGlobalConfig,
+            loading: { text: '全局加载中', size: '36px', zIndex: 1234 },
+          },
+        }}
+      >
+        <Loading />
+      </ConfigContext.Provider>,
+    );
+
+    expect(container.querySelector('.t-loading__text')).toHaveTextContent('全局加载中');
+    expect(container.querySelector('.t-loading')).toHaveStyle({ fontSize: '36px', zIndex: '1234' });
+  });
+
+  test('loading props should override global loading config', async () => {
+    const { container } = render(
+      <ConfigContext.Provider
+        value={{
+          globalConfig: {
+            ...defaultGlobalConfig,
+            loading: { text: '全局加载中', size: '36px' },
+          },
+        }}
+      >
+        <Loading text="局部加载中" size="small" />
+      </ConfigContext.Provider>,
+    );
+
+    expect(container.querySelector('.t-loading__text')).toHaveTextContent('局部加载中');
+    expect(container.querySelector('.t-size-s')).toBeTruthy();
+  });
+
   test('loading plugin works', async () => {
     const { container } = render(
       <div>

packages/tdesign-react/.changelog/pr-4295.md

@@ -0,0 +1,7 @@
+---
+pr_number: 4295
+contributor: uyarn
+---
+
+- feat(ConfigProvider): 新增 `loading` 属性，用于全局配置 Loading 组件的属性 @uyarn ([#4295](https://github.com/Tencent/tdesign-react/pull/4295))
+- feat(ConfigProvider): `dialog` 属性新增 `zIndex` 和 `placement` 配置 @uyarn ([#4295](https://github.com/Tencent/tdesign-react/pull/4295))