init3

app/components/PowerStation/Model3D/ModelToolbar.vue

@@ -0,0 +1,174 @@
+<!--
+  ModelToolbar.vue
+  模型工具栏组件
+  提供3D视图的各种控制按钮
+-->
+<template>
+  <!-- 左侧工具栏：导出功能 -->
+  <div class="absolute top-4 left-4 z-10 flex flex-col gap-2">
+    <template v-if="showDownload">
+      <el-tooltip content="导出GLB模型" placement="bottom" effect="dark">
+        <button class="tech-icon-btn" @click="$emit('exportModel')">
+          <el-icon><Download /></el-icon>
+        </button>
+      </el-tooltip>
+      <el-tooltip content="导出物体层级关系JSON" placement="bottom" effect="dark">
+        <button class="tech-icon-btn" @click="$emit('exportHierarchy')">
+          <el-icon><Document /></el-icon>
+        </button>
+      </el-tooltip>
+    </template>
+  </div>
+
+  <!-- 右侧工具栏：视图控制 -->
+  <div class="absolute top-4 right-4 z-10 flex flex-col gap-2">
+    <!-- 复位视角 -->
+    <el-tooltip content="复位视角" placement="left" effect="dark">
+      <button class="tech-icon-btn" @click="$emit('resetView')">
+        <el-icon><Refresh /></el-icon>
+      </button>
+    </el-tooltip>
+
+    <!-- 自动旋转 -->
+    <el-tooltip content="自动旋转" placement="left" effect="dark">
+      <button
+        class="tech-icon-btn"
+        :class="{ active: autoRotate }"
+        @click="$emit('toggleAutoRotate')"
+      >
+        <el-icon><VideoPlay /></el-icon>
+      </button>
+    </el-tooltip>
+
+    <!-- 最大化/还原 -->
+    <el-tooltip :content="isMaximized ? '还原' : '最大化'" placement="left" effect="dark">
+      <button class="tech-icon-btn" @click="$emit('toggleMaximize')">
+        <el-icon><FullScreen /></el-icon>
+      </button>
+    </el-tooltip>
+
+    <!-- 光照模式切换 -->
+    <el-tooltip
+      :content="lightingMode === 'basic' ? '切换高级照明' : '切换基本照明'"
+      placement="left"
+      effect="dark"
+    >
+      <button
+        class="tech-icon-btn"
+        :class="{ active: lightingMode === 'advanced' }"
+        @click="$emit('toggleLighting')"
+      >
+        <el-icon><Sunny /></el-icon>
+      </button>
+    </el-tooltip>
+
+    <!-- 双面渲染切换 -->
+    <el-tooltip
+      :content="doubleSided ? '关闭双面渲染' : '开启双面渲染'"
+      placement="left"
+      effect="dark"
+    >
+      <button
+        class="tech-icon-btn"
+        :class="{ active: doubleSided }"
+        @click="$emit('toggleDoubleSide')"
+      >
+        <el-icon><View /></el-icon>
+      </button>
+    </el-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * ModelToolbar 组件
+ * 提供3D视图的控制工具栏
+ */
+import {
+  Document,
+  Download,
+  FullScreen,
+  Refresh,
+  Sunny,
+  VideoPlay,
+  View,
+} from '@element-plus/icons-vue';
+
+// ============================================================
+// Props 定义
+// ============================================================
+
+defineProps<{
+  /** 是否自动旋转 */
+  autoRotate: boolean
+  /** 是否最大化 */
+  isMaximized: boolean
+  /** 光照模式 */
+  lightingMode: 'basic' | 'advanced'
+  /** 是否双面渲染 */
+  doubleSided: boolean
+  /** 是否显示下载按钮 */
+  showDownload?: boolean
+}>()
+
+// ============================================================
+// Emits 定义
+// ============================================================
+
+defineEmits<{
+  /** 复位视角 */
+  (e: 'resetView'): void
+  /** 切换自动旋转 */
+  (e: 'toggleAutoRotate'): void
+  /** 切换最大化 */
+  (e: 'toggleMaximize'): void
+  /** 切换光照模式 */
+  (e: 'toggleLighting'): void
+  /** 切换双面渲染 */
+  (e: 'toggleDoubleSide'): void
+  /** 导出模型 */
+  (e: 'exportModel'): void
+  /** 导出层级关系 */
+  (e: 'exportHierarchy'): void
+}>()
+</script>
+
+<style scoped>
+/* ============================================================
+   工具按钮样式
+   ============================================================ */
+
+.tech-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(34, 211, 238, 0.2);
+  color: #94a3b8;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(4px);
+}
+
+.tech-icon-btn:hover {
+  background: rgba(6, 182, 212, 0.2);
+  border-color: #22d3ee;
+  color: #22d3ee;
+  box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
+  transform: scale(1.05);
+}
+
+.tech-icon-btn:active {
+  transform: scale(0.95);
+}
+
+.tech-icon-btn.active {
+  background: rgba(6, 182, 212, 0.2);
+  border-color: #22d3ee;
+  color: #22d3ee;
+  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
+}
+</style>