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

<template>
  <div class="panel bg-white shadow overflow-hidden" 
       :style="{ width: '100%', height: '100%' }">
    <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 cursor-move"
           @mousedown="onDragStart">
        <div class="flex items-center">
          <span class="text-xs">{{ title }}</span>
        </div>
        <div class="title-bar-buttons flex items-center gap-0.5">
          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
                  @click="onToggleCollapse" 
                  aria-label="折叠/展开">
            <!-- 向下小三角，使用内联SVG避免样式作用域问题 -->
            <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
              <polygon points="5.5,8 2,3.5 9,3.5" fill="#cbd6ff" />
            </svg>
          </button>
          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
                  @click="onMaximize" 
                  :aria-label="maximized ? '还原' : '最大化'">
            <!-- 最大化图标 -->
            <template v-if="!maximized">
              <!-- 最大化图标：外框 + 内部线条 -->
              <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
              <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
              <rect x="3" y="3" width="5" height="1" fill="#b8c6ff" />
              <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
            </svg>
            </template>
            <!-- 还原图标 -->
            <template v-else>
              <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
                  <path
                    fill="#CED4DD"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M1 4 L4 4 L4 1 L11 1 L11 8 L8 8 L8 11 L1 11 Z
                    M5 4 L5 3 L10 3 L10 7 L8 7 L8 4 Z
                    M2 6 L12.6 5 L7 6 L7 10 L2 10 Z" />
              </svg>
            </template>
          </button>
          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
                  @click="onClose" 
                  aria-label="关闭">
            <!-- 关闭图标（X），内联SVG确保1px线条 -->
            <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
              <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
              <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
            </svg>
          </button>
        </div>
      </div>

      <!-- 工具栏：位于标题栏下方，右侧扩展钮 -->
      <div class="toolbar h-6 bg-[#d5e2f6] text-[#2c3e7a] px-2 flex items-center justify-between border-b border-[#c7d2ea]">
        <div class="toolbar-left flex items-center gap-2">
          <span class="text-xs">工具栏</span>
          <button v-if="toolbarExpanded" class="toolbar-button px-2 py-0.5 text-xs bg-white/60 rounded hover:bg-white">示例按钮</button>
        </div>
        <button class="toolbar-toggle px-2 py-0.5 text-xs rounded hover:bg-white/40" 
                @click="onToggleToolbar" 
                aria-label="展开工具栏">
          <i class="fa-solid" :class="toolbarExpanded ? 'fa-angles-left' : 'fa-angles-right'"></i>
        </button>
      </div>

      <!-- 内容区：可折叠 -->
      <div class="content-area bg-[#f5f7fb] flex-1" v-show="!collapsed"></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义组件属性
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  title: {
    type: String,
    default: ''
  },
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  },
  width: {
    type: Number,
    default: 300
  },
  height: {
    type: Number,
    default: 180
  },
  collapsed: {
    type: Boolean,
    default: false
  },
  toolbarExpanded: {
    type: Boolean,
    default: false
  },
  maximized: {
    type: Boolean,
    default: false
  }
});

// 定义事件
const emit = defineEmits(['toggleCollapse', 'maximize', 'close', 'toggleToolbar', 'dragStart', 'dragMove', 'dragEnd']);

// 事件处理函数
const onToggleCollapse = () => {
  emit('toggleCollapse', props.id);
};

const onMaximize = () => {
  emit('maximize', props.id);
};

const onClose = () => {
  emit('close', props.id);
};

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;
    // 传递panelId和鼠标位置
    emit('dragStart', {
      clientX: e.clientX,
      clientY: e.clientY,
      panelId: props.id
    });
    // 防止文本选择和默认行为
    e.preventDefault();
    e.stopPropagation();
    
    // 将鼠标移动和释放事件绑定到document，确保拖拽的连续性
    document.addEventListener('mousemove', onDragMove);
    document.addEventListener('mouseup', onDragEnd);
    document.addEventListener('mouseleave', onDragEnd);
  }
};

// 拖拽移动
const onDragMove = (e) => {
  if (isDragging) {
    // 防止文本选择和默认行为
    e.preventDefault();
    e.stopPropagation();
    emit('dragMove', {
      clientX: e.clientX,
      clientY: e.clientY,
      panelId: props.id
    });
  }
};

// 拖拽结束
const onDragEnd = () => {
  if (isDragging) {
    isDragging = false;
    emit('dragEnd', { panelId: props.id });
    
    // 拖拽结束后移除事件监听器
    document.removeEventListener('mousemove', onDragMove);
    document.removeEventListener('mouseup', onDragEnd);
    document.removeEventListener('mouseleave', onDragEnd);
  }
};
</script>

<style scoped>
/* 面板基础样式 */
.panel {
  border: 1px solid #c7d2ea;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* 图标样式优化 */
.icon-square-svg {
  /* 优化SVG渲染，避免1px边框显示过粗的问题 */
  shape-rendering: crispEdges;
}

/* 禁用可能存在的旧伪元素样式 */
:deep(.icon-square::before),
:deep(.icon-square::after) {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
</style>