// ---- 1. devices/protocols/index.ts:实例化 parser 并映射到 DP code ----
import { protocols as sdkProtocols } from '@ray-js/panel-sdk';
import { lampSchemaMap } from '../schema';
export const protocols = {
[lampSchemaMap.colour_data.code]: new sdkProtocols.ColourTransformer(),
// ColourTransformer.parser() 返回 { hue, saturation, value } → useStructuredDevicesProps 读
// ColourTransformer.formatter() 接收 { hue, saturation, value } → useStructuredDevicesActions 写
};
// ---- 2. devices/index.ts:创建 dpKit 并注入 SmartDevicesManager ----
import { createDpKit, SmartDevicesManager } from '@ray-js/panel-sdk';
import { protocols } from '@/devices/protocols';
export const dpKit = createDpKit({ protocols });
export const deviceManager = new SmartDevicesManager();
// batchAdd 时注入 dp-kit 拦截器
deviceManager.batchAdd([
{ key: 'lamp1', deviceId: 'xxx_device_id_1', interceptors: dpKit.interceptors },
{ key: 'lamp2', deviceId: 'xxx_device_id_2', interceptors: dpKit.interceptors },
]);
// ---- 3. 页面组件:通过 useStructuredDevicesActions 下发结构化数据 ----
import { View, Text } from '@ray-js/ray';
import { useStructuredDevicesProps, useStructuredDevicesActions } from '@ray-js/panel-sdk';
export default function ColourControl() {
// 推荐:精确选用需要的状态,避免无关变化引起无意义渲染
const colourData = useStructuredDevicesProps(props => props.lamp1?.colour_data);
const actions = useStructuredDevicesActions();
const setHue = (hue: number) => {
actions.lamp1?.colour_data.set({ ...colourData, hue });
};
return (
<View onClick={() => setHue(120)}>
<Text>当前 hue: {colourData?.hue}</Text>
<Text>点击设置 hue 为 120</Text>
</View>
);
}