--- theme: channing-cyan --- ## 1. 概述魔方组件是店铺装修平台的常见组件，旨在帮助商家展示商品和活动海报，支持多样化布局选择和自定义模板。开发说明：通过扩展**阿里低代码引擎**提供的[示例项目](https://github.com/alibaba/lowcode-demo/tree/main/demo-general)，扩展魔方组件物料和魔方组件设置器。使用说明及应用场景： - [如何使用魔方？](https://help.youzan.com/displaylist/detail_4_4-2-536) - [第222期：高级晋阶┃高逼格魔方的实操教学](https://bbs.youzan.com/forum.php?mod=viewthread&tid=272851) ## 2. 效果演示 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18da2917890a4e1db73a4f27db9e23e2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1243&h=966&s=720921&e=png&b=faf7f7) ![20240324_140413_magicCube.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69d1de3afb95423ea9265c2454fef5d1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1910&h=962&s=5675124&e=gif&f=348&b=eaeff1) ## 3. 功能特点 1. 多样化的布局选择，包括一行两个、一行三个、一行四个、两左两右、一左两右、一上二下、一左三右和自定义模板。 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8182617c7959451ea61655a0b67dc314~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=427&h=211&s=5915&e=png&b=ffffff) 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f728a3af1704f80b74d55cad2f95756~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=384&h=155&s=5742&e=png&b=ffffff) 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7354a1faf85a46a0abd80d61513fe21c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=376&h=134&s=5728&e=png&b=ffffff) 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f77cb6ee73c43f8b12c51edc4096182~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=385&h=342&s=7496&e=png&b=ffffff) 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82badc5f28c44378b39b374942865b1d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=385&h=343&s=7161&e=png&b=ffffff) 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c326707747f340c28666220e7ffe9d5c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=376&h=334&s=6604&e=png&b=ffffff) 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d5edea0acc344eb9da4a6e688281e15~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=382&h=345&s=7643&e=png&b=ffffff) 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76a3b648b11048e2b97ddeffcab4a48f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=381&h=424&s=10397&e=png&b=fcfcfc) 2. 支持上传商品图片和活动海报，并为图片添加链接。 2. 可调整图片间隙和尺寸要求，适配不同的页面布局和设备。 2. 自定义模板支持移动鼠标选定布局区域大小，满足商家的个性化需求。 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e207f86ca80e4f7e927cbc393842c7fb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=376&h=413&s=10793&e=png&b=fcfcfc) 2. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b44e5561794e4ec59db92e1cbda50902~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=375&h=410&s=15260&e=png&b=ffffff) ## 4. 数据格式 ```ts { "model": "custom", "row": 5, "col": 5, "list": [ { "y": 0, "x": 0, "height": 3, "width": 3, "image": "http://localhost:3006/1710684266282.jpg", "targetUrl": "" }, { "y": 3, "x": 0, "height": 2, "width": 3, "image": "http://localhost:3006/1704280623065.jpeg", "targetUrl": "" }, { "y": 0, "x": 3, "height": 3, "width": 2, "image": "http://localhost:3006/1704280618340.jpeg", "targetUrl": "" }, { "y": 3, "x": 3, "height": 2, "width": 2, "image": "http://localhost:3006/1704280628992.png", "targetUrl": "" } ] } ``` cube (object): 魔方配置对象，包含以下属性： - model (string): 模板类型 - row (number): 魔方的行数。 - col (number): 魔方的列数。 - list (array): 魔方的数据数组，每个元素包含以下属性： - x (number): 小块的横向位置。 - y (number): 小块的纵向位置。 - width (number): 小块的宽度占比。 - height (number): 小块的高度占比。 - image (string): 小块的背景图片 URL。 - targetUrl (string, optional): 点击小块时跳转的目标 URL。 ## 5. 思路多样化的布局选择，包括一行两个、一行三个、一行四个、两左两右、一左两右、一上二下、一左三右和自定义模板。一行两个、一行三个、一行四个、两左两右、一左两右、一上二下、一左三右都可以从**自定义模版**中演化而来。 ### 5.1. 自定义模板首先介绍自定义模板的设计思路（以魔方密度 6×6 为例）： 1. 把整个魔方布局区域看成一个直角坐标系区域 1. 把一个区域划分为 n×n 等份，比如这里 n=6 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/581da92aa0bc4c8bb34a54d3edf3e2f0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=413&h=423&s=13726&e=png&b=fcfcfc) 3. 外层容器绝对定位，内层每一块区域相对定位 3. 每一个区域由 x, y 定位到位置，width, height 分别决定区域的宽高 1. 转换成样式，x->left，y->top，width->width，height->height 1. ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e15a9d7b835945d5aa77e9749a46e655~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=421&h=418&s=21635&e=png&b=ffffff) ### 5.2. 数据格式 ```ts export interface Model { x: number; y: number; width: number; height: number; image: string; } export interface InitialModels { [key: string]: Model[]; } export const initialModels: InitialModels = { magicCube1: [ { x: 0, y: 0, height: 1, width: 1, image: defaultImage }, { x: 1, y: 0, height: 1, width: 1, image: defaultImage } ], magicCube2: [ { x: 0, y: 0, height: 1, width: 1, image: defaultImage }, { x: 1, y: 0, height: 1, width: 1, image: defaultImage }, { x: 2, y: 0, height: 1, width: 1, image: defaultImage } ] }; export interface ModelOption { label: string; value: string; row: number; col: number; } export const modelOptions: ModelOption[] = [ { label: "一行两个", value: "magicCube1", row: 1, col: 2 }, { label: "一行三个", value: "magicCube2", row: 1, col: 3 }, { label: "自定义", value: "custom", row: 5, col: 5 } ]; ``` ### 5.3. 一行两个比如一行两个可以看作是一行两列（row: 1, col: 2）的自定义区域 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca8553f5aa2c424a8d76956e9006abdc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=447&h=249&s=15451&e=png&b=ffffff) ```ts { "model": "magicCube1", "row": 1, "col": 2, "list": [ { "x": 0, "y": 0, "height": 1, "width": 1, "image": "" }, { "x": 1, "y": 0, "height": 1, "width": 1, "image": "" } ] } ``` ## 6. 运行态 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2df65f39fbf84a2193a9d959cc21e47c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=481&h=472&s=418269&e=png&b=e8ddd7) ### 6.1. 代码实现 ```tsx import * as React from 'react'; import { createElement } from 'react'; import './index.scss'; export interface MagicCubeProps { isDesigner: boolean; isPreview: boolean; attr: { cube?: { row?: number; col?: number; list?: { x: number; y: number; width: number; height: number; image: string; targetUrl?: string; }[]; }; imgMargin: number; imgRadius: number; }; } const MagicCube: React.FC = ({ isDesigner, isPreview, attr }) => { const { cube = {}, imgMargin, imgRadius } = attr; const pagePadding = 0; // 获取容器的宽度 const getContainerWidth = (): number => { return isDesigner && !isPreview ? 375 : globalThis.innerWidth; }; // 获取每一列的宽度 const getItemWidth = (): number => { const width = getContainerWidth() - pagePadding * 2; return width / cube?.col; }; // 获取每一行的宽度 const getItemHeight = (): number => { return getContainerWidth() / cube?.col; }; // 计算得到容器的高度 const getWrapHeight = (): number => { return cube?.row * getItemHeight(); }; const getWrapStyle = (): React.CSSProperties => { let result: React.CSSProperties = {}; if (cube?.list.length > 0) { result.height = getWrapHeight() + 'px'; } else { result.backgroundSize = '100% 100%'; result.height = '190px'; } return result; }; const getMainStyle = (styles: { [key: string]: number }): React.CSSProperties => { const { x, y, width, height } = styles; const result: React.CSSProperties = { left: x * getItemWidth(), top: y * getItemHeight(), width: width * getItemWidth(), height: height * getItemHeight(), padding: imgMargin / 2, }; return result; }; const getItemStyle = (img: string): React.CSSProperties => { return { backgroundImage: `url(${img})`, borderRadius: imgRadius + 'px', }; }; // const handleClick = (url: string) => { // }; return (

