diff --git a/src/App.vue b/src/App.vue
index c83e3bb..c3af7df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import { ref, computed, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
 import DeterminationMachine from './components/DeterminationMachine.vue';
 //@ts-ignore
 import SilverKnob from './components/SilverKnob.vue';
+import DraggableInstrumentWrapper from './components/DraggableInstrumentWrapper.vue';
 import Oscilloscope from './components/Oscilloscope.vue';
 import SignalGen from './components/SignalGen.vue';
 import Notebook from './components/Notebook.vue';
@@ -788,92 +789,29 @@ onBeforeUnmount(() => {
       </g>
     </svg>
 
-    <div class="instrument-wrapper" :style="machineStyle">
-      <div class="drag-handle" data-tooltip="拖动把手可移动仪器位置" @pointerdown="startDrag(machine, $event)">
-        <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>
+    <DraggableInstrumentWrapper :style="machineStyle" :instrument="machine" @start-drag="startDrag">
       <DeterminationMachine v-model="distance" class="machine"
-        @register-pin="registerPin" @unregister-pin="unregisterPin"
-        @pin-click="onPinClick" @change="onDistanceChange" />
-    </div>
+        @register-pin="registerPin" @unregister-pin="unregisterPin" @pin-click="onPinClick"
+        @change="onDistanceChange" />
+    </DraggableInstrumentWrapper>
 
-    <div class="instrument-wrapper" :style="notebookStyle">
-      <div class="drag-handle" data-tooltip="拖动把手可移动仪器位置" @pointerdown="startDrag(notebook, $event)">
-        <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>
+    <DraggableInstrumentWrapper :style="notebookStyle" :instrument="notebook" @start-drag="startDrag">
       <Notebook class="machine" :wiring="wiringConnected"
         :osc="{ vdch1: oscStatus.vdch1, vdch2: oscStatus.vdch2, currentModeIndex: oscStatus.currentModeIndex, xyMode: oscStatus.xyMode, power: oscStatus.power }"
-        :signal-frequency-k-hz="signalFrequencyKHz"
-        :lissajous-line-streak="lissajousLineStreak" />
-    </div>
+        :signal-frequency-k-hz="signalFrequencyKHz" :lissajous-line-streak="lissajousLineStreak" />
+    </DraggableInstrumentWrapper>
 
-    <div class="instrument-wrapper" :style="oscilloscopeStyle">
-      <div class="drag-handle" data-tooltip="拖动把手可移动仪器位置" @pointerdown="startDrag(oscilloscope, $event)">
-        <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>
-      <Oscilloscope :distance="distance" :frequency="signalFrequencyKHz * 1000"
-        :ch1-has-signal="oscCh1HasSignal" :ch2-has-signal="oscCh2HasSignal"
-        class="machine" @register-pin="registerPin"
-        @unregister-pin="unregisterPin" @pin-click="onPinClick"
-        @settings="onOscSettings" @lissajous-line="onLissajousLine" />
-    </div>
+    <DraggableInstrumentWrapper :style="oscilloscopeStyle" :instrument="oscilloscope" @start-drag="startDrag">
+      <Oscilloscope :distance="distance" :frequency="signalFrequencyKHz * 1000" :ch1-has-signal="oscCh1HasSignal"
+        :ch2-has-signal="oscCh2HasSignal" class="machine" @register-pin="registerPin"
+        @unregister-pin="unregisterPin" @pin-click="onPinClick" @settings="onOscSettings"
+        @lissajous-line="onLissajousLine" />
+    </DraggableInstrumentWrapper>
 
-    <div class="instrument-wrapper" :style="signalGenStyle">
-      <div class="drag-handle" data-tooltip="拖动把手可移动仪器位置" @pointerdown="startDrag(signalGen, $event)">
-        <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>
-      <SignalGen v-model="signalFrequencyKHz" class="machine"
-        @register-pin="registerPin" @unregister-pin="unregisterPin"
-        @pin-click="onPinClick" />
-    </div>
+    <DraggableInstrumentWrapper :style="signalGenStyle" :instrument="signalGen" @start-drag="startDrag">
+      <SignalGen v-model="signalFrequencyKHz" class="machine" @register-pin="registerPin"
+        @unregister-pin="unregisterPin" @pin-click="onPinClick" />
+    </DraggableInstrumentWrapper>
   </div>
 </template>
 
@@ -941,62 +879,10 @@ onBeforeUnmount(() => {
   stroke-linejoin: round;
 }
 
-.instrument-wrapper {
-  position: absolute;
-  filter: drop-shadow(0 10px 10px black);
-  transition: filter 0.2s;
-}
-
 .machine {
   pointer-events: auto;
 }
 
-.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;
-}
-
 .tooltip {
   position: absolute;
   z-index: 9000;
diff --git a/src/components/DraggableInstrumentWrapper.vue b/src/components/DraggableInstrumentWrapper.vue
new file mode 100644
index 0000000..38dd389
--- /dev/null
+++ b/src/components/DraggableInstrumentWrapper.vue
@@ -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>