React Resizable Panels：打造动态布局提升用户体验优化指南

2026-03-08 03:42:55作者：范垣楠Rhoda

在现代Web应用开发中，用户对界面交互的灵活性要求越来越高。React Resizable Panels作为一款专注于动态布局（Dynamic Layout）的React库，通过提供可拖拽调整大小的面板组件，让开发者能够轻松实现类似IDE的分屏编辑、数据仪表盘的灵活布局等高级交互功能。本文将从核心价值出发，通过场景化解析、实施指南、进阶技巧和生态拓展五个维度，全面介绍如何利用这个强大的工具提升应用的用户体验。

一、核心价值：重新定义界面交互的灵活性

React Resizable Panels的核心价值在于它解决了传统固定布局的局限性，让用户能够根据自己的需求自由调整界面元素的大小和位置。这种灵活性带来了三个关键优势：

1. 个性化用户体验

就像我们可以根据自己的习惯调整办公桌的布局一样，React Resizable Panels允许用户根据自己的工作习惯和内容需求，调整界面元素的大小比例。这种个性化设置能够显著提升用户的工作效率和满意度。

2. 空间利用率最大化

在不同尺寸的设备上，固定布局往往难以充分利用屏幕空间。React Resizable Panels通过动态调整机制，确保在任何设备上都能最优地利用可用空间，无论是在大屏显示器上进行多任务处理，还是在移动设备上聚焦核心内容。

3. 内容优先级自定义

用户可以根据当前任务的需要，放大重要内容区域，缩小次要内容区域。这种动态优先级调整功能，使得应用能够更好地适应不同场景下的使用需求。

二、场景解析：三大创新应用领域

1. 数据可视化仪表盘：按需聚焦关键指标

问题背景：传统仪表盘往往采用固定布局，重要指标和次要指标的显示比例无法调整，导致用户在分析数据时需要频繁滚动或切换视图。

解决方案：使用React Resizable Panels创建可调整大小的数据模块，让用户能够根据当前分析重点放大或缩小不同的数据可视化组件。

import React from 'react';
import { PanelGroup, Panel } from 'react-resizable-panels';
import { LineChart, BarChart, PieChart } from 'your-chart-library';

function DataDashboard() {
  return (
    <PanelGroup direction="horizontal" className="h-full w-full">
      {/* 主数据面板 - 默认占据60%宽度 */}
      <Panel defaultSize={60}>
        <div className="p-4">
          <h2>销售趋势分析</h2>
          <LineChart data={salesData} />
        </div>
      </Panel>
      
      {/* 右侧数据面板组 - 垂直布局 */}
      <PanelGroup direction="vertical" defaultSize={40}>
        {/* 顶部面板 - 默认占据50%高度 */}
        <Panel defaultSize={50}>
          <div className="p-4">
            <h2>地区分布</h2>
            <PieChart data={regionData} />
          </div>
        </Panel>
        
        {/* 底部面板 - 默认占据50%高度 */}
        <Panel defaultSize={50}>
          <div className="p-4">
            <h2>产品对比</h2>
            <BarChart data={productData} />
          </div>
        </Panel>
      </PanelGroup>
    </PanelGroup>
  );
}

export default DataDashboard;

在这个数据可视化场景中，用户可以根据分析需求调整不同图表的大小。例如，在深入分析销售趋势时，可以放大折线图区域；在比较产品表现时，则可以扩大柱状图的显示空间。

2. 内容创作平台：多窗格编辑环境

问题背景：内容创作者在编辑过程中需要同时参考多个信息源，固定布局的编辑器往往无法满足这种多源信息比对的需求。

解决方案：利用React Resizable Panels创建多窗格编辑环境，实现编辑区、预览区和参考资料区的灵活布局。

import React, { useState } from 'react';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
import { Editor } from 'your-editor-library';

