@ledvance/group-ui-biz-bundle 1.0.146 → 1.0.148

package/package.json

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

package/src/modules/flags/FlagInfo.tsx

@@ -608,6 +608,42 @@ export const defFlagList: FlagUiInfo[] = [
     ...defFlagConfig,
     colors: [{"h":0,"s":0,"v":100}, {"h":160,"s":80,"v":34}],
   },
+  {
+    id: 160,
+    name: I18n.getLang('country_KR'),
+    ...defFlagConfig,
+    colors: [{"h":0,"s":0,"v":100}, {"h":355,"s":78,"v":80}, {"h":213,"s":93,"v":80}],
+  },
+  {
+    id: 159,
+    name: I18n.getLang('country_HT'),
+    ...defFlagConfig,
+    colors: [{"h":228,"s":100,"v":62}, {"h":349,"s":92,"v":82}, {"h":0,"s":0,"v":100}],
+  },
+  {
+    id: 158,
+    name: I18n.getLang('country_CW'),
+    ...defFlagConfig,
+    colors: [{"h":220,"s":100,"v":50}, {"h":56,"s":92,"v":98}, {"h":0,"s":0,"v":100}],
+  },
+  {
+    id: 157,
+    name: I18n.getLang('country_SN'),
+    ...defFlagConfig,
+    colors: [{"h":148,"s":100,"v":52}, {"h":56,"s":74,"v":99}, {"h":358,"s":88,"v":89}],
+  },
+  {
+    id: 156,
+    name: I18n.getLang('country_DZ'),
+    ...defFlagConfig,
+    colors: [{"h":150,"s":100,"v":40}, {"h":0,"s":0,"v":100}, {"h":349,"s":92,"v":82}],
+  },
+  {
+    id: 155,
+    name: I18n.getLang('country_UZ'),
+    ...defFlagConfig,
+    colors: [{"h":207,"s":100,"v":81}, {"h":0,"s":0,"v":100}, {"h":109,"s":76,"v":69}],
+  },
 ]
 
 export const def2Pids = ['k588eygmfkdzmpzm']

package/src/modules/flags/FlagItem.tsx

@@ -1,81 +1,143 @@
-import { StyleSheet, View, Text, ViewStyle, Image, TouchableOpacity } from 'react-native'
-import React from 'react'
-import Card from '@ledvance/base/src/components/Card'
-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"
+import { StyleSheet, View, Text, ViewStyle, Image, TouchableOpacity, LayoutChangeEvent } from 'react-native';
+import React, { useMemo, useState } from 'react'; // 引入 Hooks
+import Card from '@ledvance/base/src/components/Card';
+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
+const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils;
 
+// 1. 将边距定义为常量，便于计算和维护
+const CONTENT_HORIZONTAL_MARGIN = cx(16);
+
+// 2. 更新 Props 接口，添加可选的 containerWidth
 interface RecommendMoodItemProps {
-  theme?: ThemeType
-  enable: boolean
-  title: string
-  colors: string[]
-  icon?: number | string
-  style?: ViewStyle
-  onPress?: () => void
-  onSwitch: (enable: boolean) => void
+  theme?: ThemeType;
+  enable: boolean;
+  title: string;
+  colors: string[];
+  icon?: number | string;
+  style?: ViewStyle;
+  containerWidth?: number; // 变为可选属性
+  onPress?: () => void;
+  onSwitch: (enable: boolean) => void;
 }
 
