diff --git a/frontend/App.vue b/frontend/App.vue
index ec9a8e6..b660703 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -38,18 +38,18 @@ export default {
 		font-display: swap;
 	}
 
-	/* 引入圆体字体 */
-	@font-face {
-		font-family: 'yt';
-		src: url('/static/fonts/经典圆体简.ttf') format('truetype');
-		font-weight: normal;
-		font-style: normal;
-		font-display: swap;
-	}
+	/* 圆体 JDLTYuanTiJian.ttf 在部分 Android WebView 上报 OTS/cmap 解析失败，暂不 @font-face 加载，避免控制台告警与渲染异常 */
 
 	/* 全局字体设置 */
 	body {
-		font-family: 'yt', sans-serif;
+		font-family:
+			-apple-system,
+			BlinkMacSystemFont,
+			'PingFang SC',
+			'Hiragino Sans GB',
+			'Microsoft YaHei',
+			'Noto Sans SC',
+			sans-serif;
 	}
 
 	/* App 容器 */
diff --git a/frontend/composables/useLenticularStudioTilt.js b/frontend/composables/useLenticularStudioTilt.js
new file mode 100644
index 0000000..2a0a636
--- /dev/null
+++ b/frontend/composables/useLenticularStudioTilt.js
@@ -0,0 +1,768 @@
+/**
+ * 光栅卡工作室倾斜驱动：App 优先 imengyu-UniAndroidGyro（DCloud 插件 id=6237），否则加速度计。
+ *
+ * 与插件约定对齐（官方说明）：
+ * - 模块：`imengyu-UniAndroidGyro-GyroModule`，`uni.requireNativePlugin`。
+ * - `startGyro`：首包回调仅 success/errMsg/notSupport（**无 x/y/z 角度属正常**）；持续数据需 **`getGyroValue` 轮询**（插件官方示例）；勿把首包当「无参数」故障。
+ * - `startGyroWithCallback`：部分自定义基座 + HX SDK 组合下长期收不到角度帧；本实现以 **startGyro + 轮询** 为主，WithCallback 为兜底。
+ * - 轮询：插件若同时提供 `getGyroValue` 与 `getGyroValueSync`，**优先异步**（与官方示例一致）；部分环境下 Sync 长期无 x/y/z，易触发看门狗回退。
+ * - 再次开启前须 `getGyroStarted`；若已在监听则先 `stopGyro`（不可重复开启）。
+ * - 页面进入后立即监听前宜延时再 start（官方示例约 100ms）。
+ * - 插件返回的 x/y/z 为**当前各轴角度（度）**，与「进入光栅卡时采样的基准角」做差得到相对姿态；离散档位应使用**与轴向切换无关**的标量（如 max(|Δx|,|Δy|,|Δz|)），避免「谁幅度大跟谁」在临界区来回跳轴导致画面乱切。
+ * - 原生陀螺看门狗：按「**连续无有效角度帧**」计时（每来一帧即重置），避免固定短超时与晚首包 / `getGyroStarted`→`stopGyro`→`kick` 慢链冲突；超时仍无帧再回退加速度计。
+ *
+ * @see https://ext.dcloud.net.cn/plugin?id=6237
+ */
+
+const NATIVE_PLUGIN_ID = 'imengyu-UniAndroidGyro-GyroModule'
+
+/** iOS 等环境下布尔可能为字符串 `'true'` */
+function isTruthyFlag(v) {
+	return v === true || v === 'true'
+}
+
+function hasAnglePayload(res) {
+	if (!res || typeof res !== 'object') return false
+	/** 插件首包常无 x/y/z；有数值（含 0）才视为角度帧 */
+	return [res.x, res.y, res.z].some((v) => Number.isFinite(Number(v)))
+}
+
+/** 无角度包时：仅明确失败才放弃原生；success 缺省不等同于失败（部分 ROM 首包字段不全） */
+function isExplicitGyroHandshakeFailure(res) {
+	if (!res || typeof res !== 'object') return false
+	if (isTruthyFlag(res.notSupport)) return true
+	if (res.success === false || res.success === 'false') return true
+	if (res.success === '') return true
+	return false
+}
+
+// #ifdef APP-PLUS
+function tryRequireImengyuGyro() {
+	try {
+		if (typeof uni === 'undefined' || typeof uni.requireNativePlugin !== 'function') return null
+		const mod = uni.requireNativePlugin(NATIVE_PLUGIN_ID)
+		const okPoll =
+			mod &&
+			typeof mod.startGyro === 'function' &&
+			typeof mod.stopGyro === 'function' &&
+			(typeof mod.getGyroValue === 'function' || typeof mod.getGyroValueSync === 'function')
+		const okCb =
+			mod &&
+			typeof mod.startGyroWithCallback === 'function' &&
+			typeof mod.stopGyro === 'function'
+		if (okPoll || okCb) {
+			return mod
+		}
+	} catch (e) {
+		console.warn('[useLenticularStudioTilt] requireNativePlugin failed', e)
+	}
+	return null
+}
+// #endif
+// #ifndef APP-PLUS
+function tryRequireImengyuGyro() {
+	return null
+}
+// #endif
+
+/** 基线帧数 */
+const ACCEL_BASELINE_FRAMES = 10
+const INSTANT_FULL_RAD = 0.32
+const MAX_STEP_RAD = 0.48
+const STEP_GAIN = 2.15
+const SIN_PHASE_SCALE = 1.18
+const BLEND_INSTANT = 0.38
+
+/** 原生插件：x/y/z 均为角度（度）；进入页面后先采若干帧算**基准角**（与官方「先 start 再轮询 getGyroValue」一致） */
+const NATIVE_BASELINE_FRAMES = 12
+const NATIVE_FULL_DEG = 10
+
+/** 加速度计直连 + 离散档位：进入后多帧圆均值定「水平」基准，避免首帧抖动 */
+const STUDIO_ACCEL_BASELINE_FRAMES = 12
+
+/** 连续无有效 x/y/z 角度帧则回退加速度计（ms）；覆盖 getGyroStarted→stopGyro→kick 慢链与晚首包 */
+const NATIVE_GYRO_STALL_FALLBACK_MS = 14000
+
+function deltaDeg(value, base) {
+	const v = Number(value)
+	const b = Number(base)
+	if (!Number.isFinite(v) || !Number.isFinite(b)) return 0
+	let d = v - b
+	while (d > 180) d -= 360
+	while (d < -180) d += 360
+	return d
+}
+
+/** 取与基线差最大的轴，避免握持方向不同导致「陀螺仪没反应」 */
+function pickDominantTiltDelta(dx, dy, dz) {
+	const ax = Math.abs(dx)
+	const ay = Math.abs(dy)
+	const az = Math.abs(dz)
+	if (ax >= ay && ax >= az) return dx
+	if (ay >= az) return dy
+	return dz
+}
+
+/** 相对基准的最大欧拉偏差（度），左右/多轴合成时仍单调，且不会在临界区因「换轴」突变符号 */
+function maxAbsTiltDeltaDeg(dx, dy, dz) {
+	return Math.max(Math.abs(dx), Math.abs(dy), Math.abs(dz))
+}
+
+/**
+ * 根据进入后采集的样本，选「抖动范围最大」的轴作为连续跟手的倾角轴（基线期手持微动时仍稳定）。
+ * @param {{ x: number, y: number, z: number }[]} samples
+ * @returns {0|1|2}
+ */
+function inferPrimaryTiltAxisFromSamples(samples) {
+	if (!samples || samples.length < 2) return 1
+	let bestAxis = 1
+	let bestSpread = -1
+	for (let axis = 0; axis < 3; axis++) {
+		const vals = samples.map((s) => [s.x, s.y, s.z][axis])
+		const mn = Math.min(...vals)
+		const mx = Math.max(...vals)
+		const spread = mx - mn
+		if (spread > bestSpread) {
+			bestSpread = spread
+			bestAxis = axis
+		}
+	}
+	/* 几乎完全静止：竖屏常见左右倾角在 y */
+	if (bestSpread < 0.35) return 1
+	return bestAxis
+}
+
+function circularMeanRad(rads) {
+	if (!rads.length) return 0
+	let sx = 0
+	let sy = 0
+	for (const r of rads) {
+		sx += Math.sin(r)
+		sy += Math.cos(r)
+	}
+	return Math.atan2(sx / rads.length, sy / rads.length)
+}
+
+function majorityPlane(votes) {
+	const cnt = { xz: 0, xy: 0, yz: 0 }
+	for (const v of votes) cnt[v] = (cnt[v] || 0) + 1
+	if (cnt.xz >= cnt.xy && cnt.xz >= cnt.yz) return 'xz'
+	if (cnt.xy >= cnt.yz) return 'xy'
+	return 'yz'
+}
+
+function detectGravityPlane(nx, ny, nz) {
+	const ax = Math.abs(nx)
+	const ay = Math.abs(ny)
+	const az = Math.abs(nz)
+	if (ay >= ax && ay >= az) return 'xz'
+	if (az >= ax && az >= ay) return 'xy'
+	return 'yz'
+}
+
+function uvForPlane(nx, ny, nz, mode) {
+	if (mode === 'xz') return { u: nx, v: nz }
+	if (mode === 'xy') return { u: nx, v: ny }
+	return { u: ny, v: nz }
+}
+
+/**
+ * @param {object} opts
+ * @param {(x: number, y: number) => void} opts.simulate
+ * @param {(tiltMagDeg: number) => void} [opts.simulateFromSignedDegrees] 若提供：用相对进入时基准的**倾角标量（度）**驱动预览（由页面做离散档位等）；原生/加速度计侧会喂入非负幅度为主
+ * @param {import('vue').Ref<string>} opts.gyroSourceLabel
+ * @param {boolean} [opts.useStudioAccelDirect] 光栅工作室：加速度计用重力投影直连（免原 warmup）
+ * @param {() => void} [opts.onTiltDriverFallback] 从原生陀螺失败/超时回退到加速度计时调用（用于重置离散档位等 UI 状态）
+ */
+export function useLenticularStudioTilt(opts) {
+	const {
+		simulate,
+		simulateFromSignedDegrees,
+		gyroSourceLabel,
+		useStudioAccelDirect = false,
+		onTiltDriverFallback,
+	} = opts
+
+	let mode = /** @type {'native'|'accel'} */ ('accel')
+	let gyroModule = null
+	let nativeStartTimer = null
+	let nativeWatchdogTimer = null
+	let gyroCbGuardTimer = null
+	let nativePollTimer = null
+	/** @type {{ x: number, y: number, z: number }[]} */
+	let nativeTrSamples = []
+	let nativeBase = { x: 0, y: 0, z: 0 }
+	let nativeBaselineReady = false
+	let nativeSmoothed = 0
+	/** 连续模式下与基线样本推断的主倾角轴（0=x,1=y,2=z），避免每帧在 x/y 间抢主导 */
+	let nativeLockedAxisIdx = 1
+	/** 递增以丢弃 stop 之后的原生回调 / 延时任务 */
+	let tiltGen = 0
+	/** 原生：每次收到角度帧时重置该计时器；超时仍无帧则回退加速度计 */
+	let scheduleNativeGyroStallFallback = /** @type {null | (() => void)} */ (null)
+
+	/** 加速度计直连：多帧采样缓冲，填满后取圆均值为基准角 */
+	let studioAccelBaselineRads = []
+	/** 加速度计直连模式下「校零」后的基准（弧度），仅与 simulateFromSignedDegrees 联用 */
+	let studioAccelBaseRad = null
+
+	let accelHandler = null
+	let accelSmoothed = 0
+	let rollAccum = 0
+	let prevCu = null
+	let prevCv = null
+
+	let tiltCal = {
+		lockedMode: null,
+		planeVotes: [],
+		sumU: 0,
+		sumV: 0,
+		count: 0,
+		ready: false,
+		bu: 1,
+		bv: 0,
+	}
+
+	function resetAccelCalibration() {
+		tiltCal = {
+			lockedMode: null,
+			planeVotes: [],
+			sumU: 0,
+			sumV: 0,
+			count: 0,
+			ready: false,
+			bu: 1,
+			bv: 0,
+		}
+	}
+
+	function resetNativeBaseline() {
+		nativeTrSamples = []
+		nativeBase = { x: 0, y: 0, z: 0 }
+		nativeBaselineReady = false
+		nativeSmoothed = 0
+		nativeLockedAxisIdx = 1
+	}
+
+	function resetStudioAccelBaseline() {
+		studioAccelBaseRad = null
+		studioAccelBaselineRads = []
+	}
+
+	function accelToRelativeTilt01(ax, ay, az) {
+		const gMag = Math.hypot(ax, ay, az)
+		if (gMag < 0.18) return null
+		const nx = ax / gMag
+		const ny = ay / gMag
+		const nz = az / gMag
+
+		if (!tiltCal.ready) {
+			const m = detectGravityPlane(nx, ny, nz)
+			if (tiltCal.planeVotes.length < 5) tiltCal.planeVotes.push(m)
+			if (tiltCal.planeVotes.length >= 5 && tiltCal.lockedMode == null) {
+				tiltCal.lockedMode = majorityPlane(tiltCal.planeVotes)
+				tiltCal.sumU = 0
+				tiltCal.sumV = 0
+				tiltCal.count = 0
+			}
+			if (tiltCal.lockedMode == null) return { warmup: true }
+			const { u, v } = uvForPlane(nx, ny, nz, tiltCal.lockedMode)
+			const h = Math.hypot(u, v)
+			if (h < 0.035) return { warmup: true }
+			tiltCal.sumU += u / h
+			tiltCal.sumV += v / h
+			tiltCal.count += 1
+			if (tiltCal.count >= ACCEL_BASELINE_FRAMES) {
+				const bh = Math.hypot(tiltCal.sumU, tiltCal.sumV) || 1
+				tiltCal.bu = tiltCal.sumU / bh
+				tiltCal.bv = tiltCal.sumV / bh
+				tiltCal.ready = true
+			}
+			return { warmup: true }
+		}
+
+		const { u, v } = uvForPlane(nx, ny, nz, tiltCal.lockedMode)
+		const h = Math.hypot(u, v)
+		if (h < 0.028) return null
+		const cu = u / h
+		const cv = v / h
+		const sinD = cu * tiltCal.bv - cv * tiltCal.bu
+		const cosD = cu * tiltCal.bu + cv * tiltCal.bv
+		const deltaRad = Math.atan2(sinD, cosD)
+		return { warmup: false, cu, cv, deltaRad }
+	}
+
+	function stopNative() {
+		tiltGen++
+		if (nativeWatchdogTimer != null) {
+			try {
+				clearTimeout(nativeWatchdogTimer)
+			} catch (e) {
+				/* noop */
+			}
+			nativeWatchdogTimer = null
+		}
+		if (gyroCbGuardTimer != null) {
+			try {
+				clearTimeout(gyroCbGuardTimer)
+			} catch (e) {
+				/* noop */
+			}
+			gyroCbGuardTimer = null
+		}
+		if (nativePollTimer != null) {
+			try {
+				clearInterval(nativePollTimer)
+			} catch (e) {
+				/* noop */
+			}
+			nativePollTimer = null
+		}
+		if (nativeStartTimer != null) {
+			try {
+				clearTimeout(nativeStartTimer)
+			} catch (e) {
+				/* noop */
+			}
+			nativeStartTimer = null
+		}
+		if (gyroModule && typeof gyroModule.stopGyro === 'function') {
+			try {
+				gyroModule.stopGyro(() => {})
+			} catch (e) {
+				/* noop */
+			}
+		}
+		gyroModule = null
+		mode = 'accel'
+		scheduleNativeGyroStallFallback = null
+	}
+
+	function stopAccel() {
+		try {
+			if (accelHandler && typeof uni.offAccelerometerChange === 'function') {
+				uni.offAccelerometerChange(accelHandler)
+			}
+		} catch (e) {
+			/* noop */
+		}
+		accelHandler = null
+		try {
+			uni.stopAccelerometer({})
+		} catch (e) {
+			/* noop */
+		}
+	}
+
+	function startAccelInternal(options = {}) {
+		const fromNativeFallback = options.fromNativeFallback === true
+		mode = 'accel'
+		stopAccel()
+		if (fromNativeFallback && typeof onTiltDriverFallback === 'function') {
+			try {
+				onTiltDriverFallback()
+			} catch (e) {
+				/* noop */
+			}
+		}
+		resetAccelCalibration()
+		accelSmoothed = 0
+		rollAccum = 0
+		prevCu = null
+		prevCv = null
+
+		if (useStudioAccelDirect) {
+			if (typeof simulateFromSignedDegrees === 'function') {
+				resetStudioAccelBaseline()
+			}
+			accelHandler = (res) => {
+				const ax = Number(res.x) || 0
+				const ay = Number(res.y) || 0
+				const az = Number(res.z) || 0
+				const gMag = Math.hypot(ax, ay, az)
+				if (gMag < 0.12) return
+				/* 竖屏常见握持：左右倾斜主要反映为 ax/az 与重力的关系（免 warmup，避免长期无输出） */
+				if (typeof simulateFromSignedDegrees === 'function') {
+					const tiltRad = Math.atan2(-ax, az)
+					if (studioAccelBaseRad == null) {
+						studioAccelBaselineRads.push(tiltRad)
+						if (studioAccelBaselineRads.length < STUDIO_ACCEL_BASELINE_FRAMES) {
+							simulate(0, 0)
+							return
+						}
+						studioAccelBaseRad = circularMeanRad(studioAccelBaselineRads)
+						studioAccelBaselineRads = []
+					}
+					let delta = tiltRad - studioAccelBaseRad
+					while (delta > Math.PI) delta -= 2 * Math.PI
+					while (delta < -Math.PI) delta += 2 * Math.PI
+					const signedDeg = delta * (180 / Math.PI)
+					simulateFromSignedDegrees(Math.abs(signedDeg))
+				} else {
+					const tiltRaw = Math.atan2(-ax, az) / (Math.PI / 5)
+					const tilt01 = Math.max(-1, Math.min(1, tiltRaw))
+					accelSmoothed += (tilt01 - accelSmoothed) * 0.58
+					simulate(Math.max(-1, Math.min(1, accelSmoothed)), 0)
+				}
+				gyroSourceLabel.value = 'accelerometer'
+			}
+		} else {
+			accelHandler = (res) => {
+				const ax = Number(res.x) || 0
+				const ay = Number(res.y) || 0
+				const az = Number(res.z) || 0
+				const out = accelToRelativeTilt01(ax, ay, az)
+				if (out == null) return
+				if (out.warmup) return
+				const { cu, cv, deltaRad } = out
+				if (prevCu != null && prevCv != null) {
+					let step = Math.atan2(cu * prevCv - cv * prevCu, cu * prevCu + cv * prevCv)
+					if (step > Math.PI * 0.92) step -= 2 * Math.PI
+					if (step < -Math.PI * 0.92) step += 2 * Math.PI
+					step = Math.max(-MAX_STEP_RAD, Math.min(MAX_STEP_RAD, step))
+					rollAccum += step * STEP_GAIN
+				}
+				prevCu = cu
+				prevCv = cv
+
+				const instant = Math.max(-1, Math.min(1, deltaRad / INSTANT_FULL_RAD))
+				const cyclic = Math.sin(rollAccum * SIN_PHASE_SCALE)
+				const target = BLEND_INSTANT * instant + (1 - BLEND_INSTANT) * cyclic
+
+				accelSmoothed += (target - accelSmoothed) * 0.74
+				simulate(Math.max(-1, Math.min(1, accelSmoothed)), 0)
+				gyroSourceLabel.value = 'accelerometer'
+			}
+		}
+		try {
+			uni.onAccelerometerChange(accelHandler)
+			const applyStart = (interval) => {
+				uni.startAccelerometer({
+					interval,
+					success: () => {
+						gyroSourceLabel.value = 'accelerometer'
+					},
+					fail: () => {
+						if (interval === 'game') {
+							applyStart('normal')
+							return
+						}
+						gyroSourceLabel.value = 'simulation'
+					},
+				})
+			}
+			applyStart('game')
+		} catch (e) {
+			gyroSourceLabel.value = 'simulation'
+		}
+	}
+
+	function onNativeAngleFrame(x, y, z) {
+		const vx = Number(x)
+		const vy = Number(y)
+		const vz = Number(z)
+		if (![vx, vy, vz].some(Number.isFinite)) return
+		/* 有角度帧即视为陀螺仪在工作，含基线采集期，避免看门狗误判「从未产出」而中途切加速度计 */
+		gyroSourceLabel.value = 'gyroscope'
+
+		if (!nativeBaselineReady) {
+			if ([vx, vy, vz].every(Number.isFinite)) {
+				nativeTrSamples.push({ x: vx, y: vy, z: vz })
+			}
+			if (nativeTrSamples.length >= NATIVE_BASELINE_FRAMES) {
+				const n = nativeTrSamples.length
+				nativeBase.x = nativeTrSamples.reduce((a, b) => a + b.x, 0) / n
+				nativeBase.y = nativeTrSamples.reduce((a, b) => a + b.y, 0) / n
+				nativeBase.z = nativeTrSamples.reduce((a, b) => a + b.z, 0) / n
+				nativeLockedAxisIdx = inferPrimaryTiltAxisFromSamples(nativeTrSamples)
+				nativeBaselineReady = true
+			}
+			simulate(0, 0)
+			if (typeof scheduleNativeGyroStallFallback === 'function') {
+				scheduleNativeGyroStallFallback()
+			}
+			return
+		}
+
+		const dx = deltaDeg(vx, nativeBase.x)
+		const dy = deltaDeg(vy, nativeBase.y)
+		const dz = deltaDeg(vz, nativeBase.z)
+		if (typeof simulateFromSignedDegrees === 'function') {
+			simulateFromSignedDegrees(maxAbsTiltDeltaDeg(dx, dy, dz))
+		} else {
+			const axisDeltas = [dx, dy, dz]
+			const chosen = axisDeltas[nativeLockedAxisIdx] ?? pickDominantTiltDelta(dx, dy, dz)
+			const tilt01 = Math.max(-1, Math.min(1, chosen / NATIVE_FULL_DEG))
+			/* 跟手：过低显钝；过高易抖。插件已做角度融合，此处略轻低通即可 */
+			nativeSmoothed += (tilt01 - nativeSmoothed) * 0.86
+			simulate(Math.max(-1, Math.min(1, nativeSmoothed)), 0)
+		}
+		if (typeof scheduleNativeGyroStallFallback === 'function') {
+			scheduleNativeGyroStallFallback()
+		}
+	}
+
+	function startNativeInternal() {
+		stopNative()
+		stopAccel()
+		resetNativeBaseline()
+		// #ifdef APP-PLUS
+		gyroModule = tryRequireImengyuGyro()
+		if (!gyroModule) {
+			mode = 'accel'
+			startAccelInternal()
+			return
+		}
+		mode = 'native'
+		const myGen = tiltGen
+		/** 与官方示例一致：normal / ui / game / fastest，game≈50Hz */
+		const startOpts = { interval: 'game' }
+
+		scheduleNativeGyroStallFallback = () => {
+			if (nativeWatchdogTimer != null) {
+				try {
+					clearTimeout(nativeWatchdogTimer)
+				} catch (e) {
+					/* noop */
+				}
+				nativeWatchdogTimer = null
+			}
+			nativeWatchdogTimer = setTimeout(() => {
+				nativeWatchdogTimer = null
+				if (myGen !== tiltGen) return
+				if (mode !== 'native') return
+				console.warn(
+					'[useLenticularStudioTilt] native gyro stalled (no angle frames for ' +
+						NATIVE_GYRO_STALL_FALLBACK_MS +
+						'ms), falling back to accelerometer'
+				)
+				stopNative()
+				startAccelInternal({ fromNativeFallback: true })
+			}, NATIVE_GYRO_STALL_FALLBACK_MS)
+		}
+
+		function invokeStartNativeGyro() {
+			const mod = gyroModule
+			if (myGen !== tiltGen || !mod) return
+
+			function startNativePoll() {
+				if (nativePollTimer != null) {
+					try {
+						clearInterval(nativePollTimer)
+					} catch (e) {
+						/* noop */
+					}
+					nativePollTimer = null
+				}
+				/**
+				 * 官方示例只用异步 getGyroValue；部分基座上 getGyroValueSync 长期无 x/y/z，
+				 * 仅在没有异步接口时才用 Sync（见插件 id=6237 说明）。
+				 */
+				const useSync =
+					typeof mod.getGyroValueSync === 'function' && typeof mod.getGyroValue !== 'function'
+				const intervalMs = useSync ? 20 : 28
+				const pollOnce = () => {
+					if (myGen !== tiltGen || !gyroModule) return
+					try {
+						if (useSync) {
+							const v = mod.getGyroValueSync()
+							if (v && hasAnglePayload(v)) {
+								onNativeAngleFrame(v.x, v.y, v.z)
+							}
+							return
+						}
+						mod.getGyroValue((v) => {
+							if (myGen !== tiltGen || !gyroModule || !v) return
+							if (hasAnglePayload(v)) {
+								onNativeAngleFrame(v.x, v.y, v.z)
+							}
+						})
+					} catch (e) {
+						/* noop */
+					}
+				}
+				pollOnce()
+				nativePollTimer = setInterval(pollOnce, intervalMs)
+			}
+
+			let kickOnce = false
+			const kick = () => {
+				if (kickOnce) return
+				if (myGen !== tiltGen || !gyroModule) return
+				kickOnce = true
+				if (gyroCbGuardTimer != null) {
+					try {
+						clearTimeout(gyroCbGuardTimer)
+					} catch (e) {
+						/* noop */
+					}
+					gyroCbGuardTimer = null
+				}
+
+				const usePoll =
+					typeof mod.startGyro === 'function' &&
+					(typeof mod.getGyroValue === 'function' || typeof mod.getGyroValueSync === 'function')
+
+				if (usePoll) {
+					try {
+						mod.startGyro(startOpts, (res) => {
+							if (myGen !== tiltGen || !gyroModule) return
+							/* 插件约定：首包只表示是否开启成功，不含持续角度；若回调无对象则无法进入官方要求的 getGyroValue 轮询 */
+							if (!res) {
+								console.warn(
+									'[useLenticularStudioTilt] startGyro callback received no argument (see plugin doc: first callback is handshake only)'
+								)
+								stopNative()
+								startAccelInternal({ fromNativeFallback: true })
+								return
+							}
+							if (isExplicitGyroHandshakeFailure(res)) {
+								console.warn('[useLenticularStudioTilt] startGyro handshake failed', res)
+								stopNative()
+								startAccelInternal({ fromNativeFallback: true })
+								return
+							}
+							/* 与官方示例一致：success 为真后再轮询；iOS 上常为字符串 'true' */
+							if (Object.prototype.hasOwnProperty.call(res, 'success') && !isTruthyFlag(res.success)) {
+								console.warn('[useLenticularStudioTilt] startGyro success=false', res)
+								stopNative()
+								startAccelInternal({ fromNativeFallback: true })
+								return
+							}
+							if (hasAnglePayload(res)) {
+								onNativeAngleFrame(res.x, res.y, res.z)
+							} else {
+								simulate(0, 0)
+							}
+							startNativePoll()
+						})
+					} catch (e) {
+						console.warn('[useLenticularStudioTilt] startGyro error', e)
+						stopNative()
+						startAccelInternal({ fromNativeFallback: true })
+					}
+					return
+				}
+
+				try {
+					mod.startGyroWithCallback(startOpts, (res) => {
+						if (myGen !== tiltGen || !gyroModule) return
+						if (!res) {
+							console.warn('[useLenticularStudioTilt] startGyroWithCallback: empty callback argument')
+							stopNative()
+							startAccelInternal({ fromNativeFallback: true })
+							return
+						}
+
+						if (!hasAnglePayload(res)) {
+							if (isExplicitGyroHandshakeFailure(res)) {
+								console.warn('[useLenticularStudioTilt] native gyro handshake failed', res)
+								stopNative()
+								startAccelInternal({ fromNativeFallback: true })
+								return
+							}
+							simulate(0, 0)
+							return
+						}
+
+						onNativeAngleFrame(res.x, res.y, res.z)
+					})
+				} catch (e) {
+					console.warn('[useLenticularStudioTilt] startGyroWithCallback error', e)
+					stopNative()
+					startAccelInternal({ fromNativeFallback: true })
+				}
+			}
+
+			if (typeof mod.getGyroStarted === 'function') {
+				gyroCbGuardTimer = setTimeout(() => {
+					gyroCbGuardTimer = null
+					if (myGen !== tiltGen || !gyroModule || kickOnce) return
+					console.warn('[useLenticularStudioTilt] getGyroStarted callback timeout, starting gyro')
+					kick()
+				}, 700)
+				mod.getGyroStarted((r) => {
+					if (gyroCbGuardTimer != null) {
+						try {
+							clearTimeout(gyroCbGuardTimer)
+						} catch (e) {
+							/* noop */
+						}
+						gyroCbGuardTimer = null
+					}
+					if (myGen !== tiltGen || !gyroModule) return
+					const started = r && isTruthyFlag(r.started)
+					if (started) {
+						let stopDone = false
+						const stopTimer = setTimeout(() => {
+							if (stopDone || myGen !== tiltGen || !gyroModule) return
+							stopDone = true
+							console.warn('[useLenticularStudioTilt] stopGyro callback timeout, continuing')
+							setTimeout(kick, 80)
+						}, 700)
+						mod.stopGyro(() => {
+							if (stopDone || myGen !== tiltGen || !gyroModule) return
+							stopDone = true
+							try {
+								clearTimeout(stopTimer)
+							} catch (e) {
+								/* noop */
+							}
+							setTimeout(kick, 80)
+						})
+					} else {
+						kick()
+					}
+				})
+			} else {
+				kick()
+			}
+		}
+
+		/* 官方：因 uni-app 原因，页面进入后需延时再 start（示例 100ms） */
+		nativeStartTimer = setTimeout(() => {
+			nativeStartTimer = null
+			if (myGen !== tiltGen || !gyroModule) return
+			invokeStartNativeGyro()
+			if (typeof scheduleNativeGyroStallFallback === 'function') {
+				scheduleNativeGyroStallFallback()
+			}
+		}, 100)
+		// #endif
+		// #ifndef APP-PLUS
+		mode = 'accel'
+		startAccelInternal()
+		// #endif
+	}
+
+	function start() {
+		// #ifdef APP-PLUS
+		startNativeInternal()
+		// #endif
+		// #ifndef APP-PLUS
+		startAccelInternal()
+		// #endif
+	}
+
+	function stop() {
+		stopNative()
+		stopAccel()
+	}
+
+	function recalibrate() {
+		resetAccelCalibration()
+		resetNativeBaseline()
+		resetStudioAccelBaseline()
+		accelSmoothed = 0
+		rollAccum = 0
+		prevCu = null
+		prevCv = null
+		simulate(0, 0)
+	}
+
+	return {
+		start,
+		stop,
+		recalibrate,
+	}
+}
diff --git a/frontend/main.js b/frontend/main.js
index 579a0cb..6867426 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -11,6 +11,10 @@ const app = new Vue({
 app.$mount()
 // #endif
 
+// #ifdef VUE3 && H5
+import './pages/castlove/create-laser-upload.css'
+// #endif
+
 // #ifdef VUE3
 import { createSSRApp } from 'vue'
 import store from './store'
diff --git a/frontend/manifest.json b/frontend/manifest.json
index 2daf2ff..b446a4a 100644
--- a/frontend/manifest.json
+++ b/frontend/manifest.json
@@ -1,6 +1,6 @@
 {
     "name" : "TopFans",
-    "appid" : "__UNI__F199FF4",
+    "appid" : "__UNI__8CBE431",
     "description" : "",
     "versionName" : "1.0.4",
     "versionCode" : 105,
@@ -26,6 +26,9 @@
             "Speech" : {},
             "Push" : {}
         },
+        "nativePlugins" : {
+            "imengyu-UniAndroidGyro" : {}
+        },
         /* 应用发布信息 */
         "distribute" : {
             /* android打包配置 */
@@ -72,37 +75,38 @@
                     }
                 },
                 "push" : {},
-                "statics" : {}
+                "statics" : {},
+                "ad" : {}
             },
             "icons" : {
                 "android" : {
-                    "hdpi" : "unpackage/res/icons/72x72.png",
-                    "xhdpi" : "unpackage/res/icons/96x96.png",
-                    "xxhdpi" : "unpackage/res/icons/144x144.png",
-                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                    "hdpi" : "static/app-icons/72x72.png",
+                    "xhdpi" : "static/app-icons/96x96.png",
+                    "xxhdpi" : "static/app-icons/144x144.png",
+                    "xxxhdpi" : "static/app-icons/192x192.png"
                 },
                 "ios" : {
-                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "appstore" : "static/app-icons/1024x1024.png",
                     "ipad" : {
-                        "app" : "unpackage/res/icons/76x76.png",
-                        "app@2x" : "unpackage/res/icons/152x152.png",
-                        "notification" : "unpackage/res/icons/20x20.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
-                        "proapp@2x" : "unpackage/res/icons/167x167.png",
-                        "settings" : "unpackage/res/icons/29x29.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
-                        "spotlight" : "unpackage/res/icons/40x40.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                        "app" : "static/app-icons/76x76.png",
+                        "app@2x" : "static/app-icons/152x152.png",
+                        "notification" : "static/app-icons/20x20.png",
+                        "notification@2x" : "static/app-icons/40x40.png",
+                        "proapp@2x" : "static/app-icons/167x167.png",
+                        "settings" : "static/app-icons/29x29.png",
+                        "settings@2x" : "static/app-icons/58x58.png",
+                        "spotlight" : "static/app-icons/40x40.png",
+                        "spotlight@2x" : "static/app-icons/80x80.png"
                     },
                     "iphone" : {
-                        "app@2x" : "unpackage/res/icons/120x120.png",
-                        "app@3x" : "unpackage/res/icons/180x180.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
-                        "notification@3x" : "unpackage/res/icons/60x60.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
-                        "settings@3x" : "unpackage/res/icons/87x87.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
-                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                        "app@2x" : "static/app-icons/120x120.png",
+                        "app@3x" : "static/app-icons/180x180.png",
+                        "notification@2x" : "static/app-icons/40x40.png",
+                        "notification@3x" : "static/app-icons/60x60.png",
+                        "settings@2x" : "static/app-icons/58x58.png",
+                        "settings@3x" : "static/app-icons/87x87.png",
+                        "spotlight@2x" : "static/app-icons/80x80.png",
+                        "spotlight@3x" : "static/app-icons/120x120.png"
                     }
                 }
             }
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/android/uni_android_gyro-release.aar b/frontend/nativePlugins/imengyu-UniAndroidGyro/android/uni_android_gyro-release.aar
new file mode 100644
index 0000000..0b76a8a
Binary files /dev/null and b/frontend/nativePlugins/imengyu-UniAndroidGyro/android/uni_android_gyro-release.aar differ
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/GyroPlugin b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/GyroPlugin
new file mode 100644
index 0000000..867beb9
Binary files /dev/null and b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/GyroPlugin differ
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/Info.plist b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/Info.plist
new file mode 100644
index 0000000..f07f4fe
Binary files /dev/null and b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/Info.plist differ
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeDirectory b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeDirectory
new file mode 100644
index 0000000..5d27666
Binary files /dev/null and b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeDirectory differ
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeRequirements b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeRequirements
new file mode 100644
index 0000000..6a34f37
Binary files /dev/null and b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeRequirements differ
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeRequirements-1 b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeRequirements-1
new file mode 100644
index 0000000..8e7ff51
Binary files /dev/null and b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeRequirements-1 differ
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeResources b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeResources
new file mode 100644
index 0000000..b552e06
--- /dev/null
+++ b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeResources
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>files</key>
+	<dict>
+		<key>Info.plist</key>
+		<data>
+		8XOwyvu+OiYnMWBub0JdOOoIL9c=
+		</data>
+	</dict>
+	<key>files2</key>
+	<dict/>
+	<key>rules</key>
+	<dict>
+		<key>^.*</key>
+		<true/>
+		<key>^.*\.lproj/</key>
+		<dict>
+			<key>optional</key>
+			<true/>
+			<key>weight</key>
+			<real>1000</real>
+		</dict>
+		<key>^.*\.lproj/locversion.plist$</key>
+		<dict>
+			<key>omit</key>
+			<true/>
+			<key>weight</key>
+			<real>1100</real>
+		</dict>
+		<key>^Base\.lproj/</key>
+		<dict>
+			<key>weight</key>
+			<real>1010</real>
+		</dict>
+		<key>^version.plist$</key>
+		<true/>
+	</dict>
+	<key>rules2</key>
+	<dict>
+		<key>.*\.dSYM($|/)</key>
+		<dict>
+			<key>weight</key>
+			<real>11</real>
+		</dict>
+		<key>^(.*/)?\.DS_Store$</key>
+		<dict>
+			<key>omit</key>
+			<true/>
+			<key>weight</key>
+			<real>2000</real>
+		</dict>
+		<key>^.*</key>
+		<true/>
+		<key>^.*\.lproj/</key>
+		<dict>
+			<key>optional</key>
+			<true/>
+			<key>weight</key>
+			<real>1000</real>
+		</dict>
+		<key>^.*\.lproj/locversion.plist$</key>
+		<dict>
+			<key>omit</key>
+			<true/>
+			<key>weight</key>
+			<real>1100</real>
+		</dict>
+		<key>^Base\.lproj/</key>
+		<dict>
+			<key>weight</key>
+			<real>1010</real>
+		</dict>
+		<key>^Info\.plist$</key>
+		<dict>
+			<key>omit</key>
+			<true/>
+			<key>weight</key>
+			<real>20</real>
+		</dict>
+		<key>^PkgInfo$</key>
+		<dict>
+			<key>omit</key>
+			<true/>
+			<key>weight</key>
+			<real>20</real>
+		</dict>
+		<key>^embedded\.provisionprofile$</key>
+		<dict>
+			<key>weight</key>
+			<real>20</real>
+		</dict>
+		<key>^version\.plist$</key>
+		<dict>
+			<key>weight</key>
+			<real>20</real>
+		</dict>
+	</dict>
+</dict>
+</plist>
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeSignature b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeSignature
new file mode 100644
index 0000000..a676c08
Binary files /dev/null and b/frontend/nativePlugins/imengyu-UniAndroidGyro/ios/GyroPlugin.framework/_CodeSignature/CodeSignature differ
diff --git a/frontend/nativePlugins/imengyu-UniAndroidGyro/package.json b/frontend/nativePlugins/imengyu-UniAndroidGyro/package.json
new file mode 100644
index 0000000..ac0a30b
--- /dev/null
+++ b/frontend/nativePlugins/imengyu-UniAndroidGyro/package.json
@@ -0,0 +1,30 @@
+{
+    "name": "imengyu-UniAndroidGyro",
+    "id": "imengyu-UniAndroidGyro",
+    "version": "1.0.5",
+    "description": "APP端陀螺仪数据采集",
+    "_dp_type": "nativeplugin",
+    "_dp_nativeplugin": {
+        "android": {
+            "plugins": [
+                {
+                    "type": "module",
+                    "name": "imengyu-UniAndroidGyro-GyroModule",
+                    "class": "uni.imengyu.gyro.GyroModule"
+                }
+            ],
+            "integrateType": "aar",
+            "minSdkVersion": "19"
+        },
+        "ios": {
+            "plugins": [{
+                "type": "module",
+                "name": "imengyu-UniAndroidGyro-GyroModule",
+                "class": "GyroModule"
+            }],
+            "frameworks": ["MapKit.framework"],
+            "integrateType": "framework",
+            "deploymentTarget": "9.0"
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/pages.json b/frontend/pages.json
index 3600c4a..72bf6a0 100644
--- a/frontend/pages.json
+++ b/frontend/pages.json
@@ -229,5 +229,15 @@
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	},
-	"uniIdRouter": {}
+	"uniIdRouter": {},
+	"condition": {
+		"current": 0,
+		"list": [
+			{
+				"name": "castlove-lenticular-create",
+				"path": "pages/castlove/create",
+				"query": "name=%E5%85%89%E6%A0%85%E5%8D%A1"
+			}
+		]
+	}
 }
\ No newline at end of file
diff --git a/frontend/pages/castlove/create-laser-upload.css b/frontend/pages/castlove/create-laser-upload.css
new file mode 100644
index 0000000..a26a70f
--- /dev/null
+++ b/frontend/pages/castlove/create-laser-upload.css
@@ -0,0 +1,117 @@
+/**
+ * 铸爱 create 页 — 镭射卡上传区样式（独立 CSS，由 create.vue import，确保各端构建必进包）
+ * 根类 castlove-laser-upload-root 全局唯一，避免 scoped / 第二 style 块在部分端未生效
+ */
+.castlove-laser-upload-root {
+	position: relative;
+	width: 100%;
+	/* 略偏竖版小卡比例，接近设计稿「大卡 + 内虚线」观感 */
+	height: 520rpx;
+	box-sizing: border-box;
+	border-radius: 32rpx;
+	border: 1rpx solid rgba(255, 255, 255, 0.38);
+	background: rgba(255, 255, 255, 0.18);
+	backdrop-filter: blur(22rpx);
+	-webkit-backdrop-filter: blur(22rpx);
+	overflow: hidden;
+	box-shadow:
+		0 22rpx 56rpx rgba(40, 22, 80, 0.36),
+		inset 0 0 0 1rpx rgba(255, 255, 255, 0.22);
+}
+
+.castlove-laser-upload-root .uploaded-image {
+	width: 100%;
+	height: 100%;
+	border-radius: 24rpx;
+	box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.22);
+}
+
+.castlove-laser-upload-root .upload-laser-stack {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	box-sizing: border-box;
+}
+
+/* 与设计稿一致：卡内淡色「卡面 / 人像」底图（与工艺选择同款素材） */
+.castlove-laser-upload-root .upload-laser-photo-bg {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	opacity: 0.22;
+	pointer-events: none;
+	filter: saturate(1.15) contrast(0.92);
+}
+
+.castlove-laser-upload-root .upload-laser-watermark {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+	opacity: 1;
+	pointer-events: none;
+	/* 叠在底图上：压暗边缘 + 轻微幻彩，避免只剩「灰蒙一块」 */
+	background:
+		linear-gradient(
+			118deg,
+			rgba(255, 170, 220, 0.12) 0%,
+			transparent 40%,
+			rgba(170, 210, 255, 0.1) 62%,
+			transparent 82%,
+			rgba(255, 210, 190, 0.08) 100%
+		),
+		radial-gradient(ellipse 55% 75% at 50% 100%, rgba(35, 22, 70, 0.45), transparent 58%),
+		radial-gradient(ellipse 40% 48% at 50% 32%, rgba(100, 75, 150, 0.28), transparent 55%),
+		linear-gradient(185deg, rgba(255, 220, 245, 0.08) 0%, rgba(55, 35, 95, 0.25) 100%);
+}
+
+.castlove-laser-upload-root .upload-laser-inset {
+	position: absolute;
+	/* 收紧留白：虚线框更贴外框，接近设计稿「整卡即相框」 */
+	left: 14rpx;
+	right: 14rpx;
+	top: 14rpx;
+	bottom: 14rpx;
+	z-index: 2;
+	box-sizing: border-box;
+}
+
+.castlove-laser-upload-root .upload-laser-dashed-inner {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	border: 2rpx dashed rgba(255, 255, 255, 0.95);
+	border-radius: 26rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 20rpx;
+	padding: 24rpx 16rpx;
+	background: rgba(255, 255, 255, 0.02);
+}
+
+.castlove-laser-upload-root .upload-plus--laser {
+	font-size: 96rpx;
+	line-height: 0.88;
+	color: #ffffff;
+	font-weight: 100;
+	text-shadow: 0 2rpx 18rpx rgba(60, 30, 100, 0.35);
+}
+
+.castlove-laser-upload-root .upload-text--laser {
+	font-size: 28rpx;
+	color: rgba(255, 255, 255, 0.96);
+	font-weight: 500;
+	letter-spacing: 1rpx;
+	text-shadow: 0 2rpx 12rpx rgba(40, 20, 80, 0.4);
+}
diff --git a/frontend/pages/castlove/create.vue b/frontend/pages/castlove/create.vue
index 28161b0..6bf7320 100644
--- a/frontend/pages/castlove/create.vue
+++ b/frontend/pages/castlove/create.vue
@@ -47,15 +47,23 @@
 			<!-- 其他工艺：单图上传 -->
 			<view v-else class="upload-section" :class="{ 'upload-section--laser': isLaserCardCraft }">
 				<view class="upload-box-wrap">
