新建圆环

project.tuya.json

 {
-  "projectname": "通用面板模板",
+  "projectname": "灯源",
   "i18n": false,
-  "description": "项目描述",
+  "description": "",
   "miniprogramRoot": "./dist/tuya",
   "dependencies": {
     "BaseKit": "2.4.11",

src/components/hubColorCircle/index.module.less

+.led {
+  position: absolute;
+  align-items:center;
+  justify-content:center;
+}

src/components/hubColorCircle/index.tsx

-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { utils } from '@ray-js/panel-sdk';
 import { getElementById } from '@ray-js/api';
 import { View, Text, Slider, Image, usePageEvent } from '@ray-js/ray';
@@ -6,17 +6,118 @@ import styles from './index.module.less';
 import { Props } from './index.type';
 import imgs from '../../res';
 
+const { hsv2rgbString } = utils;
+
 const HubColorCircle: React.FC<Props> = props => {
   const dpState = props.DpStateData;
   const codeMap = props.DpCodesMap;
 
+  const LED_SIZE = 110;
+  const HUE_RADIUS = 135;
+  const HUE_INNER_RADIUS = 76;
+  const THUMB_RADIUS = 27.5;
+  const THUMB_INNER_RADIUS = 22.5;
+
+  const hue = 180;
+  const brightness = 500;
+  const saturation = 500;
+
+  const [styleState, setStyleState] = useState({
+    container: {
+      flex: 1,
+      alignSelf: 'stretch',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: 40,
+    },
+
+    displayView: {
+      width: HUE_RADIUS * 2,
+      height: HUE_RADIUS * 2,
+    },
+
+    led: {
+      left: (HUE_RADIUS * 2 - LED_SIZE) * 0.5,
+      top: (HUE_RADIUS * 2 - LED_SIZE) * 0.5,
+      width: LED_SIZE,
+      height: LED_SIZE,
+      borderRadius: LED_SIZE * 0.5,
+      backgroundColor: 'transparent',
+    },
+
+    controlView: {
+      height: 120,
+      alignSelf: 'stretch',
+      justifyContent: 'space-around',
+      marginTop: 15,
+    },
+  });
+
   const toParseInt = (value: number): number => {
     return Math.floor(value);
   };
 
+  const handleColorChange = useCallback(
+    (value, type) => {
+      let h = 0;
+      let s = saturation;
+      let v = brightness;
+      switch (type) {
+        case 'hue':
+          h = value;
+          break;
+        case 'saturation':
+          s = value;
+          break;
+        case 'brightness':
+          v = value;
+          break;
+        default:
+          break;
+      }
+      updatePreview(h, s, v);
+      // putControlDataDP(h, s, v);
+    },
+    [hue, saturation, brightness]
+  );
+
+  const updatePreview = (h: number, s: number, v: number) => {
+    const backgroundColor = hsv2rgbString(h, s, v);
+    const data = { ...styleState };
+    data.setStyleState({
+      ...backgroundColor,
+      backgroundColor,
+    });
+  };
+
+  // 长度不够补齐位数
+  const format = (value: string, len = 2) => {
+    let v = `${value}`;
+    if (v.length < len) {
+      v = '0'.repeat(len - v.length) + v;
+    } else {
+      v = v.slice(0, len);
+    }
+    return v;
+  };
+  // m: mode; h: hue; s: saturation; v: lightValue; b: whiteBright; k: kelvin;
+  // mode: 0 - 跳变; 1 - 呼吸;
+  const encodeControlData = (m: number, h: number, s: number, v: number, b: number, k: number) => {
+    const hsvbk = [h, s, v, b, k].reduce((total: string, next: number) => {
+      let cur = parseInt(`${next}`, 10).toString(16);
+      cur = format(cur, 4);
+      return total + cur;
+    }, '');
+    return m + hsvbk;
+  };
+
   return (
     <View className={styles.box}>
-      <View className={styles.header}>123</View>
+      <View className={styles.header}>
+        <View style={styleState.displayView}>
+          <View className={styles.led} style={styleState.led} />
+        </View>
+      </View>
       <View className={styles.panel}>
         <View className={styles.configList}>
           <View className={styles.configList}>
@@ -27,9 +128,9 @@ const HubColorCircle: React.FC<Props> = props => {
                 backgroundColor="#333333"
                 min={0}
                 max={1000}
-                step={codeMap.temp_value.property.step}
-                value={dpState.temp_value}
-                onChange={e => props.onSetDpState('temp_value', e.value)}
+                step={1}
+                value={brightness}
+                onChange={e => handleColorChange(e.value, 'brightness')}
               />
             </View>
             <Text className={styles.SliderValue}>