+// 3. 将样式创建移到外部，提升性能
+const getStyles = (theme?: ThemeType) => StyleSheet.create({
+  card: {
+    marginHorizontal: cx(24),
+    // 移除内边距，以便测量 Card 自身的准确宽度
+    paddingHorizontal: 0,
+  },
+  headline: {
+    flexDirection: 'row',
+    marginHorizontal: CONTENT_HORIZONTAL_MARGIN,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  headText: {
+    color: theme?.global.fontColor,
+    fontSize: cx(16),
+    lineHeight: cx(20),
+    flex: 1
+  },
+  checkbox: {
+    width: cx(45),
+    height: cx(45),
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  checkboxImage: {
+    width: cx(44),
+    height: cx(44),
+  },
+  // 这个容器只负责布局，不负责测量
+  lineContainer: {
+    marginHorizontal: CONTENT_HORIZONTAL_MARGIN,
+    minHeight: cx(24), // 设定最小高度防止布局跳动
+  },
+  icon: {
+    width: cx(60),
+    aspectRatio: 2.14,
+    marginRight: cx(10),
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    paddingRight: cx(5),
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  }
+});
+
+
 const FlagItem = (props: RecommendMoodItemProps) => {
-  const icon = typeof props.icon === 'number' ? props.icon : { uri: props.icon }
+  const { theme, containerWidth, enable, title, colors, icon: iconProp, style, onPress, onSwitch } = props;
+  const styles = useMemo(() => getStyles(theme), [theme]);
+  const icon = typeof iconProp === 'number' ? iconProp : { uri: iconProp };
 
-  const styles = StyleSheet.create({
-    card: {
-      marginHorizontal: cx(24),
-    },
-    headline: {
-      flexDirection: 'row',
-      marginHorizontal: cx(16),
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    },
-    headText: {
-      color: props.theme?.global.fontColor,
-      fontSize: cx(16),
-      // fontFamily: 'helvetica_neue_lt_std_bd',
-      lineHeight: cx(20),
-      flex: 1
-    },
-    checkbox: {
-      width: cx(45),
-      height: cx(45),
-      marginTop: cx(-5),
-      marginBottom: cx(-10),
-    },
-    gradientItem: {
-      alignItems: 'center',
-    },
-    gradient: {
-      borderRadius: cx(8),
-    },
-  })
+  // 4. 添加 state 用于自我测量
+  const [selfMeasuredWidth, setSelfMeasuredWidth] = useState(0);
+
+  // 5. 创建 onLayout 回调
+  const handleLayout = (event: LayoutChangeEvent) => {
+    // 如果父组件已提供宽度，则忽略自我测量
+    if (containerWidth && containerWidth > 0) {
+      return;
+    }
+    const { width: cardWidth } = event.nativeEvent.layout;
+    if (cardWidth > 0 && cardWidth !== selfMeasuredWidth) {
+      setSelfMeasuredWidth(cardWidth);
+    }
+  };
+
+  // 6. 智能决策最终宽度
+  const finalLineWidth = useMemo(() => {
+    const cardOuterMargin = cx(24);
+    // 优先使用父组件传入的宽度 (用于 FlatList)
+    if (containerWidth && containerWidth > 0) {
+      return containerWidth - (cardOuterMargin * 2) - (CONTENT_HORIZONTAL_MARGIN * 2);
+    }
+    // 其次使用自我测量的宽度 (用于普通 View)
+    if (selfMeasuredWidth > 0) {
+      return selfMeasuredWidth - (CONTENT_HORIZONTAL_MARGIN * 2);
+    }
+    return 0;
+  }, [containerWidth, selfMeasuredWidth]);
 
   return (
+    // 7. 绑定 onLayout 以启用自我测量
     <Card
-      style={[styles.card, props.style]}
-      onPress={props.onPress}>
-      <View accessibilityLabel={'FlagItem'} accessibilityHint={`${props.title}`}>
-        <Spacer height={cx(16)} />
+      style={[styles.card, style]}
+      onPress={onPress}
+      onLayout={handleLayout}
+    >
+      <View accessibilityLabel={'FlagItem'} accessibilityHint={`${title}`}>
+        <Spacer height={cx(8)} />
         <View style={styles.headline}>
-          <View style={{ flexDirection: 'row', flex: 1, paddingRight: cx(5), justifyContent: 'flex-start' }}>
-            {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 style={styles.titleContainer}>
+            {title ? <Text style={styles.headText}>{title}</Text> : null}
+            {iconProp ? <Image source={icon} style={styles.icon} /> : null}
           </View>
-          <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 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.gradientItem}>
-          <MoodColorsLine
-            type={'separate'}
-            nodeStyle={{ borderColor: props.theme?.card.border, borderWidth: 1 }}
-            colors={props.colors} />
+        <View style={styles.lineContainer}>
+          {/* 8. 使用最终计算的宽度进行渲染 */}
+          {finalLineWidth > 0 && (
+            <MoodColorsLine
+              type={'separate'}
+              width={finalLineWidth}
+              nodeStyle={{ borderColor: theme?.card.border, borderWidth: 1 }}
+              colors={colors}
+            />
+          )}
         </View>
         <Spacer height={cx(16)} />
       </View>

package/src/modules/flags/FlagPage.tsx

@@ -1,7 +1,7 @@
-import React, {useEffect} from "react";
+import React, { useEffect, useState } from 'react'
 import Page from "@ledvance/base/src/components/Page";
 import {useFlags, useGroupDp, useUAGroupInfo} from "@ledvance/base/src/models/modules/NativePropsSlice";
-import {FlatList, Image, TouchableOpacity, View} from "react-native";
+import { FlatList, Image, LayoutChangeEvent, TouchableOpacity, View } from 'react-native'
 import Spacer from "@ledvance/base/src/components/Spacer";
 import {Utils} from "tuya-panel-kit";
 import FlagItem from "./FlagItem";
@@ -60,6 +60,16 @@ const FlagPage = (props: { theme?: ThemeType }) => {
     state.filterFlags = state.searchText !== '' ? cloneDeep(state.flags).filter(flag => (flag.name ?? '').toLowerCase().includes(state.searchText.toLowerCase())) : cloneDeep(state.flags)
   }, [state.searchText, state.flags])
 
+  // 3. 在父组件中创建 state 存储容器宽度
+  const [listContainerWidth, setListContainerWidth] = useState(0);
+  // 4. 创建 onLayout 回调函数
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    if (width > 0 && width !== listContainerWidth) {
+      setListContainerWidth(width);
+    }
+  };
+
   const getRemoteFlagInfo = async (isRefresh?: boolean) => {
     const defNum = uaGroupInfo.groupDevices.filter(device => !(def2Pids.includes(device.tyPid) || def3Pids.includes(device.tyPid))).length
     const def2Num = uaGroupInfo.groupDevices.filter(device => def2Pids.includes(device.tyPid)).length
@@ -149,6 +159,7 @@ const FlagPage = (props: { theme?: ThemeType }) => {
       }}
       loading={state.loading}
     >
+      <View style={{ flex: 1 }} onLayout={handleLayout}>
       <View style={{flexDirection: 'row', display: 'flex', alignItems: 'center'}}>
         <TextField
           value={state.searchText}
@@ -180,31 +191,36 @@ const FlagPage = (props: { theme?: ThemeType }) => {
                  style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }}/>
         </TouchableOpacity>
       </View>
-      <FlatList
-        data={state.filterFlags}
-        renderItem={({ item }) => <FlagItem
-          enable={flagMode?.flagId === item.id && flagMode?.flagMode && switch_led}
-          title={item.name}
-          icon={item.icon}
-          colors={item.colors.map(item => hsv2Hex(item.h, item.s, item.v)).reverse()}
-          onSwitch={async (enable) => {
-            if (enable) {
-              state.loading = true
-              await setFlag({
-                flag: cloneDeep(item),
-              })
-              state.loading = false
-            }
-          }}
-          onPress={() => {
-            navigationRoute('edit', item)
-          }}
-        />}
-        keyExtractor={item => item.name}
-        ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
-        ItemSeparatorComponent={() => (<Spacer />)}
-        ListFooterComponent={() => (<Spacer />)}
-      />
+        {listContainerWidth > 0 && (
+          <FlatList
+            data={state.filterFlags}
+            renderItem={({ item }) => <FlagItem
+              enable={flagMode?.flagId === item.id && flagMode?.flagMode && switch_led}
+              title={item.name}
+              icon={item.icon}
+              colors={item.colors.map(item => hsv2Hex(item.h, item.s, item.v)).reverse()}
+              // 7. 【关键】将测量到的宽度传递给子组件
+              containerWidth={listContainerWidth}
+              onSwitch={async (enable) => {
+                if (enable) {
+                  state.loading = true
+                  await setFlag({
+                    flag: cloneDeep(item),
+                  })
+                  state.loading = false
+                }
+              }}
+              onPress={() => {
+                navigationRoute('edit', item)
+              }}
+            />}
+            keyExtractor={item => item.name}
+            ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+            ItemSeparatorComponent={() => (<Spacer />)}
+            ListFooterComponent={() => (<Spacer />)}
+          />
+        )}
+      </View>
     </Page>
   )
 }

