完成Meeting Demo的传输预览界面

任务：完成Meeting Demo的传输预览界面

进度：已完成

主要的几个部分记录如下：

1、完成水波图的动画

我是选择引入了antV的水波图，然后进行的修改

首先是使用三元运算符，在盒子中进行显示不同的界面

    useEffect(() => {
        // 假设每秒钟增加百分之20
        const increasePerSecond = 0.2;
        const interval = setInterval(() => {
            // 检查是否已经达到 100%，如果达到则停止更新
            if (percent >= 1) {
                clearInterval(interval);
                serTransfer('已完成')
                setTransferData(true)
                setChangeButton(true)
                setOpenA(true)
                getTime()
            } else {
                // 更新百分比
                setPercent(prevPercent => Math.min(prevPercent + increasePerSecond, 1));
            }
        }, 1000); // 每秒钟执行一次更新
        // 组件卸载时清除定时器
        return () => clearInterval(interval);
    }, [percent]); // 仅在 percent 发生变化时重新运行 useEffect

这部分是对百分比进行的渲染，我是用的每秒钟，增加百分之20

由于水波图上传完成会出现一个图片，使用了动画效果给他叠加了上去

  // 设置水波图的配置
    const config = {
        percent,
        style: {
            fill: '#F0C54F',
            // height: 40,
            stroke: '#F0C54F',
            //外面环的粗细
            outlineBorder: 2,
            //外面环的长度
            outlineDistance: 4,
            waveLength: 128,
        },
    };
    // 如果百分比达到100%，显示一个覆盖在水波图上方的圆圈
    const overlayCircle = percent >= 1 ? (
        <div style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: '100px',
            height: '100px',
            borderRadius: '50%',
            backgroundColor: '#F0C54F',
        }}>
        </div>
    ) : null;
    // 图片样式
    const imageStyle = {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        zIndex: percent >= 1 ? 1 : -1, // 如果百分比达到100%，设置zIndex为1，否则为-1
    };

分别是一个黄色的圆和一个完成的符号

2、传输过程中界面的变化

定义状态

    const [transfer, serTransfer] = useState('传输中');
    //传输数据字样的显示
    const [transferData, setTransferData] = useState(false);
    //传输过程中按钮的变化
    const [changeButton, setChangeButton] = useState(false);

下面就是显示的内容

 <div style={{ position: 'relative', height: 500, zIndex: -1 }}>
                <Liquid {...config} />
                {overlayCircle}
                {percent >= 1 && <img src={ImageYes} alt="#" style={imageStyle} />}
            </div>
            <div className="transfer">
                {transfer}
            </div>
            <div className="preview" >
                {transferData ?
                    <div onClick={() => {
                        toggleDrawer();
                        onClose();
                    }}>传输预览&gt;</div>
                    : <><span style={{ marginLeft: -30 }}>
                        <span>
                            <span onClick={toggleDrawer}>{fileCount}个文件<span>&gt;</span></span>
                            <span>｜{getTotalFileSize()}</span>
                        </span>
                    </span></>}
            </div>
            <div className="pin-style" >传输PIN码</div>
            {/* Pin码 */}
            <div className="box">
                <div className="random">{random}</div>
            </div>
            <div>
                {changeButton ?
                    <div className="button-copy">
                        <Button className="button-use" style={{ backgroundColor: 'rgba(240, 197, 79, 1)' }}>一键复制</Button>
                        <Button className="button-use" >再传一次</Button>
                    </div>
                    : <div className="button-copy2"><Button className="button-use" style={{ backgroundColor: 'rgba(240, 197, 79, 1)' }}>一键复制</Button></div>}
            </div>
            <Drawer
                mask={false}
                closable={false}
                open={openA}
                width={'50%'}
            >
                <CloseOutlined onClick={onCloseA} className="close-icon" />
                <Divider style={{ marginTop: 30 }} />
                <div className="text-preview">传输预览</div>
                <div className="text-information" style={{ marginTop: 20 }}>
                    <span >{fileCount}个文件 |</span>
                    <span style={{ marginRight: 10 }}>{getTotalFileSize()}|</span>
                    <span style={{ marginRight: 10 }}>过期时间</span><span>{getTime()}</span>
                </div>
                <Divider style={{ marginTop: 20 }} />
                {selectedFiles.map((file, index) => {
                    const fileSize = formatFileSize(file.size);
                    const fileExtension = file.name.split('.').pop().toLowerCase();
                    let fileIcon;
                    // 根据文件扩展名选择对应的 SVG 图标
                    switch (fileExtension) {
                        case 'pdf':
                            fileIcon = <Pdf />;
                            break;
                        case 'jpg':
                        case 'jpeg':
                        case 'png':
                        case 'gif':
                            fileIcon = <Image />;
                            break;
                        case 'mp4':
                        case 'mov':
                            fileIcon = <Video />;
                            break;
                        default:
                            fileIcon = null;
                    }
                    return (
                        <div>
                            <div className="fileIcon">{fileIcon}</div>
                            <div className="file-Name">{file.name}</div>
                            <div className="file-Size">{fileSize}</div>
                            <Divider />
                        </div>
                    )
                })}

            </Drawer>

        </>

3、父与子之间内容的互传

由于这次的内容是写到Liquid.jsx这个子组件当中的

我之前没有涉及到过对父亲组件和子组件的这个调用

首先是我需要调用父组件之前的内容第一步：在父组件当中把这个值传入

  <DemoLiquid fileCount={fileCount} getTotalFileSize={getTotalFileSize} selectedFiles={selectedFiles} onClose={onClose} onRef={ChildRef} />

第二步：子组件当中声明

export const DemoLiquid = ({ fileCount, getTotalFileSize, selectedFiles, onClose, onRef }) => {

第三步：在你需要引用的地方使用直接调用方法这个相对来说比较简单

接下来父组件调用子组件的内容

我用的useImperativeHandle 子组件中：

    useImperativeHandle(onRef, () => {
        return {
            onCloseA
        }
    })

父亲组件当中声明一下

   let ChildRef = React.createRef();

const showDrawer = () => {
    setOpen(true);
    ChildRef && ChildRef.current.onCloseA()
};

最后实现了在父亲组件中关闭子组件的抽屉

截图如下：

XJQ124 / Some-notes

完成Meeting Demo的传输预览界面 #64

任务：完成Meeting Demo的传输预览界面

1、完成水波图的动画

2、传输过程中界面的变化

3、父与子之间内容的互传