css样式如下：.layerWrap{position:absolute;左：60px；边距顶部：-20px；填充顶部：10px；填充底部：10px；宽度：160px；背景：#fff；盒子阴影：0010pxrgba(0,0,0,0.1);颜色：#888；.layerItem{&:hover{背景颜色：rgba(110,38,236,0.1);}span:last-child{margin-left:20px;这里分享一下具体的实现效果：由于我们的应用是用vue3的组合函数写的，所以上图中涉及的切换元素和删除元素的方法也很简单，如下：import{ref}from"vue";constcurSelect=ref("");constcanvasBox=ref<{[shapeType中的键]:IBaseShapeProp[]}>({rect:[],circle:[],line:[],});//选择元素缺点thandleSelected=(key:string)=>{curSelect.value=key;};//删除元素consthandleDelItem=(key:string)=>{canvasBox.value.rect=canvasBox.value.rect.filter((v)=>v.key!==键);};所以层次管理的本质是在已有原语的基础上，在数据结构层次上进行操作。当然，你也可以扩展我们的画板应用，支持多选。搜索、排序顺序等功能。实时缩略图的实现我们可能看到有些网站在浏览页面时会显示小缩略图，可以实时显示当前页面的情况。例如：这里有一个简单的实现方案分享给大家。因为我们在canvas中做的每一个操作都会记录在recordManager（recordmanager，也就是上一篇介绍的undo和redo的历史快照集合）中，我们只需要在每次操作之后根据当前dom生成一个image即可operation只是一张图片（如果canvas用canvas实现，miniMap会更容易实现）。所以我们现在的问题就变成了如何根据dom生成图片快照。当然，这里也有解决办法。核心思想是将dom转化为xml结构，然后放到标签中。借助svg处理能力，将dom结构转换为svg标签，然后使用svg标签作为图片的base64地址，最后使用a标签进行下载。但是需要注意以下两个细节：img标签的地址必须是base64字符串，所以我们需要用canvas转成base64通过src中的上述方法，我们可以原生将dom转为图片。当然，市面上也有比较成熟的方案，比如：html2canvasdom2image，所以这里我就用dom2image带大家一起来实现miniMap。首先，我们在vite项目中安装库：yarnadddom-to-image具体实现：constpushRecordFn=(state:{[keyinshapeType]:IBaseShapeProp[]},prevState:{[keyinshapeType]:IBaseShapeProp[]})=>{//生成迷你缩略图domtoimage.toPng(boardDom?.value?.boardDom).then(function(dataUrl:string){miniImg.value=dataUrl;}).catch(function(error:错误){console.error("脚本错误！",error);});const{snapshots,maxLimit,curIndex}=recordManager.value;//如果两个状态相同，不推入历史if(!diff(state,snapshots[curIndex])){return;}//如果在撤销过程中重新执行了新的操作，之前的状态将被覆盖if(snapshots.length-1!==curIndex){snapshots.splice(curIndex+1,snapshots.length);}//超过最大限制记录if(snapshots.length>=maxLimit){snapshots.shift();}recordManager.value.snapshots.push(cloneDeep(state));recordManager.value.curIndex=recordManager.value.snapshots.length-1;};好了，上面已经实现了我们的miniMap缩略图功能，演示如下：