package/src/modules/mood_new/AddMoodPage.tsx

@@ -1,39 +1,30 @@
-import Strings from '@ledvance/base/src/i18n';
-import Page from '@ledvance/base/src/components/Page';
-import React, { useCallback } from 'react';
-import { FlatList, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { FlatList, StyleSheet, Text, View, LayoutChangeEvent } from 'react-native';
 import { Utils } from 'tuya-panel-kit';
-import RecommendMoodItem from './RecommendMoodItem';
-import Spacer from '@ledvance/base/src/components/Spacer';
-import { useReactive } from 'ahooks';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import {
-  MoodPageParams,
-  MoodNodeTransitionMode,
-  MoodUIInfo,
-  MoodJumpGradientMode,
-} from './Interface';
-import { Result } from '@ledvance/base/src/models/modules/Result';
-import { ui_biz_routerKey } from '../../navigation/Routers'
+import { useReactive } from 'ahooks';
 import { difference, head, range } from 'lodash';
+import Page from '@ledvance/base/src/components/Page';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import Strings from '@ledvance/base/src/i18n';
+import ThemeType from '@ledvance/base/src/config/themeType';
+import { Result } from '@ledvance/base/src/models/modules/Result';
+import { ui_biz_routerKey } from '../../navigation/Routers';
+import { MoodPageParams, MoodNodeTransitionMode, MoodUIInfo, MoodJumpGradientMode } from './Interface';
 import { RecommendMood, getRecommendMixMoods, getRecommendMoods } from './MoodInfo';
-import ThemeType from '@ledvance/base/src/config/themeType'
-
+import RecommendMoodItem from './RecommendMoodItem';
 const cx = Utils.RatioUtils.convertX;
-const { withTheme } = Utils.ThemeUtils
-
+const { withTheme } = Utils.ThemeUtils;
 export interface AddMoodPageParams {
   isStatic: boolean;
   moodIds: number[];
   moduleParams: MoodPageParams;
-  nameRepeat: (mood: MoodUIInfo) => boolean
+  nameRepeat: (mood: MoodUIInfo) => boolean;
   modDeleteMood: (mode: 'add' | 'edit' | 'del', currentMood: MoodUIInfo) => Promise<Result<any>>;
 }
-
 interface AddMoodPageState {
   data: RecommendMood[];
 }
-
 const AddMoodPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation();
   const routeParams = useRoute().params as AddMoodPageParams;
@@ -44,31 +35,27 @@ const AddMoodPage = (props: { theme?: ThemeType }) => {
       ? getRecommendMixMoods(routeParams.isStatic, moduleParams)
       : getRecommendMoods(routeParams.isStatic, moduleParams),
   });
