<script setup lang="ts">
import CommandBar from '@/components/layout/CommandBar.vue'
import MissionPanel from '@/components/layout/MissionPanel.vue'
import CanvasView from '@/views/CanvasView.vue'
import ActivityFeed from '@/components/layout/ActivityFeed.vue'
</script>

<template>
  <div class="app-shell">
    <!-- 顶部命令栏 (fixed定位，z-index: 100) -->
    <CommandBar />
    
    <!-- 主体区域 -->
    <div class="app-main">
      <!-- 左侧任务面板 (fixed定位) -->
      <MissionPanel />
      
      <!-- 中间工作区 -->
      <div class="app-canvas">
        <CanvasView />
      </div>
      
      <!-- 右侧活动流 (fixed定位) -->
      <ActivityFeed />
    </div>
  </div>
</template>

<style>
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: var(--bg-base);
}

.app-main {
  display: flex;
  flex: 1;
  margin-top: var(--cmd-bar-height, 64px);
  min-height: 0;
}

.app-canvas {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width, 280px);
  margin-right: var(--feed-width, 320px);
  overflow-y: auto;
}
</style>