@ledvance/base 1.3.102 → 1.3.104

package/localazy.json

@@ -1291,7 +1291,15 @@
                 "MATCH:infobutton_randomtimecycle",
                 "MATCH:infobutton_timer",
                 "MATCH:infobutton_poweronbehavior",
-                "MATCH:infobutton_history"
+                "MATCH:infobutton_history",
+                "MATCH:country_JO",
+                "MATCH:country_CV",
+                "MATCH:country_PA",
+                "MATCH:country_northern_ireland",
+                "MATCH:country_wales",
+                "MATCH:country_BA",
+                "MATCH:country_north_macedonia",
+                "MATCH:country_werder_bremen"
             ],
             "replacements": {
                 "REGEX:% %1\\$s.*?\\)%": "{0}",

package/package.json

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

package/src/components/AdvanceCard.tsx

@@ -4,6 +4,7 @@ import { Utils } from 'tuya-panel-kit'
 import Card from './Card'
 import Spacer from './Spacer'
 import ThemeType from '../config/themeType'
+import Marquee from './Marquee'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -47,6 +48,8 @@ export interface AdvanceCardProps extends PropsWithChildren<ViewProps> {
 
 const AdvanceCard = (props: AdvanceCardProps) => {
   const {statusColor} = props.data;
+  const subtitles = props.data.subtitles
+  const subtitleStyle = {...styles.subtitle, color: props.theme?.global.secondFontColor};
   return (
     <Card
       style={styles.itemContainer}
@@ -68,9 +71,15 @@ const AdvanceCard = (props: AdvanceCardProps) => {
             <Text style={{...styles.title, color: props.theme?.global.fontColor}}>{props.data.title}</Text>
             <Spacer height={cx(8)} />
             {
-              (!!props.data.subtitles) && props.data.subtitles.map((subtitle, index) => (
-                <Text style={{...styles.subtitle, color: props.theme?.global.secondFontColor}} key={`${subtitle}_${index}`}>{subtitle}</Text>
-              ))
+              (!!subtitles && subtitles.length > 0) && (
+                subtitles.length === 1 ? (
+                  // 如果只有一个subtitle，静态显示
+                  <Text style={subtitleStyle}>{subtitles[0]}</Text>
+                ) : (
+                  // 如果有多个subtitle，使用Marquee组件
+                  <Marquee subtitles={subtitles} textStyle={subtitleStyle} />
+                )
+              )
             }
           </View>
       }
@@ -85,7 +94,7 @@ const styles = StyleSheet.create({
   },
   itemContent: {},
   titleBg: {
-    height: cx(118),
+    height: cx(80),
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -98,7 +107,6 @@ const styles = StyleSheet.create({
   subtitle: {
     fontSize: cx(10),
     textAlign: 'center',
-    fontFamily: 'helvetica_neue_lt_std_roman',
   },
   dotBg: {
     position: 'absolute',

package/src/components/AdvanceList.tsx

@@ -1,5 +1,6 @@
+import { useIsPad } from '../models/modules/NativePropsSlice'
 import { useNavigation } from '@react-navigation/core'
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { FlatList, Image, StyleSheet, View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
 import { getMicrophoneAccess } from '../api/native'
@@ -16,6 +17,8 @@ export interface AdvanceListProps {
 
 function AdvanceList(props: AdvanceListProps) {
   const navigation = useNavigation()
+  const isPad = useIsPad()
+  const [columns, setColumns] = useState(isPad ? 3 : 2)
 
   const { advanceData = [] } = props
 
@@ -72,27 +75,32 @@ function AdvanceList(props: AdvanceListProps) {
     container: {
       marginHorizontal: cx(14),
     },
+    columnContainer: {
+      justifyContent: 'space-between'
+    },
     item: {
-      flex: 0.5,
-      justifyContent: 'center',
-      alignItems: 'center',
+      flex: 0,
+      marginHorizontal: cx(10),
+      alignItems: 'flex-start',
     },
     iconContainer: {
-      height: cx(118),
+      height: cx(80),
       justifyContent: 'center' as const,
       alignItems: 'center' as const,
     },
     iconImage: {
-      width: cx(80),
-      height: cx(80),
+      width: cx(50),
+      height: cx(50),
     }
   })
 
   return (
     <FlatList
+      key={`flatlist-columns-${columns}`}
       scrollEnabled={false}
-      numColumns={2}
+      numColumns={columns}
       style={styles.container}
+      columnWrapperStyle={styles.columnContainer}
       data={advanceData}
       renderItem={renderItem}
       keyExtractor={keyExtractor}

package/src/components/Marquee.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, Animated, StyleSheet, StyleProp, TextStyle } from 'react-native';
+import { Utils } from 'tuya-panel-kit';
+
+const { convertX: cx } = Utils.RatioUtils;
+
+// 定义每个字幕项的固定高度
+const SUBTITLE_HEIGHT = cx(14);
+// 动画切换的持续时间
+const ANIMATION_DURATION = 500;
+// 每个字幕停留显示的时间
+const PAUSE_DURATION = 2000;
+
+interface MarqueeProps {
+  subtitles: string[];
+  textStyle: StyleProp<TextStyle>;
+}
+
+const Marquee: React.FC<MarqueeProps> = ({ subtitles, textStyle }) => {
+  const scrollY = useRef(new Animated.Value(0)).current;
+
+  // 复制第一个元素到末尾以实现无缝循环
+  const displaySubtitles = [...subtitles, subtitles[0]];
+
+  useEffect(() => {
+    let animation: Animated.CompositeAnimation | null = null;
+
+    const animate = (index: number) => {
+      const nextIndex = index + 1;
+
+      animation = Animated.sequence([
+        Animated.delay(PAUSE_DURATION),
+        Animated.timing(scrollY, {
+          toValue: -nextIndex * SUBTITLE_HEIGHT,
+          duration: ANIMATION_DURATION,
+          useNativeDriver: true,
+        }),
+      ]);
+
+      animation.start(({ finished }) => {
+        if (finished) {
+          if (nextIndex >= subtitles.length) {
+            // 当滚动到复制的最后一项后，无动画地重置到起点
+            scrollY.setValue(0);
+            // 从头开始循环
+            animate(0);
+          } else {
+            // 继续下一次滚动
+            animate(nextIndex);
+          }
+        }
+      });
+    };
+
+    // 仅当有多个字幕时才启动动画
+    if (subtitles.length > 1) {
+      animate(0);
+    }
+
+    return () => {
+      if (animation) {
+        animation.stop();
+      }
+    };
+  }, [subtitles]);
+
+  return (
+    <View style={styles.marqueeContainer}>
+      <Animated.View
+        style={{
+          transform: [{ translateY: scrollY }],
+        }}
+      >
+        {displaySubtitles.map((subtitle, index) => (
+          <Text
+            key={`${subtitle}_${index}`}
+            style={[textStyle, styles.subtitleText]}
+            numberOfLines={1}
+          >
+            {subtitle}
+          </Text>
+        ))}
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  marqueeContainer: {
+    height: SUBTITLE_HEIGHT, // 容器高度被限制为只能显示一个字幕
+    overflow: 'hidden',     // 超出部分隐藏
+  },
+  subtitleText: {
+    height: SUBTITLE_HEIGHT,     // 确保每个Text元素有相同的高度
+    lineHeight: SUBTITLE_HEIGHT, // **【关键】** 让lineHeight等于height，实现文本在行内垂直居中
+  },
+});
+
+export default Marquee;

package/src/composeLayout.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import React, { Component } from 'react'
 import { Provider } from 'react-redux'
 import { DevInfo, DpValue, Theme, TYSdk } from 'tuya-panel-kit'
-import { actions, store } from './models'
+import { actions, store } from '@models'
 import { addListener, nativeEventEmitter, removeListener } from './api/nativeEventEmitter'
 import { getSystemTimeFormat, getTimeZone, NativeApi } from './api/native'
 import {
@@ -10,7 +10,9 @@ import {
   NativeProps,
   setGroupDevices,
   setGroupNativeProps,
-  setNativeProps, setNewPalette,
+  setNativeProps,
+  setNewPalette,
+  setIsPad,
   setSystemTimeFormat,
   setTimeZone,
   UAGroupInfo,
@@ -27,6 +29,7 @@ interface Props {
   uaGroupInfo: UAGroupInfoProps
   colorScheme?: string
   newPalette?: boolean
+  isPad?: boolean
 }
 
 interface LdvDevInfo extends DeviceInfo {
@@ -138,6 +141,7 @@ const composeLayout = (component: React.ComponentType) => {
       })
 
       dispatch(setNewPalette(!!props.newPalette))
+      dispatch(setIsPad(!!props.isPad))
     }
 
     initReduxDeviceNativeProps(ldvDevInfo: LdvDevInfo) {
@@ -162,7 +166,7 @@ const composeLayout = (component: React.ComponentType) => {
         familyName: ldvDevInfo.familyName,
         role: ldvDevInfo.role,
         moods: [],
-        is24HourClock: true
+        is24HourClock: true,
       }
       NativeApi.showObj(nativeProps)
       console.log('Redux 初始数据：', JSON.stringify(nativeProps))