@fjyueke/arco-mcp 1.0.0

package/metaData/components/dialog/doc.md

@@ -0,0 +1,200 @@
+### 反馈
+
+# 对话框 Dialog
+
+模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|title|弹窗标题|ReactNode|-|
+|footer|底部按钮配置|FooterButtonOptions\[\]|[]|
+|footerType|底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效|"grid" \| "button"|"grid"|
+|renderFooter|自定义渲染footer|() =\> ReactNode|-|
+|footerCollapseCount|底部按钮大于等于多少个时竖向排布|number|3|
+|titleAlign|标题对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|contentAlign|内容对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|platform|当前所在操作系统，对应不同样式|"ios" \| "android"|跟随当前所在系统|
+|extra|弹窗中的其他元素，比如关闭按钮等|ReactNode|-|
+|contentTransitionType|内容过渡动画类名|string|platform=android 时为"fade"，否则为"fade-scale"|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|contentTransitionTimeout|弹窗内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|450|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|visible|是否展示菜单（受控）|boolean|必填|
+|close|关闭菜单方法|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|必填|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|mask|蒙层 DOM|HTMLDivElement|
+|content|内容 DOM|HTMLDivElement|
+|setCloseScene|在关闭弹窗前修改 onClose 的 scene 参数值|(scene: string) =\> void|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|alert|打开确认框(含一个确认按钮)|(config: AlertOptions & DialogProps) =\> \{ close: () =\> void; update: (newConfig: AlertOptions & DialogProps) =\> void; \}|
+|confirm|打开提示框(含一个确认按钮和一个取消按钮)|(config: ConfirmOptions & AlertOptions) =\> \{ close: () =\> void; update: (newConfig: ConfirmOptions & AlertOptions) =\> void; \}|
+|open|打开常规对话框|(config: DialogProps) =\> \{ close: () =\> void; update: (newConfig: DialogProps) =\> void; \}|
+
+> FooterButtonOptions
+
+|参数|描述|类型|
+|----------|-------------|------|
+|content|按钮内容|ReactNode \| ((locale: ILocale) =\> ReactNode)|
+|className|按钮类名|string|
+|disabled|是否禁用按钮|boolean|
+|onClick|点击按钮事件，返回值为true时可以阻止dialog关闭|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|
+
+> AlertOptions
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|key|组件挂载容器id区分|string|-|
+|onOk|点击确认按钮回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|-|
+|okText|确认按钮文字|ReactNode|-|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|title|弹窗标题|ReactNode|-|
+|footer|底部按钮配置|FooterButtonOptions\[\]|[]|
+|footerType|底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效|"grid" \| "button"|"grid"|
+|renderFooter|自定义渲染footer|() =\> ReactNode|-|
+|footerCollapseCount|底部按钮大于等于多少个时竖向排布|number|3|
+|titleAlign|标题对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|contentAlign|内容对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|platform|当前所在操作系统，对应不同样式|"ios" \| "android"|跟随当前所在系统|
+|extra|弹窗中的其他元素，比如关闭按钮等|ReactNode|-|
+|contentTransitionType|内容过渡动画类名|string|platform=android 时为"fade"，否则为"fade-scale"|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|contentTransitionTimeout|弹窗内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|450|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "ios" \| "android" \| "pc"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ConfirmOptions
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|onCancel|点击取消按钮回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|-|
+|cancelText|取消按钮文字|ReactNode|-|
+|key|组件挂载容器id区分|string|-|
+|onOk|点击确认按钮回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|-|
+|okText|确认按钮文字|ReactNode|-|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|title|弹窗标题|ReactNode|-|
+|footer|底部按钮配置|FooterButtonOptions\[\]|[]|
+|footerType|底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效|"grid" \| "button"|"grid"|
+|renderFooter|自定义渲染footer|() =\> ReactNode|-|
+|footerCollapseCount|底部按钮大于等于多少个时竖向排布|number|3|
+|titleAlign|标题对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|contentAlign|内容对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|platform|当前所在操作系统，对应不同样式|"ios" \| "android"|跟随当前所在系统|
+|extra|弹窗中的其他元素，比如关闭按钮等|ReactNode|-|
+|contentTransitionType|内容过渡动画类名|string|platform=android 时为"fade"，否则为"fade-scale"|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|contentTransitionTimeout|弹窗内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|450|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|

