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

<template>
  <!-- 根据type属性动态渲染对应的组件 -->
  <component 
    :is="componentType" 
    v-bind="componentProps"
    v-on="componentListeners"
  >
    <!-- 统一处理children属性，不区分组件类型，只要有children就渲染 -->
    <template v-if="config.children">
      <!-- 统一处理children为数组或单个对象的情况 -->
      <div v-for="child in Array.isArray(config.children) ? config.children : [config.children]" :key="child.id" style="width: 100%; height: 100%;">
        <Render 
          :type="child.type" 
          :config="child" 
          :debug="debug"
        />
      </div>
    </template>
  </component>
</template>

<script setup>
import { computed } from 'vue'
import Area from './Area.vue'
import TabPage from './TabPage.vue'
import Panel from './Panel.vue'
import { eventBus, EVENT_TYPES } from './eventBus.js'

// 定义组件属性
const props = defineProps({
  // 组件类型：area, TabPage, panel
  type: {
    type: String,
    required: true,
    validator: (value) => ['Area', 'TabPage', 'Panel'].includes(value)
  },
  // 组件配置数据
  config: {
    type: Object,
    required: true
  },
  // 是否转发所有事件（用于调试）
  debug: {
    type: Boolean,
    default: false
  }
})

// 不再需要定义emit，因为事件将通过事件总线发送

// 根据type计算要渲染的组件
const componentType = computed(() => {
  const typeMap = {
    'Area': Area,
    'TabPage': TabPage, 
    'Panel': Panel
  }
  return typeMap[props.type]
})

// 根据type和config计算组件的属性
const componentProps = computed(() => {
  const { config } = props
  
  switch (props.type) {
    case 'Area':
      return {
        id: config.id,
        title: config.title || '面板区',
        resizable: config.resizable !== false,
        windowState: config.windowState || '正常',
        width: config.width || 300,
        height: config.height || 250,
        showTitleBar: config.showTitleBar !== false,
        left: config.left,
        top: config.top,
        draggable: config.draggable !== false
      }
      
    case 'TabPage':
      return {
        id: config.id,
        title: config.title || '标签页',
        showTabs: config.showTabs !== false,
        tabPosition: config.tabPosition || 'top'
      }
      
    case 'Panel':
      return {
        id: config.id,
        title: config.title || '',
        x: config.x || 0,
        y: config.y || 0,
        width: config.width || 300,
        height: config.height || 200,
        collapsed: config.collapsed || false,
        toolbarExpanded: config.toolbarExpanded || false,
        maximized: config.maximized || false,
        content: config.content
      }
      
    default:
      return {}
  }
})

// 计算要监听的事件（用于事件转发）
const componentListeners = computed(() => {
  const allListeners = {}
  
  // 根据组件类型添加相应的事件监听器
  if (props.type === 'Area') {
    // Area组件的事件
    allListeners['areaDragStart'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragStart:`, event)
      eventBus.emit(EVENT_TYPES.AREA_DRAG_START, { ...event, areaId: props.config.id })
    }
    allListeners['areaDragMove'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragMove:`, event)
      eventBus.emit(EVENT_TYPES.AREA_DRAG_MOVE, { ...event, areaId: props.config.id })
    }
    allListeners['areaDragEnd'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragEnd:`, event)
      eventBus.emit(EVENT_TYPES.AREA_DRAG_END, { ...event, areaId: props.config.id })
    }
    allListeners['area-merged'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] area-merged:`, event)
      eventBus.emit('area-merged', { ...event, areaId: props.config.id })
    }
    allListeners['toggleCollapse'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleCollapse:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
    }
    allListeners['maximize'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] maximize:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
    }
    allListeners['close'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] close:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
    }
    allListeners['toggleToolbar'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleToolbar:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
    }
    allListeners['update:windowState'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] update:windowState:`, event)
      eventBus.emit(EVENT_TYPES.WINDOW_STATE_CHANGE, event)
    }
    allListeners['update:position'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] update:position:`, event)
      eventBus.emit(EVENT_TYPES.AREA_POSITION_UPDATE, event)
    }
    allListeners['dragover'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] dragover:`, event)
      eventBus.emit(EVENT_TYPES.AREA_DRAG_OVER, { ...event, areaId: props.config.id })
    }
    allListeners['dragleave'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] dragleave:`, event)
      eventBus.emit(EVENT_TYPES.AREA_DRAG_LEAVE, { ...event, areaId: props.config.id })
    }
    allListeners['panelMaximizeSync'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] panelMaximizeSync:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, { ...event, areaId: props.config.id })
    }
    allListeners['closePanel'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] closePanel:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_CLOSE, { ...event, areaId: props.config.id })
    }
  }
  
  if (props.type === 'TabPage') {
    // TabPage组件的事件
    allListeners['tabChange'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabChange:`, event)
      eventBus.emit(EVENT_TYPES.TAB_CHANGE, { ...event, areaId: props.config.id })
    }
    allListeners['tabClose'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabClose:`, event)
      eventBus.emit(EVENT_TYPES.TAB_CLOSE, { ...event, areaId: props.config.id })
    }
    allListeners['tabAdd'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabAdd:`, event)
      eventBus.emit(EVENT_TYPES.TAB_ADD, { ...event, areaId: props.config.id })
    }
    allListeners['tabDragStart'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragStart:`, event)
      eventBus.emit(EVENT_TYPES.TAB_DRAG_START, { ...event, areaId: props.config.id })
    }
    allListeners['tabDragMove'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragMove:`, event)
      eventBus.emit(EVENT_TYPES.TAB_DRAG_MOVE, { ...event, areaId: props.config.id })
    }
    allListeners['tabDragEnd'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragEnd:`, event)
      eventBus.emit(EVENT_TYPES.TAB_DRAG_END, { ...event, areaId: props.config.id })
    }
    allListeners['toggleCollapse'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleCollapse:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
    }
    allListeners['maximize'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] maximize:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
    }
    allListeners['close'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] close:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
    }
    allListeners['toggleToolbar'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleToolbar:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
    }
    allListeners['dragStart'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragStart:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, { ...event, areaId: props.config.id })
    }
    allListeners['dragMove'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragMove:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, { ...event, areaId: props.config.id })
    }
    allListeners['dragEnd'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragEnd:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, { ...event, areaId: props.config.id })
    }
  }
  
  if (props.type === 'Panel') {
    // Panel组件的事件
    allListeners['toggleCollapse'] = (event) => {
      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleCollapse:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
    }
    allListeners['maximize'] = (event) => {
      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] maximize:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
    }
    allListeners['close'] = (event) => {
      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] close:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
    }
    allListeners['toggleToolbar'] = (event) => {
      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleToolbar:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
    }
    allListeners['dragStart'] = (event) => {
      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragStart:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_DRAG_START, { ...event, areaId: props.config.id })
    }
    allListeners['dragMove'] = (event) => {
      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragMove:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE, { ...event, areaId: props.config.id })
    }
    allListeners['dragEnd'] = (event) => {
      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragEnd:`, event)
      eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, { ...event, areaId: props.config.id })
    }
  }
  
  return allListeners
})



// 暴露组件实例方法
defineExpose({
  getComponentType: () => props.type,
  getConfig: () => props.config,
  getComponentProps: () => componentProps.value,
  isDebugMode: () => props.debug
})
</script>

<style scoped>
/* Render组件本身不添加额外样式，由子组件控制 */
</style>