init3

app/components/PowerStation/Model3D/ViewControls.vue

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