"添加前端模板和运行代码模块"

qiming-vite-plugin-design-mode/examples/demo/src/pages/CustomizableDemoPage.tsx

@@ -0,0 +1,499 @@
+import React from '../react';
+import { useState, useEffect } from 'react';
+import { Card, Row, Col, Button, Space, Divider, message, Badge } from 'antd';
+import { ThunderboltOutlined, CodeOutlined, BgColorsOutlined, EditOutlined, EyeOutlined, ReloadOutlined, WarningOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import type { ElementInfo, SourceInfo } from '../../../../packages/client-shared/src/messages';
+import PropertyPanel from '../external-panel/PropertyPanel';
+import type { PropertyPanelConfig } from '../external-panel/PropertyPanel';
+import { bridge } from '../../../../packages/client-react/src/bridge';
+
+export default function CustomizableDemoPage() {
+  const [selectedElement, setSelectedElement] = useState<ElementInfo | null>(null);
+  const [currentStyle, setCurrentStyle] = useState<string>('');
+  const [currentContent, setCurrentContent] = useState<string>('');
+  const [demoConfig, setDemoConfig] = useState<PropertyPanelConfig | undefined>();
+  const [bridgeStatus, setBridgeStatus] = useState<'checking' | 'connected' | 'disconnected' | 'error'>('checking');
+  const [bridgeInfo, setBridgeInfo] = useState<any>(null);
+
+  // Bridge状态检查
+  useEffect(() => {
+    const checkBridgeStatus = async () => {
+      try {
+        // 检查环境信息
+        const envInfo = bridge.getEnvironmentInfo();
+        setBridgeInfo(envInfo);
+
+        console.log('[Demo] Bridge environment info:', envInfo);
+
+        if (!envInfo.isIframe) {
+          setBridgeStatus('disconnected');
+          console.log('[Demo] Running in main window, bridge connection not needed');
+          return;
+        }
+
+        // 执行健康检查
+        const health = await bridge.healthCheck();
+        console.log('[Demo] Bridge health check:', health);
+
+        if (health.status === 'healthy') {
+          setBridgeStatus('connected');
+        } else if (health.status === 'degraded') {
+          setBridgeStatus('error');
+        } else {
+          setBridgeStatus('disconnected');
+        }
+      } catch (error) {
+        console.error('[Demo] Bridge health check failed:', error);
+        setBridgeStatus('error');
+      }
+    };
+
+    // 立即检查一次
+    checkBridgeStatus();
+
+    // 定期检查
+    const statusTimer = setInterval(checkBridgeStatus, 10000); // 10秒检查一次
+
+    return () => clearInterval(statusTimer);
+  }, []);
+
+  /**
+   * 获取Bridge状态显示组件
+   */
+  const BridgeStatusPanel = () => {
+    const getStatusIcon = () => {
+      switch (bridgeStatus) {
+        case 'connected':
+          return <CheckCircleOutlined className="text-green-500" />;
+        case 'disconnected':
+          return <WarningOutlined className="text-yellow-500" />;
+        case 'error':
+          return <WarningOutlined className="text-red-500" />;
+        default:
+          return <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />;
+      }
+    };
+
+    const getStatusText = () => {
+      switch (bridgeStatus) {
+        case 'connected':
+          return 'Bridge已连接';
+        case 'disconnected':
+          return 'Bridge未连接（主窗口模式）';
+        case 'error':
+          return 'Bridge连接错误';
+        case 'checking':
+          return '检查Bridge状态...';
+        default:
+          return '未知状态';
+      }
+    };
+
+    const getStatusColor = () => {
+      switch (bridgeStatus) {
+        case 'connected':
+          return 'success';
+        case 'disconnected':
+          return 'warning';
+        case 'error':
+          return 'error';
+        default:
+          return 'processing';
+      }
+    };
+
+    return (
+      <Card size="small" title="Bridge状态" className="mb-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {getStatusIcon()}
+            <span className="text-sm">{getStatusText()}</span>
+          </div>
+          <Space>
+            <Button
+              size="small"
+              onClick={() => {
+                bridge.diagnose();
+                message.info('Bridge诊断信息已输出到控制台');
+              }}
+            >
+              诊断
+            </Button>
+            <Button
+              size="small"
+              onClick={() => window.location.reload()}
+            >
+              刷新
+            </Button>
+          </Space>
+        </div>
+
+        {bridgeInfo && (
+          <div className="mt-2 text-xs text-gray-500 space-y-1">
+            <div>环境: {bridgeInfo.isIframe ? 'Iframe' : '主窗口'}</div>
+            <div>位置: {bridgeInfo.location.substring(0, 50)}...</div>
+            <div>来源: {bridgeInfo.origin}</div>
+          </div>
+        )}
+      </Card>
+    );
+  };
+
+  // 模拟iframe内容
+  const [iframeSrc] = useState(() => {
+    // 生成一个包含源码映射的演示HTML
+    return `data:text/html;charset=utf-8,${encodeURIComponent(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>设计模式演示</title>
+          <style>
+            body { font-family: Arial, sans-serif; margin: 20px; }
+            .container { max-width: 800px; margin: 0 auto; }
+            .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; border-radius: 12px; text-align: center; margin-bottom: 30px; }
+            .hero h1 { margin: 0 0 10px 0; font-size: 2.5rem; font-weight: bold; }
+            .hero p { margin: 0; font-size: 1.2rem; opacity: 0.9; }
+            .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
+            .feature-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #e5e7eb; }
+            .feature-card h3 { margin: 0 0 10px 0; color: #1f2937; font-size: 1.25rem; }
+            .feature-card p { margin: 0; color: #6b7280; line-height: 1.6; }
+            .cta { text-align: center; background: #f9fafb; padding: 30px; border-radius: 8px; border: 1px solid #e5e7eb; }
+            .cta-button { background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 6px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
+            .cta-button:hover { background: #2563eb; }
+            .code-block { background: #1f2937; color: #f9fafb; padding: 20px; border-radius: 8px; font-family: 'Courier New', monospace; margin: 20px 0; overflow-x: auto; }
+            .highlight { background: rgba(59, 130, 246, 0.1); padding: 2px 4px; border-radius: 4px; }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="hero">
+              <h1 data-source-file="src/components/Hero.tsx" data-source-line="10" data-source-column="4">设计模式演示</h1>
+              <p data-source-file="src/components/Hero.tsx" data-source-line="11" data-source-column="4">体验强大的可视化开发工具，让设计触手可及</p>
+            </div>
+
+            <div class="features">
+              <div class="feature-card">
+                <h3 data-source-file="src/components/FeatureCard.tsx" data-source-line="5" data-source-column="8">实时预览</h3>
+                <p data-source-file="src/components/FeatureCard.tsx" data-source-line="6" data-source-column="8">即时查看修改效果，所见即所得的开发体验</p>
+              </div>
+              <div class="feature-card">
+                <h3 data-source-file="src/components/FeatureCard.tsx" data-source-line="12" data-source-column="8">智能提示</h3>
+                <p data-source-file="src/components/FeatureCard.tsx" data-source-line="13" data-source-column="8">AI驱动的智能建议，提升开发效率</p>
+              </div>
+              <div class="feature-card">
+                <h3 data-source-file="src/components/FeatureCard.tsx" data-source-line="19" data-source-column="8">一键部署</h3>
+                <p data-source-file="src/components/FeatureCard.tsx" data-source-line="20" data-source-column="8">无缝集成CI/CD流程，快速交付产品</p>
+              </div>
+            </div>
+
+            <div class="cta">
+              <h2 data-source-file="src/components/CallToAction.tsx" data-source-line="8" data-source-column="12">准备好开始了吗？</h2>
+              <p data-source-file="src/components/CallToAction.tsx" data-source-line="9" data-source-column="12">立即体验下一代设计开发工具</p>
+              <button class="cta-button" data-source-file="src/components/CallToAction.tsx" data-source-line="15" data-source-column="8">开始使用</button>
+            </div>
+
+            <div class="code-block">
+              <div data-source-file="src/utils/code-example.ts" data-source-line="5" data-source-column="4">// 简单的使用示例</div>
+              <div data-source-file="src/utils/code-example.ts" data-source-line="6" data-source-column="4">import { DesignMode } from '@xagi/design-mode';</div>
+              <div data-source-file="src/utils/code-example.ts" data-source-line="7" data-source-column="4"></div>
+              <div data-source-file="src/utils/code-example.ts" data-source-line="8" data-source-column="4">const config = {</div>
+              <div data-source-file="src/utils/code-example.ts" data-source-line="9" data-source-column="8">enableSelection: true,</div>
+              <div data-source-file="src/utils/code-example.ts" data-source-line="10" data-source-column="8">autoSave: true</div>
+              <div data-source-file="src/utils/code-example.ts" data-source-line="11" data-source-column="4">};</div>
+              <div data-source-file="src/utils/code-example.ts" data-source-line="12" data-source-column="4"></div>
+              <div data-source-file="src/utils/code-example.ts" data-source-line="13" data-source-column="4">DesignMode.init(config);</div>
+            </div>
+          </div>
+
+          <script>
+            // 添加点击事件监听
+            document.addEventListener('DOMContentLoaded', function() {
+              // 监听所有可编辑元素的点击
+              const editableElements = document.querySelectorAll('[data-source-file]');
+
+              editableElements.forEach(element => {
+                element.style.cursor = 'pointer';
+                element.addEventListener('click', function(e) {
+                  e.stopPropagation();
+
+                  // 移除之前的高亮
+                  document.querySelectorAll('[data-selected="true"]').forEach(el => {
+                    el.removeAttribute('data-selected');
+                    el.style.outline = '';
+                  });
+
+                  // 添加高亮
+                  this.setAttribute('data-selected', 'true');
+                  this.style.outline = '2px solid #3b82f6';
+                  this.style.outlineOffset = '2px';
+
+                  // 发送选中消息到父窗口
+                  // 判断是否为静态文本：检查元素是否有 static-content 属性
+                  const isStaticText = this.hasAttribute('data-source-static-content');
+                  
+                  const elementInfo = {
+                    tagName: this.tagName.toLowerCase(),
+                    className: this.className || '',
+                    textContent: this.textContent || '',
+                    sourceInfo: {
+                      fileName: this.getAttribute('data-source-file'),
+                      lineNumber: parseInt(this.getAttribute('data-source-line')),
+                      columnNumber: parseInt(this.getAttribute('data-source-column'))
+                    },
+                    isStaticText: isStaticText || false // 默认为 false
+                  };
+
+                  window.parent.postMessage({
+                    type: 'ELEMENT_SELECTED',
+                    payload: { elementInfo }
+                  }, '*');
+
+                  console.log('Element selected:', elementInfo);
+                });
+              });
+
+              // 点击空白处取消选择
+              document.addEventListener('click', function(e) {
+                if (!e.target.hasAttribute('data-source-file')) {
+                  document.querySelectorAll('[data-selected="true"]').forEach(el => {
+                    el.removeAttribute('data-selected');
+                    el.style.outline = '';
+                  });
+
+                  window.parent.postMessage({
+                    type: 'ELEMENT_DESELECTED'
+                  }, '*');
+                }
+              });
+            });
+          </script>
+        </body>
+      </html>
+    `)}`);
+
+  /**
+   * 处理iframe中的元素选择
+   */
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const { type, payload } = event.data;
+
+      switch (type) {
+        case 'ELEMENT_SELECTED':
+          setSelectedElement(payload.elementInfo);
+          setCurrentStyle(payload.elementInfo.className);
+          setCurrentContent(payload.elementInfo.textContent);
+          console.log('[Parent] Element selected:', payload.elementInfo);
+          break;
+
+        case 'ELEMENT_DESELECTED':
+          setSelectedElement(null);
+          console.log('[Parent] Element deselected');
+          break;
+
+        case 'STYLE_UPDATED':
+          console.log('[Parent] Style updated:', payload);
+          // 更新当前样式
+          if (selectedElement) {
+            setCurrentStyle(payload.newClass);
+          }
+          break;
+
+        case 'CONTENT_UPDATED':
+          console.log('[Parent] Content updated:', payload);
+          // 更新当前内容
+          if (selectedElement) {
+            setCurrentContent(payload.newValue);
+          }
+          break;
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [selectedElement]);
+
+  /**
+   * 处理样式更新
+   */
+  const handleStyleUpdate = (data: { sourceInfo: SourceInfo; newClass: string }) => {
+    // 这里可以发送消息到iframe或者直接调用API
+    console.log('Style update requested:', data);
+
+    // 模拟更新成功
+    message.success('样式更新成功');
+  };
+
+  /**
+   * 处理内容更新
+   */
+  const handleContentUpdate = (data: { sourceInfo: SourceInfo; newContent: string }) => {
+    // 这里可以发送消息到iframe或者直接调用API
+    console.log('Content update requested:', data);
+
+    // 模拟更新成功
+    message.success('内容更新成功');
+  };
+
+  /**
+   * 配置更改处理
+   */
+  const handleConfigChange = (config: PropertyPanelConfig) => {
+    setDemoConfig(config);
+    console.log('Panel config changed:', config);
+  };
+
+  /**
+   * 重置演示
+   */
+  const resetDemo = () => {
+    setSelectedElement(null);
+    setCurrentStyle('');
+    setCurrentContent('');
+
+    // 发送重置消息到iframe
+    const iframe = document.querySelector('iframe') as HTMLIFrameElement;
+    if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.postMessage({ type: 'RESET_DEMO' }, '*');
+    }
+
+    message.info('演示已重置');
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* 顶部标题栏 */}
+      <div className="bg-white border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+              <ThunderboltOutlined className="text-white text-lg" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">可自定义属性面板演示</h1>
+              <p className="text-sm text-gray-600">体验完整的双向同步设计模式架构</p>
+            </div>
+          </div>
+
+          <Space>
+            <Button icon={<CodeOutlined />} onClick={() => window.open('https://github.com/your-repo', '_blank')}>
+              查看源码
+            </Button>
+            <Button icon={<ReloadOutlined />} onClick={resetDemo}>
+              重置演示
+            </Button>
+          </Space>
+        </div>
+      </div>
+
+      <div className="flex h-[calc(100vh-88px)]">
+        {/* 左侧：可自定义属性面板 */}
+        <div className="w-96 bg-white border-r border-gray-200 flex flex-col">
+          {/* Bridge状态面板 */}
+          <div className="p-4 border-b border-gray-200">
+            <BridgeStatusPanel />
+          </div>
+
+          {/* 主体面板内容 */}
+          <div className="flex-1 overflow-hidden">
+            <PropertyPanel
+              selectedElement={selectedElement}
+              currentStyle={currentStyle}
+              currentContent={currentContent}
+              onStyleUpdate={handleStyleUpdate}
+              onContentUpdate={handleContentUpdate}
+              onStyleChange={setCurrentStyle}
+              onContentChange={setCurrentContent}
+              config={demoConfig}
+              onConfigChange={handleConfigChange}
+            />
+          </div>
+        </div>
+
+        {/* 右侧：iframe预览 */}
+        <div className="flex-1 bg-white">
+          <div className="h-full flex flex-col">
+            {/* 预览工具栏 */}
+            <div className="border-b border-gray-200 px-6 py-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <EyeOutlined className="text-blue-500" />
+                  <span className="font-medium text-gray-900">实时预览</span>
+                  {selectedElement && (
+                    <>
+                      <Divider type="vertical" />
+                      <span className="text-sm text-gray-600">
+                        已选择: &lt;{selectedElement.tagName}&gt;
+                      </span>
+                    </>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-1">
+                    <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+                    <span className="text-xs text-gray-500">实时同步</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* iframe容器 */}
+            <div className="flex-1 bg-gray-100">
+              <iframe
+                src={iframeSrc}
+                className="w-full h-full border-0"
+                title="可自定义属性面板演示"
+                sandbox="allow-scripts allow-same-origin"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 底部功能说明 */}
+      <div className="border-t border-gray-200 bg-white px-6 py-4">
+        <div className="grid grid-cols-3 gap-6">
+          <Card size="small" className="h-full">
+            <div className="flex items-center gap-2 mb-2">
+              <BgColorsOutlined className="text-blue-500" />
+              <span className="font-medium">样式自定义</span>
+            </div>
+            <ul className="text-sm text-gray-600 space-y-1">
+              <li>• 自定义颜色方案和预设</li>
+              <li>• 保存和加载样式配置</li>
+              <li>• 主题切换（浅色/深色/跟随系统）</li>
+              <li>• 快捷键自定义</li>
+            </ul>
+          </Card>
+
+          <Card size="small" className="h-full">
+            <div className="flex items-center gap-2 mb-2">
+              <EditOutlined className="text-green-500" />
+              <span className="font-medium">内容自定义</span>
+            </div>
+            <ul className="text-sm text-gray-600 space-y-1">
+              <li>• 富文本编辑和格式化</li>
+              <li>• 内容历史记录管理</li>
+              <li>• 模板和占位符自定义</li>
+              <li>• 自动保存配置</li>
+            </ul>
+          </Card>
+
+          <Card size="small" className="h-full">
+            <div className="flex items-center gap-2 mb-2">
+              <ToolOutlined className="text-purple-500" />
+              <span className="font-medium">高级功能</span>
+            </div>
+            <ul className="text-sm text-gray-600 space-y-1">
+              <li>• 批量操作和防抖处理</li>
+              <li>• 配置导入导出</li>
+              <li>• 错误处理和回滚机制</li>
+              <li>• 实时双向同步</li>
+            </ul>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

qiming-vite-plugin-design-mode/examples/demo/src/pages/FeaturesPage.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+
+export default function FeaturesPage() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <h1 className="text-4xl font-bold text-gray-900 mb-8">全部功能</h1>
+
+      {/* 功能 1: 样式编辑 */}
+      <section className="mb-12 bg-white rounded-xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold text-indigo-600 mb-4">1. 样式编辑</h2>
+        <p className="text-gray-700 mb-6">
+          选择任意元素，使用可视化编辑器修改其 Tailwind CSS 类。
+        </p>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-4 bg-slate-100 rounded-md">
+            <p className="text-sm text-slate-600">默认样式</p>
+          </div>
+          <div className="p-4 bg-blue-100 rounded-md">
+            <p className="text-sm text-blue-600">修改后的样式</p>
+          </div>
+          <div className="p-6 bg-red-50 rounded-lg">
+            <p className="text-base text-red-700">大内边距</p>
+          </div>
+          <div className="p-2 bg-green-50 rounded-full">
+            <p className="text-xs text-green-700">小内边距 + 圆角</p>
+          </div>
+        </div>
+      </section>
+
+      {/* 功能 2: 内容编辑 */}
+      <section className="mb-12 bg-white rounded-xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold text-green-600 mb-4">2. 内容编辑</h2>
+        <p className="text-gray-700 mb-6">
+          双击任意文本即可直接编辑。修改会保存到源文件中。
+        </p>
+
+        <div className="space-y-4">
+          <div className="p-4 bg-gray-50 rounded-md">
+            <h3 className="text-lg font-semibold text-gray-900">可编辑标题</h3>
+            <p className="text-gray-600">双击即可编辑这段文字。</p>
+          </div>
+          <div className="p-4 bg-blue-50 rounded-md">
+            <p className="text-blue-900">试着编辑这段文本！11</p>
+          </div>
+        </div>
+      </section>
+
+      {/* 功能 3: 源码映射 */}
+      <section className="mb-12 bg-white rounded-xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold text-purple-600 mb-4">3. 源码映射</h2>
+        <p className="text-gray-700 mb-6">
+          每个元素都有指向其源文件位置的元数据。
+        </p>
+
+        <div className="bg-gray-900 text-green-400 p-4 rounded-md font-mono text-sm">
+          <div>data-source-file="/src/pages/FeaturesPage.tsx"</div>
+          <div>data-source-line="42"</div>
+          <div>data-source-column="8"</div>
+        </div>
+      </section>
+
+      {/* 功能 4: 实时更新 */}
+      <section className="mb-12 bg-white rounded-xl shadow-lg p-8">
+        <h2 className="text-2xl font-bold text-orange-600 mb-4">4. 实时更新</h2>
+        <p className="text-gray-700 mb-6">
+          所有修改都会立即反映在界面上并保存到磁盘。
+        </p>
+
+        <div className="flex items-center space-x-4">
+          <div className="flex-1 p-4 bg-orange-50 rounded-md text-center">
+            <p className="text-orange-700 font-medium">修改前</p>
+          </div>
+          <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+          </svg>
+          <div className="flex-1 p-4 bg-orange-100 rounded-lg text-center">
+            <p className="text-orange-900 font-bold">修改后</p>
+          </div>
+        </div>
+      </section>
+
+      {/* 交互演示 */}
+      <section className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-xl p-8 text-white">
+        <h2 className="text-3xl font-bold mb-4">交互演示</h2>
+        <p className="text-indigo-100 mb-6">
+          启用设计模式，尝试修改这些元素：
+        </p>
+
+        <div className="grid md:grid-cols-3 gap-4">
+          <div className="bg-white bg-opacity-20 backdrop-blur-sm p-6 rounded-lg">
+            <h3 className="text-xl font-semibold mb-2">卡片 1</h3>
+            <p className="text-indigo-100">修改我的背景！</p>
+          </div>
+          <div className="bg-white bg-opacity-20 backdrop-blur-sm p-6 rounded-lg">
+            <h3 className="text-xl font-semibold mb-2">卡片 2</h3>
+            <p className="text-indigo-100">改变我的文字颜色！</p>
+          </div>
+          <div className="bg-white bg-opacity-20 backdrop-blur-sm p-6 rounded-lg">
+            <h3 className="text-xl font-semibold mb-2">卡片 3</h3>
+            <p className="text-indigo-100">编辑我的内容！</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

qiming-vite-plugin-design-mode/examples/demo/src/pages/HomePage.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+
+export default function HomePage() {
+  const title = "欢迎使用设计模式";
+  const content = "体验实时可视化编辑，自动更新源代码。";
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      {/* 主标题区域 */}
+      <div className="text-center mb-16">
+        <h1 className="text-5xl font-bold text-gray-900 mb-4">
+          你好，{title}
+        </h1>
+        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+          {content}
+          点击右下角的设计模式开关即可开始！
+          {'--变量测试--'}
+        </p>
+      </div>
+
+      {/* 功能卡片 */}
+      <div className="grid md:grid-cols-3 gap-8 mb-16">
+        <div className="rounded-lg shadow-lg p-6 bg-green-100">
+          <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold text-gray-900 mb-2 bg-red-100">样式编辑</h3>
+          <p className="text-gray-600 bg-gray-100">
+            点击任意元素，实时修改其 Tailwind CSS 类。
+          </p>
+        </div>
+
+        <div className="rounded-lg shadow-lg p-6 bg-green-100">
+          <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
+            <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold text-gray-900 mb-2 bg-green-100">内容编辑12</h3>
+          <p className="text-gray-600 bg-gray-100">
+            双击文本元素直接编辑内容，自动更新源文件。
+          </p>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-lg p-6">
+          <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+            <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold text-gray-900 mb-2 bg-blue-100">源码更新</h3>
+          <p className="text-gray-600 bg-gray-100">
+            所有修改都会自动保存到源代码文件中。
+          </p>
+        </div>
+      </div>
+      <div className="bg-white rounded-xl shadow-xl p-8">
+        3111
+        <div className="space-y-4">
+          <div className="p-6 bg-blue-50 rounded-lg border-2 border-blue-200">
+            <h3 className="text-xl font-semibold text-blue-900 mb-2">可编辑卡片</h3>
+            <p className="text-blue-700 bg-blue-100 bg-red-100">
+              这是一个可编辑的段落。在设计模式下试着点击它！
+            </p>
+          </div>
+
+          <div className="p-6 bg-green-50 rounded-lg border-2 border-green-200">
+            源码更新 1
+            <p className="text-green-700">
+              你可以修改背景、文字颜色、内边距等等。
+            </p>
+          </div>
+
+          <div className="p-6 bg-purple-50 rounded-lg border-2 border-purple-200">
+            <h3 className="text-xl font-semibold text-purple-900 mb-2">第三个卡片</h3>
+            <p className="text-purple-700 bg-green-100">
+              双击这段文字可以直接编辑！3434341212121212
+            </p>
+          </div>
+        </div>
+      </div>
+      {/* 列表修改测试区域 */}
+      <div className="mt-16">
+        <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">列表修改测试</h2>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3'>
+          {[
+            { text: "写一篇关于人工智能的文章", icon: (props: any) => <svg {...props} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg> },
+            { text: "解释量子计算", icon: (props: any) => <svg {...props} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg> },
+            { text: "设计一个Logo", icon: (props: any) => <svg {...props} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg> },
+          ].slice(0, 6).map((prompt, index) => {
+            const IconComponent = prompt.icon;
+            return (
+              <div
+                key={index}
+                className='cursor-pointer border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 bg-white rounded-lg shadow-sm'
+              >
+                <div className='p-3'>
+                  <div className='flex items-center gap-2 bg-yellow-100'>
+                    <IconComponent className='w-4 h-4 text-blue-600' />
+                    <span className='text-sm text-gray-700 truncate'>
+                      "{prompt.text}"
+                    </span>
+                    <p>这量个相同的文本</p>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

qiming-vite-plugin-design-mode/examples/demo/src/pages/IframeDemoPage.tsx

@@ -0,0 +1,515 @@
+import React from '../react';
+import { useState, useEffect } from 'react';
+import type { ElementInfo } from '@/types/messages';
+
+
+// 确保React在所有情况下都可用
+if (typeof React === 'undefined') {
+  throw new Error(
+    'React is not imported. Please ensure React is imported correctly.'
+  );
+}
+
+export default function IframeDemoPage() {
+  const [iframeDesignMode, setIframeDesignMode] = useState(false);
+  const [selectedElement, setSelectedElement] = useState<ElementInfo | null>(
+    null
+  );
+  const [editingContent, setEditingContent] = useState('');
+  const [editingClass, setEditingClass] = useState('');
+  const [pendingChanges, setPendingChanges] = useState<
+    Array<{
+      type: 'style' | 'content';
+      sourceInfo: any;
+      newValue: string;
+      originalValue?: string;
+    }>
+  >([]);
+
+  const iframeRef = React.useRef<HTMLIFrameElement>(null);
+
+  // Listen for messages from iframe
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      // Debug log for message source
+      if (event.data.type === 'ELEMENT_SELECTED') {
+        console.log('[Parent] Received ELEMENT_SELECTED', {
+          source: event.source,
+          iframeWindow: iframeRef.current?.contentWindow,
+          isMatch: iframeRef.current && event.source === iframeRef.current.contentWindow,
+          data: event.data
+        });
+      }
+      if (event.data.type === 'ADD_TO_CHAT') {
+        return console.log('[Parent] Add to chat:', event.data.payload);
+      }
+
+      if (event.data.type === 'COPY_ELEMENT') {
+        return console.log('[Parent] Copy element:', event.data.payload);
+      }
+
+      // Only accept messages from the iframe
+      if (iframeRef.current && event.source !== iframeRef.current.contentWindow) {
+        if (event.data.type === 'ELEMENT_SELECTED') {
+          console.warn('[Parent] Ignoring message from non-iframe source');
+        }
+        return;
+      }
+
+      const { type, payload } = event.data;
+
+      switch (type) {
+        case 'DESIGN_MODE_CHANGED':
+          setIframeDesignMode(event.data.enabled);
+          break;
+
+        case 'ELEMENT_SELECTED':
+          console.log('[Parent] Processing ELEMENT_SELECTED', payload);
+
+          // 验证 sourceInfo 是否有效
+          if (
+            !payload.elementInfo?.sourceInfo ||
+            !payload.elementInfo.sourceInfo.fileName ||
+            payload.elementInfo.sourceInfo.lineNumber === 0
+          ) {
+            console.warn(
+              '[Parent] Invalid sourceInfo received:',
+              payload.elementInfo?.sourceInfo
+            );
+            console.warn('[Parent] This may cause update operations to fail');
+          }
+
+          setSelectedElement(payload.elementInfo);
+          setEditingContent(payload.elementInfo.textContent);
+          setEditingClass(payload.elementInfo.className);
+          break;
+
+        case 'ELEMENT_DESELECTED':
+          setSelectedElement(null);
+          console.log('[Parent] Element deselected');
+          break;
+
+        case 'CONTENT_UPDATED':
+          console.log('[Parent] Content updated:', payload);
+          break;
+
+        case 'STYLE_UPDATED':
+          console.log('[Parent] Style updated:', payload);
+          break;
+        
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  // Debounce hook
+  const useDebounce = <T,>(value: T, delay: number): T => {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+      return () => clearTimeout(handler);
+    }, [value, delay]);
+    return debouncedValue;
+  };
+
+  const debouncedContent = useDebounce(editingContent, 300);
+  const debouncedClass = useDebounce(editingClass, 300);
+
+  // Upsert pending change
+  const upsertPendingChange = (
+    type: 'style' | 'content',
+    newValue: string,
+    originalValue?: string
+  ) => {
+    if (!selectedElement) return;
+    setPendingChanges(prev => {
+      const existingIndex = prev.findIndex(
+        item =>
+          item.type === type &&
+          item.sourceInfo.fileName === selectedElement.sourceInfo.fileName &&
+          item.sourceInfo.lineNumber === selectedElement.sourceInfo.lineNumber
+      );
+
+      const newChange = {
+        type,
+        sourceInfo: selectedElement.sourceInfo,
+        newValue,
+        originalValue: originalValue || (type === 'style' ? selectedElement.className : selectedElement.textContent),
+      };
+
+      if (existingIndex >= 0) {
+        const newList = [...prev];
+        newList[existingIndex] = newChange;
+        return newList;
+      } else {
+        return [...prev, newChange];
+      }
+    });
+  };
+
+  const lastSelectedElementRef = React.useRef(selectedElement);
+
+  // Real-time content update
+  useEffect(() => {
+    if (!selectedElement) return;
+
+    // If selection changed, skip this update cycle
+    if (selectedElement !== lastSelectedElementRef.current) {
+      console.log('[Parent] Skipping content update due to selection change');
+      return;
+    }
+
+    console.log('[Parent] Content effect triggered', {
+      debouncedContent,
+      currentContent: selectedElement.textContent,
+      shouldUpdate: debouncedContent !== selectedElement.textContent
+    });
+
+    if (debouncedContent === selectedElement.textContent) return;
+
+    console.log('[Parent] Sending UPDATE_CONTENT', debouncedContent);
+    upsertPendingChange('content', debouncedContent);
+
+    const iframe = iframeRef.current;
+    if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.postMessage(
+        {
+          type: 'UPDATE_CONTENT',
+          payload: {
+            sourceInfo: selectedElement.sourceInfo,
+            newContent: debouncedContent,
+            persist: false,
+          },
+          timestamp: Date.now(),
+        },
+        '*'
+      );
+    }
+  }, [debouncedContent, selectedElement]); // Removed upsertPendingChange to fix infinite loop
+
+  // Real-time style update
+  useEffect(() => {
+    if (!selectedElement) return;
+
+    // If selection changed, skip this update cycle
+    if (selectedElement !== lastSelectedElementRef.current) {
+      console.log('[Parent] Skipping style update due to selection change');
+      return;
+    }
+
+    if (debouncedClass === selectedElement.className) return;
+
+    upsertPendingChange('style', debouncedClass);
+
+    const iframe = iframeRef.current;
+    if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.postMessage(
+        {
+          type: 'UPDATE_STYLE',
+          payload: {
+            sourceInfo: selectedElement.sourceInfo,
+            newClass: debouncedClass,
+            persist: false,
+          },
+          timestamp: Date.now(),
+        },
+        '*'
+      );
+    }
+  }, [debouncedClass, selectedElement]); // Removed upsertPendingChange to fix infinite loop
+
+  // Update lastSelectedElementRef AFTER other effects
+  useEffect(() => {
+    lastSelectedElementRef.current = selectedElement;
+  }, [selectedElement]);
+
+  // Style Manager Logic
+  const toggleStyle = (newStyle: string, categoryRegex: RegExp) => {
+    let currentClasses = editingClass.split(' ').filter(c => c.trim());
+
+    // Remove existing class in the same category
+    currentClasses = currentClasses.filter(c => !categoryRegex.test(c));
+
+    // Add new style if it's not empty (allows clearing style)
+    if (newStyle) {
+      currentClasses.push(newStyle);
+    }
+
+    setEditingClass(currentClasses.join(' '));
+  };
+
+  const hasStyle = (style: string) => {
+    return editingClass.split(' ').includes(style);
+  };
+
+  // UI Controls
+  const renderColorPicker = (prefix: string, colors: string[], label: string) => (
+    <div className="mb-4">
+      <label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
+      <div className="flex flex-wrap gap-2">
+        {colors.map(color => {
+          const styleClass = `${prefix}-${color}`;
+          const isActive = hasStyle(styleClass);
+          return (
+            <button
+              key={color}
+              onClick={() => toggleStyle(styleClass, new RegExp(`^${prefix}-[a-z]+(-\\d+)?$`))}
+              className={`w-8 h-8 rounded-full border-2 transition-all ${isActive ? 'border-gray-900 scale-110' : 'border-transparent hover:scale-105'
+                } ${styleClass.replace('text-', 'bg-')}`} // Use bg color for preview
+              title={color}
+            />
+          );
+        })}
+        <button
+          onClick={() => toggleStyle('', new RegExp(`^${prefix}-[a-z]+(-\\d+)?$`))}
+          className="px-2 py-1 text-xs text-gray-500 border border-gray-300 rounded hover:bg-gray-100"
+        >
+          清除
+        </button>
+      </div>
+    </div>
+  );
+
+  const renderSelect = (prefix: string, options: { label: string; value: string }[], label: string) => (
+    <div className="mb-4">
+      <label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
+      <div className="flex flex-wrap gap-2">
+        {options.map(opt => {
+          const styleClass = opt.value ? `${prefix}-${opt.value}` : '';
+          const isActive = styleClass ? hasStyle(styleClass) : !options.some(o => o.value && hasStyle(`${prefix}-${o.value}`));
+          return (
+            <button
+              key={opt.label}
+              onClick={() => toggleStyle(styleClass, new RegExp(`^${prefix}(-[a-z0-9]+)?$`))}
+              className={`px-3 py-1 text-sm rounded border transition-all ${isActive
+                ? 'bg-blue-600 text-white border-blue-600'
+                : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                }`}
+            >
+              {opt.label}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  );
+
+  // Toggle design mode in iframe
+  const toggleIframeDesignMode = () => {
+    const iframe = iframeRef.current;
+    console.log('[Parent] Toggling iframe design mode...', iframe);
+    if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.postMessage(
+        {
+          type: 'TOGGLE_DESIGN_MODE',
+          enabled: !iframeDesignMode,
+          timestamp: Date.now(),
+        },
+        '*'
+      );
+    }
+  };
+
+  // 保存所有更改
+  const saveChanges = async () => {
+    if (pendingChanges.length === 0) return;
+
+    console.log('[Parent] Saving changes...', pendingChanges);
+
+    try {
+      const response = await fetch('/__appdev_design_mode/batch-update', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          updates: pendingChanges.map(change => ({
+            filePath: change.sourceInfo.fileName,
+            line: change.sourceInfo.lineNumber,
+            column: change.sourceInfo.columnNumber,
+            newValue: change.newValue,
+            type: change.type,
+            originalValue: change.originalValue,
+          })),
+        }),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        console.log('[Parent] Batch update success:', result);
+        alert(`成功保存 ${result.summary.successful} 个更改！`);
+        setPendingChanges([]); // 清空待保存列表
+      } else {
+        const error = await response.json();
+        console.error('[Parent] Batch update failed:', error);
+        alert('保存失败，请查看控制台错误信息。');
+      }
+    } catch (error) {
+      console.error('[Parent] Error saving changes:', error);
+      alert('保存出错，请检查网络连接。');
+    }
+  };
+
+  return (
+    <div className='min-h-screen bg-gray-100' data-selection-exclude="true">
+      {/* Top Control Bar */}
+      <div className='bg-white border-b border-gray-200 px-6 py-4'>
+        <div className='flex items-center justify-between'>
+          <h1 className='text-2xl font-bold text-gray-900'>
+            Iframe 设计模式演示
+          </h1>
+          <div className='flex gap-4'>
+            {pendingChanges.length > 0 && (
+              <button
+                onClick={saveChanges}
+                className='px-6 py-2 rounded-lg font-semibold bg-blue-600 hover:bg-blue-700 text-white transition-all shadow-md flex items-center gap-2'
+              >
+                <span>保存更改 ({pendingChanges.length})</span>
+                <svg
+                  className='w-4 h-4'
+                  fill='none'
+                  stroke='currentColor'
+                  viewBox='0 0 24 24'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth={2}
+                    d='M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4'
+                  />
+                </svg>
+              </button>
+            )}
+            <button
+              onClick={toggleIframeDesignMode}
+              className={`px-6 py-2 rounded-lg font-semibold transition-all ${iframeDesignMode
+                ? 'bg-green-500 hover:bg-green-600 text-white'
+                : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+                }`}
+            >
+              {iframeDesignMode ? '✓ 设计模式已启用' : '启用设计模式'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className='flex h-[calc(100vh-73px)]'>
+        {/* Left: External Property Panel */}
+        <div className='w-80 bg-white border-r border-gray-200 overflow-y-auto'>
+          <div className='p-6'>
+            <h2 className='text-lg font-bold text-gray-900 mb-4'>
+              外部属性面板
+            </h2>
+
+            {selectedElement ? (
+              <div className='space-y-6'>
+                {/* Element Info */}
+                <div className='bg-blue-50 border border-blue-200 rounded-lg p-4'>
+                  <h3 className='text-sm font-semibold text-blue-900 mb-2'>
+                    选中元素
+                  </h3>
+                  <div className='text-xs text-blue-700 space-y-1'>
+                    <div>
+                      <span className='font-medium'>标签:</span>{' '}
+                      {selectedElement.tagName}
+                    </div>
+                    <div className='break-all'>
+                      <span className='font-medium'>文件:</span>{' '}
+                      {selectedElement.sourceInfo.fileName.split('/').pop()}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Content Editor - 仅当 isStaticText 为 true 时显示 */}
+                {selectedElement.isStaticText && (
+                  <div>
+                    <label className='block text-sm font-medium text-gray-700 mb-2'>
+                      内容编辑
+                    </label>
+                    <textarea
+                      value={editingContent}
+                      onChange={e => setEditingContent(e.target.value)}
+                      className='w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent'
+                      rows={3}
+                    />
+                  </div>
+                )}
+
+                <hr className="border-gray-200" />
+
+                {/* Smart Style Controls */}
+                <div>
+                  <h3 className="text-md font-bold text-gray-900 mb-4">样式设置</h3>
+
+                  {renderColorPicker('bg', ['white', 'gray-100', 'red-100', 'blue-100', 'green-100', 'yellow-100', 'purple-100'], '背景颜色')}
+                  {renderColorPicker('text', ['gray-900', 'gray-500', 'red-600', 'blue-600', 'green-600', 'purple-600', 'white'], '文字颜色')}
+
+                  {renderSelect('p', [
+                    { label: '无', value: '0' },
+                    { label: '小', value: '2' },
+                    { label: '中', value: '4' },
+                    { label: '大', value: '8' },
+                    { label: '特大', value: '12' }
+                  ], '内边距 (Padding)')}
+
+                  {renderSelect('rounded', [
+                    { label: '直角', value: 'none' },
+                    { label: '小圆角', value: 'sm' },
+                    { label: '圆角', value: 'md' },
+                    { label: '大圆角', value: 'lg' },
+                    { label: '全圆角', value: 'full' }
+                  ], '圆角 (Border Radius)')}
+
+                  {renderSelect('text', [
+                    { label: '小', value: 'sm' },
+                    { label: '默认', value: 'base' },
+                    { label: '中', value: 'lg' },
+                    { label: '大', value: 'xl' },
+                    { label: '特大', value: '2xl' }
+                  ], '文字大小 (Font Size)')}
+                </div>
+
+                {/* Raw Style Editor */}
+                <div className="mt-6 pt-6 border-t border-gray-200">
+                  <label className='block text-sm font-medium text-gray-500 mb-2'>
+                    原始 ClassName (高级)
+                  </label>
+                  <textarea
+                    value={editingClass}
+                    onChange={e => setEditingClass(e.target.value)}
+                    className='w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent font-mono text-xs text-gray-500'
+                    rows={2}
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className='text-center py-12 text-gray-500'>
+                <p className='text-sm'>
+                  {iframeDesignMode
+                    ? '点击 iframe 内的元素开始编辑'
+                    : '请先启用设计模式'}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right: Iframe Preview */}
+        <div className='flex-1 bg-gray-50 p-6'>
+          <div className='h-full bg-white rounded-lg shadow-xl overflow-hidden'>
+            <iframe
+              ref={iframeRef}
+              src={window.location.origin}
+              className='w-full h-full'
+              title='设计模式 Iframe 演示'
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}