diff --git a/TODO b/TODO
new file mode 100644
index 0000000..95959ff
--- /dev/null
+++ b/TODO
@@ -0,0 +1,2 @@
+- 添加图像识别
+- 添加分享大厅
\ No newline at end of file
diff --git a/bun.lock b/bun.lock
index e6bae65..673e8a1 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "dependencies": {
         "openai": "^5.20.0",
         "vue": "^3.5.18",
+        "vue-router": "4",
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
@@ -143,6 +144,8 @@
 
     "@vue/compiler-vue2": ["@vue/compiler-vue2@2.7.16", "", { "dependencies": { "de-indent": "^1.0.2", "he": "^1.2.0" } }, "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A=="],
 
+    "@vue/devtools-api": ["@vue/devtools-api@6.6.4", "", {}, "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="],
+
     "@vue/language-core": ["@vue/language-core@3.0.6", "", { "dependencies": { "@volar/language-core": "2.4.23", "@vue/compiler-dom": "^3.5.0", "@vue/compiler-vue2": "^2.7.16", "@vue/shared": "^3.5.0", "alien-signals": "^2.0.5", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", "picomatch": "^4.0.2" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-e2RRzYWm+qGm8apUHW1wA5RQxzNhkqbbKdbKhiDUcmMrNAZGyM8aTiL3UrTqkaFI5s7wJRGGrp4u3jgusuBp2A=="],
 
     "@vue/reactivity": ["@vue/reactivity@3.5.21", "", { "dependencies": { "@vue/shared": "3.5.21" } }, "sha512-3ah7sa+Cwr9iiYEERt9JfZKPw4A2UlbY8RbbnH2mGCE8NwHkhmlZt2VsH0oDA3P08X3jJd29ohBDtX+TbD9AsA=="],
@@ -205,6 +208,8 @@
 
     "vue": ["vue@3.5.21", "", { "dependencies": { "@vue/compiler-dom": "3.5.21", "@vue/compiler-sfc": "3.5.21", "@vue/runtime-dom": "3.5.21", "@vue/server-renderer": "3.5.21", "@vue/shared": "3.5.21" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-xxf9rum9KtOdwdRkiApWL+9hZEMWE90FHh8yS1+KJAiWYh+iGWV1FquPjoO9VUHQ+VIhsCXNNyZ5Sf4++RVZBA=="],
 
+    "vue-router": ["vue-router@4.5.1", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.2.0" } }, "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw=="],
+
     "vue-tsc": ["vue-tsc@3.0.6", "", { "dependencies": { "@volar/typescript": "2.4.23", "@vue/language-core": "3.0.6" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-Tbs8Whd43R2e2nxez4WXPvvdjGbW24rOSgRhLOHXzWiT4pcP4G7KeWh0YCn18rF4bVwv7tggLLZ6MJnO6jXPBg=="],
   }
 }
diff --git a/package.json b/package.json
index 2a44f47..44c6019 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "openai": "^5.20.0",
-    "vue": "^3.5.18"
+    "vue": "^3.5.18",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
diff --git a/src/App.vue b/src/App.vue
index 594e46b..b7d7195 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,1560 +1,3 @@
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
-import AIAssistant from './components/AIAssistant.vue'
-import { elements, type CircuitElement, type Preset } from './elements'
-import { formatValue } from './utils'
-
-// 1) 左侧面板元件清单（显式导入）
-type PaletteItem = CircuitElement
-const palette: PaletteItem[] = [...elements]
-
-// 2) 画布世界状态（平移/缩放）
-const viewportRef = ref<HTMLDivElement | null>(null)
-const worldRef = ref<HTMLDivElement | null>(null)
-
-// 右侧 AI 面板显示开关
-const showAI = ref(true)
-
-const state = reactive({
-  scale: 0.8,
-  minScale: 0.2,
-  maxScale: 3,
-  translateX: 0,
-  translateY: 0,
-  worldSize: 5000, // 世界为正方形 5000x5000，中心在 2500,2500
-  gridSize: 40, // 网格间距（未缩放前）
-})
-
-const worldStyle = computed(() => ({
-  width: state.worldSize + 'px',
-  height: state.worldSize + 'px',
-  transform: `translate(${state.translateX}px, ${state.translateY}px) scale(${state.scale})`,
-  transformOrigin: '0 0',
-  // 提供给 CSS 的网格尺寸变量
-  '--grid': state.gridSize + 'px',
-  '--grid5': state.gridSize * 5 + 'px',
-}))
-
-// 3) 已放置的元件
-type Instance = {
-  id: string
-  key: string // 文件名键
-  url: string
-  x: number
-  y: number
-  size: number
-  rotation: number // 角度，单位：deg
-  props: Record<string, number | string>
-  state?: 'on' | 'off'
-}
-
-let idSeq = 0
-const instances = reactive<Instance[]>([])
-
-// 连接点与导线
-type EndpointRef = { instId: string; cpIndex: number }
-type Wire = { id: string; a: EndpointRef; b: EndpointRef }
-let wireSeq = 0
-const wires = reactive<Wire[]>([])
-let pendingEndpoint: EndpointRef | null = null
-
-// 选中与属性编辑
-const selectedId = ref<string | null>(null)
-const selectedInst = computed(() => instances.find(i => i.id === selectedId.value) || null)
-function selectInstance(id: string) { selectedId.value = id }
-function clearSelection() { selectedId.value = null }
-
-// 选中元件的元数据（用于读取预设清单）
-const selectedMeta = computed(() => {
-  const inst = selectedInst.value
-  if (!inst) return null
-  return elements.find(e => e.key === inst.key) || null
-})
-
-// 应用预设：将预设中的属性值写到实例 props
-function applyPreset(p: Preset) {
-  const inst = selectedInst.value
-  if (!inst) return
-  const values = p?.propertyValues || {}
-  for (const [k, v] of Object.entries(values)) {
-    inst.props[k] = v as any
-  }
-}
-
-// 4) 视口 <-> 世界 坐标转换
-function clientToWorld(clientX: number, clientY: number) {
-  const viewport = viewportRef.value!
-  const rect = viewport.getBoundingClientRect()
-  const x = (clientX - rect.left - state.translateX) / state.scale
-  const y = (clientY - rect.top - state.translateY) / state.scale
-  return { x, y }
-}
-
-function zoomAt(clientX: number, clientY: number, deltaY: number) {
-  const { x: wx, y: wy } = clientToWorld(clientX, clientY)
-  const zoomFactor = Math.exp(-deltaY * 0.0015) // 平滑缩放
-  const next = Math.min(state.maxScale, Math.max(state.minScale, state.scale * zoomFactor))
-  const prev = state.scale
-  if (next === prev) return
-  // 调整平移以保持光标下的世界点不变
-  state.translateX = clientX - viewportRef.value!.getBoundingClientRect().left - wx * next
-  state.translateY = clientY - viewportRef.value!.getBoundingClientRect().top - wy * next
-  state.scale = next
-}
-
-// 5) 拖拽放置（来自左侧面板）
-const DND_MIME = 'application/x-circuit-element'
-
-function onPaletteDragStart(e: DragEvent, item: PaletteItem) {
-  if (!e.dataTransfer) return
-  e.dataTransfer.setData(DND_MIME, item.key)
-  e.dataTransfer.setData('text/plain', item.key)
-  e.dataTransfer.effectAllowed = 'copy'
-}
-
-function onCanvasDragOver(e: DragEvent) {
-  e.preventDefault()
-  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
-}
-
-function onCanvasDrop(e: DragEvent) {
-  e.preventDefault()
-  const key = e.dataTransfer?.getData(DND_MIME) || e.dataTransfer?.getData('text/plain')
-  if (!key) return
-  const item = palette.find(p => p.key === key)
-  if (!item) return
-  const { x, y } = clientToWorld(e.clientX, e.clientY)
-  const defSize = item.defaultSize ?? 64
-  const props: Record<string, number | string> = {}
-    ; (item.propertySchemas || []).forEach((p) => { props[p.key] = p.default })
-  const inst: Instance = { id: String(++idSeq), key: item.key, url: item.url, x: x, y: y, size: defSize, rotation: 0, props }
-  // 仍保留 state 字段用于灯泡等展示，但对于开关用 props.state 作为真值
-  if (item.stateImages) inst.state = String(props['state'] ?? 'off') as any
-  instances.push(inst)
-}
-
-// 6) 背景平移
-let isPanning = false
-let panStart = { x: 0, y: 0 }
-let panOrigin = { x: 0, y: 0 }
-
-function onViewportMouseDown(e: MouseEvent) {
-  // 只在点到空白区域时平移（元素自身会阻止冒泡）
-  if (e.button !== 0) return
-  isPanning = true
-  panStart = { x: e.clientX, y: e.clientY }
-  panOrigin = { x: state.translateX, y: state.translateY }
-}
-
-function onViewportMouseMove(e: MouseEvent) {
-  if (!isPanning) return
-  const dx = e.clientX - panStart.x
-  const dy = e.clientY - panStart.y
-  state.translateX = panOrigin.x + dx
-  state.translateY = panOrigin.y + dy
-}
-
-function onViewportMouseUp() {
-  isPanning = false
-}
-
-function onWheel(e: WheelEvent) {
-  // 触控板垂直滚轮缩放，按住 Ctrl 也缩放
-  if (e.ctrlKey || Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
-    e.preventDefault()
-    zoomAt(e.clientX, e.clientY, e.deltaY)
-  }
-}
-
-// 7) 画布内元素拖动
-let draggingId: string | null = null
-let dragOffset = { x: 0, y: 0 } // 元素内相对偏移（世界坐标）
-const mouseWorld = reactive({ x: 0, y: 0 })
-// 滑动变阻器滑块拖动状态
-let sliderDraggingId: string | null = null
-
-function onInstanceMouseDown(e: MouseEvent, inst: Instance) {
-  if (e.button !== 0) return
-  e.stopPropagation()
-  draggingId = inst.id
-  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
-  dragOffset = { x: wx - inst.x, y: wy - inst.y }
-}
-
-function onViewportMouseMoveDrag(e: MouseEvent) {
-  if (!draggingId) return
-  const inst = instances.find(i => i.id === draggingId)
-  if (!inst) return
-  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
-  inst.x = wx - dragOffset.x
-  inst.y = wy - dragOffset.y
-}
-
-function onViewportMouseUpDrag() {
-  draggingId = null
-}
-
-// 将世界坐标转换为实例局部坐标（考虑旋转）
-function worldToLocal(inst: Instance, wx: number, wy: number) {
-  const dx = wx - inst.x
-  const dy = wy - inst.y
-  const rad = (inst.rotation || 0) * Math.PI / 180
-  const cos = Math.cos(rad)
-  const sin = Math.sin(rad)
-  // 逆旋转
-  const lx = dx * cos + dy * sin
-  const ly = -dx * sin + dy * cos
-  return { lx, ly }
-}
-
-function onViewportMouseMoveSlider(e: MouseEvent) {
-  if (!sliderDraggingId) return
-  const inst = instances.find(i => i.id === sliderDraggingId)
-  if (!inst) return
-  if (inst.key !== 'sliding_rheostat') return
-  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
-  const { lx } = worldToLocal(inst, wx, wy)
-  // 滑道范围（与 getRheostatPinOffset 对齐）
-  const leftFrac = 0.25, rightFrac = 0.75
-  const t = (lx / inst.size + 0.5 - leftFrac) / (rightFrac - leftFrac)
-  const pos = Math.max(0, Math.min(1, t))
-  inst.props['position'] = pos
-}
-
-function onViewportMouseUpSlider() {
-  sliderDraggingId = null
-}
-
-// 连接点点击逻辑
-function onEndpointClick(instId: string, cpIndex: number, e: MouseEvent) {
-  e.stopPropagation()
-  const ep = { instId, cpIndex }
-  if (!pendingEndpoint) {
-    pendingEndpoint = ep
-    return
-  }
-  // 不允许同一端点两次
-  if (pendingEndpoint.instId === instId && pendingEndpoint.cpIndex === cpIndex) {
-    pendingEndpoint = null
-    return
-  }
-  // 创建导线
-  wires.push({ id: String(++wireSeq), a: pendingEndpoint, b: ep })
-  pendingEndpoint = null
-}
-
-function removeWire(id: string, e?: MouseEvent) {
-  if (e) e.stopPropagation()
-  const idx = wires.findIndex(w => w.id === id)
-  if (idx >= 0) wires.splice(idx, 1)
-}
-
-// 工具函数：获取实例、连接点坐标（世界坐标）
-function getInstance(instId: string) {
-  return instances.find(i => i.id === instId)
-}
-
-function getConnectionPointWorldPos(inst: Instance, cpIndex: number) {
-  const elem = elements.find(e => e.key === inst.key)
-  const cp = elem?.connectionPoints[cpIndex]
-  if (!cp) return { x: inst.x, y: inst.y }
-  const offsetX = (cp.x - 0.5) * inst.size
-  const offsetY = (cp.y - 0.5) * inst.size
-  // 旋转偏移
-  const rad = (inst.rotation || 0) * Math.PI / 180
-  const cos = Math.cos(rad)
-  const sin = Math.sin(rad)
-  const rx = offsetX * cos - offsetY * sin
-  const ry = offsetX * sin + offsetY * cos
-  return { x: inst.x + rx, y: inst.y + ry }
-}
-
-function onViewportMouseMoveTrack(e: MouseEvent) {
-  const { x, y } = clientToWorld(e.clientX, e.clientY)
-  mouseWorld.x = x
-  mouseWorld.y = y
-}
-
-// 命中测试：鼠标是否靠近某连接点（返回最近的端点）
-const SNAP_RADIUS = 12
-function findClosestEndpoint() {
-  let best: { instId: string; cpIndex: number; dist: number } | null = null
-  for (const inst of instances) {
-    const elem = elements.find(e => e.key === inst.key)
-    const cps = elem?.connectionPoints || []
-    cps.forEach((_, idx) => {
-      const p = getConnectionPointWorldPos(inst, idx)
-      const dx = p.x - mouseWorld.x
-      const dy = p.y - mouseWorld.y
-      const d = Math.hypot(dx, dy)
-      if (d <= SNAP_RADIUS && (!best || d < best.dist)) best = { instId: inst.id, cpIndex: idx, dist: d }
-    })
-  }
-  return best
-}
-
-type Nearest = { instId: string; cpIndex: number; dist: number } | null
-const nearestEndpoint = computed<Nearest>(() => findClosestEndpoint())
-const previewTarget = computed(() => {
-  const n = nearestEndpoint.value
-  // 若靠近端点，且不是与 pendingEndpoint 相同的端点，则吸附到该端点；否则跟随鼠标
-  if (n && !(pendingEndpoint && n.instId === pendingEndpoint.instId && n.cpIndex === pendingEndpoint.cpIndex)) {
-    const inst = getInstance(n.instId)!
-    return getConnectionPointWorldPos(inst, n.cpIndex)
-  }
-  return { x: mouseWorld.x, y: mouseWorld.y }
-})
-
-function isNearest(instId: string, cpIndex: number) {
-  const n = nearestEndpoint.value
-  return !!n && n.instId === instId && n.cpIndex === cpIndex
-}
-
-// 悬停端点与其连通集高亮
-const hoveredEndpoint = ref<EndpointRef | null>(null)
-const connectedEndpointSet = computed<Set<string>>(() => {
-  const set = new Set<string>()
-  const start = hoveredEndpoint.value
-  if (!start) return set
-  // 构建无向邻接表（仅基于导线）
-  const key = (ep: EndpointRef) => `${ep.instId}:${ep.cpIndex}`
-  const adj = new Map<string, string[]>()
-  const add = (a: EndpointRef, b: EndpointRef) => {
-    const ka = key(a), kb = key(b)
-    if (!adj.has(ka)) adj.set(ka, [])
-    if (!adj.has(kb)) adj.set(kb, [])
-    adj.get(ka)!.push(kb)
-    adj.get(kb)!.push(ka)
-  }
-  for (const w of wires) add(w.a, w.b)
-  // BFS/DFS 查找连通端点
-  const startKey = key(start)
-  const stack = [startKey]
-  set.add(startKey)
-  while (stack.length) {
-    const cur = stack.pop()!
-    for (const nxt of adj.get(cur) || []) {
-      if (!set.has(nxt)) { set.add(nxt); stack.push(nxt) }
-    }
-  }
-  return set
-})
-function isConnectedEndpoint(instId: string, cpIndex: number) {
-  return connectedEndpointSet.value.has(`${instId}:${cpIndex}`)
-}
-
-// 7.5) 直流电路求解（MNA）
-// - 支持：电压源(battery)、电阻(resistor/light_bulb/meter)、开关(ON=0V源，OFF=断开)、电感(DC=0V源)、电容(DC=断开)
-// - 结果：每个实例的端口电压差与电流（方向：从连接点0 -> 连接点1 为正）
-
-type InstLive = {
-  v: number | null // 端口电压 v = V(p0) - V(p1) 或电压源设定值
-  i: number | null // 支路电流，正方向 p0->p1
-  node0?: string
-  node1?: string
-}
-
-const instLive = reactive<Record<string, InstLive>>({})
-
-function getElemMeta(inst: Instance) {
-  return elements.find(e => e.key === inst.key)
-}
-
-// 针对滑动变阻器：计算滑块的屏幕内偏移（未考虑旋转，先期简化为只支持0°/180°朝向的水平滑动）
-function getRheostatPinOffset(inst: Instance) {
-  const pos = Math.max(0, Math.min(1, Number(inst.props?.['position'] ?? 0.5)))
-
-  const leftFrac = 0.25, rightFrac = 0.75
-  const cx = (leftFrac + (rightFrac - leftFrac) * pos) * inst.size
-  return cx
-}
-
-// 并查集用于将端点连成节点
-class DSU {
-  parent = new Map<string, string>()
-  find(x: string): string {
-    let p = this.parent.get(x) || x
-    if (p !== x) {
-      p = this.find(p)
-      this.parent.set(x, p)
-    } else {
-      this.parent.set(x, x)
-    }
-    return p
-  }
-  union(a: string, b: string) {
-    const ra = this.find(a)
-    const rb = this.find(b)
-    if (ra !== rb) this.parent.set(ra, rb)
-  }
-}
-
-function safeNum(v: any, def = 0) {
-  const n = typeof v === 'number' ? v : Number(v)
-  return Number.isFinite(n) ? n : def
-}
-
-type BuiltNet = {
-  nodeIds: string[] // 所有节点根ID
-  ground: string | null
-  // 器件分类
-  resistors: { inst: Instance; nPlus: string; nMinus: string; R: number }[]
-  vsrcs: { inst: Instance; nPlus: string; nMinus: string; V: number }[]
-}
-
-function buildNet(): BuiltNet {
-  const dsu = new DSU()
-  const termId = (instId: string, cp: number) => `${instId}:${cp}`
-
-  // 先把显式导线合并
-  for (const w of wires) {
-    dsu.union(termId(w.a.instId, w.a.cpIndex), termId(w.b.instId, w.b.cpIndex))
-  }
-
-  // 将“短路类器件”作为0V电压源（开关ON、DC电感）
-  // OFF开关/电容视为断开，不合并
-
-  // 收集所有端点以便形成节点清单
-  const allTerms: string[] = []
-  for (const inst of instances) {
-    const meta = getElemMeta(inst)
-    const cps = meta?.connectionPoints?.length || 0
-    for (let i = 0; i < cps; i++) allTerms.push(termId(inst.id, i))
-  }
-
-  // 形成节点集合
-  const roots = new Set<string>()
-  for (const t of allTerms) roots.add(dsu.find(t))
-  // 仅基于真实端点选择参考地
-  const nodeIds = Array.from(roots)
-  const ground = nodeIds.length ? nodeIds[0] : null // 任取一个参考地
-
-  // 为后续引入的“内部节点”（例如串联内阻的中间点）保留集合，避免重复
-  const nodeSet = new Set(nodeIds)
-  const addNode = (nid: string) => {
-    if (!nodeSet.has(nid)) { nodeSet.add(nid); nodeIds.push(nid) }
-  }
-
-  // 分类器件
-  const resistors: BuiltNet['resistors'] = []
-  const vsrcs: BuiltNet['vsrcs'] = []
-
-  const getNode = (inst: Instance, cp: number) => dsu.find(termId(inst.id, cp))
-
-  for (const inst of instances) {
-    const meta = getElemMeta(inst)
-    if (!meta || meta.connectionPoints.length < 2) continue
-    const n0 = getNode(inst, 0)
-    const n1 = getNode(inst, 1)
-
-    const key = meta.key
-  if (key === 'battery') {
-      const V = safeNum(inst.props?.['voltage'], 0)
-      const Rint = safeNum(inst.props?.['internalResistance'], 0.1)
-      // 用内部节点将电压源与内阻串联：n0 --[V]--> nInt --[Rint]--> n1
-      const nInt = `${inst.id}:int`
-      addNode(nInt)
-      vsrcs.push({ inst, nPlus: n0, nMinus: nInt, V })
-      resistors.push({ inst, nPlus: nInt, nMinus: n1, R: Math.max(1e-9, Rint) })
-    } else if (key === 'power_supply') {
-      const V = safeNum(inst.props?.['voltage'], 0)
-      const Rint = safeNum(inst.props?.['internalResistance'], 0.1)
-      // 用内部节点将电压源与内阻串联：n0 --[V]--> nInt --[Rint]--> n1
-      const nInt = `${inst.id}:int`
-      addNode(nInt)
-      vsrcs.push({ inst, nPlus: n0, nMinus: nInt, V })
-      resistors.push({ inst, nPlus: nInt, nMinus: n1, R: Math.max(1e-9, Rint) })
-    } else if (key === 'switch') {
-      const sw = (inst.props?.['state'] as any) === 'on' || inst.state === 'on'
-      if (sw) {
-        vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
-      }
-      // off = open, 忽略
-    } else if (key === 'inductor') {
-      // DC 等效 0V 源
-      vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
-    } else if (key === 'capacitor') {
-      // DC 断开
-      // 忽略
-    } else if (key === 'sliding_rheostat') {
-      // 四脚：A(0) B(1) C(2) D(3)
-      const n2 = getNode(inst, 2)
-      const n3 = getNode(inst, 3)
-      // AB 直通：用 0V 电压源建模
-      vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
-      // 变量电阻：AB->C、AB->D 与滑块位置有关
-      const Rmax = Math.max(1e-6, safeNum(inst.props?.['maxResistance'], 100))
-      const pos = Math.max(0, Math.min(1, safeNum(inst.props?.['position'], 0.5)))
-      const Rac = Math.max(1e-6, Rmax * pos)
-      const Rad = Math.max(1e-6, Rmax * (1 - pos))
-      // 将 AB 汇成一个等效节点（任选 A 侧 n0）到 C/D
-      resistors.push({ inst, nPlus: n0, nMinus: n2, R: Rac })
-      resistors.push({ inst, nPlus: n0, nMinus: n3, R: Rad })
-      // CD 固定为最大电阻
-      resistors.push({ inst, nPlus: n2, nMinus: n3, R: Rmax })
-    } else if (key === 'resistor' || key === 'light_bulb' || key === 'meter' || key === 'resistance_box') {
-      const R = Math.max(1e-6, safeNum(inst.props?.['resistance'], 0))
-      resistors.push({ inst, nPlus: n0, nMinus: n1, R })
-    } else {
-      // 其他未知器件，按开路处理
-    }
-  }
-
-  return { nodeIds, ground, resistors, vsrcs }
-}
-
-function solveMNA() {
-  const net = buildNet()
-  // 清空上一次结果
-  for (const inst of instances) instLive[inst.id] = { v: null, i: null }
-
-  if (!net.ground) return { ok: false }
-
-  // 建索引（去掉参考地）
-  const nodeIndex = new Map<string, number>()
-  let idx = 0
-  for (const nid of net.nodeIds) {
-    if (nid === net.ground) continue
-    nodeIndex.set(nid, idx++)
-  }
-  const n = nodeIndex.size
-  const m = net.vsrcs.length
-  const N = n + m
-  if (N === 0) return { ok: true }
-
-  // 构造 A x = z
-  const A: number[][] = Array.from({ length: N }, () => Array(N).fill(0))
-  const z: number[] = Array(N).fill(0)
-  const gmin = 1e-12
-
-  const mapNi = (nid: string) => (nid === net.ground ? -1 : (nodeIndex.get(nid) ?? -1))
-
-  // 电导矩阵 G（顶部 n×n）
-  for (const r of net.resistors) {
-    const a = mapNi(r.nPlus)
-    const b = mapNi(r.nMinus)
-    const g = 1 / r.R
-    if (a >= 0) A[a][a] += g + gmin
-    if (b >= 0) A[b][b] += g + gmin
-    if (a >= 0 && b >= 0) {
-      A[a][b] -= g
-      A[b][a] -= g
-    }
-  }
-  // 稳定性：对所有节点加 gmin 到地
-  for (let i = 0; i < n; i++) A[i][i] += gmin
-
-  // 电压源耦合矩阵 B、C
-  // B: (n×m)，位于 A 的右上；C = B^T（m×n），位于 A 的左下
-  net.vsrcs.forEach((vs, k) => {
-    const p = mapNi(vs.nPlus)
-    const q = mapNi(vs.nMinus)
-    const row = n + k // 对应电流未知量的位置
-    z[row] = vs.V
-    if (p >= 0) { A[p][n + k] += 1; A[row][p] += 1 }
-    if (q >= 0) { A[q][n + k] -= 1; A[row][q] -= 1 }
-    // D 为 0，已初始化
-  })
-
-  // 求解线性方程
-  const x = gaussianSolve(A, z)
-  if (!x) return { ok: false }
-
-  // 组装节点电压
-  const Vn = (nid: string) => {
-    const i = mapNi(nid)
-    return i >= 0 ? x[i] : 0 // 地节点 0V
-  }
-
-  // 写回每个器件的 v / i
-  for (const r of net.resistors) {
-    const vp = Vn(r.nPlus)
-    const vn = Vn(r.nMinus)
-    const v = vp - vn
-    const i = v / r.R
-    instLive[r.inst.id] = { v, i, node0: r.nPlus, node1: r.nMinus }
-  }
-  net.vsrcs.forEach((vs, k) => {
-    const vp = Vn(vs.nPlus)
-    const vn = Vn(vs.nMinus)
-    const v = vp - vn // 由解出的节点电压
-    const i = x[n + k] // 电压源支路电流，方向 nPlus -> nMinus
-    instLive[vs.inst.id] = { v, i, node0: vs.nPlus, node1: vs.nMinus }
-  })
-
-  // 对于未分类（断开）器件，保持 null
-
-  // 根据计算电流，自动切换需要按电流显示状态的元件（如灯泡）
-  const CURRENT_ON_THRESHOLD = 0.1 // A，即 100 mA
-  for (const inst of instances) {
-    if (inst.key === 'light_bulb') {
-      const live = instLive[inst.id]
-      const iabs = live && typeof live.i === 'number' ? Math.abs(live.i) : 0
-      if (iabs > CURRENT_ON_THRESHOLD) inst.state = 'on'
-      else inst.state = 'off'
-    }
-  }
-
-  return { ok: true }
-}
-
-// 简单高斯消元（带部分选主元）
-function gaussianSolve(A: number[][], b: number[]): number[] | null {
-  const n = b.length
-  // 扩展矩阵
-  for (let i = 0; i < n; i++) A[i].push(b[i])
-
-  for (let col = 0, row = 0; col < n && row < n; col++, row++) {
-    // 选主元
-    let piv = row
-    let maxAbs = Math.abs(A[row][col])
-    for (let r = row + 1; r < n; r++) {
-      const v = Math.abs(A[r][col])
-      if (v > maxAbs) { maxAbs = v; piv = r }
-    }
-    if (maxAbs < 1e-14) {
-      // 退化，放弃
-      return null
-    }
-    if (piv !== row) { const tmp = A[piv]; A[piv] = A[row]; A[row] = tmp }
-
-    // 归一化
-    const div = A[row][col]
-    for (let c = col; c <= n; c++) A[row][c] /= div
-
-    // 消元
-    for (let r = 0; r < n; r++) {
-      if (r === row) continue
-      const factor = A[r][col]
-      if (factor === 0) continue
-      for (let c = col; c <= n; c++) A[r][c] -= factor * A[row][c]
-    }
-  }
-
-  // 回读解
-  const x = new Array(n).fill(0)
-  for (let i = 0; i < n; i++) x[i] = A[i][n]
-  return x
-}
-
-// 绑定求解到响应式数据
-watchEffect(() => { solveMNA() })
-
-
-
-function meterText(inst: Instance) {
-  const live = instLive[inst.id]
-  const i = live?.i ?? 0
-  const r = inst.props?.['resistance'] ? safeNum(inst.props?.['resistance'], 0) : 0
-  const code = String(inst.props?.['renderFunc'] || '')
-  if (!code) return `${(i).toFixed(6)} A`
-  try {
-    // 允许两种形态："(i)=>..." 或 "(i,v,props)=>..."
-    const fn = new Function('i', 'r', 'props', 'return (' + code + ')(i, r, props)')
-    const out = fn(i, r, inst.props)
-    return String(out)
-  } catch {
-    return `ERR_RF`
-  }
-}
-
-// 灯泡发光参数：随电流变化增加线条数量、长度、透明度
-function clamp01(x: number) { return x < 0 ? 0 : x > 1 ? 1 : x }
-function getBulbGlow(inst: Instance) {
-  if (inst.key !== 'light_bulb') return { t: 0, count: 0, opacity: 0, lenFrac: 0 }
-  const live = instLive[inst.id]
-  const iabs = live && typeof live.i === 'number' ? Math.abs(live.i) : 0
-  // 使 0.5A 达到比较饱和的光效，0A 无光
-  const t = clamp01(iabs / 0.5)
-  const count = 12 + Math.round(8 * t) // 12..20 根射线
-  const opacity = 0.8 * t // 0..0.8
-  const lenFrac = 0.18 + 0.45 * t // 以尺寸为基准的长度比例
-  return { t, count, opacity, lenFrac }
-}
-
-// 8) 初始居中到世界中心
-function centerWorld() {
-  const vp = viewportRef.value
-  if (!vp) return
-  const rect = vp.getBoundingClientRect()
-  const center = state.worldSize / 2
-  state.translateX = rect.width / 2 - center * state.scale
-  state.translateY = rect.height / 2 - center * state.scale
-}
-
-onMounted(() => {
-  centerWorld()
-})
-
-// 9) 导出 / 导入（JSON 序列化）
-type SaveWorld = Pick<typeof state, 'scale' | 'translateX' | 'translateY' | 'worldSize' | 'gridSize'>
-// 新的连接点保存结构：每个实例在 props 下包含 __connections，按连接点索引记录连接到的端点
-type SaveConnectionRef = { instId: string; cpIndex: number }
-type SaveConnections = Record<string /* cpIndex */, SaveConnectionRef[]>
-type SaveInstance = Pick<Instance, 'id' | 'key' | 'x' | 'y' | 'size' | 'rotation' | 'state'> & {
-  props: Record<string, any> & { __connections?: SaveConnections }
-}
-type SaveFile = {
-  version: 2
-  world: SaveWorld
-  instances: SaveInstance[]
-}
-
-function makeSave(): SaveFile {
-  const world: SaveWorld = {
-    scale: state.scale,
-    translateX: state.translateX,
-    translateY: state.translateY,
-    worldSize: state.worldSize,
-    gridSize: state.gridSize,
-  }
-
-  // 基于当前 wires 构建每个实例的端点连接表
-  const connMap: Record<string, Record<number, SaveConnectionRef[]>> = {}
-  const addConn = (from: EndpointRef, to: EndpointRef) => {
-    if (!connMap[from.instId]) connMap[from.instId] = {}
-    if (!connMap[from.instId][from.cpIndex]) connMap[from.instId][from.cpIndex] = []
-    connMap[from.instId][from.cpIndex].push({ instId: to.instId, cpIndex: to.cpIndex })
-  }
-  for (const w of wires) {
-    addConn(w.a, w.b)
-    addConn(w.b, w.a)
-  }
-
-  const data: SaveFile = {
-    version: 2,
-    world,
-    instances: instances.map(i => {
-      const propsCopy: Record<string, any> = { ...i.props }
-      const m = connMap[i.id]
-      if (m) {
-        // 将 number 索引键转成字符串键，以便 JSON 键稳定
-        const mapped: SaveConnections = {}
-        for (const [k, arr] of Object.entries(m)) mapped[String(k)] = arr.map(x => ({ instId: x.instId, cpIndex: x.cpIndex }))
-        propsCopy.__connections = mapped
-      }
-      return {
-        id: i.id,
-        key: i.key,
-        x: i.x,
-        y: i.y,
-        size: i.size,
-        rotation: i.rotation,
-        props: propsCopy,
-        state: i.state,
-      }
-    }),
-  }
-  return data
-}
-
-function downloadJSON(filename: string, text: string) {
-  const blob = new Blob([text], { type: 'application/json;charset=utf-8' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = filename
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  URL.revokeObjectURL(url)
-}
-
-function pad(n: number) { return n.toString().padStart(2, '0') }
-function timestampName() {
-  const d = new Date()
-  const y = d.getFullYear()
-  const m = pad(d.getMonth() + 1)
-  const day = pad(d.getDate())
-  const hh = pad(d.getHours())
-  const mm = pad(d.getMinutes())
-  const ss = pad(d.getSeconds())
-  return `${y}${m}${day}-${hh}${mm}${ss}`
-}
-
-function onExportJSON() {
-  const data = makeSave()
-  const json = JSON.stringify(data, null, 2)
-  downloadJSON(`circuit-${timestampName()}.json`, json)
-}
-
-const importInputRef = ref<HTMLInputElement | null>(null)
-function triggerImport() { importInputRef.value?.click() }
-
-function safeNumber(v: any, def = 0) {
-  const n = typeof v === 'number' ? v : Number(v)
-  return Number.isFinite(n) ? n : def
-}
-
-function loadFromJSONText(text: string) {
-  let obj: any
-  try {
-    obj = JSON.parse(text)
-  } catch (err) {
-    alert('JSON 解析失败：' + (err as Error).message)
-    return
-  }
-  if (!obj || typeof obj !== 'object') {
-    alert('无效的文件内容')
-    return
-  }
-  // 兼容校验
-  const world = obj.world || {}
-  const rawInstances = Array.isArray(obj.instances) ? obj.instances : []
-
-  // 过滤仅保留存在于库里的元件
-  const knownKeys = new Set(elements.map(e => e.key))
-  const validInstances: Instance[] = []
-  for (const r of rawInstances) {
-    if (!r || typeof r !== 'object') continue
-    if (!knownKeys.has(r.key)) continue
-    // 提前拿到连接信息（若为新格式）
-    const rawProps = (typeof r.props === 'object' && r.props) ? { ...r.props } : {}
-    const savedConnections: SaveConnections | undefined = rawProps.__connections
-    if ('__connections' in rawProps) delete (rawProps as any)['__connections']
-    const inst: Instance = {
-      id: String(r.id ?? (++idSeq)),
-      key: String(r.key),
-      url: elements.find(e => e.key === r.key)!.url,
-      x: safeNumber(r.x),
-      y: safeNumber(r.y),
-      size: safeNumber(r.size, elements.find(e => e.key === r.key)?.defaultSize ?? 64),
-      rotation: safeNumber(r.rotation, 0),
-      props: rawProps,
-      state: r.state === 'on' || r.state === 'off' ? r.state : undefined,
-    }
-    // 兼容老文件：若为开关且 props.state 缺失，则使用 legacy state 或默认 off
-    if (inst.key === 'switch') {
-      const cur = String((inst.props as any)['state'] ?? '')
-      if (cur !== 'on' && cur !== 'off') {
-        (inst.props as any)['state'] = (inst.state === 'on' ? 'on' : 'off')
-      }
-    }
-      // 暂存连接信息在实例对象上（不入 props）以便后续重建导线
-      ; (inst as any).__savedConnections = savedConnections
-    validInstances.push(inst)
-  }
-
-  // 基于实例与元件接线点数量校验导线
-  const instMap = new Map(validInstances.map(i => [i.id, i]))
-  const validWires: Wire[] = []
-
-  // 从每个实例 props.__connections 重建导线（去重）
-  const dedup = new Set<string>()
-  const getKey = (a: EndpointRef, b: EndpointRef) => {
-    const k1 = `${a.instId}:${a.cpIndex}`
-    const k2 = `${b.instId}:${b.cpIndex}`
-    return k1 < k2 ? `${k1}|${k2}` : `${k2}|${k1}`
-  }
-  for (const inst of validInstances) {
-    const conns: SaveConnections | undefined = (inst as any).__savedConnections
-    if (!conns) continue
-    const elem = elements.find(e => e.key === inst.key)
-    const cps = elem?.connectionPoints?.length ?? 0
-    for (const [cpStr, arr] of Object.entries(conns)) {
-      const cpi = safeNumber(cpStr)
-      if (cpi < 0 || cpi >= cps) continue
-      for (const ref of arr || []) {
-        const tgt = instMap.get(String(ref.instId))
-        if (!tgt) continue
-        const elemB = elements.find(e => e.key === tgt.key)
-        const cpsB = elemB?.connectionPoints?.length ?? 0
-        const cpb = safeNumber(ref.cpIndex)
-        if (cpb < 0 || cpb >= cpsB) continue
-        const a: EndpointRef = { instId: inst.id, cpIndex: cpi }
-        const b: EndpointRef = { instId: String(ref.instId), cpIndex: cpb }
-        const key = getKey(a, b)
-        if (dedup.has(key)) continue
-        dedup.add(key)
-        validWires.push({ id: String(++wireSeq), a, b })
-      }
-    }
-
-  }
-
-  // 写回世界与状态
-  state.scale = safeNumber(world.scale, state.scale)
-  state.translateX = safeNumber(world.translateX, state.translateX)
-  state.translateY = safeNumber(world.translateY, state.translateY)
-  // worldSize/gridSize 通常固定，如需覆盖可解开注释
-  // state.worldSize = safeNumber(world.worldSize, state.worldSize)
-  // state.gridSize = safeNumber(world.gridSize, state.gridSize)
-
-  // 覆盖当前电路
-  instances.splice(0, instances.length, ...validInstances)
-  wires.splice(0, wires.length, ...validWires)
-  selectedId.value = null
-  pendingEndpoint = null
-
-  // 续增 id 序列
-  const maxInstId = validInstances.reduce((m, i) => Math.max(m, Number(i.id) || 0), 0)
-  const maxWireId = validWires.reduce((m, w) => Math.max(m, Number(w.id) || 0), 0)
-  idSeq = Math.max(idSeq, maxInstId)
-  wireSeq = Math.max(wireSeq, maxWireId)
-}
-
-function onImportFileChange(e: Event) {
-  const input = e.target as HTMLInputElement
-  const file = input.files && input.files[0]
-  if (!file) return
-  const reader = new FileReader()
-  reader.onload = () => {
-    const text = String(reader.result || '')
-    loadFromJSONText(text)
-  }
-  reader.onerror = () => alert('读取文件失败')
-  reader.readAsText(file, 'utf-8')
-  // 重置以便可重复选择同一文件
-  input.value = ''
-}
-
-// 提供给 AI 助手的实时电路状态（每次访问都会序列化最新数据）
-const aiState = computed(() => makeSave())
-
-function onAiError(e: string) {
-  // 采用函数方式，避免模板类型检查对全局 alert 的报错
-  alert(e)
-}
-
-// 删除当前选中的元件以及所有关联导线
-function deleteSelected() {
-  const inst = selectedInst.value
-  if (!inst) return
-  // 删除连接到该实例的所有导线
-  for (let i = wires.length - 1; i >= 0; i--) {
-    const w = wires[i]
-    if (w.a.instId === inst.id || w.b.instId === inst.id) wires.splice(i, 1)
-  }
-  // 如果正在连线且端点来自该实例，取消预连
-  if (pendingEndpoint && pendingEndpoint.instId === inst.id) pendingEndpoint = null
-  // 如果正在拖拽该实例，停止拖拽
-  if (draggingId === inst.id) draggingId = null
-  // 删除实例本身
-  const idx = instances.findIndex(i => i.id === inst.id)
-  if (idx >= 0) instances.splice(idx, 1)
-  // 清理实时状态与选中
-  delete instLive[inst.id]
-  selectedId.value = null
-}
-</script>
-
 <template>
-  <div class="app" :style="{ '--ai-width': showAI ? '360px' : '0px' }">
-    <!-- 左侧元件面板 -->
-    <aside class="sidebar">
-      <h2>元件</h2>
-      <div class="palette">
-        <div v-for="item in palette" :key="item.key" class="palette-item" draggable="true"
-          @dragstart="(e) => onPaletteDragStart(e, item)" :title="item.name">
-          <img :src="item.url" :alt="item.name" draggable="false" />
-          <span class="label">{{ item.name }}</span>
-        </div>
-      </div>
-
-      <div class="file-actions">
-        <button class="btn" @click="onExportJSON">导出 JSON</button>
-        <button class="btn" @click="triggerImport">导入 JSON</button>
-        <input ref="importInputRef" type="file" accept="application/json,.json" class="hidden-file"
-          @change="onImportFileChange" />
-      </div>
-    </aside>
-
-    <!-- 画布视口（可平移、缩放、接收拖拽） -->
-    <main class="viewport" ref="viewportRef" @pointerdown="onViewportMouseDown"
-      @pointermove="(e) => { onViewportMouseMove(e); onViewportMouseMoveDrag(e); onViewportMouseMoveTrack(e); onViewportMouseMoveSlider(e) }"
-      @pointerup="() => { onViewportMouseUp(); onViewportMouseUpDrag(); onViewportMouseUpSlider() }"
-      @pointerleave="() => { onViewportMouseUp(); onViewportMouseUpDrag(); onViewportMouseUpSlider() }" @wheel="onWheel"
-      @dragover="onCanvasDragOver" @drop="onCanvasDrop" @click="clearSelection">
-      <!-- 世界平面：网格背景，应用 transform -->
-      <div class="world" :style="worldStyle" ref="worldRef">
-        <!-- 导线（SVG 覆盖层） -->
-        <svg class="wires" :width="state.worldSize" :height="state.worldSize" @mousemove="onViewportMouseMoveTrack">
-          <g>
-            <g v-for="w in wires" :key="w.id" class="wire-group" @click.stop="(e) => removeWire(w.id, e)">
-              <line class="wire-base" :x1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).x"
-                :y1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).y"
-                :x2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).x"
-                :y2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).y" stroke-linecap="round"
-                vector-effect="non-scaling-stroke" />
-            </g>
-
-            <!-- 预览线：当选中一个端点时，显示到鼠标或吸附端点的线 -->
-            <line v-if="pendingEndpoint"
-              :x1="getConnectionPointWorldPos(getInstance(pendingEndpoint.instId)!, pendingEndpoint.cpIndex).x"
-              :y1="getConnectionPointWorldPos(getInstance(pendingEndpoint.instId)!, pendingEndpoint.cpIndex).y"
-              :x2="previewTarget.x" :y2="previewTarget.y" class="wire preview" />
-          </g>
-        </svg>
-
-        <!-- 已放置的元件（可拖动） -->
-        <div v-for="inst in instances" :key="inst.id" class="inst" :class="{ selected: selectedId === inst.id }"
-          :style="{ left: inst.x + 'px', top: inst.y + 'px', transform: 'translate(-50%, -50%) rotate(' + (inst.rotation || 0) + 'deg)' }"
-          @pointerdown="(e) => onInstanceMouseDown(e, inst)" @click.stop="() => selectInstance(inst.id)"
-          :title="inst.key">
-          <div class="inst-box" :style="{ width: inst.size + 'px', height: inst.size + 'px' }">
-            <img
-              :src="(elements.find(e => e.key === inst.key)?.stateImages
-                ? (((inst.key === 'switch' ? (inst.props['state'] as string) : inst.state) === 'on')
-                  ? elements.find(e => e.key === inst.key)!.stateImages!.on
-                  : elements.find(e => e.key === inst.key)!.stateImages!.off)
-                : inst.url)"
-              :alt="inst.key" :draggable="false"
-              @contextmenu.prevent="() => {
-                const meta = elements.find(e => e.key === inst.key);
-                if (!meta?.stateImages) return;
-                if (inst.key === 'switch') {
-                  const cur = String(inst.props['state'] ?? 'off');
-                  inst.props['state'] = cur === 'on' ? 'off' : 'on'
-                } else {
-                  inst.state = inst.state === 'on' ? 'off' : 'on'
-                }
-              }" />
-
-            <!-- 滑动变阻器滑块 -->
-            <img v-if="inst.key === 'sliding_rheostat'" class="rheo-pin"
-              :src="(elements.find(e => e.key === inst.key) as any)?.pinUrl" alt="pin" draggable="false" :style="{
-                left: ((getRheostatPinOffset(inst) / inst.size) * 100) + '%',
-              }" @pointerdown.stop="() => { sliderDraggingId = inst.id }" />
-
-            <!-- 灯泡发散光线叠加层 -->
-            <svg v-if="inst.key === 'light_bulb'" class="bulb-glow" :width="inst.size" :height="inst.size"
-              :viewBox="'0 0 ' + inst.size + ' ' + inst.size" aria-hidden="true">
-              <g :opacity="getBulbGlow(inst).opacity">
-                <line v-for="k in getBulbGlow(inst).count" :key="k"
-                  :x1="(inst.size / 2) + Math.cos(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * 0.42)"
-                  :y1="(inst.size / 2) + Math.sin(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * 0.42)"
-                  :x2="(inst.size / 2) + Math.cos(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * (0.42 + getBulbGlow(inst).lenFrac))"
-                  :y2="(inst.size / 2) + Math.sin(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * (0.42 + getBulbGlow(inst).lenFrac))"
-                  stroke="#f59e0b" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
-              </g>
-            </svg>
-
-            <!-- meter 显示层 -->
-            <div v-if="inst.key === 'meter'" class="meter-label">
-              {{ meterText(inst) }}
-            </div>
-
-            <div v-if="inst.key === 'power_supply'" class="power-supply-label">
-              <span>{{ instLive[inst.id].v?.toFixed(2) }} V</span>
-              <span>{{ instLive[inst.id].i?.toFixed(2) }} A</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 连接点（显示为虚线圆圈） -->
-        <div v-for="inst in instances" :key="inst.id + '-cps'">
-          <template v-for="(cp, idx) in (elements.find(e => e.key === inst.key)?.connectionPoints || [])"
-            :key="inst.id + '-' + idx">
-            <div class="endpoint" :class="{
-              active: pendingEndpoint && pendingEndpoint.instId === inst.id && pendingEndpoint.cpIndex === idx,
-              hover: isNearest(inst.id, idx),
-              connected: hoveredEndpoint && isConnectedEndpoint(inst.id, idx)
-            }" :style="{
-              left: getConnectionPointWorldPos(inst, idx).x + 'px',
-              top: getConnectionPointWorldPos(inst, idx).y + 'px'
-            }" @click.stop="(e) => onEndpointClick(inst.id, idx, e)"
-              @pointerenter="() => { hoveredEndpoint = { instId: inst.id, cpIndex: idx } }"
-              @pointerleave="() => { if (hoveredEndpoint && hoveredEndpoint.instId === inst.id && hoveredEndpoint.cpIndex === idx) hoveredEndpoint = null }"
-              :title="cp.name || ('P' + (idx + 1))"></div>
-          </template>
-        </div>
-      </div>
-    </main>
-
-    <!-- 右侧 AI 助手面板 -->
-    <aside v-if="showAI" class="ai-aside">
-      <AIAssistant :state="aiState" @error="onAiError" @close="showAI = false" />
-    </aside>
-    <button v-else class="ai-reopen" title="打开 AI 助手" @click="showAI = true">◀</button>
-
-    <!-- 底部属性面板：编辑选中元件的业务属性（非尺寸） -->
-    <footer v-if="selectedInst" class="bottom-panel" :style="{ right: showAI ? '360px' : '0' }">
-      <div class="panel-inner">
-        <div class="prop-title">{{ selectedInst.key }} 属性</div>
-        <!-- 预设按钮区域：显示当前元件的预设，点击一键应用 -->
-        <div v-if="selectedMeta?.preset?.length" class="presets">
-          <span class="preset-label">预设</span>
-          <button v-for="p in selectedMeta!.preset" :key="p.name" class="preset-btn" @click.stop="applyPreset(p)">{{
-            p.name
-            }}</button>
-        </div>
-        <div class="props">
-          <!-- 实时电学量 -->
-          <label class="prop-row">
-            <span class="label">电压</span>
-            <span>{{ formatValue(instLive[selectedInst!.id]?.v ?? null, 'V') }}</span>
-          </label>
-          <label class="prop-row">
-            <span class="label">电流</span>
-            <span>{{ formatValue(instLive[selectedInst!.id]?.i ?? null, 'A') }}</span>
-          </label>
-          <!-- 旋转控制 -->
-          <label class="prop-row">
-            <span class="label">旋转</span>
-            <input type="range" min="-180" max="180" step="1" v-model.number="selectedInst!.rotation" />
-            <input type="number" class="deg-input" step="1" v-model.number="selectedInst!.rotation" />
-            <span class="unit">deg</span>
-            <button class="rot-btn"
-              @click="selectedInst!.rotation = ((selectedInst!.rotation || 0) - 45 + 360) % 360">-45°</button>
-            <button class="rot-btn"
-              @click="selectedInst!.rotation = ((selectedInst!.rotation || 0) + 45) % 360">+45°</button>
-          </label>
-          <template v-for="schema in (elements.find(e => e.key === selectedInst!.key)?.propertySchemas || [])"
-            :key="schema.key">
-            <label class="prop-row">
-              <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" />
-              <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 class="panel-actions">
-          <button class="danger-btn" title="删除此元件及其所有连接的导线" @click="deleteSelected">删除元件</button>
-        </div>
-      </div>
-    </footer>
-  </div>
-
-</template>
-
-<style scoped>
-.app {
-  display: grid;
-  grid-template-columns: 140px 1fr var(--ai-width, 360px);
-  /* 左栏 / 画布 / AI 辅助 */
-  grid-template-rows: 100vh;
-  overflow: hidden;
-  touch-action: none;
-  user-select: none;
-}
-
-.sidebar {
-  border-right: 1px solid #e5e7eb;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  background: #fafafa;
-}
-
-.file-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.file-actions .btn {
-  padding: 6px 10px;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  background: #fff;
-  color: #111827;
-  cursor: pointer;
-}
-
-.file-actions .btn:hover {
-  background: #f3f4f6;
-}
-
-.hidden-file {
-  display: none;
-}
-
-.sidebar h2 {
-  margin: 0 0 8px 0;
-  font-size: 16px;
-  color: #111827;
-}
-
-.palette {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: 10px;
-  overflow: auto;
-}
-
-.palette-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 8px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: white;
-  cursor: grab;
-  user-select: none;
-}
-
-.palette-item:active {
-  cursor: grabbing;
-}
-
-.palette-item img {
-  width: 56px;
-  height: 56px;
-  object-fit: contain;
-}
-
-.palette-item .label {
-  font-size: 12px;
-  color: #374151;
-}
-
-.inspector {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #e5e7eb;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.inspector h3 {
-  margin: 0;
-  font-size: 14px;
-  color: #111827;
-}
-
-.inspector .row {
-  display: grid;
-  grid-template-columns: 60px 1fr auto;
-  align-items: center;
-  gap: 8px;
-}
-
-.inspector .row label {
-  color: #4b5563;
-  font-size: 12px;
-}
-
-.inspector .row .num {
-  width: 70px;
-}
-
-.viewport {
-  position: relative;
-  overflow: hidden;
-  background: #fff;
-}
-
-/* 右侧 AI 面板容器 */
-.ai-aside {
-  border-left: 1px solid #e5e7eb;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* 右侧重新打开箭头按钮（在隐藏时显示） */
-.ai-reopen {
-  position: fixed;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  padding: 8px 10px;
-  border: 1px solid #e5e7eb;
-  border-radius: 999px 0 0 999px;
-  background: #fff;
-  color: #111827;
-  cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.ai-reopen:hover {
-  background: #f3f4f6;
-}
-
-.world {
-  position: absolute;
-  left: 0;
-  top: 0;
-  /* 网格背景（细线 + 粗线，每 5 格一条） */
-  background-image:
-    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
-    linear-gradient(to right, rgba(0, 0, 0, 0.09) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(0, 0, 0, 0.09) 1px, transparent 1px);
-  background-size:
-    var(--grid) 1px,
-    1px var(--grid),
-    var(--grid5) 1px,
-    1px var(--grid5);
-  background-position: 0 0, 0 0, 0 0, 0 0;
-}
-
-.wires {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-}
-
-/* 新增：分层导线样式 */
-.wire-group {
-  cursor: pointer;
-}
-
-.wire-base {
-  stroke: #111827;
-  stroke-width: 3;
-  opacity: 0.85;
-}
-
-.wire-highlight {
-  stroke-width: 2;
-  mix-blend-mode: multiply;
-}
-
-/* 悬停时微弱高亮 */
-.wire-group:hover .wire-base {
-  opacity: 0.95;
-}
-
-.wire-group:hover .wire-highlight {
-  filter: brightness(1.06);
-}
-
-/* 放大可点击区域（不可见）以提升命中，通过 pointer-events 控制组级点击 */
-.wire-hit {
-  stroke: transparent;
-  stroke-width: 10;
-}
-
-/* 预览线保留原 class 名，便于最小改动 */
-.wire {
-  stroke: #111827;
-  stroke-width: 2;
-}
-
-.wire.preview {
-  stroke: #3b82f6;
-  stroke-dasharray: 10 6;
-  animation: dash-move 1.2s linear infinite;
-  opacity: 0.9;
-}
-
-@keyframes dash-move {
-  from {
-    stroke-dashoffset: 0;
-  }
-
-  to {
-    stroke-dashoffset: -32;
-  }
-}
-
-.inst {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  cursor: move;
-  user-select: none;
-  z-index: 2;
-}
-
-.inst .inst-box {
-  position: relative;
-}
-
-.inst img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  image-rendering: -webkit-optimize-contrast;
-}
-
-.rheo-pin {
-  position: absolute;
-  z-index: 3;
-  cursor: ew-resize;
-  pointer-events: auto;
-  width: 15% !important;
-  height: auto !important;
-  top: 25.5% !important;
-  transform: translateX(-50%);
-}
-
-.bulb-glow {
-  position: absolute;
-  left: 0;
-  top: -20%;
-  pointer-events: none;
-  /* 轻微发光的滤镜 */
-  filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.6));
-}
-
-.inst.selected img {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
-  border-radius: 6px;
-}
-
-.meter-label {
-  position: absolute;
-  right: 25%;
-  top: 20%;
-  color: #111827;
-  font-family: "meter-font";
-  font-size: 20px;
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-.power-supply-label {
-  position: absolute;
-  right: 44%;
-  height: 38%;
-  top: 17%;
-  color: #62D3EF;
-  text-shadow: 0 0 2px #62D3EF, 0 0 6px #62d3ef44;
-  font-family: "meter-font";
-  font-size: 22px;
-  white-space: nowrap;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: space-between;
-}
-
-.endpoint {
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  transform: translate(-50%, -50%);
-  border: 2px dashed #3b82f6;
-  border-radius: 50%;
-  background: #ffffffcc;
-  z-index: 3;
-  cursor: crosshair;
-}
-
-.endpoint.active {
-  background: #dbeafe;
-  border-color: #2563eb;
-}
-
-.endpoint.hover {
-  transform: translate(-50%, -50%) scale(1.25);
-}
-
-/* 连通端点高亮：当某端点悬停时，其所有通过导线连通的端点以强调色显示 */
-.endpoint.connected {
-  border-color: #10b981;
-  /* teal-500 */
-  background: #ecfdf5;
-  /* teal-50 */
-  transform: translate(-50%, -50%) scale(1.25);
-}
-
-.bottom-panel {
-  position: fixed;
-  left: 140px;
-  /* 与左侧栏对齐 */
-  right: 360px;
-  /* 默认让出 AI 侧栏宽度，实际由内联样式覆盖 */
-  bottom: 0;
-  background: #f9fafb;
-  border-top: 1px solid #e5e7eb;
-}
-
-.bottom-panel .panel-inner {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 10px 16px;
-}
-
-/* 右侧操作区 */
-.panel-actions {
-  margin-left: auto;
-}
-
-.danger-btn {
-  padding: 6px 10px;
-  border: 1px solid #fecaca;
-  border-radius: 6px;
-  background: #fee2e2;
-  color: #b91c1c;
-  cursor: pointer;
-  width: max-content;
-}
-
-.danger-btn:hover {
-  background: #fecaca;
-  border-color: #ef4444;
-}
-
-/* 预设区域样式 */
-.presets {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.preset-label {
-  color: #4b5563;
-  font-size: 12px;
-}
-
-.preset-btn {
-  padding: 4px 8px;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  background: #fff;
-  color: #111827;
-  cursor: pointer;
-}
-
-.preset-btn:hover {
-  background: #f3f4f6;
-}
-
-.bottom-panel .props {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.prop-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.prop-row .label {
-  color: #374151;
-  font-size: 12px;
-}
-
-.prop-row .unit {
-  color: #6b7280;
-  font-size: 12px;
-}
-
-/* 旋转控制样式 */
-.deg-input {
-  width: 70px;
-}
-
-.rot-btn {
-  padding: 4px 8px;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  background: #fff;
-  color: #111827;
-  cursor: pointer;
-}
-
-.rot-btn:hover {
-  background: #f3f4f6;
-}
-</style>
+    <RouterView />
+</template>
\ No newline at end of file
diff --git a/src/circuit-ele/resistor.png b/src/circuit-ele/resistor.png
deleted file mode 100644
index b5e4b5b..0000000
Binary files a/src/circuit-ele/resistor.png and /dev/null differ
diff --git a/src/main.ts b/src/main.ts
index fe5bae3..8345d45 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,19 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
+import { createRouter, createWebHistory } from 'vue-router'
 
-createApp(App).mount('#app')
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: () => import('./views/Home.vue')
+        }, {
+            path: '/lab',
+            component: () => import('./views/VirtualLab.vue')
+        }
+    ]
+})
+
+createApp(App).use(router).mount('#app')
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..63cf83f
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>Home</div>
+</template>
\ No newline at end of file
diff --git a/src/views/VirtualLab.vue b/src/views/VirtualLab.vue
new file mode 100644
index 0000000..539df35
--- /dev/null
+++ b/src/views/VirtualLab.vue
@@ -0,0 +1,1727 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
+import AIAssistant from '../components/AIAssistant.vue'
+import { elements, type CircuitElement, type Preset } from './elements'
+import { formatValue } from './utils'
+
+// 1) 左侧面板元件清单（显式导入）
+type PaletteItem = CircuitElement
+const palette: PaletteItem[] = [...elements]
+
+// 2) 画布世界状态（平移/缩放）
+const viewportRef = ref<HTMLDivElement | null>(null)
+const worldRef = ref<HTMLDivElement | null>(null)
+
+// 右侧 AI 面板显示开关
+const showAI = ref(true)
+
+const state = reactive({
+  scale: 1,
+  minScale: 0.2,
+  maxScale: 3,
+  translateX: 0,
+  translateY: 0,
+  worldSize: 5000, // 世界为正方形 5000x5000，中心在 2500,2500
+  gridSize: 40, // 网格间距（未缩放前）
+})
+
+const worldStyle = computed(() => ({
+  width: state.worldSize + 'px',
+  height: state.worldSize + 'px',
+  transform: `translate(${state.translateX}px, ${state.translateY}px) scale(${state.scale})`,
+  transformOrigin: '0 0',
+  // 提供给 CSS 的网格尺寸变量
+  '--grid': state.gridSize + 'px',
+  '--grid5': state.gridSize * 5 + 'px',
+}))
+
+// 3) 已放置的元件
+type Instance = {
+  id: string
+  key: string // 文件名键
+  url: string
+  x: number
+  y: number
+  size: number
+  rotation: number // 角度，单位：deg
+  props: Record<string, number | string>
+  state?: 'on' | 'off'
+}
+
+let idSeq = 0
+const instances = reactive<Instance[]>([])
+
+// 连接点与导线
+type EndpointRef = { instId: string; cpIndex: number }
+type Wire = { id: string; a: EndpointRef; b: EndpointRef }
+let wireSeq = 0
+const wires = reactive<Wire[]>([])
+let pendingEndpoint: EndpointRef | null = null
+
+// 选中与属性编辑
+const selectedId = ref<string | null>(null)
+const selectedInst = computed(() => instances.find(i => i.id === selectedId.value) || null)
+function selectInstance(id: string) { selectedId.value = id }
+function clearSelection() { selectedId.value = null }
+
+// 选中元件的元数据（用于读取预设清单）
+const selectedMeta = computed(() => {
+  const inst = selectedInst.value
+  if (!inst) return null
+  return elements.find(e => e.key === inst.key) || null
+})
+
+// 应用预设：将预设中的属性值写到实例 props
+function applyPreset(p: Preset) {
+  const inst = selectedInst.value
+  if (!inst) return
+  const values = p?.propertyValues || {}
+  for (const [k, v] of Object.entries(values)) {
+    inst.props[k] = v as any
+  }
+}
+
+// 4) 视口 <-> 世界 坐标转换
+function clientToWorld(clientX: number, clientY: number) {
+  const viewport = viewportRef.value!
+  const rect = viewport.getBoundingClientRect()
+  const x = (clientX - rect.left - state.translateX) / state.scale
+  const y = (clientY - rect.top - state.translateY) / state.scale
+  return { x, y }
+}
+
+function zoomAt(clientX: number, clientY: number, deltaY: number) {
+  const { x: wx, y: wy } = clientToWorld(clientX, clientY)
+  const zoomFactor = Math.exp(-deltaY * 0.0015) // 平滑缩放
+  const next = Math.min(state.maxScale, Math.max(state.minScale, state.scale * zoomFactor))
+  const prev = state.scale
+  if (next === prev) return
+  // 调整平移以保持光标下的世界点不变
+  state.translateX = clientX - viewportRef.value!.getBoundingClientRect().left - wx * next
+  state.translateY = clientY - viewportRef.value!.getBoundingClientRect().top - wy * next
+  state.scale = next
+}
+
+// 5) 拖拽放置（来自左侧面板）
+const DND_MIME = 'application/x-circuit-element'
+
+function onPaletteDragStart(e: DragEvent, item: PaletteItem) {
+  if (!e.dataTransfer) return
+  e.dataTransfer.setData(DND_MIME, item.key)
+  e.dataTransfer.setData('text/plain', item.key)
+  e.dataTransfer.effectAllowed = 'copy'
+}
+
+function onCanvasDragOver(e: DragEvent) {
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+}
+
+function onCanvasDrop(e: DragEvent) {
+  e.preventDefault()
+  const key = e.dataTransfer?.getData(DND_MIME) || e.dataTransfer?.getData('text/plain')
+  if (!key) return
+  const item = palette.find(p => p.key === key)
+  if (!item) return
+  const { x, y } = clientToWorld(e.clientX, e.clientY)
+  const defSize = item.defaultSize ?? 64
+  const props: Record<string, number | string> = {}
+    ; (item.propertySchemas || []).forEach((p) => { props[p.key] = p.default })
+  // 通用：为所有元件注入“隐藏属性”控制，默认关闭
+  if (props['hideProps'] === undefined) props['hideProps'] = 'off'
+  const inst: Instance = { id: String(++idSeq), key: item.key, url: item.url, x: x, y: y, size: defSize, rotation: 0, props }
+  // 仍保留 state 字段用于灯泡等展示，但对于开关用 props.state 作为真值
+  if (item.stateImages) inst.state = String(props['state'] ?? 'off') as any
+  instances.push(inst)
+}
+
+// 6) 背景平移
+let isPanning = false
+let panStart = { x: 0, y: 0 }
+let panOrigin = { x: 0, y: 0 }
+
+function onViewportMouseDown(e: MouseEvent) {
+  // 只在点到空白区域时平移（元素自身会阻止冒泡）
+  if (e.button !== 0) return
+  isPanning = true
+  panStart = { x: e.clientX, y: e.clientY }
+  panOrigin = { x: state.translateX, y: state.translateY }
+}
+
+function onViewportMouseMove(e: MouseEvent) {
+  if (!isPanning) return
+  const dx = e.clientX - panStart.x
+  const dy = e.clientY - panStart.y
+  state.translateX = panOrigin.x + dx
+  state.translateY = panOrigin.y + dy
+}
+
+function onViewportMouseUp() {
+  isPanning = false
+}
+
+function onWheel(e: WheelEvent) {
+  // 触控板垂直滚轮缩放，按住 Ctrl 也缩放
+  if (e.ctrlKey || Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+    e.preventDefault()
+    zoomAt(e.clientX, e.clientY, e.deltaY)
+  }
+}
+
+// 7) 画布内元素拖动
+let draggingId: string | null = null
+let dragOffset = { x: 0, y: 0 } // 元素内相对偏移（世界坐标）
+const mouseWorld = reactive({ x: 0, y: 0 })
+// 滑动变阻器滑块拖动状态
+let sliderDraggingId: string | null = null
+
+function onInstanceMouseDown(e: MouseEvent, inst: Instance) {
+  if (e.button !== 0) return
+  e.stopPropagation()
+  draggingId = inst.id
+  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
+  dragOffset = { x: wx - inst.x, y: wy - inst.y }
+}
+
+function onViewportMouseMoveDrag(e: MouseEvent) {
+  if (!draggingId) return
+  const inst = instances.find(i => i.id === draggingId)
+  if (!inst) return
+  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
+  inst.x = wx - dragOffset.x
+  inst.y = wy - dragOffset.y
+}
+
+function onViewportMouseUpDrag() {
+  draggingId = null
+}
+
+// 将世界坐标转换为实例局部坐标（考虑旋转）
+function worldToLocal(inst: Instance, wx: number, wy: number) {
+  const dx = wx - inst.x
+  const dy = wy - inst.y
+  const rad = (inst.rotation || 0) * Math.PI / 180
+  const cos = Math.cos(rad)
+  const sin = Math.sin(rad)
+  // 逆旋转
+  const lx = dx * cos + dy * sin
+  const ly = -dx * sin + dy * cos
+  return { lx, ly }
+}
+
+function onViewportMouseMoveSlider(e: MouseEvent) {
+  if (!sliderDraggingId) return
+  const inst = instances.find(i => i.id === sliderDraggingId)
+  if (!inst) return
+  if (inst.key !== 'sliding_rheostat') return
+  const { x: wx, y: wy } = clientToWorld(e.clientX, e.clientY)
+  const { lx } = worldToLocal(inst, wx, wy)
+  // 滑道范围（与 getRheostatPinOffset 对齐）
+  const leftFrac = 0.25, rightFrac = 0.75
+  const t = (lx / inst.size + 0.5 - leftFrac) / (rightFrac - leftFrac)
+  const pos = Math.max(0, Math.min(1, t))
+  inst.props['position'] = pos
+}
+
+function onViewportMouseUpSlider() {
+  sliderDraggingId = null
+}
+
+// 连接点点击逻辑
+function onEndpointClick(instId: string, cpIndex: number, e: MouseEvent) {
+  e.stopPropagation()
+  const ep = { instId, cpIndex }
+  if (!pendingEndpoint) {
+    pendingEndpoint = ep
+    return
+  }
+  // 不允许同一端点两次
+  if (pendingEndpoint.instId === instId && pendingEndpoint.cpIndex === cpIndex) {
+    pendingEndpoint = null
+    return
+  }
+  // 创建导线
+  wires.push({ id: String(++wireSeq), a: pendingEndpoint, b: ep })
+  pendingEndpoint = null
+}
+
+function removeWire(id: string, e?: MouseEvent) {
+  if (e) e.stopPropagation()
+  const idx = wires.findIndex(w => w.id === id)
+  if (idx >= 0) wires.splice(idx, 1)
+}
+
+// 工具函数：获取实例、连接点坐标（世界坐标）
+function getInstance(instId: string) {
+  return instances.find(i => i.id === instId)
+}
+
+function getConnectionPointWorldPos(inst: Instance, cpIndex: number) {
+  const elem = elements.find(e => e.key === inst.key)
+  const cp = elem?.connectionPoints[cpIndex]
+  if (!cp) return { x: inst.x, y: inst.y }
+  const offsetX = (cp.x - 0.5) * inst.size
+  const offsetY = (cp.y - 0.5) * inst.size
+  // 旋转偏移
+  const rad = (inst.rotation || 0) * Math.PI / 180
+  const cos = Math.cos(rad)
+  const sin = Math.sin(rad)
+  const rx = offsetX * cos - offsetY * sin
+  const ry = offsetX * sin + offsetY * cos
+  return { x: inst.x + rx, y: inst.y + ry }
+}
+
+function onViewportMouseMoveTrack(e: MouseEvent) {
+  const { x, y } = clientToWorld(e.clientX, e.clientY)
+  mouseWorld.x = x
+  mouseWorld.y = y
+}
+
+// 命中测试：鼠标是否靠近某连接点（返回最近的端点）
+const SNAP_RADIUS = 12
+function findClosestEndpoint() {
+  let best: { instId: string; cpIndex: number; dist: number } | null = null
+  for (const inst of instances) {
+    const elem = elements.find(e => e.key === inst.key)
+    const cps = elem?.connectionPoints || []
+    cps.forEach((_, idx) => {
+      const p = getConnectionPointWorldPos(inst, idx)
+      const dx = p.x - mouseWorld.x
+      const dy = p.y - mouseWorld.y
+      const d = Math.hypot(dx, dy)
+      if (d <= SNAP_RADIUS && (!best || d < best.dist)) best = { instId: inst.id, cpIndex: idx, dist: d }
+    })
+  }
+  return best
+}
+
+type Nearest = { instId: string; cpIndex: number; dist: number } | null
+const nearestEndpoint = computed<Nearest>(() => findClosestEndpoint())
+const previewTarget = computed(() => {
+  const n = nearestEndpoint.value
+  // 若靠近端点，且不是与 pendingEndpoint 相同的端点，则吸附到该端点；否则跟随鼠标
+  if (n && !(pendingEndpoint && n.instId === pendingEndpoint.instId && n.cpIndex === pendingEndpoint.cpIndex)) {
+    const inst = getInstance(n.instId)!
+    return getConnectionPointWorldPos(inst, n.cpIndex)
+  }
+  return { x: mouseWorld.x, y: mouseWorld.y }
+})
+
+function isNearest(instId: string, cpIndex: number) {
+  const n = nearestEndpoint.value
+  return !!n && n.instId === instId && n.cpIndex === cpIndex
+}
+
+// 悬停端点与其连通集高亮
+const hoveredEndpoint = ref<EndpointRef | null>(null)
+const connectedEndpointSet = computed<Set<string>>(() => {
+  const set = new Set<string>()
+  const start = hoveredEndpoint.value
+  if (!start) return set
+  // 构建无向邻接表（仅基于导线）
+  const key = (ep: EndpointRef) => `${ep.instId}:${ep.cpIndex}`
+  const adj = new Map<string, string[]>()
+  const add = (a: EndpointRef, b: EndpointRef) => {
+    const ka = key(a), kb = key(b)
+    if (!adj.has(ka)) adj.set(ka, [])
+    if (!adj.has(kb)) adj.set(kb, [])
+    adj.get(ka)!.push(kb)
+    adj.get(kb)!.push(ka)
+  }
+  for (const w of wires) add(w.a, w.b)
+  // BFS/DFS 查找连通端点
+  const startKey = key(start)
+  const stack = [startKey]
+  set.add(startKey)
+  while (stack.length) {
+    const cur = stack.pop()!
+    for (const nxt of adj.get(cur) || []) {
+      if (!set.has(nxt)) { set.add(nxt); stack.push(nxt) }
+    }
+  }
+  return set
+})
+function isConnectedEndpoint(instId: string, cpIndex: number) {
+  return connectedEndpointSet.value.has(`${instId}:${cpIndex}`)
+}
+
+// 7.5) 直流电路求解（MNA）
+// - 支持：电压源(battery)、电阻(resistor/light_bulb/meter)、开关(ON=0V源，OFF=断开)、电感(DC=0V源)、电容(DC=断开)
+// - 结果：每个实例的端口电压差与电流（方向：从连接点0 -> 连接点1 为正）
+
+type InstLive = {
+  v: number | null // 端口电压 v = V(p0) - V(p1) 或电压源设定值
+  i: number | null // 支路电流，正方向 p0->p1
+  node0?: string
+  node1?: string
+}
+
+const instLive = reactive<Record<string, InstLive>>({})
+
+function getElemMeta(inst: Instance) {
+  return elements.find(e => e.key === inst.key)
+}
+
+// 针对滑动变阻器：计算滑块的屏幕内偏移（未考虑旋转，先期简化为只支持0°/180°朝向的水平滑动）
+function getRheostatPinOffset(inst: Instance) {
+  const pos = Math.max(0, Math.min(1, Number(inst.props?.['position'] ?? 0.5)))
+
+  const leftFrac = 0.25, rightFrac = 0.75
+  const cx = (leftFrac + (rightFrac - leftFrac) * pos) * inst.size
+  return cx
+}
+
+// 并查集用于将端点连成节点
+class DSU {
+  parent = new Map<string, string>()
+  find(x: string): string {
+    let p = this.parent.get(x) || x
+    if (p !== x) {
+      p = this.find(p)
+      this.parent.set(x, p)
+    } else {
+      this.parent.set(x, x)
+    }
+    return p
+  }
+  union(a: string, b: string) {
+    const ra = this.find(a)
+    const rb = this.find(b)
+    if (ra !== rb) this.parent.set(ra, rb)
+  }
+}
+
+function safeNum(v: any, def = 0) {
+  const n = typeof v === 'number' ? v : Number(v)
+  return Number.isFinite(n) ? n : def
+}
+
+type BuiltNet = {
+  nodeIds: string[] // 所有节点根ID
+  ground: string | null
+  // 器件分类
+  resistors: { inst: Instance; nPlus: string; nMinus: string; R: number }[]
+  vsrcs: { inst: Instance; nPlus: string; nMinus: string; V: number }[]
+}
+
+function buildNet(): BuiltNet {
+  const dsu = new DSU()
+  const termId = (instId: string, cp: number) => `${instId}:${cp}`
+
+  // 先把显式导线合并
+  for (const w of wires) {
+    dsu.union(termId(w.a.instId, w.a.cpIndex), termId(w.b.instId, w.b.cpIndex))
+  }
+
+  // 将“短路类器件”作为0V电压源（开关ON、DC电感）
+  // OFF开关/电容视为断开，不合并
+
+  // 收集所有端点以便形成节点清单
+  const allTerms: string[] = []
+  for (const inst of instances) {
+    const meta = getElemMeta(inst)
+    const cps = meta?.connectionPoints?.length || 0
+    for (let i = 0; i < cps; i++) allTerms.push(termId(inst.id, i))
+  }
+
+  // 形成节点集合
+  const roots = new Set<string>()
+  for (const t of allTerms) roots.add(dsu.find(t))
+  // 仅基于真实端点选择参考地
+  const nodeIds = Array.from(roots)
+  const ground = nodeIds.length ? nodeIds[0] : null // 任取一个参考地
+
+  // 为后续引入的“内部节点”（例如串联内阻的中间点）保留集合，避免重复
+  const nodeSet = new Set(nodeIds)
+  const addNode = (nid: string) => {
+    if (!nodeSet.has(nid)) { nodeSet.add(nid); nodeIds.push(nid) }
+  }
+
+  // 分类器件
+  const resistors: BuiltNet['resistors'] = []
+  const vsrcs: BuiltNet['vsrcs'] = []
+
+  const getNode = (inst: Instance, cp: number) => dsu.find(termId(inst.id, cp))
+
+  for (const inst of instances) {
+    const meta = getElemMeta(inst)
+    if (!meta || meta.connectionPoints.length < 2) continue
+    const n0 = getNode(inst, 0)
+    const n1 = getNode(inst, 1)
+
+    const key = meta.key
+    if (key === 'battery') {
+      const V = safeNum(inst.props?.['voltage'], 0)
+      const Rint = safeNum(inst.props?.['internalResistance'], 0.1)
+      // 用内部节点将电压源与内阻串联：n0 --[V]--> nInt --[Rint]--> n1
+      const nInt = `${inst.id}:int`
+      addNode(nInt)
+      vsrcs.push({ inst, nPlus: n0, nMinus: nInt, V })
+      resistors.push({ inst, nPlus: nInt, nMinus: n1, R: Math.max(1e-9, Rint) })
+    } else if (key === 'power_supply') {
+      const V = safeNum(inst.props?.['voltage'], 0)
+      const Rint = safeNum(inst.props?.['internalResistance'], 0.1)
+      // 用内部节点将电压源与内阻串联：n0 --[V]--> nInt --[Rint]--> n1
+      const nInt = `${inst.id}:int`
+      addNode(nInt)
+      vsrcs.push({ inst, nPlus: n0, nMinus: nInt, V })
+      resistors.push({ inst, nPlus: nInt, nMinus: n1, R: Math.max(1e-9, Rint) })
+    } else if (key === 'switch') {
+      const sw = (inst.props?.['state'] as any) === 'on' || inst.state === 'on'
+      if (sw) {
+        vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
+      }
+      // off = open, 忽略
+    } else if (key === 'inductor') {
+      // DC 等效 0V 源
+      vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
+    } else if (key === 'capacitor') {
+      // DC 断开
+      // 忽略
+    } else if (key === 'sliding_rheostat') {
+      // 四脚：A(0) B(1) C(2) D(3)
+      const n2 = getNode(inst, 2)
+      const n3 = getNode(inst, 3)
+      // AB 直通：用 0V 电压源建模
+      vsrcs.push({ inst, nPlus: n0, nMinus: n1, V: 0 })
+      // 变量电阻：AB->C、AB->D 与滑块位置有关
+      const Rmax = Math.max(1e-6, safeNum(inst.props?.['maxResistance'], 100))
+      const pos = Math.max(0, Math.min(1, safeNum(inst.props?.['position'], 0.5)))
+      const Rac = Math.max(1e-6, Rmax * pos)
+      const Rad = Math.max(1e-6, Rmax * (1 - pos))
+      // 将 AB 汇成一个等效节点（任选 A 侧 n0）到 C/D
+      resistors.push({ inst, nPlus: n0, nMinus: n2, R: Rac })
+      resistors.push({ inst, nPlus: n0, nMinus: n3, R: Rad })
+      // CD 固定为最大电阻
+      resistors.push({ inst, nPlus: n2, nMinus: n3, R: Rmax })
+    } else if (key === 'resistor' || key === 'light_bulb' || key === 'meter' || key === 'resistance_box') {
+      const R = Math.max(1e-6, safeNum(inst.props?.['resistance'], 0))
+      resistors.push({ inst, nPlus: n0, nMinus: n1, R })
+    } else {
+      // 其他未知器件，按开路处理
+    }
+  }
+
+  return { nodeIds, ground, resistors, vsrcs }
+}
+
+function solveMNA() {
+  const net = buildNet()
+  // 清空上一次结果
+  for (const inst of instances) instLive[inst.id] = { v: null, i: null }
+
+  if (!net.ground) return { ok: false }
+
+  // 建索引（去掉参考地）
+  const nodeIndex = new Map<string, number>()
+  let idx = 0
+  for (const nid of net.nodeIds) {
+    if (nid === net.ground) continue
+    nodeIndex.set(nid, idx++)
+  }
+  const n = nodeIndex.size
+  const m = net.vsrcs.length
+  const N = n + m
+  if (N === 0) return { ok: true }
+
+  // 构造 A x = z
+  const A: number[][] = Array.from({ length: N }, () => Array(N).fill(0))
+  const z: number[] = Array(N).fill(0)
+  const gmin = 1e-12
+
+  const mapNi = (nid: string) => (nid === net.ground ? -1 : (nodeIndex.get(nid) ?? -1))
+
+  // 电导矩阵 G（顶部 n×n）
+  for (const r of net.resistors) {
+    const a = mapNi(r.nPlus)
+    const b = mapNi(r.nMinus)
+    const g = 1 / r.R
+    if (a >= 0) A[a][a] += g + gmin
+    if (b >= 0) A[b][b] += g + gmin
+    if (a >= 0 && b >= 0) {
+      A[a][b] -= g
+      A[b][a] -= g
+    }
+  }
+  // 稳定性：对所有节点加 gmin 到地
+  for (let i = 0; i < n; i++) A[i][i] += gmin
+
+  // 电压源耦合矩阵 B、C
+  // B: (n×m)，位于 A 的右上；C = B^T（m×n），位于 A 的左下
+  net.vsrcs.forEach((vs, k) => {
+    const p = mapNi(vs.nPlus)
+    const q = mapNi(vs.nMinus)
+    const row = n + k // 对应电流未知量的位置
+    z[row] = vs.V
+    if (p >= 0) { A[p][n + k] += 1; A[row][p] += 1 }
+    if (q >= 0) { A[q][n + k] -= 1; A[row][q] -= 1 }
+    // D 为 0，已初始化
+  })
+
+  // 求解线性方程
+  const x = gaussianSolve(A, z)
+  if (!x) return { ok: false }
+
+  // 组装节点电压
+  const Vn = (nid: string) => {
+    const i = mapNi(nid)
+    return i >= 0 ? x[i] : 0 // 地节点 0V
+  }
+
+  // 写回每个器件的 v / i
+  for (const r of net.resistors) {
+    const vp = Vn(r.nPlus)
+    const vn = Vn(r.nMinus)
+    const v = vp - vn
+    const i = v / r.R
+    instLive[r.inst.id] = { v, i, node0: r.nPlus, node1: r.nMinus }
+  }
+  net.vsrcs.forEach((vs, k) => {
+    const vp = Vn(vs.nPlus)
+    const vn = Vn(vs.nMinus)
+    const v = vp - vn // 由解出的节点电压
+    const i = x[n + k] // 电压源支路电流，方向 nPlus -> nMinus
+    instLive[vs.inst.id] = { v, i, node0: vs.nPlus, node1: vs.nMinus }
+  })
+
+  // 对于未分类（断开）器件，保持 null
+
+  // 根据计算电流，自动切换需要按电流显示状态的元件（如灯泡）
+  const CURRENT_ON_THRESHOLD = 0.1 // A，即 100 mA
+  for (const inst of instances) {
+    if (inst.key === 'light_bulb') {
+      const live = instLive[inst.id]
+      const iabs = live && typeof live.i === 'number' ? Math.abs(live.i) : 0
+      if (iabs > CURRENT_ON_THRESHOLD) inst.state = 'on'
+      else inst.state = 'off'
+    }
+  }
+
+  return { ok: true }
+}
+
+// 简单高斯消元（带部分选主元）
+function gaussianSolve(A: number[][], b: number[]): number[] | null {
+  const n = b.length
+  // 扩展矩阵
+  for (let i = 0; i < n; i++) A[i].push(b[i])
+
+  for (let col = 0, row = 0; col < n && row < n; col++, row++) {
+    // 选主元
+    let piv = row
+    let maxAbs = Math.abs(A[row][col])
+    for (let r = row + 1; r < n; r++) {
+      const v = Math.abs(A[r][col])
+      if (v > maxAbs) { maxAbs = v; piv = r }
+    }
+    if (maxAbs < 1e-14) {
+      // 退化，放弃
+      return null
+    }
+    if (piv !== row) { const tmp = A[piv]; A[piv] = A[row]; A[row] = tmp }
+
+    // 归一化
+    const div = A[row][col]
+    for (let c = col; c <= n; c++) A[row][c] /= div
+
+    // 消元
+    for (let r = 0; r < n; r++) {
+      if (r === row) continue
+      const factor = A[r][col]
+      if (factor === 0) continue
+      for (let c = col; c <= n; c++) A[r][c] -= factor * A[row][c]
+    }
+  }
+
+  // 回读解
+  const x = new Array(n).fill(0)
+  for (let i = 0; i < n; i++) x[i] = A[i][n]
+  return x
+}
+
+// 绑定求解到响应式数据
+watchEffect(() => { solveMNA() })
+
+
+
+function meterText(inst: Instance) {
+  const live = instLive[inst.id]
+  const i = live?.i ?? 0
+  const r = inst.props?.['resistance'] ? safeNum(inst.props?.['resistance'], 0) : 0
+  const code = String(inst.props?.['renderFunc'] || '')
+  if (!code) return `${(i).toFixed(6)} A`
+  try {
+    // 允许两种形态："(i)=>..." 或 "(i,v,props)=>..."
+    const fn = new Function('i', 'r', 'props', 'return (' + code + ')(i, r, props)')
+    const out = fn(i, r, inst.props)
+    return String(out)
+  } catch {
+    return `ERR_RF`
+  }
+}
+
+// 灯泡发光参数：随电流变化增加线条数量、长度、透明度
+function clamp01(x: number) { return x < 0 ? 0 : x > 1 ? 1 : x }
+function getBulbGlow(inst: Instance) {
+  if (inst.key !== 'light_bulb') return { t: 0, count: 0, opacity: 0, lenFrac: 0 }
+  const live = instLive[inst.id]
+  const iabs = live && typeof live.i === 'number' ? Math.abs(live.i) : 0
+  // 使 0.5A 达到比较饱和的光效，0A 无光
+  const t = clamp01(iabs / 0.5)
+  const count = 12 + Math.round(8 * t) // 12..20 根射线
+  const opacity = 0.8 * t // 0..0.8
+  const lenFrac = 0.18 + 0.45 * t // 以尺寸为基准的长度比例
+  return { t, count, opacity, lenFrac }
+}
+
+// 电阻色环：根据实时电阻值绘制 4 环（两位有效数字 + 倍率 + 5% 容差金色）
+const DIGIT_COLORS = ['#000000', '#8B4513', '#FF0000', '#FFA500', '#FFFF00', '#008000', '#0000FF', '#800080', '#808080', '#FFFFFF']
+const GOLD = '#D4AF37'
+const SILVER = '#C0C0C0'
+
+function computeResistorColorBands(ohms: number): string[] {
+  // 4 环：D1, D2, multiplier, tolerance(默认金色)
+  if (!Number.isFinite(ohms)) ohms = 0
+  const R = Math.max(0, ohms)
+  // 特殊：0Ω 跳线，显示单一黑环加固定金色作为占位
+  if (R === 0) return ['#000000', '#000000', '#000000', GOLD]
+
+  // 将 R 逼近到 (10..99) × 10^k 的形式，以两位有效数字表示
+  let exp = Math.floor(Math.log10(R)) - 1
+  // 处理非常小的阻值（<0.01Ω）和非常大的阻值，限制到可表示范围
+  if (!Number.isFinite(exp)) exp = 0
+  let N = R / Math.pow(10, exp)
+  // 目标区间为 [10, 99]
+  let D = Math.round(N)
+  if (D < 10) {
+    // 提升到两位
+    while (D < 10) { D *= 10; exp -= 1 }
+  } else if (D > 99) {
+    // 回落并进位倍率
+    while (D > 99) { D = Math.round(D / 10); exp += 1 }
+  }
+
+  // 提取两位数字
+  D = Math.max(10, Math.min(99, D))
+  let d1 = Math.floor(D / 10)
+  let d2 = D % 10
+
+  // 倍率色环支持指数 -2..9（-1 金、-2 银；其余 0..9 用数字色）
+  let mulColor: string
+  if (exp <= -2) mulColor = SILVER
+  else if (exp === -1) mulColor = GOLD
+  else mulColor = DIGIT_COLORS[Math.max(0, Math.min(9, exp))]
+
+  const c1 = DIGIT_COLORS[d1]
+  const c2 = DIGIT_COLORS[d2]
+  const tol = GOLD // 默认 5%
+  return [c1, c2, mulColor, tol]
+}
+
+function getResistorBandColors(inst: Instance): string[] {
+  if (inst.key !== 'resistor') return []
+  const R = safeNum(inst.props?.['resistance'], 0)
+  return computeResistorColorBands(R)
+}
+
+// 色环在图片中的相对位置（经验位置，适配当前素材）
+const RES_BAND_X_FRACS = [0.4, 0.4666, 0.5334, 0.6]
+const RES_BAND_WIDTH_FRAC = 0.03
+const RES_BAND_TOP_FRAC = 0.432
+const RES_BAND_HEIGHT_FRAC = 0.13
+
+function getResBandX(inst: Instance, index: number) {
+  const cx = inst.size * (RES_BAND_X_FRACS[index] || 0.3)
+  const w = inst.size * RES_BAND_WIDTH_FRAC
+  return cx - w / 2
+}
+
+// 8) 初始居中到世界中心
+function centerWorld() {
+  const vp = viewportRef.value
+  if (!vp) return
+  const rect = vp.getBoundingClientRect()
+  const center = state.worldSize / 2
+  state.translateX = rect.width / 2 - center * state.scale
+  state.translateY = rect.height / 2 - center * state.scale
+}
+
+onMounted(() => {
+  centerWorld()
+})
+
+// 9) 导出 / 导入（JSON 序列化）
+type SaveWorld = Pick<typeof state, 'scale' | 'translateX' | 'translateY' | 'worldSize' | 'gridSize'>
+// 新的连接点保存结构：每个实例在 props 下包含 __connections，按连接点索引记录连接到的端点
+type SaveConnectionRef = { instId: string; cpIndex: number }
+type SaveConnections = Record<string /* cpIndex */, SaveConnectionRef[]>
+type SaveInstance = Pick<Instance, 'id' | 'key' | 'x' | 'y' | 'size' | 'rotation' | 'state'> & {
+  props: Record<string, any> & { __connections?: SaveConnections }
+}
+type SaveFile = {
+  version: 3
+  world: SaveWorld
+  instances: SaveInstance[]
+}
+
+function makeSave(): SaveFile {
+  const world: SaveWorld = {
+    scale: state.scale,
+    translateX: state.translateX,
+    translateY: state.translateY,
+    worldSize: state.worldSize,
+    gridSize: state.gridSize,
+  }
+
+  // 基于当前 wires 构建每个实例的端点连接表
+  const connMap: Record<string, Record<number, SaveConnectionRef[]>> = {}
+  const addConn = (from: EndpointRef, to: EndpointRef) => {
+    if (!connMap[from.instId]) connMap[from.instId] = {}
+    if (!connMap[from.instId][from.cpIndex]) connMap[from.instId][from.cpIndex] = []
+    connMap[from.instId][from.cpIndex].push({ instId: to.instId, cpIndex: to.cpIndex })
+  }
+  for (const w of wires) {
+    addConn(w.a, w.b)
+    addConn(w.b, w.a)
+  }
+
+  const data: SaveFile = {
+    version: 3,
+    world,
+    instances: instances.map(i => {
+      const propsCopy: Record<string, any> = { ...i.props }
+      const m = connMap[i.id]
+      // 始终写入 __connections（即使为空对象），确保未连接元件也被保留
+      // 将 number 索引键转成字符串键，以便 JSON 键稳定
+      const mapped: SaveConnections = {}
+      if (m) {
+        for (const [k, arr] of Object.entries(m)) mapped[String(k)] = arr.map(x => ({ instId: x.instId, cpIndex: x.cpIndex }))
+      }
+      propsCopy.__connections = mapped
+      return {
+        id: i.id,
+        key: i.key,
+        x: i.x,
+        y: i.y,
+        size: i.size,
+        rotation: i.rotation,
+        props: propsCopy,
+        state: i.state,
+      }
+    }),
+  }
+  return data
+}
+
+function downloadJSON(filename: string, text: string) {
+  const blob = new Blob([text], { type: 'application/json;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+function pad(n: number) { return n.toString().padStart(2, '0') }
+function timestampName() {
+  const d = new Date()
+  const y = d.getFullYear()
+  const m = pad(d.getMonth() + 1)
+  const day = pad(d.getDate())
+  const hh = pad(d.getHours())
+  const mm = pad(d.getMinutes())
+  const ss = pad(d.getSeconds())
+  return `${y}${m}${day}-${hh}${mm}${ss}`
+}
+
+function onExportJSON() {
+  const data = makeSave()
+  const json = JSON.stringify(data, null, 2)
+  downloadJSON(`circuit-${timestampName()}.json`, json)
+}
+
+const importInputRef = ref<HTMLInputElement | null>(null)
+function triggerImport() { importInputRef.value?.click() }
+
+function safeNumber(v: any, def = 0) {
+  const n = typeof v === 'number' ? v : Number(v)
+  return Number.isFinite(n) ? n : def
+}
+
+function loadFromJSONText(text: string) {
+  let obj: any
+  try {
+    obj = JSON.parse(text)
+  } catch (err) {
+    alert('JSON 解析失败：' + (err as Error).message)
+    return
+  }
+  if (!obj || typeof obj !== 'object') {
+    alert('无效的文件内容')
+    return
+  }
+  // 兼容校验
+  const world = obj.world || {}
+  const rawInstances = Array.isArray(obj.instances) ? obj.instances : []
+
+  // 过滤仅保留存在于库里的元件
+  const knownKeys = new Set(elements.map(e => e.key))
+  const validInstances: Instance[] = []
+  for (const r of rawInstances) {
+    if (!r || typeof r !== 'object') continue
+    if (!knownKeys.has(r.key)) continue
+    // 提前拿到连接信息（若为新格式）
+    const rawProps = (typeof r.props === 'object' && r.props) ? { ...r.props } : {}
+    const savedConnections: SaveConnections | undefined = rawProps.__connections
+    if ('__connections' in rawProps) delete (rawProps as any)['__connections']
+    // 兼容：若缺少通用隐藏属性开关，补上默认值
+    if (rawProps['hideProps'] === undefined) rawProps['hideProps'] = 'off'
+    const inst: Instance = {
+      id: String(r.id ?? (++idSeq)),
+      key: String(r.key),
+      url: elements.find(e => e.key === r.key)!.url,
+      x: safeNumber(r.x),
+      y: safeNumber(r.y),
+      size: safeNumber(r.size, elements.find(e => e.key === r.key)?.defaultSize ?? 64),
+      rotation: safeNumber(r.rotation, 0),
+      props: rawProps,
+      state: r.state === 'on' || r.state === 'off' ? r.state : undefined,
+    }
+    // 兼容老文件：若为开关且 props.state 缺失，则使用 legacy state 或默认 off
+    if (inst.key === 'switch') {
+      const cur = String((inst.props as any)['state'] ?? '')
+      if (cur !== 'on' && cur !== 'off') {
+        (inst.props as any)['state'] = (inst.state === 'on' ? 'on' : 'off')
+      }
+    }
+    // 暂存连接信息在实例对象上（不入 props）以便后续重建导线
+    ; (inst as any).__savedConnections = savedConnections
+    validInstances.push(inst)
+  }
+
+  // 基于实例与元件接线点数量校验导线
+  const instMap = new Map(validInstances.map(i => [i.id, i]))
+  const validWires: Wire[] = []
+
+  // 从每个实例 props.__connections 重建导线（去重）
+  const dedup = new Set<string>()
+  const getKey = (a: EndpointRef, b: EndpointRef) => {
+    const k1 = `${a.instId}:${a.cpIndex}`
+    const k2 = `${b.instId}:${b.cpIndex}`
+    return k1 < k2 ? `${k1}|${k2}` : `${k2}|${k1}`
+  }
+  for (const inst of validInstances) {
+    const conns: SaveConnections | undefined = (inst as any).__savedConnections
+    if (!conns) continue
+    const elem = elements.find(e => e.key === inst.key)
+    const cps = elem?.connectionPoints?.length ?? 0
+    for (const [cpStr, arr] of Object.entries(conns)) {
+      const cpi = safeNumber(cpStr)
+      if (cpi < 0 || cpi >= cps) continue
+      for (const ref of arr || []) {
+        const tgt = instMap.get(String(ref.instId))
+        if (!tgt) continue
+        const elemB = elements.find(e => e.key === tgt.key)
+        const cpsB = elemB?.connectionPoints?.length ?? 0
+        const cpb = safeNumber(ref.cpIndex)
+        if (cpb < 0 || cpb >= cpsB) continue
+        const a: EndpointRef = { instId: inst.id, cpIndex: cpi }
+        const b: EndpointRef = { instId: String(ref.instId), cpIndex: cpb }
+        const key = getKey(a, b)
+        if (dedup.has(key)) continue
+        dedup.add(key)
+        validWires.push({ id: String(++wireSeq), a, b })
+      }
+    }
+
+  }
+
+  // 写回世界与状态
+  state.scale = safeNumber(world.scale, state.scale)
+  state.translateX = safeNumber(world.translateX, state.translateX)
+  state.translateY = safeNumber(world.translateY, state.translateY)
+  // worldSize/gridSize 通常固定，如需覆盖可解开注释
+  // state.worldSize = safeNumber(world.worldSize, state.worldSize)
+  // state.gridSize = safeNumber(world.gridSize, state.gridSize)
+
+  // 覆盖当前电路
+  instances.splice(0, instances.length, ...validInstances)
+  wires.splice(0, wires.length, ...validWires)
+  selectedId.value = null
+  pendingEndpoint = null
+
+  // 续增 id 序列
+  const maxInstId = validInstances.reduce((m, i) => Math.max(m, Number(i.id) || 0), 0)
+  const maxWireId = validWires.reduce((m, w) => Math.max(m, Number(w.id) || 0), 0)
+  idSeq = Math.max(idSeq, maxInstId)
+  wireSeq = Math.max(wireSeq, maxWireId)
+}
+
+function onImportFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const file = input.files && input.files[0]
+  if (!file) return
+  const reader = new FileReader()
+  reader.onload = () => {
+    const text = String(reader.result || '')
+    loadFromJSONText(text)
+  }
+  reader.onerror = () => alert('读取文件失败')
+  reader.readAsText(file, 'utf-8')
+  // 重置以便可重复选择同一文件
+  input.value = ''
+}
+
+// 提供给 AI 助手的实时电路状态（每次访问都会序列化最新数据）
+const aiState = computed(() => makeSave())
+
+function onAiError(e: string) {
+  // 采用函数方式，避免模板类型检查对全局 alert 的报错
+  alert(e)
+}
+
+// 删除当前选中的元件以及所有关联导线
+function deleteSelected() {
+  const inst = selectedInst.value
+  if (!inst) return
+  // 删除连接到该实例的所有导线
+  for (let i = wires.length - 1; i >= 0; i--) {
+    const w = wires[i]
+    if (w.a.instId === inst.id || w.b.instId === inst.id) wires.splice(i, 1)
+  }
+  // 如果正在连线且端点来自该实例，取消预连
+  if (pendingEndpoint && pendingEndpoint.instId === inst.id) pendingEndpoint = null
+  // 如果正在拖拽该实例，停止拖拽
+  if (draggingId === inst.id) draggingId = null
+  // 删除实例本身
+  const idx = instances.findIndex(i => i.id === inst.id)
+  if (idx >= 0) instances.splice(idx, 1)
+  // 清理实时状态与选中
+  delete instLive[inst.id]
+  selectedId.value = null
+}
+
+// 文本框编辑函数
+function editTextBox(inst: Instance) {
+  // 仅处理文本框
+  if (inst.key !== 'text_box') return
+  const cur = String(inst.props?.['text'] ?? '')
+  const next = globalThis.prompt ? globalThis.prompt('编辑文本', cur) : null
+  if (next !== null) inst.props['text'] = next
+}
+</script>
+
+<template>
+  <div class="app" :style="{ '--ai-width': showAI ? '360px' : '0px' }">
+    <!-- 左侧元件面板 -->
+    <aside class="sidebar">
+      <h2>元件</h2>
+      <div class="palette">
+        <div v-for="item in palette" :key="item.key" class="palette-item"
+          draggable="true" @dragstart="(e) => onPaletteDragStart(e, item)"
+          :title="item.name">
+          <img :src="item.url" :alt="item.name" draggable="false" />
+          <span class="label">{{ item.name }}</span>
+        </div>
+      </div>
+
+      <div class="file-actions">
+        <button class="btn" @click="onExportJSON">导出 JSON</button>
+        <button class="btn" @click="triggerImport">导入 JSON</button>
+        <input ref="importInputRef" type="file" accept="application/json,.json"
+          class="hidden-file" @change="onImportFileChange" />
+      </div>
+    </aside>
+
+    <!-- 画布视口（可平移、缩放、接收拖拽） -->
+    <main class="viewport" ref="viewportRef" @pointerdown="onViewportMouseDown"
+      @pointermove="(e) => { onViewportMouseMove(e); onViewportMouseMoveDrag(e); onViewportMouseMoveTrack(e); onViewportMouseMoveSlider(e) }"
+      @pointerup="() => { onViewportMouseUp(); onViewportMouseUpDrag(); onViewportMouseUpSlider() }"
+      @pointerleave="() => { onViewportMouseUp(); onViewportMouseUpDrag(); onViewportMouseUpSlider() }"
+      @wheel="onWheel" @dragover="onCanvasDragOver" @drop="onCanvasDrop"
+      @click="clearSelection">
+      <!-- 世界平面：网格背景，应用 transform -->
+      <div class="world" :style="worldStyle" ref="worldRef">
+        <!-- 导线（SVG 覆盖层） -->
+        <svg class="wires" :width="state.worldSize" :height="state.worldSize"
+          @mousemove="onViewportMouseMoveTrack">
+          <g>
+            <g v-for="w in wires" :key="w.id" class="wire-group"
+              @click.stop="(e) => removeWire(w.id, e)">
+              <line class="wire-base"
+                :x1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).x"
+                :y1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).y"
+                :x2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).x"
+                :y2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).y"
+                stroke-linecap="round" vector-effect="non-scaling-stroke" />
+            </g>
+
+            <!-- 预览线：当选中一个端点时，显示到鼠标或吸附端点的线 -->
+            <line v-if="pendingEndpoint"
+              :x1="getConnectionPointWorldPos(getInstance(pendingEndpoint.instId)!, pendingEndpoint.cpIndex).x"
+              :y1="getConnectionPointWorldPos(getInstance(pendingEndpoint.instId)!, pendingEndpoint.cpIndex).y"
+              :x2="previewTarget.x" :y2="previewTarget.y"
+              class="wire preview" />
+          </g>
+        </svg>
+
+        <!-- 已放置的元件（可拖动） -->
+        <div v-for="inst in instances" :key="inst.id" class="inst"
+          :class="{ selected: selectedId === inst.id }"
+          :style="{ left: inst.x + 'px', top: inst.y + 'px', transform: 'translate(-50%, -50%) rotate(' + (inst.rotation || 0) + 'deg)' }"
+          @pointerdown="(e) => onInstanceMouseDown(e, inst)"
+          @click.stop="() => selectInstance(inst.id)" :title="(elements.find(e => e.key === inst.key)?.name || inst.key)">
+          <div class="inst-box"
+            :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
+              ? (((inst.key === 'switch' ? (inst.props['state'] as string) : inst.state) === 'on')
+                ? elements.find(e => e.key === inst.key)!.stateImages!.on
+                : elements.find(e => e.key === inst.key)!.stateImages!.off)
+              : inst.url)" :alt="inst.key" :draggable="false"
+              @contextmenu.prevent="() => {
+                const meta = elements.find(e => e.key === inst.key);
+                if (!meta?.stateImages) return;
+                if (inst.key === 'switch') {
+                  const cur = String(inst.props['state'] ?? 'off');
+                  inst.props['state'] = cur === 'on' ? 'off' : 'on'
+                } else {
+                  inst.state = inst.state === 'on' ? 'off' : 'on'
+                }
+              }" />
+
+            <!-- 文本框渲染层：不参与电路，仅显示可编辑文本 -->
+            <div v-if="inst.key === 'text_box'" class="text-box"
+              :style="{
+                fontSize: (Number(inst.props?.['fontSize'] ?? 24)) + 'px',
+                color: String(inst.props?.['color'] ?? '#111827'),
+              }"
+              @dblclick.stop="editTextBox(inst)"
+              title="双击编辑文本">
+              {{ String(inst.props?.['text'] ?? '') }}
+            </div>
+
+            <!-- 电阻色环叠加层：根据实时电阻值渲染 4 个色带 -->
+            <template v-if="inst.key === 'resistor'">
+              <div v-for="(c, bi) in getResistorBandColors(inst)" :key="bi"
+                class="res-band" :style="{
+                  left: getResBandX(inst, bi) + 'px',
+                  top: (inst.size * RES_BAND_TOP_FRAC) + 'px',
+                  width: (inst.size * RES_BAND_WIDTH_FRAC) + 'px',
+                  height: (inst.size * RES_BAND_HEIGHT_FRAC) + 'px',
+                  backgroundColor: c
+                }"></div>
+            </template>
+
+            <!-- 滑动变阻器滑块 -->
+            <img v-if="inst.key === 'sliding_rheostat'" class="rheo-pin"
+              :src="(elements.find(e => e.key === inst.key) as any)?.pinUrl"
+              alt="pin" draggable="false" :style="{
+                left: ((getRheostatPinOffset(inst) / inst.size) * 100) + '%',
+              }" @pointerdown.stop="() => { sliderDraggingId = inst.id }" />
+
+            <!-- 灯泡发散光线叠加层 -->
+            <svg v-if="inst.key === 'light_bulb'" class="bulb-glow"
+              :width="inst.size" :height="inst.size"
+              :viewBox="'0 0 ' + inst.size + ' ' + inst.size"
+              aria-hidden="true">
+              <g :opacity="getBulbGlow(inst).opacity">
+                <line v-for="k in getBulbGlow(inst).count" :key="k"
+                  :x1="(inst.size / 2) + Math.cos(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * 0.42)"
+                  :y1="(inst.size / 2) + Math.sin(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * 0.42)"
+                  :x2="(inst.size / 2) + Math.cos(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * (0.42 + getBulbGlow(inst).lenFrac))"
+                  :y2="(inst.size / 2) + Math.sin(2 * Math.PI * (k - 1) / getBulbGlow(inst).count) * (inst.size * (0.42 + getBulbGlow(inst).lenFrac))"
+                  stroke="#f59e0b" stroke-width="2" stroke-linecap="round"
+                  vector-effect="non-scaling-stroke" />
+              </g>
+            </svg>
+
+            <!-- meter 显示层 -->
+            <div v-if="inst.key === 'meter'" class="meter-label">
+              {{ meterText(inst) }}
+            </div>
+
+            <div v-if="inst.key === 'power_supply'" class="power-supply-label">
+              <span>{{ instLive[inst.id]?.v?.toFixed(2) }} V</span>
+              <span>{{ (-(instLive[inst.id]?.i ?? 0)).toFixed(2) }} A</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 连接点（显示为虚线圆圈） -->
+        <div v-for="inst in instances" :key="inst.id + '-cps'">
+          <template
+            v-for="(cp, idx) in (elements.find(e => e.key === inst.key)?.connectionPoints || [])"
+            :key="inst.id + '-' + idx">
+            <div class="endpoint" :class="{
+              active: pendingEndpoint && pendingEndpoint.instId === inst.id && pendingEndpoint.cpIndex === idx,
+              hover: isNearest(inst.id, idx),
+              connected: hoveredEndpoint && isConnectedEndpoint(inst.id, idx)
+            }" :style="{
+              left: getConnectionPointWorldPos(inst, idx).x + 'px',
+              top: getConnectionPointWorldPos(inst, idx).y + 'px'
+            }" @click.stop="(e) => onEndpointClick(inst.id, idx, e)"
+              @pointerenter="() => { hoveredEndpoint = { instId: inst.id, cpIndex: idx } }"
+              @pointerleave="() => { if (hoveredEndpoint && hoveredEndpoint.instId === inst.id && hoveredEndpoint.cpIndex === idx) hoveredEndpoint = null }"
+              :title="cp.name || ('P' + (idx + 1))"></div>
+          </template>
+        </div>
+      </div>
+    </main>
+
+    <!-- 右侧 AI 助手面板 -->
+    <aside v-if="showAI" class="ai-aside">
+      <AIAssistant :state="aiState" @error="onAiError"
+        @close="showAI = false" />
+    </aside>
+    <button v-else class="ai-reopen" title="打开 AI 助手"
+      @click="showAI = true">◀</button>
+
+    <!-- 底部属性面板：编辑选中元件的业务属性（非尺寸） -->
+    <footer v-if="selectedInst" class="bottom-panel"
+      :style="{ right: showAI ? '360px' : '0' }">
+      <div class="panel-inner">
+        <div class="prop-title">{{ selectedInst.key }} 属性</div>
+          <!-- 预设按钮区域：显示当前元件的预设，点击一键应用（当未隐藏属性时） -->
+          <div v-if="selectedMeta?.preset?.length && String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'" class="presets">
+          <span class="preset-label">预设</span>
+          <button v-for="p in selectedMeta!.preset" :key="p.name"
+            class="preset-btn" @click.stop="applyPreset(p)">{{
+              p.name
+            }}</button>
+        </div>
+        <div class="props">
+          <!-- 实时电学量（在隐藏属性=on时不显示） -->
+          <label class="prop-row" v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
+            <span class="label">电压</span>
+            <span>{{ formatValue(instLive[selectedInst!.id]?.v ?? null, 'V')
+              }}</span>
+          </label>
+          <label class="prop-row" v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
+            <span class="label">电流</span>
+            <span>{{ formatValue(instLive[selectedInst!.id]?.i ?? null, 'A')
+              }}</span>
+          </label>
+          <!-- 旋转控制（在隐藏属性=on时不显示） -->
+          <label class="prop-row" v-if="String(selectedInst!.props['hideProps'] ?? 'off') !== 'on'">
+            <span class="label">旋转</span>
+            <input type="range" min="-180" max="180" step="1"
+              v-model.number="selectedInst!.rotation" />
+            <input type="number" class="deg-input" step="1"
+              v-model.number="selectedInst!.rotation" />
+            <span class="unit">deg</span>
+            <button class="rot-btn"
+              @click="selectedInst!.rotation = ((selectedInst!.rotation || 0) - 45 + 360) % 360">-45°</button>
+            <button class="rot-btn"
+              @click="selectedInst!.rotation = ((selectedInst!.rotation || 0) + 45) % 360">+45°</button>
+          </label>
+            <!-- 通用：隐藏属性开关（始终显示） -->
+            <label class="prop-row">
+              <span class="label">隐藏属性</span>
+              <select v-model="selectedInst!.props['hideProps'] as string">
+                <option value="off">off</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>
+                <span class="unit"
+                  v-if="schema.type === 'number' && (schema as any).unit">{{
+                    (schema as any).unit }}</span>
+              </label>
+            </template>
+        </div>
+        <!-- 右侧操作区：删除按钮 -->
+        <div class="panel-actions">
+          <button class="danger-btn" title="删除此元件及其所有连接的导线"
+            @click="deleteSelected">删除元件</button>
+        </div>
+      </div>
+    </footer>
+  </div>
+
+</template>
+
+<style scoped>
+.app {
+  display: grid;
+  grid-template-columns: 140px 1fr var(--ai-width, 360px);
+  /* 左栏 / 画布 / AI 辅助 */
+  grid-template-rows: 100vh;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+}
+
+.sidebar {
+  border-right: 1px solid #e5e7eb;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: #fafafa;
+}
+
+.file-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.file-actions .btn {
+  padding: 6px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #fff;
+  color: #111827;
+  cursor: pointer;
+}
+
+.file-actions .btn:hover {
+  background: #f3f4f6;
+}
+
+.hidden-file {
+  display: none;
+}
+
+.sidebar h2 {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  color: #111827;
+}
+
+.palette {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 10px;
+  overflow: auto;
+}
+
+.palette-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: white;
+  cursor: grab;
+  user-select: none;
+}
+
+.palette-item:active {
+  cursor: grabbing;
+}
+
+.palette-item img {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.palette-item .label {
+  font-size: 12px;
+  color: #374151;
+}
+
+.inspector {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.inspector h3 {
+  margin: 0;
+  font-size: 14px;
+  color: #111827;
+}
+
+.inspector .row {
+  display: grid;
+  grid-template-columns: 60px 1fr auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.inspector .row label {
+  color: #4b5563;
+  font-size: 12px;
+}
+
+.inspector .row .num {
+  width: 70px;
+}
+
+.viewport {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+}
+
+/* 右侧 AI 面板容器 */
+.ai-aside {
+  border-left: 1px solid #e5e7eb;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* 右侧重新打开箭头按钮（在隐藏时显示） */
+.ai-reopen {
+  position: fixed;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  padding: 8px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 999px 0 0 999px;
+  background: #fff;
+  color: #111827;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.ai-reopen:hover {
+  background: #f3f4f6;
+}
+
+.world {
+  position: absolute;
+  left: 0;
+  top: 0;
+  /* 网格背景（细线 + 粗线，每 5 格一条） */
+  background-image:
+    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
+    linear-gradient(to right, rgba(0, 0, 0, 0.09) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.09) 1px, transparent 1px);
+  background-size:
+    var(--grid) 1px,
+    1px var(--grid),
+    var(--grid5) 1px,
+    1px var(--grid5);
+  background-position: 0 0, 0 0, 0 0, 0 0;
+}
+
+.wires {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
+/* 新增：分层导线样式 */
+.wire-group {
+  cursor: pointer;
+}
+
+.wire-base {
+  stroke: #111827;
+  stroke-width: 3;
+  opacity: 0.85;
+}
+
+.wire-highlight {
+  stroke-width: 2;
+  mix-blend-mode: multiply;
+}
+
+/* 悬停时微弱高亮 */
+.wire-group:hover .wire-base {
+  opacity: 0.95;
+}
+
+.wire-group:hover .wire-highlight {
+  filter: brightness(1.06);
+}
+
+/* 放大可点击区域（不可见）以提升命中，通过 pointer-events 控制组级点击 */
+.wire-hit {
+  stroke: transparent;
+  stroke-width: 10;
+}
+
+/* 预览线保留原 class 名，便于最小改动 */
+.wire {
+  stroke: #111827;
+  stroke-width: 2;
+}
+
+.wire.preview {
+  stroke: #3b82f6;
+  stroke-dasharray: 10 6;
+  animation: dash-move 1.2s linear infinite;
+  opacity: 0.9;
+}
+
+@keyframes dash-move {
+  from {
+    stroke-dashoffset: 0;
+  }
+
+  to {
+    stroke-dashoffset: -32;
+  }
+}
+
+.inst {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  cursor: move;
+  user-select: none;
+  z-index: 2;
+}
+
+.inst .inst-box {
+  position: relative;
+}
+
+.inst img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  image-rendering: -webkit-optimize-contrast;
+}
+
+/* 电阻色环样式 */
+.res-band {
+  position: absolute;
+  transform: translateX(-50%);
+  opacity: 0.8;
+  top: 0;
+  left: 0;
+  border-radius: 2px;
+  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+
+.rheo-pin {
+  position: absolute;
+  z-index: 3;
+  cursor: ew-resize;
+  pointer-events: auto;
+  width: 15% !important;
+  height: auto !important;
+  top: 25.5% !important;
+  transform: translateX(-50%);
+}
+
+.bulb-glow {
+  position: absolute;
+  left: 0;
+  top: -20%;
+  pointer-events: none;
+  /* 轻微发光的滤镜 */
+  filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.6));
+}
+
+.inst.selected img {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+.meter-label {
+  position: absolute;
+  right: 25%;
+  top: 20%;
+  color: #111827;
+  font-family: "meter-font";
+  font-size: 20px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.power-supply-label {
+  position: absolute;
+  right: 44%;
+  height: 38%;
+  top: 17%;
+  color: #62D3EF;
+  text-shadow: 0 0 2px #62D3EF, 0 0 6px #62d3ef44;
+  font-family: "meter-font";
+  font-size: 22px;
+  white-space: nowrap;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.endpoint {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  transform: translate(-50%, -50%);
+  border: 2px dashed #3b82f6;
+  border-radius: 50%;
+  background: #ffffffcc;
+  z-index: 3;
+  cursor: crosshair;
+}
+
+.endpoint.active {
+  background: #dbeafe;
+  border-color: #2563eb;
+}
+
+.endpoint.hover {
+  transform: translate(-50%, -50%) scale(1.25);
+}
+
+/* 连通端点高亮：当某端点悬停时，其所有通过导线连通的端点以强调色显示 */
+.endpoint.connected {
+  border-color: #10b981;
+  /* teal-500 */
+  background: #ecfdf5;
+  /* teal-50 */
+  transform: translate(-50%, -50%) scale(1.25);
+}
+
+.bottom-panel {
+  position: fixed;
+  left: 140px;
+  /* 与左侧栏对齐 */
+  right: 360px;
+  /* 默认让出 AI 侧栏宽度，实际由内联样式覆盖 */
+  bottom: 0;
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+}
+
+.bottom-panel .panel-inner {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+}
+
+/* 右侧操作区 */
+.panel-actions {
+  margin-left: auto;
+}
+
+.danger-btn {
+  padding: 6px 10px;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  background: #fee2e2;
+  color: #b91c1c;
+  cursor: pointer;
+  width: max-content;
+}
+
+.danger-btn:hover {
+  background: #fecaca;
+  border-color: #ef4444;
+}
+
+/* 预设区域样式 */
+.presets {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.preset-label {
+  color: #4b5563;
+  font-size: 12px;
+}
+
+.preset-btn {
+  padding: 4px 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #fff;
+  color: #111827;
+  cursor: pointer;
+}
+
+.preset-btn:hover {
+  background: #f3f4f6;
+}
+
+.bottom-panel .props {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.prop-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.prop-row .label {
+  color: #374151;
+  font-size: 12px;
+}
+
+.prop-row .unit {
+  color: #6b7280;
+  font-size: 12px;
+}
+
+/* 旋转控制样式 */
+.deg-input {
+  width: 70px;
+}
+
+.rot-btn {
+  padding: 4px 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #fff;
+  color: #111827;
+  cursor: pointer;
+}
+
+.rot-btn:hover {
+  background: #f3f4f6;
+}
+
+/* 文本框样式 */
+.text-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  line-height: 1.2;
+  padding: 6px;
+  word-break: break-word;
+  white-space: pre-wrap;
+  background: transparent;
+  pointer-events: auto;
+  user-select: text;
+}
+</style>
diff --git a/src/circuit-ele/battery.png b/src/views/circuit-ele/battery.png
similarity index 100%
rename from src/circuit-ele/battery.png
rename to src/views/circuit-ele/battery.png
diff --git a/src/circuit-ele/capacitor.png b/src/views/circuit-ele/capacitor.png
similarity index 100%
rename from src/circuit-ele/capacitor.png
rename to src/views/circuit-ele/capacitor.png
diff --git a/src/circuit-ele/inductor.png b/src/views/circuit-ele/inductor.png
similarity index 100%
rename from src/circuit-ele/inductor.png
rename to src/views/circuit-ele/inductor.png
diff --git a/src/circuit-ele/light_bulb.png b/src/views/circuit-ele/light_bulb.png
similarity index 100%
rename from src/circuit-ele/light_bulb.png
rename to src/views/circuit-ele/light_bulb.png
diff --git a/src/circuit-ele/light_bulb_grow.png b/src/views/circuit-ele/light_bulb_grow.png
similarity index 100%
rename from src/circuit-ele/light_bulb_grow.png
rename to src/views/circuit-ele/light_bulb_grow.png
diff --git a/src/circuit-ele/meter.png b/src/views/circuit-ele/meter.png
similarity index 100%
rename from src/circuit-ele/meter.png
rename to src/views/circuit-ele/meter.png
diff --git a/src/circuit-ele/power_supply.png b/src/views/circuit-ele/power_supply.png
similarity index 100%
rename from src/circuit-ele/power_supply.png
rename to src/views/circuit-ele/power_supply.png
diff --git a/src/circuit-ele/resistance_box.png b/src/views/circuit-ele/resistance_box.png
similarity index 100%
rename from src/circuit-ele/resistance_box.png
rename to src/views/circuit-ele/resistance_box.png
diff --git a/src/views/circuit-ele/resistor.png b/src/views/circuit-ele/resistor.png
new file mode 100644
index 0000000..43700e2
Binary files /dev/null and b/src/views/circuit-ele/resistor.png differ
diff --git a/src/circuit-ele/sliding_rheostat.png b/src/views/circuit-ele/sliding_rheostat.png
similarity index 100%
rename from src/circuit-ele/sliding_rheostat.png
rename to src/views/circuit-ele/sliding_rheostat.png
diff --git a/src/circuit-ele/sliding_rheostat_pin.png b/src/views/circuit-ele/sliding_rheostat_pin.png
similarity index 100%
rename from src/circuit-ele/sliding_rheostat_pin.png
rename to src/views/circuit-ele/sliding_rheostat_pin.png
diff --git a/src/circuit-ele/switch_off.png b/src/views/circuit-ele/switch_off.png
similarity index 100%
rename from src/circuit-ele/switch_off.png
rename to src/views/circuit-ele/switch_off.png
diff --git a/src/circuit-ele/switch_on.png b/src/views/circuit-ele/switch_on.png
similarity index 100%
rename from src/circuit-ele/switch_on.png
rename to src/views/circuit-ele/switch_on.png
diff --git a/src/views/circuit-ele/text_box.svg b/src/views/circuit-ele/text_box.svg
new file mode 100644
index 0000000..77fcad2
--- /dev/null
+++ b/src/views/circuit-ele/text_box.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffffff"/>
+      <stop offset="1" stop-color="#f3f4f6"/>
+    </linearGradient>
+  </defs>
+  <rect x="14" y="14" width="100" height="100" rx="12" ry="12" fill="url(#bg)" stroke="#111827" stroke-width="4"/>
+  <text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="72" fill="#111827">T</text>
+</svg>
diff --git a/src/elements.ts b/src/views/elements.ts
similarity index 82%
rename from src/elements.ts
rename to src/views/elements.ts
index 4e9c893..cc717cb 100644
--- a/src/elements.ts
+++ b/src/views/elements.ts
@@ -13,6 +13,7 @@ import switchOn from './circuit-ele/switch_on.png'
 import meter from './circuit-ele/meter.png'
 import slidingRheostat from './circuit-ele/sliding_rheostat.png'
 import slidingRheostatPin from './circuit-ele/sliding_rheostat_pin.png'
+import textBox from './circuit-ele/text_box.svg'
 
 export type ConnectionPoint = {
     // 以百分比（0..1）定义在图片盒子内的位置
@@ -49,6 +50,12 @@ export type PropertySchema =
         type: 'text'
         default: string
     }
+    | {
+        key: string
+        label: string
+        type: 'color'
+        default: string
+    }
     | {
         key: string
         label: string
@@ -64,14 +71,28 @@ export type Preset = {
 }
 
 export const elements: CircuitElement[] = [
+    {
+        key: 'text_box',
+        name: '文本框',
+        url: textBox,
+        defaultSize: 0,
+        // 文本框不参与电路连接，无端点
+        connectionPoints: [],
+        propertySchemas: [
+            { key: 'text', label: '文本', type: 'text', default: '双击编辑' },
+            { key: 'fontSize', label: '字体大小', type: 'number', unit: 'px', default: 24 },
+            { key: 'color', label: '颜色', type: 'color', default: '#111827' },
+            // 可选：是否粗体/对齐方式等，后续再加
+        ],
+    },
     {
         key: 'battery',
         name: '电池',
         url: battery,
         defaultSize: 110,
         connectionPoints: [
-            { x: 0.05, y: 0.5, name: 'A' }, // 左侧
-            { x: 0.95, y: 0.5, name: 'B' }, // 右侧
+            { x: 0.95, y: 0.5, name: '正极' }, // 右侧
+            { x: 0.05, y: 0.5, name: '负极' }, // 左侧
         ],
         propertySchemas: [
             { key: 'voltage', label: '电压', type: 'number', unit: 'V', default: 3 },
@@ -84,8 +105,8 @@ export const elements: CircuitElement[] = [
         url: powerSupply,
         defaultSize: 180,
         connectionPoints: [
-            { x: 0.2, y: 1, name: 'A' },
-            { x: 0.8, y: 1, name: 'B' },
+            { x: 0.8, y: 1, name: '正极' },
+            { x: 0.2, y: 1, name: '负极' },
         ],
         propertySchemas: [
             { key: 'voltage', label: '电压', type: 'number', unit: 'V', default: 5 },
@@ -122,32 +143,6 @@ export const elements: CircuitElement[] = [
         // 当电流超过阈值时在前端根据 state 切换图片
         stateImages: { on: lightBulbGrow, off: lightBulb },
     },
-    {
-        key: 'capacitor',
-        name: '电容',
-        url: capacitor,
-        defaultSize: 120,
-        connectionPoints: [
-            { x: 0.6, y: 0.96, name: 'A' },
-            { x: 0.4, y: 0.9, name: 'B' },
-        ],
-        propertySchemas: [
-            { key: 'capacitance', label: '电容', type: 'number', unit: 'F', default: 0.000001 },
-        ],
-    },
-    {
-        key: 'inductor',
-        name: '电感',
-        url: inductor,
-        defaultSize: 100,
-        connectionPoints: [
-            { x: 0.05, y: 0.5, name: 'A' },
-            { x: 0.95, y: 0.5, name: 'B' },
-        ],
-        propertySchemas: [
-            { key: 'inductance', label: '电感', type: 'number', unit: 'H', default: 0.001 },
-        ],
-    },
     {
         key: 'sliding_rheostat',
         name: '滑动变阻器',
@@ -155,10 +150,10 @@ export const elements: CircuitElement[] = [
         pinUrl: slidingRheostatPin,
         defaultSize: 180,
         connectionPoints: [
-            { x: 0.15, y: 0.28, name: 'A' },
-            { x: 0.85, y: 0.28, name: 'B' },
-            { x: 0.15, y: 0.76, name: 'C' },
-            { x: 0.85, y: 0.76, name: 'D' },
+            { x: 0.15, y: 0.28, name: '下部左侧' },
+            { x: 0.85, y: 0.28, name: '下部右侧' },
+            { x: 0.15, y: 0.76, name: '上部左侧' },
+            { x: 0.85, y: 0.76, name: '上部右侧' },
         ],
         propertySchemas: [
             { key: 'maxResistance', label: '最大电阻', type: 'number', unit: 'Ω', default: 100 },
@@ -197,8 +192,8 @@ export const elements: CircuitElement[] = [
         url: meter,
         defaultSize: 150,
         connectionPoints: [
-            { x: 0.25, y: 1, name: 'A' },
-            { x: 0.45, y: 1, name: 'B' },
+            { x: 0.25, y: 1, name: '正极' },
+            { x: 0.45, y: 1, name: '负极' },
         ],
         preset: [{
             name: '微安电流表', propertyValues: { resistance: 0.05, renderFunc: '(i) => `${(i * 1000000).toFixed(0)} uA`' }
@@ -214,4 +209,30 @@ export const elements: CircuitElement[] = [
             { key: 'renderFunc', label: '显示函数', type: 'text', default: '(i) => `${(i).toFixed(2)} A`' },
         ],
     },
+    {
+        key: 'capacitor',
+        name: '电容',
+        url: capacitor,
+        defaultSize: 120,
+        connectionPoints: [
+            { x: 0.4, y: 0.9, name: '正极' },
+            { x: 0.6, y: 0.96, name: '负极' },
+        ],
+        propertySchemas: [
+            { key: 'capacitance', label: '电容', type: 'number', unit: 'F', default: 0.000001 },
+        ],
+    },
+    {
+        key: 'inductor',
+        name: '电感',
+        url: inductor,
+        defaultSize: 100,
+        connectionPoints: [
+            { x: 0.05, y: 0.5, name: 'A' },
+            { x: 0.95, y: 0.5, name: 'B' },
+        ],
+        propertySchemas: [
+            { key: 'inductance', label: '电感', type: 'number', unit: 'H', default: 0.001 },
+        ],
+    },
 ]
diff --git a/src/utils.ts b/src/views/utils.ts
similarity index 100%
rename from src/utils.ts
rename to src/views/utils.ts