修改测试页布局

AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue

@@ -3,11 +3,72 @@
     <!-- 顶部控制栏（仿 DockPanelDemo.vue 样式） -->
     <div class="demo-control-bar bg-white border-b border-gray-300 p-3 flex items-center justify-between">
       <div class="flex items-center space-x-4">
--        <h1 class="text-lg font-semibold text-gray-800">依靠面板测试</h1>
-+        <h1 class="text-lg font-semibold text-gray-800">停靠面板测试</h1>
+        <h1 class="text-lg font-semibold text-gray-800">停靠式面板容器演示</h1>
+        <div class="flex items-center space-x-2">
+          <button 
+            @click="addPanel('left')"
+            class="px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 text-sm"
+          >
+            添加左侧面板
+          </button>
+          <button 
+            @click="addPanel('right')"
+            class="px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 text-sm"
+          >
+            添加右侧面板
+          </button>
+          <button 
+            @click="addPanel('top')"
+            class="px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 text-sm"
+          >
+            添加顶部面板
+          </button>
+          <button 
+            @click="addPanel('bottom')"
+            class="px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 text-sm"
+          >
+            添加底部面板
+          </button>
+          <button 
+            @click="addPanel('center')"
+            class="px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 text-sm"
+          >
+            添加中心面板
+          </button>
+          <button 
+            @click="addFloatingPanel()"
+            class="px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 text-sm"
+          >
+            添加浮动窗口
+          </button>
+        </div>
       </div>
-      <div class="text-sm text-gray-500">
-        当前页面用于测试 DockLayout 布局；下方暂留空。
+      <div class="flex items-center space-x-2">
+        <button 
+          @click="exportLayout"
+          class="px-3 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 text-sm"
+        >
+          导出布局
+        </button>
+        <input 
+          ref="layoutFileInput"
+          type="file"
+          accept=".json"
+          style="display: none"
+          @change="handleLayoutFileSelect"
+        >
+        <button 
+          @click="importLayout"
+          class="px-3 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 text-sm"
+        >
+          导入布局
+        </button>
+        <button 
+          @click="resetLayout"
+          class="px-3 py-1 bg-red-50 text-red-600 rounded hover:bg-red-100 text-sm"
+        >
+          重置布局
+        </button>
       </div>
     </div>
 
@@ -19,7 +80,37 @@
 </template>
 
 <script setup>
-// 暂无逻辑，后续将接入 DockLayout 容器与交互
+import { ref } from 'vue';
+
+// 顶部控制栏按钮的占位逻辑（测试页下方暂未放面板容器）
+const layoutFileInput = ref(null);
+
+function addPanel(position) {
+  console.log('[DockLayoutTest] addPanel clicked:', position);
+}
+
+function addFloatingPanel() {
+  console.log('[DockLayoutTest] addFloatingPanel clicked');
+}
+
+function exportLayout() {
+  console.log('[DockLayoutTest] exportLayout clicked');
+}
+
+function importLayout() {
+  if (layoutFileInput.value) {
+    layoutFileInput.value.click();
+  }
+}
+
+function handleLayoutFileSelect(event) {
+  const file = event?.target?.files?.[0];
+  console.log('[DockLayoutTest] handleLayoutFileSelect:', file?.name);
+}
+
+function resetLayout() {
+  console.log('[DockLayoutTest] resetLayout clicked');
+}
 </script>
 
 <style scoped>