4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1b74,import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'; import { computeResizableSizes, getResizableDirectionCursor, getResizableStorageKey, resizableStyleKeys } from '../lib/core'; import type { ResizableDirection, ResizablePanelGroupBaseProps } from '../lib/core'; import styles from './resizable.module.scss'; interface ResizableContextValue { direction: ResizableDirection; containerRef: React.RefObject; getSize: (index: number) => number; registerPanel: () => number; registerHandle: () => number; resize: (index: number, delta: number) => void; } const ResizableContext = createContext(null); function useResizable(): ResizableContextValue { const context = useContext(ResizableContext); if (!context) { throw new Error('Resizable sub-components must be used within .'); } return context; } export interface ResizablePanelGroupProps extends React.HTMLAttributes, ResizablePanelGroupBaseProps {} const ResizablePanelGroup = React.forwardRef(({ className = '', direction = 'horizontal', id, children, ...props }, ref) => { const containerRef = useRef(null); const panelCountRef = useRef(0); const [panelCount, setPanelCount] = useState(0); const [sizes, setSizes] = useState(() => { if (!id || typeof window === 'undefined') { return []; } const stored = window.localStorage.getItem(getResizableStorageKey(id)); if (!stored) { return []; } try { const parsed = JSON.parse(stored); return Array.isArray(parsed) ? parsed.map((item: unknown) => Number(item)) : []; } catch { return []; } }); useEffect(() => { if (!id || sizes.length === 0) { return; } window.localStorage.setItem(getResizableStorageKey(id), JSON.stringify(sizes)); }, [id, sizes]); const registerPanel = useCallback(() => { const index = panelCountRef.current; panelCountRef.current += 1; setPanelCount(panelCountRef.current); return index; }, []); const registerHandle = useCallback(() => { return Math.max(0, panelCountRef.current - 1); }, []); const getSize = useCallback( (index: number) => { return sizes[index] ?? 100 / Math.max(panelCount, 1); }, [sizes, panelCount], ); const resize = useCallback((index: number, delta: number) => { setSizes((prev) => { const total = Math.max(panelCountRef.current, 2); const current = Array.from({ length: total }, (_item, itemIndex) => prev[itemIndex] ?? 100 / total); return computeResizableSizes(current, index, delta); }); }, []); function setContainerRef(element: HTMLDivElement | null) { containerRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } return (

{children}

); }); ResizablePanelGroup.displayName = 'ResizablePanelGroup'; export interface ResizablePanelProps extends React.HTMLAttributes {} const ResizablePanel = React.forwardRef(({ className = '', style, children, ...props }, ref) => { const { getSize, registerPanel } = useResizable(); const [index, setIndex] = useState(-1); const registeredRef = useRef(false); useEffect(() => { if (registeredRef.current) { return; } registeredRef.current = true; setIndex(registerPanel()); }, [registerPanel]); const size = index >= 0 ? getSize(index) : undefined; return (

{children}

); }); ResizablePanel.displayName = 'ResizablePanel'; export interface ResizableHandleProps extends React.HTMLAttributes { withHandle?: boolean; } const ResizableHandle = React.forwardRef(({ className = '', withHandle = false, ...props }, ref) => { const { direction, containerRef, registerHandle, resize } = useResizable(); const [index, setIndex] = useState(-1); const [dragging, setDragging] = useState(false); const registeredRef = useRef(false); useEffect(() => { if (registeredRef.current) { return; } registeredRef.current = true; setIndex(registerHandle()); }, [registerHandle]); function handlePointerDown(event: React.PointerEvent) { if (index < 0) { return; } event.preventDefault(); const container = containerRef.current; if (!container) { return; } const rect = container.getBoundingClientRect(); const total = direction === 'horizontal' ? rect.width : rect.height; const startCoord = direction === 'horizontal' ? event.clientX : event.clientY; let lastDeltaPercent = 0; setDragging(true); document.body.style.cursor = getResizableDirectionCursor(direction); function handlePointerMove(moveEvent: PointerEvent) { const coord = direction === 'horizontal' ? moveEvent.clientX : moveEvent.clientY; const deltaPercent = total > 0 ? ((coord - startCoord) / total) * 100 : 0; const step = deltaPercent - lastDeltaPercent; resize(index, step); lastDeltaPercent = deltaPercent; } function handlePointerUp() { setDragging(false); document.body.style.cursor = ''; window.removeEventListener('pointermove', handlePointerMove); window.removeEventListener('pointerup', handlePointerUp); } window.addEventListener('pointermove', handlePointerMove); window.addEventListener('pointerup', handlePointerUp); } return (

{withHandle && (

)}

); }); ResizableHandle.displayName = 'ResizableHandle'; export { ResizablePanelGroup, ResizablePanel, ResizableHandle }; export default ResizablePanelGroup; 4f:T5d9,@use '../../../styles/variables/colors' as *; // 面板组 .group { display: flex; width: 100%; height: 100%; overflow: hidden; &[data-direction='vertical'] { flex-direction: column; } } // 单个面板 .panel { min-width: 0; min-height: 0; overflow: hidden; } // 拖拽手柄 (分割条) .handle { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: $border; touch-action: none; outline: none; &::after { content: ''; position: absolute; background-color: transparent; transition: background-color $transition-fast; } &:hover::after, &[data-active='true']::after { background-color: $ring; } &:focus-visible { box-shadow: 0 0 0 2px $background, 0 0 0 4px $ring; } .handleBar { z-index: 10; display: flex; align-items: center; justify-content: center; width: 0.75rem; height: 1rem; border: 1px solid $border; border-radius: $radius-xs; background-color: $border; svg { width: 0.625rem; height: 0.625rem; } } } // 水平方向：纵向分割条 .group[data-direction='horizontal'] > .handle { width: 1px; align-self: stretch; cursor: col-resize; &::after { inset: 0 -3px; } } // 垂直方向：横向分割条 .group[data-direction='vertical'] > .handle { height: 1px; align-self: stretch; cursor: row-resize; &::after { inset: -3px 0; } .handleBar { width: 1rem; height: 0.75rem; svg { transform: rotate(90deg); } } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/resizable/resizable.tsx","content":"$4e","type":"registry:ui","target":"components/ui/resizable/resizable.tsx"},{"path":"packages/styles/scss/components/resizable.module.scss","content":"$4f","type":"registry:file","target":"components/ui/resizable/resizable.module.scss"},{"path":"packages/react/src/components/resizable/index.ts","content":"export { ResizablePanelGroup, ResizablePanel, ResizableHandle, type ResizablePanelGroupProps, type ResizablePanelProps, type ResizableHandleProps } from './resizable';\n","type":"registry:ui","target":"components/ui/resizable/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]