@ledvance/ui-biz-bundle 1.1.157 → 1.1.159

package/package.json

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

package/src/modules/flags/FlagActions.ts

@@ -59,7 +59,7 @@ export const useFlag: UseFlagType = (flagCode, extra) => {
       })
       const extraDps = {}
       if(extra.isCeilingLight){
-        extraDps[extra.switchLedCode] = true,
+        extraDps[extra.switchLedCode] = true
         extraDps[extra.whiteSwitchCode!] = true
         extraDps[extra.rgbcSwitchLedCode!] = true
         extraDps[extra.rgbcWorkModeCode!] = WORK_MODE.COLOUR

package/src/modules/flags/FlagInfo.tsx

@@ -2,13 +2,13 @@ import I18n from "@ledvance/base/src/i18n";
 import { SceneNodeTransitionMode } from "../scene/SceneInfo";
 
 type HSV = {
-  h: number 
-  s: number 
+  h: number
+  s: number
   v: number
 }
 
 type BT = {
-  brightness: number 
+  brightness: number
   colorTemp: number
 }
 
@@ -24,6 +24,7 @@ export interface FlagItemInfo {
 
 export interface FlagUiInfo extends FlagItemInfo{
   name: string
+  groupKey?: string
 }
 
 const defFlagConfig = {
@@ -45,36 +46,42 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 255,
     name: I18n.getLang('country_DE'),
+    groupKey: 'latam_2026_e',
     ...defFlagConfig,
     colors: [{ h: 48, s: 100, v: 100 }, { h: 360, s: 100, v: 100 }, { h: 0, s: 0, v: 0 }],
   },
   {
     id: 254,
     name: I18n.getLang('country_BE'),
+    groupKey: 'latam_2026_g',
     ...defFlagConfig,
     colors: [{ h: 360, s: 100, v: 100 }, { h: 48, s: 100, v: 100 }, { h: 0, s: 0, v: 0 }]
   },
   {
     id: 253,
     name: I18n.getLang('country_FR'),
+    groupKey: 'latam_2026_i',
     ...defFlagConfig,
     colors: [{ h: 360, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 212, s: 100, v: 100 }]
   },
   {
     id: 252,
     name: I18n.getLang('country_PT'),
+    groupKey: 'latam_2026_k',
     ...defFlagConfig,
     colors: [{ h: 360, s: 100, v: 100 }, { h: 360, s: 100, v: 100 }, { h: 120, s: 100, v: 64 }]
   },
   {
     id: 251,
     name: I18n.getLang('country_scotland'),
+    groupKey: 'latam_2026_c',
     ...defFlagConfig,
     colors: [{ h: 209, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 209, s: 100, v: 100 }]
   },
   {
     id: 250,
     name: I18n.getLang('country_ES'),
+    groupKey: 'latam_2026_h',
     ...defFlagConfig,
     colors: [{ h: 360, s: 100, v: 100 }, { h: 47, s: 100, v: 100 }, { h: 360, s: 100, v: 100 }]
   },
@@ -87,12 +94,14 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 248,
     name: I18n.getLang('country_AT'),
+    groupKey: 'latam_2026_j',
     ...defFlagConfig,
     colors: [{ h: 360, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 360, s: 100, v: 100 }]
   },
   {
     id: 247,
     name: I18n.getLang('country_england'),
+    groupKey: 'latam_2026_l',
     ...defFlagConfig,
     colors: [{ h: 0, s: 0, v: 100 }, { h: 360, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }]
   },
@@ -123,6 +132,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 242,
     name: I18n.getLang('country_NL'),
+    groupKey: 'latam_2026_f',
     ...defFlagConfig,
     colors: [{ h: 217, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 360, s: 100, v: 100 }]
   },
@@ -135,6 +145,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 240,
     name: I18n.getLang('country_CH'),
