init

src/components/SceneViewPanel/SceneToolbar.vue

@@ -0,0 +1,237 @@
+<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>