@ledvance/group-ui-biz-bundle 1.0.151 → 1.0.153

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.151",
+  "version": "1.0.153",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",
@@ -17,6 +17,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",
     "tuya-panel-kit": "^4.9.4"

package/src/modules/biorhythm/BiorhythmPage.tsx

@@ -245,26 +245,37 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
     <Page
       backText={uaGroupInfo.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: `${uaGroupInfo.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.repeatPeriod, state.planList)
-              close()
-            }
-          })
-        }} />
-        <DeleteButton style={{flex: 1}} text={I18n.getLang('biorhythm_load')} onPress={() => {
-          setBiorhythmListVisible(true)
-        }} />
-      </View>}
+      headlineTopContent={
+        <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
+          <TouchableOpacity
+            style={{paddingLeft: cx(16)}}
+            onPress={() => {
+              Dialog.prompt({
+                title: I18n.getLang('biorhythm_save_title'),
+                placeholder: I18n.getLang('biorhythm_save_placeholder'),
+                defaultValue: `${uaGroupInfo.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.repeatPeriod, state.planList)
+                  close()
+                }
+              })
+            }}
+          >
+            <Image source={res.icon_save} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={{paddingLeft: cx(16)}}
+            onPress={() => {
+              setBiorhythmListVisible(true)
+            }}
+          >
+            <Image source={res.icon_import} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+          </TouchableOpacity>
+        </View>}
       headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
       headlineIconContent={<Switch
         value={state.enable}

package/src/modules/diyScene/DiyScenePage.tsx

@@ -177,6 +177,9 @@ const DiyScenePage = (props: { theme?: ThemeType }) => {
     infoLine: {
       marginHorizontal: cx(24),
     },
+    rightIconView: {
+      flexDirection: 'row'
+    },
     addMoodPopover: {
       position: 'absolute',
       right: cx(60),
@@ -189,6 +192,9 @@ const DiyScenePage = (props: { theme?: ThemeType }) => {
       alignItems: 'flex-start',
       alignSelf: 'flex-start'
     },
+    refresh: {
+      paddingLeft: cx(24)
+    },
   })
 
   return (
@@ -196,10 +202,33 @@ const DiyScenePage = (props: { theme?: ThemeType }) => {
       <Page
         backText={uaGroupInfo.name}
         headlineText={I18n.getLang('mood_overview_headline_text')}
-        headlineIcon={state.originScenes.length < MAX_MOOD_COUNT ? res.add : undefined}
-        onHeadlineIconClick={() => {
-          navigationRoute('add', cloneDeep(DEFAULT_SCENE))
-        }}
+        headlineIconContent={<View style={styles.rightIconView}>
+          <TouchableOpacity
+            style={styles.refresh}
+            onPress={() => {
+              showDialog({
+                method: 'confirm',
+                title: I18n.getLang('mood_resetbutton'),
+                subTitle: I18n.getLang('reset_mooddescription'),
+                onConfirm: async (_, { close }) => {
+                  close()
+                  resetMixScenes().then();
+                }
+              })
+            }}
+          >
+            <Image source={{uri: res.ic_refresh}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+          </TouchableOpacity>
+          {state.originScenes.length < MAX_MOOD_COUNT && <TouchableOpacity
+              style={styles.refresh}
+              onPress={() => {
+                navigationRoute('add', cloneDeep(DEFAULT_SCENE))
+              }}
+          >
+              <Image source={{uri: res.add}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.brand }} />
+          </TouchableOpacity>
+          }
+        </View>}
         loading={state.loading}
       >
         <View style={styles.tagLine}>
@@ -227,21 +256,6 @@ const DiyScenePage = (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()
-                                resetMixScenes().then();
-                              }
-                            })
-                          }}
-        >
-          <Image source={{uri: res.ic_refresh}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
-        </TouchableOpacity>
         <Spacer height={cx(10)} />
         {state.originScenes.length >= MAX_MOOD_COUNT && (
           <View style={styles.infoLine}>

package/src/modules/mood_new/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/modules/mood_new/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,
   ];
 }
@@ -521,6 +498,55 @@ function getStringLightSceneList(): RemoteMoodInfo[] {
       t: 0,
       e: false,
     },
+    {
+      n: I18n.getLang('strip_lights_mood_text45'),
+      i: '0125101e1e0000003700a032000000003700c3640000000037011364000000003700782800000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text46'),
+      i: '01261014140000002d00174a000000002d002348000000002d001e24000000002d00014000000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text47'),
+      i: '01270a555500000055012c64000000005500b4640000000055010f51000000005501485c00000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text48'),
+      i: '01281028280000003700d258000000003700b564000000003700b152000000003700f06400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text49'),
+      i: '0129100f0f0000002300784c000000002300504b0000000023005238000000002300545200000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text50'),
+      i: '012a0a5050000000640000640000000064007864000000006400f0640000000064003c640000000064012c6400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text51'),
+      i: '012b1032320000001e00f04e000000001e011364000000001e00b42900000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
   ];
 }
 