-
-  const getFormateItem = item => {
-    return {
-      ...item,
-      version: 0,
-      secondaryLamp: item.secondaryLamp ?? {
-        nodes: [],
-        mode: 0,
-        speed: 75,
-      },
-    };
+  // 1. 添加 state 用于存储容器宽度
+  const [containerWidth, setContainerWidth] = useState(0);
+  // 2. 添加 onLayout 回调函数，用于测量根视图宽度
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    if (width > 0 && width !== containerWidth) {
+      setContainerWidth(width);
+    }
   };
-
   const onMoodItemClick = useCallback(
     (moodItem: RecommendMood) => {
       const idRange = range(0, 256);
       const mainId: number = head(difference(idRange, routeParams.moodIds)) || 0;
-      const secondaryId: number = moduleParams.isCeilingLight ? head(difference(idRange, [...routeParams.moodIds, mainId])) || 0 : 0
+      const secondaryId: number = moduleParams.isCeilingLight ? head(difference(idRange, [...routeParams.moodIds, mainId])) || 0 : 0;
       const url = routeParams.isStatic
         ? ui_biz_routerKey.group_ui_biz_static_mood_edit
         : !!(moduleParams.isCeilingLight || moduleParams.isMixLight)
           ? ui_biz_routerKey.group_ui_biz_dynamic_mix_mood_edit
           : ui_biz_routerKey.group_ui_biz_dynamic_mood_edit;
       const currentMood = moodItem.mainLamp
-        ? { ...moodItem, id: mainId, mainLamp: { ...moodItem.mainLamp, id: mainId }, secondaryLamp: { ...moodItem.secondaryLamp, id: moodItem.secondaryLamp?.nodes?.length ? secondaryId : -1} }
+        ? { ...moodItem, id: mainId, mainLamp: { ...moodItem.mainLamp, id: mainId }, secondaryLamp: { ...moodItem.secondaryLamp, id: moodItem.secondaryLamp?.nodes?.length ? secondaryId : -1 } }
         : newMood(mainId, secondaryId, moduleParams.isSupportColor, routeParams.isStatic, moduleParams);
       navigation.navigate(url, {
         ...routeParams,
@@ -78,11 +65,9 @@ const AddMoodPage = (props: { theme?: ThemeType }) => {
     },
     [routeParams]
   );
-
   const styles = StyleSheet.create({
     root: {
       flex: 1,
-      flexDirection: 'column',
     },
     desc: {
       color: props.theme?.global.fontColor,
@@ -90,8 +75,7 @@ const AddMoodPage = (props: { theme?: ThemeType }) => {
       marginHorizontal: cx(24),
       marginTop: cx(12),
     },
-  })
-
+  });
   return (
     <Page
       backText={Strings.getLang('add_new_static_mood_system_back')}
@@ -101,7 +85,8 @@ const AddMoodPage = (props: { theme?: ThemeType }) => {
           : 'add_new_dynamic_mood_headline_text'
       )}
     >
-      <View style={styles.root}>
+      {/* 3. 将 onLayout 绑定到根视图 */}
+      <View style={styles.root} onLayout={handleLayout}>
         <Text style={styles.desc}>
           {Strings.getLang(
             routeParams.isStatic
@@ -109,33 +94,33 @@ const AddMoodPage = (props: { theme?: ThemeType }) => {
               : 'add_new_dynamic_mood_description_text'
           )}
         </Text>
-        <FlatList
-          style={{ flex: 1 }}
-          data={state.data}
-          renderItem={({ item }) => {
-            return (
+        {/* 4. 仅在获取到有效宽度后渲染列表 */}
+        {containerWidth > 0 && (
+          <FlatList
+            style={{ flex: 1 }}
+            data={state.data}
+            renderItem={({ item }) => (
               <RecommendMoodItem
                 title={item.name}
                 isMix={isMix}
-                mood={getFormateItem(item)}
+                mood={item}
                 deviceTypeOption={moduleParams}
-                onPress={() => {
-                  onMoodItemClick(item);
-                }}
+                onPress={() => onMoodItemClick(item)}
+                // 5. 将测量到的宽度传递给子组件
+                containerWidth={containerWidth}
               />
-            );
-          }}
-          ItemSeparatorComponent={() => <Spacer />}
-          ListHeaderComponent={() => <Spacer />}
-          ListFooterComponent={() => <Spacer />}
-          keyExtractor={item => item.name}
-        />
+            )}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListHeaderComponent={() => <Spacer />}
+            ListFooterComponent={() => <Spacer />}
+            keyExtractor={item => item.name}
+          />
+        )}
       </View>
     </Page>
   );
 };
-
-export default withTheme(AddMoodPage)
+export default withTheme(AddMoodPage);
 
 const defStripConfig = {
   version: 0,

package/src/modules/mood_new/MoodItem.tsx

@@ -1,171 +1,220 @@
-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 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 ThemeType from '@ledvance/base/src/config/themeType'
+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 { Utils } from 'tuya-panel-kit';
+import { MoodJumpGradientMode, MoodLampInfo, MoodUIInfo } from './Interface';
 
 const cx = Utils.RatioUtils.convertX;
-const { withTheme } = Utils.ThemeUtils
+const { withTheme } = Utils.ThemeUtils;
 
 interface LightCategory {
-  isMixLight?: boolean
-  isStripLight?: boolean
-  isStringLight?: boolean
-  isCeilingLight?: boolean
+  isMixLight?: boolean;
+  isStripLight?: boolean;
+  isStringLight?: boolean;
+  isCeilingLight?: boolean;
 }
 
 interface MoodItemProps extends ViewProps {
-  theme?: ThemeType
+  theme?: ThemeType;
   enable: boolean;
   isMix: boolean;
   mood: MoodUIInfo;
   style?: ViewStyle;
-  deviceTypeOption?: LightCategory
+  deviceTypeOption?: LightCategory;
   onPress?: () => void;
   onSwitch: (enable: boolean) => void;
 }
 
 const MoodItem = (props: MoodItemProps) => {
-  const { mood, isMix, deviceTypeOption } = props;
+  const { mood, isMix, deviceTypeOption, theme } = 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),
-    },
-    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),
-    },
-  });
+  ), [MoodJumpGradientMode, deviceTypeOption]);
+
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   return (
     <Card style={[styles.card, props.style]} onPress={props.onPress}>
-      <View>
-        <Spacer height={cx(16)} />
-        <View style={styles.headline}>
+      <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}} width={cx(44)} height={cx(44)} style={[styles.checkbox, { tintColor: props.enable ? props.theme?.icon.primary : props.theme?.icon.disable}]} />
+            <Image source={{ uri: res.ic_check }}
+                   style={[styles.checkboxImage, { tintColor: props.enable ? theme?.icon.primary : theme?.icon.disable }]}/>
           </TouchableOpacity>
         </View>
