优化代码结构
This commit is contained in:
parent
a23facccba
commit
c6d10b6221
150
src/App.vue
150
src/App.vue
@ -3,6 +3,7 @@ import { ref, computed, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
|
|||||||
import DeterminationMachine from './components/DeterminationMachine.vue';
|
import DeterminationMachine from './components/DeterminationMachine.vue';
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
import SilverKnob from './components/SilverKnob.vue';
|
import SilverKnob from './components/SilverKnob.vue';
|
||||||
|
import DraggableInstrumentWrapper from './components/DraggableInstrumentWrapper.vue';
|
||||||
import Oscilloscope from './components/Oscilloscope.vue';
|
import Oscilloscope from './components/Oscilloscope.vue';
|
||||||
import SignalGen from './components/SignalGen.vue';
|
import SignalGen from './components/SignalGen.vue';
|
||||||
import Notebook from './components/Notebook.vue';
|
import Notebook from './components/Notebook.vue';
|
||||||
@ -788,92 +789,29 @@ onBeforeUnmount(() => {
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div class="instrument-wrapper" :style="machineStyle">
|
<DraggableInstrumentWrapper :style="machineStyle" :instrument="machine" @start-drag="startDrag">
|
||||||
<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>
|
|
||||||
<DeterminationMachine v-model="distance" class="machine"
|
<DeterminationMachine v-model="distance" class="machine"
|
||||||
@register-pin="registerPin" @unregister-pin="unregisterPin"
|
@register-pin="registerPin" @unregister-pin="unregisterPin" @pin-click="onPinClick"
|
||||||
@pin-click="onPinClick" @change="onDistanceChange" />
|
@change="onDistanceChange" />
|
||||||
</div>
|
</DraggableInstrumentWrapper>
|
||||||
|
|
||||||
<div class="instrument-wrapper" :style="notebookStyle">
|
<DraggableInstrumentWrapper :style="notebookStyle" :instrument="notebook" @start-drag="startDrag">
|
||||||
<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>
|
|
||||||
<Notebook class="machine" :wiring="wiringConnected"
|
<Notebook class="machine" :wiring="wiringConnected"
|
||||||
:osc="{ vdch1: oscStatus.vdch1, vdch2: oscStatus.vdch2, currentModeIndex: oscStatus.currentModeIndex, xyMode: oscStatus.xyMode, power: oscStatus.power }"
|
:osc="{ vdch1: oscStatus.vdch1, vdch2: oscStatus.vdch2, currentModeIndex: oscStatus.currentModeIndex, xyMode: oscStatus.xyMode, power: oscStatus.power }"
|
||||||
:signal-frequency-k-hz="signalFrequencyKHz"
|
:signal-frequency-k-hz="signalFrequencyKHz" :lissajous-line-streak="lissajousLineStreak" />
|
||||||
:lissajous-line-streak="lissajousLineStreak" />
|
</DraggableInstrumentWrapper>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="instrument-wrapper" :style="oscilloscopeStyle">
|
<DraggableInstrumentWrapper :style="oscilloscopeStyle" :instrument="oscilloscope" @start-drag="startDrag">
|
||||||
<div class="drag-handle" data-tooltip="拖动把手可移动仪器位置" @pointerdown="startDrag(oscilloscope, $event)">
|
<Oscilloscope :distance="distance" :frequency="signalFrequencyKHz * 1000" :ch1-has-signal="oscCh1HasSignal"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
:ch2-has-signal="oscCh2HasSignal" class="machine" @register-pin="registerPin"
|
||||||
viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
@unregister-pin="unregisterPin" @pin-click="onPinClick" @settings="onOscSettings"
|
||||||
stroke-width="2">
|
@lissajous-line="onLissajousLine" />
|
||||||
<circle cx="12" cy="5" r="1" />
|
</DraggableInstrumentWrapper>
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="instrument-wrapper" :style="signalGenStyle">
|
<DraggableInstrumentWrapper :style="signalGenStyle" :instrument="signalGen" @start-drag="startDrag">
|
||||||
<div class="drag-handle" data-tooltip="拖动把手可移动仪器位置" @pointerdown="startDrag(signalGen, $event)">
|
<SignalGen v-model="signalFrequencyKHz" class="machine" @register-pin="registerPin"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
@unregister-pin="unregisterPin" @pin-click="onPinClick" />
|
||||||
viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
</DraggableInstrumentWrapper>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -941,62 +879,10 @@ onBeforeUnmount(() => {
|
|||||||
stroke-linejoin: round;
|
stroke-linejoin: round;
|
||||||
}
|
}
|
||||||
|
|
||||||
.instrument-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
filter: drop-shadow(0 10px 10px black);
|
|
||||||
transition: filter 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.machine {
|
.machine {
|
||||||
pointer-events: auto;
|
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 {
|
.tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 9000;
|
z-index: 9000;
|
||||||
|
|||||||
104
src/components/DraggableInstrumentWrapper.vue
Normal file
104
src/components/DraggableInstrumentWrapper.vue
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user