@@ -834,6 +860,55 @@ function getStripLightSceneList(): RemoteMoodInfo[] {
       t: 0,
       e: false,
     },
+    {
+      n: I18n.getLang('strip_lights_mood_text45'),
+      i: '013b011e1e6000003700a03200c364011364007828',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text46'),
+      i: '013c0114146000002d00174a002348001e24000140',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text47'),
+      i: '013d02555560000055012c6400b464010f5101485c',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text48'),
+      i: '013e0128286000003700d25800b56400b15200f064',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text49'),
+      i: '013f010f0f6000002300784c00504b005238005452',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text50'),
+      i: '01400250506000006400006400786400f064003c64012c64',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text51'),
+      i: '01410132326000001e00f04e01136400b429',
+      s: '',
+      t: 0,
+      e: false,
+    },
   ];
 }
 
@@ -1175,6 +1250,55 @@ function getMixCeilingLightList(): RemoteMoodInfo[] {
       t: 0,
       e: false,
     },
+    {
+      n: I18n.getLang('strip_lights_mood_text45'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013b011e1e6000003700a03200c364011364007828',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text46'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013c0114146000002d00174a002348001e24000140',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text47'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013d02555560000055012c6400b464010f5101485c',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text48'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013e0128286000003700d25800b56400b15200f064',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text49'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013f010f0f6000002300784c00504b005238005452',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text50'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '01400250506000006400006400786400f064003c64012c64',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text51'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '01410132326000001e00f04e01136400b429',
+      t: 0,
+      e: false,
+    },
   ];
 }
 
@@ -1200,12 +1324,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: '',
@@ -1429,6 +1547,55 @@ const defColorSceneList: RemoteMoodInfo[] = [
     t: 0,
     e: false,
   },
