代码拆分

src/views/stage/backgroundLayer.ts

@@ -0,0 +1,92 @@
+import { Sprite, Texture } from 'pixi.js'
+import type { Container } from 'pixi.js'
+import { fileToDataUrl } from '../../spine/spineSourceBundle'
+
+/**
+ * 背景图层：精灵创建、纹理异步加载(带版本号防竞态)、清除与上传处理。
+ * 纯 store 绑定 + 精灵操作，无模拟逻辑。
+ */
+export class BackgroundLayer {
+  private sprite: Sprite | null = null
+  private texture: Texture | null = null
+  private loadVersion = 0
+
+  /** 在 world 容器内创建背景精灵(最底层)。 */
+  createSprite(world: Container) {
+    const sprite = new Sprite(Texture.EMPTY)
+    sprite.anchor.set(0.5)
+    sprite.visible = false
+    world.addChild(sprite)
+    this.sprite = sprite
+    return sprite
+  }
+
+  /** 每帧应用位置与透明度设置。 */
+  applyTransform(backgroundX: number, backgroundY: number, backgroundOpacity: number) {
+    if (!this.sprite) return
+    this.sprite.position.set(Number(backgroundX) || 0, -(Number(backgroundY) || 0))
+    this.sprite.alpha = Math.min(1, Math.max(0, Number(backgroundOpacity) || 0))
+  }
+
+  /** 异步把 dataUrl 加载为纹理；旧请求返回时作废。 */
+  async syncTexture(dataUrl: string) {
+    const version = ++this.loadVersion
+    if (!dataUrl) {
+      if (this.sprite) {
+        this.sprite.texture = Texture.EMPTY
+        this.sprite.visible = false
+      }
+      if (this.texture) this.texture.destroy(true)
+      this.texture = null
+      return
+    }
+    try {
+      const texture = await Texture.fromURL(dataUrl)
+      if (version !== this.loadVersion || !this.sprite) {
+        texture.destroy(true)
+        return
+      }
+      const previous = this.texture
+      this.texture = texture
+      this.sprite.texture = texture
+      this.sprite.visible = true
+      if (previous) previous.destroy(true)
+    } catch (error) {
+      console.error('背景图恢复失败', error)
+    }
+  }
+
+  /** 清除背景纹理与偏移/透明度设置(供工具栏"清除背景"按钮使用)。 */
+  static clearStoreBackground(store: { settings: { backgroundImageData: string; backgroundImageName: string; backgroundX: number; backgroundY: number; backgroundOpacity: number } }, resetControls: boolean) {
+    store.settings.backgroundImageData = ''
+    store.settings.backgroundImageName = ''
+    if (resetControls) {
+      store.settings.backgroundX = 0
+      store.settings.backgroundY = 0
+      store.settings.backgroundOpacity = 1
+    }
+  }
+
+  /** 把上传文件写进 store(dataUrl + 文件名)。 */
+  static async handleFileChange(store: { settings: { backgroundImageData: string; backgroundImageName: string } }, event: Event) {
+    const input = event.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (!file) return
+    try {
+      store.settings.backgroundImageData = await fileToDataUrl(file)
+      store.settings.backgroundImageName = file.name
+    } catch (error) {
+      console.error('背景图加载失败', error)
+    } finally {
+      input.value = ''
+    }
+  }
+
+  /** 卸载时释放纹理。 */
+  destroy() {
+    this.loadVersion++
+    if (this.texture) this.texture.destroy(true)
+    this.texture = null
+    this.sprite = null
+  }
+}

src/views/stage/emitterSync.ts

