From 86a5fdfbb5e1fc3f42d0cae8fe94efcb642759e7 Mon Sep 17 00:00:00 2001
From: zerosaturation <zerosaturation@163.com>
Date: Mon, 6 Jul 2026 17:36:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(lenticular):=20=E6=96=B0=E5=A2=9E=20Manual?=
 =?UTF-8?q?TiltSlider=20=E7=8B=AC=E7=AB=8B=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- uniapp <slider> 包装，0..1 双向绑定
- 内置 ↺ 复位按钮
- value validator 拦截 0..1 范围外输入

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../lenticular/ManualTiltSlider.vue           | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 frontend/components/lenticular/ManualTiltSlider.vue

diff --git a/frontend/components/lenticular/ManualTiltSlider.vue b/frontend/components/lenticular/ManualTiltSlider.vue
new file mode 100644
index 0000000..e23d996
--- /dev/null
+++ b/frontend/components/lenticular/ManualTiltSlider.vue
@@ -0,0 +1,85 @@
+<template>
+	<view v-if="showReset || label" class="tilt-slider-row">
+		<view v-if="showReset" class="tilt-slider-reset" @tap="handleReset">
+			<text class="tilt-slider-reset-icon">↺</text>
+		</view>
+		<text v-if="label" class="tilt-slider-label">{{ label }}</text>
+		<slider
+			class="tilt-slider"
+			:min="min"
+			:max="max"
+			:step="step"
+			:value="value"
+			:disabled="disabled"
+			:activeColor="activeColor"
+			:backgroundColor="backgroundColor"
+			:show-value="false"
+			@change="handleChange"
+		/>
+	</view>
+</template>
+
+<script setup>
+defineProps({
+	value:     { type: Number,  default: 0.5, validator: v => v >= 0 && v <= 1 },
+	disabled:  { type: Boolean, default: false },
+	label:     { type: String,  default: '手动调节倾斜' },
+	showReset: { type: Boolean, default: true },
+	min:       { type: Number,  default: 0 },
+	max:       { type: Number,  default: 1 },
+	step:      { type: Number,  default: 0.01 },
+	activeColor:    { type: String, default: '#6E7AFF' },
+	backgroundColor: { type: String, default: '#E5E7EB' },
+})
+
+const emit = defineEmits(['change', 'reset'])
+
+function handleChange(e) {
+	const v = Number(e.detail.value)
+	if (!Number.isFinite(v)) {
+		console.warn('[ManualTiltSlider] non-finite value', e.detail.value)
+		return
+	}
+	if (v < 0 || v > 1) {
+		console.warn('[ManualTiltSlider] value out of [0,1]', v)
+		return
+	}
+	emit('change', v)
+}
+
+function handleReset() {
+	emit('reset')
+}
+</script>
+
+<style scoped>
+.tilt-slider-row {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+	padding: 8rpx 16rpx;
+	height: 48rpx;
+}
+.tilt-slider-reset {
+	width: 32rpx;
+	height: 32rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+.tilt-slider-reset-icon {
+	font-size: 28rpx;
+	color: #6B7280;
+}
+.tilt-slider-label {
+	font-size: 12px;
+	color: #6B7280;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+.tilt-slider {
+	flex: 1;
+	min-width: 0;
+}
+</style>