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

import { useMemo, useState } from 'react';
import styles from './index.less'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { useModel } from '@umijs/max';
import { Config } from "@/models/appPageConifg";
import { Tooltip } from 'antd';
let noDrag = ["banners", "guess_like"]
function MiniBox() {
    const { state, dispatch } = useModel("appPageConifg")
    const list = useMemo(() => {
        let pageConfig = state.pageConfigList?.find(page => page.pageUrl === state.activePage)
        let list: {
            appComponentId: any;
            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])
    // 处理拖动结束
    const onDragEnd = (result: any) => {
        const { destination, source } = result;
        // 如果没有目标位置或目标位置与起始位置相同，则返回
        if (!destination || destination.index === source.index || destination.index === 0 || destination.index === list.length - 1) return;
        // 调整列表顺序
        const reorderedItems = Array.from(list);
        const [removed] = reorderedItems.splice(source.index, 1);
        reorderedItems.splice(destination.index, 0, removed);
        let { tabs, pageConfigList, activePage, isWorkDirection } = state
        let pageConfig = pageConfigList?.find(page => page.pageUrl === state.activePage)
        // 存在男女频页面
        if (isWorkDirection && pageConfig?.workDirectionList) {
            for (let page of pageConfig?.workDirectionList) {
                if (page.workDirection == tabs) {
                    page.componentConfigList = reorderedItems
                }
            }
        }
        dispatch({
            type: 'setAll', params: { pageConfigList, index: state.index + 1 }
        })
        console.log(reorderedItems)
    };
    return list?.length > 0 && <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="droppable">
            {(provided) => (
                <Tooltip title={<>
                    1.拖动下方模块改变页面组件排序<br />
                    2.点击下方模块可快捷选中组件<br />
                    3.顶部组件和底部组件不可改变顺便
                </>}

                    color={"#2db7f5"} open={true}>
                    <div
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                        className={styles.miniBox}
                    >
                        {list?.map((item, index) => (
                            <Draggable
                                key={item.appComponentId}
                                draggableId={String(item.appComponentId)}
                                index={index}
                                isDragDisabled={noDrag?.includes(item.componentType)}  // 使用isDragDisabled来控制拖动权限
                            >
                                {(provided) => (
                                    <div
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}  // 始终传递dragHandleProps
                                        className={`${noDrag?.includes(item.componentType) ? styles.nodraggableItem : styles.draggableItem} ${state.compAc === item.componentType ? styles.compAc : ""}`} // 使用 CSS 样式而非内联样式
                                        onClick={() => { dispatch({ type: "setAll", params: { compAc: item.componentType } }) }}
                                    >
                                        {item.componentName || item.componentType}
                                    </div>
                                )}
                            </Draggable>
                        ))}
                        {provided.placeholder}
                    </div>
                </Tooltip>
            )}
        </Droppable>
    </DragDropContext>

}

export default MiniBox