init3
This commit is contained in:
ch197511161
43
app/components/PowerStation/Model3D/LoadingOverlay.vue
Normal file
43
app/components/PowerStation/Model3D/LoadingOverlay.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<!--
|
||||
LoadingOverlay.vue
|
||||
加载遮罩层组件
|
||||
用于显示加载状态的动画效果
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="absolute inset-0 flex items-center justify-center bg-[#0b1120]/80 backdrop-blur-sm z-10"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<!-- 加载动画 -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 rounded-full border-2 border-cyan-500/30 animate-ping"></div>
|
||||
<div class="absolute inset-0 rounded-full border-2 border-cyan-500/50 animate-pulse"></div>
|
||||
<el-icon class="is-loading text-4xl text-cyan-400 relative z-10"><Loading /></el-icon>
|
||||
</div>
|
||||
<!-- 加载文本 -->
|
||||
<span class="text-cyan-400 font-mono tracking-[0.2em] text-sm animate-pulse">
|
||||
{{ text || 'SYSTEM LOADING...' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* LoadingOverlay 组件
|
||||
* 显示加载状态的遮罩层，带有动画效果
|
||||
*/
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
|
||||
// ============================================================
|
||||
// Props 定义
|
||||
// ============================================================
|
||||
|
||||
defineProps<{
|
||||
/** 是否显示加载状态 */
|
||||
isLoading: boolean
|
||||
/** 自定义加载文本 */
|
||||
text?: string
|
||||
}>()
|
||||
</script>
|
||||
174
app/components/PowerStation/Model3D/ModelToolbar.vue
Normal file
174
app/components/PowerStation/Model3D/ModelToolbar.vue
Normal file
@@ -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>
|
||||
91
app/components/PowerStation/Model3D/ViewControls.vue
Normal file
91
app/components/PowerStation/Model3D/ViewControls.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<!--
|
||||
ViewControls.vue
|
||||
视图控制面板组件
|
||||
提供标准视图（顶视图、底视图、前视图等）的快捷按钮
|
||||
-->
|
||||
<template>
|
||||
<div class="absolute bottom-4 right-4 z-10 pointer-events-none">
|
||||
<!-- 标准视图控制面板 -->
|
||||
<div
|
||||
class="grid grid-cols-3 gap-1 pointer-events-auto bg-slate-900/80 p-2 rounded-lg border border-cyan-500/20 backdrop-blur-sm"
|
||||
>
|
||||
<!-- 第一行：顶、前、左 -->
|
||||
<el-tooltip content="顶视图" placement="top" effect="dark">
|
||||
<button class="view-btn" @click="$emit('setStandardView', 'top')">顶</button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="前视图" placement="top" effect="dark">
|
||||
<button class="view-btn" @click="$emit('setStandardView', 'front')">前</button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="左视图" placement="bottom" effect="dark">
|
||||
<button class="view-btn" @click="$emit('setStandardView', 'left')">左</button>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 第二行：底、后、右 -->
|
||||
<el-tooltip content="底视图" placement="bottom" effect="dark">
|
||||
<button class="view-btn" @click="$emit('setStandardView', 'bottom')">底</button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="后视图" placement="bottom" effect="dark">
|
||||
<button class="view-btn" @click="$emit('setStandardView', 'back')">后</button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="右视图" placement="top" effect="dark">
|
||||
<button class="view-btn" @click="$emit('setStandardView', 'right')">右</button>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 第三行：轴侧视图（跨3列） -->
|
||||
<el-tooltip content="轴侧图" placement="bottom" effect="dark">
|
||||
<button class="view-btn col-span-3 mt-1" @click="$emit('setStandardView', 'iso')">
|
||||
轴侧视图
|
||||
</button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* ViewControls 组件
|
||||
* 提供标准视图的快捷切换按钮
|
||||
*/
|
||||
|
||||
// ============================================================
|
||||
// 类型定义
|
||||
// ============================================================
|
||||
|
||||
/** 标准视图类型 */
|
||||
type StandardViewType = 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right' | 'iso'
|
||||
|
||||
// ============================================================
|
||||
// Emits 定义
|
||||
// ============================================================
|
||||
|
||||
defineEmits<{
|
||||
/** 设置标准视图 */
|
||||
(e: 'setStandardView', view: StandardViewType): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ============================================================
|
||||
视图按钮样式
|
||||
============================================================ */
|
||||
|
||||
.view-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
background: rgba(30, 41, 59, 0.5);
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
color: #cbd5e1;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background: rgba(6, 182, 212, 0.2);
|
||||
border-color: #22d3ee;
|
||||
color: #22d3ee;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user