@@ -0,0 +1,117 @@
+import { Texture, type Container } from 'pixi.js'
+import { ParticleEmitter, ensureEmitterConfig } from '../../core/particleEmitter'
+import { sampleScenePath } from '../../core/scenePathSampler'
+import type { EmitterConfig } from '../../core/particleTypes'
+import { followCurveValue } from './stageGeometry'
+import type { useParticleStore, CollisionBody } from '../../store/particleStore'
+import type { ScenePath } from '../../store/particleStore'
+
+type EditorStore = ReturnType<typeof useParticleStore>
+
+/** 发射器容器世界点 → 发射器局部坐标(数学坐标系)。 */
+export function worldPointToEmitterLocal(
+  config: { centerX: number; centerY: number; rootRotation: number; rootScaleX: number; rootScaleY: number },
+  worldX: number,
+  worldY: number,
+  scaleX = Math.max(0.0001, Math.abs(config.rootScaleX)),
+  scaleY = Math.max(0.0001, Math.abs(config.rootScaleY)),
+) {
+  const angle = -config.rootRotation * Math.PI / 180
+  const cos = Math.cos(angle), sin = Math.sin(angle)
+  const screenX = worldX - config.centerX
+  const screenY = -worldY + config.centerY
+  return { x: (cos * screenX + sin * screenY) / scaleX, y: (-sin * screenX + cos * screenY) / scaleY }
+}
+
+/** 采样出生路径并把世界点/切线角转换为发射器局部坐标。 */
+export function sampleSpawnPathForEmitter(
+  config: { centerX: number; centerY: number; rootRotation: number; rootScaleX: number; rootScaleY: number },
+  path: ScenePath,
+  progress: number,
+) {
+  const sample = sampleScenePath(path, progress)
+  if (!sample) return null
+  const local = worldPointToEmitterLocal(config, sample.x, sample.y)
+  const radians = sample.angle * Math.PI / 180
+  const tangentWorld = worldPointToEmitterLocal(config, sample.x + Math.cos(radians), sample.y + Math.sin(radians))
+  const angle = Math.atan2(tangentWorld.y - local.y, tangentWorld.x - local.x) * 180 / Math.PI
+  return { ...local, angle }
+}
+
+/** 每帧预览碰撞体(含路径跟随)，供粒子碰撞解算与绘制使用。 */
+export function buildPreviewColliders(store: EditorStore, timeSeconds: number): CollisionBody[] {
+  return store.colliders.map((collider) => {
+    if (!collider.followPath || !collider.followPathId) return collider
+    const path = store.paths.find((item) => item.id === collider.followPathId && item.enabled)
+    if (!path?.points.length) return collider
+    const duration = Math.max(0.05, Number(collider.followDuration) || 2)
+    const normalized = Math.min(1, Math.max(0, timeSeconds / duration))
+    const curve = Array.isArray(collider.followCurve) ? collider.followCurve : [{ x: 0, y: 0 }, { x: 1, y: 1 }]
+    const curveMode = collider.followCurveMode === '跟随导出'
+      ? (store.settings.exportSettings.keyframeCurve === 'bezier' ? 'bezier' : 'linear')
+      : collider.followCurveMode === '贝塞尔' ? 'bezier' : 'linear'
+    const progress = Math.min(1, Math.max(0, followCurveValue(curve, normalized, curveMode)))
+    const sample = sampleScenePath(path, progress)
+    return sample
+      ? {
+          ...collider,
+          x: sample.x,
+          y: sample.y,
+          rotation: collider.rotation + (collider.followPathRotation ? sample.angle : 0),
+        }
+      : collider
+  })
+}
+
+/** 发射器集合：按 store.systems 增删 ParticleEmitter，并在纹理就绪后补挂默认贴图。 */
+export class EmitterSync {
+  readonly emitters = new Map<number, ParticleEmitter>()
+  private configs = new Map<number, object>()
+
+  sync(
+    store: EditorStore,
+    world: Container,
+    dotTex: Texture<any> | null,
+    trailTex: Texture<any> | null,
+  ) {
+    for (const [id, em] of this.emitters) {
+      const system = store.systems.find((item) => item.id === id)
+      if (!system || this.configs.get(id) !== system.config) {
+        world.removeChild(em)
+        em.destroy({ children: true })
+        this.emitters.delete(id)
+        this.configs.delete(id)
+      }
+    }
+    for (const sys of store.systems) {
+      // 新增系统若还没贴图(dotTex 已加载后)，补上默认点纹理，否则无法渲染
+      if (dotTex && !sys.config.texture) sys.config.texture = dotTex
+      const cfg = ensureEmitterConfig(sys.config as any)
+      if (trailTex) {
+        for (const resource of cfg.trailResources) {
+          if (!resource.texture && (resource.previewUrl === '/images/trail.png' || resource.previewUrl === '/trails/trail.png')) resource.texture = trailTex
+        }
+      }
+      if (dotTex) {
+        for (const resource of cfg.imageResources) {
+          if (!resource.texture && resource.textureName === 'star') resource.texture = dotTex
+        }
+      }
+      if (this.emitters.has(sys.id)) continue
+      const em = new ParticleEmitter(sys.config as any)
+      world.addChild(em)
+      this.emitters.set(sys.id, em)
+      this.configs.set(sys.id, sys.config)
+    }
+  }
+
+  /** 卸载时销毁全部发射器。 */
+  destroy(world: Container) {
+    for (const [id, em] of this.emitters) {
+      world.removeChild(em)
+      em.destroy({ children: true })
+      this.emitters.delete(id)
+      this.configs.delete(id)
+    }
+  }
+}