-					<view class="upload-box" :class="{ 'upload-box--laser': isLaserCardCraft }" @click="onSingleUploadTap">
+					<view
+						:class="isLaserCardCraft ? 'castlove-laser-upload-root' : 'upload-box'"
+						@click="onSingleUploadTap"
+					>
 						<image v-if="uploadedImage" class="uploaded-image" :src="uploadedImage" mode="aspectFill"></image>
-						<view v-else-if="isLaserCardCraft" class="upload-laser-empty">
+						<view v-else-if="isLaserCardCraft" class="upload-laser-stack">
+							<image
+								class="upload-laser-photo-bg"
+								src="/static/castlove/leisheka.png"
+								mode="aspectFill"
+							/>
 							<view class="upload-laser-watermark" aria-hidden="true" />
-							<view class="upload-laser-dashed-inner">
-								<view class="upload-plus-ring">
+							<view class="upload-laser-inset">
+								<view class="upload-laser-dashed-inner">
 									<text class="upload-plus upload-plus--laser">+</text>
+									<text class="upload-text upload-text--laser">点击上传图片</text>
 								</view>
-								<text class="upload-text upload-text--laser">点击上传图片</text>
 							</view>
 						</view>
 						<view v-else class="upload-placeholder">
@@ -183,6 +191,7 @@ import { onLoad, onUnload } from '@dcloudio/uni-app';
 import { getOssSignatureApi, createMintOrderApi } from '@/utils/api.js';
 import { resolveH5OssPostUrl } from '@/utils/h5OssPostUrl.js';
 import ConfirmModal from '@/components/ConfirmModal.vue';