{cube?.list.map((item, index) => (

handleClick(item.targetUrl)} >

))}

); }; export default React.memo(MagicCube); ``` ### 6.2. 代码说明 1. 在组件内部，通过解构赋值获取 cube、imgMargin 和 imgRadius。 1. 定义一系列辅助函数，如 getContainerWidth、getItemWidth、getItemHeight 等，用于计算容器和元素的尺寸、位置等样式属性。 1. getWrapStyle 函数根据 cube.list 中的元素数量来设置容器高度，并设置背景样式或默认高度。 1. getMainStyle 函数根据传入的样式参数计算并返回每个元素的位置、尺寸等样式属性。 1. getItemStyle 函数根据传入的图片 URL 返回对应的样式对象，设置背景图片和圆角等样式。 1. 最后通过遍历渲染 cube.list 中的每个元素，并根据其样式设置位置、背景图片等。 ### 6.3. 以第一张图片为例魔方容器 cube-wrap ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7cf5990ae281446a93115f5a93dce151~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1564&h=536&s=433168&e=png&b=fdfcfc) 魔方中的每一项 cube-item ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3962069284684f07b9d069dd25719a9e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1599&h=531&s=528067&e=png&b=fefdfd) - itemWidth = WIDTH/col - itemHeight = itemWidth 样式： - left: x * itemWidth - top: y * itemHeight - width: width * itemWidth - height: height * itemHeight ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff067a8043864789b1c09dbbccba6b37~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1585&h=525&s=518111&e=png&b=fefdfd) ## 7. 设置器 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f30aea1e277449219bdbdd49af3b4262~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=346&h=734&s=256369&e=png&b=f8f3f2) ### 7.1. 功能说明 1. 容器的行数和列数由 props 传入，通过下拉框设置魔方密度来实现。 1. 点击某个空白方块会触发编辑模式，此时可以选择多个方块来创建一个新的容器块。会避免选择的方块与已存在的容器块重叠。 1. 已有的容器块可以被点击，进入编辑状态，可以对容器块的位置和大小进行调整，并可以上传图片、添加链接等操作。 1. 可以删除已有的容器块。 ### 7.2. 代码实现结构 ``` magic-cube-setter | index.tsx // 父组件 MagicCubeSetter | index.scss // 样式 | CustomLayout // 子组件 CustomLayout | helper.ts // 辅助常量、函数定义 | defaultImage.png // 默认图片 ``` #### 7.2.1. magic-cube-setter/index.tsx -> 父组件 MagicCubeSetter 定义一个父组件 MagicCubeSetter，其主要功能包括： - 根据选择的模板进行布局设置，支持自定义布局和预设模板选择。 - 在自定义布局模式下，可以调整魔方的密度（行数和列数）。 - 提供一个自定义布局组件CustomLayout，用于展示和操作布局区域，并在布局区域中添加图片。 ```tsx import React, { useState, useRef, useEffect } from 'react'; import { Select } from '@alifd/next'; import { event } from '@alilc/lowcode-engine'; import { cloneDeep } from 'lodash'; import { useLatest } from 'ahooks'; import CustomLayout from './CustomLayout'; import { cubeRowsList, initialModels, modelOptions } from './helper'; import './index.scss'; interface CubeValue { list?: any[]; row?: number; col?: number; model?: string; } interface MagicCubeSetterProps { type: string; name: string; initialValue?: CubeValue; defaultValue?: CubeValue; value: CubeValue, onChange: (val: object) => void; } const MagicCubeSetter: React.FC = (props) => { const { value: cubeValue, initialValue: defaultValue, onChange } = props; const [activeItem, setActiveItem] = useState(0); const cubeValueRef = useLatest(cubeValue); const activeItemRef = useLatest(activeItem); const layoutRef = useRef(null); useEffect(() => { if (cubeValue === undefined && defaultValue) { onChange(defaultValue); } const bindEvent = (value: string) => { console.log("common:magic-cube-setter.bindEvent-on", value); let newValue = cloneDeep(cubeValueRef.current); const currentIdx = activeItemRef.current; if (newValue?.list?.[currentIdx]) { newValue.list[currentIdx].image = value; } onChange(newValue); }; event.on(`common:magic-cube-setter.bindEvent`, bindEvent); return () => { // setter 是以实例为单位的，每个 setter 注销的时候需要把事件也注销掉，避免事件池过多 event.off(`common:magic-cube-setter.bindEvent`, bindEvent); } }, []); const changeModel = (model: string) => { if (model) { let target = modelOptions.find((m) => m.value === model); // 重置模板 layoutRef.current?.reset(); let newValue: CubeValue = { list: [], row: target?.row || 1, col: target?.col || 1, model, }; // 设置模板对应初始数据 if (model === 'custom') { newValue.list = []; } else { newValue.list = JSON.parse(JSON.stringify(initialModels[model])); } onChange(newValue); } }; const handleChangeRow = (val: string) => { const value = parseInt(val || '5'); const newValue: CubeValue = { model: 'custom', list: [], row: value, col: value, }; onChange(newValue); layoutRef.current?.reset(); }; const onCurIndex = (item: number) => { setActiveItem(item); const activeImageUrl = cubeValueRef.current.list?.[item]?.['image']; event.emit('magic-cube-setter.changeSelectValue', activeImageUrl) }; const onCustomChange = (newList: []) => { const { model, row, col } = cubeValueRef.current; const newValue: CubeValue = { model, row, col, list: newList }; onChange(newValue); } return (

