feat: Add Daisy-UI and optimize LED strip configuration UI
- Install and configure Tailwind CSS 4.1 with Daisy-UI plugin - Redesign main navigation with responsive navbar and dark theme - Optimize LED strip configuration layout with modern card components - Improve screen preview performance with frame-based rendering - Reduce LED pixel size for better visual appearance - Remove excessive debug logging for better performance - Fix Tailwind CSS ESM compatibility issues with dynamic imports
This commit is contained in:
@ -11,10 +11,9 @@ import transparentBg from '../../assets/transparent-grid-background.svg?url';
|
||||
|
||||
const Value: Component<{ value: number }> = (props) => {
|
||||
return (
|
||||
<span class="w-10 text-sm block font-mono text-right ">
|
||||
{(props.value * 100).toFixed(0)}
|
||||
<span class="text-xs text-stone-600">%</span>
|
||||
</span>
|
||||
<div class="badge badge-outline badge-sm font-mono">
|
||||
{(props.value * 100).toFixed(0)}%
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -55,77 +54,118 @@ export const WhiteBalance = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section class="select-none text-stone-800">
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 bottom-0"
|
||||
style={{
|
||||
'background-image': `url(${transparentBg})`,
|
||||
}}
|
||||
>
|
||||
<TestColorsBg />
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-base-content">白平衡调节</h1>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-outline btn-sm" onClick={reset} title="重置到100%">
|
||||
<BiRegularReset size={16} />
|
||||
重置
|
||||
</button>
|
||||
<button class="btn btn-primary btn-sm" onClick={exit} title="返回">
|
||||
<VsClose size={16} />
|
||||
返回
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 max-w-lg bg-stone-100/20 backdrop-blur p-5 rounded-xl shadow-lg">
|
||||
<label class="flex items-center gap-2">
|
||||
<span class="w-3 block">R:</span>
|
||||
<ColorSlider
|
||||
class="from-cyan-500 to-red-500"
|
||||
value={ledStripStore.colorCalibration.r}
|
||||
onInput={(ev) =>
|
||||
updateColorCalibration(
|
||||
'r',
|
||||
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Value value={ledStripStore.colorCalibration.r} />
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<span class="w-3 block">G:</span>
|
||||
<ColorSlider
|
||||
class="from-pink-500 to-green-500"
|
||||
value={ledStripStore.colorCalibration.g}
|
||||
onInput={(ev) =>
|
||||
updateColorCalibration(
|
||||
'g',
|
||||
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Value value={ledStripStore.colorCalibration.g} />
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<span class="w-3 block">B:</span>
|
||||
<ColorSlider
|
||||
class="from-yellow-500 to-blue-500"
|
||||
value={ledStripStore.colorCalibration.b}
|
||||
onInput={(ev) =>
|
||||
updateColorCalibration(
|
||||
'b',
|
||||
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Value value={ledStripStore.colorCalibration.b} />
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<span class="w-3 block">W:</span>
|
||||
<ColorSlider class="from-yellow-50 to-cyan-50" />
|
||||
</label>
|
||||
<button
|
||||
class="absolute -right-4 -top-4 rounded-full aspect-square bg-stone-100/20 backdrop-blur p-1 shadow hover:bg-stone-200/20 active:bg-stone-300"
|
||||
onClick={exit}
|
||||
title="Go Back"
|
||||
>
|
||||
<VsClose size={24} />
|
||||
</button>
|
||||
<button
|
||||
class="absolute -right-4 -bottom-4 rounded-full aspect-square bg-stone-100/20 backdrop-blur p-1 shadow hover:bg-stone-200/20 active:bg-stone-300"
|
||||
onClick={reset}
|
||||
title="Reset to 100%"
|
||||
>
|
||||
<BiRegularReset size={24} />
|
||||
</button>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* 颜色测试区域 */}
|
||||
<div class="card bg-base-200 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<div class="card-title text-base mb-3">
|
||||
<span>颜色测试</span>
|
||||
<div class="badge badge-info badge-outline">点击测试</div>
|
||||
</div>
|
||||
<div
|
||||
class="aspect-square rounded-lg overflow-hidden border border-base-300"
|
||||
style={{
|
||||
'background-image': `url(${transparentBg})`,
|
||||
}}
|
||||
>
|
||||
<TestColorsBg />
|
||||
</div>
|
||||
<div class="text-xs text-base-content/50 mt-2">
|
||||
💡 提示：点击颜色块进行单色测试，再次点击返回多色模式
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 白平衡控制面板 */}
|
||||
<div class="card bg-base-200 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<div class="card-title text-base mb-3">
|
||||
<span>RGB调节</span>
|
||||
<div class="badge badge-secondary badge-outline">实时调节</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold text-red-500">红色 (R)</span>
|
||||
<Value value={ledStripStore.colorCalibration.r} />
|
||||
</label>
|
||||
<ColorSlider
|
||||
class="from-cyan-500 to-red-500"
|
||||
value={ledStripStore.colorCalibration.r}
|
||||
onInput={(ev) =>
|
||||
updateColorCalibration(
|
||||
'r',
|
||||
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold text-green-500">绿色 (G)</span>
|
||||
<Value value={ledStripStore.colorCalibration.g} />
|
||||
</label>
|
||||
<ColorSlider
|
||||
class="from-pink-500 to-green-500"
|
||||
value={ledStripStore.colorCalibration.g}
|
||||
onInput={(ev) =>
|
||||
updateColorCalibration(
|
||||
'g',
|
||||
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold text-blue-500">蓝色 (B)</span>
|
||||
<Value value={ledStripStore.colorCalibration.b} />
|
||||
</label>
|
||||
<ColorSlider
|
||||
class="from-yellow-500 to-blue-500"
|
||||
value={ledStripStore.colorCalibration.b}
|
||||
onInput={(ev) =>
|
||||
updateColorCalibration(
|
||||
'b',
|
||||
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold text-base-content/70">白色 (W)</span>
|
||||
<div class="badge badge-outline badge-sm">暂未启用</div>
|
||||
</label>
|
||||
<ColorSlider class="from-yellow-50 to-cyan-50" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-base-content/50 mt-4">
|
||||
💡 提示：调节RGB滑块来校正LED灯条的白平衡，使白色更加纯净
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user