From fe7fbba1fc142a33f079bd660f9f9d6ef8c1b121 Mon Sep 17 00:00:00 2001
From: liulong <18539103286>
Date: Thu, 14 May 2026 16:42:27 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=BD=92=E6=A1=A3=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E7=8E=B0=E6=9C=89=E4=BB=A3=E7=A0=81=EF=BC=8C=E5=87=86=E5=A4=87?=
 =?UTF-8?q?=E6=96=B0=E5=BB=BA=E5=88=86=E6=94=AF=E5=BC=80=E5=8F=91=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sql/migrations/V5__mint_cost_config.sql   |   53 +
 frontend/components/ConfirmModal.vue          |   10 +-
 .../lenticular/CastloveLenticularPreview.vue  |   55 +
 .../components/lenticular/LenticularCard.vue  |  352 ++
 frontend/composables/useLenticularPreview.js  |  155 +
 frontend/pages.json                           |   19 +
 frontend/pages/castlove/craft-select.vue      |   67 +-
 frontend/pages/castlove/create.vue            |  860 ++++-
 frontend/pages/castlove/laser-card-studio.vue | 3336 +++++++++++++++++
 frontend/pages/castlove/lenticular-studio.vue |  657 ++++
 .../pages/components/HorizontalScroll.vue     |    8 +-
 frontend/pages/discover/discover.vue          |   31 +-
 frontend/pages/discover/generation-result.vue |   36 +-
 frontend/utils/api.js                         |  112 +-
 frontend/utils/castloveAfterLaserMint.js      |  179 +
 frontend/utils/castloveMintForm.js            |  138 +
 frontend/utils/h5OssPostUrl.js                |   26 +
 .../utils/laser-card/aliyunPortraitUni.js     |  557 +++
 frontend/utils/laser-card/segmentApi.js       |   48 +
 .../utils/laser-card/segmentationCloud.js     |  320 ++
 frontend/utils/lenticular-engine.js           |  256 ++
 frontend/vite.config.js                       |   83 +
 22 files changed, 7120 insertions(+), 238 deletions(-)
 create mode 100644 docker/sql/migrations/V5__mint_cost_config.sql
 create mode 100644 frontend/components/lenticular/CastloveLenticularPreview.vue
 create mode 100644 frontend/components/lenticular/LenticularCard.vue
 create mode 100644 frontend/composables/useLenticularPreview.js
 create mode 100644 frontend/pages/castlove/laser-card-studio.vue
 create mode 100644 frontend/pages/castlove/lenticular-studio.vue
 create mode 100644 frontend/utils/castloveAfterLaserMint.js
 create mode 100644 frontend/utils/castloveMintForm.js
 create mode 100644 frontend/utils/h5OssPostUrl.js
 create mode 100644 frontend/utils/laser-card/aliyunPortraitUni.js
 create mode 100644 frontend/utils/laser-card/segmentApi.js
 create mode 100644 frontend/utils/laser-card/segmentationCloud.js
 create mode 100644 frontend/utils/lenticular-engine.js
 create mode 100644 frontend/vite.config.js

diff --git a/docker/sql/migrations/V5__mint_cost_config.sql b/docker/sql/migrations/V5__mint_cost_config.sql
new file mode 100644
index 0000000..7c98ac5
--- /dev/null
+++ b/docker/sql/migrations/V5__mint_cost_config.sql
@@ -0,0 +1,53 @@
+-- 铸造经济：按「第几次铸爱」阶梯扣水晶（见 docs/specs/2026-04-15-economic-system-design.md）
+-- 未建表/未插数时，资产服务查配置会得到 record not found，网关表现为 code 17。
+
+-- 用户在某 star 下的累计铸爱次数（CreateMintOrder 会读/写）
+CREATE TABLE IF NOT EXISTS public.user_mint_count (
+    id BIGSERIAL PRIMARY KEY,
+    user_id BIGINT NOT NULL,
+    star_id BIGINT NOT NULL,
+    mint_count INT NOT NULL DEFAULT 0,
+    revenue_boost_bps INT NOT NULL DEFAULT 0,
+    updated_at BIGINT NOT NULL,
+    CONSTRAINT uk_user_mint_count_user_star UNIQUE (user_id, star_id)
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_mint_count_user ON public.user_mint_count USING btree (user_id);
+CREATE INDEX IF NOT EXISTS idx_user_mint_count_star ON public.user_mint_count USING btree (star_id);
+
+COMMENT ON TABLE public.user_mint_count IS '用户在某偶像下的累计铸爱次数与收益加成（基点）';
+
+-- 第 N 次铸爱对应扣费与保底概率（mint_count 唯一）
+CREATE TABLE IF NOT EXISTS public.mint_cost_config (
+    id BIGSERIAL PRIMARY KEY,
+    mint_count INT NOT NULL,
+    cost_crystal BIGINT NOT NULL,
+    probability BIGINT NOT NULL DEFAULT 0,
+    reward_type VARCHAR(50) DEFAULT NULL,
+    reward_value BIGINT NOT NULL DEFAULT 0,
+    description VARCHAR(255),
+    updated_at BIGINT NOT NULL,
+    CONSTRAINT uk_mint_cost_config_mint_count UNIQUE (mint_count)
+);
+
+COMMENT ON TABLE public.mint_cost_config IS '铸爱次数阶梯消耗与保底配置';
+
+INSERT INTO public.mint_cost_config (mint_count, cost_crystal, probability, reward_type, reward_value, description, updated_at)
+VALUES
+    (1, 2, 0, NULL, 0, '第1次', 1773322573872),
+    (2, 4, 0, NULL, 0, '第2次', 1773322573872),
+    (3, 8, 0, NULL, 0, '第3次', 1773322573872),
+    (4, 16, 0, NULL, 0, '第4次', 1773322573872),
+    (5, 32, 0, NULL, 0, '第5次', 1773322573872),
+    (6, 64, 0, NULL, 0, '第6次', 1773322573872),
+    (7, 128, 0, NULL, 0, '第7次', 1773322573872),
+    (8, 256, 0, NULL, 0, '第8次', 1773322573872),
+    (9, 512, 20, '收益提升', 5, '小保底', 1773322573872),
+    (10, 1024, 100, '收益提升', 5, '大保底', 1773322573872)
+ON CONFLICT (mint_count) DO UPDATE SET
+    cost_crystal = EXCLUDED.cost_crystal,
+    probability = EXCLUDED.probability,
+    reward_type = EXCLUDED.reward_type,
+    reward_value = EXCLUDED.reward_value,
+    description = EXCLUDED.description,
+    updated_at = EXCLUDED.updated_at;
diff --git a/frontend/components/ConfirmModal.vue b/frontend/components/ConfirmModal.vue
index da309a6..1fb90e5 100644
--- a/frontend/components/ConfirmModal.vue
+++ b/frontend/components/ConfirmModal.vue
@@ -24,11 +24,13 @@
   </view>
 </template>
 
-<script setup>
-defineOptions({
-  inheritAttrs: false
-})
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
 
+<script setup>
 const props = defineProps({
   visible: {
     type: Boolean,
diff --git a/frontend/components/lenticular/CastloveLenticularPreview.vue b/frontend/components/lenticular/CastloveLenticularPreview.vue
new file mode 100644
index 0000000..5ef06d9
--- /dev/null
+++ b/frontend/components/lenticular/CastloveLenticularPreview.vue
@@ -0,0 +1,55 @@
+<template>
+	<view class="lc-wrap">
+		<view class="lc-frame">
+			<LenticularCard
+				:layers="lenticularLayers"
+				:transforms="layerTransforms"
+				gyro-source="simulation"
+				:approximate-preview="true"
+				tilt-hint-text="滑动卡片预览光栅效果"
+				@simulate="simulate"
+			/>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import LenticularCard from './LenticularCard.vue'
+import { useLenticularPreview } from '@/composables/useLenticularPreview.js'
+import { buildLenticularLayers } from '@/utils/castloveMintForm.js'
+
+const props = defineProps({
+	/** 用户上传图：作为光栅主体层 */
+	imageSrc: {
+		type: String,
+		default: '',
+	},
+})
+
+const lenticularLayers = ref(buildLenticularLayers(props.imageSrc || ''))
+
+watch(
+	() => props.imageSrc,
+	(s) => {
+		lenticularLayers.value = buildLenticularLayers(s || '')
+	}
+)
+
+const { layerTransforms, simulate } = useLenticularPreview(lenticularLayers)
+</script>
+
+<style scoped>
+.lc-wrap {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	padding: 16rpx 0 32rpx;
+}
+
+.lc-frame {
+	width: 100%;
+	height: 520rpx;
+	max-height: 70vh;
+}
+</style>
diff --git a/frontend/components/lenticular/LenticularCard.vue b/frontend/components/lenticular/LenticularCard.vue
new file mode 100644
index 0000000..9ee5c85
--- /dev/null
+++ b/frontend/components/lenticular/LenticularCard.vue
@@ -0,0 +1,352 @@
+<template>
+	<view class="card-container">
+		<view
+			:id="cardId"
+			class="card-frame"
+			@touchstart.stop="onFrameTouchStart"
+			@touchmove.stop.prevent="onFrameTouchMove"
+			@touchend.stop="onFrameTouchEnd"
+			@touchcancel.stop="onFrameTouchEnd"
+		>
+			<view class="card-body" :style="cardRotateStyle">
+				<view
+					v-for="layer in layers"
+					:key="layer.id"
+					class="card-layer"
+					:style="getLayerStyle(layer)"
+				>
+					<image
+						v-if="layer.src"
+						class="card-layer-img"
+						:src="layer.src"
+						mode="aspectFill"
+					/>
+					<template v-else>
+						<view
+							v-for="(dot, i) in layer.dots || []"
+							:key="i"
+							class="card-layer-dot"
+							:style="getDotStyle(dot)"
+						/>
+					</template>
+				</view>
+
+				<view class="lenticular-shimmer" :style="shimmerStyle" />
+				<view class="lenticular-tint" />
+				<view class="glass-rim" />
+				<view class="vignette" />
+			</view>
+
+			<view v-if="showHint && tiltHintText" class="tilt-hint">
+				<text class="tilt-hint-icon">↻</text>
+				<text class="tilt-hint-text">{{ tiltHintText }}</text>
+				<text v-if="approximatePreview" class="tilt-hint-sub">叠化近似预览（倾斜或拖动体验光栅效果）</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+	layers: { type: Array, required: true },
+	transforms: { type: Object, required: true },
+	gyroSource: { type: String, default: 'simulation' },
+	approximatePreview: { type: Boolean, default: true },
+	skipBuiltInTouch: { type: Boolean, default: false },
+	tiltHintText: { type: String, default: '倾斜手机预览' },
+})
+
+const emit = defineEmits(['simulate'])
+
+const showHint = ref(true)
+const cardId = `lcard-${Math.random().toString(36).slice(2, 9)}`
+const cardRect = ref(null)
+/** Vue3 + uni：createSelectorQuery().in() 必须传组件 public 实例（proxy），传 internal instance 会运行时报错导致整页白屏 */
+const pageProxy = getCurrentInstance()?.proxy
+
+const MOTION_HIDE_PX = 0.45
+
+function shouldHideTiltHint() {
+	if (
+		props.gyroSource === 'accelerometer' ||
+		props.gyroSource === 'gyroscope' ||
+		props.gyroSource === 'orientation'
+	) {
+		return true
+	}
+	return Object.values(props.transforms || {}).some((t) => Math.abs(t.x) > MOTION_HIDE_PX)
+}
+
+watch(
+	() => props.gyroSource,
+	() => {
+		if (shouldHideTiltHint()) showHint.value = false
+	},
+	{ immediate: true }
+)
+
+watch(
+	() => props.transforms,
+	() => {
+		if (shouldHideTiltHint()) showHint.value = false
+	},
+	{ deep: true }
+)
+
+const tiltVisualX = computed(() => {
+	let num = 0
+	let den = 0
+	for (const layer of props.layers) {
+		const t = props.transforms[layer.id]
+		if (!t) continue
+		const w = Math.max(0.06, t.opacity)
+		num += t.x * w
+		den += w
+	}
+	return den > 1e-6 ? num / den : 0
+})
+
+const cardRotateStyle = computed(() => {
+	const x = tiltVisualX.value
+	const rotateY = (x / 120) * 12
+	return {
+		transform: `perspective(1000px) rotateY(${rotateY}deg) rotateX(0deg)`,
+	}
+})
+
+const shimmerStyle = computed(() => {
+	const x = tiltVisualX.value
+	const angle = 135 + (x / 120) * 60
+	return {
+		background: `linear-gradient(${angle}deg, transparent 30%, rgba(221,183,255,0.10) 50%, transparent 70%)`,
+	}
+})
+
+function getLayerStyle(layer) {
+	const t = props.transforms[layer.id]
+	const baseOpacity = t ? t.opacity : layer.opacity
+	const x = t ? t.x : 0
+	// 不在行内样式写 mix-blend-mode：部分小程序 / WebView 对非 normal 支持差，可能引发渲染异常
+	return {
+		opacity: baseOpacity,
+		transform: `translate3d(${x}px, 0, 0)`,
+		background: layer.background || 'transparent',
+	}
+}
+
+function getDotStyle(dot) {
+	const color = dot.color || '#dae2fd'
+	return {
+		left: `${dot.x}%`,
+		top: `${dot.y}%`,
+		width: `${dot.r * 2}px`,
+		height: `${dot.r * 2}px`,
+		background: color,
+		opacity: dot.opacity != null ? dot.opacity : 1,
+		boxShadow: `0 0 ${dot.r * 3}px ${color}`,
+	}
+}
+
+function refreshRect() {
+	return new Promise((resolve) => {
+		try {
+			const query = pageProxy ? uni.createSelectorQuery().in(pageProxy) : uni.createSelectorQuery()
+			query
+				.select(`#${cardId}`)
+				.boundingClientRect((rect) => {
+					if (rect && rect.width) {
+						cardRect.value = {
+							left: rect.left,
+							top: rect.top,
+							width: rect.width,
+							height: rect.height,
+						}
+					}
+					resolve()
+				})
+				.exec()
+		} catch (e) {
+			console.warn('[LenticularCard] refreshRect failed', e)
+			resolve()
+		}
+	})
+}
+
+function dispatch(clientX, clientY) {
+	const rect = cardRect.value
+	if (!rect || !rect.width || !rect.height) {
+		void refreshRect()
+		return
+	}
+	const cx = rect.left + rect.width / 2
+	const cy = rect.top + rect.height / 2
+	const nx = ((clientX - cx) / (rect.width / 2)) * 1.1
+	const ny = ((clientY - cy) / (rect.height / 2)) * 1.1
+	emit(
+		'simulate',
+		Math.max(-1, Math.min(1, nx)),
+		Math.max(-1, Math.min(1, ny))
+	)
+}
+
+function onTouchMove(e) {
+	if (props.skipBuiltInTouch) return
+	const touch = e.touches && e.touches[0] ? e.touches[0] : e.changedTouches && e.changedTouches[0] ? e.changedTouches[0] : null
+	if (!touch) return
+	dispatch(touch.clientX, touch.clientY)
+}
+
+function onFrameTouchStart(e) {
+	if (props.skipBuiltInTouch) return
+	onTouchMove(e)
+}
+
+function onFrameTouchMove(e) {
+	if (props.skipBuiltInTouch) return
+	onTouchMove(e)
+}
+
+function onFrameTouchEnd() {
+	if (props.skipBuiltInTouch) return
+	emit('simulate', 0, 0)
+}
+
+onMounted(() => {
+	setTimeout(() => {
+		void refreshRect()
+	}, 0)
+})
+</script>
+
+<style scoped>
+.card-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	perspective: 1000px;
+}
+
+.card-frame {
+	position: relative;
+	height: 100%;
+	max-height: 100%;
+	aspect-ratio: 3 / 4;
+	width: auto;
+	max-width: min(420px, 94vw);
+}
+
+.card-body {
+	position: absolute;
+	inset: 0;
+	border-radius: 24px;
+	overflow: hidden;
+	transform-style: preserve-3d;
+	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
+	border: 1px solid rgba(255, 255, 255, 0.18);
+	background-color: #060e20;
+	will-change: transform;
+}
+
+.card-layer {
+	position: absolute;
+	top: -6%;
+	left: -6%;
+	width: 112%;
+	height: 112%;
+	will-change: transform, opacity;
+	background-size: cover;
+	background-position: center;
+}
+
+.card-layer-img {
+	width: 100%;
+	height: 100%;
+}
+
+.card-layer-dot {
+	position: absolute;
+	border-radius: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.lenticular-shimmer {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	opacity: 0.85;
+}
+
+.lenticular-tint {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background: linear-gradient(
+		135deg,
+		rgba(221, 183, 255, 0.1) 0%,
+		transparent 35%,
+		transparent 65%,
+		rgba(76, 215, 246, 0.1) 100%
+	);
+	opacity: 0.6;
+}
+
+.glass-rim {
+	position: absolute;
+	inset: 0;
+	border-radius: 24px;
+	border-top: 1px solid rgba(221, 183, 255, 0.42);
+	box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.05);
+	pointer-events: none;
+}
+
+.vignette {
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(to top, rgba(6, 14, 32, 0.82), transparent 50%);
+	pointer-events: none;
+}
+
+.tilt-hint {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	background: rgba(45, 52, 73, 0.6);
+	backdrop-filter: blur(12px);
+	padding: 14px 22px;
+	border-radius: 16px;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	pointer-events: none;
+}
+
+.tilt-hint-icon {
+	font-size: 28px;
+	line-height: 1;
+	color: #ddb7ff;
+}
+
+.tilt-hint-text {
+	font-size: 13px;
+	font-weight: 600;
+	letter-spacing: 0.08em;
+	color: #dae2fd;
+}
+
+.tilt-hint-sub {
+	font-size: 10px;
+	font-weight: 500;
+	letter-spacing: 0.04em;
+	color: rgba(207, 194, 214, 0.75);
+	text-align: center;
+	max-width: 200px;
+	line-height: 1.35;
+}
+</style>
diff --git a/frontend/composables/useLenticularPreview.js b/frontend/composables/useLenticularPreview.js
new file mode 100644
index 0000000..69375a8
--- /dev/null
+++ b/frontend/composables/useLenticularPreview.js
@@ -0,0 +1,155 @@
+/**
+ * 光栅卡预览：触摸模拟倾斜 + LenticularEngine（不启动硬件传感器）
+ * @param {import('vue').Ref<Array>} layersRef 图层配置（reactive/ref 均可被 .value 读取时用 ref）
+ */
+import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
+import { LenticularEngine, DEFAULT_PHYSICS } from '@/utils/lenticular-engine.js'
+
+function clamp(v, min, max) {
+	return Math.max(min, Math.min(max, v))
+}
+
+export function useLenticularPreview(layersRef) {
+	const physics = reactive({ ...DEFAULT_PHYSICS })
+	physics.gyroSimEnabled = false
+
+	const sensorData = ref({ gamma: 0, beta: 0, timestamp: Date.now() })
+	const source = ref('simulation')
+
+	function simulate(x, _y) {
+		sensorData.value = {
+			gamma: clamp(x, -1, 1),
+			beta: 0,
+			timestamp: Date.now(),
+		}
+	}
+
+	function relax(factor = 0.85) {
+		sensorData.value = {
+			gamma: sensorData.value.gamma * factor,
+			beta: 0,
+			timestamp: Date.now(),
+		}
+	}
+
+	const engine = new LenticularEngine(physics)
+	const initial = layersRef.value || layersRef
+	engine.setLayers(Array.isArray(initial) ? initial : [])
+
+	const layerTransforms = ref({})
+
+	function rebuildTransformsFromLayers(ls) {
+		const prev = layerTransforms.value
+		const next = {}
+		for (const l of ls) {
+			const p = prev[l.id]
+			next[l.id] =
+				p != null ? p : { x: 0, y: 0, opacity: l.opacity }
+		}
+		layerTransforms.value = next
+	}
+
+	rebuildTransformsFromLayers(engine.layers.length ? engine.layers : layersRef.value || [])
+
+	const stripeRender = ref({
+		phaseShift: 0,
+		shares: [1 / 3, 1 / 3, 1 / 3],
+		pitchPx: DEFAULT_PHYSICS.lenticularPitchPx,
+		prevLayerGhost: null,
+	})
+
+	let rafId = null
+	const nextFrame =
+		typeof requestAnimationFrame === 'function'
+			? (cb) => requestAnimationFrame(cb)
+			: (cb) => setTimeout(cb, 16)
+	const cancelFrame =
+		typeof cancelAnimationFrame === 'function'
+			? (id) => cancelAnimationFrame(id)
+			: (id) => clearTimeout(id)
+
+	function getLayersArray() {
+		const v = layersRef.value !== undefined ? layersRef.value : layersRef
+		return Array.isArray(v) ? v : []
+	}
+
+	function tick() {
+		try {
+			const ls = getLayersArray()
+			const renderState = engine.feedSimulatedTilt(sensorData.value.gamma, sensorData.value.beta)
+			const next = {}
+			for (const layer of ls) {
+				const offset = renderState.layerOffsets.get(layer.id)
+				const opacity = renderState.layerOpacities.get(layer.id)
+				next[layer.id] = {
+					x: offset != null ? offset.x : 0,
+					y: offset != null ? offset.y : 0,
+					opacity: opacity != null ? opacity : layer.opacity,
+				}
+			}
+			layerTransforms.value = next
+			stripeRender.value = {
+				phaseShift: renderState.stripePhaseShift,
+				shares: [...renderState.stripShares],
+				pitchPx: renderState.lenticularPitchPx,
+				prevLayerGhost: renderState.prevLayerGhost,
+			}
+		} catch (e) {
+			console.error('[useLenticularPreview] tick failed', e)
+		}
+		rafId = nextFrame(tick)
+	}
+
+	function startRenderLoop() {
+		if (rafId != null) return
+		rafId = nextFrame(tick)
+	}
+
+	function stopRenderLoop() {
+		if (rafId != null) {
+			cancelFrame(rafId)
+			rafId = null
+		}
+	}
+
+	watch(
+		layersRef,
+		(ls) => {
+			const arr = Array.isArray(ls) ? ls : []
+			engine.setLayers(arr)
+			rebuildTransformsFromLayers(arr)
+		},
+		{ deep: true, immediate: true }
+	)
+
+	onMounted(() => {
+		startRenderLoop()
+	})
+
+	onUnmounted(() => {
+		stopRenderLoop()
+	})
+
+	const gyro = {
+		sensorData,
+		source,
+		simulate,
+		relax,
+		start: () => {},
+		stop: () => {
+			source.value = 'simulation'
+		},
+	}
+
+	return {
+		physics,
+		layerTransforms,
+		stripeRender,
+		gyro,
+		simulate,
+		relax,
+		engine,
+		startRenderLoop,
+		stopRenderLoop,
+	}
+}
diff --git a/frontend/pages.json b/frontend/pages.json
index a41389f..3600c4a 100644
--- a/frontend/pages.json
+++ b/frontend/pages.json
@@ -134,6 +134,25 @@
 				}
 			}
 		},
