@ledvance/ui-biz-bundle 1.1.146 → 1.1.147

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.1.146",
+  "version": "1.1.147",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/flags/FlagItem.tsx

@@ -1,10 +1,11 @@
-import { StyleSheet, View, Text, ViewStyle, Image } from 'react-native'
+import { StyleSheet, View, Text, ViewStyle, Image, TouchableOpacity } from 'react-native'
 import React from 'react'
 import Card from '@ledvance/base/src/components/Card'
-import { SwitchButton, Utils } from 'tuya-panel-kit'
+import { Utils } from 'tuya-panel-kit'
 import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
 import Spacer from '@ledvance/base/src/components/Spacer'
 import ThemeType from '@ledvance/base/src/config/themeType'
+import res from '@ledvance/base/src/res'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -31,6 +32,7 @@ function FlagItem(props: RecommendMoodItemProps) {
       flexDirection: 'row',
       marginHorizontal: cx(16),
       justifyContent: 'space-between',
+      alignItems: 'center',
     },
     headText: {
       color: props.theme?.global.fontColor,
@@ -39,6 +41,13 @@ function FlagItem(props: RecommendMoodItemProps) {
       lineHeight: cx(20),
       flex: 1
     },
+    checkbox: {
+      width: cx(45),
+      height: cx(45),
+      marginTop: cx(-5),
+      marginBottom: cx(-10),
+      fontWeight: 'bold',
+    },
     gradientItem: {
       alignItems: 'center',
     },
@@ -55,10 +64,9 @@ function FlagItem(props: RecommendMoodItemProps) {
             {props.title ? <Text style={styles.headText}>{props.title}</Text> : undefined}
             {props.icon ? <Image source={icon} style={{ width: cx(60), aspectRatio: 2.14, marginRight: cx(10) }} /> : undefined}
           </View>
-          <SwitchButton
-            thumbStyle={{ elevation: 0 }}
-            value={props.enable}
-            onValueChange={props.onSwitch} />
+          <TouchableOpacity style={styles.checkbox} onPress={() => props.onSwitch(!props.enable)}>
+            <Image source={{ uri: res.ic_check}} width={cx(44)} height={cx(44)} style={[styles.checkbox, { tintColor: props.enable ? props.theme?.icon.primary : props.theme?.icon.disable}]} />
+          </TouchableOpacity>
         </View>
         <Spacer />
         <View style={styles.gradientItem}>

package/src/newModules/energyConsumption/EnergyConsumptionActions.ts

@@ -149,31 +149,94 @@ export interface PowerDataItem {
   value: number
 }
 
-export async function getPowerData(devId: string, powerDpCode: string, interval: number): Promise<PowerDataItem[]> {
-  const now = dayjs()
-  const startTime = now.add(-1 * interval, 'minute').valueOf().toString()
-  const endTime = now.valueOf().toString()
-  const dpResult = await getSpecifiedTimeDpReportLogs(
-    devId,
-    [powerDpCode],
-    'ASC',
-    startTime,
-    endTime,
-    {
-      maxRetries: 5,
-      initialDelay: 1000,
-      maxDelay: 30000,
-      backoffFactor: 2
-    }
-  ) as DpReportSataData[]
-  return dpResult.map(dp => {
-    return {
-      key: dp.timeStr,
-      chartTitle: dayjs.unix(dp.timeStamp).format('MM/DD/YYYY HH:mm:ss'),
-      time: dp.timeStamp * 1000,
-      value: parseFloat(dp.value) / 10
+// 常量抽离（便于维护）
+const DATA_POINT_INTERVAL_SEC = 10; // 预设数据间隔（秒）
+const TIME_UNIT = 'minute' as const; // 时间单位（与 interval 配合）
+const RETRY_CONFIG = {
+  maxRetries: 5,
+  initialDelay: 1000,
+  maxDelay: 30000,
+  backoffFactor: 2,
+} as const;
+
+/**
+ * 获取设备功率数据（保留所有实际数据，补充10秒间隔预设数据）
+ * @param devId 设备ID
+ * @param powerDpCode 功率数据点编码
+ * @param interval 时间区间（分钟）
+ * @returns 按时间排序的完整数据（预设数据 + 所有实际数据）
+ */
+export async function getPowerData(
+  devId: string,
+  powerDpCode: string,
+  interval: number
+): Promise<PowerDataItem[]> {
+  try {
+    const now = dayjs();
+    const startTime = now.add(-interval, TIME_UNIT); // 起始时间：当前时间 - interval 分钟
+    const endTime = now; // 结束时间：当前时间
+    const startTimeMs = startTime.valueOf();
+    const endTimeMs = endTime.valueOf();
+
+    // 1. 生成预设数据（10秒间隔，仅覆盖 [startTime, endTime] 区间）
+    const totalSeconds = interval * 60;
+    const expectedDataPoints = Math.floor(totalSeconds / DATA_POINT_INTERVAL_SEC);
+    const presetData: PowerDataItem[] = [];
+    for (let i = 0; i < expectedDataPoints; i++) {
+      const timePoint = startTime.add(i * DATA_POINT_INTERVAL_SEC, 'second');
+      const timeMs = timePoint.valueOf();
+      // 确保预设数据不超出查询区间（防止边界计算误差）
+      if (timeMs > endTimeMs) break;
+      presetData.push({
+        key: timePoint.format('HH:mm:ss'),
+        chartTitle: timePoint.format('MM/DD/YYYY HH:mm:ss'),
+        time: timeMs,
+        value: 0,
+      });
     }
-  })
+
+    // 2. 请求并处理实际数据（保留所有实际数据，不过滤）
+    const dpResult = await getSpecifiedTimeDpReportLogs(
+      devId,
+      [powerDpCode],
+      'ASC',
+      startTimeMs.toString(),
+      endTimeMs.toString(),
+      RETRY_CONFIG
+    );
+    // 类型校验 + 格式转换（避免异常）
+    const validDpResult = Array.isArray(dpResult) ? (dpResult as DpReportSataData[]) : [];
+    const actualData: PowerDataItem[] = validDpResult
+      .map((dp) => {
+        const timeMs = dp.timeStamp * 1000; // 秒级转毫秒级
+        // 过滤超出查询区间的实际数据（可选，根据业务需求）
+        if (timeMs < startTimeMs || timeMs > endTimeMs) return null;
+        return {
+          key: dayjs.unix(dp.timeStamp).format('HH:mm:ss'), // 统一 key 格式
+          chartTitle: dayjs.unix(dp.timeStamp).format('MM/DD/YYYY HH:mm:ss'),
+          time: timeMs,
+          value: parseFloat(dp.value) / 10, // 业务数值转换
+        };
+      })
+      .filter((item): item is PowerDataItem => item !== null); // 过滤无效数据
+
+    // 3. 合并预设数据和实际数据（去重：实际数据优先覆盖预设数据）
+    // 用 Map 实现 O(n) 合并（key：时间戳，value：数据项，实际数据覆盖预设）
+    const mergedMap = new Map<number, PowerDataItem>();
+    // 先加预设数据（后续实际数据相同时间戳会覆盖）
+    presetData.forEach((item) => mergedMap.set(item.time, item));
+    // 再加实际数据（覆盖相同时间戳的预设数据）
+    actualData.forEach((item) => mergedMap.set(item.time, item));
+
+    // 4. 按时间戳排序（Map 迭代顺序是插入顺序，必须显式排序）
+    const result = Array.from(mergedMap.values()).sort((a, b) => a.time - b.time);
+
+    return result;
+  } catch (error) {
+    console.error(`[getPowerData] 失败：devId=${devId}, powerDpCode=${powerDpCode}`, error);
+    // 兜底返回空数组（或仅返回预设数据，根据业务容错需求调整）
+    return [];
+  }
 }
 
 export const exportEnergyCsv = (values: any[][], unit: string) => {

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -342,19 +342,6 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
             <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor, }}>{I18n.getLang(isGeneration ? 'generation_data_description_text' : 'consumption_data_description_text')}</Text>
           </View>
           <Spacer />
-          {/* Today */}
-          <Card
-            style={styles.cardContainer}
-          >
-            <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
-            <Spacer height={cx(15)} />
-            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{localeNumber(state.todayElectricity)}</Text>
-              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
-            </View>
-            <Spacer height={cx(10)} />
-          </Card>
-          <Spacer />
           <Card
             style={styles.cardContainer}
             onPress={() => {
@@ -373,7 +360,17 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
               } as EnergyConsumptionChartProps)
             }}
           >
-            <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
+            <View style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+              <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
+              <Image
+                source={{ uri: res.energy_consumption_chart}}
+                style={{ width: cx(16), height: cx(16), marginLeft: cx(8) }}
+              />
+            </View>
             <Spacer height={cx(15)} />
             <View style={styles.consumedEnergyContent}>
               <ConsumedEnergyItem
@@ -393,24 +390,32 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
             style={styles.cardContainer}
           >
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
-              { state.energyGeneration.history.length > 0 && <TouchableOpacity
-                  onPress={() => {
-                    state.showPopup = true
-                    state.popupType = 'history'
-                  }}
-              >
-                  <Image
-                      source={{uri: res.co2_icon}}
-                      resizeMode="contain"
-                      style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
-                  />
-              </TouchableOpacity>}
+              <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
+              <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
+                <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>{localeNumber(state.todayElectricity)}</Text>
+                <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+              </View>
             </View>
-            <Spacer height={cx(15)} />
-            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{localeNumber(totalElectricity)}</Text>
-              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
+                { state.energyGeneration.history.length > 0 && <TouchableOpacity
+                    onPress={() => {
+                      state.showPopup = true
+                      state.popupType = 'history'
+                    }}
+                >
+                    <Image
+                        source={{uri: res.co2_icon}}
+                        resizeMode="contain"
+                        style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
+                    />
+                </TouchableOpacity>}
+              </View>
+              <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
+                <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>{localeNumber(totalElectricity)}</Text>
+                <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+              </View>
             </View>
             <Spacer />
             {/* CO2 */}

package/src/newModules/mood/MoodItem.tsx

@@ -1,166 +1,172 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, Text, View, ViewProps, ViewStyle, Image } from 'react-native';
-import { SwitchButton, Utils } from 'tuya-panel-kit';
-import { hsv2Hex } from '@ledvance/base/src/utils';
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
-import { mapFloatToRange } from '@ledvance/base/src/utils';
-import Card from '@ledvance/base/src/components/Card';
-import Spacer from '@ledvance/base/src/components/Spacer';
-import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine';
-import { MoodJumpGradientMode, MoodLampInfo, MoodUIInfo } from './Interface';
-import I18n from '@ledvance/base/src/i18n';
-import res from '@ledvance/base/src/res';
-import ThemeType from '@ledvance/base/src/config/themeType'
-
-const cx = Utils.RatioUtils.convertX;
-const { withTheme } = Utils.ThemeUtils
-
-interface LightCategory {
-  isMixLight?: boolean
-  isStripLight?: boolean
-  isStringLight?: boolean
-  isCeilingLight?: boolean
-}
-
-interface MoodItemProps extends ViewProps {
-  theme?: ThemeType
-  enable: boolean;
-  isMix: boolean;
-  mood: MoodUIInfo;
-  style?: ViewStyle;
-  deviceTypeOption?: LightCategory
-  onPress?: () => void;
-  onSwitch: (enable: boolean) => void;
-}
-
-const MoodItem = (props: MoodItemProps) => {
-  const { mood, isMix, deviceTypeOption } = props;
-  const isDynamic = useMemo(() => {
-    return mood.mainLamp.nodes?.length > 1 || mood.secondaryLamp.nodes?.length > 1;
-  }, [mood.mainLamp.nodes, mood.secondaryLamp.nodes]);
-
-  const gradientMode = useMemo(() => (
-    deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
-  ), [MoodJumpGradientMode, deviceTypeOption])
-
-
-  const styles = StyleSheet.create({
-    card: {
-      marginHorizontal: cx(24),
-    },
-    headline: {
-      flexDirection: 'row',
-      marginHorizontal: cx(16),
-    },
-    headText: {
-      flex: 1,
-      color: props.theme?.global.fontColor,
-      fontSize: cx(16),
-      fontFamily: 'helvetica_neue_lt_std_bd',
-      lineHeight: cx(20),
-    },
-    moodTypeItem: {
-      flexDirection: 'row',
-    },
-    moodTypeLabel: {
-      marginStart: cx(16),
-      paddingHorizontal: cx(12.5),
-      backgroundColor: props.theme?.tag.background,
-      borderRadius: cx(8),
-    },
-    moodTypeLabelText: {
-      height: cx(16),
-      color: props.theme?.tag.fontColor,
-      fontSize: cx(10),
-      textAlignVertical: 'center',
-      fontFamily: 'helvetica_neue_lt_std_roman',
-      lineHeight: cx(16),
-    },
-  })
-
-  return (
-    <Card style={[styles.card, props.style]} onPress={props.onPress}>
-      <View>
-        <Spacer height={cx(16)} />
-        <View style={styles.headline}>
-          <Text style={styles.headText}>{mood.name}</Text>
-          <SwitchButton
-            thumbStyle={{ elevation: 0 }}
-            value={props.enable}
-            onValueChange={props.onSwitch}
-          />
-        </View>
-        <Spacer />
-        <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} type={(mood.mainLamp.mode === gradientMode && !deviceTypeOption?.isCeilingLight) ? 'gradient' : 'separate'}/>
-        {(deviceTypeOption?.isMixLight || (isMix && !!mood.secondaryLamp.nodes.length)) &&  (
-          <>
-            <Spacer height={cx(7)} />
-            <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} type={mood.secondaryLamp.mode === (deviceTypeOption?.isMixLight ? MoodJumpGradientMode.SourceGradient : MoodJumpGradientMode.StripGradient) ? 'gradient' : 'separate'}/>
-          </>
-        )}
-        <Spacer height={cx(12)} />
-        <View style={styles.moodTypeItem}>
-          <View style={styles.moodTypeLabel}>
-            <Text style={styles.moodTypeLabelText}>
-              {I18n.getLang(
-                isDynamic ? 'mood_overview_field_chip_2' : 'mood_overview_field_chip_text'
-              )}
-            </Text>
-          </View>
-        </View>
-        <Spacer height={cx(16)} />
-      </View>
-    </Card>
-  );
-};
-
-export default withTheme(MoodItem)
-
-export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boolean, type: 'gradient' | 'separate' }) {
-  const { mixSubLight, isMix } = props;
-  const lightColors = !!(mixSubLight.enable && mixSubLight.nodes.length) ? mixSubLight.nodes?.map(n => {
-    const s = Math.round(mapFloatToRange(n.s / 100, 30, 100));
-    return n.isColorNode
-      ? hsv2Hex(n.h, s, Math.round(mapFloatToRange(n.v / 100, 50, 100)))
-      : cctToColor(n.colorTemp.toFixed());
-  }) : ['#eee'];
-
-  const styles = StyleSheet.create({
-    gradientItem: {
-      flexDirection: 'row',
-    },
-    gradientItemIconView: {
-      width: cx(24),
-      height: cx(24),
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: '#aaa',
-      borderRadius: cx(8),
-    },
-    gradientItemIcon: {
-      width: cx(16),
-      height: cx(16),
-      tintColor: '#fff',
-    },
-  })
-
-  return (
-    <View style={styles.gradientItem}>
-      <Spacer height={0} width={cx(16)} />
-      <MoodColorsLine
-        nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
-        width={isMix ? cx(264) : undefined}
-        type={props.type}
-        colors={lightColors}
-      />
-      {isMix && (
-        <>
-          <Spacer height={0} width={cx(7)} />
-          <View style={styles.gradientItemIconView}>
-            <Image style={styles.gradientItemIcon} source={{uri: mixSubLight.enable ? res.light_on : res.light_off}} />
-          </View>
-        </>
-      )}
-    </View>
-  );
-}
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, ViewProps, ViewStyle, Image, TouchableOpacity } from 'react-native';
+import { Utils } from 'tuya-panel-kit';
+import { hsv2Hex } from '@ledvance/base/src/utils';
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
+import { mapFloatToRange } from '@ledvance/base/src/utils';
+import Card from '@ledvance/base/src/components/Card';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine';
+import { MoodJumpGradientMode, MoodLampInfo, MoodUIInfo } from './Interface';
+import I18n from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+import ThemeType from '@ledvance/base/src/config/themeType'
+
+const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
+
+interface LightCategory {
+  isMixLight?: boolean
+  isStripLight?: boolean
+  isStringLight?: boolean
+  isCeilingLight?: boolean
+}
+
+interface MoodItemProps extends ViewProps {
+  theme?: ThemeType
+  enable: boolean;
+  isMix: boolean;
+  mood: MoodUIInfo;
+  style?: ViewStyle;
+  deviceTypeOption?: LightCategory
+  onPress?: () => void;
+  onSwitch: (enable: boolean) => void;
+}
+
+const MoodItem = (props: MoodItemProps) => {
+  const { mood, isMix, deviceTypeOption } = props;
+  const isDynamic = useMemo(() => {
+    return mood.mainLamp.nodes?.length > 1 || mood.secondaryLamp.nodes?.length > 1;
+  }, [mood.mainLamp.nodes, mood.secondaryLamp.nodes]);
+
+  const gradientMode = useMemo(() => (
+    deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
+  ), [MoodJumpGradientMode, deviceTypeOption])
+
+
+  const styles = StyleSheet.create({
+    card: {
+      marginHorizontal: cx(24),
+    },
+    headline: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+      alignItems: 'center',
+    },
+    headText: {
+      flex: 1,
+      color: props.theme?.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      lineHeight: cx(20),
+    },
+    checkbox: {
+      width: cx(45),
+      height: cx(45),
+      marginTop: cx(-5),
+      marginBottom: cx(-10),
+      fontWeight: 'bold',
+    },
+    moodTypeItem: {
+      flexDirection: 'row',
+    },
+    moodTypeLabel: {
+      marginStart: cx(16),
+      paddingHorizontal: cx(12.5),
+      backgroundColor: props.theme?.tag.background,
+      borderRadius: cx(8),
+    },
+    moodTypeLabelText: {
+      height: cx(16),
+      color: props.theme?.tag.fontColor,
+      fontSize: cx(10),
+      textAlignVertical: 'center',
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      lineHeight: cx(16),
+    },
+  })
+
+  return (
+    <Card style={[styles.card, props.style]} onPress={props.onPress}>
+      <View>
+        <Spacer height={cx(16)} />
+        <View style={styles.headline}>
+          <Text style={styles.headText}>{mood.name}</Text>
+          <TouchableOpacity style={styles.checkbox} onPress={() => props.onSwitch(!props.enable)}>
+            <Image source={{ uri: res.ic_check}} width={cx(44)} height={cx(44)} style={[styles.checkbox, { tintColor: props.enable ? props.theme?.icon.primary : props.theme?.icon.disable}]} />
+          </TouchableOpacity>
+        </View>
+        <Spacer />
+        <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} type={(mood.mainLamp.mode === gradientMode && !deviceTypeOption?.isCeilingLight) ? 'gradient' : 'separate'}/>
+        {(deviceTypeOption?.isMixLight || (isMix && !!mood.secondaryLamp.nodes.length)) &&  (
+          <>
+            <Spacer height={cx(7)} />
+            <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} type={mood.secondaryLamp.mode === (deviceTypeOption?.isMixLight ? MoodJumpGradientMode.SourceGradient : MoodJumpGradientMode.StripGradient) ? 'gradient' : 'separate'}/>
+          </>
+        )}
+        <Spacer height={cx(12)} />
+        <View style={styles.moodTypeItem}>
+          <View style={styles.moodTypeLabel}>
+            <Text style={styles.moodTypeLabelText}>
+              {I18n.getLang(
+                isDynamic ? 'mood_overview_field_chip_2' : 'mood_overview_field_chip_text'
+              )}
+            </Text>
+          </View>
+        </View>
+        <Spacer height={cx(16)} />
+      </View>
+    </Card>
+  );
+};
+
+export default withTheme(MoodItem)
+
+export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boolean, type: 'gradient' | 'separate' }) {
+  const { mixSubLight, isMix } = props;
+  const lightColors = !!(mixSubLight.enable && mixSubLight.nodes.length) ? mixSubLight.nodes?.map(n => {
+    const s = Math.round(mapFloatToRange(n.s / 100, 30, 100));
+    return n.isColorNode
+      ? hsv2Hex(n.h, s, Math.round(mapFloatToRange(n.v / 100, 50, 100)))
+      : cctToColor(n.colorTemp.toFixed());
+  }) : ['#eee'];
+
+  const styles = StyleSheet.create({
+    gradientItem: {
+      flexDirection: 'row',
+    },
+    gradientItemIconView: {
+      width: cx(24),
+      height: cx(24),
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: '#aaa',
+      borderRadius: cx(8),
+    },
+    gradientItemIcon: {
+      width: cx(16),
+      height: cx(16),
+      tintColor: '#fff',
+    },
+  })
+
+  return (
+    <View style={styles.gradientItem}>
+      <Spacer height={0} width={cx(16)} />
+      <MoodColorsLine
+        nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
+        width={isMix ? cx(264) : undefined}
+        type={props.type}
+        colors={lightColors}
+      />
+      {isMix && (
+        <>
+          <Spacer height={0} width={cx(7)} />
+          <View style={styles.gradientItemIconView}>
+            <Image style={styles.gradientItemIcon} source={{uri: mixSubLight.enable ? res.light_on : res.light_off}} />
+          </View>
+        </>
+      )}
+    </View>
+  );
+}