@fjyueke/arco-mcp 1.0.0

package/metaData/components/avatar/example/group.tsx

@@ -0,0 +1,69 @@
+import React, {
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useRef,
+    useContext,
+    ReactElement,
+} from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { AvatarGroupContextParams, AvatarGroupProps, AvatarGroupRef } from './type';
+
+export const AvatarGroupContext = React.createContext<AvatarGroupContextParams>({
+    isGroup: false,
+    shape: 'circle',
+    size: 'small',
+});
+
+/**
+ * 头像叠层
+ * @en Avatar group
+ */
+export const Group = forwardRef((props: AvatarGroupProps, ref: Ref<AvatarGroupRef | null>) => {
+    const {
+        style = {},
+        className = '',
+        shape = 'circle',
+        size = 'medium',
+        zIndexOrder = 'desc',
+        children,
+    } = props;
+    const { prefixCls } = useContext(GlobalContext);
+    const childrenArr = React.Children.toArray(children);
+    const { length } = childrenArr;
+
+    const domRef = useRef<HTMLDivElement | null>(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    return (
+        <div
+            ref={domRef}
+            style={style}
+            className={cls(
+                className,
+                `${prefixCls}-avatar-group`,
+                `${prefixCls}-avatar-group-size-${size}`,
+                `group-${size}`,
+            )}
+        >
+            <AvatarGroupContext.Provider value={{ isGroup: true, shape, size }}>
+                {childrenArr.map((child, i) => {
+                    const childProps = ((child as ReactElement) || {}).props as any;
+                    const avatarStyle = {
+                        zIndex: zIndexOrder === 'asc' ? i + 1 : length - i,
+                        ...childProps.style,
+                    };
+                    return React.cloneElement(child as ReactElement, {
+                        ...childProps,
+                        style: avatarStyle,
+                    });
+                })}
+            </AvatarGroupContext.Provider>
+        </div>
+    );
+});
+
+export default Group;

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

@@ -0,0 +1,196 @@
+import React, {
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useRef,
+    useContext,
+    useState,
+    useEffect,
+} from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { BaseImage, ImageProps, ImageRef } from '../image';
+import { AvatarProps, AvatarRef } from './type';
+import IconUserFill from '../icon/IconUserFill';
+import { GlobalContext } from '../context-provider';
+import Group, { AvatarGroupContext } from './group';
+
+export * from './type';
+
+export function componentGenerator<
+    P extends ImageProps = ImageProps,
+    R extends ImageRef = ImageRef,
+>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>) {
+    return forwardRef((props: AvatarProps<P>, ref: Ref<AvatarRef>) => {
+        const { prefixCls } = useContext(GlobalContext);
+        const { shape: groupShape, size: groupSize, isGroup } = useContext(AvatarGroupContext);
+        const {
+            shape = props.shape || (isGroup ? groupShape : 'circle'),
+            size = props.size || (isGroup ? groupSize : 'small'),
+            src,
+            decoration = null,
+            textAvatar = '',
+            avatarStyle = {},
+            avatarClass = '',
+            autoFixFontSize = true,
+            autoFixFontOffset = 2,
+            avatarName = '',
+            avatarDesc = '',
+            children = null,
+            renderInfo = null,
+            className = '',
+            style = {},
+            imageProps = {},
+            defaultOverLap,
+            onClickDecoration,
+            onClick,
+        } = props;
+        const domRef = useRef<HTMLDivElement | null>(null);
+        const avatarRef = useRef<HTMLDivElement | null>(null);
+        const avatarTextRef = useRef<HTMLDivElement | null>(null);
+        const [textScale, setTextScale] = useState<number>(1);
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+        // 图片头像
+        // @en Picture avatar
+        const isImageAvatar = !children && src !== void 0;
+        // 文字头像
+        // @en Text avatar
+        const isTextAvatar = !children && !isImageAvatar && textAvatar;
+        // 使用默认头像
+        // @en Whether to use default avatar
+        const useDefaultAvatar = !children && !isImageAvatar && !isTextAvatar;
+
+        useEffect(() => {
+            getComputedTextScale();
+        }, [textAvatar]);
+
+        /**
+         * 根据字体元素宽度和头像大小动态调整缩放比例
+         * @en Dynamically adjust scaling based on font element width and avatar size
+         */
+        function getComputedTextScale() {
+            if (!isTextAvatar || !autoFixFontSize || !avatarRef || !avatarTextRef) return;
+            const { width: avatarWidth = 0 } = avatarRef.current?.getBoundingClientRect() || {};
+            const { width: textWidth = 0 } = avatarTextRef.current?.getBoundingClientRect() || {};
+            if (avatarWidth === 0 || textWidth === 0) return;
+            // 文本节点宽度大于头像元素时进行动态缩放
+            // @en Dynamic scaling when the width of the text node is larger than the avatar element
+            const maxWidth = avatarWidth - 2 * autoFixFontOffset;
+            if (textWidth > maxWidth) {
+                const scale = maxWidth / textWidth;
+                setTextScale(textScale * scale);
+            }
+        }
+
+        return (
+            <div
+                ref={domRef}
+                style={style}
+                className={cls(
+                    `${prefixCls}-avatar-wrapper`,
+                    className,
+                    size,
+                    shape,
+                    `${prefixCls}-avatar-wrapper-shape-${shape}`,
+                    {
+                        [`${prefixCls}-avatar-wrapper-with-info ${prefixCls}-avatar-wrapper-with-info-size-${size} with-info`]:
+                            Boolean(avatarName),
+                    },
+                )}
+                onClick={onClick}
+            >
+                <div
+                    className={cls(
+                        `${prefixCls}-avatar`,
+                        avatarClass,
+                        `${prefixCls}-avatar-size-${size}`,
+                        size,
+                        `${prefixCls}-avatar-shape-${shape}`,
+                        shape,
+                        {
+                            [`${prefixCls}-text-avatar ${prefixCls}-avatar-mode-text`]:
+                                isTextAvatar,
+                            [`${prefixCls}-image-avatar ${prefixCls}-avatar-mode-image`]:
+                                isImageAvatar,
+                            [`${prefixCls}-avatar-default-overlap default-overlap`]:
+                                useDefaultAvatar,
+                        },
+                    )}
+                    style={avatarStyle}
+                    ref={avatarRef}
+                >
+                    {children}
+                    {useDefaultAvatar &&
+                        (defaultOverLap === void 0 ? (
+                            <IconUserFill
+                                className={`${prefixCls}-avatar-default ${prefixCls}-avatar-default-icon-size-${size}`}
+                            />
+                        ) : (
+                            defaultOverLap
+                        ))}
+                    {isImageAvatar && src && (
+                        <Comp
+                            {...({
+                                className: `${prefixCls}-avatar-img`,
+                                src,
+                            } as P)}
+                            {...imageProps}
+                        />
+                    )}
+                    {isTextAvatar && (
+                        <span
+                            className={`${prefixCls}-avatar-text ${prefixCls}-avatar-text-size-${size}`}
+                            ref={avatarTextRef}
+                            style={{
+                                transform: `scale(${textScale})`,
+                            }}
+                        >
+                            {textAvatar}
+                        </span>
+                    )}
+                    {decoration && (
+                        <div
+                            className={`${prefixCls}-avatar-decoration`}
+                            onClick={onClickDecoration}
+                        >
+                            {decoration}
+                        </div>
+                    )}
+                </div>
+                {renderInfo}
+                {!renderInfo && avatarName && (
+                    <div className={cls(`${prefixCls}-avatar-info`)}>
+                        <div
+                            className={`${prefixCls}-avatar-name ${prefixCls}-avatar-name-size-${size}`}
+                        >
+                            {avatarName}
+                        </div>
+                        {avatarDesc && (
+                            <div
+                                className={`${prefixCls}-avatar-desc ${prefixCls}-avatar-desc-size-${size}`}
+                            >
+                                {avatarDesc}
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+    });
+}
+
+const Avatar = componentGenerator(BaseImage);
+
+/**
+ * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
+ * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 头像
+ * @name_en Avatar
+ */
+export default componentWrapper(Avatar, {
+    Group,
+});

package/metaData/components/badge/doc.md

@@ -0,0 +1,28 @@
+### 信息展示
+
+# 徽标 Badge
+
+在右上角展示徽标数字或小红点
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|visible|是否展示徽标，visible切换时有动画过渡|boolean|true|
+|text|徽标文案|ReactText|-|
+|dot|显示为一个小红点|boolean|false|
+|maxCount|最大完整展示数字，超出后将展示 \+|number|99|
+|children|内容|ReactNode|-|
+|absolute|是否置于右上角|boolean|false|
+|bordered|是否有白色边框|boolean|false|
+|timeout|动画持续时间(ms)|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

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

@@ -0,0 +1,128 @@
+import type { Ref, ReactNode } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import Transition from '../transition';
+import { ContextLayout } from '../context-provider';
+
+export interface BadgeProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 是否展示徽标，visible切换时有动画过渡
+     * @en Whether to display the badge, there is an animation transition when the visible status switch
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * 徽标文案
+     * @en badge text
+     */
+    text?: string | number;
+    /**
+     * 显示为一个小红点
+     * @en show as a red dot
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * 最大完整展示数字，超出后将展示 +
+     * @en Maximum full impression number, it will be displayed "+" beyond the number
+     * @default 99
+     */
+    maxCount?: number;
+    /**
+     * 内容
+     * @en Badge content
+     */
+    children?: ReactNode;
+    /**
+     * 是否置于右上角
+     * @en Whether the badge is placed in the upper right corner
+     * @default false
+     */
+    absolute?: boolean;
+    /**
+     * 是否有白色边框
+     * @en Whether the badge has a white border
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * 动画持续时间(ms)
+     * @en Animation duration(ms)
+     * @default 300
+     */
+    timeout?: number | { appear?: number; enter?: number; exit?: number };
+}
+
+export interface BadgeRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+/**
+ * 在右上角展示徽标数字或小红点
+ * @en Display the badge number or small red dot in the upper right corner
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 徽标
+ * @name_en Badge
+ */
+const Badge = forwardRef((props: BadgeProps, ref: Ref<BadgeRef>) => {
+    const {
+        className = '',
+        style = {},
+        visible = true,
+        text,
+        dot = false,
+        maxCount = 99,
+        children = null,
+        absolute = false,
+        bordered = false,
+        timeout = 400,
+    } = props;
+    const domRef = useRef<HTMLDivElement | null>(null);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    function renderInnerBadge(prefix: string) {
+        return dot ? null : (
+            <span className={`${prefix}-text badge-text`}>
+                {Number(text) && Number(text) > maxCount ? `${maxCount}+` : text}
+            </span>
+        );
+    }
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <Transition in={visible} timeout={timeout} type="scale" nodeRef={domRef}>
+                    <div
+                        className={cls(`${prefixCls}-badge`, className, {
+                            [`${prefixCls}-badge-dot dot`]: dot,
+                            [`${prefixCls}-badge-bordered bordered`]: bordered,
+                            [`${prefixCls}-badge-absolute absolute`]: absolute,
+                        })}
+                        style={style}
+                        ref={domRef}
+                    >
+                        {children || renderInnerBadge(`${prefixCls}-badge`)}
+                    </div>
+                </Transition>
+            )}
+        </ContextLayout>
+    );
+});
+
+export default Badge;

package/metaData/components/button/doc.md

@@ -0,0 +1,45 @@
+### 通用
+
+# 按钮 Button
+
+按钮用于开始一个即时操作。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|type|样式类型|"primary" \| "ghost" \| "default"|"primary"|
+|size|尺寸|"mini" \| "small" \| "medium" \| "large" \| "huge"|"large"|
+|inline|是否为内联样式|boolean|false|
+|loading|是否处于加载中状态|boolean|false|
+|disabled|是否禁用|boolean|false|
+|halfBorder|border是否为0\.5px|boolean|false|
+|icon|图标名，传入Icon组件|ReactNode|-|
+|showTextWhenLoading|加载中是否展示文字|boolean|true|
+|needActive|是否需要点击态|boolean|true|
+|style|自定义样式|CSSProperties|-|
+|shape|按钮形状|"round" \| "semi" \| "square"|"semi"|
+|color|自定义字体颜色|ButtonColorStatus|-|
+|bgColor|自定义背景颜色|ButtonColorStatus|-|
+|borderColor|自定义边框颜色|ButtonColorStatus|-|
+|className|自定义类名|string|-|
+|loadingIcon|加载图标，传入Icon组件type属性或node|ReactNode|-|
+|children|子元素|ReactNode|-|
+|onClick|点击按钮的回调函数|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onClickDisabled|禁用状态下点击按钮的回调函数|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|disableWhenLoading|加载中是否禁用按钮操作|boolean|true|
+|coverIconWhenLoading|加载中是否覆盖Icon|boolean|true|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLButtonElement|
+
+> ButtonColorStatus
+
+```
+string | { normal: string; active: string; disabled: string; }
+```