function ContentCreationWorkspace() {
  const [content, setContent] = useState('');
  
  return (
    <PanelGroup direction="horizontal" className="h-screen">
      {/* 左侧参考资料面板 */}
      <Panel defaultSize={25} minSize={15} maxSize={40}>
        <div className="p-4 overflow-y-auto">
          <h2>参考资料</h2>
          {/* 参考资料内容 */}
        </div>
      </Panel>
      
      <PanelResizeHandle className="w-2 bg-gray-200 hover:bg-gray-300" />
      
      {/* 中间编辑面板 */}
      <Panel defaultSize={50} minSize={30}>
        <div className="h-full flex flex-col">
          <div className="p-4 border-b">
            <h2>内容编辑</h2>
          </div>
          <Editor 
            value={content} 
            onChange={setContent}
            className="flex-grow"
          />
        </div>
      </Panel>
      
      <PanelResizeHandle className="w-2 bg-gray-200 hover:bg-gray-300" />
      
      {/* 右侧预览面板 */}
      <Panel defaultSize={25} minSize={15} maxSize={40}>
        <div className="p-4 overflow-y-auto">
          <h2>实时预览</h2>
          <div dangerouslySetInnerHTML={{ __html: content }} />
        </div>
      </Panel>
    </PanelGroup>
  );
}

export default ContentCreationWorkspace;

这个多窗格编辑环境允许内容创作者根据需要调整各个区域的大小，在进行复杂内容创作时能够同时查看参考资料、编辑内容和预览效果，大大提升创作效率。

3. 项目管理工具：任务与数据的灵活布局

问题背景：项目管理工具需要同时展示任务列表、甘特图、团队成员和统计数据等多种信息，固定布局难以满足不同角色用户的信息需求。

解决方案：使用React Resizable Panels构建灵活的项目管理界面，让不同角色的用户可以根据自己的工作重点调整各功能模块的大小。

import React from 'react';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
import { TaskList, GanttChart, TeamMembers, ProjectStats } from 'your-project-components';

function ProjectManagementInterface() {
  return (
    <div className="h-screen flex flex-col">
      {/* 顶部导航 */}
      <header className="h-16 border-b p-4">
        <h1>项目管理工作台</h1>
      </header>
      
      {/* 主内容区 - 垂直面板组 */}
      <PanelGroup direction="vertical" className="flex-grow">
        {/* 上部工作区 - 水平面板组 */}
        <Panel defaultSize={70} minSize={50}>
          <PanelGroup direction="horizontal">
            {/* 左侧任务列表 */}
            <Panel defaultSize={40} minSize={20}>
              <TaskList />
            </Panel>
            
            <PanelResizeHandle className="w-2 bg-gray-200" />
            
            {/* 右侧甘特图 */}
            <Panel defaultSize={60} minSize={30}>
              <GanttChart />
            </Panel>
          </PanelGroup>
        </Panel>
        
        <PanelResizeHandle className="h-2 bg-gray-200" />
        
        {/* 下部信息区 - 水平面板组 */}
        <Panel defaultSize={30} maxSize={50}>
          <PanelGroup direction="horizontal">
            {/* 团队成员 */}
            <Panel defaultSize={50}>
              <TeamMembers />
            </Panel>
            
            <PanelResizeHandle className="w-2 bg-gray-200" />
            
            {/* 项目统计 */}
            <Panel defaultSize={50}>
              <ProjectStats />
            </Panel>
          </PanelGroup>
        </Panel>
      </PanelGroup>
    </div>
  );
}

export default ProjectManagementInterface;

在这个项目管理界面中，项目经理可能更关注甘特图和项目统计，而团队成员则可能更关注任务列表和团队信息。通过可调整大小的面板，每个用户都能定制自己的工作界面。

三、实施指南：从安装到基础配置

1. 环境准备与安装

要开始使用React Resizable Panels，首先需要在你的React项目中安装该库。打开终端，执行以下命令：

npm install react-resizable-panels

或者如果你使用yarn：

yarn add react-resizable-panels

2. 基础组件解析

React Resizable Panels提供了三个核心组件，它们协同工作以实现面板的可调整大小功能：

PanelGroup：作为面板的容器，定义了面板的排列方向（水平或垂直）和其他全局设置。
Panel：表示一个可调整大小的面板，你可以在其中放置任何内容。
PanelResizeHandle：分隔两个面板的可拖拽元素，用于触发大小调整。

这三个组件的关系就像抽屉柜、抽屉和抽屉把手一样：PanelGroup是整个抽屉柜，Panel是各个抽屉，而PanelResizeHandle则是抽屉之间的把手，让你可以调整每个抽屉的大小。

3. 基础布局实现

下面是一个最基本的两面板布局实现，展示了如何使用这三个核心组件：

import React from 'react';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';

