优化代码结构
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';
|
||||
//@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;
|
||||
|
||||
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