@cloudbase/weda-ui 3.1.0 → 3.1.3

package/dist/web/components/lottery/index.js

@@ -0,0 +1,390 @@
+/* eslint-disable react/jsx-key */
+import React, { useState, useEffect, useCallback, useImperativeHandle, } from 'react';
+import { usePlatform } from '../../utils/platform';
+import classNames from '../../utils/classnames';
+import './index.css';
+import { ConfigProvider } from 'tea-component';
+import LotteryAction from './lotteryUtil';
+const CLASS_PREFIX = 'weda-lottery';
+const lotteryAction = new LotteryAction();
+export default React.forwardRef(function Lottery({ className, id, style, prizeList, enablePrize, prizeResult, events }, ref) {
+    const platform = usePlatform();
+    const [activedId, setActivedId] = useState(-1);
+    const [isStartLottery, setIsStartLottery] = useState(false);
+    const [lotteryList, setLotteryList] = useState([]);
+    const [btnActived, setBtnActived] = useState(false);
+    //获取初始化默认数据，数据不足8条设置默认，超过8条获取前8条
+    const lotteryListDefault = () => {
+        const list = [];
+        if (prizeList == null) {
+            return list;
+        }
+        for (let i = 0; i < 8; i++) {
+            if (i < prizeList.length) {
+                const prize = prizeList[i];
+                list.push({
+                    idx: i + 1,
+                    selected: false,
+                    desc: prize.title,
+                    src: prize.image,
+                });
+            }
+            else {
+                list.push({
+                    idx: i + 1,
+                    selected: false,
+                    desc: '',
+                    src: '',
+                });
+            }
+        }
+        return list;
+    };
+    const startLottery = useCallback(() => {
+        setLotteryList(lotteryListDefault());
+        setBtnActived(true);
+        if (lotteryAction.isStart)
+            return;
+        events === null || events === void 0 ? void 0 : events.clickLotteryButton();
+        setIsStartLottery(true);
+    }, [
+        lotteryAction.isStart,
+        setIsStartLottery,
+        setBtnActived,
+        lotteryListDefault,
+        setLotteryList,
+    ]);
+    useImperativeHandle(ref, () => {
+        return {
+            methods: {
+                start: startLottery,
+            },
+        };
+    }, [startLottery]);
+    useEffect(() => {
+        setLotteryList(lotteryListDefault());
+    }, [prizeList]);
+    useEffect(() => {
+        lotteryAction.animationCallback = ({ idx, isEnd }) => {
+            setActivedId(idx == -1 ? 0 : idx);
+            if (isEnd) {
+                setBtnActived(false);
+                const list = lotteryList.map((item, index) => {
+                    if (index === idx - 1) {
+                        item.selected = true;
+                    }
+                    else {
+                        item.selected = false;
+                    }
+                    return item;
+                });
+                setLotteryList(list);
+                setActivedId(-1);
+                setTimeout(() => {
+                    events.finishLottery({
+                        prize: idx,
+                        result: list[idx - 1],
+                    });
+                    //延迟700毫秒显示的视觉效果更好，否则看不清结果就弹出dialog盖住了
+                }, 700);
+            }
+        };
+    }, [lotteryList]);
+    useEffect(() => {
+        // 当满足开启抽奖条件并且点击了开奖开关时，启用抽奖
+        if (enablePrize && isStartLottery) {
+            lotteryAction.start(prizeResult, () => {
+                window.app.showToast({
+                    title: '网络异常',
+                    icon: 'none',
+                });
+            });
+            // 当不选取变量作为结果的时候，按照设置给定结果
+            lotteryAction.end(prizeResult);
+            setIsStartLottery(false);
+        }
+        else if (!enablePrize) {
+            //立马停止抽奖
+            lotteryAction.stop();
+        }
+    }, [isStartLottery, enablePrize]);
+    useEffect(() => {
+        // 设置抽奖结果
+        lotteryAction.end(prizeResult);
+    }, [prizeResult]);
+    const [widthRatio, setWidthRatio] = useState(1);
+    const [heightRatio, setHeightRatio] = useState(1);
+    // 上下5个球的宽度
+    const [dotWidth, setDotWidth] = useState(217 / 14);
+    // 左右5个球的高度
+    const [dotHeight, setDotHeight] = useState(217 / 14);
+    const standardWidth = 326;
+    const standardHeight = 326;
+    const cls = classNames({
+        [CLASS_PREFIX]: true,
+        [className]: className,
+        [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
+    });
+    // 将获取的style 转化为 px, 用户输入的单位可能有(纯数字，px, rem, %, rpx)
+    // 注： 前端输入宽高，不带单位和带rem单位，code 中获取的都是rem 单位，也就是输入1304，输出‘46.5714rem’； 输入‘1304rem’, 输出‘1304rem’， 所以rem目前不支持正常的比列
+    // 带上px单位和不带单位，输出的都是rem，且转化的值一样的，所以不需要特殊处理，也就是 输入 1304 和 1304px ,前端拿到的都是‘46.5714rem’
+    // rpx 是小程序的单位，并且在pc 上加病没作用，所以rpx 不处理
+    // % 暂时也不处理，因为不确定用户的百分比是以什么为标准的
+    const getStyleUnit = (targetValue) => {
+        if (!targetValue)
+            return -1;
+        const value = targetValue.toString();
+        // 获取单位
+        const fotData = value.match(/^\d+(?:\.\d+)?([a-zA-Z%]+)?$/);
+        let unit = 'rem';
+        if (fotData && fotData[1]) {
+            unit = fotData[1];
+        }
+        return unit;
+    };
+    const getRatio = (value, unit) => {
+        let actualValue;
+        if (unit.toString() === 'rem') {
+            actualValue = value * 14 * 2;
+        }
+        return actualValue;
+    };
+    // 通过页面配置拿到用户设置的宽，高,直接获取的宽和高，会被转化为rem, 需要将rem 转为 px. 规则： e/2/14
+    // css 输出的px到页面rem, 转化规则为： e/14
+    useEffect(() => {
+        if (!style || style == undefined || platform === 'h5') {
+            setWidthRatio(1);
+            setDotWidth(217 / 14);
+            setHeightRatio(1);
+            setDotHeight(217 / 14);
+            return;
+        }
+        if (style && style !== undefined) {
+            // 如果宽和高不存在，则还远吗比例为默认值-1，也就是保持视觉稿默认的宽和高
+            if (!style.width) {
+                setWidthRatio(1);
+                setDotWidth(217 / 14);
+            }
+            if (!style.height) {
+                setHeightRatio(1);
+                setDotHeight(217 / 14);
+            }
+            if (style.width) {
+                // 现将获取的rem 转化为px
+                const actualValue = getRatio(parseFloat(style.width.toString()), getStyleUnit(style.width));
+                // setWidthRatio();
+                const setValue = Math.floor((actualValue / (standardWidth * 2)) * 1000) / 1000;
+                setWidthRatio(setValue);
+                const dotWidth = (setValue * 43 * 4 + setValue * 9 * 5) / 14;
+                setDotWidth(dotWidth);
+            }
+            if (style.height) {
+                // 现将获取的rem 转化为px
+                const actualValue = getRatio(parseFloat(style.height.toString()), getStyleUnit(style.height));
+                const setValue = Math.floor((actualValue / (standardHeight * 2)) * 1000) / 1000;
+                setHeightRatio(setValue);
+                const dotHeight = (setValue * 43 * 4 + setValue * 9 * 5) / 14;
+                setDotHeight(dotHeight);
+            }
+        }
+    }, [style]);
+    const renderDot = (direction, list) => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: classNames(`${CLASS_PREFIX}__dot`, `${CLASS_PREFIX}__dot-${direction}`) }, list.map((item, index) => {
+                return (React.createElement("div", { key: index, className: `${CLASS_PREFIX}__dot-item`, style: {
+                        width: `${(9 * widthRatio) / 14}rem`,
+                        height: `${(9 * heightRatio) / 14}rem`,
+                        marginBottom: `${direction}` === 'vertical'
+                            ? `${(43 * heightRatio) / 14}rem`
+                            : '0',
+                        marginRight: `${direction}` === 'horizontal'
+                            ? `${(43 * widthRatio) / 14}rem`
+                            : '0',
+                    } }));
+            }))));
+    };
+    const dotList = [
+        {
+            single: true,
+            position: 'left-top',
+            direction: '',
+            list: [],
+        },
+        {
+            single: true,
+            position: 'left-bottom',
+            direction: '',
+            list: [],
+        },
+        {
+            single: true,
+            position: 'right-top',
+            direction: '',
+            list: [],
+        },
+        {
+            single: true,
+            position: 'right-bottom',
+            direction: '',
+            list: [],
+        },
+        {
+            single: false,
+            position: 'top',
+            direction: 'horizontal',
+            list: ['1', '2', '3', '4', '5'],
+        },
+        {
+            single: false,
+            position: 'bottom',
+            direction: 'horizontal',
+            list: ['1', '2', '3', '4', '5'],
+        },
+        {
+            single: false,
+            position: 'left',
+            direction: 'vertical',
+            list: ['1', '2', '3', '4', '5'],
+        },
+        {
+            single: false,
+            position: 'right',
+            direction: 'vertical',
+            list: ['1', '2', '3', '4', '5'],
+        },
+    ];
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: "body", key: "lottery", "data-testid": "lottery" },
+            React.createElement("div", { className: cls, id: id, style: style },
+                React.createElement("div", { className: `${CLASS_PREFIX}__wrap` },
+                    dotList.map((dot, index) => {
+                        return (React.createElement("div", { key: index },
+                            dot.single && (React.createElement("div", { key: `${dot.direction}-${index}`, className: classNames(`${CLASS_PREFIX}__dot-single`, `${CLASS_PREFIX}__dot-${dot.position}`), style: {
+                                    width: `${(9 * widthRatio) / 14}rem`,
+                                    height: `${(9 * heightRatio) / 14}rem`,
+                                    top: `${dot.position}` === 'left-top' ||
+                                        `${dot.position}` === 'right-top'
+                                        ? `${(9 * heightRatio) / 14}rem`
+                                        : '',
+                                    bottom: `${dot.position}` === 'left-bottom' ||
+                                        `${dot.position}` === 'right-bottom'
+                                        ? `${(9 * heightRatio) / 14}rem`
+                                        : '',
+                                    left: `${dot.position}` === 'left-top' ||
+                                        `${dot.position}` === 'left-bottom'
+                                        ? `${(6 * widthRatio) / 14}rem`
+                                        : '',
+                                    right: `${dot.position}` === 'right-top' ||
+                                        `${dot.position}` === 'right-bottom'
+                                        ? `${(6 * widthRatio) / 14}rem`
+                                        : '',
+                                } })),
+                            !dot.single && (React.createElement("div", { key: `${dot.direction}-${index}`, className: `${CLASS_PREFIX}__dot-${dot.position}`, style: {
+                                    left: `${dot.position}` === 'top' ||
+                                        `${dot.position}` === 'bottom'
+                                        ? `calc((${'100%'} - ${dotWidth}rem) / 2)`
+                                        : `${dot.position}` === 'left'
+                                            ? `${(widthRatio * 18 - widthRatio * 9) / 2 / 14}rem`
+                                            : '',
+                                    top: `${dot.position}` === 'left' ||
+                                        `${dot.position}` === 'right'
+                                        ? `calc((100% - ${dotHeight}rem) / 2)`
+                                        : `${dot.position}` === 'top'
+                                            ? `${(heightRatio * 18 - heightRatio * 9) / 2 / 14}rem`
+                                            : '',
+                                    bottom: `${dot.position}` === 'bottom'
+                                        ? `${(heightRatio * 18 - heightRatio * 9) / 2 / 14}rem`
+                                        : '',
+                                    right: `${dot.position}` === 'right'
+                                        ? `${(widthRatio * 18 - widthRatio * 9) / 2 / 14}rem`
+                                        : '',
+                                } }, true && renderDot(dot.direction, dot.list)))));
+                    }),
+                    React.createElement("div", { className: `${CLASS_PREFIX}__inner`, style: {
+                            paddingTop: `${(18 * heightRatio) / 14}rem`,
+                            paddingBottom: `${(18 * heightRatio) / 14}rem`,
+                            paddingLeft: `${(18 * widthRatio) / 14}rem`,
+                            paddingRight: `${(18 * widthRatio) / 14}rem`,
+                        } },
+                        React.createElement("div", { className: `${CLASS_PREFIX}__inner-wrap` },
+                            React.createElement("ul", { className: `${CLASS_PREFIX}__list` }, lotteryList.map((item, index) => {
+                                return (React.createElement("li", { "data-testid": "lottery-item", key: index, className: classNames(`${CLASS_PREFIX}__turntable-item`, item.idx === activedId ? 'is-actived' : '', item.selected ? 'is-selected' : ''), style: {
+                                        width: `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3)`,
+                                        height: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3)`,
+                                        top: `${index}` == '0' ||
+                                            `${index}` == '1' ||
+                                            `${index}` == '2'
+                                            ? `${(heightRatio * 8) / 14}rem`
+                                            : `${index}` == '3'
+                                                ? `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`
+                                                : '',
+                                        bottom: `${index}` == '4' ||
+                                            `${index}` == '5' ||
+                                            `${index}` == '6'
+                                            ? `${(heightRatio * 8) / 14}rem`
+                                            : `${index}` == '7'
+                                                ? `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`
+                                                : '',
+                                        right: `${index}` == '2' ||
+                                            `${index}` == '3' ||
+                                            `${index}` == '4'
+                                            ? `${(widthRatio * 8) / 14}rem`
+                                            : '',
+                                        left: `${index}` == '0' ||
+                                            `${index}` == '6' ||
+                                            `${index}` == '7'
+                                            ? `${(widthRatio * 8) / 14}rem`
+                                            : `${index}` == '1' || `${index}` == '5'
+                                                ? `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3 + ${(widthRatio * 8 * 2) / 14}rem)`
+                                                : '',
+                                    } },
+                                    React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell`, style: {
+                                            borderLeftWidth: `${(4 * widthRatio) / 14}rem`,
+                                            borderRightWidth: `${(4 * widthRatio) / 14}rem`,
+                                            borderTopWidth: `${(4 * heightRatio) / 14}rem`,
+                                            borderBottomWidth: `${(4 * heightRatio) / 14}rem`,
+                                            paddingTop: `${(8 * heightRatio) / 14}rem`,
+                                            paddingBottom: `${(8 * heightRatio) / 14}rem`,
+                                            paddingLeft: `${(2 * widthRatio) / 14}rem`,
+                                            paddingRight: `${(2 * widthRatio) / 14}rem`,
+                                        } },
+                                        item.src && (React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell-image`, style: {
+                                                height: `${(heightRatio * 40) / 14}rem`,
+                                            } },
+                                            React.createElement("img", { src: item.src, alt: item.desc, className: `${CLASS_PREFIX}__turntable-cell-icon`, style: {
+                                                    width: `${(widthRatio * 40) / 14}rem`,
+                                                    height: `${(heightRatio * 40) / 14}rem`,
+                                                } }))),
+                                        item.desc && (React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell-desc`, style: {
+                                                marginTop: `${(heightRatio * 6) / 14}rem`,
+                                                fontSize: `${(widthRatio * 12) / 14}rem`,
+                                                lineHeight: `${(heightRatio * 17) / 14}rem`,
+                                            } }, item.desc)))));
+                            })),
+                            React.createElement("div", { className: classNames(`${CLASS_PREFIX}__turntable-btn`, btnActived ? 'is-actived' : ''), style: {
+                                    width: `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3)`,
+                                    height: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3)`,
+                                    top: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`,
+                                    left: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`,
+                                } },
+                                React.createElement("div", { className: `${CLASS_PREFIX}__btn-inner`, style: {
+                                        paddingTop: `${(9 * heightRatio) / 14}rem`,
+                                        paddingBottom: `${(9 * heightRatio) / 14}rem`,
+                                        paddingLeft: `${(9 * widthRatio) / 14}rem`,
+                                        paddingRight: `${(9 * widthRatio) / 14}rem`,
+                                    } },
+                                    React.createElement("div", { className: `${CLASS_PREFIX}__btn` },
+                                        React.createElement("a", { "data-testid": "start-lottery", className: `${CLASS_PREFIX}__btn-image`, style: {
+                                                paddingTop: `${(11 * heightRatio) / 14}rem`,
+                                                paddingBottom: `${(11 * heightRatio) / 14}rem`,
+                                                paddingLeft: `${(15 * widthRatio) / 14}rem`,
+                                                paddingRight: `${(15 * widthRatio) / 14}rem`,
+                                            }, onClick: startLottery },
+                                            React.createElement("p", { className: `${CLASS_PREFIX}__btn-text`, style: {
+                                                    fontSize: `${(widthRatio * 18) / 14}rem`,
+                                                    lineHeight: `${(widthRatio * 22) / 14}rem`,
+                                                } },
+                                                "\u5F00\u59CB",
+                                                React.createElement("br", null),
+                                                "\u62BD\u5956"))))))))))));
+});

package/dist/web/components/lottery/lotteryUtil.d.ts

@@ -0,0 +1,23 @@
+export default class LotteryAction {
+    idx: number;
+    isStart: boolean;
+    endId: any;
+    speed: number;
+    duration: number;
+    maxIdx: number;
+    animationCallback: ({ idx, isEnd }: {
+        idx: any;
+        isEnd: any;
+    }) => void;
+    isError: boolean;
+    isSpeedUp: boolean;
+    timeout: number;
+    timer: any;
+    constructor();
+    start(prizeResult: any, errorCallback: any): void;
+    end(prizeResult: any): void;
+    error(): void;
+    stop(): void;
+    pointOnCubicBezier(cp: any, t: any): number;
+    loop(): void;
+}

package/dist/web/components/lottery/lotteryUtil.js

@@ -0,0 +1,180 @@
+export default class LotteryAction {
+    constructor() {
+        Object.defineProperty(this, "idx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 开始抽奖
+        Object.defineProperty(this, "isStart", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 结束位置
+        Object.defineProperty(this, "endId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 抽奖速度
+        Object.defineProperty(this, "speed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 持续时长
+        Object.defineProperty(this, "duration", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "maxIdx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 回调动作
+        Object.defineProperty(this, "animationCallback", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 是否异常
+        Object.defineProperty(this, "isError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 是否加速
+        Object.defineProperty(this, "isSpeedUp", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 超时时间
+        Object.defineProperty(this, "timeout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "timer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // 当前位置
+        this.idx = -1;
+        // 开始抽奖
+        this.isStart = false;
+        // 结束位置
+        this.endId = undefined;
+        // 抽奖速度
+        this.speed = 0;
+        // 持续时长
+        this.duration = 2000;
+        // 长度
+        this.maxIdx = 8;
+        // 回调动作
+        this.animationCallback = ({ idx, isEnd }) => { };
+        // 是否异常
+        this.isError = false;
+        // 是否加速
+        this.isSpeedUp = false;
+        //超时时间
+        this.timeout = 6000;
+    }
+    start(prizeResult, errorCallback) {
+        setTimeout(() => {
+            this.isStart = false;
+            const reg = /^\+?[1-9]\d*$/;
+            if (!reg.test(prizeResult)) {
+                this.isError = true;
+                if (errorCallback) {
+                    errorCallback();
+                }
+            }
+        }, this.duration);
+        // 在转动时长的一半，开始减速转动
+        setTimeout(() => {
+            this.isSpeedUp = false;
+        }, this.duration / 2);
+        // 超时，当出现一些意外的情况终止动画
+        setTimeout(() => {
+            if (this.endId === undefined) {
+                this.end(prizeResult);
+            }
+        }, this.timeout);
+        this.isStart = true;
+        this.isError = false;
+        this.isSpeedUp = true;
+        this.loop();
+    }
+    end(prizeResult) {
+        this.endId = prizeResult;
+    }
+    error() {
+        this.isError = true;
+    }
+    stop() {
+        this.isStart = false;
+        this.end(-1);
+        clearTimeout(this.timer);
+    }
+    pointOnCubicBezier(cp, t) {
+        const x = Math.pow(1 - t, 2) * cp[0] +
+            2 * t * (1 - t) * cp[1] +
+            Math.pow(t, 2) * cp[2];
+        return x;
+    }
+    loop() {
+        const { animationCallback } = this;
+        this.timer = setTimeout(() => {
+            const over = !this.isStart && this.endId !== undefined;
+            // emit
+            animationCallback({ idx: this.idx, isEnd: false });
+            // compare
+            if (this.idx < this.maxIdx) {
+                this.idx++;
+            }
+            else {
+                this.idx = 1;
+            }
+            // continue
+            if (!(over && String(this.idx) === String(this.endId)) && !this.isError) {
+                if (this.isSpeedUp) {
+                    const point = this.pointOnCubicBezier([500, 50, 100], 1 / 10);
+                    this.speed = point;
+                    if (this.speed < 100) {
+                        this.speed = 100;
+                    }
+                }
+                else {
+                    const point = this.pointOnCubicBezier([100, 50, 500], 1 / 10);
+                    this.speed = point;
+                    if (this.speed > 1000) {
+                        this.speed = 1000;
+                    }
+                }
+                this.loop();
+            }
+            else {
+                if (this.isError)
+                    return;
+                animationCallback({ idx: this.idx, isEnd: true });
+                this.idx = -1;
+            }
+        }, this.speed);
+    }
+}

package/dist/web/components/modal/h5.css

@@ -0,0 +1,53 @@
+.lcap-modal .lcap-modal__mask {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.5);
+  transition: all 300ms ease-out;
+}
+.lcap-modal .lcap-modal__dialog {
+  transform: translateY(100%);
+  transition: all 300ms ease-out;
+  width: 100%;
+  max-height: 90%;
+  min-height: 16.78571rem;
+  padding: 0.53571rem 0.53571rem 1.78571rem;
+  z-index: 2000;
+  border-top-left-radius: 0.53571rem;
+  border-top-right-radius: 0.53571rem;
+  background: white;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.lcap-modal .lcap-modal__dialog.enter {
+  transform: translateY(0);
+}
+.lcap-modal .lcap-modal__close_btn {
+  top: 0.35714rem;
+  right: 0.71429rem;
+  position: absolute;
+  cursor: pointer;
+}
+.lcap-modal .lcap-modal__confirm_btn {
+  padding-bottom: constant(safe-area-inset-bottom);
+  /* 兼容 iOS < 11.2 */
+  padding-bottom: env(safe-area-inset-bottom);
+  /* 兼容 iOS >= 11.2 */
+}
+
+.lcap-modal .lcap-modal__confirm_btn .lcap-modal__default_btn {
+  left: 0;
+  color: rgb(255, 255, 255);
+  right: 0;
+  width: 100%;
+  bottom: 0;
+  position: fixed;
+  background: rgb(50, 129, 248);
+  border-width: 0;
+  border-radius: 0;
+}

package/dist/web/components/modal/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ModalProps } from 'tea-component';
+import type { CommonPropsType, ICompRef } from '../../types';
+export interface PropTypes extends ModalProps, CommonPropsType {
+    content: string;
+    customButton: React.ReactNode;
+    customContent: React.ReactNode;
+    isDefaultButton: boolean;
+    outerRef: React.Ref<TCompRef>;
+}
+declare type TCompRef = ICompRef<{
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+}>;
+declare const _default: React.ForwardRefExoticComponent<PropTypes & React.RefAttributes<TCompRef>>;
+export default _default;

package/dist/web/components/modal/index.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { usePlatform } from '../../utils/platform';
+import { ModalPc } from './modal.pc';
+import { ModalH5 } from './modal.h5';
+export default React.forwardRef(function WeDaModal(props, ref) {
+    const platform = usePlatform();
+    if (platform === 'h5') {
+        return React.createElement(ModalH5, { ...props, outerRef: ref });
+    }
+    return React.createElement(ModalPc, { ...props, outerRef: ref });
+});

package/dist/web/components/modal/modal.h5.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PropTypes } from '../modal';
+import './h5.css';
+export declare function ModalH5(props: PropTypes): JSX.Element;