+		{
+			"path": "pages/castlove/lenticular-studio",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
+		{
+			"path": "pages/castlove/laser-card-studio",
+			"style": {
+				"navigationStyle": "custom",
+				"backgroundColor": "#0a0a0a",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
 		{
 			"path": "pages/castlove/craft-select",
 			"style": {
diff --git a/frontend/pages/castlove/craft-select.vue b/frontend/pages/castlove/craft-select.vue
index c62b9f8..a1948e3 100644
--- a/frontend/pages/castlove/craft-select.vue
+++ b/frontend/pages/castlove/craft-select.vue
@@ -5,9 +5,12 @@
             <!-- 左侧图片卡片区域 - 半圆弧形布局 -->
             <view class="cards-container">
                 <view v-for="(card, index) in cardList" :key="index" class="card-item"
-                    :class="{ 'card-selected': selectedIndex === index }" :style="getCardStyle(index)"
-                    @click="selectCard(index)">
-                    <view class="card-frame" :class="{ 'no-border': card.comingSoon }">
+                    :class="{ 'card-selected': selectedIndex === index }" :style="getCardStyle(index)">
+                    <view
+                        class="card-frame"
+                        :class="{ 'no-border': card.comingSoon, 'card-frame--tappable': !card.comingSoon }"
+                        @tap.stop="onCardFrameTap(index)"
+                    >
                         <image class="card-image" :src="card.image" mode="aspectFill" />
                         <image v-if="card.comingSoon" class="coming-soon-badge" src="/static/castlove/jinqingqidai.png" mode="aspectFit" />
                     </view>
@@ -48,6 +51,18 @@
 
 <script>
 export default {
+    onShow() {
+        try {
+            uni.hideToast();
+        } catch (e) {
+            /* noop */
+        }
+        try {
+            uni.hideLoading();
+        } catch (e) {
+            /* noop */
+        }
+    },
     data() {
         return {
             selectedIndex: 2, // 初始选中光栅卡
@@ -99,6 +114,35 @@ export default {
         selectCard(index) {
             this.selectedIndex = index;
         },
+        /** 当前叠卡在弧形布局中的槽位：2=正中主图（最大），1=中上「第二张」叠层，0最上… */
+        getCardStackPosition(index) {
+            return (index - this.selectedIndex + 2 + 5) % 5;
+        },
+        /**
+         * 点击卡图区域：
+         * - 正中主图（槽位 2）→ 进入对应工艺创建页（光栅卡即进入已接入预览的 create）
+         * - 中上叠层（槽位 1，常为拍立得示意）在选中光栅时 → 同样进入光栅卡创建（与设计稿「点第二张进光栅」一致）
+         * - 其余叠层 → 仅切换选中
+         */
+        onCardFrameTap(index) {
+            const card = this.cardList[index];
+            if (!card || card.comingSoon) {
+                return;
+            }
+            const pos = this.getCardStackPosition(index);
+            const LENTICULAR_INDEX = 2;
+            const goLenticular =
+                this.selectedIndex === LENTICULAR_INDEX &&
+                (pos === 2 || pos === 1);
+            const targetName = goLenticular ? '光栅卡' : card.name;
+            if (pos === 2 || goLenticular) {
+                uni.navigateTo({
+                    url: `/pages/castlove/create?name=${encodeURIComponent(targetName)}`,
+                });
+                return;
+            }
+            this.selectCard(index);
+        },
         handleBack() {
             uni.navigateBack()
         },
@@ -115,13 +159,14 @@ export default {
             }
         },
         handleSkip() {
-            // 跳过，选择默认卡片或第一张
-            const defaultIndex = this.cardList.findIndex(card => !card.comingSoon);
-            if (defaultIndex !== -1) {
-                uni.navigateTo({
-                    url: `/pages/castlove/create?name=${encodeURIComponent(this.cardList[defaultIndex].name)}`
-                });
+            const card = this.cardList[this.selectedIndex]
+            if (!card || card.comingSoon) {
+                uni.showToast({ title: '请选择已开放的工艺', icon: 'none' })
+                return
             }
+            uni.navigateTo({
+                url: `/pages/castlove/create?name=${encodeURIComponent(card.name)}`
+            })
         }
     }
 }
@@ -156,8 +201,10 @@ export default {
     width: 344rpx;
     height: 344rpx;
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-frame--tappable {
     cursor: pointer;
-    
 }
 
 .card-frame {
diff --git a/frontend/pages/castlove/create.vue b/frontend/pages/castlove/create.vue
index 1e6c418..28161b0 100644
--- a/frontend/pages/castlove/create.vue
+++ b/frontend/pages/castlove/create.vue
@@ -1,38 +1,94 @@
 <template>
-	<view class="page-container">
+	<view class="page-container" :class="{ 'page-container--laser': isLaserCardCraft }">
 		
 		<!-- 背景图片 -->
 		<image class="background-image" src="/static/background/starbook.jpg" mode="aspectFill"></image>
-		<!-- <view class="background-overlay"></view> -->
+		<view v-if="isLaserCardCraft" class="laser-bg-veil" aria-hidden="true" />
+
+		<!-- 镭射卡：左上角关闭 -->
+		<view v-if="isLaserCardCraft" class="laser-close-hit" @click="handleBack">
+			<text class="laser-close-x">×</text>
+		</view>
 
 		<!-- 主内容区域 -->
-		<scroll-view class="content-wrapper" scroll-y="true" :show-scrollbar="false" :enhanced="true">
+		<scroll-view
+			class="content-wrapper"
+			:class="{ 'content-wrapper--laser': isLaserCardCraft }"
+			scroll-y="true"
+			:show-scrollbar="false"
+			:enhanced="scrollEnhanced"
+		>
 			<!-- 页面标题 -->
 			<!-- <view v-if="pageName" class="page-title">
 				<text class="title-text">创建{{ pageName }}</text>
 			</view> -->
 			
-			<!-- 图片上传区域 -->
-			<view class="upload-section">
-				<view class="upload-box" @click="chooseImage">
-					<image v-if="uploadedImage" class="uploaded-image" :src="uploadedImage" mode="aspectFit"></image>
-					<view v-else class="upload-placeholder">
-						<image class="upload-icon" src="/static/icon/add.png" mode="aspectFit"></image>
-						<text class="upload-text">点击上传图片</text>
+			<!-- 光栅卡：必须分别上传背景 + 主体 -->
+			<view v-if="isLenticularCraft" class="upload-section">
+				<view class="lenticular-upload-row">
+					<view class="upload-box upload-box--half" @click="chooseLenticularBg">
+						<image v-if="uploadedBg" class="uploaded-image" :src="uploadedBg" mode="aspectFit"></image>
+						<view v-else class="upload-placeholder">
+							<image class="upload-icon" src="/static/icon/add.png" mode="aspectFit"></image>
+							<text class="upload-text">背景图</text>
+						</view>
+					</view>
+					<view class="upload-box upload-box--half" @click="chooseLenticularSubject">
+						<image v-if="uploadedSubject" class="uploaded-image" :src="uploadedSubject" mode="aspectFit"></image>
+						<view v-else class="upload-placeholder">
+							<image class="upload-icon" src="/static/icon/add.png" mode="aspectFit"></image>
+							<text class="upload-text">主体图</text>
+						</view>
 					</view>
 				</view>
-				<view class="upload-hint">支持JPG、PNG格式，大小不超过5MB</view>
+				<view class="upload-hint">请各上传一张：JPG / PNG，单张不超过 5MB</view>
+			</view>
+
+			<!-- 其他工艺：单图上传 -->
+			<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">
+						<image v-if="uploadedImage" class="uploaded-image" :src="uploadedImage" mode="aspectFill"></image>
+						<view v-else-if="isLaserCardCraft" class="upload-laser-empty">
+							<view class="upload-laser-watermark" aria-hidden="true" />
+							<view class="upload-laser-dashed-inner">
+								<view class="upload-plus-ring">
+									<text class="upload-plus upload-plus--laser">+</text>
+								</view>
+								<text class="upload-text upload-text--laser">点击上传图片</text>
+							</view>
+						</view>
+						<view v-else class="upload-placeholder">
+							<image class="upload-icon" src="/static/icon/add.png" mode="aspectFit" />
+							<text class="upload-text">点击上传图片</text>
+						</view>
+					</view>
+					<view
+						v-if="isLaserCardCraft && uploadedImage"
+						class="upload-clear upload-clear--laser"
+						@click.stop="clearSingleUploadedImage"
+					>
+						<text class="upload-clear-x upload-clear-x--laser">×</text>
+					</view>
+				</view>
+				<view class="upload-hint">{{ isLaserCardCraft ? '支持JPG.PNG格式，大小不超过5M' : '支持JPG、PNG格式，大小不超过5MB' }}</view>
 			</view>
 
 			<!-- 表单区域 -->
-			<view class="form-section">
+			<view class="form-section" :class="{ 'form-section--laser': isLaserCardCraft }">
 				<!-- 素材类型选择器 -->
 				<view class="form-item form-item-picker">
-					<text class="form-label">素材类型</text>
+					<text class="form-label" :class="{ 'form-label--laser': isLaserCardCraft }">素材类型</text>
 					<view class="custom-picker">
-						<view class="picker-display" @click="toggleMaterialTypePicker">
+						<view class="picker-display" :class="{ 'picker-display--laser': isLaserCardCraft }" @click="toggleMaterialTypePicker">
 							<text class="picker-text">{{ materialTypes[materialTypeIndex] }}</text>
-							<text class="picker-arrow" :class="{ 'picker-arrow-up': showMaterialTypePicker }">›</text>
+							<text
+								class="picker-arrow"
+								:class="{
+									'picker-arrow-up': showMaterialTypePicker,
+									'picker-arrow--laser': isLaserCardCraft,
+								}"
+							>{{ isLaserCardCraft ? '▼' : '›' }}</text>
 						</view>
 						<view v-if="showMaterialTypePicker" class="picker-options">
 							<view v-for="(type, index) in materialTypes" :key="index" class="picker-option"
@@ -47,18 +103,26 @@
 
 				<!-- 藏品信息 -->
 				<view class="form-item">
-					<text class="form-label">藏品信息</text>
-					<textarea class="form-textarea" v-model="nftInfo" placeholder="请输入藏品相关信息"
-						placeholder-class="textarea-placeholder" maxlength="500" auto-height :show-confirm-bar="false" />
+					<text class="form-label" :class="{ 'form-label--laser': isLaserCardCraft }">藏品信息</text>
+					<textarea
+						class="form-textarea"
+						:class="{ 'form-textarea--laser': isLaserCardCraft }"
+						v-model="nftInfo"
+						placeholder="请输入藏品相关信息"
+						placeholder-class="textarea-placeholder"
+						maxlength="500"
+						auto-height
+						:show-confirm-bar="false"
+					/>
 				</view>
 			</view>
 
 			<!-- AI描述区域 -->
-			<view class="ai-section">
-				<text class="section-title">AI 生成描述</text>
+			<view class="ai-section" :class="{ 'ai-section--laser': isLaserCardCraft }">
+				<text class="section-title" :class="{ 'section-title--laser': isLaserCardCraft }">{{ isLaserCardCraft ? 'AI生成描述' : 'AI 生成描述' }}</text>
 
 				<!-- AI描述输入框 -->
-				<view class="ai-input-wrapper">
+				<view class="ai-input-wrapper" :class="{ 'ai-input-wrapper--laser': isLaserCardCraft }">
 					<textarea 
 						class="ai-input" 
 						v-model="aiDescription" 
@@ -68,7 +132,7 @@
 						:show-confirm-bar="false"
 						maxlength="500"
 					/>
-					<view class="input-actions">
+					<view v-if="!isLaserCardCraft" class="input-actions">
 						<!-- 发送按钮 -->
 						<view class="action-icon-btn send-btn" @click="handleGenerate">
 							<image class="action-icon" src="/static/icon/send.png" mode="aspectFit" />
@@ -79,9 +143,16 @@
 			</view>
 
 			<!-- 底部按钮 -->
-			<view class="button-section">
-				<button class="btn-secondary" @click="handleBack">返回</button>
-				<button class="btn-skip" @click="handleSkip">跳过</button>
+			<view class="button-section" :class="{ 'button-section--laser': isLaserCardCraft }">
+				<button class="btn-secondary" :class="{ 'btn-secondary--laser': isLaserCardCraft }" @click="handleBack">返回</button>
+				<button v-if="isLenticularCraft" class="btn-skip" @click="handleLenticularGenerate">生成</button>
+				<button
+					v-else
+					:class="isLaserCardCraft ? 'btn-confirm-laser' : 'btn-skip'"
+					@click="handleSingleCraftLaserEntry"
+				>
+					{{ isLaserCardCraft ? '确认' : '生成' }}
+				</button>
 			</view>
 		</scroll-view>
 
@@ -100,18 +171,70 @@
 	/>
 </template>
 
+<script>
+export default {
+	inheritAttrs: false,
+};
+</script>
+
 <script setup>
-defineOptions({
-  inheritAttrs: false
-})
-
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+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 {
+	buildCastloveFormSnapshot,
+	CRAFT_LENTICULAR_CN,
+	CRAFT_LASER_CARD_CN,
+	CASTLOVE_LASER_ENTRY_KEY,
+	LENTICULAR_STUDIO_STORAGE_KEY,
+} from '@/utils/castloveMintForm.js';
 
-// 获取页面参数
+// 获取页面参数（H5 必须用 onLoad 读 query；仅靠 onMounted + getCurrentPages().options 常为 undefined）
 const pageType = ref('');
 const pageName = ref('');
+// #ifdef MP-WEIXIN
+const scrollEnhanced = true;
+// #endif
+// #ifndef MP-WEIXIN
+const scrollEnhanced = false;
+// #endif
+
+const isLenticularCraft = computed(() => pageName.value === CRAFT_LENTICULAR_CN);
+const isLaserCardCraft = computed(() => pageName.value === CRAFT_LASER_CARD_CN);
+
+onUnload(() => {
+	try {
+		uni.hideToast();
+	} catch (e) {
+		/* noop */
+	}
+	try {
+		uni.hideLoading();
+	} catch (e) {
+		/* noop */
+	}
+});
+
+function safeDecodeParam(v) {
+	if (v == null || v === '') return '';
+	const s = typeof v === 'string' ? v : String(v);
+	try {
+		return decodeURIComponent(s.replace(/\+/g, ' '));
+	} catch {
+		return s;
+	}
+}
+
+function applyCreateRouteOptions(options) {
+	if (!options || typeof options !== 'object') return;
+	if (options.type) pageType.value = safeDecodeParam(options.type);
+	if (options.name != null && String(options.name) !== '') {
+		pageName.value = safeDecodeParam(options.name);
+		console.log('[CreatePage] 工艺名称:', pageName.value);
+	}
+}
 
 // 通用确认弹窗状态
 const confirmModal = ref({
@@ -156,6 +279,12 @@ const showConfirmModal = (options) => {
 // 表单数据
 const uploadedImage = ref('');
 const uploadedImageBase64 = ref('');
+/** 光栅：背景 / 主体双槽位；空字符串表示普通单图上传 */
+const pendingLenticularSlot = ref('');
+const uploadedBg = ref('');
+const uploadedBgBase64 = ref('');
+const uploadedSubject = ref('');
+const uploadedSubjectBase64 = ref('');
 const originalFileName = ref('');
 const isUploading = ref(false);
 const materialTypes = ['粉丝自制', '热爱痕迹', '其他'];
@@ -168,12 +297,53 @@ const aiDescription = ref('');
 
 // 风格标签数据 - 已移除
 
-// 选择图片
+function applyUploadResult(filePath, dataUrl) {
+	const slot = pendingLenticularSlot.value;
+	if (slot === 'bg') {
+		uploadedBg.value = filePath;
+		uploadedBgBase64.value = dataUrl;
+	} else if (slot === 'subject') {
+		uploadedSubject.value = filePath;
+		uploadedSubjectBase64.value = dataUrl;
+	} else {
+		uploadedImage.value = filePath;
+		uploadedImageBase64.value = dataUrl;
+	}
+	pendingLenticularSlot.value = '';
+	uni.hideLoading();
+	uni.showToast({ title: '图片加载成功', icon: 'success', duration: 1500 });
+	isUploading.value = false;
+}
+
+// 选择图片（非光栅单图）
 const chooseImage = () => {
+	openImagePicker('');
+};
+
+const onSingleUploadTap = () => {
+	chooseImage();
+};
+
+const clearSingleUploadedImage = () => {
+	uploadedImage.value = '';
+	uploadedImageBase64.value = '';
+	originalFileName.value = '';
+};
+
+const chooseLenticularBg = () => {
+	openImagePicker('bg');
+};
+
+const chooseLenticularSubject = () => {
+	openImagePicker('subject');
+};
+
+const openImagePicker = (lenticularSlot) => {
 	if (isUploading.value) {
 		uni.showToast({ title: '图片上传中，请稍候', icon: 'none' });
 		return;
 	}
+	pendingLenticularSlot.value = lenticularSlot;
 
 	uni.chooseImage({
 		count: 1,
@@ -187,6 +357,7 @@ const chooseImage = () => {
 				success: (fileInfo) => {
 					const maxSize = 5 * 1024 * 1024;
 					if (fileInfo.size > maxSize) {
+						pendingLenticularSlot.value = '';
 						uni.showToast({ title: '图片大小不能超过5MB', icon: 'none', duration: 2000 });
 						return;
 					}
@@ -196,6 +367,7 @@ const chooseImage = () => {
 					const validByMime = mimeType === 'image/jpeg' || mimeType === 'image/png';
 					const validByExt = pathLower.endsWith('.jpg') || pathLower.endsWith('.jpeg') || pathLower.endsWith('.png');
 					if (!validByMime && !validByExt) {
+						pendingLenticularSlot.value = '';
 						uni.showToast({ title: '只支持JPG和PNG格式', icon: 'none', duration: 2000 });
 						return;
 					}
@@ -205,12 +377,14 @@ const chooseImage = () => {
 					convertImageToBase64(filePath, originalFileName.value);
 				},
 				fail: (error) => {
+					pendingLenticularSlot.value = '';
 					console.error('获取文件信息失败:', error);
 					uni.showToast({ title: '获取文件信息失败', icon: 'none' });
 				}
 			});
 		},
 		fail: (err) => {
+			pendingLenticularSlot.value = '';
 			console.error('选择图片失败:', err);
 			uni.showToast({ title: '选择图片失败', icon: 'none' });
 		}
@@ -237,18 +411,12 @@ const convertImageToBase64H5 = (filePath, fileName) => {
 		.then(blob => {
 			const reader = new FileReader();
 			reader.onload = (e) => {
-				// e.target.result 已经是完整的 data:image/xxx;base64,xxx 格式
-				uploadedImageBase64.value = e.target.result;
-				uploadedImage.value = filePath;
-				
+				applyUploadResult(filePath, e.target.result);
 				console.log('[CreatePage] Base64转换成功 (H5)');
-				console.log('[CreatePage] Base64长度:', uploadedImageBase64.value.length);
-				
-				uni.hideLoading();
-				uni.showToast({ title: '图片加载成功', icon: 'success', duration: 1500 });
-				isUploading.value = false;
+				console.log('[CreatePage] Base64长度:', (e.target.result && e.target.result.length) || 0);
 			};
 			reader.onerror = (error) => {
+				pendingLenticularSlot.value = '';
 				console.error('[CreatePage] Base64转换失败 (H5):', error);
 				uni.hideLoading();
 				uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
@@ -257,6 +425,7 @@ const convertImageToBase64H5 = (filePath, fileName) => {
 			reader.readAsDataURL(blob);
 		})
 		.catch(error => {
+			pendingLenticularSlot.value = '';
 			console.error('[CreatePage] 获取图片失败 (H5):', error);
 			uni.hideLoading();
 			uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
@@ -274,18 +443,13 @@ const convertImageToBase64Native = (filePath, fileName) => {
 			const ext = fileName.toLowerCase().split('.').pop();
 			let mimeType = 'image/jpeg';
 			if (ext === 'png') mimeType = 'image/png';
-			
-			uploadedImageBase64.value = `data:${mimeType};base64,${res.data}`;
-			uploadedImage.value = filePath;
-			
+			const dataUrl = `data:${mimeType};base64,${res.data}`;
+			applyUploadResult(filePath, dataUrl);
 			console.log('[CreatePage] Base64转换成功 (小程序)');
-			console.log('[CreatePage] Base64长度:', uploadedImageBase64.value.length);
-			
-			uni.hideLoading();
-			uni.showToast({ title: '图片加载成功', icon: 'success', duration: 1500 });
-			isUploading.value = false;
+			console.log('[CreatePage] Base64长度:', dataUrl.length);
 		},
 		fail: (error) => {
+			pendingLenticularSlot.value = '';
 			console.error('[CreatePage] Base64转换失败 (小程序):', error);
 			uni.hideLoading();
 			uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
@@ -299,17 +463,12 @@ const convertImageToBase64Native = (filePath, fileName) => {
 		entry.file((file) => {
 			const reader = new plus.io.FileReader();
 			reader.onloadend = (e) => {
-				uploadedImageBase64.value = e.target.result;
-				uploadedImage.value = filePath;
-				
+				applyUploadResult(filePath, e.target.result);
 				console.log('[CreatePage] Base64转换成功 (App)');
-				console.log('[CreatePage] Base64长度:', uploadedImageBase64.value.length);
-				
-				uni.hideLoading();
-				uni.showToast({ title: '图片加载成功', icon: 'success', duration: 1500 });
-				isUploading.value = false;
+				console.log('[CreatePage] Base64长度:', (e.target.result && e.target.result.length) || 0);
 			};
 			reader.onerror = (error) => {
+				pendingLenticularSlot.value = '';
 				console.error('[CreatePage] Base64转换失败 (App):', error);
 				uni.hideLoading();
 				uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
@@ -318,6 +477,7 @@ const convertImageToBase64Native = (filePath, fileName) => {
 			reader.readAsDataURL(file);
 		});
 	}, (error) => {
+		pendingLenticularSlot.value = '';
 		console.error('[CreatePage] 读取文件失败 (App):', error);
 		uni.hideLoading();
 		uni.showToast({ title: '图片处理失败', icon: 'none', duration: 2000 });
@@ -342,10 +502,10 @@ const uploadImageToOss = async (base64Data, ossData) => {
 		const fileName = `${Date.now()}.jpg`;
 		
 		// #ifdef H5
-		// H5环境直接使用base64
+		// H5：仍走原有 OSS PostObject；本地开发经 manifest devServer /dev-oss-proxy 转发，避免 CORS
 		fetch(base64Data)
-			.then(res => res.blob())
-			.then(blob => {
+			.then((res) => res.blob())
+			.then((blob) => {
 				const formData = new FormData();
 				formData.append('key', ossData.dir + fileName);
 				formData.append('policy', ossData.policy);
@@ -356,21 +516,20 @@ const uploadImageToOss = async (base64Data, ossData) => {
 				formData.append('x-oss-signature', ossData.signature);
 				formData.append('x-oss-signature-version', ossData.x_oss_signature_version);
 				formData.append('file', blob, fileName);
-				
-				return fetch(ossData.host, {
+				return fetch(resolveH5OssPostUrl(ossData.host), {
 					method: 'POST',
 					body: formData
 				});
 			})
-			.then(response => {
-				if (response.ok) {
+			.then((response) => {
+				if (response.ok || response.status === 204) {
 					const imageUrl = `${ossData.host}/${ossData.dir}${fileName}`;
 					resolve(imageUrl);
 				} else {
 					reject(new Error('上传失败'));
 				}
 			})
-			.catch(error => {
+			.catch((error) => {
 				reject(error);
 			});
 		// #endif
@@ -422,7 +581,7 @@ const uploadImageToOss = async (base64Data, ossData) => {
 		// #ifdef APP-PLUS
 		// App环境 - 将base64转为临时文件后上传
 		console.log('[CreatePage] App环境上传');
-		const base64Content = base64Data.split(',')[1];
+		const base64ContentApp = base64Data.split(',')[1];
 		const bitmap = new plus.nativeObj.Bitmap('temp');
 		
 		bitmap.loadBase64Data(base64Data, () => {
@@ -475,109 +634,115 @@ const uploadImageToOss = async (base64Data, ossData) => {
 
 // 返回按钮
 const handleBack = async () => {
-	if (uploadedImage.value || nftInfo.value || aiDescription.value) {
+	const hasLenticular =
+		isLenticularCraft.value &&
+		(uploadedBg.value || uploadedSubject.value || uploadedBgBase64.value || uploadedSubjectBase64.value);
+	const hasAny =
+		uploadedImage.value ||
+		hasLenticular ||
+		nftInfo.value ||
+		aiDescription.value;
+	if (hasAny) {
 		showConfirmModal({
 			title: '提示',
 			content: '确定要返回吗？未保存的数据将会丢失',
 			success: async (res) => {
 				if (res.confirm) {
 					resetForm();
-					uni.navigateBack()
+					try {
+						uni.hideToast();
+					} catch (e) {
+						/* noop */
+					}
+					uni.navigateBack();
 				}
 			}
 		});
 	} else {
-		uni.navigateBack()
+		try {
+			uni.hideToast();
+		} catch (e) {
+			/* noop */
+		}
+		uni.navigateBack();
 	}
 };
 
-// 跳过按钮 - 直接创建订单，跳过AI生成
-const handleSkip = async () => {
-	// 表单验证
-	if (!uploadedImage.value) {
-		uni.showToast({ title: '请上传藏品图片', icon: 'none' });
+/** 光栅卡：双图校验后进入工作室预览 */
+const handleLenticularGenerate = () => {
+	if (!uploadedBg.value || !uploadedSubject.value) {
+		uni.showToast({ title: '请上传背景图与主体图', icon: 'none' });
 		return;
 	}
-
-	if (!uploadedImageBase64.value) {
+	if (!uploadedBgBase64.value || !uploadedSubjectBase64.value) {
 		uni.showToast({ title: '图片尚未处理完成', icon: 'none' });
 		return;
 	}
-
 	if (!nftInfo.value.trim()) {
 		uni.showToast({ title: '请输入藏品信息', icon: 'none' });
 		return;
 	}
-
 	try {
-		// 显示加载提示
-		uni.showLoading({ title: '上传图片中...', mask: true });
-		
-		// 获取OSS签名
-		const signRes = await getOssSignatureApi('asset');
-		if (signRes.code !== 200) {
-			throw new Error(signRes.message || '获取签名失败');
-		}
-		
-		const orderId = signRes.data.order_id || '';
-		
-		// 上传原图到OSS
-		const imageUrl = await uploadImageToOss(uploadedImageBase64.value, signRes.data);
-		
-		// 更新加载提示
-		uni.showLoading({ title: '创建订单中...', mask: true });
-		
-		// 构建订单数据
-		const orderData = {
-			name: pageName.value || '藏品',
-			event: nftInfo.value.trim(),
-			info: nftInfo.value.trim(), // 添加必填的 info 字段
-			description: '',
-			material_type: materialTypes[materialTypeIndex.value],
-			material_url: imageUrl,
-			rarity: 0,
-			tags: [],
-			order_id: orderId
-		};
-		
-		// 调用创建铸造订单API
-		const response = await createMintOrderApi(orderData);
-		uni.hideLoading();
-		
-		if (response.code !== 200) {
-			throw new Error(response.message || '创建订单失败');
-		}
-		
-		// 构建藏品数据，存储到temp_nft_data
-		const nftData = {
-			image: imageUrl,
-			name: pageName.value || '藏品',
-			event: nftInfo.value.trim(),
-			info: nftInfo.value.trim(), // 添加 info 字段
-			description: '',
-			material_type: materialTypes[materialTypeIndex.value],
-			order_id: orderId
-		};
-		
-		// 存储到storage
-		uni.setStorageSync('temp_nft_data', JSON.stringify(nftData));
-		
-		// 清空表单
-		// resetForm();
-		
-		// 跳转到成功页面
-		uni.navigateTo({
-			url: '/pages/castlove/success'
-		});
-		
-	} catch (error) {
-		console.error('[CreatePage] 跳过失败:', error);
-		uni.hideLoading();
-		uni.showToast({
-			title: error.message || '操作失败，请重试',
-			icon: 'none'
-		});
+		uni.setStorageSync(
+			LENTICULAR_STUDIO_STORAGE_KEY,
+			JSON.stringify({
+				bgPath: uploadedBg.value,
+				subjectPath: uploadedSubject.value,
+				bgBase64: uploadedBgBase64.value,
+				subjectBase64: uploadedSubjectBase64.value,
+				nftInfo: nftInfo.value,
+				materialTypeIndex: materialTypeIndex.value,
+				aiDescription: aiDescription.value,
+			})
+		);
+	} catch (e) {
+		console.error('[CreatePage] lenticular studio payload', e);
+		uni.showToast({ title: '保存失败，请重试', icon: 'none' });
+		return;
 	}
+	uni.navigateTo({
+		url: '/pages/castlove/lenticular-studio',
+	});
+};
+
+/** 单图工艺：进入镭射工坊（Laser-Card 配置页），保存后再上传并创建订单 */
+const handleSingleCraftLaserEntry = () => {
+	if (isLenticularCraft.value) {
+		uni.showToast({ title: '光栅卡请使用「生成」进入工作室', icon: 'none' });
+		return;
+	}
+	if (!uploadedImage.value) {
+		uni.showToast({ title: '请上传藏品图片', icon: 'none' });
+		return;
+	}
+	if (!uploadedImageBase64.value) {
+		uni.showToast({ title: '图片尚未处理完成', icon: 'none' });
+		return;
+	}
+	if (!nftInfo.value.trim()) {
+		uni.showToast({ title: '请输入藏品信息', icon: 'none' });
+		return;
+	}
+	try {
+		uni.setStorageSync(
+			CASTLOVE_LASER_ENTRY_KEY,
+			JSON.stringify({
+				nftInfo: nftInfo.value,
+				materialTypes: [...materialTypes],
+				materialTypeIndex: materialTypeIndex.value,
+				pageName: pageName.value,
+				uploadedImage: uploadedImage.value,
+				uploadedImageBase64: uploadedImageBase64.value,
+			})
+		);
+	} catch (e) {
+		console.error('[CreatePage] laser entry payload', e);
+		uni.showToast({ title: '保存失败，请重试', icon: 'none' });
+		return;
+	}
+	uni.navigateTo({
+		url: '/pages/castlove/laser-card-studio',
+	});
 };
 
 // 底部导航切换
@@ -597,15 +762,24 @@ const handleTabChange = (newTab) => {
 
 // 开始生成
 const handleGenerate = async () => {
-	// 表单验证
-	if (!uploadedImage.value) {
-		uni.showToast({ title: '请上传藏品图片', icon: 'none' });
-		return;
-	}
-
-	if (!uploadedImageBase64.value) {
-		uni.showToast({ title: '图片尚未处理完成', icon: 'none' });
-		return;
+	if (isLenticularCraft.value) {
+		if (!uploadedBg.value || !uploadedSubject.value) {
+			uni.showToast({ title: '请上传背景图与主体图', icon: 'none' });
+			return;
+		}
+		if (!uploadedBgBase64.value || !uploadedSubjectBase64.value) {
+			uni.showToast({ title: '图片尚未处理完成', icon: 'none' });
+			return;
+		}
+	} else {
+		if (!uploadedImage.value) {
+			uni.showToast({ title: '请上传藏品图片', icon: 'none' });
+			return;
+		}
+		if (!uploadedImageBase64.value) {
+			uni.showToast({ title: '图片尚未处理完成', icon: 'none' });
+			return;
+		}
 	}
 
 	if (!nftInfo.value.trim()) {
@@ -624,14 +798,39 @@ const handleGenerate = async () => {
 		return;
 	}
 
-	// 保存表单数据
+	const snap = isLenticularCraft.value
+		? buildCastloveFormSnapshot({
+				nftInfo: nftInfo.value,
+				materialTypes,
+				materialTypeIndex: materialTypeIndex.value,
+				pageName: pageName.value,
+				uploadedImage: uploadedSubject.value,
+				uploadedImageBase64: uploadedSubjectBase64.value,
+		  })
+		: buildCastloveFormSnapshot({
+				nftInfo: nftInfo.value,
+				materialTypes,
+				materialTypeIndex: materialTypeIndex.value,
+				pageName: pageName.value,
+				uploadedImage: uploadedImage.value,
+				uploadedImageBase64: uploadedImageBase64.value,
+		  });
+
 	const formData = {
-		image: uploadedImage.value,
-		imageBase64: uploadedImageBase64.value,
-		info: nftInfo.value.trim(), // 藏品信息
-		materialType: materialTypes[materialTypeIndex.value],
-		type: pageType.value, // 添加类型信息
-		typeName: pageName.value // 添加类型名称
+		...snap,
+		image: isLenticularCraft.value ? uploadedSubject.value : uploadedImage.value,
+		imageBase64: isLenticularCraft.value ? uploadedSubjectBase64.value : uploadedImageBase64.value,
+		type: pageType.value,
+		typeName: pageName.value,
+		materialType: snap.material_type,
+		...(isLenticularCraft.value
+			? {
+					lenticularBgImage: uploadedBg.value,
+					lenticularBgBase64: uploadedBgBase64.value,
+					lenticularSubjectImage: uploadedSubject.value,
+					lenticularSubjectBase64: uploadedSubjectBase64.value,
+			  }
+			: {}),
 	};
 
 	try {
@@ -679,6 +878,11 @@ const sendToBackend = (aiDescription) => {
 
 // 重置表单
 const resetForm = () => {
+	pendingLenticularSlot.value = '';
+	uploadedBg.value = '';
+	uploadedBgBase64.value = '';
+	uploadedSubject.value = '';
+	uploadedSubjectBase64.value = '';
 	uploadedImage.value = '';
 	uploadedImageBase64.value = '';
 	originalFileName.value = '';
@@ -688,21 +892,16 @@ const resetForm = () => {
 	aiDescription.value = '';
 };
 
+onLoad((options) => {
+	applyCreateRouteOptions(options || {});
+});
+
 onMounted(() => {
-	// 获取页面参数
 	const pages = getCurrentPages();
 	const currentPage = pages[pages.length - 1];
-	const options = currentPage.options || {};
-	
-	if (options.type) {
-		pageType.value = options.type;
-		console.log('[CreatePage] 页面类型:', pageType.value);
-	}
-	
-	if (options.name) {
-		pageName.value = decodeURIComponent(options.name);
-		console.log('[CreatePage] 页面名称:', pageName.value);
-		// 页面名称将作为隐藏前缀，不显示在输入框中
+	const options = (currentPage && currentPage.options) || {};
+	if (options.name || options.type) {
+		applyCreateRouteOptions(options);
 	}
 });
 </script>
@@ -802,6 +1001,24 @@ onMounted(() => {
 	text-align: center;
 }
 
+.lenticular-upload-row {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: stretch;
+	gap: 20rpx;
+	padding: 0 4rpx;
+	box-sizing: border-box;
+}
+
+.upload-box--half {
+	flex: 1;
+	width: 0;
+	min-width: 0;
+	height: 280rpx;
+}
+
 .uploaded-image {
 	width: 100%;
 	height: 100%;
@@ -1156,6 +1373,301 @@ onMounted(() => {
 	opacity: 0.9;
 }
 
+/* ========== 镭射卡设计稿专用 ========== */
+.page-container--laser {
+	position: relative;
+}
+
+.laser-bg-veil {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	pointer-events: none;
+	background:
+		radial-gradient(2rpx 2rpx at 10% 18%, rgba(255, 255, 255, 0.55), transparent 55%),
+		radial-gradient(1.5rpx 1.5rpx at 78% 12%, rgba(255, 255, 255, 0.45), transparent 55%),
+		radial-gradient(2rpx 2rpx at 42% 8%, rgba(255, 255, 255, 0.4), transparent 50%),
+		radial-gradient(1.5rpx 1.5rpx at 88% 46%, rgba(255, 255, 255, 0.5), transparent 50%),
+		radial-gradient(2rpx 2rpx at 18% 62%, rgba(255, 255, 255, 0.35), transparent 50%),
+		radial-gradient(1.5rpx 1.5rpx at 64% 72%, rgba(255, 255, 255, 0.45), transparent 50%),
+		radial-gradient(2rpx 2rpx at 36% 88%, rgba(255, 255, 255, 0.4), transparent 50%),
+		radial-gradient(1.5rpx 1.5rpx at 92% 84%, rgba(255, 255, 255, 0.35), transparent 50%),
+		linear-gradient(
+			165deg,
+			rgba(255, 182, 220, 0.16) 0%,
+			rgba(140, 100, 210, 0.22) 42%,
+			rgba(20, 40, 80, 0.2) 100%
+		);
+}
+
+.laser-close-hit {
+	position: fixed;
+	top: calc(16rpx + constant(safe-area-inset-top));
+	top: calc(16rpx + env(safe-area-inset-top));
+	left: 24rpx;
+	z-index: 20;
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 50%;
+	background: linear-gradient(
+		135deg,
+		#ffb7e8 0%,
+		#c9a6ff 28%,
+		#8fd4ff 55%,
+		#fff3b0 78%,
+		#ffa8d8 100%
+	);
+	background-size: 180% 180%;
+	border: 2rpx solid rgba(255, 255, 255, 0.55);
+	box-shadow: 0 6rpx 22rpx rgba(120, 60, 160, 0.35);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.laser-close-x {
+	color: #ffffff;
+	font-size: 44rpx;
+	line-height: 1;
+	font-weight: 300;
+}
+
+.content-wrapper--laser {
+	padding-top: calc(112rpx + constant(safe-area-inset-top));
+	padding-top: calc(112rpx + env(safe-area-inset-top));
+}
+
+.upload-section--laser .upload-box-wrap {
+	position: relative;
+	width: 100%;
+	max-width: 640rpx;
+	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;
+	margin-top: 16rpx;
+}
+
+.upload-section--laser .upload-clear {
+	position: absolute;
+	top: 14rpx;
+	right: 14rpx;
+	z-index: 6;
+	width: 56rpx;
+	height: 56rpx;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.upload-clear--laser {
+	background: rgba(255, 255, 255, 0.96);
+	border: 2rpx solid rgba(255, 255, 255, 0.95);
+	box-shadow: 0 6rpx 18rpx rgba(60, 30, 100, 0.22);
+}
+
+.upload-clear-x--laser {
+	color: rgba(90, 70, 120, 0.85);
+	font-size: 36rpx;
+	font-weight: 300;
+}
+
+.form-section--laser {
+	gap: 36rpx;
+}
+
+.form-label--laser,
+.section-title--laser {
+	font-size: 28rpx;
+	padding: 10rpx 22rpx;
+	border-radius: 999rpx;
+	background: linear-gradient(95deg, #ff7ec8 0%, #ff9f7a 48%, #ffb35c 100%);
+	color: #ffffff;
+	text-shadow: 0 2rpx 6rpx rgba(160, 40, 80, 0.35);
+	box-shadow: 0 4rpx 14rpx rgba(255, 100, 140, 0.28);
+}
+
+.ai-section--laser {
+	gap: 20rpx;
+}
+
+.picker-display--laser {
+	background: rgba(255, 255, 255, 0.32);
+	backdrop-filter: blur(22rpx);
+	-webkit-backdrop-filter: blur(22rpx);
+	border: 2rpx solid rgba(255, 255, 255, 0.45);
+	box-shadow: 0 8rpx 28rpx rgba(50, 20, 90, 0.12);
+}
+
+.form-textarea--laser {
+	background: rgba(255, 255, 255, 0.32);
+	backdrop-filter: blur(22rpx);
+	-webkit-backdrop-filter: blur(22rpx);
+	border: 2rpx solid rgba(255, 255, 255, 0.42);
+	box-shadow: 0 8rpx 28rpx rgba(50, 20, 90, 0.1);
+}
+
+.picker-arrow.picker-arrow--laser {
+	transform: rotate(0deg);
+	font-size: 22rpx;
+	line-height: 1;
+	color: rgba(255, 255, 255, 0.88);
+	font-weight: 600;
+}
+
+.picker-arrow.picker-arrow--laser.picker-arrow-up {
+	transform: rotate(180deg);
+}
+
+.ai-input-wrapper--laser {
+	flex-direction: column;
+	min-height: 280rpx;
+	padding: 24rpx 28rpx 28rpx;
+	background: rgba(255, 255, 255, 0.32);
+	backdrop-filter: blur(22rpx);
+	-webkit-backdrop-filter: blur(22rpx);
+	border: 2rpx solid rgba(255, 255, 255, 0.45);
+	box-shadow: 0 8rpx 28rpx rgba(50, 20, 90, 0.1);
+}
+
+.ai-input-wrapper--laser .ai-input {
+	min-height: 220rpx;
+	width: 100%;
+}
+
+.button-section--laser {
+	gap: 24rpx;
+	margin-top: 48rpx;
+}
+
+.btn-secondary--laser {
+	background: rgba(255, 255, 255, 0.18);
+	border-color: rgba(255, 255, 255, 0.35);
+}
+
+.btn-confirm-laser {
+	flex: 1;
+	height: 96rpx;
+	line-height: 96rpx;
+	border-radius: 48rpx;
+	font-size: 36rpx;
+	font-family: 'yt', sans-serif;
+	font-weight: 600;
+	color: #ffffff;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(95deg, #ff8ec5 0%, #ff5a8c 38%, #ff2d6b 72%, #ff4d64 100%);
+	box-shadow: 0 10rpx 32rpx rgba(255, 50, 110, 0.42);
+	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.25);
+}
+
+.btn-confirm-laser::after {
+	border: none;
+}
+
+.btn-confirm-laser:active {
+	opacity: 0.92;
+}
+
 .nav-mask {
 	position: fixed;
 	top: 0;
diff --git a/frontend/pages/castlove/laser-card-studio.vue b/frontend/pages/castlove/laser-card-studio.vue
new file mode 100644
index 0000000..8ecfcc5
--- /dev/null
+++ b/frontend/pages/castlove/laser-card-studio.vue
@@ -0,0 +1,3336 @@
+<!--
+  与独立工程 Laser-Card 同源：风格预设、beamEffects、默认滑杆与 pages/laser-card-studio/laser-card-studio.vue 保持一致；改参数时请双端同步。
+  铸爱 create 单图流程：底部「生成」→ 写入 castlove_laser_entry_payload → 本页 onLoad 读入预览。
+  目标端：Android / iOS（App-Plus，Vue 页面 + WebView 渲染）。
+  pages.json 示例：
+  { "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 抠图），枢轴宜对准人物中心并调范围；「磨砂强化」抬升颗粒与微雾面。
+-->
+<template>
+  <view class="page">
+    <!-- 顶栏：sticky，滚动时始终可操作 -->
+    <view class="header header--sticky" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <text class="header-btn" @tap="onCancel">取消</text>
+      <text class="header-title">镭射工坊</text>
+      <text class="header-btn" @tap="onSave">保存</text>
+    </view>
+
+    <!-- 预览区：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>
+          <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>
+        </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>
+        </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-id="laserExportCanvas"
+      class="export-canvas"
+      :style="{ width: exportCssW + 'px', height: exportCssH + 'px' }"
+      :width="exportCssW"
+      :height="exportCssH"
+      :disable-scroll="true"
+    />
+  </view>
+</template>
+
+<script>
+import { segmentPortraitToLocal } from '@/utils/laser-card/segmentationCloud.js'
+import { humanizeIfBareOssUploadErr } from '@/utils/laser-card/aliyunPortraitUni.js'
+import { submitCastloveAfterLaserExport } from '@/utils/castloveAfterLaserMint.js'
+import { CASTLOVE_LASER_ENTRY_KEY } from '@/utils/castloveMintForm.js'
+
+const PARAM_PRESET_STORAGE_KEY = 'laser_card_param_presets_v1'
+
+export default {
+  name: 'LaserCardStudio',
+  data() {
+    return {
+      statusBarHeight: 24,
+      safeAreaBottom: 0,
+      previewSrc: '',
+      activeTab: 'style',
+      tabs: [
+        { key: 'style', label: '风格', icon: '◆' },
+        { key: 'tune', label: '调校', icon: '◎' }
+      ],
+      /** 参考样例：大卡幻彩 / 高饱和彩虹 / 冷色冰霜 / 暖粉日落 / 珍珠银 */
+      stylePresetId: 'dream',
+      stylePresets: [
+        {
+          id: 'dream',
+          name: '梦幻棱镜',
+          desc: '紫粉青柔雾 + 斜向光束，偏横版大卡',
+          tag: '梦幻',
+          strip: 'linear-gradient(125deg,#7c4dff 0%,#ff6ec7 35%,#00e5ff 70%,#fff59d 100%)',
+          animMode: 'hue'
+        },
+        {
+          id: 'classic',
+          name: '经典彩虹',
+          desc: '高对比色带，接近强镭射小卡',
+          tag: '彩虹',
+          strip: 'linear-gradient(90deg,#ff0080,#7928ca,#0070f3,#00dfd8,#b8ff6a)',
+          animMode: 'hue'
+        },
+        {
+          id: 'ice',
+          name: '冰霜蓝紫',
+          desc: '冷色雾面 + 薄荷高光',
+          tag: '冰霜',
+          strip: 'linear-gradient(135deg,#1a237e,#5c6bc0,#4dd0e1,#e1f5fe)',
+          animMode: 'hue'
+        },
+        {
+          id: 'sunset',
+          name: '日落蜜桃',
+          desc: '桃粉与暖金，偏手持柔光小卡',
+          tag: '蜜桃',
+          strip: 'linear-gradient(135deg,#ffccbc,#ff8a65,#ff6b9d,#ffe082)',
+          animMode: 'hue'
+        },
+        {
+          id: 'pearl',
+          name: '珍珠流光',
+          desc: '银白偏光 + 慢扫金属感',
+          tag: '珍珠',
+          strip: 'linear-gradient(135deg,#eceff1,#b0bec5,#ffffff,#cfd8dc)',
+          animMode: 'metal'
+        },
+        {
+          id: 'holoFull',
+          name: '全息满铺',
+          desc: '满铺细密六彩衍射纹 + 高密度闪粉，最接近实物镭射卡',
+          tag: '全息',
+          strip: 'linear-gradient(120deg,#ff0080,#ff8a00,#fff200,#33ff66,#00d0ff,#a056ff,#ff0080)',
+          animMode: 'hue'
+        }
+      ],
+      /** 粉丝主控：整体镭射强弱 0–100（参考实物以满铺彩虹为主，默认抬高） */
+      laserStrength: 72,
+      /** 光柱/光束亮度与宽度 20–140（默认偏柔，避免一道斜光柱厄住整张卡） */
+      beamIntensity: 48,
+      angle: 52,
+      /** 光束枢轴在卡面内的位置 0–100（相对预览小卡，非强制中心） */
+      beamPivotX: 50,
+      beamPivotY: 50,
+      beamEffectId: 'white',
+      beamEffects: [
+        {
+          id: 'white',
+          name: '纯净白光',
+          swatch: 'linear-gradient(90deg,#ffffff,#e8feff,#ffffff)'
+        },
+        {
+          id: 'prism',
+          name: '棱镜虹彩',
+          swatch: 'linear-gradient(90deg,#ff6ec7,#7c4dff,#00e5ff,#fff59d)'
+        },
+        {
+          id: 'aurora',
+          name: '极光紫青',
+          swatch: 'linear-gradient(90deg,#ce93ff,#00ffd9,#7e57c2)'
+        },
+        {
+          id: 'sunset',
+          name: '日落暖金',
+          swatch: 'linear-gradient(90deg,#ffcc80,#ff6b6b,#ffe082)'
+        },
+        {
+          id: 'neon',
+          name: '电音霓虹',
+          swatch: 'linear-gradient(90deg,#ff00aa,#00f0ff,#ffee58)'
+        }
+      ],
+      /** 颗粒密度 20–100（默认更细更密，贴合实物闪粉） */
+      grainDensity: 88,
+      /** 彩虹细纹密度 0–100：越高条纹越细越密 */
+      diffractionDensity: 60,
+      /** 彩虹细纹角度偏移 -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,
+      _previewRect: null,
+      /** 顶栏占用总高度(px)，用于预览区 sticky 的 top */
+      stickyHeaderTotalPx: 96,
+      /** 导出 canvas 逻辑尺寸（px），再按 exportScale 放大导出 */
+      exportCssW: 360,
+      exportCssH: 480,
+      exportScale: 3,
+      _saving: false,
+      /** ellipse | ai：ai 时使用 aiCutoutSrc 透明人物图叠在镭射上 */
+      segmentationMode: 'ellipse',
+      aiCutoutSrc: '',
+      _segmenting: false,
+      /** 本地持久化的参数预设列表 */
+      paramPresets: [],
+      /** 常用光束角度快捷（度） */
+      angleQuickDegrees: [0, 15, 30, 45, 60, 90, 120, 135, 150, 180, 210, 225, 240, 270, 300, 315, 330],
+      /** 铸爱单图入口：create 写入，保存后走下单 */
+      castloveEntry: null
+    }
+  },
+  computed: {
+    currentPreset() {
+      return this.stylePresets.find((p) => p.id === this.stylePresetId) || this.stylePresets[0]
+    },
+    presetAnimMode() {
+      return this.currentPreset.animMode || 'hue'
+    },
+    currentBeamEffect() {
+      return this.beamEffects.find((b) => b.id === this.beamEffectId) || this.beamEffects[0]
+    },
+    /** 闪粉 + 磨砂强化后的等效细腻度（用于预览与导出） */
+    grainDensityEffective() {
+      const base = Number(this.grainDensity) || 78
+      const ms = Math.max(0, Math.min(100, Number(this.matteStrength) || 0))
+      return Math.min(100, Math.round(base * (0.62 + 0.55 * (ms / 100))))
+    },
+    tuneSummary() {
+      const tag = this.currentBeamEffect.name.slice(0, 4)
+      return `${this.laserStrength}% · 膜${this.portraitVeilStrength}% · 流体${this.marbleFlowStrength}% · 压${this.subjectLaserSuppress}% · ${this.angle}° · ${tag}`
+    },
+    previewHintText() {
+      if (this.segmentationMode === 'ai' && this.aiCutoutSrc) {
+        return '拖动定位视觉中心 ·「换图」上传照片 ·「恢复椭圆」后可调人物范围'
+      }
+      return '拖动定位人物中心 · 在下方「人物范围」里调椭圆大小让人物贴合 ·「换图」上传照片'
+    },
+    /** 智能抠图结果已是透明 PNG 时不套椭圆 mask */
+    subjectWrapStyle() {
+      if (this.segmentationMode === 'ai' && this.aiCutoutSrc) {
+        return {}
+      }
+      return this.previewImageExtraStyle
+    },
+    /**
+     * 椭圆 mask 套在外层 view 上（不直接套在 image），避免 App 端 image+mask 合成把透明区渲成黑块挡住下层镭射。
+     */
+    previewImageExtraStyle() {
+      const cx = Math.max(0, Math.min(100, Number(this.beamPivotX) || 50))
+      const cy = Math.max(0, Math.min(100, Number(this.beamPivotY) || 50))
+      const rx = Math.max(18, Math.min(62, Number(this.subjectMaskRadiusX) || 46))
+      const ry = Math.max(22, Math.min(78, Number(this.subjectMaskRadiusY) || 60))
+      const soft = Math.max(10, Math.min(95, Number(this.subjectMaskSoftness) || 44))
+      const inner = Math.round(Math.max(32, 74 - soft * 0.32))
+      const outer = Math.min(99, inner + 10 + Math.round(soft * 0.24))
+      const mask = `radial-gradient(ellipse ${rx}% ${ry}% at ${cx}% ${cy}%, #000 0%, #000 ${inner}%, transparent ${outer}%)`
+      return {
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        maskSize: '100% 100%',
+        WebkitMaskSize: '100% 100%',
+        maskRepeat: 'no-repeat',
+        WebkitMaskRepeat: 'no-repeat',
+        maskComposite: 'source-over',
+        WebkitMaskComposite: 'source-over'
+      }
+    },
+    /** 与人物椭圆对齐：multiply 压暗下层幻彩，减轻边缘透闪 */
+    subjectHoloSuppressStyle() {
+      const sup = Math.max(0, Math.min(100, Number(this.subjectLaserSuppress) || 0))
+      if (sup < 2) {
+        return { opacity: '0', pointerEvents: 'none' }
+      }
+      const cx = Math.max(0, Math.min(100, Number(this.beamPivotX) || 50))
+      const cy = Math.max(0, Math.min(100, Number(this.beamPivotY) || 50))
+      const rx = Math.max(18, Math.min(62, Number(this.subjectMaskRadiusX) || 46))
+      const ry = Math.max(22, Math.min(78, Number(this.subjectMaskRadiusY) || 60))
+      const soft = Math.max(10, Math.min(95, Number(this.subjectMaskSoftness) || 44))
+      const inner = Math.round(Math.max(32, 74 - soft * 0.32))
+      const outer = Math.min(99, inner + 10 + Math.round(soft * 0.24))
+      const t = sup / 100
+      const aCenter = (0.16 + t * 0.5).toFixed(3)
+      const aMid = (0.09 + t * 0.3).toFixed(3)
+      const bg = `radial-gradient(ellipse ${rx}% ${ry}% at ${cx}% ${cy}%, rgba(26,22,34,${aCenter}) 0%, rgba(18,16,28,${aMid}) ${inner}%, rgba(0,0,0,0) ${outer}%)`
+      return {
+        opacity: '1',
+        background: bg,
+        mixBlendMode: 'multiply'
+      }
+    },
+    /** 中频流体/揉箔纹理（预览）：接近参考稿的液态褶皱纹 + 高光脊 + 微褶，强度见「流体底纹」滑杆 */
+    marbleFlowOverlayStyle() {
+      const mf = Math.max(0, Math.min(100, Number(this.marbleFlowStrength) || 0)) / 100
+      if (mf < 0.02) {
+        return { opacity: '0', pointerEvents: 'none' }
+      }
+      const s = this.portraitStrength
+      const vivid = Math.max(0.72, Math.min(1.35, (Number(this.previewVivid) || 100) / 100))
+      const pid = this.stylePresetId
+      const ang = Number(this.angle) || 0
+      const bg = this._previewLiquidFoilBackground(mf, s, vivid, pid, ang)
+      return {
+        opacity: String(Math.min(0.96, 0.34 + mf * 0.5)),
+        background: bg,
+        mixBlendMode: 'soft-light'
+      }
+    },
+    /** 预览：窄条高光 + 热点（overlay），叠在流体层之上、衍射之下 */
+    foilSpecOverlayStyle() {
+      const mf = Math.max(0, Math.min(100, Number(this.marbleFlowStrength) || 0)) / 100
+      if (mf < 0.08) {
+        return { opacity: '0', pointerEvents: 'none' }
+      }
+      const s = this.portraitStrength
+      const k = mf * (0.45 + s * 0.55)
+      const a = (b) => Math.min(0.38, Math.max(0, b * k)).toFixed(3)
+      const ang = Number(this.angle) || 0
+      const bg = [
+        `linear-gradient(${(ang + 51).toFixed(1)}deg, transparent 42%, rgba(255,255,255,${a(0.26)}) 49.8%, transparent 57%)`,
+        `linear-gradient(${(ang - 56).toFixed(1)}deg, transparent 46%, rgba(255,255,255,${a(0.19)}) 50.2%, transparent 54%)`,
+        `radial-gradient(ellipse 22% 15% at 48% 30%, rgba(255,255,255,${a(0.36)}) 0%, transparent 68%)`,
+        `radial-gradient(ellipse 18% 14% at 74% 64%, rgba(255,255,255,${a(0.22)}) 0%, transparent 72%)`
+      ].join(', ')
+      return {
+        opacity: String(Math.min(0.58, 0.2 + mf * 0.42)),
+        background: bg,
+        mixBlendMode: 'overlay'
+      }
+    },
+    matteFrostStyle() {
+      const ms = Math.max(0, Math.min(100, Number(this.matteStrength) || 0))
+      if (ms < 4) {
+        return { opacity: '0', pointerEvents: 'none' }
+      }
+      const o = (0.1 + (ms / 100) * 0.42).toFixed(3)
+      const a1 = (0.028 + (ms / 100) * 0.06).toFixed(3)
+      return {
+        opacity: String(Math.min(0.95, 0.18 + ms * 0.0065)),
+        background: `repeating-linear-gradient(108deg, rgba(255,255,255,${a1}) 0 1px, transparent 1px 5px), repeating-linear-gradient(-19deg, rgba(255,255,255,${(Number(a1) * 0.85).toFixed(3)}) 0 1px, transparent 1px 4px), radial-gradient(ellipse 140% 120% at 50% 40%, rgba(255,255,255,${o}) 0%, transparent 55%)`,
+        mixBlendMode: 'soft-light'
+      }
+    },
+    /**
+     * 与光束旋转层对齐：层为 250%×250% 且居中（left/top -75%），任意枢轴旋转时仍能盖住圆角预览区；
+     * 卡面枢轴 0–100 → 层内 transform-origin 百分比 (75+px)/2.5
+     */
+    beamRotateWrapStyle() {
+      const px = Math.max(0, Math.min(100, Number(this.beamPivotX) || 50))
+      const py = Math.max(0, Math.min(100, Number(this.beamPivotY) || 50))
+      const ox = (75 + px) / 2.5
+      const oy = (75 + py) / 2.5
+      return {
+        transformOrigin: `${ox}% ${oy}%`,
+        transform: `rotate(${this.angle}deg)`
+      }
+    },
+    presetChipMeta() {
+      return (p) => {
+        const sp = this.stylePresets.find((x) => x.id === p.stylePresetId)
+        return sp ? sp.tag : p.stylePresetId
+      }
+    },
+    activePanelMeta() {
+      if (this.activeTab === 'style') {
+        return {
+          title: '镭射风格',
+          desc: '一键套用样例卡常见的配色与光感，再进调校细调',
+          tag: this.currentPreset.tag
+        }
+      }
+      return {
+        title: '效果调校',
+        desc: '强度、角度、颗粒为必会项；下方两项仅影响预览动效',
+        tag: this.tuneSummary
+      }
+    },
+    portraitStrength() {
+      const t = this.laserStrength / 100
+      return Math.min(1, 0.08 + t * 0.9)
+    },
+    meshBackground() {
+      switch (this.stylePresetId) {
+        case 'dream':
+          return `radial-gradient(ellipse 38% 32% at 56% 44%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 28%, transparent 58%),
+            radial-gradient(ellipse 92% 72% at 10% 16%, rgba(186,104,255,0.58), transparent 54%),
+            radial-gradient(ellipse 78% 62% at 90% 20%, rgba(255,105,180,0.48), transparent 52%),
+            radial-gradient(ellipse 72% 58% at 14% 86%, rgba(0,229,255,0.42), transparent 50%),
+            radial-gradient(ellipse 58% 52% at 80% 74%, rgba(255,224,140,0.4), transparent 48%)`
+        case 'classic':
+          return `radial-gradient(ellipse 36% 30% at 52% 48%, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.05) 30%, transparent 56%),
+            radial-gradient(ellipse 88% 68% at 48% 8%, rgba(255,80,200,0.42), transparent 46%),
+            radial-gradient(ellipse 82% 72% at 6% 58%, rgba(0,200,255,0.45), transparent 50%),
+            radial-gradient(ellipse 74% 58% at 94% 78%, rgba(180,255,120,0.38), transparent 46%)`
+        case 'ice':
+          return `radial-gradient(ellipse 40% 34% at 48% 40%, rgba(255,255,255,0.48) 0%, rgba(230,248,255,0.08) 32%, transparent 60%),
+            radial-gradient(ellipse 90% 70% at 18% 22%, rgba(100,180,255,0.52), transparent 52%),
+            radial-gradient(ellipse 78% 60% at 88% 32%, rgba(160,140,255,0.44), transparent 50%),
+            radial-gradient(ellipse 68% 62% at 48% 90%, rgba(200,240,255,0.4), transparent 48%)`
+        case 'sunset':
+          return `radial-gradient(ellipse 42% 36% at 50% 42%, rgba(255,255,255,0.4) 0%, rgba(255,240,230,0.08) 30%, transparent 58%),
+            radial-gradient(ellipse 88% 65% at 12% 28%, rgba(255,150,120,0.5), transparent 50%),
+            radial-gradient(ellipse 74% 60% at 92% 22%, rgba(255,200,140,0.46), transparent 48%),
+            radial-gradient(ellipse 72% 68% at 52% 88%, rgba(255,100,160,0.4), transparent 48%)`
+        case 'pearl':
+          return `radial-gradient(ellipse 44% 36% at 50% 38%, rgba(255,255,255,0.55) 0%, rgba(245,248,252,0.12) 35%, transparent 62%),
+            radial-gradient(ellipse 82% 62% at 22% 28%, rgba(255,255,255,0.52), transparent 50%),
+            radial-gradient(ellipse 78% 68% at 82% 38%, rgba(210,225,245,0.42), transparent 50%),
+            radial-gradient(ellipse 70% 58% at 50% 82%, rgba(180,200,255,0.36), transparent 46%)`
+        case 'holoFull':
+        default:
+          return `radial-gradient(ellipse 36% 30% at 54% 46%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.06) 26%, transparent 55%),
+            radial-gradient(ellipse 86% 70% at 12% 16%, rgba(255,80,180,0.5), transparent 52%),
+            radial-gradient(ellipse 78% 64% at 92% 22%, rgba(255,180,80,0.46), transparent 50%),
+            radial-gradient(ellipse 74% 58% at 8% 78%, rgba(0,220,255,0.48), transparent 50%),
+            radial-gradient(ellipse 76% 62% at 88% 82%, rgba(160,100,255,0.5), transparent 50%),
+            radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,255,255,0.18), transparent 60%)`
+      }
+    },
+    meshOverlayStyle() {
+      const s = this.portraitStrength
+      return {
+        opacity: String(Math.min(0.98, 0.38 + s * 0.52)),
+        background: this.meshBackground,
+        mixBlendMode: 'screen'
+      }
+    },
+    /**
+     * 满铺细密斜向彩虹条纹（diffraction lines）——参考实物镭射卡的核心特征：
+     * 整张卡面铺满细密、密集、规整重复的彩虹条纹，光线越强越鲜明。
+     * 角度 = 光束角度 + 用户可调偏移（默认 +90°，即垂直于光线方向）。
+     * 密度由 diffractionDensity 控制，对每个色带 px 位置做线性缩放（u 越小越密）。
+     */
+    diffractionOverlayStyle() {
+      const s = this.portraitStrength
+      const vivid = Math.max(0.7, Math.min(1.4, (Number(this.previewVivid) || 100) / 100))
+      const density = Math.max(0, Math.min(100, Number(this.diffractionDensity) || 60)) / 100
+      const angleOff = Math.max(-90, Math.min(90, Number(this.diffractionAngleOffset) || 90))
+      const a = (Number(this.angle) || 52) + angleOff
+      const baseA = (0.13 + s * 0.18) * vivid
+      const hiA = (0.18 + s * 0.22) * vivid
+      const opacity = Math.min(0.92, 0.28 + s * 0.5 + density * 0.18)
+      const u = (3.2 - density * 2.4).toFixed(2)
+      const stripe = `repeating-linear-gradient(${a}deg,
+        rgba(255, 60, 180, ${baseA.toFixed(3)}) 0px,
+        rgba(255, 170, 60, ${baseA.toFixed(3)}) ${(Number(u) * 2).toFixed(2)}px,
+        rgba(180, 255, 80, ${hiA.toFixed(3)}) ${(Number(u) * 4).toFixed(2)}px,
+        rgba(0, 220, 255, ${hiA.toFixed(3)}) ${(Number(u) * 6).toFixed(2)}px,
+        rgba(120, 90, 255, ${baseA.toFixed(3)}) ${(Number(u) * 8).toFixed(2)}px,
+        rgba(255, 80, 200, ${baseA.toFixed(3)}) ${(Number(u) * 10).toFixed(2)}px,
+        transparent ${(Number(u) * 11).toFixed(2)}px,
+        transparent ${(Number(u) * 14).toFixed(2)}px)`
+      const macroStep = (Number(u) * 28).toFixed(2)
+      const macro = `repeating-linear-gradient(${a + 4}deg,
+        rgba(255,255,255, ${(baseA * 0.55).toFixed(3)}) 0px,
+        rgba(255,255,255, 0) ${(Number(u) * 3).toFixed(2)}px,
+        rgba(255,255,255, 0) ${macroStep}px)`
+      return {
+        opacity: String(opacity),
+        background: `${stripe}, ${macro}`,
+        mixBlendMode: 'screen'
+      }
+    },
+    /* 角度由外层 preview-beam-rotate 承担，此处为局部 0°（朝上）色带 */
+    iridGradient() {
+      switch (this.stylePresetId) {
+        case 'dream':
+          return `linear-gradient(0deg, rgba(255,230,255,0.5) 0%, rgba(160,110,255,0.55) 16%, rgba(60,200,255,0.52) 38%, rgba(255,130,200,0.48) 60%, rgba(255,248,200,0.46) 82%, rgba(190,170,255,0.44) 100%)`
+        case 'classic':
+          return `linear-gradient(0deg, rgba(255,60,180,0.58) 0%, rgba(110,60,255,0.52) 22%, rgba(0,210,255,0.55) 45%, rgba(255,240,100,0.5) 68%, rgba(255,100,200,0.54) 100%)`
+        case 'ice':
+          return `linear-gradient(0deg, rgba(210,235,255,0.52) 0%, rgba(80,150,255,0.54) 32%, rgba(130,110,230,0.5) 58%, rgba(190,230,255,0.48) 100%)`
+        case 'sunset':
+          return `linear-gradient(0deg, rgba(255,225,190,0.54) 0%, rgba(255,130,110,0.5) 24%, rgba(255,90,160,0.48) 52%, rgba(255,215,150,0.52) 100%)`
+        case 'pearl':
+          return `linear-gradient(0deg, rgba(255,255,255,0.58) 0%, rgba(220,232,248,0.46) 34%, rgba(170,200,255,0.42) 62%, rgba(255,252,248,0.5) 100%)`
+        case 'holoFull':
+          return `linear-gradient(0deg, rgba(255,60,180,0.62) 0%, rgba(255,170,60,0.58) 18%, rgba(180,255,80,0.55) 36%, rgba(0,220,255,0.6) 54%, rgba(120,90,255,0.58) 72%, rgba(255,80,200,0.6) 90%, rgba(255,255,255,0.5) 100%)`
+        default:
+          return `linear-gradient(0deg, rgba(255,200,255,0.5) 0%, rgba(120,190,255,0.48) 100%)`
+      }
+    },
+    iridBlendMode() {
+      return this.stylePresetId === 'pearl' ? 'overlay' : 'screen'
+    },
+    iridCoreStyle() {
+      const o = Math.min(1, 0.42 + this.portraitStrength * 0.82)
+      return {
+        width: '100%',
+        height: '100%',
+        opacity: String(o),
+        background: this.iridGradient,
+        mixBlendMode: this.iridBlendMode
+      }
+    },
+    raysOverlayStyle() {
+      const s = this.portraitStrength
+      const bi = Math.max(0, Math.min(100, Number(this.beamIntensity) || 48)) / 100
+      const e = this.beamEffectId
+      const vivid = Math.max(0.7, Math.min(1.35, (this.previewVivid || 100) / 100))
+      const sat = (1.1 * vivid).toFixed(2)
+      const beamOpacity = Math.min(0.7, 0.08 + s * 0.32 + bi * 0.3)
+      const beamWidth = (0.12 + bi * 0.2).toFixed(3)
+      const beamLength = 0.88
+      const beamStart = ((1 - beamLength) / 2).toFixed(3)
+      const beamEnd = ((1 + beamLength) / 2).toFixed(3)
+      const beamCenter = 0.5
+      const bandWidth = (0.08 + bi * 0.12).toFixed(3)
+      const midT = (beamCenter - Number(bandWidth) / 2).toFixed(3)
+      const hiT = (beamCenter + Number(bandWidth) / 2).toFixed(3)
+      let c0, c1, c2, c3, c4
+      if (e === 'prism') {
+        c0 = 'rgba(255,80,200,0)'
+        c1 = `rgba(255,80,200,${(0.45 * sat).toFixed(2)})`
+        c2 = `rgba(160,80,255,${(0.7 * sat).toFixed(2)})`
+        c3 = `rgba(0,220,255,${(0.85 * sat).toFixed(2)})`
+        c4 = 'rgba(255,240,100,0)'
+      } else if (e === 'aurora') {
+        c0 = 'rgba(100,255,220,0)'
+        c1 = `rgba(100,255,220,${(0.45 * sat).toFixed(2)})`
+        c2 = `rgba(140,80,255,${(0.7 * sat).toFixed(2)})`
+        c3 = `rgba(200,80,255,${(0.85 * sat).toFixed(2)})`
+        c4 = 'rgba(255,120,200,0)'
+      } else if (e === 'sunset') {
+        c0 = 'rgba(255,160,80,0)'
+        c1 = `rgba(255,160,80,${(0.45 * sat).toFixed(2)})`
+        c2 = `rgba(255,80,140,${(0.7 * sat).toFixed(2)})`
+        c3 = `rgba(255,120,220,${(0.85 * sat).toFixed(2)})`
+        c4 = 'rgba(255,220,160,0)'
+      } else if (e === 'neon') {
+        c0 = 'rgba(0,200,255,0)'
+        c1 = `rgba(0,200,255,${(0.45 * sat).toFixed(2)})`
+        c2 = `rgba(255,0,180,${(0.7 * sat).toFixed(2)})`
+        c3 = `rgba(255,240,80,${(0.85 * sat).toFixed(2)})`
+        c4 = 'rgba(120,255,180,0)'
+      } else {
+        c0 = 'rgba(200,240,255,0)'
+        c1 = `rgba(200,240,255,${(0.42 * sat).toFixed(2)})`
+        c2 = `rgba(255,255,255,${(0.72 * sat).toFixed(2)})`
+        c3 = `rgba(180,220,255,${(0.8 * sat).toFixed(2)})`
+        c4 = 'rgba(140,200,255,0)'
+      }
+      return {
+        opacity: String(beamOpacity),
+        background: `linear-gradient(135deg,
+          ${c0} ${(Number(beamStart) * 100).toFixed(1)}%,
+          ${c1} ${((Number(beamStart) + 0.04) * 100).toFixed(1)}%,
+          ${c2} 50%,
+          ${c3} ${((Number(beamEnd) - 0.04) * 100).toFixed(1)}%,
+          ${c4} ${(Number(beamEnd) * 100).toFixed(1)}%),
+          linear-gradient(180deg,
+          transparent ${(Number(midT) * 100).toFixed(1)}%,
+          ${c2} ${(Number(midT) * 100).toFixed(1)}%,
+          rgba(255,255,255,${(0.5 * sat).toFixed(2)}) 50%,
+          transparent ${(Number(hiT) * 100).toFixed(1)}%)`,
+        backgroundSize: '200% 200%, 100% 100%',
+        backgroundPosition: 'top left, center',
+        backgroundRepeat: 'no-repeat, no-repeat',
+        mixBlendMode: 'screen'
+      }
+    },
+    grainPattern() {
+      const d = (Number(this.grainDensityEffective) || 70) / 100
+      const a1 = (0.06 + d * 0.09).toFixed(3)
+      const a2 = (0.045 + d * 0.07).toFixed(3)
+      const fine = `repeating-linear-gradient(-16deg, rgba(255,255,255,${a1}) 0 1px, transparent 1px ${Math.max(3, Math.round(5 - d * 2))}px), repeating-linear-gradient(74deg, rgba(255,255,255,${a2}) 0 1px, transparent 1px ${Math.max(4, Math.round(6 - d * 2))}px)`
+      const sp = (0.22 + d * 0.32).toFixed(2)
+      const sp2 = (Number(sp) * 0.8).toFixed(2)
+      const sp3 = (Number(sp) * 0.65).toFixed(2)
+      const specks = [
+        // 主白色亮点（高密度）
+        [8, 11, 'rgba(255,255,255,' + sp + ')'],
+        [22, 7, 'rgba(255,255,255,' + sp2 + ')'],
+        [37, 16, 'rgba(200,230,255,' + sp + ')'],
+        [54, 9, 'rgba(255,255,255,' + sp + ')'],
+        [68, 5, 'rgba(255,240,200,' + sp2 + ')'],
+        [83, 14, 'rgba(255,255,255,' + sp + ')'],
+        [94, 22, 'rgba(180,255,255,' + sp2 + ')'],
+        [13, 28, 'rgba(255,220,255,' + sp2 + ')'],
+        [29, 34, 'rgba(255,255,255,' + sp + ')'],
+        [46, 23, 'rgba(220,255,240,' + sp3 + ')'],
+        [61, 32, 'rgba(255,255,255,' + sp2 + ')'],
+        [77, 27, 'rgba(255,255,255,' + sp + ')'],
+        [88, 36, 'rgba(180,210,255,' + sp2 + ')'],
+        [6, 45, 'rgba(255,255,255,' + sp + ')'],
+        [20, 52, 'rgba(255,240,180,' + sp3 + ')'],
+        [34, 48, 'rgba(255,255,255,' + sp + ')'],
+        [49, 56, 'rgba(200,255,255,' + sp2 + ')'],
+        [63, 50, 'rgba(255,255,255,' + sp + ')'],
+        [78, 58, 'rgba(255,220,255,' + sp2 + ')'],
+        [92, 53, 'rgba(255,255,255,' + sp + ')'],
+        [11, 67, 'rgba(255,255,255,' + sp2 + ')'],
+        [26, 72, 'rgba(200,230,255,' + sp + ')'],
+        [42, 64, 'rgba(255,255,255,' + sp + ')'],
+        [58, 76, 'rgba(255,240,200,' + sp2 + ')'],
+        [73, 69, 'rgba(255,255,255,' + sp + ')'],
+        [86, 78, 'rgba(180,255,255,' + sp2 + ')'],
+        [4, 84, 'rgba(255,255,255,' + sp3 + ')'],
+        [19, 91, 'rgba(255,255,255,' + sp + ')'],
+        [33, 88, 'rgba(255,220,255,' + sp2 + ')'],
+        [50, 95, 'rgba(255,255,255,' + sp + ')'],
+        [67, 86, 'rgba(220,255,240,' + sp3 + ')'],
+        [82, 93, 'rgba(255,255,255,' + sp + ')'],
+        [96, 88, 'rgba(255,240,180,' + sp2 + ')']
+      ]
+      const speck = specks
+        .map(([x, y, c]) => `radial-gradient(circle at ${x}% ${y}%, ${c} 0 1px, transparent 2px)`)
+        .join(', ')
+      return `${fine}, ${speck}`
+    },
+    grainOverlayStyle() {
+      const o = Math.min(1, 0.32 + this.portraitStrength * 0.68)
+      return {
+        opacity: String(o),
+        background: this.grainPattern,
+        mixBlendMode: 'overlay'
+      }
+    },
+    sheenCoreStyle() {
+      const s = this.portraitStrength
+      const bi = Math.max(0, Math.min(100, Number(this.beamIntensity) || 48)) / 100
+      const o = Math.min(0.6, (0.08 + s * 0.28 + bi * 0.2) * 0.9)
+      const e = this.beamEffectId
+      const beamW = (0.1 + bi * 0.18).toFixed(3)
+      const vivid = Math.max(0.7, Math.min(1.35, (this.previewVivid || 100) / 100))
+      const sat = (1.05 * vivid).toFixed(2)
+      let c1, c2
+      if (e === 'prism') {
+        c1 = `rgba(255,220,255,${(0.92 * sat).toFixed(2)})`
+        c2 = `rgba(200,80,255,${(0.5 * sat).toFixed(2)})`
+      } else if (e === 'aurora') {
+        c1 = `rgba(200,160,255,${(0.92 * sat).toFixed(2)})`
+        c2 = `rgba(0,240,220,${(0.5 * sat).toFixed(2)})`
+      } else if (e === 'sunset') {
+        c1 = `rgba(255,220,160,${(0.92 * sat).toFixed(2)})`
+        c2 = `rgba(255,120,100,${(0.5 * sat).toFixed(2)})`
+      } else if (e === 'neon') {
+        c1 = `rgba(0,255,255,${(0.88 * sat).toFixed(2)})`
+        c2 = `rgba(255,80,200,${(0.5 * sat).toFixed(2)})`
+      } else {
+        c1 = `rgba(255,255,255,${(0.9 * sat).toFixed(2)})`
+        c2 = `rgba(200,230,255,${(0.48 * sat).toFixed(2)})`
+      }
+      return {
+        width: '100%',
+        height: '100%',
+        opacity: String(o),
+        background: `linear-gradient(135deg,
+          transparent ${((0.5 - Number(beamW)) * 100).toFixed(1)}%,
+          ${c1} ${((0.5 - Number(beamW) * 0.3) * 100).toFixed(1)}%,
+          ${c2} 50%,
+          ${c1} ${((0.5 + Number(beamW) * 0.3) * 100).toFixed(1)}%,
+          transparent ${((0.5 + Number(beamW)) * 100).toFixed(1)}%)`,
+        mixBlendMode: 'screen'
+      }
+    },
+    previewAnimSpeedFactor() {
+      const sp = Number(this.previewAnimSpeed) || 100
+      return Math.max(0.35, Math.min(2.8, sp / 100))
+    },
+    iridWrapDynamicStyle() {
+      const vivid = Math.max(0.65, Math.min(1.45, (Number(this.previewVivid) || 100) / 100))
+      const sat = (1.14 * vivid).toFixed(3)
+      const brLo = (1.02 + (vivid - 1) * 0.11).toFixed(3)
+      const brHi = (1.08 + (vivid - 1) * 0.15).toFixed(3)
+      const f = this.previewAnimSpeedFactor
+      const style = {
+        '--holo-sat': sat,
+        '--holo-bright-lo': brLo,
+        '--holo-bright-hi': brHi
+      }
+      if (this.presetAnimMode === 'hue') {
+        style.animationDuration = `${(9.5 / f).toFixed(2)}s`
+      } else if (this.presetAnimMode === 'metal') {
+        style.animationDuration = `${(3.4 / f).toFixed(2)}s`
+      }
+      return style
+    },
+    sheenWrapStyle() {
+      const f = this.previewAnimSpeedFactor
+      return {
+        animationDuration: `${(2.6 / f).toFixed(2)}s`
+      }
+    },
+    /**
+     * 叠在人物图之上：conic + 扫光 + 与底层同系 irid 渐变，hue 动画与 irid 一致，模拟参考卡正面「膜上」幻彩。
+     */
+    subjectHoloVeilStyle() {
+      const v = Math.max(0, Math.min(100, Number(this.portraitVeilStrength) || 0)) / 100
+      if (v < 0.03) {
+        return { display: 'none', pointerEvents: 'none' }
+      }
+      const vivid = Math.max(0.65, Math.min(1.45, (Number(this.previewVivid) || 100) / 100))
+      const f = this.previewAnimSpeedFactor
+      const ang = Number(this.angle) || 0
+      const pid = this.stylePresetId
+      const ls = Math.max(0, Math.min(1, this.laserStrength / 100))
+      const sub = Math.max(0, Math.min(1, Number(this.subjectLaserSuppress) / 100 || 0))
+      const pidBoost = pid === 'pearl' ? 0.82 : pid === 'ice' ? 1.1 : 1
+      const mix = (0.82 - sub * 0.25) * (0.38 + v * 0.62) * (0.5 + ls * 0.5) * pidBoost
+      const op = Math.min(0.52, 0.14 + mix * 0.48)
+      const w = (0.04 + v * 0.14 * vivid).toFixed(3)
+      const ir = { ...this.iridWrapDynamicStyle }
+      if (this.presetAnimMode === 'hue') {
+        ir.animationDuration = `${(10.8 / f).toFixed(2)}s`
+      } else if (this.presetAnimMode === 'metal') {
+        ir.animationDuration = `${(3.9 / f).toFixed(2)}s`
+      }
+      const core = this.iridGradient
+      const conic = `conic-gradient(from ${(ang * 0.7 + 18).toFixed(1)}deg at 46% 42%, rgba(255,255,255,${(Number(w) * 0.85).toFixed(3)}) 0deg, transparent 56deg, rgba(210,170,255,${(Number(w) * 1.35).toFixed(3)}) 118deg, rgba(110,220,255,${(Number(w) * 1.15).toFixed(3)}) 198deg, transparent 278deg)`
+      const sweep = `linear-gradient(${(ang + 58).toFixed(1)}deg, transparent 32%, rgba(255,255,255,${(0.06 + v * 0.16).toFixed(3)}) 49.5%, transparent 66%)`
+      return {
+        ...ir,
+        display: 'block',
+        position: 'absolute',
+        left: '0',
+        top: '0',
+        right: '0',
+        bottom: '0',
+        zIndex: '2',
+        pointerEvents: 'none',
+        borderRadius: 'inherit',
+        opacity: String(op),
+        background: `${conic}, ${sweep}, ${core}`,
+        backgroundSize: '100% 100%',
+        mixBlendMode: 'soft-light',
+        transform: 'scale(1.12)',
+        transformOrigin: 'center center'
+      }
+    }
+  },
+  onLoad() {
+    try {
+      const raw = uni.getStorageSync(CASTLOVE_LASER_ENTRY_KEY)
+      if (raw) {
+        this.castloveEntry = typeof raw === 'string' ? JSON.parse(raw) : raw
+        const ent = this.castloveEntry
+        const b64 = ent && String(ent.uploadedImageBase64 || '').trim()
+        const path = ent && String(ent.uploadedImage || '').trim()
+        let img = ''
+        if (b64) {
+          img = b64.startsWith('data:') ? b64 : `data:image/jpeg;base64,${b64}`
+        } else if (path) {
+          img = path
+        }
+        if (img) {
+          this.previewSrc = img
+        }
+      }
+    } catch (e) {
+      console.error('[LaserCardStudio] castlove entry', e)
+    }
+    try {
+      const sys = uni.getSystemInfoSync()
+      this.statusBarHeight = sys.statusBarHeight || 24
+      this.safeAreaBottom = sys.safeAreaInsets?.bottom || 0
+      const barBody = typeof uni.upx2px === 'function' ? uni.upx2px(92) : 46
+      this.stickyHeaderTotalPx = this.statusBarHeight + barBody
+    } catch (e) {
+      /* 非 App 或异常时使用默认值 */
+      this.stickyHeaderTotalPx = (this.statusBarHeight || 24) + 48
+    }
+    this.loadParamPresets()
+  },
+  methods: {
+    /**
+     * 仅用于预览：参考「液态丝绸 / 揉箔 / 高光脊」叠层（conic + 大椭圆褶 + 窄条高光 + 微褶）。
+     */
+    _previewLiquidFoilBackground(mf, s, vivid, pid, angDeg) {
+      const ang = Number(angDeg) || 0
+      const pearlMul = pid === 'pearl' ? 0.58 : 1
+      const k = mf * (0.34 + s * 0.66) * vivid * pearlMul
+      const A = (b) => Math.min(0.5, Math.max(0, b * k)).toFixed(3)
+      const R = (r, g, b, a) => `rgba(${r},${g},${b},${a})`
+      const palettes = {
+        dream: {
+          deep: [52, 22, 78],
+          mid: [150, 88, 210],
+          hi: [255, 220, 245],
+          acc: [72, 200, 255],
+          spec: [255, 255, 255]
+        },
+        classic: {
+          deep: [90, 15, 95],
+          mid: [255, 55, 170],
+          hi: [255, 250, 160],
+          acc: [0, 200, 255],
+          spec: [255, 255, 255]
+        },
+        ice: {
+          deep: [18, 48, 92],
+          mid: [72, 140, 230],
+          hi: [230, 246, 255],
+          acc: [160, 210, 255],
+          spec: [255, 255, 255]
+        },
+        sunset: {
+          deep: [115, 38, 52],
+          mid: [255, 130, 110],
+          hi: [255, 230, 200],
+          acc: [255, 185, 165],
+          spec: [255, 252, 248]
+        },
+        pearl: {
+          deep: [158, 168, 188],
+          mid: [218, 226, 240],
+          hi: [255, 255, 255],
+          acc: [200, 218, 238],
+          spec: [255, 255, 255]
+        },
+        holoFull: {
+          deep: [55, 18, 88],
+          mid: [255, 75, 175],
+          hi: [210, 255, 130],
+          acc: [0, 215, 255],
+          spec: [255, 255, 255]
+        }
+      }
+      const c = palettes[pid] || palettes.dream
+      const d = c.deep
+      const m = c.mid
+      const h = c.hi
+      const x = c.acc
+      const sp = c.spec
+      const c1 = (ang * 0.52 + 8).toFixed(1)
+      const c2 = (118 - ang * 0.44).toFixed(1)
+      const parts = [
+        `conic-gradient(from ${c1}deg at 36% 42%, ${R(d[0], d[1], d[2], A(0.055))} 0deg, transparent 52deg, ${R(
+          m[0],
+          m[1],
+          m[2],
+          A(0.12)
+        )} 102deg, ${R(x[0], x[1], x[2], A(0.09))} 168deg, transparent 228deg, ${R(h[0], h[1], h[2], A(0.07))} 312deg, transparent 360deg)`,
+        `conic-gradient(from ${c2}deg at 66% 56%, transparent 0deg, ${R(x[0], x[1], x[2], A(0.06))} 68deg, transparent 128deg, ${R(
+          m[0],
+          m[1],
+          m[2],
+          A(0.1)
+        )} 198deg, ${R(h[0], h[1], h[2], A(0.065))} 276deg, transparent 360deg)`,
+        `radial-gradient(ellipse 135% 100% at 26% 34%, ${R(d[0], d[1], d[2], A(0.17))} 0%, ${R(m[0], m[1], m[2], A(0.12))} 20%, ${R(
+          h[0],
+          h[1],
+          h[2],
+          A(0.07)
+        )} 40%, transparent 72%)`,
+        `radial-gradient(ellipse 118% 92% at 76% 66%, ${R(d[0], d[1], d[2], A(0.13))} 0%, ${R(x[0], x[1], x[2], A(0.1))} 34%, transparent 70%)`,
+        `radial-gradient(ellipse 88% 70% at 50% 50%, ${R(m[0], m[1], m[2], A(0.06))} 0%, transparent 58%)`,
+        `linear-gradient(${(ang + 39).toFixed(1)}deg, transparent 0% 39%, ${R(sp[0], sp[1], sp[2], A(0.2))} 49.5%, transparent 50.8% 100%)`,
+        `linear-gradient(${(ang - 31).toFixed(1)}deg, transparent 0% 42%, ${R(h[0], h[1], h[2], A(0.12))} 50%, transparent 58% 100%)`,
+        `linear-gradient(${(ang + 108).toFixed(1)}deg, transparent 0% 34%, ${R(sp[0], sp[1], sp[2], A(0.11))} 50.2%, transparent 66% 100%)`,
+        `repeating-linear-gradient(${(20 + ang * 0.07).toFixed(1)}deg, rgba(255,255,255,${A(0.055)}) 0 0.5px, transparent 0.5px 5px)`,
+        `repeating-linear-gradient(${(-68 - ang * 0.05).toFixed(1)}deg, rgba(0,0,0,${A(0.028)}) 0 0.5px, transparent 0.5px 7px)`,
+        `radial-gradient(ellipse 32% 22% at 54% 26%, ${R(sp[0], sp[1], sp[2], A(0.24))} 0%, transparent 62%)`,
+        `radial-gradient(ellipse 26% 20% at 16% 74%, ${R(sp[0], sp[1], sp[2], A(0.16))} 0%, transparent 68%)`
+      ]
+      return parts.join(', ')
+    },
+    loadParamPresets() {
+      try {
+        const raw = uni.getStorageSync(PARAM_PRESET_STORAGE_KEY)
+        if (raw && Array.isArray(raw)) {
+          this.paramPresets = raw
+        }
+      } catch (e) {
+        this.paramPresets = []
+      }
+    },
+    persistParamPresets() {
+      try {
+        uni.setStorageSync(PARAM_PRESET_STORAGE_KEY, this.paramPresets)
+      } catch (e) {
+        uni.showToast({ title: '本地保存失败', icon: 'none' })
+      }
+    },
+    commitParamPreset(name) {
+      const snap = {
+        id: `p_${Date.now()}_${Math.floor(Math.random() * 1000)}`,
+        name: (name && String(name).trim().slice(0, 24)) || `预设${this.paramPresets.length + 1}`,
+        savedAt: Date.now(),
+        stylePresetId: this.stylePresetId,
+        laserStrength: this.laserStrength,
+        angle: this.angle,
+        beamPivotX: this.beamPivotX,
+        beamPivotY: this.beamPivotY,
+        beamEffectId: this.beamEffectId,
+        grainDensity: this.grainDensity,
+        subjectMaskRadiusX: this.subjectMaskRadiusX,
+        subjectMaskRadiusY: this.subjectMaskRadiusY,
+        subjectMaskSoftness: this.subjectMaskSoftness,
+        subjectLaserSuppress: this.subjectLaserSuppress,
+        portraitVeilStrength: this.portraitVeilStrength,
+        marbleFlowStrength: this.marbleFlowStrength,
+        matteStrength: this.matteStrength,
+        beamIntensity: this.beamIntensity,
+        diffractionDensity: this.diffractionDensity,
+        diffractionAngleOffset: this.diffractionAngleOffset,
+        previewAnimSpeed: this.previewAnimSpeed,
+        previewVivid: this.previewVivid,
+        previewSrc: this.previewSrc || ''
+      }
+      this.paramPresets = [snap, ...this.paramPresets].slice(0, 40)
+      this.persistParamPresets()
+      uni.showToast({ title: '参数已保存到应用', icon: 'success' })
+    },
+    _askSaveParamsAfterAlbum() {
+      uni.showModal({
+        title: '保存参数',
+        content: '是否将当前调校参数保存到应用？下次进入可在「我的预设」中一键套用。',
+        confirmText: '保存参数',
+        cancelText: '暂不',
+        success: (res) => {
+          if (!res.confirm) {
+            return
+          }
+          const def = `预设${this.paramPresets.length + 1}`
+          uni.showModal({
+            title: '预设名称',
+            editable: true,
+            placeholderText: '便于识别',
+            content: def,
+            success: (r2) => {
+              if (!r2.confirm) {
+                return
+              }
+              let name = def
+              if (typeof r2.content === 'string' && r2.content.trim()) {
+                name = r2.content.trim().slice(0, 24)
+              }
+              this.commitParamPreset(name)
+            }
+          })
+        }
+      })
+    },
+    applyParamPreset(p) {
+      if (!p) {
+        return
+      }
+      this.onClearAiCutout()
+      this.stylePresetId = p.stylePresetId || 'dream'
+      this.laserStrength = typeof p.laserStrength === 'number' ? p.laserStrength : 56
+      this.angle = typeof p.angle === 'number' ? p.angle : 52
+      this.beamPivotX = typeof p.beamPivotX === 'number' ? p.beamPivotX : 50
+      this.beamPivotY = typeof p.beamPivotY === 'number' ? p.beamPivotY : 50
+      const bid = typeof p.beamEffectId === 'string' ? p.beamEffectId : 'white'
+      this.beamEffectId = this.beamEffects.some((b) => b.id === bid) ? bid : 'white'
+      this.grainDensity = typeof p.grainDensity === 'number' ? p.grainDensity : 78
+      this.subjectMaskRadiusX = typeof p.subjectMaskRadiusX === 'number' ? p.subjectMaskRadiusX : 46
+      this.subjectMaskRadiusY = typeof p.subjectMaskRadiusY === 'number' ? p.subjectMaskRadiusY : 60
+      this.subjectMaskSoftness = typeof p.subjectMaskSoftness === 'number' ? p.subjectMaskSoftness : 44
+      this.subjectLaserSuppress =
+        typeof p.subjectLaserSuppress === 'number' ? p.subjectLaserSuppress : 40
+      this.portraitVeilStrength =
+        typeof p.portraitVeilStrength === 'number' ? p.portraitVeilStrength : 52
+      this.marbleFlowStrength =
+        typeof p.marbleFlowStrength === 'number' ? p.marbleFlowStrength : 52
+      this.matteStrength = typeof p.matteStrength === 'number' ? p.matteStrength : 45
+      this.beamIntensity = typeof p.beamIntensity === 'number' ? p.beamIntensity : 48
+      this.diffractionDensity = typeof p.diffractionDensity === 'number' ? p.diffractionDensity : 60
+      this.diffractionAngleOffset = typeof p.diffractionAngleOffset === 'number' ? p.diffractionAngleOffset : 90
+      this.previewAnimSpeed = typeof p.previewAnimSpeed === 'number' ? p.previewAnimSpeed : 100
+      this.previewVivid = typeof p.previewVivid === 'number' ? p.previewVivid : 100
+      if (p.previewSrc) {
+        uni.getImageInfo({
+          src: p.previewSrc,
+          success: () => {
+            this.previewSrc = p.previewSrc
+            uni.showToast({ title: '已套用预设', icon: 'none' })
+          },
+          fail: () => {
+            uni.showToast({ title: '参数已套用，原图失效请重新选图', icon: 'none' })
+          }
+        })
+      } else {
+        uni.showToast({ title: '已套用预设', icon: 'none' })
+      }
+    },
+    onPresetLongPress(p) {
+      uni.showModal({
+        title: '删除预设',
+        content: `确定删除「${p.name}」？`,
+        success: (res) => {
+          if (res.confirm) {
+            this.paramPresets = this.paramPresets.filter((x) => x.id !== p.id)
+            this.persistParamPresets()
+            uni.showToast({ title: '已删除', icon: 'none' })
+          }
+        }
+      })
+    },
+    onCancel() {
+      try {
+        uni.removeStorageSync(CASTLOVE_LASER_ENTRY_KEY)
+      } catch (e) {
+        /* noop */
+      }
+      uni.navigateBack({ fail: () => {} })
+    },
+    onSave() {
+      if (!this.previewSrc) {
+        uni.showToast({ title: '请先拍照或上传图片', icon: 'none' })
+        return
+      }
+      if (this._saving) {
+        return
+      }
+      this._saving = true
+      uni.showLoading({ title: '正在生成…', mask: true })
+      const cw = this.exportCssW
+      const ch = this.exportCssH
+      const path = this.previewSrc
+      uni.getImageInfo({
+        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)
+            }
+            ctx.draw(false, () => {
+              setTimeout(() => {
+                uni.canvasToTempFilePath(
+                  {
+                    canvasId: 'laserExportCanvas',
+                    fileType: 'jpg',
+                    quality: 0.92,
+                    width: cw,
+                    height: ch,
+                    destWidth: Math.round(cw * this.exportScale),
+                    destHeight: Math.round(ch * this.exportScale),
+                    success: (res) => {
+                      if (this.castloveEntry) {
+                        this._finishCastloveExport(res.tempFilePath)
+                      } else {
+                        this._writeImageToPhotosAlbum(res.tempFilePath)
+                      }
+                    },
+                    fail: (e) => {
+                      this._saving = false
+                      uni.hideLoading()
+                      uni.showToast({ title: e.errMsg || '导出失败', icon: 'none' })
+                    }
+                  },
+                  this
+                )
+              }, 120)
+            })
+          } catch (err) {
+            this._saving = false
+            uni.hideLoading()
+            uni.showToast({ title: '合成失败', icon: 'none' })
+          }
+        },
+        fail: () => {
+          this._saving = false
+          uni.hideLoading()
+          uni.showToast({ title: '无法读取图片', icon: 'none' })
+        }
+      })
+    },
+    _linearGradientThroughPivot(ctx, cw, ch, pivotPctX, pivotPctY, deg, stops) {
+      const rad = (deg * Math.PI) / 180
+      const len = Math.sqrt(cw * cw + ch * ch) / 2
+      const px = (Math.max(0, Math.min(100, pivotPctX)) / 100) * cw
+      const py = (Math.max(0, Math.min(100, pivotPctY)) / 100) * ch
+      const x0 = px - Math.cos(rad) * len
+      const y0 = py - Math.sin(rad) * len
+      const x1 = px + Math.cos(rad) * len
+      const y1 = py + Math.sin(rad) * len
+      const g = ctx.createLinearGradient(x0, y0, x1, y1)
+      stops.forEach(([t, c]) => g.addColorStop(t, c))
+      return g
+    },
+    _drawSolidLaserBackdrop(ctx, cw, ch) {
+      const strength = Math.max(0.22, Math.min(1, this.laserStrength / 100))
+      const vivid = Math.max(0.82, Math.min(1.28, (this.previewVivid || 100) / 100))
+      const pid = this.stylePresetId
+      const R = Math.max(cw, ch)
+      const blobs = {
+        dream: [
+          { x: 0.1, y: 0.14, c0: 'rgba(186,104,255,0.55)', c1: 'rgba(186,104,255,0)' },
+          { x: 0.9, y: 0.18, c0: 'rgba(255,105,180,0.48)', c1: 'rgba(255,105,180,0)' },
+          { x: 0.14, y: 0.86, c0: 'rgba(0,229,255,0.42)', c1: 'rgba(0,229,255,0)' },
+          { x: 0.82, y: 0.78, c0: 'rgba(255,224,140,0.38)', c1: 'rgba(255,224,140,0)' }
+        ],
+        classic: [
+          { x: 0.48, y: 0.1, c0: 'rgba(255,80,200,0.48)', c1: 'rgba(255,80,200,0)' },
+          { x: 0.08, y: 0.58, c0: 'rgba(0,200,255,0.46)', c1: 'rgba(0,200,255,0)' },
+          { x: 0.92, y: 0.76, c0: 'rgba(180,255,120,0.4)', c1: 'rgba(180,255,120,0)' }
+        ],
+        ice: [
+          { x: 0.18, y: 0.22, c0: 'rgba(100,180,255,0.52)', c1: 'rgba(100,180,255,0)' },
+          { x: 0.88, y: 0.32, c0: 'rgba(160,140,255,0.44)', c1: 'rgba(160,140,255,0)' },
+          { x: 0.5, y: 0.9, c0: 'rgba(200,240,255,0.4)', c1: 'rgba(200,240,255,0)' }
+        ],
+        sunset: [
+          { x: 0.12, y: 0.28, c0: 'rgba(255,150,120,0.5)', c1: 'rgba(255,150,120,0)' },
+          { x: 0.9, y: 0.24, c0: 'rgba(255,200,140,0.46)', c1: 'rgba(255,200,140,0)' },
+          { x: 0.52, y: 0.88, c0: 'rgba(255,100,160,0.42)', c1: 'rgba(255,100,160,0)' }
+        ],
+        holoFull: [
+          { x: 0.12, y: 0.16, c0: 'rgba(255,80,180,0.5)', c1: 'rgba(255,80,180,0)' },
+          { x: 0.9, y: 0.22, c0: 'rgba(255,180,80,0.46)', c1: 'rgba(255,180,80,0)' },
+          { x: 0.1, y: 0.78, c0: 'rgba(0,220,255,0.48)', c1: 'rgba(0,220,255,0)' },
+          { x: 0.88, y: 0.82, c0: 'rgba(160,100,255,0.5)', c1: 'rgba(160,100,255,0)' },
+          { x: 0.5, y: 0.5, c0: 'rgba(255,255,255,0.2)', c1: 'rgba(255,255,255,0)' }
+        ],
+        pearl: [
+          { x: 0.22, y: 0.28, c0: 'rgba(255,255,255,0.5)', c1: 'rgba(255,255,255,0)' },
+          { x: 0.82, y: 0.38, c0: 'rgba(210,225,245,0.42)', c1: 'rgba(210,225,245,0)' },
+          { x: 0.5, y: 0.82, c0: 'rgba(180,200,255,0.36)', c1: 'rgba(180,200,255,0)' }
+        ]
+      }
+      const list = blobs[pid] || blobs.dream
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('screen')
+      }
+      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.setFillStyle(g)
+          ctx.fillRect(0, 0, cw, ch)
+        } catch (err) {
+          ctx.setGlobalAlpha(0.82 * strength * vivid)
+          ctx.setFillStyle(b.c0)
+          ctx.fillRect(0, 0, cw, ch)
+        }
+      })
+      ctx.setGlobalAlpha(1)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    /**
+     * 导出用：与预览 marbleFlowOverlayStyle 同参的中频流体/揉箔叠层（soft-light）。
+     */
+    _exportDrawMarbleFlow(ctx, cw, ch) {
+      const mf = Math.max(0, Math.min(100, Number(this.marbleFlowStrength) || 0)) / 100
+      if (mf < 0.04) {
+        return
+      }
+      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 pid = this.stylePresetId
+      const phase = ((Number(this.angle) || 0) * Math.PI) / 180
+      const palettes = {
+        dream: [
+          { x: 0.16, y: 0.26, rgb: [200, 170, 255] },
+          { x: 0.84, y: 0.22, rgb: [255, 150, 210] },
+          { x: 0.48, y: 0.88, rgb: [120, 210, 255] },
+          { x: 0.5, y: 0.48, rgb: [255, 240, 255] }
+        ],
+        classic: [
+          { x: 0.14, y: 0.2, rgb: [255, 100, 200] },
+          { x: 0.86, y: 0.26, rgb: [200, 100, 255] },
+          { x: 0.5, y: 0.86, rgb: [80, 220, 255] }
+        ],
+        ice: [
+          { x: 0.18, y: 0.24, rgb: [170, 210, 255] },
+          { x: 0.82, y: 0.2, rgb: [110, 160, 255] },
+          { x: 0.5, y: 0.88, rgb: [210, 235, 255] }
+        ],
+        sunset: [
+          { x: 0.14, y: 0.28, rgb: [255, 190, 160] },
+          { x: 0.86, y: 0.24, rgb: [255, 130, 150] },
+          { x: 0.5, y: 0.88, rgb: [255, 220, 180] }
+        ],
+        pearl: [
+          { x: 0.22, y: 0.28, rgb: [245, 248, 255] },
+          { x: 0.8, y: 0.34, rgb: [210, 225, 245] },
+          { x: 0.5, y: 0.82, rgb: [230, 238, 255] }
+        ],
+        holoFull: [
+          { x: 0.12, y: 0.18, rgb: [255, 100, 200] },
+          { x: 0.88, y: 0.2, rgb: [255, 180, 100] },
+          { x: 0.1, y: 0.78, rgb: [80, 230, 255] },
+          { x: 0.88, y: 0.8, rgb: [160, 100, 255] }
+        ]
+      }
+      const pts = palettes[pid] || palettes.dream
+      const Rmax = Math.max(cw, ch) * 0.46
+      const baseA = (0.1 + mf * 0.34) * strength * vivid
+      ctx.save()
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('soft-light')
+      }
+      pts.forEach((p, i) => {
+        const ox = Math.cos(phase * 0.35) * 10 * (i % 2)
+        const oy = Math.sin(phase * 0.3) * 8 * ((i + 1) % 2)
+        const gx = p.x * cw + ox
+        const gy = p.y * ch + oy
+        const rad = Rmax * (0.24 + (i % 4) * 0.07)
+        let g
+        try {
+          g = ctx.createRadialGradient(gx, gy, 0, gx, gy, rad)
+        } catch (e) {
+          return
+        }
+        const [r, gg, b] = p.rgb
+        const a0 = Math.min(0.72, baseA * 0.95)
+        const a1 = Math.min(0.5, baseA * 0.52)
+        g.addColorStop(0, `rgba(${r},${gg},${b},${a0.toFixed(3)})`)
+        g.addColorStop(0.52, `rgba(${r},${gg},${b},${a1.toFixed(3)})`)
+        g.addColorStop(1, `rgba(${r},${gg},${b},0)`)
+        ctx.setGlobalAlpha(1)
+        ctx.setFillStyle(g)
+        ctx.fillRect(0, 0, cw, ch)
+      })
+      ctx.restore()
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    /**
+     * 导出用：人物椭圆内 multiply 压暗幻彩（与预览 subjectHoloSuppressStyle 一致）。
+     */
+    _exportDrawSubjectLaserSuppress(ctx, cw, ch) {
+      const sup = Math.max(0, Math.min(100, Number(this.subjectLaserSuppress) || 0)) / 100
+      if (sup < 0.02) {
+        return
+      }
+      const cx = (Math.max(0, Math.min(100, Number(this.beamPivotX) || 50)) / 100) * cw
+      const cy = (Math.max(0, Math.min(100, Number(this.beamPivotY) || 50)) / 100) * ch
+      const rx = (Math.max(18, Math.min(62, Number(this.subjectMaskRadiusX) || 46)) / 100) * cw
+      const ry = (Math.max(22, Math.min(78, Number(this.subjectMaskRadiusY) || 60)) / 100) * ch
+      if (rx < 1 || ry < 1) {
+        return
+      }
+      ctx.save()
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('multiply')
+      }
+      ctx.translate(cx, cy)
+      ctx.scale(rx, ry)
+      ctx.beginPath()
+      ctx.arc(0, 0, 1, 0, Math.PI * 2)
+      ctx.clip()
+      const g = ctx.createRadialGradient(0, 0, 0, 0, 0, 1)
+      const a0 = 0.12 + sup * 0.48
+      const a1 = 0.07 + sup * 0.28
+      g.addColorStop(0, `rgba(26,22,34,${a0.toFixed(3)})`)
+      g.addColorStop(0.58, `rgba(18,16,28,${a1.toFixed(3)})`)
+      g.addColorStop(1, 'rgba(0,0,0,0)')
+      ctx.setFillStyle(g)
+      ctx.setGlobalAlpha(1)
+      ctx.fillRect(-1, -1, 2, 2)
+      ctx.restore()
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    _clipSubjectEllipse(ctx, cw, ch) {
+      const cx = (Math.max(0, Math.min(100, Number(this.beamPivotX) || 50)) / 100) * cw
+      const cy = (Math.max(0, Math.min(100, Number(this.beamPivotY) || 50)) / 100) * ch
+      const rx = (Math.max(18, Math.min(62, Number(this.subjectMaskRadiusX) || 46)) / 100) * cw
+      const ry = (Math.max(22, Math.min(78, Number(this.subjectMaskRadiusY) || 60)) / 100) * ch
+      if (rx < 1 || ry < 1) {
+        return
+      }
+      ctx.beginPath()
+      if (typeof ctx.ellipse === 'function') {
+        ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2)
+      } else {
+        ctx.save()
+        ctx.translate(cx, cy)
+        ctx.scale(rx / ry, 1)
+        ctx.arc(0, 0, ry, 0, Math.PI * 2)
+        ctx.restore()
+        ctx.beginPath()
+        ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2)
+      }
+      ctx.clip()
+    },
+    /**
+     * 导出用：满铺斜向彩虹衍射纹（与预览 diffractionOverlayStyle 同源参数），screen 混合。
+     */
+    _exportDrawDiffractionStripes(ctx, cw, ch) {
+      const density = Math.max(0, Math.min(100, Number(this.diffractionDensity) || 0)) / 100
+      if (density < 0.02) {
+        return
+      }
+      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 angleOff = Math.max(-90, Math.min(90, Number(this.diffractionAngleOffset) || 90))
+      const deg = (Number(this.angle) || 52) + angleOff
+      const rad = (deg * Math.PI) / 180
+      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 alphas = [
+        baseA,
+        baseA,
+        hiA,
+        hiA,
+        baseA,
+        baseA * 0.85
+      ]
+      const prefix = [
+        'rgba(255,60,180,',
+        'rgba(255,170,60,',
+        'rgba(180,255,80,',
+        'rgba(0,220,255,',
+        'rgba(120,90,255,',
+        'rgba(255,80,200,'
+      ]
+      ctx.save()
+      ctx.translate(cw / 2, ch / 2)
+      ctx.rotate(rad)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('screen')
+      }
+      ctx.setGlobalAlpha(Math.min(0.92, 0.26 + strength * 0.48 + density * 0.16))
+      const count = Math.ceil((span * 2) / stripeW)
+      for (let i = -count; i <= count; i++) {
+        const pos = i * stripeW
+        const ci = ((i % 6) + 6) % 6
+        ctx.setFillStyle(prefix[ci] + alphas[ci].toFixed(3) + ')')
+        ctx.fillRect(pos - span, -span, stripeW * 0.9, span * 2)
+      }
+      ctx.restore()
+      ctx.setGlobalAlpha(1)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    /**
+     * 导出用：极细噪点叠在镭射之上，模拟磨砂/雾面（对应工艺光油下的细微漫反射）。
+     */
+    _exportDrawFineNoiseMatte(ctx, cw, ch, rndFn) {
+      const ms = Math.max(0, Math.min(100, Number(this.matteStrength) || 0)) / 100
+      if (ms < 0.03) {
+        return
+      }
+      const rnd = typeof rndFn === 'function' ? rndFn : Math.random
+      const n = Math.floor(900 + ms * 2200)
+      const alphaLo = 0.018 + ms * 0.045
+      const alphaHi = 0.04 + ms * 0.07
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('soft-light')
+      }
+      ctx.setGlobalAlpha(0.55 + ms * 0.35)
+      for (let k = 0; k < n; k++) {
+        const x = rnd() * cw
+        const y = rnd() * ch
+        const s = rnd() * 0.85 + 0.35
+        const a = alphaLo + rnd() * (alphaHi - alphaLo)
+        ctx.setFillStyle(`rgba(252,253,255,${a.toFixed(4)})`)
+        ctx.fillRect(x, y, s, s)
+      }
+      ctx.setGlobalAlpha(1)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+    },
+    /**
+     * 导出用：沿枢轴附近的一条高光带（静态截取一帧「光油扫光」），screen 混合。
+     */
+    _exportDrawOilSweep(ctx, cw, ch, timeMs) {
+      const strength = Math.max(0.12, Math.min(1, this.laserStrength / 100))
+      const bi = Math.max(20, Math.min(140, Number(this.beamIntensity) || 48)) / 100
+      const vivid = Math.max(0.75, Math.min(1.35, (this.previewVivid || 100) / 100))
+      const pvx = (Math.max(0, Math.min(100, Number(this.beamPivotX) || 50)) / 100) * cw
+      const pvy = (Math.max(0, Math.min(100, Number(this.beamPivotY) || 50)) / 100) * ch
+      const deg = Number(this.angle) || 52
+      const rad = (deg * Math.PI) / 180
+      const perp = rad + Math.PI / 2
+      const len = Math.sqrt(cw * cw + ch * ch) * 0.55
+      const clock = typeof timeMs === 'number' && !Number.isNaN(timeMs) ? timeMs : Date.now()
+      const phase = ((clock % 8000) / 8000 - 0.5) * len * 0.55 * 2
+      const cx = pvx + Math.cos(perp) * phase
+      const cy = pvy + Math.sin(perp) * phase
+      const x0 = cx - Math.cos(rad) * len
+      const y0 = cy - Math.sin(rad) * len
+      const x1 = cx + Math.cos(rad) * len
+      const y1 = cy + Math.sin(rad) * len
+      let g
+      try {
+        g = ctx.createLinearGradient(x0, y0, x1, y1)
+      } catch (e) {
+        return
+      }
+      const be = this.beamEffectId
+      const peak = (0.22 + strength * 0.18 + bi * 0.12) * 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') {
+        cHi = `rgba(255,240,200,${Math.min(0.82, peak).toFixed(3)})`
+        cMid = `rgba(200,80,255,${Math.min(0.5, peak * 0.65).toFixed(3)})`
+      } else if (be === 'aurora') {
+        cHi = `rgba(200,255,250,${Math.min(0.8, peak).toFixed(3)})`
+        cMid = `rgba(140,80,255,${Math.min(0.48, peak * 0.62).toFixed(3)})`
+      } else if (be === 'sunset') {
+        cHi = `rgba(255,230,180,${Math.min(0.82, peak).toFixed(3)})`
+        cMid = `rgba(255,120,120,${Math.min(0.5, peak * 0.64).toFixed(3)})`
+      } else if (be === 'neon') {
+        cHi = `rgba(0,255,255,${Math.min(0.78, peak).toFixed(3)})`
+        cMid = `rgba(255,80,200,${Math.min(0.48, peak * 0.62).toFixed(3)})`
+      }
+      g.addColorStop(0, 'rgba(255,255,255,0)')
+      g.addColorStop(0.38, 'rgba(255,255,255,0)')
+      g.addColorStop(0.48, cMid)
+      g.addColorStop(0.5, cHi)
+      g.addColorStop(0.52, cMid)
+      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.setGlobalAlpha(0.38 + bi * 0.28)
+      ctx.setFillStyle(g)
+      ctx.fillRect(0, 0, cw, ch)
+      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))
+      const vivid = Math.max(0.75, Math.min(1.35, (this.previewVivid || 100) / 100))
+      const grain = (this.grainDensityEffective || 70) / 100
+      const a = this.angle
+      const pvx = this.beamPivotX
+      const pvy = this.beamPivotY
+      const pid = this.stylePresetId
+      const be = this.beamEffectId
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('screen')
+      }
+      const meshStops = {
+        dream: [
+          [0, 'rgba(186,104,255,0.42)'],
+          [0.45, 'rgba(255,105,180,0.28)'],
+          [1, 'rgba(0,229,255,0.22)']
+        ],
+        classic: [
+          [0, 'rgba(255,60,180,0.4)'],
+          [0.5, 'rgba(0,210,255,0.38)'],
+          [1, 'rgba(255,240,100,0.32)']
+        ],
+        ice: [
+          [0, 'rgba(100,180,255,0.4)'],
+          [0.55, 'rgba(160,140,255,0.32)'],
+          [1, 'rgba(200,240,255,0.26)']
+        ],
+        sunset: [
+          [0, 'rgba(255,150,120,0.38)'],
+          [0.5, 'rgba(255,200,140,0.34)'],
+          [1, 'rgba(255,100,160,0.3)']
+        ],
+        pearl: [
+          [0, 'rgba(255,255,255,0.45)'],
+          [0.5, 'rgba(210,225,245,0.28)'],
+          [1, 'rgba(180,200,255,0.26)']
+        ],
+        holoFull: [
+          [0, 'rgba(255,60,180,0.48)'],
+          [0.22, 'rgba(255,170,60,0.44)'],
+          [0.45, 'rgba(0,220,255,0.46)'],
+          [0.68, 'rgba(120,90,255,0.44)'],
+          [1, 'rgba(255,80,200,0.42)']
+        ]
+      }
+      const stops = meshStops[pid] || meshStops.dream
+      ctx.setGlobalAlpha(0.55 * strength * vivid)
+      try {
+        ctx.setFillStyle(this._linearGradientThroughPivot(ctx, cw, ch, pvx, pvy, a, stops))
+      } catch (err) {
+        ctx.setFillStyle('rgba(180,100,255,0.45)')
+      }
+      ctx.fillRect(0, 0, cw, ch)
+      this._exportDrawMarbleFlow(ctx, cw, ch)
+      this._exportDrawDiffractionStripes(ctx, cw, ch)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('screen')
+      }
+      const rayA = a + 90
+      let r0 = 'rgba(255,255,255,0)'
+      const bi2 = Math.max(20, Math.min(140, Number(this.beamIntensity) || 86)) / 100
+      const rMidA = (0.12 + strength * 0.28) * (0.55 + bi2 * 0.52)
+      const rHiA = (0.06 + strength * 0.12) * (0.55 + bi2 * 0.52)
+      let rMid = `rgba(255,255,255,${rMidA.toFixed(3)})`
+      let rHi = `rgba(220,255,255,${rHiA.toFixed(3)})`
+      if (be === 'prism') {
+        rMid = `rgba(200,60,255,${(rMidA * 0.95).toFixed(3)})`
+        rHi = `rgba(255,240,160,${(rHiA * 1.08).toFixed(3)})`
+      } else if (be === 'aurora') {
+        rMid = `rgba(160,80,255,${(rMidA * 0.98).toFixed(3)})`
+        rHi = `rgba(0,255,220,${(rHiA * 1.1).toFixed(3)})`
+      } else if (be === 'sunset') {
+        rMid = `rgba(255,100,80,${(rMidA * 0.95).toFixed(3)})`
+        rHi = `rgba(255,230,140,${(rHiA * 1.08).toFixed(3)})`
+      } else if (be === 'neon') {
+        rMid = `rgba(0,240,255,${(rMidA * 0.98).toFixed(3)})`
+        rHi = `rgba(255,255,80,${(rHiA * 1.1).toFixed(3)})`
+      }
+      const coreW = 0.32 + bi2 * 0.24
+      const gRay = this._linearGradientThroughPivot(ctx, cw, ch, pvx, pvy, rayA, [
+        [0, r0],
+        [(0.5 - coreW).toFixed(3), r0],
+        [0.48, rMid],
+        [0.52, rHi],
+        [(0.5 + coreW).toFixed(3), r0],
+        [1, r0]
+      ])
+      ctx.setGlobalAlpha(0.85 * 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)
+      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.fillRect(x, y, s, s)
+      }
+      const ms = Math.max(0, Math.min(100, Number(this.matteStrength) || 0)) / 100
+      if (ms > 0.04) {
+        if (typeof ctx.setGlobalCompositeOperation === 'function') {
+          ctx.setGlobalCompositeOperation('soft-light')
+        }
+        ctx.setGlobalAlpha(0.16 + ms * 0.36)
+        const n2 = Math.floor(240 + ms * 500)
+        for (let j = 0; j < n2; j++) {
+          const x = rnd() * cw
+          const y = rnd() * ch
+          const s = rnd() * 1.1 + 0.2
+          ctx.setFillStyle(`rgba(250,252,255,${(0.035 + rnd() * 0.1).toFixed(3)})`)
+          ctx.fillRect(x, y, s, s)
+        }
+      }
+      this._exportDrawFineNoiseMatte(ctx, cw, ch, rnd)
+      this._exportDrawOilSweep(ctx, cw, ch, oilTimeMs)
+      if (typeof ctx.setGlobalCompositeOperation === 'function') {
+        ctx.setGlobalCompositeOperation('source-over')
+      }
+      ctx.setGlobalAlpha(1)
+    },
+    _finishCastloveExport(tempFilePath) {
+      const entry = this.castloveEntry
+      const fail = (msg) => {
+        this._saving = false
+        uni.hideLoading()
+        uni.showToast({ title: msg || '提交失败', icon: 'none' })
+      }
+      const trySubmit = (dataUrl) => {
+        uni.showLoading({ title: '上传并创建订单…', mask: true })
+        submitCastloveAfterLaserExport(dataUrl, entry)
+          .then(() => {
+            this._saving = false
+            uni.hideLoading()
+            try {
+              uni.removeStorageSync(CASTLOVE_LASER_ENTRY_KEY)
+            } catch (e) {
+              /* noop */
+            }
+            uni.redirectTo({ url: '/pages/castlove/success' })
+          })
+          .catch((err) => {
+            fail(err.message || String(err))
+          })
+      }
+      // #ifdef H5
+      if (typeof fetch !== 'undefined' && tempFilePath && String(tempFilePath).indexOf('blob:') === 0) {
+        fetch(tempFilePath)
+          .then((r) => r.blob())
+          .then(
+            (blob) =>
+              new Promise((resolve, reject) => {
+                const fr = new FileReader()
+                fr.onload = () => resolve(fr.result)
+                fr.onerror = () => reject(new Error('读取导出图失败'))
+                fr.readAsDataURL(blob)
+              })
+          )
+          .then((dataUrl) => trySubmit(dataUrl))
+          .catch(() => fail('读取导出图失败'))
+        return
+      }
+      // #endif
+      try {
+        uni.getFileSystemManager().readFile({
+          filePath: tempFilePath,
+          encoding: 'base64',
+          success: (r) => {
+            trySubmit('data:image/jpeg;base64,' + r.data)
+          },
+          fail: () => fail('读取导出文件失败')
+        })
+      } catch (e) {
+        fail('读取导出文件失败')
+      }
+    },
+    _writeImageToPhotosAlbum(filePath) {
+      uni.saveImageToPhotosAlbum({
+        filePath,
+        success: () => {
+          this._saving = false
+          uni.hideLoading()
+          uni.showToast({ title: '已保存到相册', icon: 'success' })
+          const payload = {
+            previewSrc: this.previewSrc,
+            savedPath: filePath,
+            stylePresetId: this.stylePresetId,
+            stylePresetName: this.currentPreset.name,
+            laserStrength: this.laserStrength,
+            angle: this.angle,
+            beamPivotX: this.beamPivotX,
+            beamPivotY: this.beamPivotY,
+            beamEffectId: this.beamEffectId,
+            grainDensity: this.grainDensity,
+            subjectMaskRadiusX: this.subjectMaskRadiusX,
+            subjectMaskRadiusY: this.subjectMaskRadiusY,
+            subjectMaskSoftness: this.subjectMaskSoftness,
+            subjectLaserSuppress: this.subjectLaserSuppress,
+            portraitVeilStrength: this.portraitVeilStrength,
+            marbleFlowStrength: this.marbleFlowStrength,
+            matteStrength: this.matteStrength,
+            beamIntensity: this.beamIntensity,
+            previewAnimSpeed: this.previewAnimSpeed,
+            previewVivid: this.previewVivid
+          }
+          this.$emit('saved', payload)
+          this.$nextTick(() => {
+            this._askSaveParamsAfterAlbum()
+          })
+        },
+        fail: (err) => {
+          this._saving = false
+          uni.hideLoading()
+          const msg = err.errMsg || ''
+          if (msg.includes('auth deny') || msg.includes('authorize')) {
+            uni.showModal({
+              title: '需要相册权限',
+              content: '请在系统设置中允许本应用写入相册，以便保存图片。',
+              showCancel: false
+            })
+            return
+          }
+          uni.showToast({ title: '保存失败，请检查相册权限', icon: 'none' })
+        }
+      })
+    },
+    onPreviewWrapTap() {
+      if (!this.previewSrc) {
+        this.onPreviewTap()
+      }
+    },
+    onPreviewTouchStart() {
+      if (!this.previewSrc) {
+        return
+      }
+      const query = uni.createSelectorQuery().in(this)
+      query
+        .select('.preview-wrap')
+        .boundingClientRect((rect) => {
+          this._previewRect = rect
+        })
+        .exec()
+    },
+    _touchPointXY(t) {
+      if (!t) {
+        return null
+      }
+      const x =
+        typeof t.clientX === 'number'
+          ? t.clientX
+          : typeof t.pageX === 'number'
+            ? t.pageX
+            : typeof t.x === 'number'
+              ? t.x
+              : null
+      const y =
+        typeof t.clientY === 'number'
+          ? t.clientY
+          : typeof t.pageY === 'number'
+            ? t.pageY
+            : typeof t.y === 'number'
+              ? t.y
+              : null
+      if (x == null || y == null) {
+        return null
+      }
+      return { x, y }
+    },
+    onPreviewTouchMove(e) {
+      if (!this.previewSrc || !this._previewRect) {
+        return
+      }
+      const t = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0])
+      const pt = this._touchPointXY(t)
+      if (!pt) {
+        return
+      }
+      const rect = this._previewRect
+      const u = ((pt.x - rect.left) / rect.width) * 100
+      const v = ((pt.y - rect.top) / rect.height) * 100
+      this.beamPivotX = Math.round(Math.max(0, Math.min(100, u)))
+      this.beamPivotY = Math.round(Math.max(0, Math.min(100, v)))
+    },
+    onPreviewTouchEnd() {
+      this._previewRect = null
+    },
+    onPreviewTap() {
+      uni.showActionSheet({
+        itemList: ['拍照', '从相册选择'],
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            this.pickImage(['camera'])
+          } else if (res.tapIndex === 1) {
+            this.pickImage(['album'])
+          }
+        }
+      })
+    },
+    pickImage(sourceType) {
+      uni.chooseImage({
+        count: 1,
+        /** 优先原图：仅 compressed 时部分机型临时路径 Bitmap 易「加载失败」 */
+        sizeType: ['original', 'compressed'],
+        sourceType,
+        success: (res) => {
+          const path = res.tempFilePaths && res.tempFilePaths[0]
+          if (path) {
+            this.onClearAiCutout()
+            this.previewSrc = path
+          }
+        },
+        fail: (err) => {
+          const msg = err.errMsg || ''
+          if (msg.includes('cancel') || msg.includes('取消')) {
+            return
+          }
+          uni.showToast({ title: '选取图片失败', icon: 'none' })
+        }
+      })
+    },
+    onClearAiCutout() {
+      this.segmentationMode = 'ellipse'
+      this.aiCutoutSrc = ''
+    },
+    async onSmartSegment() {
+      if (!this.previewSrc) {
+        uni.showToast({ title: '请先拍照或上传图片', icon: 'none' })
+        return
+      }
+      if (this._segmenting) {
+        return
+      }
+      this._segmenting = true
+      let timedOut = false
+      const watchdog = setTimeout(() => {
+        timedOut = true
+        this._segmenting = false
+        uni.hideLoading()
+        uni.showToast({
+          title: '识别超时，请检查网络与 segmentApi 配置',
+          icon: 'none',
+          duration: 4000
+        })
+        console.error('[智能抠图] 超过2分钟未完成，已强制结束 loading')
+      }, 120000)
+      uni.showLoading({ title: '正在识别…', mask: true })
+      try {
+        const { localPath } = await segmentPortraitToLocal(this.previewSrc)
+        if (timedOut) {
+          return
+        }
+        this.aiCutoutSrc = localPath
+        this.segmentationMode = 'ai'
+        uni.showToast({ title: '抠图完成', icon: 'none' })
+      } catch (e) {
+        if (timedOut) {
+          return
+        }
+        const msg = humanizeIfBareOssUploadErr((e && e.message) || '抠图失败')
+        // 真机调试时请看 HBuilderX 底部「控制台」；Toast 最多约一行，配置说明用弹窗展示全文
+        console.error('[智能抠图]', e)
+        const needModal =
+          msg.includes('segmentApi') ||
+          msg.includes('IMM_') ||
+          msg.includes('IVPD') ||
+          msg.includes('OSS ') ||
+          msg.includes('域名白名单') ||
+          msg.includes('manifest') ||
+          msg.length > 36
+        if (needModal) {
+          uni.showModal({ title: '智能抠图', content: msg, showCancel: false })
+        } else {
+          uni.showToast({ title: msg.length > 40 ? `${msg.slice(0, 40)}…` : msg, icon: 'none' })
+        }
+      } finally {
+        if (watchdog) {
+          clearTimeout(watchdog)
+        }
+        if (!timedOut) {
+          this._segmenting = false
+          uni.hideLoading()
+        }
+      }
+    },
+    onLaserStrengthChange(e) {
+      this.laserStrength = Number(e.detail.value)
+    },
+    onGrainDensityChange(e) {
+      this.grainDensity = Number(e.detail.value)
+    },
+    onAngleChange(e) {
+      this.angle = Math.round(Number(e.detail.value)) % 360
+      if (this.angle < 0) {
+        this.angle += 360
+      }
+    },
+    setAngleQuick(d) {
+      this.angle = ((Math.round(Number(d)) % 360) + 360) % 360
+    },
+    nudgeAngle(delta) {
+      this.angle = Math.round(this.angle + delta)
+      this.angle = ((this.angle % 360) + 360) % 360
+    },
+    onAnimSpeedChange(e) {
+      this.previewAnimSpeed = Number(e.detail.value)
+    },
+    onVividChange(e) {
+      this.previewVivid = Number(e.detail.value)
+    },
+    onSubjectMaskXChange(e) {
+      this.subjectMaskRadiusX = Number(e.detail.value)
+    },
+    onSubjectMaskYChange(e) {
+      this.subjectMaskRadiusY = Number(e.detail.value)
+    },
+    onSubjectSoftnessChange(e) {
+      this.subjectMaskSoftness = Number(e.detail.value)
+    },
+    onMatteStrengthChange(e) {
+      this.matteStrength = Number(e.detail.value)
+    },
+    onSubjectLaserSuppressChange(e) {
+      this.subjectLaserSuppress = Math.max(0, Math.min(100, Number(e.detail.value)))
+    },
+    onPortraitVeilStrengthChange(e) {
+      this.portraitVeilStrength = Math.max(0, Math.min(100, Number(e.detail.value)))
+    },
+    onMarbleFlowStrengthChange(e) {
+      this.marbleFlowStrength = Math.max(0, Math.min(100, Number(e.detail.value)))
+    },
+    onBeamIntensityChange(e) {
+      this.beamIntensity = Number(e.detail.value)
+    },
+    onDiffractionDensityChange(e) {
+      this.diffractionDensity = Math.max(0, Math.min(100, Number(e.detail.value)))
+    },
+    onDiffractionAngleOffsetChange(e) {
+      this.diffractionAngleOffset = Math.max(-90, Math.min(90, Math.round(Number(e.detail.value))))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background: #0a0a0a;
+  padding-bottom: 200rpx;
+  box-sizing: border-box;
+}
+
+.export-canvas {
+  position: fixed;
+  left: -4000px;
+  top: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.header {
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16rpx 28rpx 8rpx;
+}
+
+.header--sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  background-color: #0a0a0a;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.35);
+}
+
+.preview-sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 150;
+  background-color: #0a0a0a;
+  padding-bottom: 8rpx;
+}
+
+.header-title {
+  flex: 1;
+  min-width: 0;
+  color: #ffffff;
+  font-size: 34rpx;
+  font-weight: 600;
+  text-align: center;
+  padding: 0 12rpx;
+}
+
+.header-btn {
+  color: #ffffff;
+  font-size: 28rpx;
+  padding: 8rpx 12rpx;
+}
+
+.preview-wrap {
+  margin: 12rpx 32rpx 0;
+  border-radius: 28rpx;
+  overflow: hidden;
+  position: relative;
+  height: 720rpx;
+  background: #121212;
+  border: 2rpx solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    inset 0 0 0 1rpx rgba(255, 255, 255, 0.04),
+    0 12rpx 40rpx rgba(0, 0, 0, 0.45);
+}
+
+.preview-img-mask-wrap {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  border-radius: 28rpx;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.preview-img-subject {
+  display: block;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  border-radius: 28rpx;
+}
+
+.preview-subject-holo-veil {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.preview-subject-holo-veil--rainbow {
+  animation-name: holo-rainbow;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.preview-subject-holo-veil--metal {
+  animation-name: holo-metal-shimmer;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+.preview-matte-frost {
+  z-index: 6;
+}
+
+.preview-marble-flow {
+  z-index: 3;
+}
+
+.preview-foil-spec {
+  z-index: 3;
+}
+
+.preview-holo-suppress {
+  z-index: 8;
+}
+
+.preview-layer {
+  position: absolute;
+  left: -10%;
+  top: -10%;
+  width: 120%;
+  height: 120%;
+  pointer-events: none;
+}
+
+.preview-mesh {
+  z-index: 3;
+}
+
+.preview-diffraction {
+  z-index: 3;
+}
+
+/* 光束旋转层：显著大于预览区，避免枢轴偏移 + 大角度时四角露底 */
+.preview-layer.preview-beam-rotate {
+  left: -75%;
+  top: -75%;
+  width: 250%;
+  height: 250%;
+}
+
+.preview-beam-rotate {
+  pointer-events: none;
+}
+
+.preview-beam-rotate--stack-main {
+  z-index: 4;
+}
+
+.preview-beam-rotate--stack-sheen {
+  z-index: 7;
+}
+
+.preview-beam-rotate .preview-irid-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  transform: scale(1.34);
+  transform-origin: center center;
+}
+
+.preview-beam-rotate .preview-rays {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+}
+
+.preview-grain {
+  z-index: 5;
+}
+
+.preview-irid-wrap--rainbow {
+  animation-name: holo-rainbow;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.preview-irid-wrap--metal {
+  animation-name: holo-metal-shimmer;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+.preview-irid-core {
+  display: block;
+}
+
+.preview-beam-rotate--stack-sheen .preview-sheen-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-sheen-wrap {
+  animation-name: sheen-breathe;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+.preview-sheen-core {
+  display: block;
+}
+
+@keyframes holo-rainbow {
+  from {
+    filter: hue-rotate(0deg) saturate(var(--holo-sat, 1.3)) brightness(var(--holo-bright-lo, 1.04));
+  }
+  to {
+    filter: hue-rotate(360deg) saturate(calc(var(--holo-sat, 1.3) * 1.1))
+      brightness(var(--holo-bright-hi, 1.12));
+  }
+}
+
+@keyframes holo-metal-shimmer {
+  from {
+    filter: hue-rotate(-24deg) saturate(calc(var(--holo-sat, 1.28) * 0.96))
+      brightness(var(--holo-bright-lo, 1.05));
+  }
+  to {
+    filter: hue-rotate(36deg) saturate(calc(var(--holo-sat, 1.28) * 1.12)) brightness(var(--holo-bright-hi, 1.16));
+  }
+}
+
+@keyframes sheen-breathe {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.14);
+  }
+}
+
+.preview-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40rpx;
+  box-sizing: border-box;
+}
+
+.placeholder-icon-wrap {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 60rpx;
+  border: 3rpx solid #4fd1c5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 28rpx;
+  background: rgba(79, 209, 197, 0.08);
+}
+
+.placeholder-plus {
+  color: #4fd1c5;
+  font-size: 64rpx;
+  font-weight: 300;
+  line-height: 1;
+}
+
+.placeholder-title {
+  color: #e8e8e8;
+  font-size: 32rpx;
+  margin-bottom: 12rpx;
+}
+
+.placeholder-sub {
+  color: #888888;
+  font-size: 24rpx;
+}
+
+.preview-fab {
+  position: absolute;
+  top: 16rpx;
+  right: 16rpx;
+  z-index: 20;
+  padding: 12rpx 22rpx;
+  border-radius: 999rpx;
+  background: rgba(0, 0, 0, 0.55);
+  border: 1rpx solid rgba(102, 255, 255, 0.45);
+}
+
+.preview-fab-text {
+  color: #66ffff;
+  font-size: 24rpx;
+}
+
+.preview-replace-hint {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+  padding: 16rpx 20rpx;
+  padding-right: 120rpx;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.65));
+  pointer-events: none;
+}
+
+.preview-replace-text {
+  color: #cccccc;
+  font-size: 22rpx;
+  text-align: center;
+  display: block;
+}
+
+.preset-memory {
+  margin: 16rpx 32rpx 0;
+  padding: 16rpx 18rpx;
+  border-radius: 18rpx;
+  background: #141414;
+  border: 1rpx solid #2a2a2a;
+}
+
+.preset-memory-title {
+  display: block;
+  color: #9a9a9a;
+  font-size: 22rpx;
+  letter-spacing: 2rpx;
+  margin-bottom: 4rpx;
+}
+
+.preset-memory-hint {
+  display: block;
+  color: #5a5a5a;
+  font-size: 18rpx;
+  margin-bottom: 12rpx;
+}
+
+.preset-memory-scroll {
+  white-space: nowrap;
+  width: 100%;
+}
+
+.preset-memory-chip {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12rpx 20rpx;
+  margin-right: 12rpx;
+  border-radius: 14rpx;
+  background: #1c1c1c;
+  border: 1rpx solid #333333;
+  max-width: 280rpx;
+  box-sizing: border-box;
+}
+
+.preset-memory-name {
+  color: #f0f0f0;
+  font-size: 24rpx;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 240rpx;
+}
+
+.preset-memory-meta {
+  color: #6a9e9a;
+  font-size: 20rpx;
+  margin-top: 4rpx;
+}
+
+.summary-bar {
+  margin: 20rpx 0 0;
+  padding: 0 32rpx;
+}
+
+.summary-bar-title {
+  display: block;
+  color: #7a7a7a;
+  font-size: 20rpx;
+  letter-spacing: 3rpx;
+  margin-bottom: 12rpx;
+}
+
+.summary-scroll {
+  white-space: nowrap;
+  width: 100%;
+}
+
+.summary-chip {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 14rpx 22rpx;
+  margin-right: 14rpx;
+  border-radius: 16rpx;
+  background: #151515;
+  border: 1rpx solid #2a2a2a;
+  max-width: 240rpx;
+  box-sizing: border-box;
+}
+
+.summary-chip.on {
+  border-color: rgba(102, 255, 255, 0.55);
+  background: rgba(102, 255, 255, 0.06);
+}
+
+.summary-chip-k {
+  color: #888888;
+  font-size: 20rpx;
+  margin-bottom: 6rpx;
+}
+
+.summary-chip-v {
+  color: #eeeeee;
+  font-size: 24rpx;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200rpx;
+}
+
+.param-panel {
+  margin: 20rpx 32rpx 0;
+  padding: 24rpx 24rpx 28rpx;
+  border-radius: 24rpx;
+  background: #121212;
+  border: 1rpx solid #252525;
+  box-sizing: border-box;
+}
+
+.panel-head {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-bottom: 20rpx;
+  margin-bottom: 8rpx;
+  border-bottom: 1rpx solid #242424;
+}
+
+.panel-head-text {
+  flex: 1;
+  padding-right: 16rpx;
+}
+
+.panel-title {
+  display: block;
+  color: #ffffff;
+  font-size: 30rpx;
+  font-weight: 600;
+  margin-bottom: 8rpx;
+}
+
+.panel-desc {
+  display: block;
+  color: #8a8a8a;
+  font-size: 22rpx;
+  line-height: 1.45;
+}
+
+.panel-tag {
+  max-width: 42%;
+  padding: 10rpx 16rpx;
+  border-radius: 12rpx;
+  background: #1e1e1e;
+  border: 1rpx solid #333333;
+  align-self: center;
+}
+
+.panel-tag-text {
+  color: #66ffff;
+  font-size: 22rpx;
+  text-align: right;
+  word-break: break-all;
+}
+
+.panel-body {
+  padding-top: 8rpx;
+}
+
+.panel-body--tight {
+  padding-top: 4rpx;
+}
+
+.preset-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.preset-card {
+  width: calc(50% - 8rpx);
+  box-sizing: border-box;
+  padding: 16rpx 14rpx 18rpx;
+  border-radius: 18rpx;
+  background: #181818;
+  border: 2rpx solid #2c2c2c;
+}
+
+.preset-card.active {
+  border-color: rgba(79, 209, 197, 0.75);
+  box-shadow: 0 0 20rpx rgba(79, 209, 197, 0.2);
+}
+
+.preset-strip {
+  height: 56rpx;
+  border-radius: 12rpx;
+  margin-bottom: 12rpx;
+}
+
+.preset-name {
+  display: block;
+  color: #f0f0f0;
+  font-size: 26rpx;
+  font-weight: 600;
+  margin-bottom: 6rpx;
+}
+
+.preset-desc {
+  display: block;
+  color: #7a7a7a;
+  font-size: 20rpx;
+  line-height: 1.35;
+}
+
+.group-label {
+  display: block;
+  color: #9a9a9a;
+  font-size: 22rpx;
+  letter-spacing: 2rpx;
+  margin-bottom: 14rpx;
+}
+
+.group-label.spaced {
+  margin-top: 28rpx;
+}
+
+.chip-scroll {
+  white-space: nowrap;
+  width: 100%;
+}
+
+.chip {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 120rpx;
+  padding: 16rpx 20rpx;
+  margin-right: 16rpx;
+  border-radius: 20rpx;
+  background: #1c1c1c;
+  border: 2rpx solid #2a2a2a;
+  box-sizing: border-box;
+}
+
+.chip.active {
+  border-color: #66ffff;
+  box-shadow: 0 0 16rpx rgba(102, 255, 255, 0.35);
+}
+
+.chip-icon {
+  color: #ffffff;
+  font-size: 36rpx;
+  margin-bottom: 6rpx;
+}
+
+.chip-text {
+  color: #cccccc;
+  font-size: 22rpx;
+}
+
+.chip-text.alone {
+  margin-top: 0;
+}
+
+.palette-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20rpx;
+}
+
+.swatch {
+  width: 30%;
+  min-width: 200rpx;
+  background: #1a1a1a;
+  border-radius: 20rpx;
+  padding: 16rpx;
+  border: 2rpx solid #2a2a2a;
+  box-sizing: border-box;
+}
+
+.swatch.mini {
+  display: inline-flex;
+  flex-direction: column;
+  width: 160rpx;
+  min-width: 160rpx;
+  margin-right: 16rpx;
+  vertical-align: top;
+}
+
+.swatch.active {
+  border-color: #66ffff;
+  box-shadow: 0 0 12rpx rgba(102, 255, 255, 0.3);
+}
+
+.swatch-fill {
+  height: 88rpx;
+  border-radius: 14rpx;
+  margin-bottom: 10rpx;
+}
+
+.swatch-name {
+  color: #cfcfcf;
+  font-size: 22rpx;
+  text-align: center;
+}
+
+.slider-block {
+  margin-top: 20rpx;
+  padding: 20rpx 18rpx;
+  border-radius: 18rpx;
+  background: #161616;
+  border: 1rpx solid #242424;
+}
+
+.slider-block:first-child {
+  margin-top: 0;
+}
+
+.slider-block--muted {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.segment-actions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  margin-top: 16rpx;
+}
+
+.segment-btn {
+  padding: 16rpx 28rpx;
+  border-radius: 999rpx;
+}
+
+.segment-btn--primary {
+  background: linear-gradient(120deg, #00c4a0, #0077bb);
+}
+
+.segment-btn--ghost {
+  background: transparent;
+  border: 1rpx solid rgba(102, 255, 255, 0.45);
+}
+
+.segment-btn-text {
+  color: #ffffff;
+  font-size: 26rpx;
+}
+
+.slider-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8rpx;
+}
+
+.slider-label {
+  color: #e8e8e8;
+  font-size: 28rpx;
+}
+
+.value-pill {
+  color: #0a0a0a;
+  background: #66ffff;
+  font-size: 24rpx;
+  font-weight: 600;
+  padding: 6rpx 18rpx;
+  border-radius: 999rpx;
+}
+
+.value-pill--pink {
+  background: #ff99cc;
+}
+
+.value-pill--mini {
+  font-size: 22rpx;
+  padding: 4rpx 14rpx;
+}
+
+.slider-row--tight {
+  margin-top: 16rpx;
+  margin-bottom: 4rpx;
+}
+
+.slider-label-sub {
+  color: #c4c4c4;
+  font-size: 26rpx;
+}
+
+.slider-tip-inline {
+  display: block;
+  color: #6a8a86;
+  font-size: 20rpx;
+  margin-bottom: 8rpx;
+  line-height: 1.4;
+}
+
+/* 光柱强烈时的强调色光晕 */
+.preview-rays {
+  filter: saturate(calc(1 + (var(--ray-sat, 0)) * 0.4));
+}
+
+.slider-sub {
+  display: block;
+  color: #777777;
+  font-size: 22rpx;
+  margin-bottom: 8rpx;
+}
+
+.slider {
+  margin: 0;
+}
+
+.slider-scale {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 8rpx;
+}
+
+.scale-edge {
+  color: #5c5c5c;
+  font-size: 20rpx;
+}
+
+.beam-effect-scroll {
+  white-space: nowrap;
+  width: 100%;
+  margin-top: 12rpx;
+}
+
+.beam-effect-chip {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: 132rpx;
+  margin-right: 14rpx;
+  padding: 12rpx 10rpx;
+  border-radius: 16rpx;
+  background: #1a1a1a;
+  border: 2rpx solid #2c2c2c;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+
+.beam-effect-chip.active {
+  border-color: rgba(255, 153, 204, 0.85);
+  box-shadow: 0 0 14rpx rgba(255, 153, 204, 0.25);
+}
+
+.beam-effect-swatch {
+  width: 100%;
+  height: 40rpx;
+  border-radius: 10rpx;
+  margin-bottom: 8rpx;
+}
+
+.beam-effect-name {
+  color: #c8c8c8;
+  font-size: 20rpx;
+  text-align: center;
+  line-height: 1.25;
+}
+
+.angle-quick-scroll {
+  white-space: nowrap;
+  width: 100%;
+  margin-top: 14rpx;
+}
+
+.angle-quick-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 72rpx;
+  padding: 10rpx 16rpx;
+  margin-right: 10rpx;
+  border-radius: 999rpx;
+  background: #1e1e1e;
+  border: 2rpx solid #333333;
+  box-sizing: border-box;
+}
+
+.angle-quick-chip.active {
+  border-color: rgba(255, 153, 204, 0.9);
+  background: rgba(255, 153, 204, 0.12);
+}
+
+.angle-quick-text {
+  color: #d0d0d0;
+  font-size: 22rpx;
+}
+
+.angle-quick-chip.active .angle-quick-text {
+  color: #ffccdd;
+  font-weight: 600;
+}
+
+.angle-fine-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 14rpx;
+}
+
+.angle-fine-btn {
+  flex: 1;
+  min-width: 140rpx;
+  padding: 14rpx 12rpx;
+  border-radius: 14rpx;
+  background: #1a1a1a;
+  border: 1rpx solid #2e2e2e;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.angle-fine-text {
+  color: #9a9a9a;
+  font-size: 24rpx;
+}
+
+.slider-tip {
+  display: block;
+  color: #6a9e9a;
+  font-size: 20rpx;
+  margin-top: 10rpx;
+  line-height: 1.4;
+}
+
+.picker-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 28rpx;
+  border-radius: 20rpx;
+  background: #1c1c1c;
+  border: 2rpx solid #2a2a2a;
+}
+
+.picker-left {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding-right: 16rpx;
+}
+
+.picker-text {
+  color: #ffffff;
+  font-size: 28rpx;
+}
+
+.picker-hint {
+  color: #6f6f6f;
+  font-size: 22rpx;
+  margin-top: 8rpx;
+}
+
+.picker-arrow {
+  color: #888888;
+  font-size: 24rpx;
+}
+
+.tabbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-around;
+  background: #0f0f0f;
+  border-top: 1rpx solid #222222;
+  padding-top: 8rpx;
+  z-index: 100;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12rpx 0 18rpx;
+  position: relative;
+}
+
+.tab-indicator {
+  width: 48rpx;
+  height: 6rpx;
+  border-radius: 6rpx;
+  background: transparent;
+  margin-bottom: 6rpx;
+}
+
+.tab-item.active .tab-indicator {
+  background: #66ffff;
+  box-shadow: 0 0 12rpx rgba(102, 255, 255, 0.8);
+}
+
+.tab-icon {
+  font-size: 32rpx;
+  color: #666666;
+  margin-bottom: 4rpx;
+}
+
+.tab-text {
+  font-size: 22rpx;
+  color: #777777;
+}
+
+.tab-item.active .tab-icon,
+.tab-item.active .tab-text {
+  color: #66ffff;
+}
+
+</style>
diff --git a/frontend/pages/castlove/lenticular-studio.vue b/frontend/pages/castlove/lenticular-studio.vue
new file mode 100644
index 0000000..eabfb80
--- /dev/null
+++ b/frontend/pages/castlove/lenticular-studio.vue
@@ -0,0 +1,657 @@
+<template>
+	<view class="physics-page">
+		<view class="top-bar">
+			<view class="top-bar-btn" @tap="goBack">
+				<text class="nav-glyph">←</text>
+			</view>
+			<view class="top-bar-title">
+				<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>
+		</view>
+
+		<view class="canvas-wrap">
+			<view class="canvas-bg" />
+			<LenticularCard
+				class="preview-stack"
+				:layers="layers"
+				:transforms="layerTransforms"
+				:gyro-source="gyroSourceLabel"
+				:skip-built-in-touch="true"
+				:tilt-hint-text="tiltHintText"
+				@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">
+			<view class="dock-rim" />
+			<view class="layer-strip">
+				<view class="layer-strip-header">
+					<text class="layer-strip-title">图层素材</text>
+					<text class="layer-strip-hint">点击替换 · 长按重置</text>
+				</view>
+				<view class="layer-slots">
+					<view
+						v-for="layer in layers"
+						:key="layer.id"
+						class="layer-slot"
+						:class="{ 'layer-slot--filled': !!layer.src }"
+						@tap="pickImage(layer.id)"
+						@longpress="resetLayer(layer.id)"
+					>
+						<image v-if="layer.src" class="layer-slot-img" :src="layer.src" mode="aspectFill" />
+						<view v-else class="layer-slot-placeholder" :style="placeholderStyle(layer)">
+							<text class="layer-slot-icon">＋</text>
+						</view>
+						<view class="layer-slot-meta">
+							<text class="layer-slot-name">{{ layer.label }}</text>
+							<text class="layer-slot-tag">{{ layer.src ? '已上传' : '点击上传' }}</text>
+						</view>
+						<view v-if="layer.src" class="layer-slot-badge" @tap.stop="resetLayer(layer.id)">
+							<text class="layer-slot-badge-icon">×</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	inheritAttrs: false,
+};
+</script>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import LenticularCard from '@/components/lenticular/LenticularCard.vue'
+import { useLenticularPreview } from '@/composables/useLenticularPreview.js'
+import {
+	buildLenticularLayersTwo,
+	LENTICULAR_STUDIO_STORAGE_KEY,
+} from '@/utils/castloveMintForm.js'
+
+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(() => '缓慢扭动手机 · 「校零」回中')
+
+const gyroHintLine = computed(() => {
+	if (gyroSourceLabel.value === 'accelerometer') {
+		return '重力计驱动 · 持续同向倾斜会反复叠化；可点「校零」'
+	}
+	return '倾斜驱动预览中；若无效请检查权限或换真机'
+})
+
+function goBack() {
+	uni.navigateBack({
+		delta: 1,
+		fail: () => {},
+	})
+}
+
+function onMore() {
+	uni.showActionSheet({
+		itemList: ['恢复为进入工作室时的图片'],
+		success: (res) => {
+			if (res.tapIndex === 0) {
+				const raw = uni.getStorageSync(LENTICULAR_STUDIO_STORAGE_KEY)
+				if (!raw) return
+				try {
+					const p = typeof raw === 'string' ? JSON.parse(raw) : raw
+					layers.value = buildLenticularLayersTwo(p.bgPath || '', p.subjectPath || '')
+					uni.showToast({ title: '已恢复', icon: 'none' })
+				} catch (e) {
+					console.error(e)
+				}
+			}
+		},
+	})
+}
+
+function placeholderStyle(layer) {
+	if (layer.background) {
+		return { background: layer.background }
+	}
+	return { background: 'rgba(6,14,32,0.55)' }
+}
+
+function pickImage(layerId) {
+	uni.chooseImage({
+		count: 1,
+		sizeType: ['compressed'],
+		sourceType: ['album', 'camera'],
+		success: (res) => {
+			const path = res.tempFilePaths && res.tempFilePaths[0]
+			if (!path) return
+			const idx = layers.value.findIndex((l) => l.id === layerId)
+			if (idx < 0) return
+			const cur = layers.value[idx]
+			const next = { ...cur, src: path, background: undefined }
+			if (layerId === 'base') next.dots = undefined
+			const copy = [...layers.value]
+			copy[idx] = next
+			layers.value = copy
+		},
+		fail: (err) => {
+			const msg = (err && err.errMsg) || ''
+			if (!msg.includes('cancel')) {
+				uni.showToast({ title: '选择图片失败', icon: 'none' })
+			}
+		},
+	})
+}
+
+function resetLayer(layerId) {
+	const fresh = buildLenticularLayersTwo('', '')
+	const defLayer = fresh.find((l) => l.id === layerId)
+	const idx = layers.value.findIndex((l) => l.id === layerId)
+	if (idx < 0 || !defLayer) return
+	const copy = [...layers.value]
+	copy[idx] = { ...defLayer }
+	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)
+	uni.showToast({ title: '已重置水平基准', icon: 'none' })
+}
+
+onMounted(() => {
+	try {
+		const raw = uni.getStorageSync(LENTICULAR_STUDIO_STORAGE_KEY)
+		if (!raw) {
+			uni.showToast({ title: '缺少素材数据，请返回上一步', icon: 'none' })
+			setTimeout(() => goBack(), 1600)
+			return
+		}
+		const p = typeof raw === 'string' ? JSON.parse(raw) : raw
+		layers.value = buildLenticularLayersTwo(p.bgPath || '', p.subjectPath || '')
+	} catch (e) {
+		console.error('[lenticular-studio] load payload', e)
+		uni.showToast({ title: '数据无效', icon: 'none' })
+		setTimeout(() => goBack(), 1600)
+		return
+	}
+	nextTick(() => {
+		physics.angleStability = 16
+		physics.transitionSmoothness = 62
+		physics.tiltSensitivity = 96
+		physics.sensorDeadzoneStrength = 0
+		startAccel()
+	})
+})
+
+onUnmounted(() => {
+	stopAccel()
+})
+</script>
+
+<style>
+.nav-glyph {
+	font-size: 22px;
+	line-height: 1;
+	font-weight: 600;
+	color: inherit;
+}
+</style>
+
+<style scoped>
+.physics-page {
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: #0b1326;
+	color: #dae2fd;
+	overflow: hidden;
+	position: relative;
+}
+
+.top-bar {
+	position: relative;
+	z-index: 50;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 16px;
+	height: 56px;
+	padding-top: calc(env(safe-area-inset-top) + 4px);
+	background: rgba(11, 19, 38, 0.88);
+	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.top-bar-btn {
+	width: 44px;
+	height: 44px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #ddb7ff;
+}
+
+.top-bar-title {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.top-bar-title-text {
+	font-size: 18px;
+	font-weight: 600;
+	color: #dae2fd;
+}
+
+.top-bar-subtitle {
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.16em;
+	color: #4cd7f6;
+	margin-top: 2px;
+}
+
+.canvas-wrap {
+	flex: 1;
+	min-height: 0;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 10px 4px;
+	z-index: 10;
+}
+
+.preview-stack {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	display: flex;
+	align-items: center;
+	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;
+	background:
+		radial-gradient(ellipse at 50% 35%, rgba(132, 43, 210, 0.18), transparent 55%),
+		radial-gradient(ellipse at 50% 85%, rgba(76, 215, 246, 0.1), transparent 60%);
+	pointer-events: none;
+}
+
+.tool-dock {
+	position: relative;
+	z-index: 20;
+	margin: 0 10px calc(10px + env(safe-area-inset-bottom));
+	max-width: 460px;
+	align-self: center;
+	width: calc(100% - 20px);
+	background: rgba(34, 42, 61, 0.88);
+	border: 1px solid rgba(77, 67, 84, 0.45);
+	border-radius: 20px;
+	padding: 12px 14px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
+	overflow: hidden;
+}
+
+.dock-rim {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 1px;
+	background: linear-gradient(to right, transparent, rgba(221, 183, 255, 0.45), transparent);
+}
+
+.layer-strip {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.layer-strip-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 2px;
+}
+
+.layer-strip-title {
+	font-size: 13px;
+	font-weight: 600;
+	color: #dae2fd;
+}
+
+.layer-strip-hint {
+	font-size: 11px;
+	color: rgba(207, 194, 214, 0.6);
+}
+
+.layer-slots {
+	display: flex;
+	gap: 8px;
+}
+
+.layer-slot {
+	flex: 1;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	border-radius: 12px;
+	overflow: hidden;
+	background: rgba(6, 14, 32, 0.55);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.layer-slot--filled {
+	border-color: rgba(76, 215, 246, 0.5);
+	box-shadow: 0 0 14px rgba(76, 215, 246, 0.15);
+}
+
+.layer-slot-img {
+	width: 100%;
+	height: 56px;
+	display: block;
+}
+
+.layer-slot-placeholder {
+	width: 100%;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-size: cover;
+	background-position: center;
+}
+
+.layer-slot-icon {
+	font-size: 22px;
+	color: rgba(221, 183, 255, 0.85);
+}
+
+.layer-slot-meta {
+	display: flex;
+	flex-direction: column;
+	padding: 6px 8px 8px;
+	gap: 2px;
+	background: rgba(6, 14, 32, 0.55);
+}
+
+.layer-slot-name {
+	font-size: 12px;
+	font-weight: 600;
+	color: #dae2fd;
+}
+
+.layer-slot-tag {
+	font-size: 10px;
+	color: rgba(207, 194, 214, 0.7);
+}
+
+.layer-slot--filled .layer-slot-tag {
+	color: #4cd7f6;
+}
+
+.layer-slot-badge {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	width: 22px;
+	height: 22px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: rgba(0, 0, 0, 0.55);
+	border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.layer-slot-badge-icon {
+	font-size: 14px;
+	color: #dae2fd;
+}
+</style>
diff --git a/frontend/pages/components/HorizontalScroll.vue b/frontend/pages/components/HorizontalScroll.vue
index d60eed8..369d696 100644
--- a/frontend/pages/components/HorizontalScroll.vue
+++ b/frontend/pages/components/HorizontalScroll.vue
@@ -12,10 +12,10 @@
 	</scroll-view>
 </template>
 
-<script setup>
-defineOptions({
-	name: 'HorizontalScroll'
-});
+<script>
+export default {
+	name: 'HorizontalScroll',
+};
 </script>
 
 <style scoped>
diff --git a/frontend/pages/discover/discover.vue b/frontend/pages/discover/discover.vue
index 49aba66..de43934 100644
--- a/frontend/pages/discover/discover.vue
+++ b/frontend/pages/discover/discover.vue
@@ -45,6 +45,7 @@ import DiscoverFeed from './discover-feed.vue';
 import CreateFeed from './create-feed.vue';
 // 导入API
 import { getOssSignatureApi, createMintOrderApi } from '@/utils/api.js';
+import { resolveH5OssPostUrl } from '@/utils/h5OssPostUrl.js';
 		
 const activeTab = ref(0);
 const formData = ref(null);
@@ -97,7 +98,7 @@ const uploadImageToOss = async (base64Image, ossData) => {
 	formData.append('x-oss-signature-version', ossData.x_oss_signature_version);
 	formData.append('file', blob, fileName);
 	
-	const response = await fetch(ossData.host, {
+	const response = await fetch(resolveH5OssPostUrl(ossData.host), {
 		method: 'POST',
 		body: formData
 	});
@@ -203,16 +204,16 @@ const handleSkip = async () => {
 		// 更新加载提示
 		uni.showLoading({ title: '创建订单中...', mask: true });
 		
-		// 构建订单数据
+		// 构建订单数据（对齐 CreateMintOrderRequestDTO）
 		const orderData = {
-			name: orderValue.name,
-			event: orderValue.event,
-			description: orderValue.remark || '',
-			material_type: orderValue.materialType || 'image',
+			order_id: orderId,
+			name: orderValue.name || '',
 			material_url: imageUrl,
-			rarity: 0,
-			tags: [],
-			order_id: orderId
+			description: orderValue.description || '',
+			grade: orderValue.grade ?? 0,
+			tags: Array.isArray(orderValue.tags) ? orderValue.tags : [],
+			material_type: orderValue.material_type || orderValue.materialType || '',
+			info: orderValue.info || orderValue.event || '',
 		};
 		
 		// 调用创建铸造订单API
@@ -229,11 +230,13 @@ const handleSkip = async () => {
 		// 构建藏品数据，存储到temp_nft_data
 		const nftData = {
 			image: imageUrl,
-			name: orderValue.name,
-			event: orderValue.event,
-			description: orderValue.remark || '',
-			material_type: orderValue.materialType || 'image',
-			order_id: orderId
+			name: orderValue.name || '',
+			description: orderValue.description || orderValue.remark || '',
+			material_type: orderValue.material_type || orderValue.materialType || '',
+			tags: Array.isArray(orderValue.tags) ? orderValue.tags : [],
+			order_id: orderId,
+			info: orderValue.info || '',
+			event: orderValue.info || orderValue.event || '',
 		};
 		
 		// 存储到storage
diff --git a/frontend/pages/discover/generation-result.vue b/frontend/pages/discover/generation-result.vue
index 33d3626..8cace70 100644
--- a/frontend/pages/discover/generation-result.vue
+++ b/frontend/pages/discover/generation-result.vue
@@ -75,6 +75,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import { getOssSignatureApi, createMintOrderApi } from '@/utils/api.js';
+import { resolveH5OssPostUrl } from '@/utils/h5OssPostUrl.js';
 
 const generatedImages = ref([]);
 const selectedIndex = ref(-1);
@@ -422,12 +423,12 @@ const uploadToOssH5 = async (base64Image, fileName, ossData) => {
 			formData.append('file', blob, fileName);
 			
 			// 使用fetch上传
-			fetch(ossData.host, {
+			fetch(resolveH5OssPostUrl(ossData.host), {
 				method: 'POST',
 				body: formData
 			})
 			.then(response => {
-				if (response.ok) {
+				if (response.ok || response.status === 204) {
 					const imageUrl = `${ossData.host}/${ossData.dir}${fileName}`;
 					uni.hideLoading();
 					uni.showToast({
@@ -656,17 +657,16 @@ const selectAsset = async () => {
 		const formDataStr = uni.getStorageSync('castlove_form_data');
 		const orderValue = formDataStr ? JSON.parse(formDataStr) : {};
 		
-		// 构建订单数据
+		// 构建订单数据（对齐 CreateMintOrderRequestDTO）
 		const orderData = {
-			name: orderValue.name,
-			event: orderValue.event,
-			description: orderValue.description,
-			material_type: orderValue.material_type,
-			material_url: imageUrl,
-			rarity: 0,
-			tags: [],
 			order_id: currentOrderId.value,
-			info: orderValue.info || '' // 添加info字段
+			name: orderValue.name || '',
+			material_url: imageUrl,
+			description: orderValue.description || '',
+			grade: orderValue.grade ?? 0,
+			tags: Array.isArray(orderValue.tags) ? orderValue.tags : [],
+			material_type: orderValue.material_type || orderValue.materialType || '',
+			info: orderValue.info || orderValue.event || '',
 		};
 		
 		// 调用创建铸造订单API
@@ -679,12 +679,14 @@ const selectAsset = async () => {
 		uni.removeStorageSync('castlove_form_data');
 		// 构建藏品数据，存储到temp_nft_data
 		const nftData = {
-			image: imageUrl, // 使用OSS URL
-			name: orderValue.name,
-			event: orderValue.event,
-			description: orderValue.description,
-			material_type: orderValue.material_type,
-			order_id: currentOrderId.value // 使用ref保存的order_id
+			image: imageUrl,
+			name: orderValue.name || '',
+			description: orderValue.description || '',
+			material_type: orderValue.material_type || orderValue.materialType || '',
+			tags: Array.isArray(orderValue.tags) ? orderValue.tags : [],
+			order_id: currentOrderId.value,
+			info: orderValue.info || '',
+			event: orderValue.info || orderValue.event || '',
 		};
 		
 		// 存储到storage
diff --git a/frontend/utils/api.js b/frontend/utils/api.js
index 57c1ff7..06c1885 100644
--- a/frontend/utils/api.js
+++ b/frontend/utils/api.js
@@ -4,23 +4,28 @@
 
 // #ifdef H5
 // const baseURL = 'http://localhost:8080'  // H5 开发用本机
-const baseURL = 'http://192.168.110.60:8080' // H5 开发用本机
+const baseURL = 'http://101.132.250.62:8080' // H5 开发用本机
 // #endif
 
 // #ifdef APP-PLUS
 // 开发调试：手机和电脑同一WiFi时用这个（改成你电脑IP）
 // 上线后：改成实际服务器地址
-const baseURL = 'http://192.168.110.60:8080'
+// const baseURL = 'http://192.168.110.60:8080'
 // #endif
 
 // 服务器地址（正式上线用）
 // #ifdef APP-PLUS
-// const baseURL = 'http://101.132.250.62:8080'
+const baseURL = 'http://101.132.250.62:8080'
 // #endif
 
 // 是否使用模拟数据（开发调试时设为 true，后端API准备好后改为 false）
 const USE_MOCK_API = false
 
+/** 网关根地址（供 uni.uploadFile 等无法走 request 封装的场景拼接完整 URL） */
+export function getApiBaseUrl() {
+	return String(baseURL).replace(/\/+$/, '')
+}
+
 // 模拟网络延迟
 function mockDelay(ms = 800) {
 	return new Promise(resolve => setTimeout(resolve, ms))
@@ -414,15 +419,30 @@ export function removeAssetFromGalleryApi(slotId) {
 	})
 }
 
-// 获取OSS上传签名
-export function getOssSignatureApi(type) {
+/**
+ * 获取 OSS 浏览器直传凭证（PostObject 表单字段）
+ * 对应网关：GET /api/v1/assets/oss/upload-signature（与 /oss/signature 同一处理逻辑，此处走阶段一推荐路径）
+ * @param {'avatar'|'asset'} [type='asset'] 上传目录类型
+ * @param {string} [orderId] 可选；传入则与后续 POST /api/v1/assets/mints 使用同一 order_id（后端 InitMintOrder）
+ */
+export function getOssSignatureApi(type = 'asset', orderId = '') {
+	let url = `/api/v1/assets/oss/upload-signature?type=${encodeURIComponent(type)}`
+	if (orderId) {
+		url += `&order_id=${encodeURIComponent(orderId)}`
+	}
 	return request({
-		url: `/api/v1/assets/oss/signature?type=${type}`,
+		url,
 		method: 'GET'
 	})
 }
 
-// 获取OSS预签名URL(用于读取图片)
+/** 兼容旧调用名：与 getOssSignatureApi 相同 */
+export const getOssUploadSignatureApi = getOssSignatureApi
+
+/**
+ * 获取 OSS 预签名 GET URL（私有桶读图）
+ * 对应网关：GET /api/v1/assets/oss/presigned-url
+ */
 export function getOssPresignedUrlApi(fileName, expires = 3600, type = 'avatar') {
 	return request({
 		url: `/api/v1/assets/oss/presigned-url?file_name=${encodeURIComponent(fileName)}&expires=${expires}&type=${type}`,
@@ -430,6 +450,76 @@ export function getOssPresignedUrlApi(fileName, expires = 3600, type = 'avatar')
 	})
 }
 
+/**
+ * 批量预签名读 URL
+ * 对应网关：GET /api/v1/assets/oss/batch-presigned-urls
+ */
+export function getBatchOssPresignedUrlsApi(files, expires = 3600, type = 'asset') {
+	return request({
+		url: `/api/v1/assets/oss/batch-presigned-urls?files=${encodeURIComponent(JSON.stringify(files))}&expires=${expires}&type=${type}`,
+		method: 'GET'
+	})
+}
+
+/**
+ * 使用网关下发的 Post 策略将本地临时文件直传 OSS（App / 小程序等）
+ * @param {string} filePath uni.chooseImage 等返回的 tempFilePaths 项
+ * @param {{ type?: 'avatar'|'asset', orderId?: string, fileName?: string }} [options]
+ * @returns {Promise<{ imageUrl: string, orderId?: string, data: object }>}
+ */
+export function uploadLocalFileToOss(filePath, options = {}) {
+	const { type = 'asset', orderId = '', fileName } = options
+	const objectName = fileName || `${Date.now()}.jpg`
+	return new Promise((resolve, reject) => {
+		getOssSignatureApi(type, orderId)
+			.then((signRes) => {
+				if (!signRes || signRes.code !== 200 || !signRes.data) {
+					reject(new Error((signRes && signRes.message) || '获取 OSS 签名失败'))
+					return
+				}
+				const d = signRes.data
+				const host = d.host
+				const dir = d.dir || ''
+				if (!host) {
+					reject(new Error('签名数据缺少 host'))
+					return
+				}
+				uni.uploadFile({
+					url: host,
+					filePath,
+					name: 'file',
+					formData: {
+						key: dir + objectName,
+						policy: d.policy,
+						success_action_status: '200',
+						'x-oss-credential': d.x_oss_credential,
+						'x-oss-date': d.x_oss_date,
+						'x-oss-security-token': d.security_token,
+						'x-oss-signature': d.signature,
+						'x-oss-signature-version': d.x_oss_signature_version
+					},
+					success: (uploadRes) => {
+						const ok = uploadRes.statusCode === 200 || uploadRes.statusCode === 204
+						if (!ok) {
+							reject(new Error(`OSS 上传失败 HTTP ${uploadRes.statusCode}`))
+							return
+						}
+						const imageUrl = `${host.replace(/\/+$/, '')}/${dir}${objectName}`
+						resolve({
+							imageUrl,
+							orderId: d.order_id,
+							data: d
+						})
+					},
+					fail: (e) => {
+						reject(new Error(e.errMsg || 'OSS 上传失败'))
+					}
+				})
+			})
+			.catch(reject)
+	})
+}
+
 // 更新用户头像
 export function updateAvatarApi(avatarUrl) {
 	return request({
@@ -646,14 +736,6 @@ export function getInspirationFlowApi(params) {
 	})
 }
 
-// 批量获取OSS预签名URL（用于读取目录下的图片）
-export function getBatchOssPresignedUrlsApi(files, expires = 3600, type = 'asset') {
-	return request({
-		url: `/api/v1/assets/oss/batch-presigned-urls?files=${encodeURIComponent(JSON.stringify(files))}&expires=${expires}&type=${type}`,
-		method: 'GET'
-	})
-}
-
 // ==================== 铸造活动相关接口（运营banner）====================
 
 // 获取铸造活动列表
diff --git a/frontend/utils/castloveAfterLaserMint.js b/frontend/utils/castloveAfterLaserMint.js
new file mode 100644
index 0000000..d03131b
--- /dev/null
+++ b/frontend/utils/castloveAfterLaserMint.js
@@ -0,0 +1,179 @@
+/**
+ * 镭射工坊导出图后：OSS 上传 + 创建铸造订单（与 create.vue 原「跳过」链路一致）
+ */
+import { getOssSignatureApi, createMintOrderApi } from '@/utils/api.js'
+import { resolveH5OssPostUrl } from '@/utils/h5OssPostUrl.js'
+import { buildCastloveFormSnapshot } from '@/utils/castloveMintForm.js'
+
+/**
+ * @param {string} base64Data data:image/jpeg;base64,... 或 data:image/png;base64,...
+ * @param {object} ossData getOssSignatureApi 返回的 data
+ * @returns {Promise<string>} material_url
+ */
+function uploadDataUrlToOss(base64Data, ossData) {
+	return new Promise((resolve, reject) => {
+		const fileName = `${Date.now()}.jpg`
+
+		// #ifdef H5
+		fetch(base64Data)
+			.then((res) => res.blob())
+			.then((blob) => {
+				const formData = new FormData()
+				formData.append('key', ossData.dir + fileName)
+				formData.append('policy', ossData.policy)
+				formData.append('success_action_status', '200')
+				formData.append('x-oss-credential', ossData.x_oss_credential)
+				formData.append('x-oss-date', ossData.x_oss_date)
+				formData.append('x-oss-security-token', ossData.security_token)
+				formData.append('x-oss-signature', ossData.signature)
+				formData.append('x-oss-signature-version', ossData.x_oss_signature_version)
+				formData.append('file', blob, fileName)
+				return fetch(resolveH5OssPostUrl(ossData.host), {
+					method: 'POST',
+					body: formData
+				})
+			})
+			.then((response) => {
+				if (response.ok || response.status === 204) {
+					resolve(`${ossData.host}/${ossData.dir}${fileName}`)
+				} else {
+					reject(new Error('上传失败'))
+				}
+			})
+			.catch(reject)
+		// #endif
+
+		// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
+		const base64Content = base64Data.split(',')[1]
+		const fp = `${wx.env.USER_DATA_PATH}/${fileName}`
+		uni.getFileSystemManager().writeFile({
+			filePath: fp,
+			data: base64Content,
+			encoding: 'base64',
+			success: () => {
+				uni.uploadFile({
+					url: ossData.host,
+					filePath: fp,
+					name: 'file',
+					formData: {
+						key: ossData.dir + fileName,
+						policy: ossData.policy,
+						success_action_status: '200',
+						'x-oss-credential': ossData.x_oss_credential,
+						'x-oss-date': ossData.x_oss_date,
+						'x-oss-security-token': ossData.security_token,
+						'x-oss-signature': ossData.signature,
+						'x-oss-signature-version': ossData.x_oss_signature_version
+					},
+					success: (uploadRes) => {
+						if (uploadRes.statusCode === 200 || uploadRes.statusCode === 204) {
+							resolve(`${ossData.host}/${ossData.dir}${fileName}`)
+						} else {
+							reject(new Error(`上传失败 HTTP ${uploadRes.statusCode}`))
+						}
+					},
+					fail: reject
+				})
+			},
+			fail: reject
+		})
+		// #endif
+
+		// #ifdef APP-PLUS
+		const bitmap = new plus.nativeObj.Bitmap('castlove_laser_export')
+		bitmap.loadBase64Data(base64Data, () => {
+			const tempFilePath = `_doc/${fileName}`
+			bitmap.save(tempFilePath, {}, () => {
+				bitmap.clear()
+				uni.uploadFile({
+					url: ossData.host,
+					filePath: tempFilePath,
+					name: 'file',
+					formData: {
+						key: ossData.dir + fileName,
+						policy: ossData.policy,
+						success_action_status: '200',
+						'x-oss-credential': ossData.x_oss_credential,
+						'x-oss-date': ossData.x_oss_date,
+						'x-oss-security-token': ossData.security_token,
+						'x-oss-signature': ossData.signature,
+						'x-oss-signature-version': ossData.x_oss_signature_version
+					},
+					success: (uploadRes) => {
+						if (uploadRes.statusCode === 200 || uploadRes.statusCode === 204) {
+							resolve(`${ossData.host}/${ossData.dir}${fileName}`)
+						} else {
+							reject(new Error(`上传失败 HTTP ${uploadRes.statusCode}`))
+						}
+					},
+					fail: reject
+				})
+			}, () => {
+				bitmap.clear()
+				reject(new Error('保存临时文件失败'))
+			})
+		}, () => {
+			bitmap.clear()
+			reject(new Error('加载导出图失败'))
+		})
+		// #endif
+	})
+}
+
+/**
+ * @param {string} imageDataUrl 导出后的 data URL
+ * @param {object} entry create 页写入的 CASTLOVE_LASER_ENTRY_KEY 解析结果
+ */
+export async function submitCastloveAfterLaserExport(imageDataUrl, entry) {
+	if (!entry || !imageDataUrl) {
+		throw new Error('缺少铸爱表单或导出图')
+	}
+	const {
+		nftInfo,
+		materialTypes,
+		materialTypeIndex,
+		pageName,
+		uploadedImage,
+		uploadedImageBase64
+	} = entry
+	const signRes = await getOssSignatureApi('asset')
+	if (!signRes || signRes.code !== 200 || !signRes.data) {
+		throw new Error((signRes && signRes.message) || '获取签名失败')
+	}
+	const orderId = signRes.data.order_id || ''
+	const imageUrl = await uploadDataUrlToOss(imageDataUrl, signRes.data)
+	const snap = buildCastloveFormSnapshot({
+		nftInfo,
+		materialTypes,
+		materialTypeIndex,
+		pageName,
+		uploadedImage: uploadedImage || '',
+		uploadedImageBase64: uploadedImageBase64 || ''
+	})
+	const orderData = {
+		order_id: orderId,
+		name: snap.name,
+		material_url: imageUrl,
+		description: snap.description,
+		grade: snap.grade,
+		tags: snap.tags,
+		material_type: snap.material_type,
+		info: snap.info
+	}
+	const response = await createMintOrderApi(orderData)
+	if (!response || response.code !== 200) {
+		throw new Error((response && response.message) || '创建订单失败')
+	}
+	const nftData = {
+		image: imageUrl,
+		name: snap.name,
+		description: snap.description,
+		material_type: snap.material_type,
+		tags: snap.tags,
+		order_id: orderId,
+		info: snap.info,
+		event: snap.info
+	}
+	uni.setStorageSync('temp_nft_data', JSON.stringify(nftData))
+	return { imageUrl, orderId }
+}
diff --git a/frontend/utils/castloveMintForm.js b/frontend/utils/castloveMintForm.js
new file mode 100644
index 0000000..94ddfcc
--- /dev/null
+++ b/frontend/utils/castloveMintForm.js
@@ -0,0 +1,138 @@
+/** 铸爱 — 与网关 CreateMintOrderRequestDTO 对齐的本地表单快照（见 gateway/dto/asset_dto.go） */
+
+export const CRAFT_LENTICULAR_CN = '光栅卡'
+/** 工艺名：与 craft-select 卡片「镭射卡」一致 */
+export const CRAFT_LASER_CARD_CN = '镭射卡'
+/** 工艺标签：写入 tags[]，便于检索与后端扩展 */
+export const CRAFT_TAG_LENTICULAR = 'craft:lenticular'
+
+const defaultBgBase =
+	'radial-gradient(ellipse at 50% 40%, #1a0a3b 0%, #0a0418 55%, #000 100%)'
+const defaultBgMid =
+	'radial-gradient(ellipse 38% 28% at 50% 45%, rgba(255,212,255,0.9) 0%, rgba(183,109,255,0.55) 50%, rgba(26,10,59,0) 100%)'
+
+export function defaultLenticularDots() {
+	return [
+		{ x: 18, y: 22, r: 1.4 },
+		{ x: 78, y: 30, r: 1.6 },
+		{ x: 28, y: 72, r: 1.3 },
+		{ x: 86, y: 78, r: 1.2 },
+		{ x: 58, y: 12, r: 1.1 },
+		{ x: 8, y: 50, r: 1.0 },
+		{ x: 92, y: 50, r: 1.2 },
+		{ x: 50, y: 88, r: 1.1 },
+	]
+}
+
+/** 进入光栅工作室前写入的临时数据（create → lenticular-studio） */
+export const LENTICULAR_STUDIO_STORAGE_KEY = 'lenticular_studio_payload'
+
+/** 单图工艺：create → 镭射工坊（Laser-Card 页）入口载荷 */
+export const CASTLOVE_LASER_ENTRY_KEY = 'castlove_laser_entry_payload'
+
+/**
+ * 仅背景 + 主体两图层（无高光层），与光栅卡工作室一致
+ * @param {string} bgSrc 背景图本地路径或 URL
+ * @param {string} subjectSrc 主体图本地路径或 URL
+ */
+export function buildLenticularLayersTwo(bgSrc, subjectSrc) {
+	return [
+		{
+			id: 'base',
+			label: '背景',
+			depth: 0,
+			opacity: 1,
+			blendMode: 'normal',
+			parallaxFactor: 0.35,
+			background: bgSrc ? undefined : defaultBgBase,
+			dots: bgSrc ? undefined : defaultLenticularDots(),
+			src: bgSrc || undefined,
+		},
+		{
+			id: 'mid',
+			label: '主体',
+			depth: 0.55,
+			opacity: 0.92,
+			blendMode: 'screen',
+			parallaxFactor: 0.7,
+			background: subjectSrc ? undefined : defaultBgMid,
+			src: subjectSrc || undefined,
+		},
+	]
+}
+
+/** 兼容旧预览：单图仅贴在主体层，仍带高光层 */
+export function buildLenticularLayers(uploadSrc) {
+	const mid = {
+		id: 'mid',
+		label: '主体',
+		depth: 0.55,
+		opacity: 0.92,
+		blendMode: 'screen',
+		parallaxFactor: 0.7,
+		background: uploadSrc ? undefined : defaultBgMid,
+		src: uploadSrc || undefined,
+	}
+	return [
+		{
+			id: 'base',
+			label: '背景',
+			depth: 0.0,
+			opacity: 1,
+			blendMode: 'normal',
+			parallaxFactor: 0.35,
+			background: defaultBgBase,
+			dots: defaultLenticularDots(),
+		},
+		mid,
+		{
+			id: 'fx',
+			label: '高光',
+			depth: 0.9,
+			opacity: 0.85,
+			blendMode: 'lighten',
+			parallaxFactor: 1.15,
+			background: 'transparent',
+			dots: [
+				{ x: 20, y: 16, r: 3, color: '#ffffff' },
+				{ x: 82, y: 22, r: 2.4, color: '#ffffff' },
+				{ x: 14, y: 78, r: 3.2, color: '#4cd7f6' },
+			],
+		},
+	]
+}
+
+/**
+ * 构建与 POST /api/v1/assets/mints 一致的字段子集 + 本地预览所需字段
+ * DTO: order_id, name, material_url, description, grade, tags, material_type, info
+ */
+export function buildCastloveFormSnapshot({
+	nftInfo,
+	materialTypes,
+	materialTypeIndex,
+	pageName,
+	uploadedImage,
+	uploadedImageBase64,
+}) {
+	const info = (nftInfo || '').trim()
+	const material_type = materialTypes[materialTypeIndex] || '粉丝自制'
+	const lines = info.split(/\n/).map((l) => l.trim()).filter(Boolean)
+	const name =
+		lines.length > 0
+			? lines[0].slice(0, 80)
+			: pageName === CRAFT_LENTICULAR_CN
+				? '光栅卡作品'
+				: pageName || '藏品'
+	const tags = pageName === CRAFT_LENTICULAR_CN ? [CRAFT_TAG_LENTICULAR] : []
+	return {
+		image: uploadedImage,
+		imageBase64: uploadedImageBase64,
+		info,
+		material_type,
+		name,
+		description: '',
+		tags,
+		craft_name: pageName || '',
+		grade: 0,
+	}
+}
diff --git a/frontend/utils/h5OssPostUrl.js b/frontend/utils/h5OssPostUrl.js
new file mode 100644
index 0000000..55e3d3e
--- /dev/null
+++ b/frontend/utils/h5OssPostUrl.js
@@ -0,0 +1,26 @@
+/**
+ * H5 本地开发：将 OSS Post 地址换为同源 /dev-oss-proxy，由 vite.config.js 中中间件转发到 OSS 桶根 POST /，
+ * 避免浏览器从 localhost / 局域网端口直连 *.aliyuncs.com 触发 CORS。
+ *
+ * 正式 H5 部署到业务域名时仍直连 ossData.host；若遇 CORS，请在 OSS 控制台配置 CORS 或使用与站点同域的反代。
+ *
+ * @param {string} ossHost 签名接口返回的 host，如 https://bucket.oss-cn-shanghai.aliyuncs.com
+ * @returns {string} 实际用于 fetch POST 的 URL（开发态为同源代理前缀）
+ */
+export function resolveH5OssPostUrl(ossHost) {
+	if (!ossHost || typeof location === 'undefined') {
+		return ossHost
+	}
+	const port = String(location.port || '')
+	const hn = location.hostname || ''
+	const devPortOk = ['5173', '5174', '8080', '9528'].includes(port)
+	const devHostOk =
+		hn === 'localhost' ||
+		hn === '127.0.0.1' ||
+		/^192\.168\./.test(hn) ||
+		/^10\./.test(hn)
+	if (devPortOk && devHostOk) {
+		return `${location.protocol}//${location.host}/dev-oss-proxy`
+	}
+	return ossHost
+}
diff --git a/frontend/utils/laser-card/aliyunPortraitUni.js b/frontend/utils/laser-card/aliyunPortraitUni.js
new file mode 100644
index 0000000..d01ddd8
--- /dev/null
+++ b/frontend/utils/laser-card/aliyunPortraitUni.js
@@ -0,0 +1,557 @@
+/**
+ * uni-app App 端可用：OSS Post/Put + 签名 GET URL；直连抠图默认 IVPD SegmentImage，另有 imageseg SegmentHDBody（POP，不依赖 ali-oss / Node http）
+ * 签名使用 Web Crypto（HMAC-SHA1），避免额外依赖 crypto-js；需安全上下文（localhost / HTTPS）且存在 globalThis.crypto.subtle。
+ */
+const _textEnc = typeof TextEncoder !== 'undefined' ? new TextEncoder() : null
+
+function utf8StringToBase64(str) {
+  if (_textEnc) {
+    const bytes = _textEnc.encode(str)
+    let bin = ''
+    for (let i = 0; i < bytes.byteLength; i++) {
+      bin += String.fromCharCode(bytes[i])
+    }
+    return btoa(bin)
+  }
+  return btoa(unescape(encodeURIComponent(str)))
+}
+
+async function hmacSha1Base64(message, secretKey) {
+  const subtle = globalThis.crypto && globalThis.crypto.subtle
+  if (!subtle || !_textEnc) {
+    throw new Error(
+      '当前环境无法计算 OSS/阿里云签名：需要支持 Web Crypto（请在 localhost 或 HTTPS 下打开，并确保非禁用 crypto.subtle 的 WebView）'
+    )
+  }
+  const key = await subtle.importKey(
+    'raw',
+    _textEnc.encode(secretKey),
+    { name: 'HMAC', hash: 'SHA-1' },
+    false,
+    ['sign']
+  )
+  const sig = await subtle.sign('HMAC', key, _textEnc.encode(message))
+  const bytes = new Uint8Array(sig)
+  let bin = ''
+  for (let i = 0; i < bytes.byteLength; i++) {
+    bin += String.fromCharCode(bytes[i])
+  }
+  return btoa(bin)
+}
+
+/** RAM 密钥常见复制问题：首尾空格、BOM、零宽字符、Windows 多余 \\r */
+function normalizeAccessKeyPart(s) {
+  return String(s || '')
+    .trim()
+    .replace(/^\uFEFF/, '')
+    .replace(/[\u200B-\u200D\uFEFF]/g, '')
+    .replace(/\r\n/g, '\n')
+    .replace(/\r/g, '')
+    .trim()
+}
+
+function percentEncode(str) {
+  if (str === undefined || str === null) {
+    return ''
+  }
+  return encodeURIComponent(String(str))
+    .replace(/!/g, '%21')
+    .replace(/'/g, '%27')
+    .replace(/\(/g, '%28')
+    .replace(/\)/g, '%29')
+    .replace(/\*/g, '%2A')
+}
+
+function pickHttpImageUrl(obj, depth = 0) {
+  if (!obj || depth > 10) return null
+  if (typeof obj === 'string' && /^https?:\/\//i.test(obj) && /\.(png|jpg|jpeg|webp)/i.test(obj)) {
+    return obj
+  }
+  if (typeof obj !== 'object') return null
+  for (const v of Object.values(obj)) {
+    const u = pickHttpImageUrl(v, depth + 1)
+    if (u) return u
+  }
+  return null
+}
+
+/** 递归查找 oss://bucket/object 形式 URI */
+function pickOssUriString(obj, depth = 0) {
+  if (!obj || depth > 10) return null
+  if (typeof obj === 'string' && /^oss:\/\//i.test(obj)) {
+    if (parseOssUri(obj)) {
+      return obj
+    }
+  }
+  if (typeof obj !== 'object') return null
+  for (const v of Object.values(obj)) {
+    const u = pickOssUriString(v, depth + 1)
+    if (u) return u
+  }
+  return null
+}
+
+function parseOssUri(uri) {
+  const s = String(uri || '').trim()
+  const m = /^oss:\/\/([^/]+)\/(.+)$/i.exec(s)
+  if (!m) return null
+  return { bucket: m[1], objectKey: m[2] }
+}
+
+/** PostObject 的目标地址（仅桶根、无 object 路径）；失败 errMsg 常只有这一串 URL */
+export function looksLikeBareOssEndpointUrl(s) {
+  const t = String(s || '').trim()
+  if (!/^https?:\/\/[^/\s]+\.oss-[a-z0-9-]+\.aliyuncs\.com\/?$/i.test(t)) {
+    return false
+  }
+  try {
+    const u = new URL(t)
+    if (!/^https?:$/i.test(u.protocol)) return false
+    const segs = u.pathname.split('/').filter(Boolean)
+    return segs.length === 0
+  } catch {
+    return true
+  }
+}
+
+/** 仅一行 OSS 根域名错误时，转成可操作的说明（依赖 manifest domainWhiteList） */
+export function humanizeIfBareOssUploadErr(msg) {
+  const t = String(msg || '').trim()
+  if (!looksLikeBareOssEndpointUrl(t)) {
+    return String(msg || '')
+  }
+  const hostOnly = t.replace(/^https?:\/\//i, '').replace(/\/$/, '')
+  return (
+    `OSS 上传失败（uni-app 常因未配置「域名白名单」拦截 uploadFile，控制台只显示请求 URL）。\n\n请在 manifest.json → app-plus → networkSecurity → domainWhiteList 中加入（注意 https）：\n• https://${hostOnly}\n• IVPD：https://ivpd.<地域>.aliyuncs.com（与 IMM_REGION 一致，如 cn-shanghai）\n以及抠图结果下载域名（若与上面不同）。\n保存后必须重新制作自定义调试基座再运行。\n\n原文：${t}`
+  )
+}
+
+/** 排除仅桶根域名、无对象路径的「伪 URL」（IMM 偶发只回 Host） */
+function isLikelyObjectHttpUrl(url) {
+  try {
+    const u = new URL(String(url).trim())
+    if (!/^https?:$/i.test(u.protocol)) {
+      return false
+    }
+    const parts = u.pathname.split('/').filter(Boolean)
+    return parts.length >= 1
+  } catch {
+    return false
+  }
+}
+
+function ossHost(bucket, ossRegionId) {
+  const r = ossRegionId.replace(/^oss-/, '')
+  return `${bucket}.oss-${r}.aliyuncs.com`
+}
+
+/** objectKey 含路径时用分段编码路径 */
+function ossObjectPath(objectKey) {
+  return objectKey
+    .split('/')
+    .map((seg) => encodeURIComponent(seg))
+    .join('/')
+}
+
+/** 私有读：签名 GET URL（与 Put 后给分割接口用的 URL 一致） */
+export async function ossPresignedObjectUrl({
+  bucket,
+  ossRegionId,
+  accessKeyId,
+  accessKeySecret,
+  securityToken,
+  objectKey,
+  expiresSec = 3600
+}) {
+  const ak = normalizeAccessKeyPart(accessKeyId)
+  const sk = normalizeAccessKeyPart(accessKeySecret)
+  const host = ossHost(bucket, ossRegionId)
+  const path = ossObjectPath(objectKey)
+  const resource = `/${bucket}/${objectKey}`
+  const expires = Math.floor(Date.now() / 1000) + expiresSec
+  const stringToSignGet = `GET\n\n\n${expires}\n${resource}`
+  const sigGet = await hmacSha1Base64(stringToSignGet, sk)
+  let qs = `OSSAccessKeyId=${percentEncode(ak)}&Expires=${expires}&Signature=${percentEncode(sigGet)}`
+  if (securityToken) {
+    qs += `&security-token=${percentEncode(securityToken)}`
+  }
+  return `https://${host}/${path}?${qs}`
+}
+
+/**
+ * PostObject + policy：用 uni.uploadFile 直传本地路径，不经 JS 读 ArrayBuffer（调试基座读图失败时的主路径）。
+ */
+export async function ossPostObjectFromLocalFilePath({
+  bucket,
+  ossRegionId,
+  accessKeyId,
+  accessKeySecret,
+  securityToken,
+  objectKey,
+  filePath
+}) {
+  const ak = normalizeAccessKeyPart(accessKeyId)
+  const sk = normalizeAccessKeyPart(accessKeySecret)
+  if (!ak || !sk) {
+    return Promise.reject(new Error('OSS 缺少 AccessKeyId 或 AccessKeySecret'))
+  }
+
+  const expiration = new Date(Date.now() + 55 * 60 * 1000).toISOString()
+  const conditions = [
+    ['content-length-range', 0, 52428800],
+    { bucket },
+    ['eq', '$key', objectKey]
+  ]
+  if (securityToken) {
+    conditions.push({ 'x-oss-security-token': securityToken })
+  }
+
+  const policyJson = JSON.stringify({ expiration, conditions })
+  const policyB64 = utf8StringToBase64(policyJson)
+  const signature = await hmacSha1Base64(policyB64, sk)
+
+  const host = ossHost(bucket, ossRegionId)
+  const url = `https://${host}/`
+
+  const formData = {
+    key: objectKey,
+    policy: policyB64,
+    OSSAccessKeyId: ak,
+    Signature: signature,
+    success_action_status: '200'
+  }
+  if (securityToken) {
+    formData['x-oss-security-token'] = securityToken
+  }
+
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url,
+      filePath,
+      name: 'file',
+      formData,
+      timeout: 180000,
+      success: (res) => {
+        const sc = res.statusCode
+        if (sc >= 200 && sc < 300) {
+          resolve()
+          return
+        }
+        const body = typeof res.data === 'string' ? res.data : JSON.stringify(res.data || '')
+        if (typeof body === 'string' && body.includes('SignatureDoesNotMatch')) {
+          reject(
+            new Error(
+              'OSS SignatureDoesNotMatch：AccessKeySecret 与当前 OSSAccessKeyId 不匹配，或密钥含隐形字符/换行。请到 RAM 用户页「创建 AccessKey」重新复制 Secret 写入 config/segmentApi.js；若曾泄露请删除旧密钥并轮换。'
+            )
+          )
+          return
+        }
+        reject(new Error(body || `OSS PostObject 失败 HTTP ${sc}`))
+      },
+      fail: (e) => {
+        const raw = e.errMsg || 'uploadFile 失败'
+        if (
+          looksLikeBareOssEndpointUrl(raw) ||
+          (/request:fail/i.test(raw) && /\.oss-[a-z0-9-]+\.aliyuncs\.com/i.test(raw))
+        ) {
+          reject(
+            new Error(
+              humanizeIfBareOssUploadErr(raw)
+            )
+          )
+          return
+        }
+        reject(new Error(raw))
+      }
+    })
+  })
+}
+
+function uniRequestRaw(options) {
+  const timeout = options.timeout != null ? options.timeout : 120000
+  return new Promise((resolve, reject) => {
+    uni.request({
+      ...options,
+      timeout,
+      success: (r) => {
+        if (r.statusCode >= 200 && r.statusCode < 300) {
+          resolve(r)
+        } else {
+          const msg =
+            (typeof r.data === 'string' ? r.data : '') ||
+            (r.data && r.data.Message) ||
+            `HTTP ${r.statusCode}`
+          reject(new Error(msg))
+        }
+      },
+      fail: (e) => reject(new Error(e.errMsg || '请求失败'))
+    })
+  })
+}
+
+/**
+ * PUT 上传后生成 OSS 签名 GET URL（私有 Bucket 时分割接口需可访问该 URL）
+ */
+export async function ossPutAndSignedGetUrl({
+  bucket,
+  ossRegionId,
+  accessKeyId,
+  accessKeySecret,
+  securityToken,
+  objectKey,
+  bodyBuffer,
+  contentType = 'image/jpeg'
+}) {
+  const ak = normalizeAccessKeyPart(accessKeyId)
+  const sk = normalizeAccessKeyPart(accessKeySecret)
+  if (!ak || !sk) {
+    throw new Error('OSS 签名缺少 AccessKeyId 或 AccessKeySecret')
+  }
+
+  const host = ossHost(bucket, ossRegionId)
+  const path = ossObjectPath(objectKey)
+  const urlPut = `https://${host}/${path}`
+
+  const dateGmt = new Date().toUTCString()
+  /**
+   * uni.request 会带 Date；若再发 x-oss-date，OSS 的 StringToSign 为：Date 行 + 规范头里的 x-oss-date（与错误 XML 一致），不能签成 Date 为空。
+   */
+  const ossHeaderPairs = []
+  ossHeaderPairs.push(['x-oss-date', dateGmt])
+  if (securityToken) {
+    ossHeaderPairs.push(['x-oss-security-token', securityToken])
+  }
+  ossHeaderPairs.sort((a, b) => a[0].localeCompare(b[0]))
+  const canonHeaders = ossHeaderPairs.map(([k, v]) => `${k}:${v}\n`).join('')
+
+  const resource = `/${bucket}/${objectKey}`
+  const stringToSignPut = `PUT\n\n${contentType}\n${dateGmt}\n${canonHeaders}${resource}`
+  const sigPut = await hmacSha1Base64(stringToSignPut, sk)
+
+  const headersPut = {
+    Date: dateGmt,
+    'Content-Type': contentType,
+    'x-oss-date': dateGmt,
+    Authorization: `OSS ${ak}:${sigPut}`
+  }
+  if (securityToken) {
+    headersPut['x-oss-security-token'] = securityToken
+  }
+
+  await uniRequestRaw({
+    url: urlPut,
+    method: 'PUT',
+    header: headersPut,
+    data: bodyBuffer,
+    /** 大图上传（Bitmap 兜底常为 PNG）易慢；超时后 fail 才会结束 loading */
+    timeout: 180000
+  })
+
+  return await ossPresignedObjectUrl({
+    bucket,
+    ossRegionId,
+    accessKeyId: ak,
+    accessKeySecret: sk,
+    securityToken,
+    objectKey,
+    expiresSec: 3600
+  })
+}
+
+/** IVPD 常见英文报错 → 中文说明（控制台需开通「智能视觉生产」等产品） */
+function mapIvpdUserMessage(raw) {
+  const s = String(raw || '')
+  if (/please\s+open\s+service/i.test(s)) {
+    return (
+      'IVPD（智能视觉生产）服务尚未开通：请用阿里云主账号或有权限的子账号登录控制台，搜索「智能视觉生产」或「视觉智能开放平台」，进入产品页点击「立即开通」后再试抠图。' +
+      (s.length <= 60 ? `（接口原文：${s}）` : '')
+    )
+  }
+  return s
+}
+
+/**
+ * 智能视觉生产 IVPD「通用分割 / 抠图」SegmentImage。
+ * Endpoint：ivpd.{region}.aliyuncs.com，Version：2019-06-25，参数 Url 为可访问的图片 HTTP(S) URL（如 OSS 签名 GET）。
+ */
+export async function rpcIvpdSegmentImage({
+  imageUrl,
+  accessKeyId,
+  accessKeySecret,
+  securityToken,
+  regionId
+}) {
+  const ak = normalizeAccessKeyPart(accessKeyId)
+  const sk = normalizeAccessKeyPart(accessKeySecret)
+  const u = String(imageUrl || '').trim()
+  if (!/^https?:\/\//i.test(u)) {
+    throw new Error('IVPD SegmentImage 需要可访问的 HTTP(S) 图片 URL（一般为 OSS 私有桶签名 GET）')
+  }
+
+  const params = {
+    Format: 'JSON',
+    Version: '2019-06-25',
+    AccessKeyId: ak,
+    SignatureMethod: 'HMAC-SHA1',
+    Timestamp: new Date().toISOString().replace(/\.\d{3}Z$/, 'Z'),
+    SignatureVersion: '1.0',
+    SignatureNonce: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    Action: 'SegmentImage',
+    RegionId: regionId,
+    Url: u
+  }
+  if (securityToken) {
+    params.SecurityToken = securityToken
+  }
+
+  const sortedKeys = Object.keys(params).sort()
+  const canonicalized = sortedKeys.map((k) => `${percentEncode(k)}=${percentEncode(params[k])}`).join('&')
+  const stringToSign = `POST&${percentEncode('/')}&${percentEncode(canonicalized)}`
+  const signature = await hmacSha1Base64(stringToSign, `${sk}&`)
+
+  const body = `${canonicalized}&Signature=${percentEncode(signature)}`
+  const host = `ivpd.${regionId}.aliyuncs.com`
+
+  let res
+  try {
+    res = await uniRequestRaw({
+      url: `https://${host}/`,
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      data: body,
+      timeout: 120000
+    })
+  } catch (e) {
+    const em = e && e.message ? String(e.message) : ''
+    if (/please\s+open\s+service/i.test(em)) {
+      throw new Error(mapIvpdUserMessage(em))
+    }
+    try {
+      const j = JSON.parse(em)
+      const mm = j.Message || j.message || ''
+      if (/please\s+open\s+service/i.test(String(mm))) {
+        throw new Error(mapIvpdUserMessage(mm))
+      }
+    } catch (inner) {
+      if (inner && inner.message && /IVPD（/.test(inner.message)) {
+        throw inner
+      }
+    }
+    throw e
+  }
+
+  let data = res.data
+  if (typeof data === 'string') {
+    try {
+      data = JSON.parse(data)
+    } catch (e) {
+      throw new Error((data && data.slice(0, 240)) || 'IVPD 返回非 JSON')
+    }
+  }
+
+  const flat = data
+  const bizCode = flat.code ?? flat.Code
+  const bizMsg = flat.message ?? flat.Message
+  if (bizCode != null && String(bizCode) !== '0') {
+    throw new Error(mapIvpdUserMessage(bizMsg ? `${bizCode}: ${bizMsg}` : String(bizCode)))
+  }
+
+  const aliPopMsg = flat.Message || flat.Code
+  if (typeof aliPopMsg === 'string' && /please\s+open\s+service/i.test(aliPopMsg)) {
+    throw new Error(mapIvpdUserMessage(aliPopMsg))
+  }
+
+  const result = flat.result ?? flat.Result
+  const outUrl =
+    (result && (result.url || result.URL)) ||
+    flat.url ||
+    flat.URL ||
+    pickHttpImageUrl(flat)
+
+  if (outUrl && isLikelyObjectHttpUrl(outUrl)) {
+    return outUrl
+  }
+
+  throw new Error(
+    bizMsg
+      ? mapIvpdUserMessage(bizMsg)
+      : `IVPD 未返回有效结果图 URL。摘录：${JSON.stringify(flat).slice(0, 600)}`
+  )
+}
+
+/** 人像高清抠图（imageseg SegmentHDBody）；自建代理 server/index.js 等可使用。 */
+export async function rpcSegmentHDBody({
+  imageURL,
+  accessKeyId,
+  accessKeySecret,
+  securityToken,
+  regionId
+}) {
+  const ak = normalizeAccessKeyPart(accessKeyId)
+  const sk = normalizeAccessKeyPart(accessKeySecret)
+  const params = {
+    Format: 'JSON',
+    Version: '2019-12-30',
+    AccessKeyId: ak,
+    SignatureMethod: 'HMAC-SHA1',
+    Timestamp: new Date().toISOString().replace(/\.\d{3}Z$/, 'Z'),
+    SignatureVersion: '1.0',
+    SignatureNonce: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    Action: 'SegmentHDBody',
+    ImageURL: imageURL
+  }
+  if (securityToken) {
+    params.SecurityToken = securityToken
+  }
+
+  const sortedKeys = Object.keys(params).sort()
+  const canonicalized = sortedKeys.map((k) => `${percentEncode(k)}=${percentEncode(params[k])}`).join('&')
+  const stringToSign = `POST&${percentEncode('/')}&${percentEncode(canonicalized)}`
+  const signature = await hmacSha1Base64(stringToSign, `${sk}&`)
+
+  const body = `${canonicalized}&Signature=${percentEncode(signature)}`
+  const host = `imageseg.${regionId}.aliyuncs.com`
+
+  const res = await uniRequestRaw({
+    url: `https://${host}/`,
+    method: 'POST',
+    header: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data: body,
+    timeout: 90000
+  })
+
+  let data = res.data
+  if (typeof data === 'string') {
+    try {
+      data = JSON.parse(data)
+    } catch (e) {
+      throw new Error((data && data.slice(0, 240)) || '分割接口返回非 JSON')
+    }
+  }
+
+  let flat = data
+  if (flat && typeof flat.Data === 'string') {
+    try {
+      const inner = JSON.parse(flat.Data)
+      flat = { ...flat, ...inner }
+    } catch (_) {
+      /* ignore */
+    }
+  }
+
+  const outUrl =
+    flat?.ImageURL ||
+    flat?.imageURL ||
+    flat?.Data?.ImageURL ||
+    pickHttpImageUrl(flat)
+
+  if (!outUrl) {
+    const msg = (flat && (flat.Message || flat.Code)) || JSON.stringify(flat).slice(0, 200)
+    throw new Error(msg || '分割接口未返回结果图 URL')
+  }
+  return outUrl
+}
diff --git a/frontend/utils/laser-card/segmentApi.js b/frontend/utils/laser-card/segmentApi.js
new file mode 100644
index 0000000..e53436d
--- /dev/null
+++ b/frontend/utils/laser-card/segmentApi.js
@@ -0,0 +1,48 @@
+/**
+ * 智能抠图：方案一（OSS + IVPD）与方案二（HTTP 后端，契约见 server/index.js）
+ *
+ * SEGMENT_TRANSPORT：auto | backend | direct（详见 segmentApi.example.js）
+ *
+ * 【方案一 · 推荐生产】ALIYUN_STS_URL：仅下发临时密钥的 HTTPS（FC 等），不写主账号 AK。
+ * 【方案一 · 仅开发】ALIYUN_ACCESS_KEY_ID / ALIYUN_ACCESS_KEY_SECRET：直配 RAM 子账号 AK（有泄露风险，上架前务必删除并改用 STS）。
+ */
+
+/** 仅开发：RAM 子账号 AccessKeyId（勿提交仓库、勿用于正式包） */
+export const ALIYUN_ACCESS_KEY_ID = ''
+
+/** 仅开发：RAM 子账号 AccessKeySecret */
+export const ALIYUN_ACCESS_KEY_SECRET = ''
+
+/** 可选：使用 STS 临时凭证时填写 SecurityToken；长期 AK 一般留空 */
+export const ALIYUN_SECURITY_TOKEN = ''
+
+/** 生产：STS 获取地址（GET，返回 JSON）。若上面已填 AK/SK，则不再请求此地址 */
+export const ALIYUN_STS_URL = ''
+
+/** OSS Bucket 名（不含域名） */
+export const OSS_BUCKET = ''
+
+/** OSS region，如 oss-cn-shanghai */
+export const OSS_REGION = 'oss-cn-shanghai'
+
+/** 上传目录前缀 */
+export const OSS_KEY_PREFIX = 'laser-card-segment/tmp/'
+
+/** imageseg 地域，如 cn-shanghai */
+export const IMAGESEG_REGION = 'cn-shanghai'
+
+/** 预留；当前直连抠图走 IVPD，不使用 IMM 项目名称 */
+export const IMM_PROJECT_NAME = 'laser-card'
+
+/** IVPD 与 OSS 同地域 id，如 cn-shanghai */
+export const IMM_REGION = 'cn-shanghai'
+
+/**
+ * auto | backend | direct — 详见 segmentApi.example.js 注释；接后端时改为 backend 并填 SEGMENT_API_BASE。
+ */
+export const SEGMENT_TRANSPORT = 'auto'
+
+/** 方案二：自建代理根地址（无末尾斜杠）；与方案一互斥：有 OSS 且（AK 或 STS）时不会走代理 */
+export const SEGMENT_API_BASE = ''
+
+export const SEGMENT_API_TOKEN = ''
diff --git a/frontend/utils/laser-card/segmentationCloud.js b/frontend/utils/laser-card/segmentationCloud.js
new file mode 100644
index 0000000..b2306d1
--- /dev/null
+++ b/frontend/utils/laser-card/segmentationCloud.js
@@ -0,0 +1,320 @@
+import {
+  ALIYUN_ACCESS_KEY_ID,
+  ALIYUN_ACCESS_KEY_SECRET,
+  ALIYUN_SECURITY_TOKEN,
+  ALIYUN_STS_URL,
+  IMM_REGION,
+  OSS_BUCKET,
+  OSS_KEY_PREFIX,
+  OSS_REGION,
+  SEGMENT_API_BASE,
+  SEGMENT_API_TOKEN,
+  SEGMENT_TRANSPORT
+} from './segmentApi.js'
+import {
+  ossPostObjectFromLocalFilePath,
+  ossPresignedObjectUrl,
+  rpcIvpdSegmentImage,
+  looksLikeBareOssEndpointUrl
+} from './aliyunPortraitUni.js'
+
+function uniRequest(options) {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      ...options,
+      success: (r) => {
+        if (r.statusCode >= 200 && r.statusCode < 300) {
+          resolve(r)
+        } else {
+          const msg =
+            (typeof r.data === 'object' && r.data && (r.data.Message || r.data.message)) ||
+            (typeof r.data === 'string' ? r.data : '') ||
+            `HTTP ${r.statusCode}`
+          reject(new Error(msg))
+        }
+      },
+      fail: (e) => reject(new Error(e.errMsg || '网络请求失败'))
+    })
+  })
+}
+
+/** 内层 Promise 长期无回调时强制失败（避免一直「正在识别」） */
+function raceWithTimeout(promise, ms, errMsg) {
+  return new Promise((resolve, reject) => {
+    const t = setTimeout(() => reject(new Error(errMsg)), ms)
+    Promise.resolve(promise).then(
+      (v) => {
+        clearTimeout(t)
+        resolve(v)
+      },
+      (e) => {
+        clearTimeout(t)
+        reject(e)
+      }
+    )
+  })
+}
+
+function normalizeStsPayload(raw) {
+  if (!raw || typeof raw !== 'object') {
+    return null
+  }
+  if (raw.Credentials) {
+    const c = raw.Credentials
+    return {
+      accessKeyId: c.AccessKeyId,
+      accessKeySecret: c.AccessKeySecret,
+      securityToken: c.SecurityToken || undefined,
+      expiration: c.Expiration
+    }
+  }
+  if (raw.accessKeyId && raw.accessKeySecret) {
+    return {
+      accessKeyId: raw.accessKeyId,
+      accessKeySecret: raw.accessKeySecret,
+      securityToken: raw.securityToken || undefined,
+      expiration: raw.expiration
+    }
+  }
+  return null
+}
+
+async function fetchStsCredentials() {
+  const url = (ALIYUN_STS_URL || '').trim()
+  if (!url) {
+    return null
+  }
+  const res = await uniRequest({ url, method: 'GET', timeout: 30000 })
+  const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
+  const cred = normalizeStsPayload(data)
+  if (!cred || !cred.accessKeyId) {
+    throw new Error('STS 地址返回格式不正确（需 Credentials 或 accessKeyId/accessKeySecret）')
+  }
+  return cred
+}
+
+/** 开发直配 AK，或 STS 拉取 */
+function getCredentialsFromConfig() {
+  const id = (ALIYUN_ACCESS_KEY_ID || '').trim()
+  const sec = (ALIYUN_ACCESS_KEY_SECRET || '').trim()
+  const token = (ALIYUN_SECURITY_TOKEN || '').trim()
+  if (id && sec) {
+    return {
+      accessKeyId: id,
+      accessKeySecret: sec,
+      securityToken: token || undefined
+    }
+  }
+  return null
+}
+
+async function resolveCredentials() {
+  const fromFile = getCredentialsFromConfig()
+  if (fromFile) {
+    return fromFile
+  }
+  const url = (ALIYUN_STS_URL || '').trim()
+  if (!url) {
+    throw new Error('请配置 ALIYUN_ACCESS_KEY_ID/SECRET（开发）或 ALIYUN_STS_URL（生产）')
+  }
+  return fetchStsCredentials()
+}
+
+function canUseDirectAliyunClient() {
+  const bucket = (OSS_BUCKET || '').trim()
+  const hasAk =
+    !!(ALIYUN_ACCESS_KEY_ID || '').trim() && !!(ALIYUN_ACCESS_KEY_SECRET || '').trim()
+  const hasStsUrl = !!(ALIYUN_STS_URL || '').trim()
+  return !!(bucket && (hasAk || hasStsUrl))
+}
+
+/**
+ * @returns {'direct' | 'backend'}
+ */
+function resolveSegmentTransport() {
+  const raw = String(SEGMENT_TRANSPORT == null ? 'auto' : SEGMENT_TRANSPORT)
+    .trim()
+    .toLowerCase()
+  if (raw === 'backend' || raw === 'proxy' || raw === 'server') {
+    return 'backend'
+  }
+  if (raw === 'direct' || raw === 'aliyun' || raw === 'client' || raw === 'oss') {
+    if (!canUseDirectAliyunClient()) {
+      throw new Error(
+        'SEGMENT_TRANSPORT 为 direct/aliyun/client/oss 时需配置 OSS_BUCKET 以及（ALIYUN_ACCESS_KEY_ID+SECRET 或 ALIYUN_STS_URL）'
+      )
+    }
+    return 'direct'
+  }
+  return canUseDirectAliyunClient() ? 'direct' : 'backend'
+}
+
+/**
+ * 凭证 → OSS PostObject → 签名 GET URL → IVPD SegmentImage（Url）→ downloadFile
+ */
+async function segmentViaOssIvpd(filePath) {
+  const bucket = (OSS_BUCKET || '').trim()
+  if (!bucket) {
+    throw new Error('请在 config/segmentApi.js 配置 OSS_BUCKET')
+  }
+
+  const cred = await resolveCredentials()
+
+  const ext = /\.png$/i.test(String(filePath || '')) ? 'png' : 'jpg'
+  const base = `${Date.now()}_${Math.random().toString(36).slice(2, 10)}`
+  const prefix = OSS_KEY_PREFIX.replace(/^\/+/, '')
+  const objectKeyIn = `${prefix}${base}.${ext}`
+
+  await ossPostObjectFromLocalFilePath({
+    bucket,
+    ossRegionId: OSS_REGION,
+    accessKeyId: cred.accessKeyId,
+    accessKeySecret: cred.accessKeySecret,
+    securityToken: cred.securityToken,
+    objectKey: objectKeyIn,
+    filePath
+  })
+
+  const imageUrlForSeg = await ossPresignedObjectUrl({
+    bucket,
+    ossRegionId: OSS_REGION,
+    accessKeyId: cred.accessKeyId,
+    accessKeySecret: cred.accessKeySecret,
+    securityToken: cred.securityToken,
+    objectKey: objectKeyIn,
+    expiresSec: 3600
+  })
+
+  const ivpdRegion = (IMM_REGION || '').trim() || String(OSS_REGION || '').replace(/^oss-/i, '')
+
+  const outUrl = await rpcIvpdSegmentImage({
+    imageUrl: imageUrlForSeg,
+    accessKeyId: cred.accessKeyId,
+    accessKeySecret: cred.accessKeySecret,
+    securityToken: cred.securityToken,
+    regionId: ivpdRegion
+  })
+
+  return raceWithTimeout(
+    new Promise((res, rej) => {
+      uni.downloadFile({
+        url: outUrl,
+        timeout: 120000,
+        success: (dr) => {
+          if (dr.statusCode !== 200 || !dr.tempFilePath) {
+            rej(new Error('下载分割结果失败'))
+            return
+          }
+          res({ kind: 'cutout', localPath: dr.tempFilePath })
+        },
+        fail: (e) => {
+          const raw = e.errMsg || '未知错误'
+          const needDomainHint =
+            looksLikeBareOssEndpointUrl(raw) ||
+            (/^https?:\/\//i.test(String(raw).trim()) && String(raw).includes('aliyuncs'))
+          const extra = needDomainHint
+            ? '（若仅为 URL：请在 manifest → networkSecurity.domainWhiteList 中加入下载域名并重编译。）'
+            : ''
+          rej(new Error(`下载分割结果失败：${raw}${extra}`))
+        }
+      })
+    }),
+    125000,
+    '下载分割结果超时'
+  )
+}
+
+/**
+ * 方案二：自建 Node 代理（server/index.js）
+ */
+function segmentViaProxy(filePath) {
+  const base = (SEGMENT_API_BASE || '').trim().replace(/\/+$/, '')
+  if (!base) {
+    return Promise.reject(
+      new Error(
+        '缺少 SEGMENT_API_BASE：HTTP/后端抠图需要填写根地址（POST {BASE}/segment）。若使用客户端直连阿里云，请配置 OSS_BUCKET 与 AK 或 STS，并将 SEGMENT_TRANSPORT 设为 auto 或 direct。'
+      )
+    )
+  }
+  const url = `${base}/segment`
+
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url,
+      filePath,
+      name: 'image',
+      timeout: 120000,
+      header: SEGMENT_API_TOKEN ? { 'x-laser-token': SEGMENT_API_TOKEN } : {},
+      success: (res) => {
+        if (res.statusCode !== 200) {
+          reject(new Error(typeof res.data === 'string' ? res.data : `HTTP ${res.statusCode}`))
+          return
+        }
+        let body
+        try {
+          body = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
+        } catch (e) {
+          reject(new Error('代理返回非 JSON'))
+          return
+        }
+        if (!body || body.ok !== true || !body.imageUrl) {
+          reject(new Error((body && body.error) || '抠图失败'))
+          return
+        }
+        uni.downloadFile({
+          url: body.imageUrl,
+          timeout: 120000,
+          success: (dr) => {
+            if (dr.statusCode !== 200 || !dr.tempFilePath) {
+              reject(new Error('下载分割结果失败'))
+              return
+            }
+            resolve({ kind: 'cutout', localPath: dr.tempFilePath })
+          },
+          fail: (e) => reject(new Error(e.errMsg || 'downloadFile 失败'))
+        })
+      },
+      fail: (e) => reject(new Error(e.errMsg || 'uploadFile 失败'))
+    })
+  })
+}
+
+/** 防止某一步网络/原生无回调导致一直转圈 */
+function withTimeout(promise, ms, message) {
+  let timer = null
+  return new Promise((resolve, reject) => {
+    timer = setTimeout(() => {
+      timer = null
+      reject(new Error(message))
+    }, ms)
+    promise.then(
+      (v) => {
+        if (timer != null) {
+          clearTimeout(timer)
+        }
+        resolve(v)
+      },
+      (e) => {
+        if (timer != null) {
+          clearTimeout(timer)
+        }
+        reject(e)
+      }
+    )
+  })
+}
+
+/**
+ * 上传本地图并获取抠图结果本地路径。
+ * 链路由 config/segmentApi.js 的 SEGMENT_TRANSPORT 决定：direct=客户端 OSS + IVPD SegmentImage；backend=HTTP 后端（契约同 server/index.js）；auto=能直连则直连否则走后端。
+ */
+export function segmentPortraitToLocal(filePath) {
+  const transport = resolveSegmentTransport()
+  const inner =
+    transport === 'direct' ? segmentViaOssIvpd(filePath) : segmentViaProxy(filePath)
+  return withTimeout(
+    inner,
+    240000,
+    '智能抠图超时：请检查手机网络、OSS、IVPD 地域（IMM_REGION，如 cn-shanghai）、RAM 权限及 manifest 网络权限'
+  )
+}
diff --git a/frontend/utils/lenticular-engine.js b/frontend/utils/lenticular-engine.js
new file mode 100644
index 0000000..60caddc
--- /dev/null
+++ b/frontend/utils/lenticular-engine.js
@@ -0,0 +1,256 @@
+/**
+ * 光栅叠化引擎（自 Raster-Card-L 移植为纯 JS，无 DOM 依赖）
+ */
+
+export const PREV_LAYER_GHOST_MIN = 0.065
+
+const NON_DOMINANT_RESIDUAL_MIN = 0.055
+const PARALLAX_UNIFY_GAP_LO = 0.065
+const PARALLAX_UNIFY_GAP_HI = 0.2
+const OFFSET_X_EMA_BASE = 0.16
+const OFFSET_X_EMA_STAB_SCALE = 0.26
+const PARALLAX_BLEND_T_EMA_BASE = 0.14
+const PARALLAX_BLEND_T_EMA_STAB_SCALE = 0.24
+
+export const DEFAULT_PHYSICS = {
+	tiltSensitivity: 72,
+	transitionSmoothness: 66,
+	parallaxDepth: 0,
+	gyroSimEnabled: true,
+	backgroundAnglePercent: 30,
+	angleStability: 88,
+	lenticularPitchPx: 16,
+	/** 1 = 默认；0 = 关闭 displayGamma 近零软衰减（硬件倾斜起步更跟手） */
+	sensorDeadzoneStrength: 1,
+}
+
+function lerp(a, b, t) {
+	return a + (b - a) * t
+}
+
+function clamp(v, min, max) {
+	return Math.max(min, Math.min(max, v))
+}
+
+function smoothstep(edge0, edge1, x) {
+	const t = clamp((x - edge0) / (edge1 - edge0), 0, 1)
+	return t * t * (3 - 2 * t)
+}
+
+function softAttenuateNearZero(g, db) {
+	if (db <= 1e-9) return g
+	const a = Math.abs(g)
+	if (a >= db) return g
+	const k = smoothstep(0, db, a)
+	return (g >= 0 ? 1 : -1) * a * k
+}
+
+export class LenticularEngine {
+	constructor(physics) {
+		this.layers = []
+		this.physics = { ...physics }
+		this.smoothedSensor = { gamma: 0, beta: 0, timestamp: 0 }
+		this.displayGamma = 0
+		this.layerOffsetXSmoothed = new Map()
+		this.parallaxBlendTSmoothed = 0
+		this.renderState = {
+			layerOffsets: new Map(),
+			layerOpacities: new Map(),
+			stripePhaseShift: 0,
+			stripShares: [1 / 3, 1 / 3, 1 / 3],
+			lenticularPitchPx: 14,
+			prevLayerGhost: null,
+		}
+	}
+
+	setLayers(layers) {
+		this.layers = [...layers]
+		this.layerOffsetXSmoothed.clear()
+		this.parallaxBlendTSmoothed = 0
+		for (const layer of this.layers) {
+			this.renderState.layerOffsets.set(layer.id, { x: 0, y: 0 })
+			this.renderState.layerOpacities.set(layer.id, layer.opacity)
+		}
+	}
+
+	updatePhysics(config) {
+		Object.assign(this.physics, config)
+	}
+
+	getPhysics() {
+		return { ...this.physics }
+	}
+
+	feedSensor(raw) {
+		const alpha = this.calcSmoothingAlpha()
+		this.smoothedSensor = {
+			gamma: lerp(this.smoothedSensor.gamma, raw.gamma, alpha),
+			beta: 0,
+			timestamp: raw.timestamp,
+		}
+		this.updateDisplayStable()
+		return this.computeRenderState()
+	}
+
+	feedSimulatedTilt(normalizedX, _normalizedY) {
+		return this.feedSensor({
+			gamma: clamp(normalizedX, -1, 1),
+			beta: 0,
+			timestamp: Date.now(),
+		})
+	}
+
+	computeRenderState() {
+		const sensitivity = this.physics.tiltSensitivity / 100
+		const maxDisplacement = this.physics.parallaxDepth
+		const gamma = this.displayGamma
+		const N = this.layers.length
+
+		const gPick = clamp(gamma * (0.44 + sensitivity * 0.52), -1, 1)
+		const u = (gPick + 1) / 2
+
+		const stability = this.physics.angleStability / 100
+		const smooth = this.physics.transitionSmoothness / 100
+		const blendBase = 0.04 + smooth * 0.13 + stability * 0.15
+
+		const shares = this.computeStripShares(N)
+		const centers = []
+		let cum = 0
+		for (let i = 0; i < N; i++) {
+			centers.push(cum + shares[i] / 2)
+			cum += shares[i]
+		}
+
+		const rawWeights = []
+		for (let i = 0; i < N; i++) {
+			const half = shares[i] / 2 + blendBase
+			const d = Math.abs(u - centers[i])
+			rawWeights.push(Math.max(0, 1 - d / half))
+		}
+		const sumW = rawWeights.reduce((a, b) => a + b, 0) || 1
+
+		const smoothedW = []
+		for (let i = 0; i < N; i++) {
+			let weight = rawWeights[i] / sumW
+			weight = weight * weight * (3 - 2 * weight)
+			smoothedW.push(weight)
+		}
+
+		let dominant = 0
+		let bestScore = -1
+		for (let i = 0; i < N; i++) {
+			const layer = this.layers[i]
+			const score = layer.opacity * smoothedW[i]
+			if (score > bestScore) {
+				bestScore = score
+				dominant = i
+			}
+		}
+
+		this.renderState.prevLayerGhost = null
+
+		const parallaxScale = 0.42
+		const sortedW = [...smoothedW].sort((a, b) => b - a)
+		const weightGap = N >= 2 ? sortedW[0] - sortedW[1] : 1
+		const parallaxLayerBlendTRaw = smoothstep(PARALLAX_UNIFY_GAP_LO, PARALLAX_UNIFY_GAP_HI, weightGap)
+		const stabForEma = clamp(stability, 0, 1)
+		const blendTEmaMix = PARALLAX_BLEND_T_EMA_BASE + stabForEma * PARALLAX_BLEND_T_EMA_STAB_SCALE
+		this.parallaxBlendTSmoothed = lerp(this.parallaxBlendTSmoothed, parallaxLayerBlendTRaw, blendTEmaMix)
+		const parallaxLayerBlendT = this.parallaxBlendTSmoothed
+
+		const swSum = smoothedW.reduce((a, b) => a + b, 0) || 1
+		let unifiedParallaxFactor = 0
+		for (let i = 0; i < N; i++) {
+			unifiedParallaxFactor += (smoothedW[i] / swSum) * this.layers[i].parallaxFactor
+		}
+		const unifiedEffective = maxDisplacement * sensitivity * unifiedParallaxFactor * parallaxScale
+		const unifiedOffsetX = gamma * unifiedEffective
+
+		for (let i = 0; i < N; i++) {
+			const layer = this.layers[i]
+
+			const specificEffective = maxDisplacement * sensitivity * layer.parallaxFactor * parallaxScale
+			const specificOffsetX = gamma * specificEffective
+			const offsetXRaw = lerp(unifiedOffsetX, specificOffsetX, parallaxLayerBlendT)
+			const offsetEmaMix = OFFSET_X_EMA_BASE + stabForEma * OFFSET_X_EMA_STAB_SCALE
+			const prevX = this.layerOffsetXSmoothed.get(layer.id)
+			const offsetX = prevX === undefined ? offsetXRaw : lerp(prevX, offsetXRaw, offsetEmaMix)
+			this.layerOffsetXSmoothed.set(layer.id, offsetX)
+			this.renderState.layerOffsets.set(layer.id, { x: offsetX, y: 0 })
+
+			const weight = smoothedW[i]
+			const isAnchor = i === 0
+			const floor = isAnchor && N > 1 ? 0.18 : 0
+			const finalOpacity = clamp(Math.max(floor, layer.opacity * weight), 0, 1)
+			this.renderState.layerOpacities.set(layer.id, finalOpacity)
+		}
+
+		if (dominant >= 1) {
+			const prev = this.layers[dominant - 1]
+			const minGhost = PREV_LAYER_GHOST_MIN * prev.opacity
+			const cur = this.renderState.layerOpacities.get(prev.id) != null ? this.renderState.layerOpacities.get(prev.id) : 0
+			const boosted = clamp(Math.max(cur, minGhost), 0, 1)
+			this.renderState.layerOpacities.set(prev.id, boosted)
+			this.renderState.prevLayerGhost = { layerId: prev.id, alpha: minGhost }
+		}
+
+		if (N >= 2) {
+			for (let i = 0; i < N; i++) {
+				if (i === dominant) continue
+				const layer = this.layers[i]
+				const minRes = NON_DOMINANT_RESIDUAL_MIN * layer.opacity
+				const cur = this.renderState.layerOpacities.get(layer.id) != null ? this.renderState.layerOpacities.get(layer.id) : 0
+				this.renderState.layerOpacities.set(layer.id, clamp(Math.max(cur, minRes), 0, 1))
+			}
+		}
+
+		this.renderState.stripShares = [...shares]
+		this.renderState.stripePhaseShift = gamma * (0.38 + 0.52 * sensitivity)
+		this.renderState.lenticularPitchPx = clamp(
+			Number.isFinite(this.physics.lenticularPitchPx) ? this.physics.lenticularPitchPx : 14,
+			8,
+			64
+		)
+
+		return this.renderState
+	}
+
+	computeStripShares(N) {
+		if (N <= 0) return []
+		if (N === 1) return [1]
+		if (N !== 3) {
+			const w = 1 / N
+			return Array.from({ length: N }, () => w)
+		}
+		const bg = clamp(this.physics.backgroundAnglePercent / 100, 0.1, 0.55)
+		const rest = (1 - bg) / 2
+		return [bg, rest, rest]
+	}
+
+	updateDisplayStable() {
+		const stab = clamp(this.physics.angleStability / 100, 0, 1)
+		const k = 0.006 + (1 - stab) * 0.095
+		let g = lerp(this.displayGamma, this.smoothedSensor.gamma, k)
+		const dead =
+			this.physics.sensorDeadzoneStrength != null ? Number(this.physics.sensorDeadzoneStrength) : 1
+		if (!Number.isFinite(dead) || dead <= 1e-6) {
+			this.displayGamma = clamp(g, -1, 1)
+			return
+		}
+		const db = (0.016 + (1 - stab) * 0.034) * dead
+		this.displayGamma = softAttenuateNearZero(g, db)
+	}
+
+	calcSmoothingAlpha() {
+		const s = this.physics.transitionSmoothness / 100
+		return 1 - s * 0.9
+	}
+
+	getRenderState() {
+		return this.renderState
+	}
+
+	getSmoothedSensor() {
+		return { ...this.smoothedSensor }
+	}
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..89d2202
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,83 @@
+import { defineConfig } from 'vite'
+import https from 'node:https'
+import uni from '@dcloudio/vite-plugin-uni'
+
+/** 与 upload-signature 返回的 OSS 虚拟域名一致；换桶时请同步 */
+const OSS_DEV_HOST = 'top-fans-test.oss-cn-shanghai.aliyuncs.com'
+
+/**
+ * 部分环境下 Vite 内置 server.proxy 的 rewrite 对 POST 未生效，OSS 仍收到路径
+ * /dev-oss-proxy，从而 405（ResourceType: Object）。此处用中间件固定转发到桶根 POST /。
+ */
+function ossDevPostProxyPlugin() {
+	return {
+		name: 'oss-dev-post-proxy',
+		configureServer(server) {
+			server.middlewares.use((req, res, next) => {
+				const raw = req.url || ''
+				if (!raw.startsWith('/dev-oss-proxy')) {
+					return next()
+				}
+				if (req.method === 'OPTIONS') {
+					res.statusCode = 204
+					res.setHeader('Access-Control-Allow-Origin', '*')
+					res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS')
+					res.setHeader(
+						'Access-Control-Allow-Headers',
+						String(req.headers['access-control-request-headers'] || '*')
+					)
+					res.end()
+					return
+				}
+				if (req.method !== 'POST') {
+					res.statusCode = 405
+					res.setHeader('Content-Type', 'text/plain; charset=utf-8')
+					res.end('OSS dev proxy only allows POST')
+					return
+				}
+				const hop = new Set([
+					'connection',
+					'keep-alive',
+					'proxy-authenticate',
+					'proxy-authorization',
+					'te',
+					'trailers',
+					'transfer-encoding',
+					'upgrade'
+				])
+				/** @type {import('node:http').OutgoingHttpHeaders} */
+				const headers = {}
+				for (const [k, v] of Object.entries(req.headers)) {
+					if (v === undefined || hop.has(k.toLowerCase())) continue
+					headers[k] = v
+				}
+				headers.host = OSS_DEV_HOST
+				const proxyReq = https.request(
+					{
+						hostname: OSS_DEV_HOST,
+						port: 443,
+						method: 'POST',
+						path: '/',
+						headers
+					},
+					(proxyRes) => {
+						res.writeHead(proxyRes.statusCode || 502, proxyRes.headers)
+						proxyRes.pipe(res)
+					}
+				)
+				proxyReq.on('error', (err) => {
+					if (!res.headersSent) {
+						res.statusCode = 502
+						res.setHeader('Content-Type', 'text/plain; charset=utf-8')
+					}
+					res.end(err.message)
+				})
+				req.pipe(proxyReq)
+			})
+		}
+	}
+}
+
+export default defineConfig({
+	plugins: [ossDevPostProxyPlugin(), uni()]
+})