@ledvance/base 1.3.108 → 1.3.110

package/localazy.json

@@ -1300,7 +1300,8 @@
                 "MATCH:country_BA",
                 "MATCH:country_north_macedonia",
                 "MATCH:country_werder_bremen",
-                "MATCH:reset_energy"
+                "MATCH:reset_energy",
+                "MATCH:thermostat_infotempcurve"
             ],
             "replacements": {
                 "REGEX:% %1\\$s.*?\\)%": "{0}",

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.3.108",
+  "version": "1.3.110",
   "scripts": {
     "prepublishOnly": "python update-localazy.py"
   },

package/src/components/AdvanceCard.tsx

@@ -44,15 +44,20 @@ export interface AdvanceCardProps extends PropsWithChildren<ViewProps> {
   theme?: ThemeType
   data: AdvancedData
   onPress: () => void
+  width?: number
 }
 
 const AdvanceCard = (props: AdvanceCardProps) => {
   const {statusColor} = props.data;
   const subtitles = props.data.subtitles
   const subtitleStyle = {...styles.subtitle, color: props.theme?.global.secondFontColor};
+  const containerStyle = [
+    styles.itemContainer,
+    props.width ? { width: props.width } : null
+  ];
   return (
     <Card
-      style={styles.itemContainer}
+      style={containerStyle}
       containerStyle={styles.itemContent}
       onPress={props.onPress}>
       {!!statusColor && <View style={styles.dotBg}>

package/src/components/AdvanceList.tsx

@@ -1,6 +1,6 @@
 import { useIsPad } from '../models/modules/NativePropsSlice'
 import { useNavigation } from '@react-navigation/core'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState } from 'react' // 移除 useMemo, Dimensions
 import { FlatList, Image, StyleSheet, View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
 import { getMicrophoneAccess } from '../api/native'
@@ -8,8 +8,10 @@ import AdvanceCard, { AdvancedData } from './AdvanceCard'
 import Spacer from './Spacer'
 
 const { convertX: cx } = Utils.RatioUtils
+// 移除 Dimensions 引用，不再需要获取屏幕宽度
 
 const MusicRouterKey = ['ui_biz_music', 'group_ui_biz_music']
+const CONTAINER_MARGIN = cx(14);
 
 export interface AdvanceListProps {
   advanceData?: AdvancedData[]
@@ -18,7 +20,7 @@ export interface AdvanceListProps {
 function AdvanceList(props: AdvanceListProps) {
   const navigation = useNavigation()
   const isPad = useIsPad()
-  const [columns, setColumns] = useState(isPad ? 3 : 2)
+  const [columns] = useState(isPad ? 3 : 2)
 
   const { advanceData = [] } = props
 
@@ -43,64 +45,57 @@ function AdvanceList(props: AdvanceListProps) {
   )
 
   const renderItem = useCallback(
-    ({ item }: { item: AdvancedData; index: number }) => (
-      <View style={styles.item}>
-        <AdvanceCard
-          data={item}
-          onPress={async () => {
-            await handleNavigate(item)
-          }}
-        >
-          {item.icons && (
-            <View style={styles.iconContainer}>
-              <Image source={typeof item.icons === 'string' ? { uri: item.icons } : item.icons} style={styles.iconImage}/>
-            </View>
-          )}
-        </AdvanceCard>
-      </View>
-    ),
-    [handleNavigate]
+    ({ item }: { item: AdvancedData; index: number }) => {
+      return (
+        <View style={[
+          styles.itemWrapper,
+          {
+            // [核心逻辑]
+            // 1. 宽度设为百分比：2列就是 50%，3列就是 33.333%
+            width: `${100 / columns}%`
+          }
+        ]}>
+          {/*
+             2. 传入 width="100%" 让卡片填满这个 Wrapper
+             Wrapper 的 paddingHorizontal 会自动把卡片往中间挤，形成边距
+          */}
+          <AdvanceCard
+            data={item}
+            width="100%"
+            onPress={async () => {
+              await handleNavigate(item)
+            }}
+          >
+            {item.icons && (
+              <View style={styles.iconContainer} accessibilityLabel='AdvanceCard' accessibilityHint={item.title}>
+                <Image source={typeof item.icons === 'string' ? { uri: item.icons } : item.icons} style={styles.iconImage}/>
+              </View>
+            )}
+          </AdvanceCard>
+        </View>
+      )
+    },
+    [handleNavigate, columns] // 依赖 columns 变化
   )
 
   const keyExtractor = useCallback((item: AdvancedData, index: number) => {
     return item.dp?.code ?? `key-${index}`
   }, [])
 
-  // 改为普通函数组件提升性能
   const Header = () => <Spacer height={cx(10)}/>
   const Separator = () => <Spacer/>
+  // 注意：Separator 只控制行与行之间的垂直距离（如果 FlatList 支持的话），
+  // 但在多列布局中，最好直接在 itemWrapper 里控制 marginBottom
   const Footer = () => <Spacer height={cx(30)}/>
 
-  const styles = StyleSheet.create({
-    container: {
-      marginHorizontal: cx(14),
-    },
-    columnContainer: {
-      justifyContent: 'space-between'
-    },
-    item: {
-      flex: 0,
-      marginHorizontal: cx(10),
-      alignItems: 'flex-start',
-    },
-    iconContainer: {
-      height: cx(80),
-      justifyContent: 'center' as const,
-      alignItems: 'center' as const,
-    },
-    iconImage: {
-      width: cx(50),
-      height: cx(50),
-    }
-  })
-
   return (
     <FlatList
       key={`flatlist-columns-${columns}`}
       scrollEnabled={false}
       numColumns={columns}
       style={styles.container}
-      columnWrapperStyle={styles.columnContainer}
+      // [修改] 移除 columnWrapperStyle 的 justifyContent
+      // 因为每个 item 都是精确的百分比宽度，它们会自动排满一行
       data={advanceData}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
@@ -111,5 +106,31 @@ function AdvanceList(props: AdvanceListProps) {
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    // 列表整体的左右边距 cx(14)
+    marginHorizontal: CONTAINER_MARGIN,
+  },
+  itemWrapper: {
+    // [关键] 使用 padding 代替 margin
+    // 这样 item 占据的空间依然是 50% 或 33%，但内容会向内缩进
+    paddingHorizontal: cx(10),
+
+    // 控制行间距
+    marginBottom: cx(12),
+
+    // 确保内容拉伸
+    alignItems: 'stretch',
+  },
+  iconContainer: {
+    height: cx(80),
+    justifyContent: 'center' as const,
+    alignItems: 'center' as const,
+  },
+  iconImage: {
+    width: cx(50),
+    height: cx(50),
+  }
+})
 
 export default AdvanceList

package/src/components/BallDirectionView.tsx

@@ -3,9 +3,10 @@ import React, { useEffect } from "react";
 import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
 import res from "../res";
 import { useReactive } from "ahooks";
-import { hsv2Hex } from "../utils/index";
+import { hsv2Hex } from '@utils';
 import { cctToColor } from "../utils/cctUtils";
 import { AdjustType, HSV } from '../utils/interface'
+import {useIsPad} from "../models/modules/NativePropsSlice"
 
 const { withTheme } = Utils.ThemeUtils
 const cx = Utils.RatioUtils.convertX;
@@ -29,6 +30,7 @@ interface BallDirectionProps {
 
 const BallDirectionView = (props: BallDirectionProps) => {
   const { theme, adjustType, paintMode, onPaintModeChanged, topColor, bottomColor, colorTemp, brightness } = props;
+  const isPad = useIsPad()
   const state = useReactive({
     adjustType: adjustType,
     paintMode: paintMode,
@@ -116,30 +118,30 @@ const BallDirectionView = (props: BallDirectionProps) => {
       width: '60%',
       left: '20%',
       right: '20%',
-      bottom: '11%',
+      bottom: isPad ? '16%' : '11%',
     },
     halfCircleUp: {
       position: 'absolute',
       width: '60%',
       left: '20%',
       right: '20%',
-      top: '11%',
+      top: isPad ? '16%' : '11%',
     }
   });
   return (<View style={styles.root}>
     <View style={styles.paintModeRoot}>
       {state.adjustType === AdjustType.COLOUR &&
-        <TouchableOpacity
-          accessibilityLabel="HalfCircleButton"
-          accessibilityHint="HalfCircle"
-          accessibilityState={{ checked: [PaintMode.Top, PaintMode.Bottom].includes(state.paintMode) }}
-          style={{ width: cx(40), height: cx(40) }}
-          onPress={() => {
-            onPaintModeChanged(PaintMode.Top);
-          }}
-        >
-          <Image source={{ uri: res.half }} style={styles.paintModeHalf} />
-        </TouchableOpacity>}
+          <TouchableOpacity
+              accessibilityLabel="HalfCircleButton"
+              accessibilityHint="HalfCircle"
+              accessibilityState={{ checked: [PaintMode.Top, PaintMode.Bottom].includes(state.paintMode) }}
+              style={{ width: cx(40), height: cx(40) }}
+              onPress={() => {
+                onPaintModeChanged(PaintMode.Top);
+              }}
+          >
+              <Image source={{ uri: res.half }} style={styles.paintModeHalf} />
+          </TouchableOpacity>}
       <TouchableOpacity
         accessibilityLabel="AllCircleButton"
         accessibilityHint="AllCircle"
@@ -154,11 +156,11 @@ const BallDirectionView = (props: BallDirectionProps) => {
     <View style={styles.circleLayout}>
       <View style={styles.circleBorder} />
       {state.paintMode === PaintMode.ALL &&
-        <Image source={{ uri: res.coloring }} style={styles.coloring} />}
+          <Image source={{ uri: res.coloring }} style={styles.coloring} />}
       {state.paintMode === PaintMode.Top &&
-        <Image source={{ uri: res.ringdown }} style={styles.ringUp} />}
+          <Image source={{ uri: res.ringdown }} style={styles.ringUp} />}
       {state.paintMode === PaintMode.Bottom &&
-        <Image source={{ uri: res.ringdown }} style={styles.ringDown} />}
+          <Image source={{ uri: res.ringdown }} style={styles.ringDown} />}
       <TouchableOpacity
         accessibilityLabel="HalfCircle"
         accessibilityHint="TopHalfCircle"

package/src/components/ColorAdjustView.tsx

@@ -1,43 +1,43 @@
-import {View} from 'react-native'
-import React, {useCallback} from 'react'
+import { hex2Hsv, hsv2Hex } from '@utils'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import React, { useCallback } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Utils } from 'tuya-panel-kit'
+import I18n from '../i18n/index'
+import { useNewPalette } from '../models/modules/NativePropsSlice'
+import LdvColorBrightness from './ldvColorBrightness'
 import LdvColorSlider from './ldvColorSlider'
-import {hex2Hsv, hsv2Hex} from '@utils'
 import LdvPresetView from './ldvPresetView'
 import LdvSaturation from './ldvSaturation'
-import LdvColorBrightness from './ldvColorBrightness'
-import I18n from '../i18n/index'
 import RectColorAndBrightPicker from './rect-color-and-bright-picker'
-import {Utils} from "tuya-panel-kit";
-import {useReactive, useUpdateEffect} from "ahooks";
-import {useNewPalette, useIsPad} from "../models/modules/NativePropsSlice";
+import Spacer from './Spacer'
 
-const {convertX: cx, width: screenWidth} = Utils.RatioUtils
+// 只引入 cx 用于尺寸转换
+const { convertX: cx } = Utils.RatioUtils
 const scaleUp = (value) => value * 10
 const scaleDown = (value) => Math.round(value / 10)
 
 export interface ColorAdjustViewProps {
-  h: number
-  s: number
-  v: number
-  minBrightness?: number // 最小亮度
-  minSaturation?: number // 最小Saturation
-  reserveSV?: boolean // 保留 s v
-  hideSat?: boolean // 隐藏saturation
-  onHSVChange?: (h: number, s: number, v: number) => void
-  onHSVChangeComplete: (h: number, s: number, v: number) => void
+  h: number;
+  s: number;
+  v: number;
+  minBrightness?: number;
+  minSaturation?: number;
+  reserveSV?: boolean;
+  hideSat?: boolean;
+  onHSVChange?: (h: number, s: number, v: number) => void;
+  onHSVChangeComplete: (h: number, s: number, v: number) => void;
 }
 
 const NewColorPicker = React.memo((props: ColorAdjustViewProps) => {
   const { h = 0, s = 100, v = 100, minBrightness, onHSVChange, onHSVChangeComplete } = props
-  const isPad = useIsPad()
-  const width = isPad ? cx(screenWidth - 10) : (screenWidth - 80)
+
   const state = useReactive({
     hue: h,
     saturation: scaleUp(s),
     value: scaleUp(v),
     moving: false
   })
-
   useUpdateEffect(() => {
     if (!state.moving) {
       state.hue = h
@@ -45,33 +45,22 @@ const NewColorPicker = React.memo((props: ColorAdjustViewProps) => {
       state.value = scaleUp(v)
     }
   }, [h, s, v])
-
   const handleMove = useCallback((v) => {
     onHSVChange?.(v.hue, scaleDown(v.saturation), scaleDown(v.value))
   }, [onHSVChange])
-
   const handleComplete = useCallback((v) => {
     onHSVChangeComplete?.(v.hue, scaleDown(v.saturation), scaleDown(v.value))
     state.moving = false
   }, [onHSVChangeComplete])
-
-  const { hue, saturation, value } = state;
-  const hsv = { hue, saturation, value };
+  const { hue, saturation, value } = state
+  const hsv = { hue, saturation, value }
   const minBrightnessValue = minBrightness ?? 1
-
   return (
-    <View style={{justifyContent: 'center', alignItems: 'center'}}>
-      <View style={{
-        width: width,
-        height: cx(200),
-        borderRadius: cx(10),
-        borderColor: '#eeeeef',
-        borderWidth: 1,
-        overflow: 'hidden'
-      }}>
+    <View style={styles.container}>
+      <View style={styles.pickerWrapper}>
         <RectColorAndBrightPicker.ColourPicker
           value={hsv}
-          brightOption={{min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0}}
+          brightOption={{ min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0 }}
           onGrant={() => state.moving = true}
           onMove={handleMove}
           onRelease={handleComplete}
@@ -82,6 +71,23 @@ const NewColorPicker = React.memo((props: ColorAdjustViewProps) => {
   )
 })
 
+const styles = StyleSheet.create({
+  container: {
+    // 为整个组件提供水平内边距，使其自适应
+    paddingHorizontal: cx(16),
+  },
+  pickerWrapper: {
+    // 高度保持不变
+    height: cx(200),
+    // 圆角、边框等样式保持不变
+    borderRadius: cx(10),
+    borderColor: '#eeeeef',
+    borderWidth: 1,
+    overflow: 'hidden',
+    // 这里不再需要 width 属性，它会自动填充父容器
+  },
+})
+
 const OldColorPicker = React.memo((props: ColorAdjustViewProps) => {
   return (
     <View>
@@ -96,6 +102,7 @@ const OldColorPicker = React.memo((props: ColorAdjustViewProps) => {
         onSlidingComplete={hue => {
           props.onHSVChangeComplete(hue, props.s, props.v)
         }}/>
+      <Spacer height={cx(10)}/>
       <LdvPresetView
         type={'color'}
         onPress={(item) => {

package/src/components/ColorTempAdjustView.tsx

@@ -1,31 +1,30 @@
-import {View} from 'react-native'
-import React, {useCallback} from 'react'
+import { StyleSheet, View } from 'react-native'
+import React, { useCallback } from 'react'
 import LdvColorSlider from './ldvColorSlider'
 import Spacer from './Spacer'
 import LdvPresetView from './ldvPresetView'
 import LdvSlider from './ldvSlider'
-import {Utils} from 'tuya-panel-kit'
+import { Utils } from 'tuya-panel-kit'
 import I18n from '../i18n/index'
-import {cctToColor} from '../utils/cctUtils'
-import RectColorAndBrightPicker from "./rect-color-and-bright-picker";
-import {useReactive, useUpdateEffect} from 'ahooks'
-import { useNewPalette, useIsPad } from 'models/modules/NativePropsSlice'
+import { cctToColor } from '../utils/cctUtils'
+import RectColorAndBrightPicker from './rect-color-and-bright-picker'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import { useNewPalette } from 'models/modules/NativePropsSlice'
 
-const {convertX: cx, width: screenWidth} = Utils.RatioUtils
-
-const scaleUp = (value: number) => value * 10;
-const scaleDown = (value: number) => Math.round(value / 10);
+const { convertX: cx } = Utils.RatioUtils
+const scaleUp = (value: number) => value * 10
+const scaleDown = (value: number) => Math.round(value / 10)
 
 export interface ColorTempAdjustViewProps {
-  colorTemp: number
-  brightness: number
-  minBrightness?: number
-  isSupportTemperature: boolean
-  isSupportBrightness: boolean
-  onCCTChange?: (cct: number) => void
-  onCCTChangeComplete: (cct: number) => void
-  onBrightnessChange?: (brightness: number) => void
-  onBrightnessChangeComplete: (brightness: number) => void
+  colorTemp: number;
+  brightness: number;
+  minBrightness?: number;
+  isSupportTemperature: boolean;
+  isSupportBrightness: boolean;
+  onCCTChange?: (cct: number) => void;
+  onCCTChangeComplete: (cct: number) => void;
+  onBrightnessChange?: (brightness: number) => void;
+  onBrightnessChangeComplete: (brightness: number) => void;
 }
 
 const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
@@ -40,18 +39,14 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
     onBrightnessChange,
     onBrightnessChangeComplete,
   } = props
-  const isPad = useIsPad()
-  const width = isPad ? cx(screenWidth - 10) : (screenWidth - 80)
+
   const state = useReactive({
     temperature: scaleUp(colorTemp),
     brightness: scaleUp(brightness),
-    moving: false
+    moving: false,
   })
-
   useUpdateEffect(() => {
     if (!state.moving) {
-      // 外部props更新时同步内部状态
-
       state.temperature = scaleUp(colorTemp)
       state.brightness = scaleUp(brightness)
     }
@@ -86,27 +81,21 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
   const { temperature, brightness: stateBrightness } = state
   const white = { temperature, brightness: stateBrightness }
   const minBrightnessValue = minBrightness ?? 1
-  const height = cx(isSupportTemperature? 200 : (isSupportBrightness ? 45 : 0))
+
+  const height = cx(isSupportTemperature ? 200 : (isSupportBrightness ? 45 : 0))
   const borderWidth = (isSupportTemperature || isSupportBrightness) ? 1 : 0
   return (
-    <View style={{justifyContent: 'center', alignItems: 'center'}}>
-      <View style={{
-        width: width,
-        height: height,
-        borderRadius: cx(10),
-        borderColor: '#eeeeef',
-        borderWidth: borderWidth,
-        overflow: 'hidden'
-      }}>
+    <View style={styles.container}>
+      <View style={[styles.pickerWrapper, { height, borderWidth }]}>
         {
           isSupportTemperature ? <RectColorAndBrightPicker.WhitePicker
             value={white}
-            brightOption={{min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0}}
+            brightOption={{ min: scaleUp(minBrightnessValue), minPercent: minBrightnessValue ? minBrightnessValue : 0 }}
             onGrant={() => state.moving = true}
             onMove={handleMove}
             onRelease={handleComplete}
             onPress={handleComplete}
-          /> :  isSupportBrightness ? <RectColorAndBrightPicker.BrightnessSlider
+          /> : isSupportBrightness ? <RectColorAndBrightPicker.BrightnessSlider
             value={stateBrightness}
             min={scaleUp(minBrightnessValue)}
             minPercent={minBrightnessValue ? minBrightnessValue : 0}
@@ -115,14 +104,26 @@ const NewColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
             onMove={handleBrightnessMove}
             onRelease={handleBrightnessComplete}
             onPress={handleBrightnessComplete}
-          /> : <></>
+          /> : null // 使用 null 代替 <></> 更为标准
         }
-
       </View>
     </View>
   )
 })
 
+const styles = StyleSheet.create({
+  container: {
+    // 定义水平内边距，让组件自适应
+    paddingHorizontal: cx(16),
+  },
+  pickerWrapper: {
+    // 定义基础样式，移除 width
+    borderRadius: cx(10),
+    borderColor: '#eeeeef',
+    overflow: 'hidden',
+  },
+})
+
 const OldColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
   return (
     <View>
@@ -138,7 +139,7 @@ const OldColorTempPicker = React.memo((props: ColorTempAdjustViewProps) => {
               <Spacer height={cx(10)}/>
               <LdvPresetView
                   type={'temperature'}
-                  style={{height: cx(60)}}
+                  style={{ height: cx(60) }}
                   onPress={item => {
                     props.onCCTChangeComplete(item.value)
                   }}/>

package/src/components/MoodColorsLine.tsx

@@ -1,36 +1,46 @@
-import LinearGradientLine from './LinearGradientLine'
-import React from 'react'
-import {Utils} from 'tuya-panel-kit'
-import {StyleProp, StyleSheet, ViewStyle} from 'react-native'
-import ColorsLine from './ColorsLine'
-import {useIsPad} from '../models/modules/NativePropsSlice'
+// MoodColorsLine.tsx (接收显式 width 的版本)
 
-const { convertX: cx, width: screenWidth } = Utils.RatioUtils
+import LinearGradientLine from './LinearGradientLine';
+import React from 'react';
+import { Utils } from 'tuya-panel-kit';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import ColorsLine from './ColorsLine';
 
-export type MoodColorsLineType = 'gradient' | 'separate'
+const { convertX: cx } = Utils.RatioUtils;
+
+export type MoodColorsLineType = 'gradient' | 'separate';
 
 interface MoodColorsLineProps {
-  width?: number
-  height?: number
-  type: MoodColorsLineType
-  colors: string[]
-  nodeStyle?: StyleProp<ViewStyle>
+  width: number; // 【关键】: 明确要求一个数字类型的 width
+  height?: number;
+  type: MoodColorsLineType;
+  colors: string[];
+  nodeStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>; // style prop 仍然保留，以备不时之需
 }
 
 export default function MoodColorsLine(props: MoodColorsLineProps) {
-  const isPad = useIsPad()
-  const width = props.width || (isPad ? cx(screenWidth - 10) : (screenWidth - 80))
-  const height = props.height || cx(24)
-  if (props.type === 'separate' || props.colors.length < 2) {
-    return (<ColorsLine colors={props.colors} style={{width, height}} nodeStyle={props.nodeStyle}/>)
+  const { width, type, colors, nodeStyle, style } = props;
+  const height = props.height || cx(24);
+
+  // 子组件现在使用明确传入的数字 width
+  if (type === 'separate' || colors.length < 2) {
+    return (
+      <ColorsLine
+        colors={colors}
+        style={[{ width, height }, style]} // 将数字 width 和 height 应用到 style
+        nodeStyle={nodeStyle}
+      />
+    );
   } else {
     return (
       <LinearGradientLine
-        width={width}
+        width={width} // 将数字 width 作为 prop 传递
         height={height}
-        style={styles.gradient}
-        colors={props.colors}/>
-    )
+        style={[styles.gradient, style]}
+        colors={colors}
+      />
+    );
   }
 }
 
@@ -38,4 +48,4 @@ const styles = StyleSheet.create({
   gradient: {
     borderRadius: cx(8),
   },
-})
+});