@ledvance/ui-biz-bundle 1.1.161 → 1.1.163

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.1.161",
+  "version": "1.1.163",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",
@@ -16,6 +16,7 @@
     "prop-types": "^15.6.1",
     "react": "16.8.3",
     "react-native": "0.59.10",
+    "react-native-linear-gradient": "2.8.3",
     "react-native-orientation-locker": "^1.7.0",
     "react-native-svg": "5.5.1",
     "react-redux": "^7.2.1",

package/src/newModules/biorhythm/BiorhythmActions.ts

@@ -8,18 +8,19 @@ import { hex2Int, spliceByStep } from '@ledvance/base/src/utils/common'
 import { to16 } from '@tuya/tuya-panel-lamp-sdk/lib/utils'
 import { useUpdateEffect } from 'ahooks'
 import dayjs from 'dayjs'
-import { padStart } from 'lodash'
+import { cloneDeep, padStart } from 'lodash'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { AsyncStorage } from 'react-native'
 import {
   BiorhythmBean,
   BiorhythmGradientType,
   BiorhythmGradientTypeMap,
   BiorhythmGradientTypeMap2,
   colorTemperatureValue,
-  colorTempPercent,
-  Plan,
+  colorTempPercent, Plan,
   RemoteBiorhythmBean,
 } from './BiorhythmBean'
+import iconList from './iconListData'
 
 type UseBiorhythmType = (dpKey: string, disabledFeature?: boolean) => [BiorhythmBean, SetBiorhythmType];
 type SetBiorhythmType = (biorhythmObj: BiorhythmBean, pushFeature?: boolean) => Promise<Result<any>>;
@@ -401,3 +402,91 @@ function dto2Vo(remoteBiorhythmBean: RemoteBiorhythmBean): BiorhythmBean {
     }),
   }
 }
+
+export const replaceImg = (img) => {
+  const item = iconList?.find(val => val.id === Number(img))
+  switch (img) {
+    case 'rhythm_icon1':
+    case '31':
+      return { icon: res.biorhythom_icon1, iconId: 1 }
+    case 'rhythm_icon2':
+    case '33':
+      return { icon: res.biorhythom_icon5, iconId: 5 }
+    case 'rhythm_icon3':
+    case '35':
+      return { icon: res.biorhythom_icon2, iconId: 2 }
+    case 'rhythm_icon4':
+    case '32':
+      return { icon: res.biorhythom_icon9, iconId: 9 }
+    case 'rhythm_icon12':
+    case '39':
+      return { icon: res.biorhythom_icon3, iconId: 3 }
+    default:
+      return { icon: item?.icon, iconId: item?.id }
+  }
+}
+
+export function useStorageBiorhythm(): [[], (key, enable: boolean, gradient: BiorhythmGradientType, weeks: number[], planList: Plan[]) => void, (key) => void, (key) => {
+  weeks: number[];
+  planList: Plan[];
+  enable: boolean;
+  gradient: BiorhythmGradientType
+}] {
+  const [storageBiorhythms, setStorageBiorhythms] = useState([])
+  useEffect(() => {
+    AsyncStorage.getItem('BIORHYTHM_STORAGE').then(res => {
+      if (res) {
+        const storageBiorhythms = JSON.parse(res)
+        setStorageBiorhythms(storageBiorhythms)
+        xLog('AsyncStorage getBiorhythm', storageBiorhythms)
+      }
+    })
+  }, [])
+
+  const saveBiorhythm = useCallback((key, enable: boolean, gradient: BiorhythmGradientType, weeks: number[], planList: Plan[]) => {
+    const newPlanList = planList?.map(item => {
+      return { ...item, icon: `${item.icon}` }
+    }).sort((a, b) => a.time - b.time)
+    const biorhythm = cloneDeep({
+      key: key,
+      enable: enable,
+      weeks: weeks,
+      gradient: gradient,
+      planList: newPlanList,
+    })
+    const newStorageBiorhythms = storageBiorhythms.filter(item => item.key !== key)
+    newStorageBiorhythms.unshift(biorhythm)
+    setStorageBiorhythms(newStorageBiorhythms)
+    xLog('AsyncStorage saveBiorhythm', newStorageBiorhythms)
+    AsyncStorage.setItem('BIORHYTHM_STORAGE', JSON.stringify(newStorageBiorhythms), (error) => {
+      xLog('AsyncStorage saveBiorhythm error', error)
+    }).then()
+  }, [storageBiorhythms])
+
+  const removeBiorhythm = useCallback((key) => {
+    const newStorageBiorhythms = storageBiorhythms.filter(item => item.key !== key)
+    setStorageBiorhythms(newStorageBiorhythms)
+    AsyncStorage.setItem('BIORHYTHM_STORAGE', JSON.stringify(newStorageBiorhythms)).then(res => {
+      xLog('AsyncStorage removeBiorhythm res', res)
+    })
+  }, [storageBiorhythms])
+
+  const applyBiorhythm = useCallback((key) => {
+    const newBiorhythm = storageBiorhythms.find(item => item.key === key)
+    const planList = newBiorhythm.planList?.map((it, index) => {
+      return {
+        ...it,
+        index: it.index ?? index,
+        icon: replaceImg(it?.iconId || it?.icon)?.icon,
+        iconId: replaceImg(it?.iconId || it?.icon)?.iconId,
+      }
+    })
+    return {
+      weeks: newBiorhythm.weeks,
+      planList: planList,
+      enable: newBiorhythm.enable,
+      gradient: newBiorhythm.gradient,
+    }
+  }, [storageBiorhythms])
+  return [storageBiorhythms, saveBiorhythm, removeBiorhythm, applyBiorhythm]
+}

