DianZhanDemo/app/components/PowerStation/Model3D/ModelToolbar.vue

<!--
  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>