3deditor-client/src/components/SceneViewPanel/SceneToolbar.vue

<template>
  <div class="scene-toolbar">
    <!-- 左侧工具组 -->
    <div class="toolbar-group">
      <button 
        :class="['toolbar-btn', { active: activeTool === 'select' }]" 
        @click="setActiveTool('select')"
        title="选择工具"
      >
        🔍
      </button>
      <button 
        :class="['toolbar-btn', { active: activeTool === 'move' }]" 
        @click="setActiveTool('move')"
        title="移动工具"
      >
        ✋
      </button>
      <button 
        :class="['toolbar-btn', { active: activeTool === 'rotate' }]" 
        @click="setActiveTool('rotate')"
        title="旋转工具"
      >
        🔄
      </button>
      <button 
        :class="['toolbar-btn', { active: activeTool === 'scale' }]" 
        @click="setActiveTool('scale')"
        title="缩放工具"
      >
        📏
      </button>
      <div class="toolbar-separator"></div>
      <button 
        class="toolbar-btn" 
        @click="resetCamera"
        title="重置相机"
      >
        📷
      </button>
    </div>

    <!-- 中间视图控制组 -->
    <div class="toolbar-group">
      <button 
        :class="['toolbar-btn', { active: showGrid }]" 
        @click="toggleGrid"
        title="显示/隐藏网格"
      >
        ⊞
      </button>
      <button 
        :class="['toolbar-btn', { active: showWireframe }]" 
        @click="toggleWireframe"
        title="线框模式"
      >
        ⧉
      </button>
      <button 
        class="toolbar-btn" 
        @click="focusSelected"
        title="聚焦选中对象"
      >
        🎯
      </button>
    </div>

    <!-- 右侧渲染控制组 -->
    <div class="toolbar-group">
      <button 
        :class="['toolbar-btn', { active: showStats }]" 
        @click="toggleStats"
        title="显示/隐藏统计信息"
      >
        📊
      </button>
      <button 
        class="toolbar-btn" 
        @click="takeScreenshot"
        title="截图"
      >
        📸
      </button>
      <div class="toolbar-separator"></div>
      <button 
        :class="['toolbar-btn', { active: isFullscreen }]" 
        @click="toggleFullscreen"
        title="全屏"
      >
        ⛶
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 工具状态
const activeTool = ref('select')
const showGrid = ref(true)
const showWireframe = ref(false)
const showStats = ref(false)
const isFullscreen = ref(false)

// 设置活动工具
const setActiveTool = (tool: string) => {
  activeTool.value = tool
  // 这里可以添加工具切换的逻辑
  console.log('切换工具:', tool)
}

// 重置相机
const resetCamera = () => {
  console.log('重置相机')
  // 这里添加重置相机的逻辑
}

// 切换网格显示
const toggleGrid = () => {
  showGrid.value = !showGrid.value
  console.log('网格显示:', showGrid.value)
  // 这里添加网格显示切换的逻辑
}

// 切换线框模式
const toggleWireframe = () => {
  showWireframe.value = !showWireframe.value
  console.log('线框模式:', showWireframe.value)
  // 这里添加线框模式切换的逻辑
}

// 聚焦选中对象
const focusSelected = () => {
  console.log('聚焦选中对象')
  // 这里添加聚焦选中对象的逻辑
}

// 切换统计信息显示
const toggleStats = () => {
  showStats.value = !showStats.value
  console.log('统计信息显示:', showStats.value)
  // 这里添加统计信息显示切换的逻辑
}

// 截图
const takeScreenshot = () => {
  console.log('截图')
  // 这里添加截图的逻辑
}

// 切换全屏
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  console.log('全屏模式:', isFullscreen.value)
  // 这里添加全屏切换的逻辑
}
</script>

<style scoped>
.scene-toolbar {
  height: 40px;
  background: #2d2d2d;
  border-bottom: 1px solid #4a4a4a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #cccccc;
  flex-shrink: 0;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #888;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s;
  min-width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-btn:hover {
  background: #4a4a4a;
  border-color: #5a5a5a;
  color: #cccccc;
}

.toolbar-btn:active {
  background: #2d2d2d;
  border-color: #007acc;
}

.toolbar-btn.active {
  background: #007acc;
  border-color: #005a9e;
  color: #ffffff;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: #4a4a4a;
  margin: 0 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .scene-toolbar {
    padding: 0 8px;
    height: 36px;
  }
  
  .toolbar-group {
    gap: 2px;
  }
  
  .toolbar-btn {
    padding: 4px 6px;
    min-width: 28px;
    height: 24px;
    font-size: 12px;
  }
}
</style>