【Svelte】像 vs code 一样的布局：三栏布局

直接贴代码：

<scriptlang="ts">import{browser}from'$app/environment';import{onMount}from'svelte';// Layout stateletleftWidth=$state(33.33);letmiddleWidth=$state(33.33);letisResizingLeft=$state(false);letisResizingRight=$state(false);onMount(()=>{consthandleMouseMove=(e:MouseEvent)=>{constcontainer=document.getElementById('layout-container');if(!container)return;constcontainerRect=container.getBoundingClientRect();constcontainerWidth=containerRect.width;constmouseXRelativeToContainer=e.clientX-containerRect.left;if(isResizingLeft){constnewLeftWidth=(mouseXRelativeToContainer/containerWidth)*100;constcurrentRightBoundary=leftWidth+middleWidth;// Ensure minimum widths of 5% and that we don't cross the second resizerif(newLeftWidth>5&&newLeftWidth<currentRightBoundary-5){leftWidth=newLeftWidth;middleWidth=currentRightBoundary-newLeftWidth;}}elseif(isResizingRight){constleftBoundaryPx=(leftWidth/100)*containerWidth;constnewMiddleWidth=((mouseXRelativeToContainer-leftBoundaryPx)/containerWidth)*100;// Ensure middle column doesn't get too small (min 5%)// and doesn't push the right column below 5%if(newMiddleWidth>5&&(leftWidth+newMiddleWidth)<95){middleWidth=newMiddleWidth;}}};consthandleMouseUp=()=>{isResizingLeft=false;isResizingRight=false;document.body.style.cursor='default';};window.addEventListener('mousemove',handleMouseMove);window.addEventListener('mouseup',handleMouseUp);return()=>{window.removeEventListener('mousemove',handleMouseMove);window.removeEventListener('mouseup',handleMouseUp);};});</script><divid="layout-container"class="flex h-[calc(100vh-64px)] w-full overflow-hidden bg-white"style="user-select:{isResizingLeft || isResizingRight ?'none':'auto'}"><!-- Column 1 --><divclass="flex h-full flex-col border-r-4 border-black bg-red-100 shrink-0"style="flex: 0 0{leftWidth}%"><divclass="p-8"><h1class="text-4xl font-black text-red-600">COLUMN 1 - LEFT</h1><pclass="mt-4 text-xl">If you can see this, the layout is working.</p></div></div><!-- Resizer 1 --><div class="z-10 w-2 cursor-col-resize bg-black hover:bg-primary shrink-0" onmousedown={() => { isResizingLeft = true; document.body.style.cursor = 'col-resize'; }} ></div><!-- Column 2 --><divclass="flex h-full flex-col border-r-4 border-black bg-blue-100 shrink-0"style="flex: 0 0{middleWidth}%"><divclass="p-8"><h1class="text-4xl font-black text-blue-600">COLUMN 2 - MIDDLE</h1><pclass="mt-4 text-xl">Drag the black bars to resize.</p></div></div><!-- Resizer 2 --><div class="z-10 w-2 cursor-col-resize bg-black hover:bg-primary shrink-0" onmousedown={() => { isResizingRight = true; document.body.style.cursor = 'col-resize'; }} ></div><!-- Column 3 --><divclass="flex h-full flex-grow flex-col bg-green-100 min-w-0"><divclass="p-8"><h1class="text-4xl font-black text-green-600">COLUMN 3 - RIGHT</h1><pclass="mt-4 text-xl">Everything should be visible now.</p></div></div></div><style>:global(body){user-select:none;/* Prevent text selection while resizing */}</style>