package/src/newModules/biorhythm/BiorhythmPage.tsx

@@ -1,5 +1,6 @@
 import Card from '@ledvance/base/src/components/Card'
 import DeleteButton from '@ledvance/base/src/components/DeleteButton'
+import InfoText from '@ledvance/base/src/components/InfoText'
 import Page from '@ledvance/base/src/components/Page'
 import Spacer from '@ledvance/base/src/components/Spacer'
 import LdvWeekView from '@ledvance/base/src/components/weekSelect'
@@ -8,17 +9,18 @@ import { useParams } from '@ledvance/base/src/hooks/Hooks'
 import I18n from '@ledvance/base/src/i18n'
 import { useDeviceInfo, useSystemTimeFormate, } from '@ledvance/base/src/models/modules/NativePropsSlice'
 import res from '@ledvance/base/src/res'
+import { xLog } from '@ledvance/base/src/utils'
 import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
-import { convertMinutesTo12HourFormat, loopText, showDialog as showCommonDialog } from '@ledvance/base/src/utils/common'
+import { convertMinutesTo12HourFormat, loopText, showDialog } from '@ledvance/base/src/utils/common'
 import { useNavigation } from '@react-navigation/native'
 import { useDebounceFn, useReactive, useUpdateEffect } from 'ahooks'
 import { useConflictTask } from 'hooks/DeviceDpStateHooks'
 import { cloneDeep, sortBy } from 'lodash'
-import React, { useCallback, useMemo } from 'react'
-import { FlatList, Image, Linking, ScrollView, Switch, Text, TouchableOpacity, View } from 'react-native'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { FlatList, Image, Linking, ScrollView, Switch, Text, TouchableOpacity, View, AsyncStorage } from 'react-native'
 import { Dialog, Modal, Utils } from 'tuya-panel-kit'
 import { ui_biz_routerKey } from '../../navigation/Routers'