{cubeValue.model === 'custom' && (

魔方密度

)} {/*

魔方布局

*/}

{cubeValue.model === 'custom' ? '移动鼠标选定布局区域大小' : '选定布局区域，在下方添加图片'}

模板选择

); }; export default MagicCubeSetter; ``` #### 7.2.2. magic-cube-setter/CustomLayout.tsx -> 子组件 CustomLayout 定义一个子组件 CustomLayout，用于展示一个自定义布局的网格容器，并允许用户点击和移动来选择和编辑其中的块。其主要功能包括： 1. 渲染网格容器：根据 row 和 col 的值，生成相应数量的 ul 和 li 元素，形成一个网格布局。 1. 处理点击事件：当用户点击某个网格块时，根据当前的编辑状态（edit）来执行不同的操作。如果当前不处于编辑状态，则记录点击的块的 key 值，并进入编辑状态。如果当前处于编辑状态，则根据记录的起始 key 值和结束 key 值，创建一个新的块，并将其添加到 list 数组中。 1. 处理移动事件：当用户在编辑状态下移动鼠标时，根据起始 key 值和当前鼠标所在的块的 key 值，计算出需要更新的块的 key 值，并将其记录在 editKeys 数组中。 1. 更新布局：根据 list 数组中的数据，渲染编辑容器块。用户可以通过点击和选择块来切换当前的编辑状态，并在编辑状态下删除选定的块。 ```tsx import React, { useState, useEffect, useImperativeHandle, ForwardRefRenderFunction, forwardRef, Ref, MouseEvent } from 'react'; // import { produce } from 'immer'; import { cloneDeep, sortBy } from 'lodash'; import { cubeWrapWidth, customLayoutWidth, isRectangleOverlap } from './helper'; import defaultImage from './defaultImage.png'; interface CustomLayoutProps { list: any[]; model: string; row: number; col: number; onCurIndex: (index: number) => void; onCustomChange: (val: []) => void; selectedNodeId: number; ref?: React.Ref; } interface CustomDivRef extends HTMLDivElement { reset: () => void; } interface SplitKey { y: number; x: number; } const CustomLayout: ForwardRefRenderFunction = forwardRef( (props: CustomLayoutProps, ref: Ref) => { const { list, model, row, col, onCurIndex, onCustomChange } = props; const [startKey, setStartKey] = useState(0); const [curIndex, setCurIndex] = useState(-1); const [edit, setEdit] = useState(false); const [colArr, setColArr] = useState([]); const [rowArr, setRowArr] = useState([]); const [editKeys, setEditKeys] = useState([]); const getBaseW = (): number => { return Math.floor(customLayoutWidth / col); }; useEffect(() => { setTimeout(() => { updateCurIndex(0); }, 500); }, []); useEffect(() => { setColArr([...Array(row).keys()]); setRowArr([...Array(col).keys()]); }, [row, col]); // 将 reset 方法暴露给父组件 useImperativeHandle(ref, () => ({ reset })); const updateCurIndex = (index: number) => { setCurIndex(index); onCurIndex(index); }; const updateList = (updatedValue: number[]) => { onCustomChange(updatedValue); }; const reset = () => { setStartKey(0); updateCurIndex(-1); setEdit(false); // onCustomChange([]); setEditKeys([]); }; const clickWrap = (e: MouseEvent) => { if (!edit) { // const key = Number(e.target.dataset.key); const key = Number((e.target as HTMLDivElement).dataset.key); setEditKeys([key]); setStartKey(key); setEdit(true); } else { let keys = cloneDeep(sortBy(editKeys)); const start = splitKey(keys[0]); const end = splitKey(keys[keys.length - 1]); const temp = { x: start.x, y: start.y, height: end.y - start.y + 1, width: end.x - start.x + 1, image: defaultImage, targetUrl: '' }; const updatedValue = [...list, temp]; onCustomChange(updatedValue); updateCurIndex(updatedValue.length - 1); setEditKeys([]); setEdit(false); } }; const move = (e: MouseEvent) => { if (!edit) { return; } const keys = []; const start = splitKey(startKey); const end = splitKey(Number((e.target as HTMLDivElement).dataset.key)); const ys = sortBy([start.y, end.y]); const xs = sortBy([start.x, end.x]); if (antiCollision(start, end)) { return; } for (let i = ys[0]; i <= ys[1]; i++) { for (let j = xs[0]; j <= xs[1]; j++) { keys.push(mergeKey(i, j)); } } setEditKeys(keys); }; const antiCollision = (start: { x: number, y: number }, end: { x: number, y: number }) => { // 有可能从右边从左边选，导致 start.x > end.y，所以要排序 // 保证 rec1 [x1,y1,x2,y2] (x1,y1)为左上角坐标，(x2,y2)为右下角坐标 const xs = sortBy([start.x, end.x]); const ys = sortBy([start.y, end.y]); // 因为 end 记录的是 li 块的左上角坐标，构成矩形区域的话，应该算 li 块右下角坐标，所以 + 1 const rec1 = [xs[0], ys[0], xs[1] + 1, ys[1] + 1]; for (let i = 0; i < list.length; i++) { const item = list[i]; const rec2 = [item.x, item.y, item.x + item.width, item.y + item.height]; const isRectangleOverlapRes = isRectangleOverlap(rec1, rec2); if (isRectangleOverlapRes) { return true; } } return false; }; const mergeKey = (y: number, x: number) => { return Number(y + (x * 10)); }; const splitKey = (key: number) => { if (key >= 10) { return { x: Math.floor((key % 100) / 10), y: key % 10 }; } else { return { x: 0, y: key }; } }; const getWidth = () => { return Math.floor(cubeWrapWidth / col); }; const getStyle = (style: any) => { const { x, y, width, height } = style; const result = { left: `${x * getWidth() - 1}px`, top: `${y * getWidth() - 1}px`, width: `${width * getWidth() + 1}px`, height: `${height * getWidth() + 1}px`, }; return result; }; const deleteEditWrap = (index: number) => { const updatedValue = [...list]; updatedValue.splice(index, 1); updateList(updatedValue); updateCurIndex(updatedValue.length - 1); }; return (