package/metaData/components/dialog/example/index.tsx

@@ -0,0 +1,328 @@
+import type { Ref, ReactNode } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import type { ILocale } from '@arco-design/mobile-utils';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import type { Promise } from 'es6-promise';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import type { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
+import Masking from '../masking';
+import { alert, confirm, open } from './methods';
+import { useSystem } from '../_helpers';
+
+export * from './methods';
+
+export interface FooterButtonOptions {
+    /**
+     * 按钮内容
+     * @en Button content
+     */
+    content: ReactNode | ((locale: ILocale) => ReactNode);
+    /**
+     * 按钮类名
+     * @en Button classname
+     *  */
+    className?: string;
+    /**
+     * 是否禁用按钮
+     * @en Whether to disable button
+     *  */
+    disabled?: boolean;
+    /**
+     * 点击按钮事件，返回值为true时可以阻止dialog关闭
+     * @en Button clicking event, when the return value is true, the dialog can be prevented from closing
+     *  */
+    onClick?: (
+        e: React.MouseEvent<HTMLElement, MouseEvent>,
+    ) => (void | boolean) | Promise<void | boolean>;
+}
+
+export interface DialogProps extends MaskingCommonProps {
+    /**
+     * 弹窗标题
+     * @en Dialog title
+     * */
+    title?: ReactNode;
+    /**
+     * 底部按钮配置
+     * @en Bottom button configuration
+     * @default []
+     */
+    footer?: FooterButtonOptions[];
+    /**
+     * 底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效
+     * @en Bottom button style, grid indicates the banner style, button indicates the button style, valid when platform = ios
+     * @default "grid"
+     */
+    footerType?: 'grid' | 'button';
+    /**
+     * 自定义渲染footer
+     * @en Custom rendering footer
+     * */
+    renderFooter?: () => ReactNode;
+    /**
+     * 底部按钮大于等于多少个时竖向排布
+     * @en Vertical arrangement when the number of buttons at the bottom is greater than or equal to the set value
+     * @default 3
+     */
+    footerCollapseCount?: number;
+    /**
+     * 标题对齐方向
+     * @en Title alignment
+     * @default platform=android 时为"left"，否则为"center"
+     * @default_en "left" when platform=android, "center" otherwise
+     */
+    titleAlign?: 'left' | 'center' | 'right';
+    /**
+     * 内容对齐方向
+     * @en Content alignment
+     * @default platform=android 时为"left"，否则为"center"
+     * @default_en "left" when platform=android, "center" otherwise
+     */
+    contentAlign?: 'left' | 'center' | 'right';
+    /**
+     * 当前所在操作系统，对应不同样式
+     * @en The current operating system, corresponding to different styles
+     * @default 跟随当前所在系统
+     * @default_en Follow the system
+     */
+    platform?: 'ios' | 'android';
+    /**
+     * 弹窗中的其他元素，比如关闭按钮等
+     * @en Other elements in the dialog, such as the close button, etc.
+     * */
+    extra?: ReactNode;
+    /**
+     * 内容过渡动画类名
+     * @en Content transition animation classname
+     * @default platform=android 时为"fade"，否则为"fade-scale"
+     * @default_en "fade" when platform=android, "fade-scale" otherwise
+     */
+    contentTransitionType?: MaskingCommonProps['contentTransitionType'];
+    /**
+     * 蒙层动画时长
+     * @en Mask animation duration
+     * @default 300
+     */
+    maskTransitionTimeout?: MaskingCommonProps['maskTransitionTimeout'];
+    /**
+     * 弹窗内容动画时长
+     * @en Dialog content animation duration
+     * @default 450
+     */
+    contentTransitionTimeout?: MaskingCommonProps['contentTransitionTimeout'];
+}
+
+export interface DialogRef extends MaskingRef {}
+
+const Dialog = forwardRef((props: DialogProps, ref: Ref<DialogRef>) => {
+    const system = useSystem();
+    const nowSystem = props.platform || system;
+    const {
+        close = () => {},
+        children,
+        title,
+        footer = [],
+        footerType = 'grid',
+        renderFooter,
+        footerCollapseCount = 3,
+        titleAlign = nowSystem === 'android' ? 'left' : 'center',
+        contentAlign = nowSystem === 'android' ? 'left' : 'center',
+        className,
+        maskClass,
+        contentClass,
+        contentStyle,
+        contentTransitionType = nowSystem === 'android' ? 'fade' : 'fade-scale',
+        maskTransitionTimeout = 300,
+        contentTransitionTimeout = nowSystem === 'android' ? 300 : { enter: 450, exit: 150 },
+        extra,
+        ...restProps
+    } = props;
+    const maskingRef = useRef<MaskingRef>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => ({
+        dom: maskingRef.current?.dom || null,
+        mask: maskingRef.current?.mask || null,
+        content: contentRef.current,
+        setCloseScene: maskingRef.current?.setCloseScene || (() => {}),
+    }));
+
+    function handleFooterBtnClick(
+        e: React.MouseEvent<HTMLElement, MouseEvent>,
+        btn: FooterButtonOptions,
+    ) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (btn.disabled) {
+            return;
+        }
+        const result = btn.onClick ? btn.onClick(e) : null;
+        if (!result || typeof result === 'boolean') {
+            !result && close(e);
+        } else if (result && result.then) {
+            result.then(res => !res && close(e));
+        }
+    }
+
+    function renderDialog({ prefixCls, locale }) {
+        const prefix = `${prefixCls}-dialog`;
+        return (
+            <Masking
+                close={close}
+                className={cls(prefix, nowSystem, className)}
+                ref={maskingRef}
+                maskClass={cls(`${prefix}-mask`, maskClass)}
+                contentTransitionType={contentTransitionType}
+                contentClass={cls(`${prefix}-container`)}
+                maskTransitionTimeout={maskTransitionTimeout}
+                contentTransitionTimeout={contentTransitionTimeout}
+                {...restProps}
+            >
+                <div
+                    className={cls(`${prefix}-content`, `${prefix}-part`, nowSystem, contentClass)}
+                    style={contentStyle}
+                    ref={contentRef}
+                >
+                    {title ? (
+                        <div
+                            className={cls(
+                                `${prefix}-header`,
+                                `${prefix}-part`,
+                                titleAlign,
+                                nowSystem,
+                                `system-${system}`,
+                                { 'only-title': !children },
+                            )}
+                        >
+                            {title}
+                        </div>
+                    ) : null}
+                    {children ? (
+                        <div
+                            className={cls(
+                                `${prefix}-body`,
+                                `${prefix}-part`,
+                                contentAlign,
+                                nowSystem,
+                                {
+                                    'sub-title': !title,
+                                },
+                            )}
+                        >
+                            {children}
+                        </div>
+                    ) : null}
+                    {renderFooter || footer.length ? (
+                        <div
+                            className={cls(
+                                `${prefix}-footer`,
+                                `${prefix}-part`,
+                                nowSystem,
+                                `type-${footerType}`,
+                                {
+                                    collapsed: footer.length >= footerCollapseCount,
+                                },
+                            )}
+                        >
+                            {renderFooter
+                                ? renderFooter()
+                                : footer.map((btn, index) => (
+                                      <div
+                                          key={index}
+                                          className={cls(
+                                              'dialog-footer-button',
+                                              btn.className,
+                                              `system-${system}`,
+                                              { disabled: btn.disabled },
+                                          )}
+                                          onClick={e => handleFooterBtnClick(e, btn)}
+                                      >
+                                          {typeof btn.content === 'function'
+                                              ? btn.content(locale)
+                                              : btn.content}
+                                      </div>
+                                  ))}
+                        </div>
+                    ) : null}
+                    {/* 往后追加div元素会使.${prefix}-part:last-of-type失效，因此包裹span元素 */}
+                    {/* Appending the div element afterward will invalidate .${prefix}-part:last-of-type, thus wrapping the span element */}
+                    {extra ? <section>{extra}</section> : null}
+                </div>
+            </Masking>
+        );
+    }
+
+    return <ContextLayout>{renderDialog}</ContextLayout>;
+});
+
+export interface AlertOptions extends Omit<DialogProps, 'visible' | 'close'> {
+    /**
+     * 组件挂载容器id区分
+     * @en Component mount container id distinction
+     * */
+    key?: string;
+    /**
+     * 点击确认按钮回调
+     * @en Callback when clicking OK button
+     * */
+    onOk?: FooterButtonOptions['onClick'];
+    /**
+     * 确认按钮文字
+     * @en Ok button text
+     * */
+    okText?: ReactNode;
+}
+export interface ConfirmOptions extends AlertOptions {
+    /**
+     * 点击取消按钮回调
+     * @en Callback when clicking cancel button
+     * */
+    onCancel?: FooterButtonOptions['onClick'];
+    /**
+     * 取消按钮文字
+     * @en Cancel button text
+     * */
+    cancelText?: ReactNode;
+}
+
+export function methodsGenerator<
+    P extends OpenBaseProps,
+    A extends { key?: string } = AlertOptions,
+    C extends { key?: string } = ConfirmOptions,
+>(Comp: React.FunctionComponent<P>) {
+    return {
+        /**
+         * 打开确认框(含一个确认按钮)
+         * @desc {en} Open a confirmation dialog (with a confirmation button)
+         * @param {AlertOptions & DialogProps} config Configuration
+         * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
+         */
+        alert: alert<A, P>(Comp),
+        /**
+         * 打开提示框(含一个确认按钮和一个取消按钮)
+         * @desc {en} Open a prompt dialog (with a confirm button and a cancel button)
+         * @param {ConfirmOptions & AlertOptions} config Configuration
+         * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
+         */
+        confirm: confirm<C, P>(Comp),
+        /**
+         * 打开常规对话框
+         * @desc {en} Open the general dialog
+         * @param {DialogProps} config Configuration
+         * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
+         */
+        open: open(Comp),
+    };
+}
+
+const DialogWithGlobalContext = CompWithGlobalContext(Dialog);
+
+/**
+ * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 对话框
+ * @name_en Dialog
+ */
+export default componentWrapper(Dialog, methodsGenerator(DialogWithGlobalContext));