-import { useBiorhythm } from './BiorhythmActions'
+import { replaceImg, useBiorhythm, useStorageBiorhythm } from './BiorhythmActions'
 import {
   BiorhythmBean,
   BiorhythmGradientType,
@@ -64,6 +66,8 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
   const is24Hour = useSystemTimeFormate()
   const devicesJudge = pIdList.some(val => val === productId)
   const [checkConflict, resolveConflict] = useConflictTask(params.conflictDps)
+  const [storageBiorhythms, saveStorageBiorhythms, removeStorageBiorhythm, applyStorageBiorhythm] = useStorageBiorhythm()
+  const [biorhythmListVisible, setBiorhythmListVisible] = useState(false)
 
   const state = useReactive<UIState>({
     ...biorhythm,
@@ -163,29 +167,6 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
     run()
   }, [state.flag])
 
-  const replaceImg = (img) => {
-    const item = iconList?.find(val => val.id === Number(img))
-    switch (img) {
-      case 'rhythm_icon1':
-      case '31':
-        return { icon: res.biorhythom_icon1, iconId: 1 }
-      case 'rhythm_icon2':
-      case '33':
-        return { icon: res.biorhythom_icon5, iconId: 5 }
-      case 'rhythm_icon3':
-      case '35':
-        return { icon: res.biorhythom_icon2, iconId: 2 }
-      case 'rhythm_icon4':
-      case '32':
-        return { icon: res.biorhythom_icon9, iconId: 9 }
-      case 'rhythm_icon12':
-      case '39':
-        return { icon: res.biorhythom_icon3, iconId: 3 }
-      default:
-        return { icon: item?.icon, iconId: item?.id }
-    }
-  }
-
   useUpdateEffect(() => {
     const planList = biorhythm.planList?.map(item => {
       return {
@@ -261,6 +242,26 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
       <Page
         backText={deviceInfo.name}
         onBackClick={navigation.goBack}
+        headlineTopContent={<View style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between' }}>
+          <DeleteButton style={{flex: 1}} text={I18n.getLang('biorhythm_save_as')} onPress={() => {
+            Dialog.prompt({
+              title: I18n.getLang('biorhythm_save_title'),
+              placeholder: I18n.getLang('biorhythm_save_placeholder'),
+              defaultValue: `${deviceInfo.name}`,
+              cancelText: I18n.getLang('auto_scan_system_cancel'),
+              confirmText: I18n.getLang('auto_scan_system_wifi_confirm'),
+              inputWrapperStyle: {backgroundColor: props.theme?.textInput.background, borderRadius: cx(10)},
+              autoFocus: true,
+              onConfirm: (data, { close }) => {
+                saveStorageBiorhythms(data, state.enable, state.gradient, state.weeks, state.planList)
+                close()
+              }
+            })
+          }} />
+          <DeleteButton style={{flex: 1}} text={I18n.getLang('biorhythm_load')} onPress={() => {
+            setBiorhythmListVisible(true)
+          }} />
+        </View>}
         headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
         headlineIconContent={<Switch
           value={state.enable}
@@ -275,7 +276,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
               channel: 1
             }
             if (enable && checkConflict(biorhythmTask)) {
-              return showCommonDialog({
+              return showDialog({
                 method: 'confirm',
                 title: I18n.getLang('conflict_dialog_active_item_bio_rhythm_titel'),
                 subTitle: I18n.getLang('conflict_dialog_active_item_bio_rhythm_description'),
@@ -580,7 +581,7 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
                       // fontFamily: 'helvetica_neue_lt_std_roman',
                     }}
                     onPress={() => {
-                      showCommonDialog({
+                      showDialog({
                         method: 'confirm',
                         title: I18n.getLang('bio_ryhthm_reset_description_text'),
                         onConfirm: (_, { close }) => {
@@ -645,6 +646,54 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
           showGradientTypeSelectModal(false)
         }}
       />
+      <Modal visible={biorhythmListVisible} onMaskPress={() => {setBiorhythmListVisible(false)}}>
+        <View style={{ height: cx(300), padding: cx(16), backgroundColor: props.theme?.card.background }}>
+          {
+            storageBiorhythms.length === 0 ? (
+              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                <InfoText
+                  textStyle={{ flex: undefined }}
+                  icon={res.ic_info}
+                  text={I18n.getLang('energyconsumption_emptydata')}
+                />
+              </View>
+            ) : (
+              <FlatList
+                data={storageBiorhythms}
+                renderItem={({ item }) => {
+                  return <View style={{ padding: cx(5), flexDirection: 'row' }}>
+                    <Text style={{ flex: 1, color: props.theme?.global.fontColor }}>{item.key}</Text>
+                    <TouchableOpacity style={{width: cx(24), height: cx(24), marginRight: cx(20)}} onPress={() => {
+                      showDialog({
+                        method: 'confirm',
+                        title: I18n.getLang('biorhythm_delete_tips'),
+                        onConfirm: (_, { close }) => {
+                          removeStorageBiorhythm(item.key)
+                          close()
+                        }
+                      })
+                    }}>
+                      <Image source={{ uri: res.delete}} style={{width: cx(24), height: cx(24), tintColor: props.theme?.global.warning}} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{width: cx(24), height: cx(24), marginRight: cx(10)}} onPress={() => {
+                      const newBiorhythm = applyStorageBiorhythm(item.key)
+                      state.enable = newBiorhythm.enable
+                      state.gradient = newBiorhythm.gradient
+                      state.weeks = newBiorhythm.weeks
+                      state.planList = newBiorhythm.planList
+                      run()
+                      setBiorhythmListVisible(false)
+                    }}>
+                      <Image source={{ uri:res.ic_checked}} style={{width: cx(24), height: cx(24), tintColor: props.theme?.icon.normal}} />
+                    </TouchableOpacity>
+                  </View>
+                }}
+                keyExtractor={(item) => `${item.key}`}
+              />
+            )
+          }
+        </View>
+      </Modal>
     </>
   )
 }

package/src/newModules/energyConsumption/component/PowerLineChart.tsx

@@ -5,10 +5,57 @@ import React, { useRef } from 'react'
 import { View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
 import { PowerDataItem } from '../EnergyConsumptionActions'
+import dayjs from 'dayjs'
 
 const { withTheme } = Utils.ThemeUtils
 const cx = Utils.RatioUtils.convertX
 
+/** 相邻两点时间差超过该阈值（ms）时插入补充点 */
+const GAP_THRESHOLD_MS = 5 * 1000 // 5 秒
+
+/**
+ * 在时间间隔较大的相邻点之间插入一个"间隙补充点"，模拟阶梯式折线效果。
+ *
+ * 插入规则（基于值的变化方向）：
+ *   - 值下降（cur > next）：在 cur.time + 1s 处插入 next.value
+ *     → 表示值在前点之后立刻跌落，后续一直保持新低值直到 next 点
+ *   - 值上升（cur <= next）：在 next.time - 1s 处插入 cur.value
+ *     → 表示值一直保持旧值平稳，在 next 点前 1 秒才结束
+ */
+function fillGaps(items: PowerDataItem[]): PowerDataItem[] {
+  if (!items || items.length < 2) return items
+  const result: PowerDataItem[] = []
+  for (let i = 0; i < items.length; i++) {
+    result.push(items[i])
+    if (i < items.length - 1) {
+      const cur = items[i]
+      const next = items[i + 1]
+      const diffMs = next.time - cur.time
+      if (diffMs > GAP_THRESHOLD_MS) {
+        let gapTime: number
+        let gapValue: number
+        if (cur.value > next.value) {
+          // 值下降：立刻跌落 —— 在前点后 1 秒插入 next.value
+          gapTime = cur.time + 1000
+          gapValue = next.value
+        } else {
+          // 值上升（或相等）：保持旧值 —— 在后点前 1 秒插入 cur.value
+          gapTime = next.time - 1000
+          gapValue = cur.value
+        }
+        const gapDayjs = dayjs(gapTime)
+        result.push({
+          key: gapDayjs.format('YYYY-MM-DD HH:mm:ss'),
+          chartTitle: gapDayjs.format('MM/DD/YYYY HH:mm:ss'),
+          time: gapTime,
+          value: gapValue,
+        })
+      }
+    }
+  }
+  return result
+}
+
 interface PowerLineChartProps {
   theme?: ThemeType
   data: PowerDataItem[],
@@ -19,7 +66,7 @@ const PowerLineChart = (props: PowerLineChartProps) => {
   const echarts = useRef()
   const { data, height } = props
 
-  const values = data?.map(item => ([item.time, item.value]))
+  const values = fillGaps(data)?.map(item => ([item.time, item.value]))
 
   const option = {
     tooltip: {

package/src/newModules/mood/MixMoodColorsLine.tsx

@@ -0,0 +1,102 @@
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import res from '@ledvance/base/src/res'
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import React, { useState } from 'react'
+import { Image, LayoutChangeEvent, StyleSheet, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import { MoodLampInfo } from './Interface'
+
+const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils;
+
+const MixMoodColorsLine = (props: {
+  mixSubLight: MoodLampInfo;
+  isMix: boolean;
+  type: 'gradient' | 'separate';
+  width?: number; // 外部传入的宽度（父组件已计算好）
+}) => {
+  const { mixSubLight, isMix, type, width: propWidth } = props;
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    if (width > 0 && width !== measuredWidth) {
+      setMeasuredWidth(width);
+    }
+  };
+
+  const lightColors = (mixSubLight.enable && mixSubLight.nodes.length > 0)
+    ? 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 finalWidth = propWidth || measuredWidth;
+
+  // 渲染颜色条的通用逻辑
+  const renderColorLine = () => (
+    finalWidth > 0 && (
+      <MoodColorsLine
+        nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
+        width={finalWidth}
+        type={type}
+        colors={lightColors}
+      />
+    )
+  );
+
+  // 渲染右侧图标的通用逻辑
+  const renderIcon = () => (
+    isMix && (
+      <>
+        <Spacer width={cx(7)}/>
+        <View style={styles.mixLineIconView}>
+          <Image style={styles.mixLineIcon} source={{ uri: mixSubLight.enable ? res.light_on : res.light_off }}/>
+        </View>
+      </>
+    )
+  );
+
+  // Case 1: 父组件已经计算并传入了宽度 (最高效)
+  if (propWidth) {
+    return (
+      <View style={styles.mixLineRow}>
+        {renderColorLine()}
+        {renderIcon()}
+      </View>
+    );
+  }
+
+  // Case 2: 自我测量模式 (回退方案)
+  return (
+    <View style={styles.mixLineRow}>
+      {/* 这个 View (测量器) 会自动收缩以填充'颜色条'应占的空间 */}
+      <View style={{ flex: 1 }} onLayout={handleLayout}>
+        {renderColorLine()}
+      </View>
+      {/* 图标作为测量器的兄弟节点，Flexbox 会先为它分配空间 */}
+      {renderIcon()}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  mixLineRow: { flexDirection: 'row', alignItems: 'center' },
+  mixLineIconView: {
+    width: cx(24),
+    height: cx(24),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#aaa',
+    borderRadius: cx(8),
+  },
+  mixLineIcon: { width: cx(16), height: cx(16), tintColor: '#fff' },
+});
+
+export default withTheme(MixMoodColorsLine)

package/src/newModules/mood/MoodInfo.ts

@@ -108,14 +108,6 @@ function getRGBWDefSceneList(): RemoteMoodInfo[] {
       t: 0,
       e: false,
     },
-    {
-      n: I18n.getLang('mesh_device_detail_lighting_color_mode'),
-      i:
-        '05464601000003e803e800000000464601007803e803e80000000046460100f003e803e800000000464601003d03e803e80000000046460100ae03e803e800000000464601011303e803e800000000',
-      s: '',
-      t: 0,
-      e: false,
-    },
     {
       n: I18n.getLang('mesh_device_detail_lighting_white_mode'),
       i: '0646460100000000000003e8000046460100000000000003e8019046460100000000000003e803e8',
@@ -156,13 +148,6 @@ function getRGBDefSceneList(): RemoteMoodInfo[] {
       s: '',
       t: 0,
       e: false,
-  },
-  {
-      n: I18n.getLang('mesh_device_detail_lighting_color_mode'),
-      i: '05464601000003e803e800000000464601007803e803e80000000046460100f003e803e800000000464601003d03e803e80000000046460100ae03e803e800000000464601011303e803e800000000',
-      s: '',
-      t: 0,
-      e: false,
   },
     ...defColorSceneList,
   ];
@@ -198,14 +183,6 @@ function getOnlyRGBDefSceneList(): RemoteMoodInfo[] {
       t: 0,
       e: false,
     },
-    {
-      n: I18n.getLang('mesh_device_detail_lighting_color_mode'),
-      i:
-        '05464601000003e803e800000000464601007803e803e80000000046460100f003e803e800000000464601003d03e803e80000000046460100ae03e803e800000000464601011303e803e800000000',
-      s: '',
-      t: 0,
-      e: false,
-    },
     ...defColorSceneList,
   ];
 }
@@ -1200,12 +1177,6 @@ function getDefMixLightSceneList(): MixRemoteMoodInfo[] {
       image: '',
       value: '00030101020e0d0001f401f40000',
     },
-    {
-      name: I18n.getLang('mesh_device_detail_lighting_color_mode'),
-      image: '',
-      value:
-        '00040000010603464601000003e803e8464601007803e803e846460100f003e803e8464601003d03e803e846460100ae03e803e8464601011303e803e8',
-    },
     {
       name: I18n.getLang('mesh_device_detail_lighting_white_mode'),
       image: '',

package/src/newModules/mood/MoodItem.tsx

@@ -1,15 +1,13 @@
-import Card from '@ledvance/base/src/components/Card';
-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 I18n from '@ledvance/base/src/i18n';
 import res from '@ledvance/base/src/res';
 import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
 import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
-import React, { useMemo, useState } from 'react';
-import { Image, LayoutChangeEvent, StyleSheet, Text, TouchableOpacity, View, ViewProps, ViewStyle } from 'react-native';
+import React, { useMemo } from 'react';
+import { Image, Platform, StyleSheet, Text, TouchableOpacity, View, ViewProps, ViewStyle } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import { Utils } from 'tuya-panel-kit';
-import { MoodJumpGradientMode, MoodLampInfo, MoodUIInfo } from './Interface';
+import { MoodLampInfo, MoodUIInfo } from './Interface';
 
 const cx = Utils.RatioUtils.convertX;
 const { withTheme } = Utils.ThemeUtils;
@@ -32,189 +30,195 @@ interface MoodItemProps extends ViewProps {
   onSwitch: (enable: boolean) => void;
 }
 
+const getGradientColors = (lampInfo: MoodLampInfo, defaultColors: string[]): string[] => {
+  if (!lampInfo.enable || lampInfo.nodes.length === 0) {
+    return defaultColors;
+  }
+
+  const colors = lampInfo.nodes.map(n => {
+    const s = Math.round(mapFloatToRange(n.s / 100, 30, 70));
+    const v = Math.round(mapFloatToRange(n.v / 100, 80, 100));
+    return n.isColorNode ? hsv2Hex(n.h, s, v) : cctToColor(n.colorTemp.toFixed());
+  });
+
+  if (colors.length === 1) {
+    return [colors[0], colors[0]];
+  }
+
+  return colors;
+};
+
 const MoodItem = (props: MoodItemProps) => {
-  const { mood, isMix, deviceTypeOption, theme } = props;
+  const { mood, isMix, deviceTypeOption, theme, onPress, onSwitch, enable, style } = props;
+  const styles = getStyles(theme);
+
   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 isDarkMode = theme?.type === 'dark';
+  const defaultGreyGradient = isDarkMode ? ['#444444', '#333333'] : ['#E5E5E5', '#DCDCDC'];
 
-  const styles = useMemo(() => getStyles(theme), [theme]);
+  const mainLampColors = useMemo(
+    () => getGradientColors(mood.mainLamp, defaultGreyGradient),
+    [mood.mainLamp, defaultGreyGradient]
+  );
+  const secondaryLampColors = useMemo(
+    () => getGradientColors(mood.secondaryLamp, defaultGreyGradient),
+    [mood.secondaryLamp, defaultGreyGradient]
+  );
 
-  return (
-    <Card style={[styles.card, props.style]} onPress={props.onPress}>
-      <View style={styles.contentContainer}>
-        <View style={styles.row}>
-          <Text style={styles.headText}>{mood.name}</Text>
-          <TouchableOpacity style={styles.checkbox} onPress={() => props.onSwitch(!props.enable)}>
-            <Image source={{ uri: res.ic_check }}
-                   style={[styles.checkboxImage, { tintColor: props.enable ? theme?.icon.primary : theme?.icon.disable }]}/>
-          </TouchableOpacity>
-        </View>
-        <Spacer height={cx(8)}/>
-        <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.row}>
-          <View style={styles.moodTypeLabel}>
-            <Text style={styles.moodTypeLabelText}>
-              {I18n.getLang(isDynamic ? 'mood_overview_field_chip_2' : 'mood_overview_field_chip_text')}
-            </Text>
-          </View>
+  const isMixLight = isMix || deviceTypeOption?.isMixLight;
+
+  const hasMainLampColors = mood.mainLamp.enable && mood.mainLamp.nodes.length > 0;
+  const hasSecondaryLampColors = mood.secondaryLamp.enable && mood.secondaryLamp.nodes.length > 0;
+
+  const renderContent = () => (
+    // 关键修改 1: contentContainer 使用 justifyContent: 'space-between'
+    <View style={styles.contentContainer}>
+      {/* 顶部内容 */}
+      <View style={styles.row}>
+        <Text style={styles.headText}>{mood.name}</Text>
+        {/* checkbox 的 TouchableOpacity 现在也应用了阴影样式 */}
+        <TouchableOpacity style={styles.checkbox} onPress={() => onSwitch(!enable)}>
+          <Image
+            source={{ uri: res.ic_check }}
+            style={[styles.checkboxImage, { tintColor: enable ? theme?.icon.primary : theme?.icon.disable }]}
+          />
+        </TouchableOpacity>
+      </View>
+
+      {/* 底部内容 (移除了 Spacer) */}
+      <View style={styles.row}>
+        <View style={styles.moodTypeLabel}>
+          <Text style={styles.moodTypeLabelText}>
+            {I18n.getLang(isDynamic ? 'mood_overview_field_chip_2' : 'mood_overview_field_chip_text')}
+          </Text>
         </View>
       </View>
-    </Card>
+    </View>
   );
-};
 
-// --- 【核心修正】 ---
-export function MixMoodColorsLine(props: {
-  mixSubLight: MoodLampInfo;
-  isMix: boolean;
-  type: 'gradient' | 'separate';
-  width?: number; // 外部传入的宽度（父组件已计算好）
-}) {
-  const { mixSubLight, isMix, type, width: propWidth } = props;
-  const [measuredWidth, setMeasuredWidth] = useState(0);
-
-  const handleLayout = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    if (width > 0 && width !== measuredWidth) {
-      setMeasuredWidth(width);
+  const renderBackground = () => {
+    if (!isMixLight) {
+      return <LinearGradient colors={mainLampColors} style={{ flex: 1 }} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} />;
     }
-  };
 
-  const lightColors = (mixSubLight.enable && mixSubLight.nodes.length > 0)
-    ? 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 finalWidth = propWidth || measuredWidth;
-
-  // 渲染颜色条的通用逻辑
-  const renderColorLine = () => (
-    finalWidth > 0 && (
-      <MoodColorsLine
-        nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
-        width={finalWidth}
-        type={type}
-        colors={lightColors}
-      />
-    )
-  );
+    if (hasMainLampColors && hasSecondaryLampColors) {
+      return (
+        <>
+          <LinearGradient colors={mainLampColors} style={{ flex: 1 }} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} />
+          <LinearGradient
+            colors={secondaryLampColors}
+            style={{ flex: 1 }}
+            start={{ x: 0, y: 0.5 }}
+            end={{ x: 1, y: 0.5 }}
+          />
+        </>
+      );
+    }
 
-  // 渲染右侧图标的通用逻辑
-  const renderIcon = () => (
-    isMix && (
-      <>
-        <Spacer width={cx(7)}/>
-        <View style={styles.mixLineIconView}>
-          <Image style={styles.mixLineIcon} source={{ uri: mixSubLight.enable ? res.light_on : res.light_off }}/>
-        </View>
-      </>
-    )
-  );
+    if (hasMainLampColors) {
+      return <LinearGradient colors={mainLampColors} style={{ flex: 1 }} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} />;
+    }
 
-  // Case 1: 父组件已经计算并传入了宽度 (最高效)
-  if (propWidth) {
-    return (
-      <View style={styles.mixLineRow}>
-        {renderColorLine()}
-        {renderIcon()}
-      </View>
-    );
-  }
+    if (hasSecondaryLampColors) {
+      return (
+        <LinearGradient colors={secondaryLampColors} style={{ flex: 1 }} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} />
+      );
+    }
+
+    return <LinearGradient colors={mainLampColors} style={{ flex: 1 }} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} />;
+  };
 
-  // Case 2: 自我测量模式 (回退方案)
   return (
-    <View style={styles.mixLineRow}>
-      {/* 这个 View (测量器) 会自动收缩以填充'颜色条'应占的空间 */}
-      <View style={{ flex: 1 }} onLayout={handleLayout}>
-        {renderColorLine()}
-      </View>
-      {/* 图标作为测量器的兄弟节点，Flexbox 会先为它分配空间 */}
-      {renderIcon()}
-    </View>
+    <TouchableOpacity activeOpacity={0.8} onPress={onPress} style={[styles.container, style || { marginHorizontal: cx(24), }]}>
+      <View style={styles.backgroundWrapper}>{renderBackground()}</View>
+      <View style={StyleSheet.absoluteFill}>{renderContent()}</View>
+    </TouchableOpacity>
   );
-}
+};
+
+const getStyles = (theme?: ThemeType) => {
+  const isDarkMode = theme?.type === 'dark';
+  const primaryTextColor = isDarkMode ? '#FFFFFF' : '#000000';
+  const shadowColor = isDarkMode ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)';
+  const tagBackgroundColor = isDarkMode ? 'rgba(0, 0, 0, 0.3)' : 'rgba(255, 255, 255, 0.5)';
+  const tagTextColor = isDarkMode ? '#FFFFFF' : '#333333';
+
+  return StyleSheet.create({
+    container: {
+      // marginHorizontal: cx(24),
+      height: cx(135),
+      ...Platform.select({
+        ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 8 },
+        android: { elevation: 5 },
+      }),
+    },
+    backgroundWrapper: {
+      flex: 1,
+      borderRadius: cx(16),
+      overflow: 'hidden',
+    },
+    // 关键修改 1: 使用 justifyContent 将内容推向两端
+    contentContainer: {
+      flex: 1,
+      paddingHorizontal: cx(16),
+      paddingVertical: cx(12),
+      backgroundColor: 'transparent',
+      justifyContent: 'space-between', // 使顶部和底部内容分别贴近上下边缘
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    headText: {
+      flex: 1,
+      fontSize: cx(16),
+      lineHeight: cx(20),
+      fontWeight: 'bold',
+      color: primaryTextColor,
+      textShadowColor: shadowColor,
+      textShadowOffset: { width: 0, height: 1 },
+      textShadowRadius: 3,
+    },
+    // 关键修改 2: 为 checkbox 添加阴影
+    checkbox: {
+      width: cx(45),
+      height: cx(45),
+      marginRight: cx(-10),
+      justifyContent: 'center',
+      alignItems: 'flex-end',
+      // 添加一个通用的深色阴影以提供对比度
+      ...Platform.select({
+        ios: {
+          shadowColor: 'rgba(0, 0, 0, 0.4)',
+          shadowOffset: { width: 0, height: 1 },
+          shadowRadius: 2,
+          shadowOpacity: 1,
+        },
+        android: {
+          elevation: 3,
+        },
+      }),
+    },
+    checkboxImage: {
+      width: cx(44),
+      height: cx(44),
+    },
+    moodTypeLabel: {
+      paddingHorizontal: cx(12.5),
+      paddingVertical: cx(4),
+      borderRadius: cx(8),
+      backgroundColor: tagBackgroundColor,
+    },
+    moodTypeLabelText: {
+      fontSize: cx(10),
+      lineHeight: cx(12),
+      color: tagTextColor,
+      fontWeight: '500',
+    },
+  });
+};
 
-const getStyles = (theme?: ThemeType) => StyleSheet.create({
-  card: {
-    marginHorizontal: cx(24),
-    padding: 0,
-    borderRadius: cx(16),
-  },
-  contentContainer: {
-    paddingHorizontal: cx(16),
-    paddingTop: cx(8),
-    paddingBottom: cx(16),
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  headText: {
-    flex: 1,
-    color: theme?.global.fontColor,
-    fontSize: cx(16),
-    lineHeight: cx(20),
-  },
-  checkbox: {
-    width: cx(45),
-    height: cx(45),
-    marginRight: cx(-10),
-    justifyContent: 'center',
-    alignItems: 'flex-end',
-  },
-  checkboxImage: {
-    width: cx(44),
-    height: cx(44),
-  },
-  moodTypeLabel: {
-    paddingHorizontal: cx(12.5),
-    backgroundColor: theme?.tag.background,
-    borderRadius: cx(8),
-  },
-  moodTypeLabelText: {
-    height: cx(16),
-    color: theme?.tag.fontColor,
-    fontSize: cx(10),
-    lineHeight: cx(16),
-  },
-});
-
-const styles = StyleSheet.create({
-  mixLineRow: { flexDirection: 'row', alignItems: 'center' },
-  mixLineIconView: {
-    width: cx(24),
-    height: cx(24),
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#aaa',
-    borderRadius: cx(8),
-  },
-  mixLineIcon: { width: cx(16), height: cx(16), tintColor: '#fff' },
-});
-
-export default withTheme(MoodItem);
+export default withTheme(MoodItem);

package/src/newModules/mood/MoodPage.tsx

@@ -30,10 +30,19 @@ import I18n from '@ledvance/base/src/i18n';
 import ThemeType from '@ledvance/base/src/config/themeType'
 
 
-const cx = Utils.RatioUtils.convertX;
+const { convertX: cx, width: screenWidth } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 
 const MAX_MOOD_COUNT = 255;
+// --- 动态计算项目宽度 ---
+// 1. 定义网格的边距和列间距
+const GRID_HORIZONTAL_PADDING = cx(24);
+const GRID_GAP = cx(16);
+const NUM_COLUMNS = 2;
+// 2. 计算每个 MoodItem 的宽度
+// (屏幕总宽度 - 两边的边距 - (列数 - 1) * 列间距) / 列数
+const ITEM_WIDTH =
+  (screenWidth - GRID_HORIZONTAL_PADDING * 2 - (NUM_COLUMNS - 1) * GRID_GAP) / NUM_COLUMNS;
 
 const MoodPage = (props: { theme?: ThemeType }) => {
   const params = useParams<MoodPageParams>();
@@ -319,6 +328,13 @@ const MoodPage = (props: { theme?: ThemeType }) => {
       alignItems: 'flex-start',
       alignSelf: 'flex-start'
     },
+    refresh: {
+      alignItems: 'flex-end',
+      paddingRight: cx(24)
+    },
+    columnWrapperStyle: {
+      justifyContent: 'space-between',
+    },
   })
 
   return (
@@ -353,18 +369,19 @@ const MoodPage = (props: { theme?: ThemeType }) => {
                 }}
             />
         </View>}
-        <TouchableOpacity style={{ alignItems: 'flex-end',paddingRight: cx(24) }}
-                          onPress={() => {
-                            showDialog({
-                              method: 'confirm',
-                              title: I18n.getLang('mood_resetbutton'),
-                              subTitle: I18n.getLang('reset_mooddescription'),
-                              onConfirm: async (_, { close }) => {
-                                close()
-                                await getRemoteMoodInfo(true)
-                              }
-                            })
-                          }}
+        <TouchableOpacity
+          style={styles.refresh}
+          onPress={() => {
+            showDialog({
+              method: 'confirm',
+              title: I18n.getLang('mood_resetbutton'),
+              subTitle: I18n.getLang('reset_mooddescription'),
+              onConfirm: async (_, { close }) => {
+                close()
+                await getRemoteMoodInfo(true)
+              }
+            })
+          }}
         >
           <Image source={{uri: res.ic_refresh}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
         </TouchableOpacity>
@@ -382,9 +399,21 @@ const MoodPage = (props: { theme?: ThemeType }) => {
         )}
         <FlatList
           data={state.filterMoods}
+          // 关键属性 1: 设置列数
+          numColumns={NUM_COLUMNS}
+          // 关键属性 2: 为 FlatList 提供一个唯一的 key，当列数改变时强制刷新
+          key={NUM_COLUMNS}
+          // 关键属性 3: 设置整个列表容器的样式，主要是左右边距
+          contentContainerStyle={{
+            paddingHorizontal: GRID_HORIZONTAL_PADDING,
+          }}
+          // 关键属性 4: 设置行包装器的样式，用于在列之间创建间距
+          columnWrapperStyle={styles.columnWrapperStyle}
           renderItem={({ item }) => {
             return (
               <MoodItem
+                // 关键修改：通过 style prop 传入计算好的宽度
+                style={{ width: ITEM_WIDTH }}
                 enable={getItemEnable(item)}
                 isMix={!!(params.isMixLight || params.isCeilingLight)}
                 mood={item}

package/src/newModules/mood/RecommendMoodItem.tsx

@@ -7,7 +7,7 @@ import Spacer from '@ledvance/base/src/components/Spacer';
 import ThemeType from '@ledvance/base/src/config/themeType';
 
 import { MoodJumpGradientMode, MoodUIInfo } from './Interface';
-import { MixMoodColorsLine } from './MoodItem'; // 从 MoodItem.tsx 导入重构后的组件
+import MixMoodColorsLine from './MixMoodColorsLine';
 
 const cx = Utils.RatioUtils.convertX;
 const { withTheme } = Utils.ThemeUtils;