优化代码结构

2026-01-05 11:46:46 +08:00
parent a23facccba
commit c6d10b6221
2 changed files with 122 additions and 132 deletions
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+interface InstrumentState {
+  left: number;
+  bottom: number;
+  baseScale: number;
+  zIndex: number;
+}
+
+const props = defineProps({
+  instrument: {
+    type: Object as PropType<InstrumentState>,
+    required: true,
+  },
+  tooltip: {
+    type: String,
+    default: '拖动把手可移动仪器位置',
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'start-drag', instrument: InstrumentState, ev: PointerEvent): void;
+}>();
+
+const onPointerDown = (ev: PointerEvent) => {
+  emit('start-drag', props.instrument, ev);
+};
+</script>
+
+<template>
+  <div class="instrument-wrapper">
+    <div class="drag-handle" :data-tooltip="tooltip" @pointerdown="onPointerDown">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="5" r="1" />
+        <circle cx="12" cy="12" r="1" />
+        <circle cx="12" cy="19" r="1" />
+        <circle cx="8" cy="5" r="1" />
+        <circle cx="8" cy="12" r="1" />
+        <circle cx="8" cy="19" r="1" />
+        <circle cx="16" cy="5" r="1" />
+        <circle cx="16" cy="12" r="1" />
+        <circle cx="16" cy="19" r="1" />
+      </svg>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.instrument-wrapper {
+  position: absolute;
+  filter: drop-shadow(0 10px 10px black);
+  transition: filter 0.2s;
+}
+
+.drag-handle {
+  touch-action: none;
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 24px;
+  background: linear-gradient(135deg, rgba(100, 100, 100, 0.9), rgba(60, 60, 60, 0.95));
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2);
+  opacity: 0.7;
+  transition: all 0.2s;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(4px);
+}
+
+.drag-handle:hover {
+  opacity: 1;
+  background: linear-gradient(135deg, rgba(120, 120, 120, 0.95), rgba(80, 80, 80, 1));
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
+  transform: translateX(-50%) scale(1.1);
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+  background: linear-gradient(135deg, rgba(80, 80, 80, 1), rgba(50, 50, 50, 1));
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.2);
+}
+
+.drag-handle svg {
+  width: 20px;
+  height: 20px;
+  color: rgba(255, 255, 255, 0.8);
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
+}
+
+.instrument-wrapper:hover .drag-handle {
+  opacity: 0.9;
+}
+</style>