+    groupKey: 'latam_2026_b',
     ...defFlagConfig,
     colors: [{ h: 360, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 360, s: 100, v: 100 }]
   },
@@ -165,6 +176,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 235,
     name: I18n.getLang('country_HR'),
+    groupKey: 'latam_2026_l',
     ...defFlagConfig,
     colors: [{ h: 220, s: 89, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 360, s: 100, v: 100 }]
   },
@@ -177,6 +189,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 233,
     name: I18n.getLang('country_NO'),
+    groupKey: 'latam_2026_i',
     ...defFlagConfig,
     colors: [{ h: 218, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 360, s: 100, v: 100 }]
   },
@@ -215,24 +228,28 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 226,
     name: I18n.getLang('country_US'),
+    groupKey: 'latam_2026_d',
     ...defFlagConfig,
     colors: [{ h: 210, s: 78, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 0, s: 100, v: 100 }],
   },
   {
     id: 225,
     name: I18n.getLang('country_CA'),
+    groupKey: 'latam_2026_b',
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 0, s: 100, v: 100 },],
   },
   {
     id: 224,
     name: I18n.getLang('country_MX'),
+    groupKey: 'latam_2026_a',
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 103, s: 73, v: 64 },],
   },
   {
     id: 223,
     name: I18n.getLang('country_SA'),
+    groupKey: 'latam_2026_h',
     ...defFlagConfig,
     colors: [{ h: 0, s: 0, v: 100 }, { h: 103, s: 73, v: 64 },],
   },
@@ -245,24 +262,28 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 221,
     name: I18n.getLang('country_AU'),
+    groupKey: 'latam_2026_d',
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 199, s: 84, v: 100 },],
   },
   {
     id: 220,
     name: I18n.getLang('country_JP'),
+    groupKey: 'latam_2026_f',
     ...defFlagConfig,
     colors: [{ h: 360, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }],
   },
   {
     id: 219,
     name: I18n.getLang('country_BR'),
+    groupKey: 'latam_2026_c',
     ...defFlagConfig,
     colors: [{ h: 60, s: 100, v: 100 }, { h: 147, s: 100, v: 64 }, { h: 0, s: 0, v: 100 },],
   },
   {
     id: 218,
     name: I18n.getLang('country_AR'),
+    groupKey: 'latam_2026_j',
     ...defFlagConfig,
     colors: [{ h: 210, s: 65, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 210, s: 65, v: 100 },],
   },
@@ -275,6 +296,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 216,
     name: I18n.getLang('country_EG'),
+    groupKey: 'latam_2026_g',
     ...defFlagConfig,
     colors: [{ h: 0, s: 0, v: 0 }, { h: 0, s: 0, v: 100 }, { h: 0, s: 100, v: 100 },],
   },
@@ -305,6 +327,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 211,
     name: I18n.getLang('country_EC'),
+    groupKey: 'latam_2026_e',
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 210, s: 78, v: 100 }, { h: 60, s: 100, v: 100 },],
   },
@@ -317,12 +340,14 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 209,
     name: I18n.getLang('country_CI'),
+    groupKey: 'latam_2026_e',
     ...defFlagConfig,
     colors: [{ h: 147, s: 100, v: 64 }, { h: 0, s: 0, v: 100 }, { h: 45, s: 100, v: 100 },],
   },
   {
     id: 208,
     name: I18n.getLang('country_GH'),
+    groupKey: 'latam_2026_l',
     ...defFlagConfig,
     colors: [{ h: 128, s: 77, v: 64 }, { h: 60, s: 100, v: 100 }, { h: 0, s: 100, v: 100 },],
   },
@@ -359,6 +384,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 202,
     name: I18n.getLang('country_ir'),
+    groupKey: 'latam_2026_g',
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 147, s: 100, v: 64 },],
   },
@@ -383,6 +409,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 198,
     name: I18n.getLang('country_QA'),
+    groupKey: 'latam_2026_b',
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 0, s: 0, v: 100 },],
   },