{rowArr.map((y) => (

); })}

))} {/* 编辑容器块 */} {list.map((item, index) => { const isActive = curIndex === index; const style = getStyle(item); const isImageEmpty = item.image === defaultImage || !item.image; const backgroundImage = isImageEmpty ? 'none' : `url(${item.image})`; return (
updateCurIndex(index)} > {model === 'custom' && (
deleteEditWrap(index)}>
)}
{isImageEmpty &&
{`${Math.floor(item.width * getBaseW())}x${Math.floor(item.height * getBaseW())}`}
} {/* {item.width > 1 &&
或同等比例
} */}

); })}

); } ); export default CustomLayout; ``` #### 7.2.3. magic-cube-setter/helper.ts 1. cubeRowsList: 这是一个包含数字的数组，表示了一些魔方的行数。 1. cubeWrapWidth: 表示魔方的包裹宽度。 1. customLayoutWidth: 表示自定义布局的宽度。 1. Model 接口定义了一个模型对象的结构，包括 x、y 坐标、宽度、高度和图片路径。 1. InitialModels 接口定义了一个初始模型对象的结构，是一个 key 值为字符串，值为 Model 数组的对象。 1. initialModels: 是一个包含多个魔方初始模型的对象，每个魔方有不同数量的模型组成。 1. ModelOption 接口定义了一个模型选项的结构，包括标签、值、行数和列数等信息。 1. modelOptions: 是一个包含多个模型选项的数组，用于描述不同类型的模型布局选项。 1. isRectangleOverlap 函数用于判断两个矩形是否重叠。 ```ts import { sortBy } from 'lodash'; import defaultImage from './defaultImage.png'; export const cubeRowsList: number[] = [4, 5, 6, 7]; export const cubeWrapWidth: number = 220; export const customLayoutWidth: number = 750; export interface Model { x: number; y: number; width: number; height: number; image: string; } export interface InitialModels { [key: string]: Model[]; } export const initialModels: InitialModels = { magicCube1: [ { x: 0, y: 0, height: 1, width: 1, image: defaultImage }, { x: 1, y: 0, height: 1, width: 1, image: defaultImage } ], magicCube2: [ { x: 0, y: 0, height: 1, width: 1, image: defaultImage }, { x: 1, y: 0, height: 1, width: 1, image: defaultImage }, { x: 2, y: 0, height: 1, width: 1, image: defaultImage } ], magicCube3: [ { x: 0, y: 0, height: 1, width: 1, image: defaultImage }, { x: 1, y: 0, height: 1, width: 1, image: defaultImage }, { x: 2, y: 0, height: 1, width: 1, image: defaultImage }, { x: 3, y: 0, height: 1, width: 1, image: defaultImage } ], magicCube4: [ { x: 0, y: 0, height: 1, width: 1, image: defaultImage }, { x: 1, y: 0, height: 1, width: 1, image: defaultImage }, { x: 0, y: 1, height: 1, width: 1, image: defaultImage }, { x: 1, y: 1, height: 1, width: 1, image: defaultImage } ], magicCube5: [ { x: 0, y: 0, height: 2, width: 1, image: defaultImage }, { x: 1, y: 0, height: 1, width: 1, image: defaultImage }, { x: 1, y: 1, height: 1, width: 1, image: defaultImage } ], magicCube6: [ { x: 0, y: 0, height: 1, width: 2, image: defaultImage }, { x: 0, y: 1, height: 1, width: 1, image: defaultImage }, { x: 1, y: 1, height: 1, width: 1, image: defaultImage } ], magicCube7: [ { x: 0, y: 0, height: 4, width: 2, image: defaultImage }, { x: 2, y: 0, height: 2, width: 2, image: defaultImage }, { x: 2, y: 2, height: 2, width: 1, image: defaultImage }, { x: 3, y: 2, height: 2, width: 1, image: defaultImage } ] }; export interface ModelOption { label: string; value: string; row: number; col: number; } export const modelOptions: ModelOption[] = [ { label: "一行两个", value: "magicCube1", row: 1, col: 2 }, { label: "一行三个", value: "magicCube2", row: 1, col: 3 }, { label: "一行四个", value: "magicCube3", row: 1, col: 4 }, { label: "两左两右", value: "magicCube4", row: 2, col: 2 }, { label: "一左两右", value: "magicCube5", row: 2, col: 2 }, { label: "一上二下", value: "magicCube6", row: 2, col: 2 }, { label: "一左三右", value: "magicCube7", row: 4, col: 4 }, { label: "自定义", value: "custom", row: 5, col: 5 } ]; type Rectangle = [number, number, number, number]; export const isRectangleOverlap = function (rec1: Rectangle, rec2: Rectangle) { return (Math.min(rec1[2], rec2[2]) > Math.max(rec1[0], rec2[0]) && Math.min(rec1[3], rec2[3]) > Math.max(rec1[1], rec2[1])); }; ``` ## 8. 难点 ### 8.1 矩形重叠判断 ![20240324_140754_isRectangleOverlap.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c71d33f31e94e56a6a24bc6f91d8966~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=488&h=442&s=66820&e=gif&f=152&b=faf9f6) 当前选择的矩形块不能和已经选择的矩形块重叠，所以需要监听 onMouseOver 事件，在鼠标经过的单元格都判断一下，如果重叠了就不处理，如果没有重叠，就将当前经过的单元格坐标加入到 editKey 中。具体代码如下： ```jsx const move = (e: MouseEvent) => { if (!edit) { return; } const keys = []; const start = splitKey(startKey); const end = splitKey(Number((e.target as HTMLDivElement).dataset.key)); const ys = sortBy([start.y, end.y]); const xs = sortBy([start.x, end.x]); if (antiCollision(start, end)) { return; } for (let i = ys[0]; i <= ys[1]; i++) { for (let j = xs[0]; j <= xs[1]; j++) { keys.push(mergeKey(i, j)); } } setEditKeys(keys); }; const antiCollision = (start: { x: number, y: number }, end: { x: number, y: number }) => { // 有可能从右边从左边选，导致 start.x > end.y，所以要排序 // 保证 rec1 [x1,y1,x2,y2] (x1,y1)为左上角坐标，(x2,y2)为右下角坐标 const xs = sortBy([start.x, end.x]); const ys = sortBy([start.y, end.y]); // 因为 end 记录的是 li 块的左上角坐标，构成矩形区域的话，应该算 li 块右下角坐标，所以 + 1 const rec1 = [xs[0], ys[0], xs[1] + 1, ys[1] + 1]; for (let i = 0; i < list.length; i++) { const item = list[i]; const rec2 = [item.x, item.y, item.x + item.width, item.y + item.height]; const isRectangleOverlapRes = isRectangleOverlap(rec1, rec2); if (isRectangleOverlapRes) { return true; } } return false; }; export const isRectangleOverlap = function (rec1: Rectangle, rec2: Rectangle) { return (Math.min(rec1[2], rec2[2]) > Math.max(rec1[0], rec2[0]) && Math.min(rec1[3], rec2[3]) > Math.max(rec1[1], rec2[1])); }; ``` 其中判断矩形是否重叠函数 `isRectangleOverlap` 与 [836. 矩形重叠](https://leetcode.cn/problems/rectangle-overlap/) 题目解法相同。 ## 9. 小结魔方组件基本可以满足商家对于产品展示和活动海报的灵活需求。它具有以下特点： 1. 提供多样化的布局选择，包括预设模板和自定义模板。 1. 支持上传商品图片和活动海报，并为图片添加链接。 1. 可调整图片间隙和尺寸要求，适配不同的页面布局和设备。 1. 自定义模板支持移动鼠标选定布局区域大小，满足商家的个性化需求。 1. 设置器组件用于配置魔方的布局和属性。 - 可以选择不同的模板和布局密度，同时支持自定义布局。 - 在布局区域中，用户可以选择图片并进行编辑操作，以满足不同的展示需求。