175 lines
4.6 KiB
Vue
175 lines
4.6 KiB
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>
|