package/metaData/components/dialog/example/methods.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ILocale } from '@arco-design/mobile-utils';
+import { getOpenMethod, open as maskingOpen, OpenBaseProps } from '../masking/methods';
+
+export function normalizeAlert<AlertOptions, P>(config: AlertOptions): P {
+    const { onOk, okText, ...restConfig } = config || ({} as any);
+    return {
+        footer: [
+            {
+                content: okText || ((locale: ILocale) => locale.Dialog.okText),
+                className: 'confirm',
+                onClick: onOk,
+            },
+        ],
+        ...restConfig,
+    };
+}
+
+export function normalizeConfirm<ConfirmOptions, P>(config: ConfirmOptions): P {
+    const { onOk, okText, onCancel, cancelText, ...restConfig } = config || ({} as any);
+    return {
+        footer: [
+            {
+                content: cancelText || ((locale: ILocale) => locale.Dialog.cancelText),
+                className: 'cancel',
+                onClick: onCancel,
+            },
+            {
+                content: okText || ((locale: ILocale) => locale.Dialog.okText),
+                className: 'confirm',
+                onClick: onOk,
+            },
+        ],
+        ...restConfig,
+    };
+}
+
+const dialogId = 'ARCO_DIALOG';
+
+export function alert<AlertOptions extends { key?: string }, P extends OpenBaseProps>(
+    Component: React.FunctionComponent<P>,
+    normalize?: <T, Props>(config: T) => Props,
+) {
+    return getOpenMethod<AlertOptions, P>(Component, dialogId, normalize || normalizeAlert);
+}
+
+export function confirm<ConfirmOptions extends { key?: string }, P extends OpenBaseProps>(
+    Component: React.FunctionComponent<P>,
+    normalize?: <T, Props>(config: T) => Props,
+) {
+    return getOpenMethod<ConfirmOptions, P>(Component, dialogId, normalize || normalizeConfirm);
+}
+
+export function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>) {
+    return maskingOpen(Component, dialogId);
+}

package/metaData/components/divider/doc.md

@@ -0,0 +1,25 @@
+### 布局
+
+# 分割线 Divider
+
+划分内容的装饰线
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|hairline|是否使用 0\.5px 线|boolean|true|
+|content|文字|ReactNode|-|
+|align|文字位置|"left" \| "center" \| "right"|'center'|
+|width|分割线宽度（单边），仅在\`align\`为\`center\`时生效|ReactText|-|
+|children|子元素，同 content，优先级低于 content|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|