function BasicPanelLayout() {
  return (
    <div className="h-96 w-full border rounded-lg overflow-hidden">
      <PanelGroup direction="horizontal">
        {/* 左侧面板 - 占30%宽度 */}
        <Panel defaultSize={30}>
          <div className="h-full p-4 bg-blue-50">
            <h3>左侧面板</h3>
            <p>这是可以调整大小的左侧面板内容</p>
          </div>
        </Panel>
        
        {/* 分隔条 */}
        <PanelResizeHandle className="w-2 bg-gray-300 hover:bg-gray-400" />
        
        {/* 右侧面板 - 占70%宽度 */}
        <Panel defaultSize={70}>
          <div className="h-full p-4 bg-green-50">
            <h3>右侧面板</h3>
            <p>这是可以调整大小的右侧面板内容</p>
          </div>
        </Panel>
      </PanelGroup>
    </div>
  );
}

export default BasicPanelLayout;

在这个基础示例中，我们创建了一个水平排列的两面板布局，左侧面板默认占30%宽度，右侧面板占70%。用户可以通过拖拽中间的分隔条来调整两个面板的宽度比例。

四、进阶技巧：打造专业级交互体验

1. 优化分隔条交互体验

默认的分隔条可能不够直观，我们可以通过添加视觉反馈和交互效果来提升用户体验：

// 自定义分隔条组件
function CustomResizeHandle() {
  return (
    <PanelResizeHandle
      className="relative w-2 bg-gray-200 hover:bg-blue-400 transition-colors duration-200"
    >
      {/* 添加视觉指示器 */}
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col gap-1">
        <div className="w-1 h-1 bg-gray-500 rounded-full"></div>
        <div className="w-1 h-1 bg-gray-500 rounded-full"></div>
        <div className="w-1 h-1 bg-gray-500 rounded-full"></div>
      </div>
      
      {/* 拖拽时的样式变化 */}
      <style jsx>{`
        :global(.resizing) & {
          background-color: blue;
          opacity: 0.8;
        }
      `}</style>
    </PanelResizeHandle>
  );
}

// 使用自定义分隔条
function EnhancedPanelLayout() {
  return (
    <PanelGroup direction="horizontal">
      <Panel defaultSize={50}>
        <div className="p-4">左侧面板</div>
      </Panel>
      <CustomResizeHandle />
      <Panel defaultSize={50}>
        <div className="p-4">右侧面板</div>
      </Panel>
    </PanelGroup>
  );
}

这个自定义分隔条添加了三个小圆点作为视觉指示器，当用户悬停或拖拽时会改变颜色，提供清晰的交互反馈。

2. 实现布局持久化

用户调整好面板布局后，通常希望下次打开应用时保持相同的布局。我们可以使用localStorage来实现布局状态的持久化：

import React, { useEffect, useState } from 'react';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';

function PersistentLayout() {
  // 从localStorage加载保存的布局
  const [savedLayout, setSavedLayout] = useState(null);
  
  useEffect(() => {
    try {
      const saved = localStorage.getItem('panelLayout');
      if (saved) {
        setSavedLayout(JSON.parse(saved));
      }
    } catch (error) {
      console.error('Failed to load saved layout:', error);
    }
  }, []);
  
  // 保存布局到localStorage
  const handleLayoutChange = (sizes) => {
    try {
      localStorage.setItem('panelLayout', JSON.stringify(sizes));
    } catch (error) {
      console.error('Failed to save layout:', error);
    }
  };
  
  return (
    <PanelGroup 
      direction="horizontal"
      onLayoutChange={handleLayoutChange}
      initialSizes={savedLayout || [30, 70]} // 使用保存的布局或默认布局
    >
      <Panel>
        <div className="p-4">持久化面板 1</div>
      </Panel>
      <PanelResizeHandle />
      <Panel>
        <div className="p-4">持久化面板 2</div>
      </Panel>
    </PanelGroup>
  );
}

export default PersistentLayout;

这个实现会在用户调整面板大小时自动保存当前布局，并在应用下次加载时恢复该布局，提供连贯的用户体验。

3. 实现嵌套面板布局

对于复杂应用，我们可能需要创建嵌套的面板布局。React Resizable Panels支持无限级别的嵌套：

import React from 'react';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';