+import './create-laser-upload.css';
 import {
 	buildCastloveFormSnapshot,
 	CRAFT_LENTICULAR_CN,
@@ -201,8 +210,8 @@ const scrollEnhanced = true;
 const scrollEnhanced = false;
 // #endif
 
-const isLenticularCraft = computed(() => pageName.value === CRAFT_LENTICULAR_CN);
-const isLaserCardCraft = computed(() => pageName.value === CRAFT_LASER_CARD_CN);
+const isLenticularCraft = computed(() => (pageName.value || '').trim() === CRAFT_LENTICULAR_CN);
+const isLaserCardCraft = computed(() => (pageName.value || '').trim() === CRAFT_LASER_CARD_CN);
 
 onUnload(() => {
 	try {
@@ -1449,95 +1458,6 @@ onMounted(() => {
 	margin: 0 auto;
 }
 
-.upload-section--laser .upload-box--laser {
-	position: relative;
-	width: 100%;
-	height: 460rpx;
-	border-radius: 36rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.32);
-	box-shadow: 0 18rpx 56rpx rgba(60, 30, 100, 0.28);
-	background: rgba(255, 255, 255, 0.08);
-	backdrop-filter: blur(18rpx);
-	-webkit-backdrop-filter: blur(18rpx);
-	/* 外框实线；内层虚线框见 .upload-laser-dashed-inner */
-	border-style: solid;
-}
-
-.upload-section--laser .upload-box--laser .uploaded-image {
-	border-radius: 32rpx;
-}
-
-.upload-laser-empty {
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-sizing: border-box;
-	padding: 28rpx;
-}
-
-.upload-laser-watermark {
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 0;
-	opacity: 0.35;
-	pointer-events: none;
-	background:
-		radial-gradient(ellipse 52% 78% at 50% 100%, rgba(60, 35, 90, 0.55), transparent 58%),
-		radial-gradient(ellipse 42% 55% at 50% 36%, rgba(140, 110, 180, 0.45), transparent 58%),
-		radial-gradient(ellipse 28% 22% at 50% 16%, rgba(200, 180, 230, 0.35), transparent 70%),
-		linear-gradient(185deg, rgba(255, 210, 240, 0.15) 0%, rgba(80, 50, 120, 0.18) 100%);
-}
-
-.upload-laser-dashed-inner {
-	position: relative;
-	z-index: 1;
-	width: 82%;
-	height: 78%;
-	max-width: 520rpx;
-	max-height: 360rpx;
-	border: 3rpx dashed rgba(255, 255, 255, 0.92);
-	border-radius: 28rpx;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 20rpx;
-	background: rgba(255, 255, 255, 0.04);
-}
-
-.upload-plus-ring {
-	width: 100rpx;
-	height: 100rpx;
-	border-radius: 50%;
-	border: 3rpx solid rgba(255, 255, 255, 0.95);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: 0 8rpx 28rpx rgba(40, 20, 80, 0.2);
-}
-
-.upload-plus--laser {
-	font-size: 64rpx;
-	line-height: 1;
-	color: rgba(255, 255, 255, 0.98);
-	font-weight: 200;
-}
-
-.upload-text--laser {
-	font-size: 26rpx;
-	color: rgba(255, 255, 255, 0.95);
-	font-weight: 500;
-}
-
 .upload-section--laser .upload-hint {
 	color: rgba(255, 255, 255, 0.88);
 	font-size: 22rpx;
@@ -1564,9 +1484,9 @@ onMounted(() => {
 }
 
 .upload-clear-x--laser {
-	color: rgba(90, 70, 120, 0.85);
-	font-size: 36rpx;
-	font-weight: 300;
+	color: #3d6fd8;
+	font-size: 34rpx;
+	font-weight: 400;
 }
 
 .form-section--laser {
diff --git a/frontend/pages/castlove/laser-card-studio.vue b/frontend/pages/castlove/laser-card-studio.vue
index 8ecfcc5..17547ad 100644
--- a/frontend/pages/castlove/laser-card-studio.vue
+++ b/frontend/pages/castlove/laser-card-studio.vue
@@ -6,13 +6,10 @@
   { "path": "pages/laser-card-studio/laser-card-studio", "style": { "navigationStyle": "custom", "backgroundColor": "#0a0a0a" } }
   App 端说明：
   - 顶栏/底栏使用 statusBarHeight、safeAreaInsets.bottom，避免仅靠 CSS 变量导致刘海屏错位。
-  - 预览：mesh + 流体箔 + 高光脊 + 衍射纹 + 旋转幻彩/光束 + 颗粒 + 磨砂 + 扫光；人物椭圆内压下层幻彩；人像膜层叠在照片上（soft-light）；最上层人物图。
-  - 导出合成（离屏 canvas）：柔光底 + 主幻彩渐变 + 流体底纹 + 满铺衍射纹 + 光柱 + 闪粉 + 磨砂 + 人物椭圆内压镭射（multiply）+ 顶层扫光；与预览同参。
-  - iOS WKWebView / Android System WebView 对 mix-blend-mode 支持较好；若个别机型异常可去掉各 preview-layer 内联 style 的 mixBlendMode。
-  - 预览参照实体小卡样例：柔光色块（mesh）+ 斜向光束 + 细颗粒 + 扫光高光；粉丝参数收敛为「风格预设 + 调校」。
-  - 顶栏与预览区 position: sticky：向下滑动调校时预览贴在导航下方，便于实时对比效果。
-  - 保存：先合成图片写入系统相册，再询问是否将参数写入本地；「我的预设」下次进入可套用。
-  - 主体增强：可选「边缘压暗」或「镭射换底」——换底为椭圆柔边遮罩 + 底层镭射（非 AI 抠图），枢轴宜对准人物中心并调范围；「磨砂强化」抬升颗粒与微雾面。
+  - 预览与导出：圆角 clip →（可选）内置镭射底图 cover → 人物 cover → HSL/幻彩/噪点等；底图可选，置于人物后方；预览用 requestAnimationFrame。
+  - iOS WKWebView / Android System WebView：Canvas 合成使用 globalCompositeOperation；本页已移除 DOM 叠层预览。
+  - 顶栏与预览区 position: sticky，便于长屏下仍可操作顶栏。
+  - 内置「强全息」默认参数（无调校 UI）；保存写入相册或铸爱下单，不再弹窗询问保存调校参数。
 -->
 <template>
   <view class="page">
@@ -25,527 +22,56 @@
 
     <!-- 预览区：sticky，下滑调参数时贴在顶栏下方 -->
     <view class="preview-sticky" :style="{ top: stickyHeaderTotalPx + 'px' }">
-      <view class="preview-wrap" @tap="onPreviewWrapTap">
-      <block v-if="previewSrc">
-        <view class="preview-layer preview-mesh" :style="meshOverlayStyle" />
-        <view class="preview-layer preview-marble-flow" :style="marbleFlowOverlayStyle" />
-        <view class="preview-layer preview-foil-spec" :style="foilSpecOverlayStyle" />
-        <view class="preview-layer preview-diffraction" :style="diffractionOverlayStyle" />
-        <view class="preview-layer preview-beam-rotate preview-beam-rotate--stack-main" :style="beamRotateWrapStyle">
-          <view
-            class="preview-irid-wrap"
-            :class="{
-              'preview-irid-wrap--rainbow': presetAnimMode === 'hue',
-              'preview-irid-wrap--metal': presetAnimMode === 'metal'
-            }"
-            :style="iridWrapDynamicStyle"
-          >
-            <view class="preview-irid-core" :style="iridCoreStyle" />
+      <view class="preview-wrap">
+        <block v-if="previewSrc">
+          <canvas
+            canvas-id="laserPreviewCanvas"
+            class="preview-canvas"
+            :style="{ width: exportCssW + 'px', height: exportCssH + 'px' }"
+            :width="exportCssW"
+            :height="exportCssH"
+            :disable-scroll="true"
+          />
+          <view class="preview-fab" @tap.stop="onPreviewTap">
+            <text class="preview-fab-text">换图</text>
           </view>
-          <view class="preview-rays" :style="raysOverlayStyle" />
-        </view>
-        <view class="preview-layer preview-grain" :style="grainOverlayStyle" />
-        <view class="preview-layer preview-matte-frost" :style="matteFrostStyle" />
-        <view class="preview-layer preview-beam-rotate preview-beam-rotate--stack-sheen" :style="beamRotateWrapStyle">
-          <view class="preview-sheen-wrap" :style="sheenWrapStyle">
-            <view class="preview-sheen-core" :style="sheenCoreStyle" />
+          <view class="preview-replace-hint">
+            <text class="preview-replace-text">全息镭射满铺预览 · 保存导出高清图</text>
           </view>
+        </block>
+        <view v-else class="preview-placeholder">
+          <view class="placeholder-icon-wrap">
+            <text class="placeholder-plus">+</text>
+          </view>
+          <text class="placeholder-title">拍照或上传</text>
+          <text class="placeholder-sub">支持相册选择或相机拍摄</text>
         </view>
-        <view class="preview-layer preview-holo-suppress" :style="subjectHoloSuppressStyle" />
-        <view class="preview-img-mask-wrap" :style="subjectWrapStyle">
-          <image
-            v-if="segmentationMode === 'ai' && aiCutoutSrc"
-            class="preview-img-subject"
-            :src="aiCutoutSrc"
-            mode="aspectFill"
-            @touchstart="onPreviewTouchStart"
-            @touchmove="onPreviewTouchMove"
-            @touchend="onPreviewTouchEnd"
-          />
-          <image
-            v-else
-            class="preview-img-subject"
-            :src="previewSrc"
-            mode="aspectFill"
-            @touchstart="onPreviewTouchStart"
-            @touchmove="onPreviewTouchMove"
-            @touchend="onPreviewTouchEnd"
-          />
-          <view
-            class="preview-subject-holo-veil"
-            :class="{
-              'preview-subject-holo-veil--rainbow': presetAnimMode === 'hue',
-              'preview-subject-holo-veil--metal': presetAnimMode === 'metal'
-            }"
-            :style="subjectHoloVeilStyle"
-          />
-        </view>
-        <view class="preview-fab" @tap.stop="onPreviewTap">
-          <text class="preview-fab-text">换图</text>
-        </view>
-        <view class="preview-replace-hint">
-          <text class="preview-replace-text">{{ previewHintText }}</text>
-        </view>
-      </block>
-      <view v-else class="preview-placeholder">
-        <view class="placeholder-icon-wrap">
-          <text class="placeholder-plus">+</text>
-        </view>
-        <text class="placeholder-title">拍照或上传</text>
-        <text class="placeholder-sub">支持相册选择或相机拍摄</text>
       </view>
     </view>
-    </view>
 
-    <!-- 本地保存的参数预设（再次进入可读） -->
-    <view v-if="paramPresets.length" class="preset-memory">
-      <text class="preset-memory-title">我的预设</text>
-      <text class="preset-memory-hint">点击套用 · 长按删除</text>
-      <scroll-view class="preset-memory-scroll" scroll-x show-scrollbar="false">
-        <view
-          v-for="p in paramPresets"
-          :key="p.id"
-          class="preset-memory-chip"
-          @tap="applyParamPreset(p)"
-          @longpress.stop="onPresetLongPress(p)"
-        >
-          <text class="preset-memory-name">{{ p.name }}</text>
-          <text class="preset-memory-meta">{{ presetChipMeta(p) }}</text>
+    <!-- 内置镭射底纹：置于人物后方，与 Canvas 合成顺序一致 -->
+    <view v-if="previewSrc" class="laser-backdrop-panel">
+      <text class="laser-backdrop-title">镭射底纹（人物后方）</text>
+      <scroll-view scroll-x class="laser-backdrop-scroll" :show-scrollbar="false">
+        <view class="laser-backdrop-row">
+          <view
+            v-for="opt in laserBackdropOptions"
+            :key="opt.id"
+            class="laser-backdrop-item"
+            :class="{ 'laser-backdrop-item--active': laserBackdropId === opt.id }"
+            @tap="onPickLaserBackdrop(opt.id)"
+          >
+            <view v-if="opt.id === 'none'" class="laser-backdrop-none">
+              <text class="laser-backdrop-none-text">无</text>
+            </view>
+            <image v-else :src="opt.src" class="laser-backdrop-thumb" mode="aspectFill" />
+            <text class="laser-backdrop-name">{{ opt.label }}</text>
+          </view>
         </view>
       </scroll-view>
     </view>
 
-    <!-- 当前效果速览 -->
-    <view class="summary-bar">
-      <text class="summary-bar-title">当前效果</text>
-      <scroll-view class="summary-scroll" scroll-x show-scrollbar="false">
-        <view
-          class="summary-chip"
-          :class="{ on: activeTab === 'style' }"
-          @tap="activeTab = 'style'"
-        >
-          <text class="summary-chip-k">风格</text>
-          <text class="summary-chip-v">{{ currentPreset.name }}</text>
-        </view>
-        <view
-          class="summary-chip"
-          :class="{ on: activeTab === 'tune' }"
-          @tap="activeTab = 'tune'"
-        >
-          <text class="summary-chip-k">调校</text>
-          <text class="summary-chip-v">{{ tuneSummary }}</text>
-        </view>
-      </scroll-view>
-    </view>
-
-    <view class="param-panel">
-      <view class="panel-head">
-        <view class="panel-head-text">
-          <text class="panel-title">{{ activePanelMeta.title }}</text>
-          <text class="panel-desc">{{ activePanelMeta.desc }}</text>
-        </view>
-        <view class="panel-tag">
-          <text class="panel-tag-text">{{ activePanelMeta.tag }}</text>
-        </view>
-      </view>
-
-      <!-- 风格：参考大卡 / 小卡 / 样例渐变 -->
-      <view v-show="activeTab === 'style'" class="panel-body">
-        <view class="preset-grid">
-          <view
-            v-for="p in stylePresets"
-            :key="p.id"
-            class="preset-card"
-            :class="{ active: stylePresetId === p.id }"
-            @tap="stylePresetId = p.id"
-          >
-            <view class="preset-strip" :style="{ background: p.strip }" />
-            <text class="preset-name">{{ p.name }}</text>
-            <text class="preset-desc">{{ p.desc }}</text>
-          </view>
-        </view>
-      </view>
-
-      <!-- 调校：仅保留粉丝必调项 -->
-      <view v-show="activeTab === 'tune'" class="panel-body panel-body--tight">
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">镭射强度</text>
-            <text class="value-pill">{{ laserStrength }}%</text>
-          </view>
-          <text class="slider-sub">整体幻彩与光束的强弱，人像建议约 45%–65%</text>
-          <slider
-            class="slider"
-            :value="laserStrength"
-            min="0"
-            max="100"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onLaserStrengthChange"
-            @change="onLaserStrengthChange"
-          />
-          <view class="slider-scale">
-            <text class="scale-edge">淡</text>
-            <text class="scale-edge">浓</text>
-          </view>
-          <view class="slider-row slider-row--tight">
-            <text class="slider-label-sub">流体底纹</text>
-            <text class="value-pill value-pill--mini">{{ marbleFlowStrength }}%</text>
-          </view>
-          <text class="slider-tip-inline">叠加大理石/揉箔感的中频纹理，亮带更随型（略增绘制开销）</text>
-          <slider
-            class="slider"
-            :value="marbleFlowStrength"
-            min="0"
-            max="100"
-            activeColor="#FF99FF"
-            backgroundColor="#2a2a2a"
-            block-color="#FF99FF"
-            @changing="onMarbleFlowStrengthChange"
-            @change="onMarbleFlowStrengthChange"
-          />
-        </view>
-
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">光柱强度</text>
-            <text class="value-pill">{{ beamIntensity }}%</text>
-          </view>
-          <text class="slider-sub">斜射光柱的亮度与宽度，值越高光柱越粗越耀眼</text>
-          <slider
-            class="slider"
-            :value="beamIntensity"
-            min="20"
-            max="140"
-            activeColor="#FF99FF"
-            backgroundColor="#2a2a2a"
-            block-color="#FF99FF"
-            @changing="onBeamIntensityChange"
-            @change="onBeamIntensityChange"
-          />
-          <view class="slider-scale">
-            <text class="scale-edge">柔</text>
-            <text class="scale-edge">烈</text>
-          </view>
-        </view>
-
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">智能抠图</text>
-            <text class="value-pill value-pill--pink">云端</text>
-          </view>
-          <text class="slider-sub">方案一：在 config/segmentApi.js 配置 ALIYUN_STS_URL + OSS_BUCKET（STS 仅签发临时密钥，不写 AK）。方案二：自建代理 SEGMENT_API_BASE。云端方案为稳定读图，上传前不再本地压缩（体积略大）。</text>
-          <view class="segment-actions">
-            <view class="segment-btn segment-btn--primary" @tap="onSmartSegment">
-              <text class="segment-btn-text">智能抠图</text>
-            </view>
-            <view
-              v-if="segmentationMode === 'ai' && aiCutoutSrc"
-              class="segment-btn segment-btn--ghost"
-              @tap="onClearAiCutout"
-            >
-              <text class="segment-btn-text">恢复椭圆</text>
-            </view>
-          </view>
-        </view>
-
-        <view class="slider-block" :class="{ 'slider-block--muted': segmentationMode === 'ai' && aiCutoutSrc }">
-          <view class="slider-row">
-            <text class="slider-label">人物范围</text>
-            <text class="value-pill value-pill--pink">椭圆抠图</text>
-          </view>
-          <text class="slider-sub">用椭圆把人物从背景中抠出，置于镭射光效之上（拖动预览定位中心；椭圆为近似形状，背景过于杂乱时边缘会可见）{{ (segmentationMode === 'ai' && aiCutoutSrc) ? ' · 当前为智能抠图，点上方「恢复椭圆」后可调下列滑块。' : '' }}</text>
-          <view class="slider-row slider-row--tight">
-            <text class="slider-label-sub">主体横向范围</text>
-            <text class="value-pill value-pill--mini">{{ subjectMaskRadiusX }}%</text>
-          </view>
-          <slider
-            class="slider"
-            :value="subjectMaskRadiusX"
-            min="22"
-            max="58"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onSubjectMaskXChange"
-            @change="onSubjectMaskXChange"
-          />
-          <view class="slider-row slider-row--tight">
-            <text class="slider-label-sub">主体纵向范围</text>
-            <text class="value-pill value-pill--mini">{{ subjectMaskRadiusY }}%</text>
-          </view>
-          <slider
-            class="slider"
-            :value="subjectMaskRadiusY"
-            min="28"
-            max="72"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onSubjectMaskYChange"
-            @change="onSubjectMaskYChange"
-          />
-          <view class="slider-row slider-row--tight">
-            <text class="slider-label-sub">边缘柔和</text>
-            <text class="value-pill value-pill--mini">{{ subjectMaskSoftness }}%</text>
-          </view>
-          <slider
-            class="slider"
-            :value="subjectMaskSoftness"
-            min="12"
-            max="92"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onSubjectSoftnessChange"
-            @change="onSubjectSoftnessChange"
-          />
-          <view class="slider-row slider-row--tight">
-            <text class="slider-label-sub">人物区压镭射</text>
-            <text class="value-pill value-pill--mini">{{ subjectLaserSuppress }}%</text>
-          </view>
-          <text class="slider-tip-inline">只作用于人物图下方的幻彩：压低边缘透闪，不会让人脸变亮（与「人像膜层」分开调）</text>
-          <slider
-            class="slider"
-            :value="subjectLaserSuppress"
-            min="0"
-            max="100"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onSubjectLaserSuppressChange"
-            @change="onSubjectLaserSuppressChange"
-          />
-          <view class="slider-row slider-row--tight">
-            <text class="slider-label-sub">人像膜层幻彩</text>
-            <text class="value-pill value-pill--mini">{{ portraitVeilStrength }}%</text>
-          </view>
-          <text class="slider-tip-inline">叠在照片最上层（soft-light），模拟参考卡里人物区域仍有光油/薄膜幻彩；想接近参考图请调高此项</text>
-          <slider
-            class="slider"
-            :value="portraitVeilStrength"
-            min="0"
-            max="100"
-            activeColor="#FF99FF"
-            backgroundColor="#2a2a2a"
-            block-color="#FF99FF"
-            @changing="onPortraitVeilStrengthChange"
-            @change="onPortraitVeilStrengthChange"
-          />
-          <view class="slider-row slider-row--tight">
-            <text class="slider-label-sub">磨砂强化</text>
-            <text class="value-pill value-pill--mini">{{ matteStrength }}%</text>
-          </view>
-          <text class="slider-tip-inline">叠加雾面颗粒与微纹理，更接近实体磨砂卡（会抬高闪粉有效密度）</text>
-          <slider
-            class="slider"
-            :value="matteStrength"
-            min="0"
-            max="100"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onMatteStrengthChange"
-            @change="onMatteStrengthChange"
-          />
-        </view>
-
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">光束角度</text>
-            <text class="value-pill value-pill--pink">{{ angle }}°</text>
-          </view>
-          <text class="slider-sub">绕预览区拖定的枢轴旋转；下方可一键常用角度，再滑杆微调</text>
-          <slider
-            class="slider"
-            :value="angle"
-            min="0"
-            max="360"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onAngleChange"
-            @change="onAngleChange"
-          />
-          <view class="slider-scale">
-            <text class="scale-edge">0°</text>
-            <text class="scale-edge">360°</text>
-          </view>
-          <scroll-view class="angle-quick-scroll" scroll-x show-scrollbar="false">
-            <view
-              v-for="d in angleQuickDegrees"
-              :key="d"
-              class="angle-quick-chip"
-              :class="{ active: angle === d }"
-              @tap="setAngleQuick(d)"
-            >
-              <text class="angle-quick-text">{{ d }}°</text>
-            </view>
-          </scroll-view>
-          <view class="angle-fine-row">
-            <view class="angle-fine-btn" @tap="nudgeAngle(-15)">
-              <text class="angle-fine-text">−15°</text>
-            </view>
-            <view class="angle-fine-btn" @tap="nudgeAngle(-5)">
-              <text class="angle-fine-text">−5°</text>
-            </view>
-            <view class="angle-fine-btn" @tap="nudgeAngle(5)">
-              <text class="angle-fine-text">+5°</text>
-            </view>
-            <view class="angle-fine-btn" @tap="nudgeAngle(15)">
-              <text class="angle-fine-text">+15°</text>
-            </view>
-          </view>
-        </view>
-
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">光束光效</text>
-            <text class="value-pill value-pill--pink">{{ currentBeamEffect.name }}</text>
-          </view>
-          <text class="slider-sub">主光束与扫光可切换炫彩，不仅限于白光</text>
-          <scroll-view class="beam-effect-scroll" scroll-x show-scrollbar="false">
-            <view
-              v-for="b in beamEffects"
-              :key="b.id"
-              class="beam-effect-chip"
-              :class="{ active: beamEffectId === b.id }"
-              @tap="beamEffectId = b.id"
-            >
-              <view class="beam-effect-swatch" :style="{ background: b.swatch }" />
-              <text class="beam-effect-name">{{ b.name }}</text>
-            </view>
-          </scroll-view>
-        </view>
-
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">彩虹细纹</text>
-            <text class="value-pill">{{ diffractionDensity }}%</text>
-          </view>
-          <text class="slider-sub">满铺斜向彩虹条纹的密度，越高条纹越细越密</text>
-          <slider
-            class="slider"
-            :value="diffractionDensity"
-            min="0"
-            max="100"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onDiffractionDensityChange"
-            @change="onDiffractionDensityChange"
-          />
-          <view class="slider-scale">
-            <text class="scale-edge">稀</text>
-            <text class="scale-edge">密</text>
-          </view>
-          <view class="slider-row slider-row--tight">
-            <text class="slider-label-sub">条纹角度偏移</text>
-            <text class="value-pill value-pill--mini">{{ diffractionAngleOffset }}°</text>
-          </view>
-          <text class="slider-tip-inline">相对光束角度的偏移，90° 表示与光线方向垂直（最像衍射纹）</text>
-          <slider
-            class="slider"
-            :value="diffractionAngleOffset"
-            min="-90"
-            max="90"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onDiffractionAngleOffsetChange"
-            @change="onDiffractionAngleOffsetChange"
-          />
-        </view>
-
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">闪粉细腻度</text>
-            <text class="value-pill">{{ grainDensity }}%</text>
-          </view>
-          <text class="slider-sub">越高颗粒越密；开启「磨砂强化」后等效细腻度约 {{ grainDensityEffective }}%</text>
-          <slider
-            class="slider"
-            :value="grainDensity"
-            min="20"
-            max="100"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onGrainDensityChange"
-            @change="onGrainDensityChange"
-          />
-          <view class="slider-scale">
-            <text class="scale-edge">粗</text>
-            <text class="scale-edge">细</text>
-          </view>
-        </view>
-
-        <text class="group-label spaced">展示预览（可选）</text>
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">动效速度</text>
-            <text class="value-pill">{{ previewAnimSpeed }}%</text>
-          </view>
-          <text class="slider-sub">现场给粉丝看时可略加快</text>
-          <slider
-            class="slider"
-            :value="previewAnimSpeed"
-            min="40"
-            max="220"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onAnimSpeedChange"
-            @change="onAnimSpeedChange"
-          />
-          <view class="slider-scale">
-            <text class="scale-edge">慢</text>
-            <text class="scale-edge">快</text>
-          </view>
-        </view>
-
-        <view class="slider-block">
-          <view class="slider-row">
-            <text class="slider-label">色彩鲜艳度</text>
-            <text class="value-pill">{{ previewVivid }}%</text>
-          </view>
-          <text class="slider-sub">控制预览里彩虹/偏色的饱和度感</text>
-          <slider
-            class="slider"
-            :value="previewVivid"
-            min="70"
-            max="135"
-            activeColor="#66FFFF"
-            backgroundColor="#2a2a2a"
-            block-color="#66FFFF"
-            @changing="onVividChange"
-            @change="onVividChange"
-          />
-          <view class="slider-scale">
-            <text class="scale-edge">淡</text>
-            <text class="scale-edge">艳</text>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 底栏 Tab -->
-    <view class="tabbar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
-      <view
-        v-for="t in tabs"
-        :key="t.key"
-        class="tab-item"
-        :class="{ active: activeTab === t.key }"
-        @tap="activeTab = t.key"
-      >
-        <view class="tab-indicator" />
-        <text class="tab-icon">{{ t.icon }}</text>
-        <text class="tab-text">{{ t.label }}</text>
-      </view>
-    </view>
-
-    <!-- 离屏 canvas：合成后导出到相册（与界面叠层效果近似） -->
+    <!-- 离屏 canvas：合成后导出到相册（与预览同逻辑：圆角 + 照片 + 叠层镭射） -->
     <canvas
       canvas-id="laserExportCanvas"
       class="export-canvas"
@@ -572,13 +98,22 @@ export default {
       statusBarHeight: 24,
       safeAreaBottom: 0,
       previewSrc: '',
+      /** 仅保留供 computed 使用（调校 UI 已移除） */
       activeTab: 'style',
-      tabs: [
-        { key: 'style', label: '风格', icon: '◆' },
-        { key: 'tune', label: '调校', icon: '◎' }
+      /** 全幅 Canvas 预览：getImageInfo 后缓存 cover 布局，避免每帧重算 */
+      _previewLayout: null,
+      _previewRafId: null,
+      /** 内置静态镭射底图 cover 布局（置于人物图之下） */
+      _backdropLayout: null,
+      /** none | 三款内置流体底纹 */
+      laserBackdropId: 'none',
+      laserBackdropOptions: [
+        { id: 'none', label: '无底图', src: '' },
+        { id: 'liquidBlue', label: '青粉流体', src: '/static/castlove/laser-bg/laser-bg-1.png' },
+        { id: 'liquidLavender', label: '紫青幻彩', src: '/static/castlove/laser-bg/laser-bg-2.png' },
+        { id: 'liquidPearl', label: '缎面流光', src: '/static/castlove/laser-bg/laser-bg-3.png' }
       ],
-      /** 参考样例：大卡幻彩 / 高饱和彩虹 / 冷色冰霜 / 暖粉日落 / 珍珠银 */
-      stylePresetId: 'dream',
+      stylePresetId: 'holoFull',
       stylePresets: [
         {
           id: 'dream',
@@ -629,15 +164,15 @@ export default {
           animMode: 'hue'
         }
       ],
-      /** 粉丝主控：整体镭射强弱 0–100（参考实物以满铺彩虹为主，默认抬高） */
-      laserStrength: 72,
-      /** 光柱/光束亮度与宽度 20–140（默认偏柔，避免一道斜光柱厄住整张卡） */
-      beamIntensity: 48,
-      angle: 52,
+      /** 以下为内置参数（无调校 UI）：叠在照片上时平衡「人像清晰」与「表面幻彩」 */
+      laserStrength: 65,
+      /** 光柱/光束亮度与宽度 20–140 */
+      beamIntensity: 84,
+      angle: 50,
       /** 光束枢轴在卡面内的位置 0–100（相对预览小卡，非强制中心） */
       beamPivotX: 50,
       beamPivotY: 50,
-      beamEffectId: 'white',
+      beamEffectId: 'prism',
       beamEffects: [
         {
           id: 'white',
@@ -665,26 +200,26 @@ export default {
           swatch: 'linear-gradient(90deg,#ff00aa,#00f0ff,#ffee58)'
         }
       ],
-      /** 颗粒密度 20–100（默认更细更密，贴合实物闪粉） */
-      grainDensity: 88,
-      /** 彩虹细纹密度 0–100：越高条纹越细越密 */
-      diffractionDensity: 60,
+      /** 颗粒密度 20–100 */
+      grainDensity: 84,
+      /** 彩虹细纹密度 0–100（满铺叠图时略低，避免条纹糊脸） */
+      diffractionDensity: 55,
       /** 彩虹细纹角度偏移 -90~90：相对光束角度的偏移，默认 90 = 垂直于光束方向 */
       diffractionAngleOffset: 90,
       /** 椭圆抠图遮罩半径（相对预览宽/高 %）—— 用于把人物从镭射背景中分离 */
       subjectMaskRadiusX: 46,
       subjectMaskRadiusY: 60,
       subjectMaskSoftness: 44,
-      /** 人物椭圆内压低幻彩（模拟白墨挡底），0–100 */
-      subjectLaserSuppress: 40,
-      /** 叠在照片上的幻彩罩层（模拟光油/膜上反光），0–100；参考卡正面人物仍有膜感 */
-      portraitVeilStrength: 52,
-      /** 大理石/揉箔感中频纹理强度 0–100 */
-      marbleFlowStrength: 52,
-      /** 磨砂雾面 0–100，抬升颗粒有效密度 */
-      matteStrength: 45,
-      previewAnimSpeed: 100,
-      previewVivid: 100,
+      /** 人物椭圆内压低幻彩：全幅膜时关闭 */
+      subjectLaserSuppress: 0,
+      /** 叠在照片上的幻彩罩层：改由 Canvas 叠层统一处理 */
+      portraitVeilStrength: 0,
+      /** 大理石/揉箔感中频纹理强度 0–100（叠图略降，避免整张发糊） */
+      marbleFlowStrength: 42,
+      /** 磨砂雾面 0–100 */
+      matteStrength: 46,
+      previewAnimSpeed: 128,
+      previewVivid: 106,
       _previewRect: null,
       /** 顶栏占用总高度(px)，用于预览区 sticky 的 top */
       stickyHeaderTotalPx: 96,
@@ -1224,6 +759,22 @@ export default {
       }
     }
   },
+  watch: {
+    previewSrc(src) {
+      this._previewLayout = null
+      this._stopPreviewAnimation()
+      if (src) {
+        this.$nextTick(() => {
+          this._refreshPreviewLayoutFromSrc()
+        })
+      } else {
+        this._backdropLayout = null
+      }
+    },
+    laserBackdropId() {
+      this._refreshBackdropLayout()
+    }
+  },
   onLoad() {
     try {
       const raw = uni.getStorageSync(CASTLOVE_LASER_ENTRY_KEY)
@@ -1232,11 +783,12 @@ export default {
         const ent = this.castloveEntry
         const b64 = ent && String(ent.uploadedImageBase64 || '').trim()
         const path = ent && String(ent.uploadedImage || '').trim()
+        /** App/小程序：getImageInfo + canvas drawImage 对超长 dataURL 常失败，优先本地临时路径 */
         let img = ''
-        if (b64) {
-          img = b64.startsWith('data:') ? b64 : `data:image/jpeg;base64,${b64}`
-        } else if (path) {
+        if (path) {
           img = path
+        } else if (b64) {
+          img = b64.startsWith('data:') ? b64 : `data:image/jpeg;base64,${b64}`
         }
         if (img) {
           this.previewSrc = img
@@ -1257,7 +809,288 @@ export default {
     }
     this.loadParamPresets()
   },
+  onUnload() {
+    this._stopPreviewAnimation()
+  },
   methods: {
+    _computeCoverLayout(iw, ih, cw, ch) {
+      const w = Number(iw) || 1
+      const h = Number(ih) || 1
+      const scale = Math.max(cw / w, ch / h)
+      const dw = w * scale
+      const dh = h * scale
+      return { dx: (cw - dw) / 2, dy: (ch - dh) / 2, dw, dh }
+    },
+    /** 可写沙盒根目录（App/小程序）；H5 常为空 */
+    _getUserDataPathForWrite() {
+      try {
+        if (typeof uni !== 'undefined' && uni.env && uni.env.USER_DATA_PATH) {
+          return uni.env.USER_DATA_PATH
+        }
+      } catch (e) {
+        /* noop */
+      }
+      try {
+        if (typeof wx !== 'undefined' && wx.env && wx.env.USER_DATA_PATH) {
+          return wx.env.USER_DATA_PATH
+        }
+      } catch (e2) {
+        /* noop */
+      }
+      return ''
+    },
+    /**
+     * data:image/*;base64,... 在真机 getImageInfo 易失败：落盘为固定临时文件后返回本地路径。
+     * 已是 http(s)/本地路径则原样返回。
+     */
+    _materializeDataUrlForCanvas(src) {
+      return new Promise((resolve) => {
+        if (!src || typeof src !== 'string') {
+          resolve('')
+          return
+        }
+        if (!src.startsWith('data:image/')) {
+          resolve(src)
+          return
+        }
+        const fs = typeof uni.getFileSystemManager === 'function' ? uni.getFileSystemManager() : null
+        const root = this._getUserDataPathForWrite()
+        if (!fs || !root) {
+          resolve(src)
+          return
+        }
+        const comma = src.indexOf(',')
+        if (comma < 12) {
+          resolve('')
+          return
+        }
+        const head = src.slice(0, comma).toLowerCase()
+        const raw = src.slice(comma + 1)
+        const ext = head.indexOf('png') !== -1 ? 'png' : 'jpg'
+        const fp = `${root}/castlove_laser_preview_work.${ext}`
+        fs.writeFile({
+          filePath: fp,
+          data: raw,
+          encoding: 'base64',
+          success: () => resolve(fp),
+          fail: (err) => {
+            console.warn('[LaserCardStudio] materialize dataUrl fail', err)
+            resolve(src)
+          }
+        })
+      })
+    },
+    _resolveLaserBackdropPath() {
+      const opt = this.laserBackdropOptions.find((o) => o.id === this.laserBackdropId)
+      return opt && opt.src ? opt.src : ''
+    },
+    _refreshBackdropLayout() {
+      const cw = this.exportCssW
+      const ch = this.exportCssH
+      const p = this._resolveLaserBackdropPath()
+      if (!p) {
+        this._backdropLayout = null
+        return
+      }
+      uni.getImageInfo({
+        src: p,
+        success: (img) => {
+          this._backdropLayout = this._computeCoverLayout(img.width, img.height, cw, ch)
+        },
+        fail: (err) => {
+          console.warn('[LaserCardStudio] backdrop getImageInfo', err)
+          this._backdropLayout = null
+        }
+      })
+    },
+    onPickLaserBackdrop(id) {
+      if (this.laserBackdropId === id) {
+        return
+      }
+      this.laserBackdropId = id
+    },
+    /**
+     * 圆角 clip 内合成：
+     * - 有内置镭射底图：底图铺底 → 人物原图（清晰载体）→ 同一张纹理以 overlay + screen 叠在人物上（豆包思路，控制雾感）→ 极轻颗粒。
+     * - 无底图：保留原算法镭射链（略偏强时可再调 data）。
+     */
+    _drawSparseFilmGrain(ctx, cw, ch) {
+      const rnd = Math.random
+      const n = Math.floor(480 + rnd() * 360)
+      ctx.save()
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('overlay')
+      }
+      ctx.setGlobalAlpha(0.14)
+      for (let i = 0; i < n; i++) {
+        const x = rnd() * cw
+        const y = rnd() * ch
+        const a = (0.028 + rnd() * 0.055).toFixed(3)
+        ctx.setFillStyle(`rgba(255,255,255,${a})`)
+        ctx.fillRect(x, y, 1, 1)
+      }
+      ctx.restore()
+      ctx.setGlobalAlpha(1)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    _drawLaserCardComposite(ctx, cw, ch, imagePath, layout, timeMs) {
+      const { dx, dy, dw, dh } = layout
+      ctx.setFillStyle('#141018')
+      ctx.fillRect(0, 0, cw, ch)
+      ctx.save()
+      this._clipExportCardRoundRect(ctx, cw, ch)
+      const bdPath = this._resolveLaserBackdropPath()
+      const bdLay = this._backdropLayout
+      const hasBuiltInBackdrop = !!(bdPath && bdLay)
+      if (hasBuiltInBackdrop) {
+        try {
+          ctx.drawImage(bdPath, bdLay.dx, bdLay.dy, bdLay.dw, bdLay.dh)
+        } catch (e) {
+          /* 底图失败则仅靠人物 */
+        }
+      }
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+      ctx.setGlobalAlpha(1)
+      try {
+        ctx.drawImage(imagePath, dx, dy, dw, dh)
+      } catch (e) {
+        /* drawImage 失败时仍铺镭射底，避免白屏 */
+      }
+      if (hasBuiltInBackdrop) {
+        try {
+          ctx.save()
+          if (typeof ctx.setGlobalCompositeOperation === 'function') {
+            ctx.setGlobalCompositeOperation('overlay')
+          }
+          ctx.setGlobalAlpha(0.44)
+          ctx.drawImage(bdPath, bdLay.dx, bdLay.dy, bdLay.dw, bdLay.dh)
+          ctx.restore()
+          ctx.save()
+          if (typeof ctx.setGlobalCompositeOperation === 'function') {
+            ctx.setGlobalCompositeOperation('screen')
+          }
+          ctx.setGlobalAlpha(0.22)
+          ctx.drawImage(bdPath, bdLay.dx, bdLay.dy, bdLay.dw, bdLay.dh)
+          ctx.restore()
+        } catch (e) {
+          /* 纹理叠层失败则仅保留人物 */
+        }
+        this._drawSparseFilmGrain(ctx, cw, ch)
+      } else {
+        this._exportDrawHslRainbowBase(ctx, cw, ch, timeMs)
+        this._drawSolidLaserBackdrop(ctx, cw, ch)
+        this._drawLaserLayers(ctx, cw, ch, undefined, timeMs)
+      }
+      ctx.restore()
+    },
+    /**
+     * 旧版 canvas 上下文：Vue 3 页面若传入 `this`（Proxy），部分端无法绑定到画布，表现为整幅透明/全黑。
+     * 页面级 canvas 使用单参数即可；Vue 2 仍传实例以兼容旧端。
+     */
+    _createLaserCanvasContext(canvasId) {
+      // #ifdef VUE3
+      return uni.createCanvasContext(canvasId)
+      // #endif
+      // #ifndef VUE3
+      return uni.createCanvasContext(canvasId, this)
+      // #endif
+    },
+    _schedulePreviewFrame(cb) {
+      if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(cb)
+      }
+      return setTimeout(cb, 33)
+    },
+    _cancelPreviewFrame(id) {
+      if (id == null) {
+        return
+      }
+      try {
+        clearTimeout(id)
+      } catch (e) {
+        /* noop */
+      }
+      try {
+        if (typeof cancelAnimationFrame === 'function') {
+          cancelAnimationFrame(id)
+        }
+      } catch (e) {
+        /* noop */
+      }
+    },
+    _stopPreviewAnimation() {
+      if (this._previewRafId != null) {
+        this._cancelPreviewFrame(this._previewRafId)
+        this._previewRafId = null
+      }
+    },
+    _refreshPreviewLayoutFromSrc() {
+      const src = this.previewSrc
+      if (!src) {
+        this._previewLayout = null
+        this._stopPreviewAnimation()
+        return
+      }
+      this._materializeDataUrlForCanvas(src).then((resolved) => {
+        if (!resolved) {
+          this._previewLayout = null
+          this._stopPreviewAnimation()
+          uni.showToast({ title: '无法加载预览图', icon: 'none' })
+          return
+        }
+        if (resolved !== src) {
+          this.previewSrc = resolved
+          return
+        }
+        uni.getImageInfo({
+          src: resolved,
+          success: (img) => {
+            this._previewLayout = this._computeCoverLayout(img.width, img.height, this.exportCssW, this.exportCssH)
+            this.$nextTick(() => {
+              setTimeout(() => {
+                this._refreshBackdropLayout()
+                this._startPreviewAnimation()
+              }, 48)
+            })
+          },
+          fail: (err) => {
+            console.warn('[LaserCardStudio] getImageInfo fail', err)
+            this._previewLayout = null
+            this._stopPreviewAnimation()
+            uni.showToast({ title: '无法加载预览图', icon: 'none' })
+          }
+        })
+      })
+    },
+    _startPreviewAnimation() {
+      this._stopPreviewAnimation()
+      const loop = () => {
+        if (!this.previewSrc || !this._previewLayout) {
+          this._previewRafId = null
+          return
+        }
+        this._renderLaserPreviewFrame()
+        this._previewRafId = this._schedulePreviewFrame(loop)
+      }
+      this._previewRafId = this._schedulePreviewFrame(loop)
+    },
+    _renderLaserPreviewFrame() {
+      const cw = this.exportCssW
+      const ch = this.exportCssH
+      const layout = this._previewLayout
+      const path = this.previewSrc
+      if (!layout || !path) {
+        return
+      }
+      const ctx = this._createLaserCanvasContext('laserPreviewCanvas')
+      const t = Date.now()
+      this._drawLaserCardComposite(ctx, cw, ch, path, layout, t)
+      ctx.draw(false)
+    },
     /**
      * 仅用于预览：参考「液态丝绸 / 揉箔 / 高光脊」叠层（conic + 大椭圆褶 + 窄条高光 + 微褶）。
      */
@@ -1484,6 +1317,7 @@ export default {
       })
     },
     onCancel() {
+      this._stopPreviewAnimation()
       try {
         uni.removeStorageSync(CASTLOVE_LASER_ENTRY_KEY)
       } catch (e) {
@@ -1508,28 +1342,10 @@ export default {
         src: path,
         success: (img) => {
           try {
-            const ctx = uni.createCanvasContext('laserExportCanvas', this)
-            const iw = img.width
-            const ih = img.height
-            const scale = Math.max(cw / iw, ch / ih)
-            const dw = iw * scale
-            const dh = ih * scale
-            const dx = (cw - dw) / 2
-            const dy = (ch - dh) / 2
-            ctx.setFillStyle('#141018')
-            ctx.fillRect(0, 0, cw, ch)
-            this._drawSolidLaserBackdrop(ctx, cw, ch)
-            this._drawLaserLayers(ctx, cw, ch)
-            this._exportDrawSubjectLaserSuppress(ctx, cw, ch)
-            try {
-              this._clipSubjectEllipse(ctx, cw, ch)
-              ctx.drawImage(path, dx, dy, dw, dh)
-            } catch (e) {
-              ctx.beginPath()
-              ctx.rect(0, 0, cw, ch)
-              ctx.clip()
-              ctx.drawImage(path, dx, dy, dw, dh)
-            }
+            const ctx = this._createLaserCanvasContext('laserExportCanvas')
+            const layout = this._computeCoverLayout(img.width, img.height, cw, ch)
+            const exportT = Date.now()
+            this._drawLaserCardComposite(ctx, cw, ch, path, layout, exportT)
             ctx.draw(false, () => {
               setTimeout(() => {
                 uni.canvasToTempFilePath(
@@ -1626,18 +1442,18 @@ export default {
       }
       const list = blobs[pid] || blobs.dream
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
-        ctx.setGlobalCompositeOperation('screen')
+        ctx.setGlobalCompositeOperation('soft-light')
       }
       list.forEach((b) => {
         try {
           const g = ctx.createRadialGradient(b.x * cw, b.y * ch, 0, b.x * cw, b.y * ch, R * 0.62)
           g.addColorStop(0, b.c0)
           g.addColorStop(1, b.c1)
-          ctx.setGlobalAlpha(0.82 * strength * vivid)
+          ctx.setGlobalAlpha(0.82 * strength * vivid * 0.38)
           ctx.setFillStyle(g)
           ctx.fillRect(0, 0, cw, ch)
         } catch (err) {
-          ctx.setGlobalAlpha(0.82 * strength * vivid)
+          ctx.setGlobalAlpha(0.82 * strength * vivid * 0.38)
           ctx.setFillStyle(b.c0)
           ctx.fillRect(0, 0, cw, ch)
         }
@@ -1695,7 +1511,7 @@ export default {
       }
       const pts = palettes[pid] || palettes.dream
       const Rmax = Math.max(cw, ch) * 0.46
-      const baseA = (0.1 + mf * 0.34) * strength * vivid
+      const baseA = (0.1 + mf * 0.34) * strength * vivid * 0.72
       ctx.save()
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
         ctx.setGlobalCompositeOperation('soft-light')
@@ -1788,7 +1604,7 @@ export default {
       ctx.clip()
     },
     /**
-     * 导出用：满铺斜向彩虹衍射纹（与预览 diffractionOverlayStyle 同源参数），screen 混合。
+     * 导出用：满铺斜向彩虹衍射纹；叠在照片上时用 overlay + 压低 alpha，避免粗条纹挡脸。
      */
     _exportDrawDiffractionStripes(ctx, cw, ch) {
       const density = Math.max(0, Math.min(100, Number(this.diffractionDensity) || 0)) / 100
@@ -1803,8 +1619,8 @@ export default {
       const u = 3.2 - density * 2.4
       const stripeW = Math.max(1.1, u * 0.42)
       const span = Math.sqrt(cw * cw + ch * ch) * 1.2
-      const baseA = (0.11 + strength * 0.16) * vivid
-      const hiA = (0.15 + strength * 0.2) * vivid
+      const baseA = (0.07 + strength * 0.09) * vivid * 0.62
+      const hiA = (0.09 + strength * 0.11) * vivid * 0.62
       const alphas = [
         baseA,
         baseA,
@@ -1825,9 +1641,9 @@ export default {
       ctx.translate(cw / 2, ch / 2)
       ctx.rotate(rad)
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
-        ctx.setGlobalCompositeOperation('screen')
+        ctx.setGlobalCompositeOperation('overlay')
       }
-      ctx.setGlobalAlpha(Math.min(0.92, 0.26 + strength * 0.48 + density * 0.16))
+      ctx.setGlobalAlpha(Math.min(0.33, (0.26 + strength * 0.48 + density * 0.16) * 0.44))
       const count = Math.ceil((span * 2) / stripeW)
       for (let i = -count; i <= count; i++) {
         const pos = i * stripeW
@@ -1856,7 +1672,7 @@ export default {
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
         ctx.setGlobalCompositeOperation('soft-light')
       }
-      ctx.setGlobalAlpha(0.55 + ms * 0.35)
+      ctx.setGlobalAlpha(0.36 + ms * 0.26)
       for (let k = 0; k < n; k++) {
         const x = rnd() * cw
         const y = rnd() * ch
@@ -1871,7 +1687,7 @@ export default {
       }
     },
     /**
-     * 导出用：沿枢轴附近的一条高光带（静态截取一帧「光油扫光」），screen 混合。
+     * 导出用：沿枢轴附近的一条高光带；叠图时用 soft-light + 较低 alpha，避免一道亮带盖满人物。
      */
     _exportDrawOilSweep(ctx, cw, ch, timeMs) {
       const strength = Math.max(0.12, Math.min(1, this.laserStrength / 100))
@@ -1898,7 +1714,7 @@ export default {
         return
       }
       const be = this.beamEffectId
-      const peak = (0.22 + strength * 0.18 + bi * 0.12) * vivid
+      const peak = (0.17 + strength * 0.14 + bi * 0.09) * vivid
       let cHi = `rgba(255,255,255,${Math.min(0.85, peak).toFixed(3)})`
       let cMid = `rgba(220,240,255,${Math.min(0.55, peak * 0.72).toFixed(3)})`
       if (be === 'prism') {
@@ -1922,9 +1738,9 @@ export default {
       g.addColorStop(0.62, 'rgba(255,255,255,0)')
       g.addColorStop(1, 'rgba(255,255,255,0)')
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
-        ctx.setGlobalCompositeOperation('screen')
+        ctx.setGlobalCompositeOperation('soft-light')
       }
-      ctx.setGlobalAlpha(0.38 + bi * 0.28)
+      ctx.setGlobalAlpha((0.38 + bi * 0.28) * 0.56)
       ctx.setFillStyle(g)
       ctx.fillRect(0, 0, cw, ch)
       ctx.setGlobalAlpha(1)
@@ -1932,6 +1748,195 @@ export default {
         ctx.setGlobalCompositeOperation('source-over')
       }
     },
+    /** HSL → rgba 字符串，供导出 Canvas 彩虹基底 / 流光（纯原生，无第三方滤镜） */
+    _hslToRgba(h, s, l, a) {
+      const hh = ((Number(h) % 360) + 360) % 360
+      const ss = Math.max(0, Math.min(100, Number(s))) / 100
+      const ll = Math.max(0, Math.min(100, Number(l))) / 100
+      const c = (1 - Math.abs(2 * ll - 1)) * ss
+      const x = c * (1 - Math.abs(((hh / 60) % 2) - 1))
+      const m = ll - c / 2
+      let rp = 0
+      let gp = 0
+      let bp = 0
+      if (hh < 60) {
+        rp = c
+        gp = x
+      } else if (hh < 120) {
+        rp = x
+        gp = c
+      } else if (hh < 180) {
+        gp = c
+        bp = x
+      } else if (hh < 240) {
+        gp = x
+        bp = c
+      } else if (hh < 300) {
+        rp = x
+        bp = c
+      } else {
+        rp = c
+        bp = x
+      }
+      const r = Math.round(255 * (rp + m))
+      const g = Math.round(255 * (gp + m))
+      const b = Math.round(255 * (bp + m))
+      const aa = typeof a === 'number' ? Math.max(0, Math.min(1, a)) : 1
+      return `rgba(${r},${g},${b},${aa.toFixed(3)})`
+    },
+    /** 导出整卡圆角裁剪（与实体小卡一致） */
+    _clipExportCardRoundRect(ctx, cw, ch) {
+      const r = Math.min(32, cw * 0.065, ch * 0.048)
+      ctx.beginPath()
+      ctx.moveTo(r, 0)
+      ctx.lineTo(cw - r, 0)
+      ctx.arc(cw - r, r, r, -Math.PI / 2, 0, false)
+      ctx.lineTo(cw, ch - r)
+      ctx.arc(cw - r, ch - r, r, 0, Math.PI / 2, false)
+      ctx.lineTo(r, ch)
+      ctx.arc(r, ch - r, r, Math.PI / 2, Math.PI, false)
+      ctx.lineTo(0, r)
+      ctx.arc(r, r, r, Math.PI, Math.PI * 1.5, false)
+      ctx.closePath()
+      ctx.clip()
+    },
+    /**
+     * HSL 色相循环彩虹基底：叠在照片上时用 soft-light + 较低 alpha，避免多层 screen 把人像「漂没」。
+     */
+    _exportDrawHslRainbowBase(ctx, cw, ch, timeMs) {
+      const strength = Math.max(0.15, Math.min(1, this.laserStrength / 100))
+      const vivid = Math.max(0.75, Math.min(1.35, (this.previewVivid || 100) / 100))
+      const speed = Math.max(0.35, Math.min(1.8, (Number(this.previewAnimSpeed) || 100) / 100))
+      const t = typeof timeMs === 'number' && !Number.isNaN(timeMs) ? timeMs : Date.now()
+      const hueShift = ((t * 0.055 * speed) % 360 + 360) % 360
+      let g
+      try {
+        g = ctx.createLinearGradient(0, 0, cw * 1.05, ch * 0.92)
+      } catch (e) {
+        return
+      }
+      const stops = 12
+      for (let i = 0; i <= stops; i++) {
+        const p = i / stops
+        const h = (hueShift + p * 360) % 360
+        const sat = 82 + vivid * 11
+        const light = 52 + (i % 4) * 2.8
+        const alpha =
+          (0.052 + strength * 0.082) * (0.78 + vivid * 0.08) * (0.55 + p * 0.22) * 0.6
+        g.addColorStop(p, this._hslToRgba(h, sat, light, alpha))
+      }
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('soft-light')
+      }
+      ctx.setGlobalAlpha(1)
+      ctx.setFillStyle(g)
+      ctx.fillRect(0, 0, cw, ch)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    /** 多道斜向 HSL 渐变 + 时间相位，模拟「动态流光」一帧快照 */
+    _exportDrawHueFlowBeams(ctx, cw, ch, timeMs) {
+      const strength = Math.max(0.15, Math.min(1, this.laserStrength / 100))
+      const vivid = Math.max(0.75, Math.min(1.35, (this.previewVivid || 100) / 100))
+      const speed = Math.max(0.35, Math.min(1.8, (Number(this.previewAnimSpeed) || 100) / 100))
+      const t = typeof timeMs === 'number' && !Number.isNaN(timeMs) ? timeMs : Date.now()
+      const flow = ((t * 0.00012 * speed) % 1) * 360
+      const baseDeg = Number(this.angle) || 52
+      const pvx = Math.max(0, Math.min(100, Number(this.beamPivotX) || 50))
+      const pvy = Math.max(0, Math.min(100, Number(this.beamPivotY) || 50))
+      const layers = [
+        { off: 0, span: 260 },
+        { off: 58, span: 200 },
+        { off: -44, span: 220 }
+      ]
+      ctx.save()
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('soft-light')
+      }
+      layers.forEach((layer, idx) => {
+        const deg = baseDeg + layer.off + Math.sin((t + idx * 900) * 0.0017) * 14
+        const h0 = (flow + idx * 72) % 360
+        const stops = []
+        const seg = 7
+        for (let i = 0; i <= seg; i++) {
+          const u = i / seg
+          const h = (h0 + u * layer.span) % 360
+          const a = (0.026 + strength * 0.055) * vivid * (0.5 + 0.5 * Math.sin(u * Math.PI)) * 0.62
+          stops.push([u, this._hslToRgba(h, 88, 58, a)])
+        }
+        let g
+        try {
+          g = this._linearGradientThroughPivot(ctx, cw, ch, pvx, pvy, deg, stops)
+        } catch (e) {
+          return
+        }
+        ctx.setGlobalAlpha((0.22 + idx * 0.035) * 0.98)
+        ctx.setFillStyle(g)
+        ctx.fillRect(0, 0, cw, ch)
+      })
+      ctx.restore()
+      ctx.setGlobalAlpha(1)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    /** 像素级 1px 随机噪点（overlay），强化镭射磨砂颗粒 */
+    _exportDrawDensePixelNoise(ctx, cw, ch, rndFn, timeMs) {
+      const rnd = typeof rndFn === 'function' ? rndFn : Math.random
+      const strength = Math.max(0.15, Math.min(1, this.laserStrength / 100))
+      const grain = (this.grainDensityEffective || 70) / 100
+      const n = Math.floor((2200 + grain * 4200 + strength * 1800) * 0.56)
+      const seed = ((typeof timeMs === 'number' ? timeMs : Date.now()) % 131071) / 131071
+      ctx.save()
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('overlay')
+      }
+      ctx.setGlobalAlpha(0.45)
+      for (let i = 0; i < n; i++) {
+        const x = Math.floor(rnd() * cw)
+        const y = Math.floor(rnd() * ch)
+        const lit = rnd() > 0.5
+        const v = lit ? 255 : 198 + Math.floor(rnd() * 40)
+        const a = 0.022 + rnd() * 0.072 + seed * 0.028
+        ctx.setFillStyle(`rgba(${v},${v},${Math.min(255, v + 8)},${a.toFixed(3)})`)
+        ctx.fillRect(x, y, 1, 1)
+      }
+      ctx.restore()
+      ctx.setGlobalAlpha(1)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    /** 宽柔高光（soft-light），模拟镭射金属反光层 */
+    _exportDrawMetalReflectionOverlay(ctx, cw, ch, timeMs) {
+      const t = typeof timeMs === 'number' && !Number.isNaN(timeMs) ? timeMs : Date.now()
+      const deg = 32 + ((t * 0.018) % 28)
+      let g
+      try {
+        g = this._linearGradientThroughPivot(ctx, cw, ch, 28, 22, deg, [
+          [0, 'rgba(255,255,255,0)'],
+          [0.32, 'rgba(255,255,255,0.05)'],
+          [0.5, 'rgba(255,248,255,0.2)'],
+          [0.66, 'rgba(240,250,255,0.09)'],
+          [1, 'rgba(255,255,255,0)']
+        ])
+      } catch (e) {
+        return
+      }
+      ctx.save()
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('soft-light')
+      }
+      ctx.setGlobalAlpha(0.28)
+      ctx.setFillStyle(g)
+      ctx.fillRect(0, 0, cw, ch)
+      ctx.restore()
+      ctx.setGlobalAlpha(1)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
     _drawLaserLayers(ctx, cw, ch, rndFn, oilTimeMs) {
       const rnd = typeof rndFn === 'function' ? rndFn : Math.random
       const strength = Math.max(0.15, Math.min(1, this.laserStrength / 100))
@@ -1943,7 +1948,7 @@ export default {
       const pid = this.stylePresetId
       const be = this.beamEffectId
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
-        ctx.setGlobalCompositeOperation('screen')
+        ctx.setGlobalCompositeOperation('soft-light')
       }
       const meshStops = {
         dream: [
@@ -1980,7 +1985,7 @@ export default {
         ]
       }
       const stops = meshStops[pid] || meshStops.dream
-      ctx.setGlobalAlpha(0.55 * strength * vivid)
+      ctx.setGlobalAlpha(0.38 * strength * vivid * 0.42)
       try {
         ctx.setFillStyle(this._linearGradientThroughPivot(ctx, cw, ch, pvx, pvy, a, stops))
       } catch (err) {
@@ -1989,8 +1994,9 @@ export default {
       ctx.fillRect(0, 0, cw, ch)
       this._exportDrawMarbleFlow(ctx, cw, ch)
       this._exportDrawDiffractionStripes(ctx, cw, ch)
+      this._exportDrawHueFlowBeams(ctx, cw, ch, oilTimeMs)
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
-        ctx.setGlobalCompositeOperation('screen')
+        ctx.setGlobalCompositeOperation('soft-light')
       }
       const rayA = a + 90
       let r0 = 'rgba(255,255,255,0)'
@@ -2021,19 +2027,19 @@ export default {
         [(0.5 + coreW).toFixed(3), r0],
         [1, r0]
       ])
-      ctx.setGlobalAlpha(0.85 * strength)
+      ctx.setGlobalAlpha(Math.min(0.38, 0.3 * strength))
       ctx.setFillStyle(gRay)
       ctx.fillRect(0, 0, cw, ch)
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
         ctx.setGlobalCompositeOperation('overlay')
       }
-      ctx.setGlobalAlpha(0.35 + grain * 0.35)
-      const n = Math.floor(400 + grain * 500)
+      ctx.setGlobalAlpha((0.35 + grain * 0.35) * 0.62)
+      const n = Math.floor((400 + grain * 500) * 0.72)
       for (let i = 0; i < n; i++) {
         const x = rnd() * cw
         const y = rnd() * ch
         const s = rnd() * 1.8 + 0.3
-        ctx.setFillStyle(`rgba(255,255,255,${(0.08 + rnd() * 0.2).toFixed(3)})`)
+        ctx.setFillStyle(`rgba(255,255,255,${(0.045 + rnd() * 0.12).toFixed(3)})`)
         ctx.fillRect(x, y, s, s)
       }
       const ms = Math.max(0, Math.min(100, Number(this.matteStrength) || 0)) / 100
@@ -2041,8 +2047,8 @@ export default {
         if (typeof ctx.setGlobalCompositeOperation === 'function') {
           ctx.setGlobalCompositeOperation('soft-light')
         }
-        ctx.setGlobalAlpha(0.16 + ms * 0.36)
-        const n2 = Math.floor(240 + ms * 500)
+        ctx.setGlobalAlpha(0.14 + ms * 0.26)
+        const n2 = Math.floor((240 + ms * 500) * 0.72)
         for (let j = 0; j < n2; j++) {
           const x = rnd() * cw
           const y = rnd() * ch
@@ -2051,8 +2057,10 @@ export default {
           ctx.fillRect(x, y, s, s)
         }
       }
+      this._exportDrawDensePixelNoise(ctx, cw, ch, rnd, oilTimeMs)
       this._exportDrawFineNoiseMatte(ctx, cw, ch, rnd)
       this._exportDrawOilSweep(ctx, cw, ch, oilTimeMs)
+      this._exportDrawMetalReflectionOverlay(ctx, cw, ch, oilTimeMs)
       if (typeof ctx.setGlobalCompositeOperation === 'function') {
         ctx.setGlobalCompositeOperation('source-over')
       }
@@ -2143,9 +2151,6 @@ export default {
             previewVivid: this.previewVivid
           }
           this.$emit('saved', payload)
-          this.$nextTick(() => {
-            this._askSaveParamsAfterAlbum()
-          })
         },
         fail: (err) => {
           this._saving = false
@@ -2448,6 +2453,93 @@ export default {
   box-shadow:
     inset 0 0 0 1rpx rgba(255, 255, 255, 0.04),
     0 12rpx 40rpx rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-canvas {
+  display: block;
+  flex-shrink: 0;
+}
+
+.laser-backdrop-panel {
+  margin: 16rpx 32rpx 0;
+  padding: 0 0 8rpx;
+}
+
+.laser-backdrop-title {
+  display: block;
+  color: #9a9a9a;
+  font-size: 24rpx;
+  margin-bottom: 12rpx;
+  letter-spacing: 1rpx;
+}
+
+.laser-backdrop-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.laser-backdrop-row {
+  flex-direction: row;
+  display: inline-flex;
+  align-items: flex-end;
+  padding-bottom: 4rpx;
+}
+
+.laser-backdrop-item {
+  flex-direction: column;
+  display: inline-flex;
+  align-items: center;
+  width: 132rpx;
+  flex-shrink: 0;
+  margin-right: 16rpx;
+}
+
+.laser-backdrop-item:last-child {
+  margin-right: 0;
+}
+
+.laser-backdrop-item--active .laser-backdrop-thumb,
+.laser-backdrop-item--active .laser-backdrop-none {
+  border-color: rgba(102, 255, 255, 0.85);
+  box-shadow: 0 0 0 2rpx rgba(102, 255, 255, 0.35);
+}
+
+.laser-backdrop-thumb,
+.laser-backdrop-none {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 16rpx;
+  border: 2rpx solid rgba(255, 255, 255, 0.12);
+  background: #1a1a1a;
+  overflow: hidden;
+}
+
+.laser-backdrop-none {
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.laser-backdrop-none-text {
+  color: #666666;
+  font-size: 28rpx;
+}
+
+.laser-backdrop-name {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #b0b0b0;
+  text-align: center;
+  max-width: 132rpx;
+  overflow: hidden;
+}
+
+.laser-backdrop-item--active .laser-backdrop-name {
+  color: #66ffff;
 }
 
 .preview-img-mask-wrap {
diff --git a/frontend/pages/castlove/lenticular-studio.vue b/frontend/pages/castlove/lenticular-studio.vue
index eabfb80..5757e56 100644
--- a/frontend/pages/castlove/lenticular-studio.vue
+++ b/frontend/pages/castlove/lenticular-studio.vue
@@ -8,8 +8,13 @@
 				<text class="top-bar-title-text">光栅卡工作室</text>
 				<text class="top-bar-subtitle">倾斜手机 · 重力感应预览</text>
 			</view>
-			<view class="top-bar-btn" @tap="onMore">
-				<text class="nav-glyph">⋮</text>
+			<view class="top-bar-actions">
+				<view class="top-bar-chip" @tap.stop="onRecalibrate">
+					<text class="top-bar-chip-text">校零</text>
+				</view>
+				<view class="top-bar-btn" @tap="onMore">
+					<text class="nav-glyph">⋮</text>
+				</view>
 			</view>
 		</view>
 
@@ -21,16 +26,9 @@
 				:transforms="layerTransforms"
 				:gyro-source="gyroSourceLabel"
 				:skip-built-in-touch="true"
-				:tilt-hint-text="tiltHintText"
+				:tilt-hint-text="''"
 				@simulate="simulate"
 			/>
-
-			<view class="preview-controls" @tap.stop>
-				<view class="recalib-chip" @tap.stop="onRecalibrate">
-					<text class="recalib-chip-text">校零（水平对准）</text>
-				</view>
-				<text v-if="gyroHintLine" class="preview-controls-hint">{{ gyroHintLine }}</text>
-			</view>
 		</view>
 
 		<view class="tool-dock">
@@ -74,9 +72,10 @@ export default {
 </script>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import LenticularCard from '@/components/lenticular/LenticularCard.vue'
 import { useLenticularPreview } from '@/composables/useLenticularPreview.js'
+import { useLenticularStudioTilt } from '@/composables/useLenticularStudioTilt.js'
 import {
 	buildLenticularLayersTwo,
 	LENTICULAR_STUDIO_STORAGE_KEY,
@@ -85,129 +84,46 @@ import {
 const layers = ref([])
 const gyroSourceLabel = ref('simulation')
 
-let accelHandler = null
-let accelSmoothed = 0
-/** 平面内重力方向角增量积分，用于持续同向倾斜时周期性叠化 */
-let rollAccum = 0
-let prevCu = null
-let prevCv = null
-
-/** 基线帧数：过长时用户若在采样期小幅晃动，会把「水平」拉进摆动中间，相对角变小、体感发木 */
-const BASELINE_FRAMES = 10
-/** 瞬时相对基线角 → [-1,1] 的弧度尺度（越小越灵敏） */
-const INSTANT_FULL_RAD = 0.32
-/** 相邻帧转角上限（弧度），抑制噪声尖峰 */
-const MAX_STEP_RAD = 0.48
-/** 角增量放大：越大同向拧动积分越快、周期切换越快 */
-const STEP_GAIN = 2.15
-/** sin 相位倍率：越大同样积分下周期越多 */
-const SIN_PHASE_SCALE = 1.18
-/** 输出 = 瞬时项 + 周期项 的混合 */
-const BLEND_INSTANT = 0.38
-
-let tiltCal = {
-	lockedMode: null,
-	planeVotes: [],
-	sumU: 0,
-	sumV: 0,
-	count: 0,
-	ready: false,
-	bu: 1,
-	bv: 0,
-}
-
-function resetTiltCalibration() {
-	tiltCal = {
-		lockedMode: null,
-		planeVotes: [],
-		sumU: 0,
-		sumV: 0,
-		count: 0,
-		ready: false,
-		bu: 1,
-		bv: 0,
-	}
-}
-
-function majorityPlane(votes) {
-	const cnt = { xz: 0, xy: 0, yz: 0 }
-	for (const v of votes) cnt[v] = (cnt[v] || 0) + 1
-	if (cnt.xz >= cnt.xy && cnt.xz >= cnt.yz) return 'xz'
-	if (cnt.xy >= cnt.yz) return 'xy'
-	return 'yz'
-}
-
-/** 重力主要沿哪条设备轴：在该轴上投影小，用另两轴构成平面测「绕该轴的滚转」 */
-function detectGravityPlane(nx, ny, nz) {
-	const ax = Math.abs(nx)
-	const ay = Math.abs(ny)
-	const az = Math.abs(nz)
-	if (ay >= ax && ay >= az) return 'xz'
-	if (az >= ax && az >= ay) return 'xy'
-	return 'yz'
-}
-
-function uvForPlane(nx, ny, nz, mode) {
-	if (mode === 'xz') return { u: nx, v: nz }
-	if (mode === 'xy') return { u: nx, v: ny }
-	return { u: ny, v: nz }
-}
-
-/**
- * @returns {null | { warmup: boolean, cu?: number, cv?: number, deltaRad?: number }}
- */
-function accelToRelativeTilt01(ax, ay, az) {
-	const gMag = Math.hypot(ax, ay, az)
-	if (gMag < 0.18) return null
-	const nx = ax / gMag
-	const ny = ay / gMag
-	const nz = az / gMag
-
-	if (!tiltCal.ready) {
-		const m = detectGravityPlane(nx, ny, nz)
-		if (tiltCal.planeVotes.length < 5) tiltCal.planeVotes.push(m)
-		if (tiltCal.planeVotes.length >= 5 && tiltCal.lockedMode == null) {
-			tiltCal.lockedMode = majorityPlane(tiltCal.planeVotes)
-			tiltCal.sumU = 0
-			tiltCal.sumV = 0
-			tiltCal.count = 0
-		}
-		if (tiltCal.lockedMode == null) return { warmup: true }
-		const { u, v } = uvForPlane(nx, ny, nz, tiltCal.lockedMode)
-		const h = Math.hypot(u, v)
-		if (h < 0.035) return { warmup: true }
-		tiltCal.sumU += u / h
-		tiltCal.sumV += v / h
-		tiltCal.count += 1
-		if (tiltCal.count >= BASELINE_FRAMES) {
-			const bh = Math.hypot(tiltCal.sumU, tiltCal.sumV) || 1
-			tiltCal.bu = tiltCal.sumU / bh
-			tiltCal.bv = tiltCal.sumV / bh
-			tiltCal.ready = true
-		}
-		return { warmup: true }
-	}
-
-	const { u, v } = uvForPlane(nx, ny, nz, tiltCal.lockedMode)
-	const h = Math.hypot(u, v)
-	if (h < 0.028) return null
-	const cu = u / h
-	const cv = v / h
-	const sinD = cu * tiltCal.bv - cv * tiltCal.bu
-	const cosD = cu * tiltCal.bu + cv * tiltCal.bv
-	const deltaRad = Math.atan2(sinD, cosD)
-	return { warmup: false, cu, cv, deltaRad }
-}
-
 const { physics, layerTransforms, simulate } = useLenticularPreview(layers)
 
-const tiltHintText = computed(() => '缓慢扭动手机 · 「校零」回中')
+/** 相对进入时基准的倾角标量（度），每满 15° 一档；左右倾斜等价 */
+const STUDIO_DISCRETE_STEP_DEG = 15
+/** 档位施密特迟滞（度），减轻在档位边界来回跳 */
+const DISCRETE_STEP_HYST_DEG = 4
 
-const gyroHintLine = computed(() => {
-	if (gyroSourceLabel.value === 'accelerometer') {
-		return '重力计驱动 · 持续同向倾斜会反复叠化；可点「校零」'
-	}
-	return '倾斜驱动预览中；若无效请检查权限或换真机'
+const discreteStableStep = ref(0)
+
+/**
+ * 将相对基准的倾角标量（度，非负）映射为 LenticularEngine 的 gamma。
+ * @param {number} tiltMagDeg 相对校零的倾角幅度（度）；由 composable 已做低通时可为非负标量
+ */
+function simulateFromSignedDegrees(tiltMagDeg) {
+	const ls = layers.value || []
+	const n = Math.max(1, ls.length)
+	const absDeg = Math.abs(Number(tiltMagDeg) || 0)
+	const STEP = STUDIO_DISCRETE_STEP_DEG
+	const MARGIN = DISCRETE_STEP_HYST_DEG
+	let s = discreteStableStep.value
+	while (absDeg >= (s + 1) * STEP + MARGIN) s++
+	while (s > 0 && absDeg <= s * STEP - MARGIN) s--
+	discreteStableStep.value = s
+	const idx = s % n
+	const sens = physics.tiltSensitivity / 100
+	const mul = 0.44 + sens * 0.52
+	const u = (idx + 0.5) / n
+	const gPick = Math.max(-1, Math.min(1, 2 * u - 1))
+	const gamma = Math.max(-1, Math.min(1, gPick / mul))
+	simulate(gamma, 0)
+}
+
+const { start: startTilt, stop: stopTilt, recalibrate: recalibrateTilt } = useLenticularStudioTilt({
+	simulate,
+	simulateFromSignedDegrees,
+	gyroSourceLabel,
+	useStudioAccelDirect: true,
+	onTiltDriverFallback: () => {
+		discreteStableStep.value = 0
+	},
 })
 
 function goBack() {
@@ -279,86 +195,9 @@ function resetLayer(layerId) {
 	layers.value = copy
 }
 
-function stopAccel() {
-	try {
-		if (accelHandler && typeof uni.offAccelerometerChange === 'function') {
-			uni.offAccelerometerChange(accelHandler)
-		}
-	} catch (e) {
-		/* noop */
-	}
-	accelHandler = null
-	try {
-		uni.stopAccelerometer({})
-	} catch (e) {
-		/* noop */
-	}
-}
-
-function startAccel() {
-	stopAccel()
-	resetTiltCalibration()
-	accelSmoothed = 0
-	rollAccum = 0
-	prevCu = null
-	prevCv = null
-	accelHandler = (res) => {
-		const ax = Number(res.x) || 0
-		const ay = Number(res.y) || 0
-		const az = Number(res.z) || 0
-		const out = accelToRelativeTilt01(ax, ay, az)
-		if (out == null) return
-		if (out.warmup) return
-		const { cu, cv, deltaRad } = out
-		if (prevCu != null && prevCv != null) {
-			let step = Math.atan2(cu * prevCv - cv * prevCu, cu * prevCu + cv * prevCv)
-			if (step > Math.PI * 0.92) step -= 2 * Math.PI
-			if (step < -Math.PI * 0.92) step += 2 * Math.PI
-			step = Math.max(-MAX_STEP_RAD, Math.min(MAX_STEP_RAD, step))
-			rollAccum += step * STEP_GAIN
-		}
-		prevCu = cu
-		prevCv = cv
-
-		const instant = Math.max(-1, Math.min(1, deltaRad / INSTANT_FULL_RAD))
-		const cyclic = Math.sin(rollAccum * SIN_PHASE_SCALE)
-		const target = BLEND_INSTANT * instant + (1 - BLEND_INSTANT) * cyclic
-
-		accelSmoothed += (target - accelSmoothed) * 0.62
-		simulate(Math.max(-1, Math.min(1, accelSmoothed)), 0)
-		gyroSourceLabel.value = 'accelerometer'
-	}
-	try {
-		uni.onAccelerometerChange(accelHandler)
-		const applyStart = (interval) => {
-			uni.startAccelerometer({
-				interval,
-				success: () => {
-					gyroSourceLabel.value = 'accelerometer'
-				},
-				fail: () => {
-					if (interval === 'game') {
-						applyStart('normal')
-						return
-					}
-					gyroSourceLabel.value = 'simulation'
-					uni.showToast({ title: '无法启动加速度计', icon: 'none' })
-				},
-			})
-		}
-		applyStart('game')
-	} catch (e) {
-		gyroSourceLabel.value = 'simulation'
-	}
-}
-
 function onRecalibrate() {
-	resetTiltCalibration()
-	accelSmoothed = 0
-	rollAccum = 0
-	prevCu = null
-	prevCv = null
-	simulate(0, 0)
+	discreteStableStep.value = 0
+	recalibrateTilt()
 	uni.showToast({ title: '已重置水平基准', icon: 'none' })
 }
 
@@ -379,16 +218,17 @@ onMounted(() => {
 		return
 	}
 	nextTick(() => {
-		physics.angleStability = 16
-		physics.transitionSmoothness = 62
+		/* 离散换图：略降过渡混合，档位切换更利落 */
+		physics.angleStability = 6
+		physics.transitionSmoothness = 12
 		physics.tiltSensitivity = 96
 		physics.sensorDeadzoneStrength = 0
-		startAccel()
+		startTilt()
 	})
 })
 
 onUnmounted(() => {
-	stopAccel()
+	stopTilt()
 })
 </script>
 
@@ -426,6 +266,25 @@ onUnmounted(() => {
 	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
+.top-bar-actions {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.top-bar-chip {
+	padding: 6px 12px;
+	border-radius: 999px;
+	background: rgba(45, 52, 73, 0.75);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.top-bar-chip-text {
+	font-size: 12px;
+	font-weight: 600;
+	color: #ddb7ff;
+}
+
 .top-bar-btn {
 	width: 44px;
 	height: 44px;
@@ -477,40 +336,6 @@ onUnmounted(() => {
 	justify-content: center;
 }
 
-.preview-controls {
-	position: absolute;
-	top: 10px;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 22;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 8px;
-	max-width: 92vw;
-}
-
-.recalib-chip {
-	padding: 5px 14px;
-	border-radius: 999px;
-	background: rgba(45, 52, 73, 0.82);
-	border: 1px solid rgba(255, 255, 255, 0.12);
-}
-
-.recalib-chip-text {
-	font-size: 11px;
-	font-weight: 600;
-	color: #ddb7ff;
-}
-
-.preview-controls-hint {
-	font-size: 10px;
-	color: rgba(207, 194, 214, 0.78);
-	text-align: center;
-	max-width: 260px;
-	line-height: 1.45;
-}
-
 .canvas-bg {
 	position: absolute;
 	inset: 0;
diff --git a/frontend/scripts/generate_app_icons.py b/frontend/scripts/generate_app_icons.py
new file mode 100644
index 0000000..78ecc56
--- /dev/null
+++ b/frontend/scripts/generate_app_icons.py
@@ -0,0 +1,55 @@
+"""One-off: generate PNGs under unpackage/res/icons for manifest.json paths."""
+from pathlib import Path
+
+from PIL import Image, ImageDraw
+
+ROOT = Path(__file__).resolve().parents[1]
+# 勿放 unpackage/（.gitignore），否则云端/他人拉代码后 HBuilder 仍报图标不存在
+OUT = ROOT / "static" / "app-icons"
+
+BG = (0x4A, 0x6B, 0xCF)
+ACCENT = (0xFF, 0xFF, 0xFF)
+
+SIZES = {
+    "72x72.png": 72,
+    "96x96.png": 96,
+    "144x144.png": 144,
+    "192x192.png": 192,
+    "1024x1024.png": 1024,
+    "76x76.png": 76,
+    "152x152.png": 152,
+    "20x20.png": 20,
+    "40x40.png": 40,
+    "167x167.png": 167,
+    "29x29.png": 29,
+    "58x58.png": 58,
+    "80x80.png": 80,
+    "120x120.png": 120,
+    "180x180.png": 180,
+    "60x60.png": 60,
+    "87x87.png": 87,
+}
+
+
+def main() -> None:
+    OUT.mkdir(parents=True, exist_ok=True)
+    for fname, w in SIZES.items():
+        h = w
+        im = Image.new("RGB", (w, h), BG)
+        draw = ImageDraw.Draw(im)
+        margin = max(1, w // 8)
+        draw.ellipse(
+            [margin, margin, w - margin, h - margin],
+            outline=ACCENT,
+            width=max(1, w // 32),
+        )
+        if w >= 48:
+            r = w // 5
+            cx, cy = w // 2, h // 2
+            draw.ellipse([cx - r, cy - r, cx + r, cy + r], fill=ACCENT)
+        im.save(OUT / fname, format="PNG", optimize=True)
+    print("wrote", len(SIZES), "icons to", OUT)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/frontend/static/app-icons/1024x1024.png b/frontend/static/app-icons/1024x1024.png
new file mode 100644
index 0000000..c16f998
Binary files /dev/null and b/frontend/static/app-icons/1024x1024.png differ
diff --git a/frontend/static/app-icons/120x120.png b/frontend/static/app-icons/120x120.png
new file mode 100644
index 0000000..596b399
Binary files /dev/null and b/frontend/static/app-icons/120x120.png differ
diff --git a/frontend/static/app-icons/144x144.png b/frontend/static/app-icons/144x144.png
new file mode 100644
index 0000000..8de9c45
Binary files /dev/null and b/frontend/static/app-icons/144x144.png differ
diff --git a/frontend/static/app-icons/152x152.png b/frontend/static/app-icons/152x152.png
new file mode 100644
index 0000000..433f8c9
Binary files /dev/null and b/frontend/static/app-icons/152x152.png differ
diff --git a/frontend/static/app-icons/167x167.png b/frontend/static/app-icons/167x167.png
new file mode 100644
index 0000000..039c869
Binary files /dev/null and b/frontend/static/app-icons/167x167.png differ
diff --git a/frontend/static/app-icons/180x180.png b/frontend/static/app-icons/180x180.png
new file mode 100644
index 0000000..2ef080b
Binary files /dev/null and b/frontend/static/app-icons/180x180.png differ
diff --git a/frontend/static/app-icons/192x192.png b/frontend/static/app-icons/192x192.png
new file mode 100644
index 0000000..73d0883
Binary files /dev/null and b/frontend/static/app-icons/192x192.png differ
diff --git a/frontend/static/app-icons/20x20.png b/frontend/static/app-icons/20x20.png
new file mode 100644
index 0000000..3b74077
Binary files /dev/null and b/frontend/static/app-icons/20x20.png differ
diff --git a/frontend/static/app-icons/29x29.png b/frontend/static/app-icons/29x29.png
new file mode 100644
index 0000000..ac18bcc
Binary files /dev/null and b/frontend/static/app-icons/29x29.png differ
diff --git a/frontend/static/app-icons/40x40.png b/frontend/static/app-icons/40x40.png
new file mode 100644
index 0000000..cd6ca34
Binary files /dev/null and b/frontend/static/app-icons/40x40.png differ
diff --git a/frontend/static/app-icons/58x58.png b/frontend/static/app-icons/58x58.png
new file mode 100644
index 0000000..6e8dd62
Binary files /dev/null and b/frontend/static/app-icons/58x58.png differ
diff --git a/frontend/static/app-icons/60x60.png b/frontend/static/app-icons/60x60.png
new file mode 100644
index 0000000..f58afdc
Binary files /dev/null and b/frontend/static/app-icons/60x60.png differ
diff --git a/frontend/static/app-icons/72x72.png b/frontend/static/app-icons/72x72.png
new file mode 100644
index 0000000..6a021f3
Binary files /dev/null and b/frontend/static/app-icons/72x72.png differ
diff --git a/frontend/static/app-icons/76x76.png b/frontend/static/app-icons/76x76.png
new file mode 100644
index 0000000..1e89bbb
Binary files /dev/null and b/frontend/static/app-icons/76x76.png differ
diff --git a/frontend/static/app-icons/80x80.png b/frontend/static/app-icons/80x80.png
new file mode 100644
index 0000000..a0df197
Binary files /dev/null and b/frontend/static/app-icons/80x80.png differ
diff --git a/frontend/static/app-icons/87x87.png b/frontend/static/app-icons/87x87.png
new file mode 100644
index 0000000..1e30f50
Binary files /dev/null and b/frontend/static/app-icons/87x87.png differ
diff --git a/frontend/static/app-icons/96x96.png b/frontend/static/app-icons/96x96.png
new file mode 100644
index 0000000..297705f
Binary files /dev/null and b/frontend/static/app-icons/96x96.png differ
diff --git a/frontend/static/castlove/laser-bg/laser-bg-1.png b/frontend/static/castlove/laser-bg/laser-bg-1.png
new file mode 100644
index 0000000..7b5ba2f
Binary files /dev/null and b/frontend/static/castlove/laser-bg/laser-bg-1.png differ
diff --git a/frontend/static/castlove/laser-bg/laser-bg-2.png b/frontend/static/castlove/laser-bg/laser-bg-2.png
new file mode 100644
index 0000000..ca73b91
Binary files /dev/null and b/frontend/static/castlove/laser-bg/laser-bg-2.png differ
diff --git a/frontend/static/castlove/laser-bg/laser-bg-3.png b/frontend/static/castlove/laser-bg/laser-bg-3.png
new file mode 100644
index 0000000..ca73b91
Binary files /dev/null and b/frontend/static/castlove/laser-bg/laser-bg-3.png differ
diff --git a/frontend/static/fonts/经典圆体简.ttf b/frontend/static/fonts/JDLTYuanTiJian.ttf
similarity index 100%
rename from frontend/static/fonts/经典圆体简.ttf
rename to frontend/static/fonts/JDLTYuanTiJian.ttf