-        <Spacer />
-        <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} type={mood.mainLamp.mode === gradientMode ? 'gradient' : 'separate'}/>
-        {(isMix && !!mood.secondaryLamp.nodes.length) && (
+        <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?.isCeilingLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient) ? 'gradient' : 'separate'}/>
+            <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}>
+        <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'
-              )}
+              {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',
-    },
-  })
+// --- 【核心修正】 ---
+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);
+    }
+  };
 
-  return (
-    <View style={styles.gradientItem}>
-      <Spacer height={0} width={cx(16)} />
+  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={isMix ? cx(264) : undefined}
-        type={props.type}
+        width={finalWidth}
+        type={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>
-        </>
-      )}
+    )
+  );
+
+  // 渲染右侧图标的通用逻辑
+  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 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);

package/src/modules/mood_new/RecommendMoodItem.tsx

@@ -1,85 +1,117 @@
 import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
 import { Utils } from 'tuya-panel-kit';
 import Card from '@ledvance/base/src/components/Card';
 import { CellContent } from '@ledvance/base/src/components/Cell';
-import { StyleSheet, View } from 'react-native';
 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';
-import ThemeType from '@ledvance/base/src/config/themeType'
+import { MixMoodColorsLine } from './MoodItem'; // 从 MoodItem.tsx 导入重构后的组件
 
 const cx = Utils.RatioUtils.convertX;