@@ -395,6 +422,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 196,
     name: I18n.getLang('country_CO'),
+    groupKey: 'latam_2026_k',
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 210, s: 78, v: 100 }, { h: 60, s: 100, v: 100 },],
   },
@@ -449,6 +477,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 187,
     name: I18n.getLang('country_MA'),
+    groupKey: 'latam_2026_c',
     ...defFlagConfig,
     colors: [{ h: 147, s: 100, v: 64 }, { h: 0, s: 100, v: 100 },],
   },
@@ -467,6 +496,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 184,
     name: I18n.getLang('country_NZ'),
+    groupKey: 'latam_2026_g',
     ...defFlagConfig,
     colors: [{ h: 0, s: 0, v: 100 }, { h: 0, s: 100, v: 100 }, { h: 220, s: 100, v: 100 },],
   },
@@ -491,6 +521,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 180,
     name: I18n.getLang('country_PY'),
+    groupKey: 'latam_2026_d',
     ...defFlagConfig,
     colors: [{ h: 205, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 0, s: 100, v: 100 },],
   },
@@ -521,6 +552,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 175,
     name: I18n.getLang('country_ZA'),
+    groupKey: 'latam_2026_a',
     ...defFlagConfig,
     colors: [{ h: 0, s: 0, v: 0 },{ h: 60, s: 100, v: 100 },{ h: 205, s: 100, v: 100 }, { h: 147, s: 100, v: 64 }, { h: 0, s: 0, v: 100 }, { h: 0, s: 100, v: 100 },],
   },
@@ -539,6 +571,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 172,
     name: I18n.getLang('country_TN'),
+    groupKey: 'latam_2026_f',
     ...defFlagConfig,
     colors: [{ h: 0, s: 0, v: 100 }, { h: 0, s: 100, v: 100 },],
   },
@@ -551,6 +584,7 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 170,
     name: I18n.getLang('country_UY'),
+    groupKey: 'latam_2026_h',
     ...defFlagConfig,
     colors: [{ h: 20, s: 100, v: 100 }, { h: 60, s: 100, v: 100 }, { h: 0, s: 0, v: 100 }, { h: 205, s: 100, v: 100 },],
   },
@@ -563,18 +597,21 @@ export const defFlagList: FlagUiInfo[] = [
   {
     id: 168,
     name: I18n.getLang('country_JO'),
+    groupKey: 'latam_2026_j',
     ...defFlagConfig,
     colors: [{"h":150,"s":100,"v":48}, {"h":0,"s":0,"v":100}, {"h":0,"s":0,"v":0},{"h":353,"s":92,"v":81}],
   },
   {
     id: 167,
     name: I18n.getLang('country_CV'),
+    groupKey: 'latam_2026_h',
     ...defFlagConfig,
     colors: [{"h":49,"s":100,"v":100}, {"h":356,"s":79,"v":94}, {"h":0,"s":0,"v":100},{"h":218,"s":100,"v":65}],
   },
   {
     id: 166,
     name: I18n.getLang('country_PA'),
+    groupKey: 'latam_2026_l',
     ...defFlagConfig,
     colors: [{"h":219,"s":92,"v":34}, {"h":0,"s":0,"v":100}, {"h":358,"s":92,"v":85}],
   },
@@ -608,4 +645,46 @@ 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'),
+    groupKey: 'latam_2026_a',
+    ...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'),
+    groupKey: 'latam_2026_c',
+    ...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'),
+    groupKey: 'latam_2026_e',
+    ...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'),
+    groupKey: 'latam_2026_i',
+    ...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'),
+    groupKey: 'latam_2026_j',
+    ...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'),
+    groupKey: 'latam_2026_k',
+    ...defFlagConfig,
+    colors: [{"h":207,"s":100,"v":81}, {"h":0,"s":0,"v":100}, {"h":109,"s":76,"v":69}],
+  },
 ]

