中心区依靠多个TabPanel

AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue

@@ -71,7 +71,41 @@
       </div>
 
       <!-- 内容区：可折叠 -->
-      <div class="content-area bg-[#f5f7fb] flex-1" v-show="!collapsed"></div>
+      <div class="content-area bg-[#f5f7fb] flex-1 p-4" v-show="!collapsed">
+        <div v-if="content" class="panel-content">
+          <div class="mb-4">
+            <h3 class="text-lg font-bold mb-2" :style="{ color: content.color }">
+              {{ content.title }}
+            </h3>
+            <p class="text-sm text-gray-600 mb-3">
+              类型：{{ content.type }} | 创建时间：{{ content.timestamp }}
+            </p>
+          </div>
+          
+          <div class="grid grid-cols-1 gap-3">
+            <div 
+              v-for="(item, index) in content.data" 
+              :key="item.id"
+              class="data-item p-3 border rounded-lg shadow-sm"
+              :style="{ 
+                borderLeftColor: content.color,
+                borderLeftWidth: '4px'
+              }"
+            >
+              <div class="flex justify-between items-center">
+                <span class="font-medium">{{ item.label }}</span>
+                <span class="text-sm font-bold" :style="{ color: content.color }">
+                  {{ item.value }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="text-gray-500 text-center">
+          <p>暂无内容</p>
+          <div class="mt-2 text-xs">面板ID: {{ id }} - 标题: {{ title }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -116,6 +150,10 @@ const props = defineProps({
   maximized: {
     type: Boolean,
     default: false
+  },
+  content: {
+    type: Object,
+    default: null
   }
 });