fmt
This commit is contained in:
parent
bf7f5ec32e
commit
2d08c9f2d0
@ -1073,7 +1073,8 @@ function editTextBox(inst: Instance) {
|
|||||||
:class="{ selected: selectedId === inst.id }"
|
:class="{ selected: selectedId === inst.id }"
|
||||||
:style="{ left: inst.x + 'px', top: inst.y + 'px', transform: 'translate(-50%, -50%) rotate(' + (inst.rotation || 0) + 'deg)' }"
|
:style="{ left: inst.x + 'px', top: inst.y + 'px', transform: 'translate(-50%, -50%) rotate(' + (inst.rotation || 0) + 'deg)' }"
|
||||||
@pointerdown="(e) => onInstanceMouseDown(e, inst)"
|
@pointerdown="(e) => onInstanceMouseDown(e, inst)"
|
||||||
@click.stop="() => selectInstance(inst.id)" :title="(elements.find(e => e.key === inst.key)?.name || inst.key)">
|
@click.stop="() => selectInstance(inst.id)"
|
||||||
|
:title="(elements.find(e => e.key === inst.key)?.name || inst.key)">
|
||||||
<div class="inst-box"
|
<div class="inst-box"
|
||||||
:style="{ width: inst.size > 0 ? inst.size + 'px' : 'auto', height: inst.size > 0 ? inst.size + 'px' : 'auto' }">
|
:style="{ width: inst.size > 0 ? inst.size + 'px' : 'auto', height: inst.size > 0 ? inst.size + 'px' : 'auto' }">
|
||||||
<img v-if="inst.key !== 'text_box'" :src="(elements.find(e => e.key === inst.key)?.stateImages
|
<img v-if="inst.key !== 'text_box'" :src="(elements.find(e => e.key === inst.key)?.stateImages
|
||||||
@ -1093,13 +1094,10 @@ function editTextBox(inst: Instance) {
|
|||||||
}" />
|
}" />
|
||||||
|
|
||||||
<!-- 文本框渲染层：不参与电路，仅显示可编辑文本 -->
|
<!-- 文本框渲染层：不参与电路，仅显示可编辑文本 -->
|
||||||
<div v-if="inst.key === 'text_box'" class="text-box"
|
<div v-if="inst.key === 'text_box'" class="text-box" :style="{
|
||||||
:style="{
|
fontSize: (Number(inst.props?.['fontSize'] ?? 24)) + 'px',
|
||||||
fontSize: (Number(inst.props?.['fontSize'] ?? 24)) + 'px',
|
color: String(inst.props?.['color'] ?? '#111827'),
|
||||||
color: String(inst.props?.['color'] ?? '#111827'),
|
}" @dblclick.stop="editTextBox(inst)" title="双击编辑文本">
|
||||||
}"
|
|
||||||
@dblclick.stop="editTextBox(inst)"
|
|
||||||
title="双击编辑文本">
|
|
||||||
{{ String(inst.props?.['text'] ?? '') }}
|
{{ String(inst.props?.['text'] ?? '') }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1184,8 +1182,10 @@ function editTextBox(inst: Instance) {
|
|||||||
:style="{ right: showAI ? '360px' : '0' }">
|
:style="{ right: showAI ? '360px' : '0' }">
|
||||||
<div class="panel-inner">
|
<div class="panel-inner">
|
||||||
<div class="prop-title">{{ selectedInst.key }} 属性</div>
|
<div class="prop-title">{{ selectedInst.key }} 属性</div>
|
||||||
<!-- 预设按钮区域：显示当前元件的预设，点击一键应用（当未隐藏属性时） -->
|
<!-- 预设按钮区域：显示当前元件的预设，点击一键应用（当未隐藏属性时） -->
|
||||||
<div v-if="selectedMeta?.preset?.length && String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'" class="presets">
|
<div
|
||||||
|
v-if="selectedMeta?.preset?.length && String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'"
|
||||||
|
class="presets">
|
||||||
<span class="preset-label">预设</span>
|
<span class="preset-label">预设</span>
|
||||||
<button v-for="p in selectedMeta!.preset" :key="p.name"
|
<button v-for="p in selectedMeta!.preset" :key="p.name"
|
||||||
class="preset-btn" @click.stop="applyPreset(p)">{{
|
class="preset-btn" @click.stop="applyPreset(p)">{{
|
||||||
@ -1194,18 +1194,21 @@ function editTextBox(inst: Instance) {
|
|||||||
</div>
|
</div>
|
||||||
<div class="props">
|
<div class="props">
|
||||||
<!-- 实时电学量（在隐藏属性=on时不显示） -->
|
<!-- 实时电学量（在隐藏属性=on时不显示） -->
|
||||||
<label class="prop-row" v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
|
<label class="prop-row"
|
||||||
|
v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
|
||||||
<span class="label">电压</span>
|
<span class="label">电压</span>
|
||||||
<span>{{ formatValue(instLive[selectedInst!.id]?.v ?? null, 'V')
|
<span>{{ formatValue(instLive[selectedInst!.id]?.v ?? null, 'V')
|
||||||
}}</span>
|
}}</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="prop-row" v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
|
<label class="prop-row"
|
||||||
|
v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
|
||||||
<span class="label">电流</span>
|
<span class="label">电流</span>
|
||||||
<span>{{ formatValue(instLive[selectedInst!.id]?.i ?? null, 'A')
|
<span>{{ formatValue(instLive[selectedInst!.id]?.i ?? null, 'A')
|
||||||
}}</span>
|
}}</span>
|
||||||
</label>
|
</label>
|
||||||
<!-- 旋转控制（在隐藏属性=on时不显示） -->
|
<!-- 旋转控制（在隐藏属性=on时不显示） -->
|
||||||
<label class="prop-row" v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
|
<label class="prop-row"
|
||||||
|
v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
|
||||||
<span class="label">旋转</span>
|
<span class="label">旋转</span>
|
||||||
<input type="range" min="-180" max="180" step="1"
|
<input type="range" min="-180" max="180" step="1"
|
||||||
v-model.number="selectedInst!.rotation" />
|
v-model.number="selectedInst!.rotation" />
|
||||||
@ -1217,40 +1220,41 @@ function editTextBox(inst: Instance) {
|
|||||||
<button class="rot-btn"
|
<button class="rot-btn"
|
||||||
@click="selectedInst!.rotation = ((selectedInst!.rotation || 0) + 45) % 360">+45°</button>
|
@click="selectedInst!.rotation = ((selectedInst!.rotation || 0) + 45) % 360">+45°</button>
|
||||||
</label>
|
</label>
|
||||||
<!-- 通用：隐藏属性开关（始终显示） -->
|
<!-- 通用：隐藏属性开关（始终显示） -->
|
||||||
<label class="prop-row">
|
<label class="prop-row">
|
||||||
<span class="label">隐藏属性</span>
|
<span class="label">隐藏属性</span>
|
||||||
<select v-model="selectedInst!.props['hideProps'] as string">
|
<select v-model="selectedInst!.props['hideProps'] as string">
|
||||||
<option value="off">off</option>
|
<option value="off">off</option>
|
||||||
<option value="on">on</option>
|
<option value="on">on</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<!-- 业务属性编辑：当未隐藏属性时显示 -->
|
||||||
|
<template
|
||||||
|
v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'"
|
||||||
|
v-for="schema in (elements.find(e => e.key === selectedInst!.key)?.propertySchemas || [])"
|
||||||
|
:key="schema.key">
|
||||||
|
<label class="prop-row" v-if="schema.key !== 'hideProps'">
|
||||||
|
<span class="label">{{ schema.label }}</span>
|
||||||
|
<input v-if="schema.type === 'number'" type="number" step="any"
|
||||||
|
v-model.number="selectedInst!.props[schema.key]" />
|
||||||
|
<input v-else-if="schema.type === 'text'" type="text"
|
||||||
|
v-model="selectedInst!.props[schema.key] as string" />
|
||||||
|
<input v-else-if="schema.type === 'color'" type="color"
|
||||||
|
v-model="selectedInst!.props[schema.key] as string" />
|
||||||
|
<select v-else-if="schema.type === 'select'"
|
||||||
|
v-model="selectedInst!.props[schema.key] as string">
|
||||||
|
<option
|
||||||
|
v-for="opt in (Array.isArray((schema as any).options) ? (schema as any).options : [])"
|
||||||
|
:key="typeof opt === 'string' ? opt : (opt.value)"
|
||||||
|
:value="typeof opt === 'string' ? opt : (opt.value)">
|
||||||
|
{{ typeof opt === 'string' ? opt : (opt.label || opt.value) }}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
<span class="unit"
|
||||||
|
v-if="schema.type === 'number' && (schema as any).unit">{{
|
||||||
|
(schema as any).unit }}</span>
|
||||||
</label>
|
</label>
|
||||||
<!-- 业务属性编辑：当未隐藏属性时显示 -->
|
</template>
|
||||||
<template v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'"
|
|
||||||
v-for="schema in (elements.find(e => e.key === selectedInst!.key)?.propertySchemas || [])"
|
|
||||||
:key="schema.key">
|
|
||||||
<label class="prop-row" v-if="schema.key !== 'hideProps'">
|
|
||||||
<span class="label">{{ schema.label }}</span>
|
|
||||||
<input v-if="schema.type === 'number'" type="number" step="any"
|
|
||||||
v-model.number="selectedInst!.props[schema.key]" />
|
|
||||||
<input v-else-if="schema.type === 'text'" type="text"
|
|
||||||
v-model="selectedInst!.props[schema.key] as string" />
|
|
||||||
<input v-else-if="schema.type === 'color'" type="color"
|
|
||||||
v-model="selectedInst!.props[schema.key] as string" />
|
|
||||||
<select v-else-if="schema.type === 'select'"
|
|
||||||
v-model="selectedInst!.props[schema.key] as string">
|
|
||||||
<option
|
|
||||||
v-for="opt in (Array.isArray((schema as any).options) ? (schema as any).options : [])"
|
|
||||||
:key="typeof opt === 'string' ? opt : (opt.value)"
|
|
||||||
:value="typeof opt === 'string' ? opt : (opt.value)">
|
|
||||||
{{ typeof opt === 'string' ? opt : (opt.label || opt.value) }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<span class="unit"
|
|
||||||
v-if="schema.type === 'number' && (schema as any).unit">{{
|
|
||||||
(schema as any).unit }}</span>
|
|
||||||
</label>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 右侧操作区：删除按钮 -->
|
<!-- 右侧操作区：删除按钮 -->
|
||||||
<div class="panel-actions">
|
<div class="panel-actions">
|
||||||
|
|||||||
@ -150,10 +150,10 @@ export const elements: CircuitElement[] = [
|
|||||||
pinUrl: slidingRheostatPin,
|
pinUrl: slidingRheostatPin,
|
||||||
defaultSize: 180,
|
defaultSize: 180,
|
||||||
connectionPoints: [
|
connectionPoints: [
|
||||||
{ x: 0.15, y: 0.28, name: '下部左侧' },
|
{ x: 0.15, y: 0.28, name: '上部左侧' },
|
||||||
{ x: 0.85, y: 0.28, name: '下部右侧' },
|
{ x: 0.85, y: 0.28, name: '上部右侧' },
|
||||||
{ x: 0.15, y: 0.76, name: '上部左侧' },
|
{ x: 0.15, y: 0.76, name: '下部左侧' },
|
||||||
{ x: 0.85, y: 0.76, name: '上部右侧' },
|
{ x: 0.85, y: 0.76, name: '下部右侧' },
|
||||||
],
|
],
|
||||||
propertySchemas: [
|
propertySchemas: [
|
||||||
{ key: 'maxResistance', label: '最大电阻', type: 'number', unit: 'Ω', default: 100 },
|
{ key: 'maxResistance', label: '最大电阻', type: 'number', unit: 'Ω', default: 100 },
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user