function NestedPanels() {
  return (
    <PanelGroup direction="horizontal" className="h-screen">
      {/* 左侧面板 */}
      <Panel defaultSize={20}>
        <div className="p-4">导航面板</div>
      </Panel>
      
      <PanelResizeHandle />
      
      {/* 右侧主内容区 - 垂直嵌套 */}
      <Panel defaultSize={80}>
        <PanelGroup direction="vertical">
          {/* 上部面板 */}
          <Panel defaultSize={70}>
            <PanelGroup direction="horizontal">
              <Panel defaultSize={60}>
                <div className="p-4">主内容区域</div>
              </Panel>
              <PanelResizeHandle />
              <Panel defaultSize={40}>
                <div className="p-4">辅助内容区域</div>
              </Panel>
            </PanelGroup>
          </Panel>
          
          <PanelResizeHandle />
          
          {/* 下部面板 */}
          <Panel defaultSize={30}>
            <div className="p-4">状态栏/日志面板</div>
          </Panel>
        </PanelGroup>
      </Panel>
    </PanelGroup>
  );
}

export default NestedPanels;

嵌套布局可以创建非常复杂和灵活的界面，适合高级应用如IDE、设计工具等。

五、常见陷阱规避：新手常犯的三个错误

1. 忽视最小/最大尺寸限制

错误表现：面板被拖到过小或过大，导致内容显示异常或界面布局破坏。

解决方案：始终为面板设置合理的minSize和maxSize属性：

// 错误示例
<Panel defaultSize={50}>内容</Panel>

// 正确示例
<Panel defaultSize={50} minSize={20} maxSize={80}>内容</Panel>

设置最小和最大尺寸可以确保面板在任何情况下都能保持可用状态，避免内容被过度压缩或拉伸。

2. 错误的嵌套方向

错误表现：嵌套面板时，子PanelGroup的方向与父PanelGroup相同，导致布局混乱。

解决方案：嵌套面板时，确保子PanelGroup使用与父PanelGroup不同的方向（水平嵌套垂直，垂直嵌套水平）：

// 错误示例 - 嵌套相同方向
<PanelGroup direction="horizontal">
  <Panel>
    <PanelGroup direction="horizontal">
      {/* 内容 */}
    </PanelGroup>
  </Panel>
</PanelGroup>

// 正确示例 - 嵌套不同方向
<PanelGroup direction="horizontal">
  <Panel>
    <PanelGroup direction="vertical">
      {/* 内容 */}
    </PanelGroup>
  </Panel>
</PanelGroup>

3. 过度使用PanelResizeHandle

错误表现：在每个Panel之间都添加PanelResizeHandle，包括不需要调整大小的面板。

解决方案：只在需要调整大小的面板之间添加PanelResizeHandle，对于固定大小的面板则不需要：

// 错误示例
<PanelGroup direction="horizontal">
  <Panel>面板1</Panel>
  <PanelResizeHandle />
  <Panel>面板2</Panel>
  <PanelResizeHandle />
  <Panel>面板3（固定大小）</Panel>
</PanelGroup>

// 正确示例
<PanelGroup direction="horizontal">
  <Panel>面板1</Panel>
  <PanelResizeHandle />
  <Panel>面板2</Panel>
  <Panel>面板3（固定大小）</Panel>
</PanelGroup>

六、业务组件模板：即插即用的解决方案

1. 可折叠侧边栏组件

这个组件实现了一个可以折叠的侧边栏，用户可以通过按钮或拖拽完全隐藏侧边栏：

import React, { useState } from 'react';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
import { ChevronLeft, ChevronRight } from 'your-icon-library';

