111

2026-10-09 18:06:21 +08:00
parent 563836f789
commit 20467ca479
18 changed files with 547 additions and 102 deletions
@@ -0,0 +1,42 @@
+<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>