43 lines
3.4 KiB
Vue
43 lines
3.4 KiB
Vue
<script setup lang="ts">
|
||
import { Slider as VanSlider } from 'vant'
|
||
import type { HomeAssistantDiscoveredDevice } from '../../services/health'
|
||
import { useDeviceControlContext } from '../../devices/controlContext'
|
||
import { useLightControls } from '../../devices/lighting/useLightControls'
|
||
const props = defineProps<{ device: HomeAssistantDiscoveredDevice; reportedBrightness?: number }>()
|
||
const { operationBusy, applyParam } = useDeviceControlContext()
|
||
const { capability, brightnessReading, brightnessTarget, temperatureTarget, effectTarget, defaultEffect, setBrightness, setTemperature, setEffect } =
|
||
useLightControls(() => props.device, () => operationBusy.value, applyParam, () => props.reportedBrightness)
|
||
</script>
|
||
|
||
<template>
|
||
<div v-if="capability.canDim" class="param-row">
|
||
<div class="param-header"><span class="p-title">灯光亮度</span><strong class="p-val">{{ brightnessReading === undefined ? '--' : `${brightnessReading}%` }}</strong></div>
|
||
<VanSlider v-model="brightnessTarget" :min="0" :max="100" :step="1" :disabled="operationBusy || !capability.available"
|
||
active-color="#d6a657" aria-label="待设置的灯光亮度" @change="setBrightness" />
|
||
<div class="slider-scale"><span>0% 关闭</span><span>100% 满亮</span></div>
|
||
<p v-if="capability.available" class="scale-note">目标亮度 {{ brightnessTarget }}%；滑动后设置，非当前回读值。</p>
|
||
</div>
|
||
<div v-if="capability.temperatureRange" class="param-row">
|
||
<div class="param-header"><span class="p-title">灯光色温调节</span><strong class="p-val">{{ capability.colorTemperature === undefined ? '--' : `${capability.colorTemperature}K` }}</strong></div>
|
||
<VanSlider v-model="temperatureTarget" :min="capability.temperatureRange.min" :max="capability.temperatureRange.max" :step="1"
|
||
:disabled="operationBusy || !capability.available" active-color="#c87f2b" aria-label="待设置的灯光色温" @change="setTemperature" />
|
||
<div class="slider-scale"><span>{{ capability.temperatureRange.min }}K 暖光</span><span>{{ capability.temperatureRange.max }}K 冷光</span></div>
|
||
<p v-if="capability.available" class="scale-note">目标色温 {{ temperatureTarget }}K；滑动后设置，关灯时调节会点亮灯。</p>
|
||
</div>
|
||
<div v-if="capability.effects.length" class="param-row">
|
||
<div class="param-header"><span class="p-title">灯光模式</span><strong class="p-val">{{ capability.effect || '--' }}</strong></div>
|
||
<select v-model="effectTarget" class="standard-light-select" aria-label="选择灯光模式" :disabled="operationBusy || !capability.available" @change="setEffect">
|
||
<option value="" disabled>选择要设置的模式</option>
|
||
<option v-for="effect in capability.effects" :key="effect" :value="effect">{{ effect }}</option>
|
||
</select>
|
||
<p class="scale-note">使用这盏灯实际提供的模式；选择后可能点亮灯。</p>
|
||
<p v-if="defaultEffect" class="scale-note">舒睡默认 {{ defaultEffect }}；实际模式以顶部回读为准。</p>
|
||
</div>
|
||
<p v-if="!capability.canDim && !capability.temperatureRange && !capability.effects.length" class="scale-note">这盏灯未上报可用的调光能力，目前仅提供开关。</p>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.standard-light-select { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid #d9e6de; border-radius: 10px; background: #fff; color: #174d40; font: inherit; font-size: 13px; }
|
||
.standard-light-select:disabled { opacity: .5; }
|
||
</style>
|