function CollapsibleSidebar() {
  const [isCollapsed, setIsCollapsed] = useState(false);
  
  const toggleSidebar = () => {
    setIsCollapsed(!isCollapsed);
  };
  
  return (
    <PanelGroup direction="horizontal">
      <Panel 
        defaultSize={20} 
        minSize={isCollapsed ? 0 : 15} 
        maxSize={30}
        className={isCollapsed ? 'overflow-hidden' : ''}
      >
        <div className="h-full flex flex-col bg-gray-50 border-r">
          <div className="p-4 flex justify-between items-center border-b">
            <h3 className={isCollapsed ? 'hidden' : 'block'}>导航菜单</h3>
            <button onClick={toggleSidebar} className="p-2 rounded-full hover:bg-gray-200">
              {isCollapsed ? <ChevronRight /> : <ChevronLeft />}
            </button>
          </div>
          
          <nav className="flex-grow p-4">
            {/* 导航菜单项 */}
            <ul className={isCollapsed ? 'items-center' : ''}>
              {['首页', '工具', '设置', '帮助'].map((item) => (
                <li key={item} className={`mb-4 ${isCollapsed ? 'text-center' : ''}`}>
                  {isCollapsed ? (
                    <span className="sr-only">{item}</span>
                    // 这里放置图标
                  ) : (
                    <span>{item}</span>
                  )}
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </Panel>
      
      <PanelResizeHandle 
        className="w-2 bg-gray-200 hover:bg-gray-300"
        onDoubleClick={toggleSidebar} // 双击快速折叠/展开
      />
      
      <Panel defaultSize={80}>
        <div className="p-4">主内容区域</div>
      </Panel>
    </PanelGroup>
  );
}

export default CollapsibleSidebar;

2. 可调整大小的代码编辑器布局

这个组件模拟了代码编辑器的布局，包含文件浏览器、代码编辑区和预览区：

import React from 'react';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';

function CodeEditorLayout() {
  return (
    <div className="h-screen flex flex-col bg-gray-900 text-white">
      {/* 顶部工具栏 */}
      <div className="h-12 bg-gray-800 border-b border-gray-700 flex items-center px-4">
        <h1 className="text-lg font-medium">代码编辑器</h1>
      </div>
      
      {/* 主编辑区 */}
      <PanelGroup direction="horizontal" className="flex-grow">
        {/* 文件浏览器 */}
        <Panel defaultSize={15} minSize={10} maxSize={25}>
          <div className="h-full bg-gray-800 border-r border-gray-700 p-2">
            <div className="text-sm font-medium mb-2 text-gray-400">文件浏览器</div>
            {/* 文件列表 */}
          </div>
        </Panel>
        
        <PanelResizeHandle className="w-1 bg-gray-700 hover:bg-gray-600" />
        
        {/* 代码编辑区和预览区 */}
        <PanelGroup direction="vertical" defaultSize={85}>
          {/* 代码编辑区 */}
          <Panel defaultSize={60} minSize={40}>
            <div className="h-full flex flex-col">
              <div className="h-8 bg-gray-800 border-b border-gray-700 px-4 flex items-center text-sm text-gray-400">
                App.jsx
              </div>
              <div className="flex-grow bg-gray-900 p-4 font-mono text-sm overflow-auto">
                {/* 代码内容 */}
                <pre>function App() {
  return (
    &lt;div className="App"&gt;
      &lt;h1&gt;Hello World&lt;/h1&gt;
    &lt;/div&gt;
  );
}</pre>
              </div>
            </div>
          </Panel>
          
          <PanelResizeHandle className="h-1 bg-gray-700 hover:bg-gray-600" />
          
          {/* 预览区 */}
          <Panel defaultSize={40} minSize={20}>
            <div className="h-full flex flex-col">
              <div className="h-8 bg-gray-800 border-b border-gray-700 px-4 flex items-center text-sm text-gray-400">
                预览
              </div>
              <div className="flex-grow bg-white p-4 text-gray-900 overflow-auto">
                {/* 预览内容 */}
                <h1>Hello World</h1>
              </div>
            </div>
          </Panel>
        </PanelGroup>
      </PanelGroup>
    </div>
  );
}

export default CodeEditorLayout;

七、生态拓展：与其他技术栈的无缝集成

1. React Resizable Panels + React Query：动态数据面板

结合React Query的数据获取能力，可以创建根据内容动态调整大小的智能面板：

import React from 'react';
import { useQuery } from 'react-query';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';

// 数据获取函数
const fetchData = async (endpoint) => {
  const response = await fetch(`https://api.example.com/${endpoint}`);
  return response.json();
};

function DataDrivenPanels() {
  // 使用React Query获取数据
  const { data: usersData } = useQuery('users', () => fetchData('users'));
  const { data: productsData } = useQuery('products', () => fetchData('products'));
  const { data: ordersData } = useQuery('orders', () => fetchData('orders'));
  
  // 根据数据量动态调整面板大小
  const getPanelSize = (data) => {
    if (!data) return 33; // 加载中默认大小
    return Math.min(50, Math.max(20, 33 + (data.length - 10) * 0.5));
  };
  
  return (
    <PanelGroup direction="horizontal">
      <Panel defaultSize={getPanelSize(usersData)}>
        <div className="p-4">
          <h3>用户数据</h3>
          {usersData ? (
            <ul>
              {usersData.slice(0, 10).map(user => (
                <li key={user.id}>{user.name}</li>
              ))}
            </ul>
          ) : (
            <p>加载中...</p>
          )}
        </div>
      </Panel>
      
      <PanelResizeHandle />
      
      <Panel defaultSize={getPanelSize(productsData)}>
        <div className="p-4">
          <h3>产品数据</h3>
          {productsData ? (
            <ul>
              {productsData.slice(0, 10).map(product => (
                <li key={product.id}>{product.name}</li>
              ))}
            </ul>
          ) : (
            <p>加载中...</p>
          )}
        </div>
      </Panel>
      
      <PanelResizeHandle />
      
      <Panel defaultSize={getPanelSize(ordersData)}>
        <div className="p-4">
          <h3>订单数据</h3>
          {ordersData ? (
            <ul>
              {ordersData.slice(0, 10).map(order => (
                <li key={order.id}>订单 #{order.id}</li>
              ))}
            </ul>
          ) : (
            <p>加载中...</p>
          )}
        </div>
      </Panel>
    </PanelGroup>
  );
}

export default DataDrivenPanels;

这种集成允许面板根据数据量自动调整大小，为用户提供更智能的内容展示方式。

2. React Resizable Panels + React Hook Form：动态表单布局

结合React Hook Form，可以创建根据用户输入动态调整布局的表单界面：

import React from 'react';
import { useForm } from 'react-hook-form';
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';

function DynamicFormLayout() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const formType = watch('formType', 'basic');
  
  const onSubmit = (data) => console.log(data);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="h-96">
      <PanelGroup direction="horizontal">
        {/* 表单输入区 */}
        <Panel defaultSize={50}>
          <div className="p-4 space-y-4">
            <div>
              <label>表单类型:</label>
              <select {...register("formType")} className="w-full p-2 border">
                <option value="basic">基础信息</option>
                <option value="advanced">高级选项</option>
                <option value="expert">专家模式</option>
              </select>
            </div>
            
            {/* 基础表单字段 */}
            <div>
              <label>姓名:</label>
              <input {...register("name", { required: true })} className="w-full p-2 border" />
              {errors.name && <span className="text-red-500">姓名必填</span>}
            </div>
            
            <div>
              <label>邮箱:</label>
              <input type="email" {...register("email", { required: true })} className="w-full p-2 border" />
              {errors.email && <span className="text-red-500">邮箱必填</span>}
            </div>
            
            {/* 高级选项（动态显示） */}
            {formType === 'advanced' && (
              <div>
                <label>高级选项:</label>
                <input {...register("advancedOption")} className="w-full p-2 border" />
              </div>
            )}
            
            {/* 专家模式选项（动态显示） */}
            {formType === 'expert' && (
              <div className="space-y-2">
                <label>专家选项1:</label>
                <input {...register("expertOption1")} className="w-full p-2 border" />
                
                <label>专家选项2:</label>
                <input {...register("expertOption2")} className="w-full p-2 border" />
              </div>
            )}
            
            <button type="submit" className="p-2 bg-blue-500 text-white rounded">提交</button>
          </div>
        </Panel>
        
        <PanelResizeHandle />
        
        {/* 表单预览区 */}
        <Panel defaultSize={50}>
          <div className="p-4 border-l">
            <h3>表单预览</h3>
            <div className="mt-4 p-4 bg-gray-50 rounded">
              <p><strong>姓名:</strong> {watch('name') || '未输入'}</p>
              <p><strong>邮箱:</strong> {watch('email') || '未输入'}</p>
              {formType === 'advanced' && (
                <p><strong>高级选项:</strong> {watch('advancedOption') || '未输入'}</p>
              )}
              {formType === 'expert' && (
                <>
                  <p><strong>专家选项1:</strong> {watch('expertOption1') || '未输入'}</p>
                  <p><strong>专家选项2:</strong> {watch('expertOption2') || '未输入'}</p>
                </>
              )}
            </div>
          </div>
        </Panel>
      </PanelGroup>
    </form>
  );
}

export default DynamicFormLayout;