@fjyueke/arco-mcp 1.0.0

package/metaData/components/loading/doc.md

@@ -0,0 +1,34 @@
+### 反馈
+
+# 加载 Loading
+
+加载中组件，分为四种类型，`circle`为环形，`arc`为弧线，`spin`为旋转，`dot`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|color|主颜色，如果想使用 css 控制主颜色，可使用公共 mixin \`\.set\-loading\-color(@color)\`|string|-|
+|type|loading类型|"spin" \| "circle" \| "arc" \| "dot"|"dot"|
+|list|当类型为\`dot\`或\`spin\`时有效，定义内部各元素的透明度|number\[\]|-|
+|duration|一次loading周期的毫秒数|number|1000|
+|svgKey|区分不同loading组件间的\`\<def\>\`内容|string|-|
+|radius|圆圈半径，类型为\`circle\`或\`arc\`时可用|number|9|
+|stroke|圆圈描边宽度，类型为\`circle\`或\`arc\`或\`spin\`时可用|number|2|
+|filleted|边缘是否为圆角|boolean|true|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> LoadingType
+
+```
+"spin" | "circle" | "arc" | "dot"
+```

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

@@ -0,0 +1,312 @@
+import React, { useState, useEffect, useRef, forwardRef, Ref, useImperativeHandle } from 'react';
+import { cls, isOneOf } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { getStyleWithVendor, useGenSvgKey } from '../_helpers';
+
+export type LoadingType = 'spin' | 'circle' | 'arc' | 'dot';
+
+export interface LoadingProps {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 主颜色，如果想使用 css 控制主颜色，可使用公共 mixin `.set-loading-color(@color)`
+     * @en The main color, if you want to use css to control the main color, you can use the public mixin `.set-loading-color(@color)`
+     */
+    color?: string;
+    /**
+     * loading类型
+     * @en Loading type
+     * @default "dot"
+     */
+    type?: LoadingType;
+    /**
+     * 当类型为`dot`或`spin`时有效，定义内部各元素的透明度
+     * @en Valid when the type is `dot` or `spin`, defines the transparency of each element inside
+     */
+    list?: number[];
+    /**
+     * 一次loading周期的毫秒数
+     * @en A loading cycle in millisecond
+     * @default 1000
+     */
+    duration?: number;
+    /**
+     * 区分不同loading组件间的`<def>`内容
+     * @en Distinguish the `<def>` content of different svg
+     */
+    svgKey?: string;
+    /**
+     * 圆圈半径，类型为`circle`或`arc`时可用
+     * @en Circle radius, available when type is `circle` or `arc`
+     * @default 9
+     */
+    radius?: number;
+    /**
+     * 圆圈描边宽度，类型为`circle`或`arc`或`spin`时可用
+     * @en Circle stroke width, available when type is `circle` or `arc` or `spin`
+     * @default 2
+     */
+    stroke?: number;
+    /**
+     * 边缘是否为圆角
+     * @en Whether the edges are rounded
+     * @default true
+     */
+    filleted?: boolean;
+}
+
+export interface LoadingRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+/**
+ * 加载中组件，分为四种类型，`circle`为环形，`arc`为弧线，`spin`为旋转，`dot`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
+ * @en Loading component, divided into four types, `circle` is a ring, `arc` is an arc `spin` is a rotation, and `dot` is a dot. All types can be customized in color, ring and arc types can be customized with coil radius and thickness, and rotation and dot types can be customized with internal element transparency.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 加载
+ * @name_en Loading
+ */
+const Loading = forwardRef((props: LoadingProps, ref: Ref<LoadingRef>) => {
+    const {
+        style,
+        className = '',
+        color,
+        type = 'dot',
+        list,
+        duration = 1000,
+        svgKey: userSetSvgKey = '',
+        radius = 9,
+        stroke = 2,
+        filleted = true,
+    } = props;
+    const [statusList, setStatusList] = useState<number[]>([]);
+    const timerId = useRef(-1);
+    const halfCircle = Math.PI * radius;
+    const circlePos = 0.5 * stroke + radius;
+    const circleSize = radius * 2 + stroke;
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const { svgKey } = useGenSvgKey(userSetSvgKey);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    useEffect(() => {
+        if (type === 'dot' && statusList.length) {
+            const interval = duration / statusList.length;
+            timerId.current = setInterval(
+                (() => {
+                    const newList = [...statusList];
+                    const item = newList.pop();
+                    item && newList.unshift(item);
+                    setStatusList(newList);
+                }) as TimerHandler,
+                interval,
+            );
+        }
+        return () => {
+            if (timerId.current >= 0) {
+                clearInterval(timerId.current);
+            }
+        };
+    }, [type, statusList, duration]);
+
+    useEffect(() => {
+        let newList;
+        if (list && list.length) {
+            newList = list;
+        } else {
+            switch (type) {
+                case 'spin':
+                    newList = [1, 0.1, 0.2286, 0.3572, 0.4858, 0.6144, 0.743, 0.8716];
+                    break;
+                case 'dot':
+                    newList = [0.2, 0.6, 1];
+                    break;
+                default:
+                    newList = [];
+                    break;
+            }
+        }
+        setStatusList(newList);
+    }, [list, type]);
+
+    function renderSpin() {
+        const len = statusList.length;
+        return statusList.map((opacity, index) => (
+            <span
+                key={index}
+                className="spin-cell"
+                style={getStyleWithVendor({
+                    opacity,
+                    transform: `rotate(${index / len}turn)`,
+                    width: stroke,
+                })}
+            >
+                <span
+                    className="spin-cell-inner bg-color-with-config"
+                    style={{
+                        backgroundColor: color,
+                        ...(filleted ? { borderRadius: stroke } : {}),
+                    }}
+                />
+            </span>
+        ));
+    }
+
+    function renderDot() {
+        return statusList.map((opacity, index) => (
+            <span
+                key={index}
+                className={cls('dot-cell', 'bg-color-with-config', { filleted })}
+                style={{ opacity, backgroundColor: color }}
+            />
+        ));
+    }
+
+    function renderCircle() {
+        return (
+            <svg viewBox={`0 0 ${circleSize} ${circleSize}`}>
+                <defs>
+                    <linearGradient id={`grad1-${svgKey}`} x1="0%" y1="0%" x2="100%" y2="0%">
+                        <stop
+                            offset="0%"
+                            className="loading-circle-middle stop-color-with-config"
+                            style={{ stopColor: color }}
+                        />
+                        <stop
+                            offset="100%"
+                            className="loading-circle-start stop-color-with-config"
+                            style={{ stopColor: color }}
+                        />
+                    </linearGradient>
+                    <linearGradient id={`grad2-${svgKey}`} x1="0%" y1="0%" x2="100%" y2="0%">
+                        <stop
+                            offset="0%"
+                            className="loading-circle-middle stop-color-with-config"
+                            style={{ stopColor: color }}
+                        />
+                        <stop
+                            offset="100%"
+                            className="loading-circle-end stop-color-with-config"
+                            style={{ stopColor: color }}
+                        />
+                    </linearGradient>
+                </defs>
+                <circle
+                    cx={circlePos}
+                    cy={circlePos}
+                    r={radius}
+                    stroke={`url(#grad1-${svgKey})`}
+                    strokeWidth={stroke}
+                    strokeDasharray={halfCircle}
+                    strokeDashoffset={halfCircle}
+                    fill="none"
+                />
+                <circle
+                    cx={circlePos}
+                    cy={circlePos}
+                    r={radius}
+                    stroke={`url(#grad2-${svgKey})`}
+                    strokeWidth={stroke}
+                    strokeDasharray={halfCircle}
+                    fill="none"
+                />
+                {filleted ? (
+                    <circle
+                        cx={circlePos * 2 - stroke / 2}
+                        cy={circlePos}
+                        r={stroke / 2}
+                        className="loading-circle-filleted fill-color-with-config"
+                        style={{ fill: color }}
+                    />
+                ) : null}
+            </svg>
+        );
+    }
+
+    function renderArc() {
+        return (
+            <svg viewBox={`0 0 ${circleSize} ${circleSize}`}>
+                <circle
+                    className="arc-bg"
+                    cx={circlePos}
+                    cy={circlePos}
+                    r={radius}
+                    strokeWidth={stroke}
+                    fill="none"
+                />
+                <circle
+                    className="arc-line stroke-color-with-config"
+                    cx={circlePos}
+                    cy={circlePos}
+                    r={radius}
+                    style={{ stroke: color }}
+                    strokeWidth={stroke}
+                    strokeDashoffset={halfCircle * 0.5}
+                    strokeDasharray={`${halfCircle * 0.5} ${halfCircle * 1.5}`}
+                    fill="none"
+                    {...(filleted ? { strokeLinecap: 'round' } : {})}
+                />
+            </svg>
+        );
+    }
+
+    function renderLoadingByType() {
+        switch (type) {
+            case 'spin':
+                return renderSpin();
+            case 'dot':
+                return renderDot();
+            case 'circle':
+                return renderCircle();
+            case 'arc':
+                return renderArc();
+            default:
+                return null;
+        }
+    }
+
+    function getLoadingStyle(): React.CSSProperties {
+        const circleStyle = isOneOf(type, ['circle', 'arc'])
+            ? {
+                  width: circleSize,
+                  height: circleSize,
+              }
+            : {};
+        return getStyleWithVendor({
+            animationDuration: `${duration}ms`,
+            ...circleStyle,
+            ...(style || {}),
+        });
+    }
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <div
+                    className={cls(`${prefixCls}-loading all-border-box`, type, className)}
+                    style={getLoadingStyle()}
+                    ref={domRef}
+                >
+                    {renderLoadingByType()}
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+export default Loading;

package/metaData/components/masking/doc.md

@@ -0,0 +1,93 @@
+### 反馈
+
+# 模态弹窗 Masking
+
+通用模态弹窗，内部内容自定义。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|contentAtCenter|弹窗内容是否居中|boolean|false|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|visible|是否展示菜单（受控）|boolean|必填|
+|close|关闭菜单方法|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|必填|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionType|内容过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|contentTransitionTimeout|内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"top" \| "bottom" \| "left" \| "right"|"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
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|open|打开模态弹窗|(config: MaskingProps) =\> \{ close: () =\> void; update: (newConfig: MaskingProps) =\> void; \}|
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|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|-|
+
+> 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; \}|