distribution-management/src/pages/MiniApp/CompConfig/DrawerBox/content.tsx

import { useDrop } from "ahooks";
import { Col, Row, Space } from "antd";
import React, { useState, useImperativeHandle, forwardRef, useRef, useMemo } from "react";
import styles from './index.less'
import { Banners } from "../components/banners";
import { useModel } from "@umijs/max";
import { HotBooks } from "../components/hot_books";
import { HotCategory } from "../components/hot_category";
import { Config } from "@/models/appPageConifg";

// 使用 forwardRef 以支持传递 ref
const DragItem = () => {
    const { state, dispatch } = useModel("appPageConifg")
    const [isHovering, setIsHovering] = useState(false);
    const dropRef = useRef(null);
    const list = useMemo(() => {
        let pageConfig = state.pageConfigList?.find(page => page.pageUrl === state.activePage)
        let list: {
            appComponentId: number | string;
            componentType: string;
            showRightButton?: boolean;
            componentName?: string;
            remark?: string;
            configs?: Config[];
        }[] = []
        if (state.isWorkDirection) {
            let thePage = pageConfig?.workDirectionList?.find(page => page.workDirection == state.tabs)
            list = thePage?.componentConfigList || []
        } else {
            list = pageConfig?.workDirectionList?.[0].componentConfigList || []
        }
        return list
    }, [state])
    useDrop(dropRef, {
        // 接收到组件拖拽到手机内容内，添加进入数据
        onDom: (content: string, e) => {
            let arr = content?.split('-')
            let appComponentId = arr[0]
            let componentType = arr[1]
            let newConfig: {
                appComponentId: number | string,//组件ID
                componentType: string,//组件类型
                showRightButton?: boolean,//是否展示左侧按钮
                componentName?: string,//组件名称
                remark?: string,//备注
                configs?: Config[],//组件内的配置
            } = { appComponentId, componentType, configs: [] }
            switch (componentType) {
                case 'hot_books':
                    newConfig.configs = [
                        {}, {}, {}, {}, {}
                    ]
                    newConfig.componentName = "今日热书"
                    newConfig.showRightButton = true
                    break;
                case "hot_category":
                    newConfig.configs = []
                    newConfig.componentName = "热门分类"
                    newConfig.showRightButton = true
                    break;
            }
            let { tabs, pageConfigList, activePage, isWorkDirection } = state
            let pageConfig = pageConfigList.find(page => page.pageUrl === activePage)
            // 首次添加页面基础数据
            if (!pageConfig) {
                pageConfigList.push({
                    pageUrl: activePage,
                    workDirectionList: isWorkDirection ? [
                        {
                            workDirection: 0,
                            componentConfigList: []
                        },
                        {
                            workDirection: 1,
                            componentConfigList: []
                        },
                    ] : [
                        {
                            componentConfigList: []
                        }
                    ]
                })
                pageConfig = pageConfigList.find(page => page.pageUrl === activePage)
            }
            // 存在男女频页面
            if (isWorkDirection && pageConfig?.workDirectionList) {
                for (let page of pageConfig?.workDirectionList) {
                    if (page.workDirection == tabs) {
                        page.componentConfigList = [...page.componentConfigList, newConfig]
                    }
                }
            } else if (pageConfig?.workDirectionList) {// 不存在男女频页面
                pageConfig.workDirectionList[0].componentConfigList = [...pageConfig.workDirectionList[0].componentConfigList, newConfig]
            }
            dispatch({
                type: 'setAll', params: { pageConfigList, index: state.index + 1 }
            })
        },
        onDragOver: (e) => {
            // console.log("拖拽中",e)
        },
        onDragEnter: () => setIsHovering(true),
        onDragLeave: () => setIsHovering(false),
    });
    return <div ref={dropRef} style={{ minHeight: '100%' }} >
        {
            list?.map(item => {
                return <React.Fragment key={item.appComponentId}>
                    <div
                        className={`${styles.comp}  ${state.compAc === item.componentType ? styles.ac : ""}`}
                        onClick={() => { dispatch({ type: "setAll", params: { compAc: item.componentType } }) }}
                    >
                        {/* banners */}
                        {item.componentType === 'banners' && <Banners data={item.configs || []} />}
                        {/* 热门书籍*/}
                        {item.componentType === "hot_books" && <HotBooks data={item} />}
                        {/* 热门分类 */}
                        {item.componentType === "hot_category" && <HotCategory data={item} />}
                    </div>
                    <div className={styles.compBoxM} />
                </React.Fragment>
            })
        }
        {
            list?.length === 0 && <div className={styles.initBox}>
                拖动左侧组件至此处
            </div>
        }
    </div>
};
// 定义组件的 Props 类型
interface Props {
}
const Content = forwardRef((props: Props, ref) => {
    const { state, dispatch } = useModel("appPageConifg")
    // 使用 useImperativeHandle 暴露方法给父组件
    useImperativeHandle(ref, () => ({
    }));
    return <div className={styles.phone}>
        <div className={styles.content} >
            {/* 头部男女tabs */}
            <Space className={styles.tabs} size={[20, 20]}>
                {
                    ["男生", "女生"].map((s, i) => {
                        return <strong
                            key={i}
                            className={`${styles.tabs_text} ${state?.tabs === i ? styles.tabs_ac : ""}`}
                            onClick={() => {
                                dispatch({ type: "setAll", params: { tabs: i, compAc: 0 } })
                            }}
                        >
                            {s}
                        </strong>
                    })
                }
            </Space>
            <div className={styles.content_box}>
                {/* 内容 */}
                <DragItem />
            </div>
        </div>
    </div>
})
export default Content;