实现功能：当Area内容区只有一个Panel时，拖动Panel标题栏可以移动Area

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

@@ -3,7 +3,11 @@
        :style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
     <div class="flex flex-col h-full">
       <!-- 标题栏 -->
-      <div class="title-bar h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none">
+      <div class="title-bar h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none cursor-move"
+           @mousedown="onDragStart"
+           @mousemove="onDragMove"
+           @mouseup="onDragEnd"
+           @mouseleave="onDragEnd">
         <div class="flex items-center">
           <span class="text-xs">{{ title }}</span>
         </div>
@@ -98,7 +102,7 @@ const props = defineProps({
 });
 
 // 定义事件
-const emit = defineEmits(['toggleCollapse', 'maximize', 'close', 'toggleToolbar']);
+const emit = defineEmits(['toggleCollapse', 'maximize', 'close', 'toggleToolbar', 'dragStart', 'dragMove', 'dragEnd']);
 
 // 事件处理函数
 const onToggleCollapse = () => {
@@ -116,6 +120,41 @@ const onClose = () => {
 const onToggleToolbar = () => {
   emit('toggleToolbar', props.id);
 };
+
+// 拖拽相关状态
+let isDragging = false;
+
+// 拖拽开始
+const onDragStart = (e) => {
+  // 只有当点击的是标题栏区域（不是按钮）时才触发拖拽
+  if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) {
+    isDragging = true;
+    emit('dragStart', {
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+    // 防止文本选择
+    e.preventDefault();
+  }
+};
+
+// 拖拽移动
+const onDragMove = (e) => {
+  if (isDragging) {
+    emit('dragMove', {
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+  }
+};
+
+// 拖拽结束
+const onDragEnd = () => {
+  if (isDragging) {
+    isDragging = false;
+    emit('dragEnd');
+  }
+};
 </script>
 
 <style scoped>