-const { withTheme } = Utils.ThemeUtils
+const { withTheme } = Utils.ThemeUtils;
+
+// 定义布局中使用的常量，便于维护和计算
+const CARD_MARGIN_HORIZONTAL = cx(24);
+const CONTENT_PADDING_HORIZONTAL = cx(16);
+const ICON_WIDTH = cx(24);
+const ICON_SPACING = cx(7);
 
 interface LightCategory {
-  isMixLight?: boolean
-  isStripLight?: boolean
-  isStringLight?: boolean
-  isCeilingLight?: boolean
+  isMixLight?: boolean;
+  isStripLight?: boolean;
+  isStringLight?: boolean;
+  isCeilingLight?: boolean;
 }
 
-interface RecommendMixMoodItemProps {
-  theme?: ThemeType
+interface RecommendMoodItemProps {
+  theme?: ThemeType;
   title: string;
   isMix: boolean;
   mood: MoodUIInfo;
-  deviceTypeOption?: LightCategory
+  deviceTypeOption?: LightCategory;
   onPress: () => void;
+  containerWidth: number; // 1. 接收从父组件传来的容器宽度
 }
 
-const RecommendMixMoodItem = (props: RecommendMixMoodItemProps) => {
-  const { mood, isMix, deviceTypeOption } = props;
+const RecommendMoodItem = (props: RecommendMoodItemProps) => {
+  const { mood, isMix, deviceTypeOption, theme, containerWidth } = props;
 
   const gradientMode = useMemo(() => (
     deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
-  ), [MoodJumpGradientMode, deviceTypeOption])
+  ), [MoodJumpGradientMode, deviceTypeOption]);
 
+  // 2. 使用 useMemo 根据传入的 prop 精确计算颜色条的宽度
+  const lineWidth = useMemo(() => {
+    if (containerWidth <= 0) return 0;
 
-  const styles = StyleSheet.create({
-    root: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginHorizontal: cx(24),
-    },
-    content: {
-      height: cx(56),
-      marginHorizontal: cx(16),
-      width: cx(295)
-    },
-    title: {
-      color: props.theme?.global.fontColor,
-      fontSize: cx(16),
-      // fontFamily: 'helvetica_neue_lt_std_bd',
-    },
-    lineStyle: {
-      alignItems: 'center',
-    },
-  })
+    // 基础宽度 = 容器总宽 - 卡片外边距*2 - 内容内边距*2
+    const baseWidth = containerWidth - (CARD_MARGIN_HORIZONTAL * 2) - (CONTENT_PADDING_HORIZONTAL * 2);
+
+    // 如果是 isMix 模式，还需减去右侧图标的宽度和间距
+    return isMix ? baseWidth - ICON_WIDTH - ICON_SPACING : baseWidth;
+  }, [containerWidth, isMix]);
+
+  const styles = useMemo(() => getRecommendStyles(theme), [theme]);
 
   return (
-    <Card style={styles.root} onPress={props.onPress}>
+    <Card style={styles.card} onPress={props.onPress}>
       <CellContent
         title={props.title}
         value={''}
         style={styles.content}
         titleStyle={styles.title}
-        arrowStyle={{
-          color: props.theme?.global.fontColor,
-          size: cx(16),
-        }}
+        arrowStyle={{ color: theme?.global.fontColor, size: cx(16) }}
       />
-      {!!(mood.mainLamp) && (
-        <>
-          <View style={styles.lineStyle}>
-            <MixMoodColorsLine mixSubLight={mood?.mainLamp} isMix={isMix} type={mood.mainLamp.mode === gradientMode ? 'gradient' : 'separate'}/>
-            <Spacer height={cx(7)} />
-            {(isMix && !!mood.secondaryLamp.nodes.length) && <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} type={mood.secondaryLamp.mode === (deviceTypeOption?.isCeilingLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient) ? 'gradient' : 'separate'}/>}
-          </View>
-          <Spacer height={cx(24)} />
-        </>
+
+      {/* 3. 只有在计算出有效宽度后才渲染颜色条 */}
+      {lineWidth > 0 && mood.mainLamp && (
+        <View style={styles.lineContainer}>
+          {/* 主灯颜色条 */}
+          <MixMoodColorsLine
+            width={lineWidth} // 4. 将计算好的宽度传递下去
+            isMix={isMix}
+            mixSubLight={mood.mainLamp}
+            type={mood.mainLamp.mode === gradientMode ? 'gradient' : 'separate'}
+          />
+          {/* 副灯颜色条 (如果需要) */}
+          {isMix && mood.secondaryLamp && mood.secondaryLamp.nodes.length > 0 && (
+            <>
+              <Spacer height={cx(7)} />
+              <MixMoodColorsLine
+                width={lineWidth} // 同样传递计算好的宽度
+                isMix={isMix}
+                mixSubLight={mood.secondaryLamp}
+                type={mood.secondaryLamp.mode === (deviceTypeOption?.isCeilingLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient) ? 'gradient' : 'separate'}
+              />
+            </>
+          )}
+          <Spacer height={cx(12)} />
+        </View>
       )}
     </Card>
   );
 };
 
-export default withTheme(RecommendMixMoodItem)
+const getRecommendStyles = (theme?: ThemeType) => StyleSheet.create({
+  card: {
+    marginHorizontal: CARD_MARGIN_HORIZONTAL,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+  },
+  content: {
+    paddingHorizontal: CONTENT_PADDING_HORIZONTAL,
+    height: cx(56),
+    // 移除了硬编码的 width，使其自适应
+  },
+  title: {
+    color: theme?.global.fontColor,
+    fontSize: cx(16),
+  },
+  lineContainer: {
+    paddingHorizontal: CONTENT_PADDING_HORIZONTAL,
+  },
+});
+
+export default withTheme(RecommendMoodItem);