+  {
+    n: I18n.getLang('strip_lights_mood_text45'),
+    i: '251e1e0200a001f40226000000001e1e0200c303e80226000000001e1e02011303e80226000000001e1e0200780190022600000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text46'),
+    i: '26141402001702e401c200000000141402002302d001c200000000141402001e016801c2000000001414020001028001c200000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text47'),
+    i: '27555501012c03e803520000000055550100b403e8035200000000555501010f032a03520000000055550101480398035200000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text48'),
+    i: '2828280200d2037002260000000028280200b503e802260000000028280200b1033402260000000028280200f003e8022600000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text49'),
+    i: '290f0f02007802f8015e000000000f0f02005002ee015e000000000f0f0200520230015e000000000f0f0200540334015e00000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text50'),
+    i: '2a505001000003e803e800000000505001007803e803e80000000050500100f003e803e800000000505001003c03e803e800000000505001012c03e803e800000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text51'),
+    i: '2b32320200f0030c012c00000000323202011303e8012c0000000032320200b4019a012c00000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
 ];
 
 const defMixColorSceneList: MixRemoteMoodInfo[] = [
@@ -1582,6 +1749,41 @@ const defMixColorSceneList: MixRemoteMoodInfo[] = [
     image: '',
     value: '002400000103034b4b0200d203e803e84b4b0200b403e803e84b4b02009603e803e8',
   },
+  {
+    name: I18n.getLang('strip_lights_mood_text45'),
+    image: '',
+    value: '002500000104031e1e0200a001f402261e1e0200c303e802261e1e02011303e802261e1e02007801900226',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text46'),
+    image: '',
+    value: '00260000010403141402001702e401c2141402002302d001c2141402001e016801c21414020001028001c2',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text47'),
+    image: '',
+    value: '00270000010403555501012c03e8035255550100b403e80352555501010f032a0352555501014803980352',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text48'),
+    image: '',
+    value: '0028000001040328280200d20370022628280200b503e8022628280200b10334022628280200f003e80226',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text49'),
+    image: '',
+    value: '002900000104030f0f02007802f8015e0f0f02005002ee015e0f0f0200520230015e0f0f0200540334015e',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text50'),
+    image: '',
+    value: '002a0000010503505001000003e803e8505001007803e803e850500100f003e803e8505001003c03e803e8505001012c03e803e8',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text51'),
+    image: '',
+    value: '002b000001030332320200f0030c012c323202011303e8012c32320200b4019a012c',
+  },
 ];
 
 export type RecommendMood = {

package/src/modules/mood_new/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/modules/mood_new/MoodPage.tsx

@@ -9,7 +9,7 @@ import {
   useSwitchLed,
   useWorkMode
 } from './MoodActions';
-import {useMoods, useUAGroupInfo,} from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { useIsPad, useMoods, useUAGroupInfo, } from '@ledvance/base/src/models/modules/NativePropsSlice'
 import {useReactive} from 'ahooks';
 import Strings from '@ledvance/base/src/i18n';
 import I18n from '@ledvance/base/src/i18n';
@@ -30,12 +30,17 @@ import {WorkMode} from '@ledvance/base/src/utils/interface';
 import ThemeType from '@ledvance/base/src/config/themeType'
 import {showDialog} from '@ledvance/base/src/utils/common';
 
-const cx = Utils.RatioUtils.convertX;
+const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 
 const MAX_MOOD_COUNT = 255;
 
+// --- 将布局常量移到这里，方便管理 ---
+const OPTIMAL_ITEM_WIDTH = cx(160); // 定义一个在所有设备上看起来都很好的“最佳宽度”
+const GRID_GAP = cx(16);
+
 const MoodPage = (props: {theme?: ThemeType}) => {
+  // ... (所有 hooks 和 state 定义保持不变) ...
   const params = useParams<MoodPageParams>();
   const uaGroupInfo = useUAGroupInfo()
   const navigation = useNavigation();
@@ -45,6 +50,7 @@ const MoodPage = (props: {theme?: ThemeType}) => {
   const rgbicWorkMode = useRgbicWorkMode()
   const [moods, setMoods] = useMoods();
   const [flagMode, setFlagMode] = useFlagMode();
+  const isPad = useIsPad()
   const state = useReactive<MoodPageState>({
     currentMood: undefined,
     staticTagChecked: true,
@@ -57,6 +63,28 @@ const MoodPage = (props: {theme?: ThemeType}) => {
     flag: Symbol(),
   });
 
+  // --- 关键逻辑 1: 基于 isPad 决定列数，并计算出 FlatList 自身所需的总宽度 ---
+  const { numColumns, flatListWidth } = useMemo(() => {
+    const cols = isPad ? 3 : 2;
+    // FlatList 的总宽度 = (项目数 * 项目宽度) + (项目数 - 1) * 间距
+    const listWidth = cols * OPTIMAL_ITEM_WIDTH + (cols - 1) * GRID_GAP;
+    return {
+      numColumns: cols,
+      flatListWidth: listWidth,
+    };
+  }, [isPad]);
+  // --- 关键逻辑 2: 准备幽灵元素数据 (逻辑不变) ---
+  const gridData = useMemo(() => {
+    const data = state.filterMoods;
+    const numToPad = numColumns - (data.length % numColumns);
+    if (numToPad === numColumns) {
+      return data;
+    }
+    const ghostItems = Array.from({ length: numToPad }, (_, i) => ({ name: `ghost-${i}`, isGhost: true }));
+    return [...data, ...ghostItems];
+  }, [state.filterMoods, numColumns]);
+
+  // ... (所有 useEffect 和函数逻辑保持不变) ...
   const moodIds = useMemo(() => {
     // @ts-ignore
     const mainIds = map(params.isCeilingLight ? (state.originMoods.map(m => m.mainLamp) || []) : state.originMoods, 'id').filter(v => v !== undefined)
@@ -270,6 +298,9 @@ const MoodPage = (props: {theme?: ThemeType}) => {
     infoLine: {
       marginHorizontal: cx(24),
     },
+    rightIconView: {
+      flexDirection: 'row'
+    },
     addMoodPopover: {
       position: 'absolute',
       right: cx(60),
@@ -281,6 +312,18 @@ const MoodPage = (props: {theme?: ThemeType}) => {
       padding: cx(5),
       alignItems: 'flex-start',
     },
+    refresh: {
+      paddingLeft: cx(24)
+    },
+    // 重新启用 columnWrapperStyle
+    columnWrapperStyle: {
+      justifyContent: 'space-between',
+    },
+    // --- 关键逻辑 3: 新增列表容器样式 ---
+    listContainer: {
+      flex: 1,
+      alignItems: 'center', // 让内部的 FlatList 水平居中
+    },
   })
 
   return (
@@ -288,14 +331,37 @@ const MoodPage = (props: {theme?: ThemeType}) => {
       <Page
         backText={uaGroupInfo.name}
         headlineText={Strings.getLang('mood_overview_headline_text')}
-        headlineIcon={state.originMoods.length < MAX_MOOD_COUNT ? res.add : undefined}
-        onHeadlineIconClick={() => {
-          if (params.isStringLight || params.isStripLight) {
-            onAddMoodDialogItemClick(false, 1);
-          } else {
-            state.showAddMoodPopover = !state.showAddMoodPopover;
+        headlineIconContent={<View style={styles.rightIconView}>
+          <TouchableOpacity
+            style={styles.refresh}
+            onPress={() => {
+              showDialog({
+                method: 'confirm',
+                title: I18n.getLang('mood_resetbutton'),
+                subTitle: I18n.getLang('reset_mooddescription'),
+                onConfirm: (_, { close }) => {
+                  close()
+                  getMoodList(true)
+                }
+              })
+            }}
+          >
+            <Image source={{uri: res.ic_refresh}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+          </TouchableOpacity>
+          {state.originMoods.length < MAX_MOOD_COUNT && <TouchableOpacity
+              style={styles.refresh}
+              onPress={() => {
+                if (params.isStringLight || params.isStripLight) {
+                  onAddMoodDialogItemClick(false, 1);
+                } else {
+                  state.showAddMoodPopover = !state.showAddMoodPopover;
+                }
+              }}
+          >
+              <Image source={{uri: res.add}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.brand }} />
+          </TouchableOpacity>
           }
-        }}
+        </View>}
         loading={state.loading}
       >
         {!params.isStripLight && !params.isStringLight && <View style={styles.tagLine}>
@@ -315,21 +381,6 @@ 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: (_, { close }) => {
-                close()
-                getMoodList(true)
-              }
-            })
-          }}
-        >
-          <Image source={{uri: res.ic_refresh}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
-        </TouchableOpacity>
         <Spacer height={cx(10)} />
         {state.originMoods.length >= MAX_MOOD_COUNT && (
           <View style={styles.infoLine}>
@@ -342,32 +393,44 @@ const MoodPage = (props: {theme?: ThemeType}) => {
             <Spacer height={cx(6)} />
           </View>
         )}
-        <FlatList
-          data={state.filterMoods}
-          renderItem={({ item }) => {
-            return (
-              <MoodItem
-                enable={getItemEnable(item)}
-                isMix={!!(params.isMixLight || params.isCeilingLight)}
-                deviceTypeOption={params}
-                mood={item}
-                onPress={() => {
-                  navigationRoute(item.mainLamp.nodes.length === 1, 'edit', item);
-                }}
-                onSwitch={async _ => {
-                  state.loading = true;
-                  await modDeleteMood('set', item);
-                  updateFlagMode();
-                  state.loading = false;
-                }}
-              />
-            );
-          }}
-          ListHeaderComponent={() => <Spacer height={cx(10)} />}
-          ItemSeparatorComponent={() => <Spacer />}
-          ListFooterComponent={() => <Spacer />}
-          keyExtractor={item => `${item.name}`}
-        />
+        <View style={styles.listContainer}>
+          <FlatList
+            data={gridData}
+            numColumns={numColumns}
+            key={numColumns}
+            style={{ width: flatListWidth }} // 给 FlatList 一个固定的总宽度
+            // 移除 contentContainerStyle
+            columnWrapperStyle={styles.columnWrapperStyle}
+            renderItem={({ item }) => {
+              if (item.isGhost) {
+                return <View style={{ width: OPTIMAL_ITEM_WIDTH, marginBottom: cx(16) }} />;
+              }
+
+              return (
+                <MoodItem
+                  style={{ width: OPTIMAL_ITEM_WIDTH }} // 所有项目都使用最佳宽度
+                  enable={getItemEnable(item)}
+                  isMix={!!(params.isMixLight || params.isCeilingLight)}
+                  deviceTypeOption={params}
+                  mood={item}
+                  onPress={() => {
+                    navigationRoute(item.mainLamp.nodes.length === 1, 'edit', item);
+                  }}
+                  onSwitch={async _ => {
+                    state.loading = true;
+                    await modDeleteMood('set', item);
+                    updateFlagMode();
+                    state.loading = false;
+                  }}
+                />
+              );
+            }}
+            ListHeaderComponent={() => <Spacer height={cx(10)} />}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListFooterComponent={() => <Spacer />}
+            keyExtractor={item => `${item.name}`}
+          />
+        </View>
       </Page>
       <CustomListDialog
         show={state.showAddMoodPopover}
@@ -393,4 +456,4 @@ const MoodPage = (props: {theme?: ThemeType}) => {
 };
 
 
-export default withTheme(MoodPage)
+export default withTheme(MoodPage)

package/src/modules/mood_new/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;

package/src/modules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -410,7 +410,7 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
         />
         <Spacer />
         <Text style={{ ...styles.cardContainer, color: props.theme?.global.fontColor, fontSize: cx(14) }}>
-          {loopText(state.timeSchedule.loops.split(''))}
+          {loopText(state.timeSchedule.loops.split(''), state.timeSchedule.time)}
         </Text>
         <Spacer height={cx(30)} />