src/views/stage/objectInteractions.ts

@@ -0,0 +1,168 @@
+import type { SceneTransformTarget } from './stageTypes'
+import { installPointerDrag } from './pointerDrag'
+import { pointerToWorldMath, type StageContext } from './viewControls'
+
+/** 场景对象命中交互：碰撞体拖拽、力场/吸附点拖拽、根变换 gizmo 三工具手势。 */
+export class ObjectInteractions {
+  constructor(private ctx: StageContext, private getTool: () => '' | 'translate' | 'rotate' | 'scale') {}
+
+  /** 命中当前选中碰撞体时拖拽其中心；返回 true 表示事件已被接管。 */
+  onColliderPointerDown(e: PointerEvent): boolean {
+    const store = this.ctx.store
+    if (store.activeObjectType !== 'collision') return false
+    const collider = store.colliders.find((item) => item.id === store.activeObjectId)
+    if (!collider?.enabled || collider.visible === false) return false
+    const pointer = pointerToWorldMath(this.ctx, e.clientX, e.clientY)
+    const angle = collider.rotation * Math.PI / 180
+    const cos = Math.cos(angle), sin = Math.sin(angle)
+    const scaleX = Math.max(0.0001, Math.abs(collider.scaleX ?? 1))
+    const scaleY = Math.max(0.0001, Math.abs(collider.scaleY ?? 1))
+    const dx = pointer.x - collider.x, dy = pointer.y - collider.y
+    const localX = (cos * dx + sin * dy) / scaleX, localY = (-sin * dx + cos * dy) / scaleY
+    const hit = collider.shape === 'circle'
+      ? Math.hypot(localX, localY) <= collider.radius
+      : collider.shape === 'ellipse'
+        ? Math.hypot(localX / Math.max(1, collider.radiusX), localY / Math.max(1, collider.radiusY)) <= 1
+        : Math.abs(localX) <= collider.width * 0.5 && Math.abs(localY) <= collider.height * 0.5
+    if (!hit) return false
+    const startX = collider.x, startY = collider.y, start = pointer
+    installPointerDrag((event) => {
+      const next = pointerToWorldMath(this.ctx, event.clientX, event.clientY)
+      collider.x = startX + next.x - start.x
+      collider.y = startY + next.y - start.y
+    })
+    return true
+  }
+
+  /** 命中当前选中系统的力场圆时开始拖拽；返回 true 表示事件已被力场接管。 */
+  onForceFieldDown(e: PointerEvent): boolean {
+    const sys = this.ctx.store.systems.find((item) => item.id === this.ctx.store.activeId)
+    if (sys?.visible === false) return false
+    const cfg = sys?.config
+    if (!cfg?.forceField || cfg.forceRadius <= 0) return false
+    const startPointer = pointerToWorldMath(this.ctx, e.clientX, e.clientY)
+    const distance = Math.hypot(startPointer.x - cfg.forceCenterX, startPointer.y - cfg.forceCenterY)
+    if (distance > cfg.forceRadius) return false
+    const startX = cfg.forceCenterX
+    const startY = cfg.forceCenterY
+    if (this.ctx.holder.value) this.ctx.holder.value.style.cursor = 'grabbing'
+    const move = (event: PointerEvent) => {
+      const pointer = pointerToWorldMath(this.ctx, event.clientX, event.clientY)
+      cfg.forceCenterX = startX + pointer.x - startPointer.x
+      cfg.forceCenterY = startY + pointer.y - startPointer.y
+    }
+    const up = () => {
+      if (this.ctx.holder.value) this.ctx.holder.value.style.cursor = ''
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      window.removeEventListener('pointercancel', up)
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    window.addEventListener('pointercancel', up)
+    e.preventDefault()
+    return true
+  }
+
+  /** 命中吸附圆（半径为 0 时使用屏幕 12px 热区）时拖动全局吸附点。 */
+  onAttractionDown(e: PointerEvent): boolean {
+    const sys = this.ctx.store.systems.find((item) => item.id === this.ctx.store.activeId)
+    if (sys?.visible === false) return false
+    const cfg = sys?.config
+    if (!cfg?.attraction) return false
+    const startPointer = pointerToWorldMath(this.ctx, e.clientX, e.clientY)
+    const hitRadius = Math.max(cfg.attractionRadius, 12 / Math.max(0.0001, this.ctx.store.editor.viewScale))
+    const distance = Math.hypot(startPointer.x - cfg.attractionCenterX, startPointer.y - cfg.attractionCenterY)
+    if (distance > hitRadius) return false
+    const startX = cfg.attractionCenterX
+    const startY = cfg.attractionCenterY
+    if (this.ctx.holder.value) this.ctx.holder.value.style.cursor = 'grabbing'
+    const move = (event: PointerEvent) => {
+      const pointer = pointerToWorldMath(this.ctx, event.clientX, event.clientY)
+      cfg.attractionCenterX = startX + pointer.x - startPointer.x
+      cfg.attractionCenterY = startY + pointer.y - startPointer.y
+    }
+    const up = () => {
+      if (this.ctx.holder.value) this.ctx.holder.value.style.cursor = ''
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      window.removeEventListener('pointercancel', up)
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    window.addEventListener('pointercancel', up)
+    e.preventDefault()
+    return true
+  }
+
+  /** 依据层级树当前选中对象生成 gizmo 目标(读写其 x/y/rotation/scale)。 */
+  selectedTransformTarget(): SceneTransformTarget | null {
+    const store = this.ctx.store
+    const id = store.activeObjectId
+    if (store.activeObjectType === 'particle') {
+      const system = store.systems.find((item) => item.id === id)
+      if (!system || system.visible === false) return null
+      const config = system.config
+      return {
+        x: config.centerX, y: config.centerY, rotation: config.rootRotation,
+        scaleX: config.rootScaleX ?? 1, scaleY: config.rootScaleY ?? 1,
+        setPosition: (x, y) => { config.centerX = x; config.centerY = y },
+        setRotation: (rotation) => { config.rootRotation = rotation },
+        setScale: (scaleX, scaleY) => { config.rootScaleX = scaleX; config.rootScaleY = scaleY },
+      }
+    }
+    const collection = store.activeObjectType === 'collision'
+      ? store.colliders
+      : store.activeObjectType === 'path'
+        ? store.paths
+        : store.spines
+    const object = collection.find((item) => item.id === id) as any
+    if (!object || object.visible === false) return null
+    return {
+      x: Number(object.x) || 0, y: Number(object.y) || 0, rotation: Number(object.rotation) || 0,
+      scaleX: Math.max(0.05, Number(object.scaleX) || 1), scaleY: Math.max(0.05, Number(object.scaleY) || 1),
+      setPosition: (x, y) => { object.x = x; object.y = y },
+      setRotation: (rotation) => { object.rotation = rotation },
+      setScale: (scaleX, scaleY) => { object.scaleX = scaleX; object.scaleY = scaleY },
+    }
+  }
+
+  /** 场景对象 gizmo 拖拽：作用于场景树当前选中对象。 */
+  onGizmoDown(e: PointerEvent) {
+    const target = this.selectedTransformTarget()
+    if (!target) return
+    const app = this.ctx.app()!
+    const store = this.ctx.store
+    const sc = store.editor.viewScale
+    const rect = this.ctx.holder.value!.getBoundingClientRect()
+    const cx = rect.left + app.screen.width / 2 + store.editor.viewX + target.x * sc
+    const cy = rect.top + app.screen.height * 0.5 + store.editor.viewY + (-target.y) * sc
+    const startX = e.clientX, startY = e.clientY
+    const tool = this.getTool()
+    // 初始基准(按下时快照,后续基于快照 + 相对按下点的总增量,避免累积误差/抖动)
+    const sCx = target.x, sCy = target.y
+    const sRot = target.rotation
+    const sSx = target.scaleX, sSy = target.scaleY
+    const startDist = Math.hypot(startX - cx, startY - cy) || 1
+    const startAngle = Math.atan2(startY - cy, startX - cx)
+
+    const move = (ev: PointerEvent) => {
+      const dx = (ev.clientX - startX) / sc
+      const dy = (ev.clientY - startY) / sc
+      if (tool === 'translate') {
+        // 位移:按下基准 + 总位移(离手快照,不累积)
+        target.setPosition(sCx + dx, sCy - dy)
+      } else if (tool === 'rotate') {
+        const a = Math.atan2(ev.clientY - cy, ev.clientX - cx)
+        // 跟手:拖拽环动方向 = 旋转方向(逆时针环动→逆时针,顺时针环动→顺时针)。
+        // 渲染层 em.rotation=-rootRotation(屏幕坐标),故这里对屏幕 atan2 增量取反,使 rootRotation 在数学坐标下与拖拽环动同向。
+        target.setRotation(sRot - (a - startAngle) * 180 / Math.PI)
+      } else if (tool === 'scale') {
+        const nd = Math.hypot(ev.clientX - cx, ev.clientY - cy)
+        const f = nd / startDist
+        target.setScale(Math.max(0.05, sSx * f), Math.max(0.05, sSy * f))
+      }
+    }
+    installPointerDrag(move)
+  }
+}

src/views/stage/pathEditing.ts

@@ -0,0 +1,157 @@
+import { worldToPathLocal } from './stageGeometry'
+import { installPointerDrag } from './pointerDrag'
+import { pointerToWorldMath, type StageContext } from './viewControls'
+
+/**
+ * 路径节点编辑：双击增删锚点、单击选中/多选/反选、框选、锚点与贝塞尔手柄拖拽。
+ * 与原 Stage.vue 实现逐行为等价，仅把函数移到模块并显式传入共享状态。
+ */
+export class PathEditing {
+  /** 多选节点集合(选中层级树路径对象时启用)。 */
+  readonly selectedNodes = new Set<number>()
+  /** 双击后抑制紧随其后的又一次双击(单击建锚已处理过)。 */
+  private suppressNextDoubleClick = false
+
+  constructor(private ctx: StageContext) {}
+
+  resetSelection() {
+    this.selectedNodes.clear()
+  }
+
+  activePath() {
+    const store = this.ctx.store
+    if (store.activeObjectType !== 'path') return null
+    const path = store.paths.find((item) => item.id === store.activeObjectId) || null
+    return path?.visible === false ? null : path
+  }
+
+  private pathInsertIndex(path: NonNullable<ReturnType<PathEditing['activePath']>>, x: number, y: number) {
+    if (path.points.length < 2) return path.points.length
+    const segments = path.closed ? path.points.length : path.points.length - 1
+    let bestIndex = path.points.length
+    let bestDistance = Infinity
+    for (let index = 0; index < segments; index++) {
+      const a = path.points[index], b = path.points[(index + 1) % path.points.length]
+      const dx = b.x - a.x, dy = b.y - a.y
+      const lengthSq = Math.max(0.0001, dx * dx + dy * dy)
+      const amount = Math.min(1, Math.max(0, ((x - a.x) * dx + (y - a.y) * dy) / lengthSq))
+      const px = a.x + dx * amount, py = a.y + dy * amount
+      const distance = Math.hypot(x - px, y - py)
+      if (distance < bestDistance) { bestDistance = distance; bestIndex = index + 1 }
+    }
+    return bestIndex
+  }
+
+  /** 双击：删除命中的锚点，否则在最近线段处插入新锚点。 */
+  onStageDoubleClick(e: MouseEvent) {
+    const path = this.activePath()
+    if (!path || !path.enabled) return
+    if (this.suppressNextDoubleClick) { this.suppressNextDoubleClick = false; return }
+    const pointer = pointerToWorldMath(this.ctx, e.clientX, e.clientY)
+    const local = worldToPathLocal(path, pointer.x, pointer.y)
+    const threshold = 9 / Math.max(0.01, this.ctx.store.editor.viewScale)
+    const anchorIndex = path.points.findIndex((point) => Math.hypot(point.x - local.x, point.y - local.y) <= threshold)
+    if (anchorIndex >= 0) {
+      path.points.splice(anchorIndex, 1)
+      this.selectedNodes.clear()
+      return
+    }
+    const insertIndex = this.pathInsertIndex(path, local.x, local.y)
+    path.points.splice(insertIndex, 0, { x: local.x, y: local.y, inX: 0, inY: 0, outX: 0, outY: 0 })
+    this.selectedNodes.clear()
+    this.selectedNodes.add(insertIndex)
+  }
+
+  /** 单击路径：返回 true 表示事件已被路径编辑接管。 */
+  onPointerDown(e: PointerEvent): boolean {
+    const path = this.activePath()
+    if (!path || !path.enabled) return false
+    const pointer = pointerToWorldMath(this.ctx, e.clientX, e.clientY)
+    const local = worldToPathLocal(path, pointer.x, pointer.y)
+    const threshold = 9 / Math.max(0.01, this.ctx.store.editor.viewScale)
+    if (e.detail >= 2) {
+      const existing = path.points.findIndex((point) => Math.hypot(point.x - local.x, point.y - local.y) <= threshold)
+      if (existing >= 0) return true
+      const anchor = { x: local.x, y: local.y, inX: 0, inY: 0, outX: 0, outY: 0 }
+      const insertIndex = this.pathInsertIndex(path, local.x, local.y)
+      path.points.splice(insertIndex, 0, anchor)
+      this.selectedNodes.clear()
+      this.selectedNodes.add(insertIndex)
+      this.suppressNextDoubleClick = true
+      installPointerDrag((event) => {
+        const worldPoint = pointerToWorldMath(this.ctx, event.clientX, event.clientY)
+        const next = worldToPathLocal(path, worldPoint.x, worldPoint.y)
+        anchor.outX = next.x - anchor.x
+        anchor.outY = next.y - anchor.y
+        anchor.inX = -anchor.outX
+        anchor.inY = -anchor.outY
+      })
+      return true
+    }
+    let handleHit: { index: number; side: 'in' | 'out' } | null = null
+    for (const index of this.selectedNodes) {
+      const point = path.points[index]
+      if (!point) continue
+      if (Math.hypot(point.x + point.inX - local.x, point.y + point.inY - local.y) <= threshold) handleHit = { index, side: 'in' }
+      if (Math.hypot(point.x + point.outX - local.x, point.y + point.outY - local.y) <= threshold) handleHit = { index, side: 'out' }
+    }
+    if (handleHit) {
+      const point = path.points[handleHit.index]
+      const oppositeLength = handleHit.side === 'in' ? Math.hypot(point.outX, point.outY) : Math.hypot(point.inX, point.inY)
+      const move = (event: PointerEvent) => {
+        const worldPoint = pointerToWorldMath(this.ctx, event.clientX, event.clientY)
+        const next = worldToPathLocal(path, worldPoint.x, worldPoint.y)
+        const hx = next.x - point.x, hy = next.y - point.y
+        if (handleHit!.side === 'in') { point.inX = hx; point.inY = hy } else { point.outX = hx; point.outY = hy }
+        if (!event.altKey) {
+          const length = Math.max(0.0001, Math.hypot(hx, hy))
+          const mirrorLength = event.shiftKey ? length : oppositeLength
+          if (handleHit!.side === 'in') { point.outX = -hx / length * mirrorLength; point.outY = -hy / length * mirrorLength }
+          else { point.inX = -hx / length * mirrorLength; point.inY = -hy / length * mirrorLength }
+        }
+      }
+      installPointerDrag(move)
+      return true
+    }
+    const anchorIndex = path.points.findIndex((point) => Math.hypot(point.x - local.x, point.y - local.y) <= threshold)
+    if (anchorIndex >= 0) {
+      if (e.altKey) { this.selectedNodes.delete(anchorIndex); return true }
+      if (e.ctrlKey || e.metaKey) this.selectedNodes.add(anchorIndex)
+      else if (!this.selectedNodes.has(anchorIndex)) { this.selectedNodes.clear(); this.selectedNodes.add(anchorIndex) }
+      const start = local
+      const origins = [...this.selectedNodes].map((index) => ({ index, x: path.points[index].x, y: path.points[index].y }))
+      const move = (event: PointerEvent) => {
+        const worldPoint = pointerToWorldMath(this.ctx, event.clientX, event.clientY)
+        const next = worldToPathLocal(path, worldPoint.x, worldPoint.y)
+        for (const origin of origins) {
+          path.points[origin.index].x = origin.x + next.x - start.x
+          path.points[origin.index].y = origin.y + next.y - start.y
+        }
+      }
+      installPointerDrag(move)
+      return true
+    }
+    if (e.altKey && !e.ctrlKey && !e.metaKey) { this.selectedNodes.clear(); return true }
+    if (e.ctrlKey || e.metaKey || e.altKey) {
+      const start = local
+      const subtract = e.altKey
+      const up = (event: PointerEvent) => {
+        const endWorld = pointerToWorldMath(this.ctx, event.clientX, event.clientY)
+        const end = worldToPathLocal(path, endWorld.x, endWorld.y)
+        const minX = Math.min(start.x, end.x), maxX = Math.max(start.x, end.x)
+        const minY = Math.min(start.y, end.y), maxY = Math.max(start.y, end.y)
+        path.points.forEach((point, index) => {
+          if (point.x >= minX && point.x <= maxX && point.y >= minY && point.y <= maxY) {
+            if (subtract) this.selectedNodes.delete(index); else this.selectedNodes.add(index)
+          }
+        })
+        window.removeEventListener('pointerup', up)
+        window.removeEventListener('pointercancel', up)
+      }
+      window.addEventListener('pointerup', up)
+      window.addEventListener('pointercancel', up)
+      return true
+    }
+    return false
+  }
+}

src/views/stage/pointerDrag.ts

@@ -0,0 +1,14 @@
+/**
+ * 统一的指针拖拽安装器：move 挂到 pointermove，pointerup/pointercancel 时自动清理。
+ * 原先散落在 Stage.vue 各拖拽手势中的重复样板收拢于此。
+ */
+export function installPointerDrag(move: (event: PointerEvent) => void) {
+  const up = () => {
+    window.removeEventListener('pointermove', move)
+    window.removeEventListener('pointerup', up)
+    window.removeEventListener('pointercancel', up)
+  }
+  window.addEventListener('pointermove', move)
+  window.addEventListener('pointerup', up)
+  window.addEventListener('pointercancel', up)
+}

src/views/stage/textureLoading.ts

@@ -0,0 +1,30 @@
+import { Texture } from 'pixi.js'
+import { ensureEmitterConfig } from '../../core/particleEmitter'
+import type { useParticleStore } from '../../store/particleStore'
+
+type EditorStore = ReturnType<typeof useParticleStore>
+
+/** 加载内置粒子点与拖尾纹理(仅加载一次)。 */
+export async function loadDefaultTextures() {
+  const [particleTexture, trailTexture] = await Promise.all([
+    Texture.fromURL('/images/star.png'),
+    Texture.fromURL('/images/trail.png'),
+  ])
+  return { dotTex: particleTexture, trailTex: trailTexture }
+}
+
+/** 把默认贴图补挂到尚未绑定纹理的系统与资源上(挂载时执行一次)。 */
+export function attachDefaultTextures(store: EditorStore, dotTex: Texture<any>, trailTex: Texture<any> | null) {
+  for (const sys of store.systems) {
+    sys.config.texture = dotTex
+    const cfg = ensureEmitterConfig(sys.config as any)
+    if (trailTex) {
+      for (const resource of cfg.trailResources) {
+        if (!resource.texture && (resource.previewUrl === '/images/trail.png' || resource.previewUrl === '/trails/trail.png')) resource.texture = trailTex
+      }
+    }
+    for (const resource of cfg.imageResources) {
+      if (!resource.texture && resource.textureName === 'star') resource.texture = dotTex
+    }
+  }
+}

src/views/stage/viewControls.ts

@@ -0,0 +1,88 @@
+import type { Application } from 'pixi.js'
+import type { Ref } from 'vue'
+import type { useParticleStore } from '../../store/particleStore'
+import { installPointerDrag } from './pointerDrag'
+
+type EditorStore = ReturnType<typeof useParticleStore>
+
+/** Stage 各交互/渲染模块共享的运行时引用。 */
+export interface StageContext {
+  store: EditorStore
+  /** 画布容器 DOM(Pixi canvas 的父元素) */
+  holder: Ref<HTMLElement | null>
+  /** Pixi Application(初始化前为 null) */
+  app: () => Application | null
+}
+
+/** 屏幕像素坐标 → 世界数学坐标(Y 向上)。 */
+export function pointerToWorldMath(ctx: StageContext, clientX: number, clientY: number) {
+  const holder = ctx.holder.value!
+  const app = ctx.app()!
+  const rect = holder.getBoundingClientRect()
+  const scale = Math.max(0.0001, ctx.store.editor.viewScale)
+  const screenX = clientX - rect.left
+  const screenY = clientY - rect.top
+  return {
+    x: (screenX - app.screen.width / 2 - ctx.store.editor.viewX) / scale,
+    y: -(screenY - app.screen.height * 0.5 - ctx.store.editor.viewY) / scale,
+  }
+}
+
+/** 滚轮缩放画布(viewScale)，基于鼠标所在位置缩放更平滑。 */
+export function onWheel(ctx: StageContext, e: WheelEvent) {
+  const holder = ctx.holder.value!
+  const app = ctx.app()!
+  const store = ctx.store
+  const rect = holder.getBoundingClientRect()
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12
+  const old = store.editor.viewScale
+  const nn = Math.max(0.01, old * factor)
+  // 保持鼠标下的世界点不动：调整 viewX/viewY
+  const cx = app.screen.width / 2
+  const cy = app.screen.height * 0.5
+  const oldVX = store.editor.viewX
+  const oldVY = store.editor.viewY
+  // 鼠标处 world 坐标(之前)，需扣除当前平移偏移
+  const wx = (mx - cx - oldVX) / old
+  const wy = (my - cy - oldVY) / old
+  store.editor.viewX = mx - cx - wx * nn
+  store.editor.viewY = my - cy - wy * nn
+  store.editor.viewScale = nn
+}
+
+/** 鼠标左键长按拖动画布(平移)。 */
+export function panView(ctx: StageContext, startX: number, startY: number) {
+  const store = ctx.store
+  const vx0 = store.editor.viewX
+  const vy0 = store.editor.viewY
+  installPointerDrag((ev) => {
+    store.editor.viewX = vx0 + (ev.clientX - startX)
+    store.editor.viewY = vy0 + (ev.clientY - startY)
+  })
+}
+
+export function viewScaleBy(ctx: StageContext, factor: number) {
+  const nn = Math.max(0.01, ctx.store.editor.viewScale * factor)
+  ctx.store.editor.viewScale = nn
+}
+
+export function zoomIn(ctx: StageContext) { viewScaleBy(ctx, 1.2) }
+export function zoomOut(ctx: StageContext) { viewScaleBy(ctx, 1 / 1.2) }
+
+export function fitView(ctx: StageContext) {
+  ctx.store.editor.viewScale = 1.0
+  ctx.store.editor.viewX = 0
+  ctx.store.editor.viewY = 0
+}
+
+export function resetView(ctx: StageContext) {
+  ctx.store.editor.viewScale = 1.0
+  ctx.store.editor.viewX = 0
+  ctx.store.editor.viewY = 0
+}
+
+export function toggleGrid(ctx: StageContext) {
+  ctx.store.settings.showGrid = !ctx.store.settings.showGrid
+}