package/src/modules/flags/FlagItem.tsx

@@ -1,80 +1,144 @@
-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 React, { useMemo, useState } from 'react' // 重新引入 useState 和 LayoutChangeEvent
+import { Image, LayoutChangeEvent, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
 
-const cx = Utils.RatioUtils.convertX
+const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
-interface RecommendMoodItemProps {
-  theme?: ThemeType
-  enable: boolean
-  title: string
-  colors: string[]
-  icon?: number | string
-  style?: ViewStyle
-  onPress?: () => void
-  onSwitch: (enable: boolean) => void
+const CONTENT_HORIZONTAL_MARGIN = cx(16)
+
+interface FlagItemProps {
+  theme?: ThemeType;
+  enable: boolean;
+  title: string;
+  colors: string[];
+  icon?: number | string;
+  style?: ViewStyle;
+  containerWidth?: number; // 1. 将 containerWidth 变为可选属性
+  onPress?: () => void;
+  onSwitch: (enable: boolean) => void;
 }
 
-function FlagItem(props: RecommendMoodItemProps) {
-  const icon = typeof props.icon === 'number' ? props.icon : { uri: props.icon }
+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',
+  }
+})
+
+function FlagItem(props: FlagItemProps) {
+  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 }
+
+  // 2. 引入 state 用于存储内部测量的宽度
+  const [selfMeasuredWidth, setSelfMeasuredWidth] = useState(0)
+
+  // 3. 创建 onLayout 回调，用于自我测量
+  const handleLayout = (event: LayoutChangeEvent) => {
+    // 如果父组件已经提供了宽度，则忽略内部测量，避免冲突
+    if (containerWidth && containerWidth > 0) {
+      return
+    }
+    const { width: cardWidth } = event.nativeEvent.layout
+    if (cardWidth > 0 && cardWidth !== selfMeasuredWidth) {
+      setSelfMeasuredWidth(cardWidth)
+    }
+  }
 
-  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',
-    },
-  })
+  // 4. 决定最终使用的宽度
+  const finalLineWidth = useMemo(() => {
+    // 优先使用父组件传入的宽度（适用于 FlatList）
+    if (containerWidth && containerWidth > 0) {
+      // 这里的计算需要注意：父组件传来的 containerWidth 是整个屏幕的宽度
+      // 所以需要减去 Card 的外边距
+      const cardOuterMargin = cx(24)
+      return containerWidth - (cardOuterMargin * 2) - (CONTENT_HORIZONTAL_MARGIN * 2)
+    }
+    // 其次使用自我测量的宽度（适用于普通 View）
+    if (selfMeasuredWidth > 0) {
+      // selfMeasuredWidth 是 Card 的宽度，所以只需减去内容的内边距
+      return selfMeasuredWidth - (CONTENT_HORIZONTAL_MARGIN * 2)
+    }
+    // 如果都没有，则返回 0
+    return 0
+  }, [containerWidth, selfMeasuredWidth])
 
   return (
-    <Card
-      style={[styles.card, props.style]}
-      onPress={props.onPress}>
-      <View accessibilityLabel={'FlagItem'} accessibilityHint={`${props.title}`}>
-        <Spacer height={cx(16)} />
+    // 5. 将 onLayout 绑定到 Card 上，让组件能自我测量
+    <Card 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} />
+        <Spacer/>
+        <View style={styles.lineContainer}>
+          {/* 6. 使用最终计算出的宽度进行渲染 */}
+          {finalLineWidth > 0 && (
+            <MoodColorsLine
+              type={'separate'}
+              width={finalLineWidth}
+              nodeStyle={{ borderColor: theme?.card.border, borderWidth: 1 }}
+              colors={colors}
+            />
+          )}
         </View>
-        <Spacer height={cx(16)} />
+        <Spacer height={cx(16)}/>
       </View>
     </Card>
   )