@ledvance/group-ui-biz-bundle 1.0.82 → 1.0.83

package/src/modules/energyConsumption/component/BarChart.tsx

@@ -2,8 +2,22 @@ import React from 'react';
 import { View } from 'react-native';
 import ECharts from '@ledvance/react-native-echarts-pro';
 import I18n from "@ledvance/base/src/i18n";
+import ThemeType from "@ledvance/base/src/config/themeType";
+import {Utils} from "tuya-panel-kit";
+import {OverviewItem} from "../EnergyConsumptionPage";
 
-const BarChartWithTouch = ({ data, height, width }) => {
+const { withTheme } = Utils.ThemeUtils
+
+interface BarChartProps {
+    theme?: ThemeType
+    data: OverviewItem[]
+    height: number
+    width: number
+}
+
+
+const BarChartWithTouch = (props: BarChartProps) => {
+    const { data, height, width } = props
     const dataX = data?.map(item => { return item.chartTitle });
     const dataY = data?.map(item => { return item.value });
     const option = {
@@ -11,7 +25,7 @@ const BarChartWithTouch = ({ data, height, width }) => {
             text: I18n.getLang('consumption_data_annual_bar_chart_text'),
             textStyle: {
                 fontSize: 14,
-                color: "#666666",
+                color: props.theme?.global.secondFontColor,
             },
             top: 10,
         },
@@ -30,7 +44,7 @@ const BarChartWithTouch = ({ data, height, width }) => {
             },
             axisLabel: {
                 show: true,
-                color: '#999999',
+                color: props.theme?.global.secondFontColor,
                 interval: 0,
             }
         },
@@ -55,7 +69,7 @@ const BarChartWithTouch = ({ data, height, width }) => {
                     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                     verticalAlign: 'middle',
                     textStyle: { // 数值样式
-                        color: 'black',
+                        color: props.theme?.global.fontColor,
                         fontSize: 12
                     },
                 },
@@ -90,4 +104,4 @@ const BarChartWithTouch = ({ data, height, width }) => {
     );
 };
 
-export default BarChartWithTouch;
+export default withTheme(BarChartWithTouch)

package/src/modules/energyConsumption/component/EnergyModal.tsx

@@ -8,6 +8,7 @@ import { TouchableOpacity, View, Text, TextInput, StyleSheet, Linking, FlatList,
 import { Utils, Modal, Popup } from "tuya-panel-kit";
 import { useReactive, useUpdateEffect } from "ahooks";
 import { cloneDeep } from "lodash";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx, height } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -24,7 +25,7 @@ export interface EnergyData {
   unit: string
 }
 interface EnergyModalProps {
-  theme?: any
+  theme?: ThemeType
   visible: boolean
   popupType: 'money' | 'co2' | 'unit'
   title: string
@@ -51,14 +52,14 @@ const EnergyModal = (props: EnergyModalProps) => {
     const text = string.split(separators)
     const length = text.length - 1
     return <View>
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 6] + '.'}</Text>
+      <Text style={{ color: props.theme?.global.fontColor }}>{text[length - 6] + '.'}</Text>
       <Spacer />
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 5] + '.'}</Text>
+      <Text style={{ color: props.theme?.global.fontColor }}>{text[length - 5] + '.'}</Text>
       <Spacer />
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 4] + text[length - 3] + ':'}</Text>
+      <Text style={{ color: props.theme?.global.fontColor }}>{text[length - 4] + text[length - 3] + ':'}</Text>
       <Spacer />
       <Text
-        style={{ textDecorationLine: 'underline', color: props.theme.button.active }}
+        style={{ textDecorationLine: 'underline', color: props.theme?.button.active }}
         onPress={() => openLink(`${text[length - 2]}:${text[length - 1]}${text[length]}`)}
       >
         {`${text[length - 2]}:${text[length - 1]}${text[length]}`}
@@ -73,7 +74,7 @@ const EnergyModal = (props: EnergyModalProps) => {
   const styles = StyleSheet.create({
     popupTip: {
       fontSize: cx(16),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontWeight: 'bold'
     },
     textInput: {
@@ -82,13 +83,13 @@ const EnergyModal = (props: EnergyModalProps) => {
       marginStart: cx(16),
       marginEnd: cx(6),
       fontSize: cx(16),
-      color: props.theme.textInput.fontColor,
+      color: props.theme?.textInput.fontColor,
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     textInputGroup: {
       flexDirection: 'row',
       borderRadius: cx(4),
-      backgroundColor: props.theme.textInput.background,
+      backgroundColor: props.theme?.textInput.background,
       alignItems: 'center',
     },
     iconTouchable: {
@@ -101,7 +102,7 @@ const EnergyModal = (props: EnergyModalProps) => {
       start: cx(4),
       end: cx(4),
       bottom: 0,
-      backgroundColor: props.theme.textInput.line,
+      backgroundColor: props.theme?.textInput.line,
     },
     unitItem: {
       flexDirection: 'row',
@@ -120,12 +121,12 @@ const EnergyModal = (props: EnergyModalProps) => {
           <Spacer />
           <Text style={styles.popupTip}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
           <Spacer height={cx(40)} />
-          <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{I18n.getLang('consumption_data_price_per_kwh_description_text')}</Text>
+          <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>{I18n.getLang('consumption_data_price_per_kwh_description_text')}</Text>
           <Spacer height={cx(15)} />
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             <View style={{ flex: 3 }}>
               <Spacer height={cx(4)} />
-              <Text style={{ color: props.theme.global.secondFontColor, marginStart: cx(13), fontFamily: 'helvetica_neue_lt_std_bd' }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
+              <Text style={{ color: props.theme?.global.secondFontColor, marginStart: cx(13), fontFamily: 'helvetica_neue_lt_std_bd' }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
               <View style={styles.textInputGroup}>
                 <TextInput
                   value={state.energyData?.price}
@@ -169,7 +170,7 @@ const EnergyModal = (props: EnergyModalProps) => {
               data={UnitList}
               renderItem={({ item }) => (
                 <View style={styles.unitItem}>
-                  <Text style={{ fontSize: cx(16), color: props.theme.global.fontColor }}>{item}</Text>
+                  <Text style={{ fontSize: cx(16), color: props.theme?.global.fontColor }}>{item}</Text>
                   {props.energyData && props.energyData.unit === item && <Image
                       style={{ width: cx(16), height: cx(16) }}
                       source={res.app_music_check}
@@ -178,7 +179,7 @@ const EnergyModal = (props: EnergyModalProps) => {
                 </View>
               )}
               ItemSeparatorComponent={() => (
-                <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
+                <View style={{ flex: 1, height: 1, backgroundColor: props.theme?.card.background }}></View>
               )}
               keyExtractor={item => item}
             />
@@ -206,23 +207,23 @@ const EnergyModal = (props: EnergyModalProps) => {
     return (
       Popup.custom({
         title: (
-          <View style={{ backgroundColor: props.theme.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+          <View style={{ backgroundColor: props.theme?.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
             <TouchableOpacity onPress={() => Popup.close()}>
-              <Text style={{ color: props.theme.global.secondBrand, fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+              <Text style={{ color: props.theme?.global.secondBrand, fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
             </TouchableOpacity>
           </View>
         ),
         wrapperStyle: {
           height: height - cx(40),
-          backgroundColor: props.theme.global.background
+          backgroundColor: props.theme?.global.background
         },
-        footer: (<View style={{ backgroundColor: props.theme.global.background}}></View>),
+        footer: (<View style={{ backgroundColor: props.theme?.global.background}}></View>),
         onMaskPress: () => { },
         motionType: 'none',
         useKeyboardView: true,
         content: (
           <View
-            style={{ backgroundColor: props.theme.global.background, paddingHorizontal: cx(16) }}>
+            style={{ backgroundColor: props.theme?.global.background, paddingHorizontal: cx(16) }}>
             <Spacer />
             <Card>
               <FlatList
@@ -235,7 +236,7 @@ const EnergyModal = (props: EnergyModalProps) => {
                     }}
                   >
                     <View style={styles.unitItem}>
-                      <Text style={{ fontSize: cx(16), color: props.theme.global.fontColor }}>{item}</Text>
+                      <Text style={{ fontSize: cx(16), color: props.theme?.global.fontColor }}>{item}</Text>
                       {energyData && energyData.unit === item && <Image
                           style={{ width: cx(16), height: cx(16) }}
                           source={res.app_music_check}
@@ -245,7 +246,7 @@ const EnergyModal = (props: EnergyModalProps) => {
                   </TouchableOpacity>
                 )}
                 ItemSeparatorComponent={() => (
-                  <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
+                  <View style={{ flex: 1, height: 1, backgroundColor: props.theme?.card.background }}></View>
                 )}
                 keyExtractor={item => item}
               />
@@ -261,20 +262,20 @@ const EnergyModal = (props: EnergyModalProps) => {
       visible={props.visible}
     >
       <ScrollView>
-        <View style={{ backgroundColor: props.theme.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+        <View style={{ backgroundColor: props.theme?.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
           <TouchableOpacity onPress={() => {
             props.onCancel && props.onCancel()
           }}>
-            <Text style={{ color: props.theme.button.cancel, fontSize: cx(16) }}>{props.cancelText}</Text>
+            <Text style={{ color: props.theme?.button.cancel, fontSize: cx(16) }}>{props.cancelText}</Text>
           </TouchableOpacity>
-          <Text style={{ color: props.theme.global.fontColor, fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
+          <Text style={{ color: props.theme?.global.fontColor, fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
           <TouchableOpacity onPress={() => {
             props.onConfirm && props.onConfirm(state.energyData)
           }}>
-            <Text style={{ color: props.theme.button.primary, fontSize: cx(16) }}>{props.confirmText}</Text>
+            <Text style={{ color: props.theme?.button.primary, fontSize: cx(16) }}>{props.confirmText}</Text>
           </TouchableOpacity>
         </View>
-        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme.global.background }}>
+        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme?.global.background }}>
           {getContent()}
         </View>
       </ScrollView>

package/src/modules/energyConsumption/component/Overview.tsx

@@ -8,12 +8,13 @@ import { isEmpty } from "lodash";
 import { OverviewItem } from "../EnergyConsumptionPage";
 import { EnergyConsumptionChartProps } from "../EnergyConsumptionChart";
 import { useRoute } from '@react-navigation/core'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
 interface OverViewProps {
-  theme?: any
+  theme?: ThemeType
   style?: StyleProp<ViewStyle>
   headlineText?: string
   headlineClick?: () => void
@@ -34,22 +35,22 @@ const OverView = (props: OverViewProps) => {
     listEmptyTextIcon: {
       width: cx(16),
       height: cx(16),
-      tintColor: props.theme.global.fontColor,
+      tintColor: props.theme?.global.fontColor,
     },
     listEmptyText: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(12),
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     overviewItemText: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14)
     },
   })
   return (
     <View style={[props.style]}>
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-        <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{props.headlineText}</Text>
+        <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{props.headlineText}</Text>
         {!isEmpty(props.overViewList) && <TouchableOpacity
             onPress={() => {
               props.headlineClick && props.headlineClick()
@@ -71,16 +72,16 @@ const OverView = (props: OverViewProps) => {
                 props.overviewItemClick && props.overviewItemClick(item)
               }}
             >
-              <View style={{ backgroundColor: props.theme.card.background, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', }}>
+              <View style={{ backgroundColor: props.theme?.card.background, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', }}>
                 <Text style={styles.overviewItemText}>{item.key}</Text>
                 <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                   <View style={{ flexDirection: 'row' }}>
-                    <Text style={[styles.overviewItemText, { color: props.theme.global.secondFontColor }]}>{item.value}</Text>
-                    <Text style={[styles.overviewItemText, { color: props.theme.global.secondFontColor }]}> kWh</Text>
+                    <Text style={[styles.overviewItemText, { color: props.theme?.global.secondFontColor }]}>{item.value}</Text>
+                    <Text style={[styles.overviewItemText, { color: props.theme?.global.secondFontColor }]}> kWh</Text>
                   </View>
                   <Image
                     source={res.energy_consumption_right}
-                    style={{ width: cx(16), height: cx(16), marginLeft: cx(8), tintColor: props.theme.global.secondFontColor }}
+                    style={{ width: cx(16), height: cx(16), marginLeft: cx(8), tintColor: props.theme?.global.secondFontColor }}
                   />
                 </View>
               </View>

package/src/modules/fixedTimeForPlug/FixedTimeForPlugDetailPage.tsx

@@ -18,6 +18,7 @@ import Summary from "./Summary";
 import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 import DeleteButton from "@ledvance/base/src/components/DeleteButton";
 import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {parseTimer} = Utils.TimeUtils
 const {convertX: cx} = Utils.RatioUtils;
@@ -43,7 +44,7 @@ const newFixedTimeItem = (): FixedTimeItem => {
   }
 }
 
-const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
+const FixedTimeForPlugDetailPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation()
   const params = useRoute().params as FixedTimeDetailParam
   const initItem = newFixedTimeItem();
@@ -136,13 +137,13 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
       marginHorizontal: cx(24)
     },
     itemTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     applyContent: {
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
       borderRadius: 4,
       minHeight: cx(55),
       flex: 1,
@@ -155,11 +156,11 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
       height: cx(35),
     },
     rightTitle: {
-      color: props.theme.tag.fontColor,
+      color: props.theme?.tag.fontColor,
       paddingLeft: cx(12),
       paddingRight: cx(12),
       fontSize: cx(10),
@@ -168,7 +169,7 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
     },
     filletCorner: {
       flexDirection: 'row',
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
       borderRadius: cx(16),
       alignSelf: 'flex-start'
     }
@@ -203,8 +204,8 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
         {/* pick */}
         <TimerPicker
           itemTextColor='#aeadb5'
-          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
-          pickerFontColor={props.theme.global.fontColor}
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme?.global.background }}
+          pickerFontColor={props.theme?.global.fontColor}
           is12Hours={!params.is24Hour}
           startTime={state.item.startTime}
           endTime={state.item.endTime}
@@ -220,7 +221,7 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
             state.item.weeks[rawIndex] = state.item.weeks[rawIndex] === 1 ? 0 : 1
           }}/>
         <Spacer/>
-        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>
+        <Text style={{ ...styles.cardContainer, color: props.theme?.global.fontColor, fontSize: cx(14) }}>
           {loopText(state.item.weeks, parseTimer(state.item.endTime * 60))}
         </Text>
         <Spacer/>
@@ -230,17 +231,17 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
           <Spacer height={cx(10)}/>
           <View style={styles.applyContent}>
             {state.item.channel === undefined ?
-              <Text style={{color: props.theme.global.fontColor}}>
+              <Text style={{color: props.theme?.global.fontColor}}>
                 {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
               </Text> :
               <View style={[styles.applyItem, {marginBottom: cx(10), borderRadius: 4}]}>
-                <Text style={{color: props.theme.global.fontColor}}>{params.channels[state.item.channel]}</Text>
+                <Text style={{color: props.theme?.global.fontColor}}>{params.channels[state.item.channel]}</Text>
                 {params.channels.length > 1 && <TouchableOpacity
                     onPress={() => {
                       state.item.channel = undefined
                     }}
                     style={{paddingHorizontal: cx(5)}}>
-                    <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor}} source={res.ic_arrows_nav_clear}/>
+                    <Image style={{width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor}} source={res.ic_arrows_nav_clear}/>
                 </TouchableOpacity>}
               </View>
             }
@@ -257,8 +258,8 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
                   state.item.channel = index
                 }}
               >
-                <Text style={{color: props.theme.global.fontColor}}>{item}</Text>
-                <Image style={{width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor}} source={res.device_panel_timer_add}/>
+                <Text style={{color: props.theme?.global.fontColor}}>{item}</Text>
+                <Image style={{width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor}} source={res.device_panel_timer_add}/>
               </TouchableOpacity>
             )
           })}
@@ -267,11 +268,11 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
         <View style={styles.cardContainer}>
           <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
           {!isTimeEffective && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }} source={res.ic_warning_amber} />
-              <Text style={{ fontSize: cx(12), color: props.theme.global.warning }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
+              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.warning }} source={res.ic_warning_amber} />
+              <Text style={{ fontSize: cx(12), color: props.theme?.global.warning }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
           </View>}
           <View >
-            <Text style={{ color: props.theme.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
+            <Text style={{ color: props.theme?.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
             <LdvPickerView
               hour={state.onHour}
               minute={state.onMinute}
@@ -281,7 +282,7 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
             />
           </View>
           <View>
-            <Text style={{ color: props.theme.global.fontColor, marginVertical: cx(10) }}>
+            <Text style={{ color: props.theme?.global.fontColor, marginVertical: cx(10) }}>
               {I18n.getLang('addTimeCycle_settings_sec_text2')}
             </Text>
             <LdvPickerView
@@ -305,7 +306,7 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
           actions={<View style={{ flex: 1 }}>
             <>
               <View>
-                <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
+                <Text style={{ fontSize: cx(12), color: props.theme?.global.fontColor }}>
                   {I18n.formatValue('feature_summary_action_txt_4', `${Number(state.onHour)}`, `${Number(state.onMinute)}`)}
                 </Text>
               </View>
@@ -317,7 +318,7 @@ const FixedTimeForPlugDetailPage = (props: { theme?: any }) => {
             </>
             <>
               <View>
-                <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
+                <Text style={{ fontSize: cx(12), color: props.theme?.global.fontColor }}>
                   {I18n.formatValue('feature_summary_action_txt_6', `${Number(state.offHour)}`, `${Number(state.offMinute)}`)}
                 </Text>
               </View>

package/src/modules/fixedTimeForPlug/FixedTimeForPlugPage.tsx

@@ -13,12 +13,13 @@ import Spacer from "@ledvance/base/src/components/Spacer";
 import {Utils} from "tuya-panel-kit";
 import ItemCard from "./ItemCard";
 import InfoText from "@ledvance/base/src/components/InfoText";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {convertX: cx, topBarHeight} = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 const MAX_NUM = 10
 
-const FixedTimeForPlugPage = (props: { theme?: any}) => {
+const FixedTimeForPlugPage = (props: { theme?: ThemeType}) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const params = useRoute().params as FixedTimeParam
@@ -75,16 +76,16 @@ const FixedTimeForPlugPage = (props: { theme?: any}) => {
       height: cx(198)
     },
     execTip: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       marginLeft: cx(24),
     },
     maxImg: {
       width: cx(16),
       height: cx(16),
-      tintColor: props.theme.global.warning
+      tintColor: props.theme?.global.warning
     },
     maxTip: {
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
     },
   })
 
@@ -135,7 +136,7 @@ const FixedTimeForPlugPage = (props: { theme?: any}) => {
           icon={res.device_panel_schedule_alert}
           text={I18n.getLang('fixedTimeCycle_information_text')}
           textStyle={{flex: undefined}}
-          contentColor={props.theme.global.secondFontColor}
+          contentColor={props.theme?.global.secondFontColor}
         />
         <View
           style={{
@@ -144,7 +145,7 @@ const FixedTimeForPlugPage = (props: { theme?: any}) => {
             marginVertical: cx(25),
             marginHorizontal: cx(24),
             borderRadius: cx(6),
-            backgroundColor: props.theme.button.primary,
+            backgroundColor: props.theme?.button.primary,
           }}
         >
           <TouchableOpacity
@@ -155,7 +156,7 @@ const FixedTimeForPlugPage = (props: { theme?: any}) => {
             }}
             onPress={() => onAddOrEditItem('add')}
           >
-            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: props.theme.button.fontColor, textAlign: 'center'}}>
+            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: props.theme?.button.fontColor, textAlign: 'center'}}>
               {I18n.getLang('fixedTimeCycle_bttn_text')}
             </Text>
           </TouchableOpacity>

package/src/modules/fixedTimeForPlug/ItemCard.tsx

@@ -6,13 +6,14 @@ import {SwitchButton, Utils} from "tuya-panel-kit";
 import {getIsClosed, loopText} from "@ledvance/base/src/utils/common";
 import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 import {FixedTimeItem} from "./FixedTimeForPlugActon";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {convertX: cx} = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 const {parseTimer} = Utils.TimeUtils
 
 export interface ItemCardProps {
-  theme?: any
+  theme?: ThemeType
   item: FixedTimeItem,
   is24Hour?: boolean,
   onSwitch: (enable: boolean) => void
@@ -35,14 +36,14 @@ const ItemCard = (props: ItemCardProps) => {
     },
     time: {
       flex: 1,
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     switchBtn: {},
     loopText: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_roman',
     },

package/src/modules/fixedTimeForPlug/Summary.tsx

@@ -4,12 +4,13 @@ import res from "@ledvance/base/src/res"
 import I18n from "@ledvance/base/src/i18n";
 import { Utils } from "tuya-panel-kit";
 import Spacer from "@ledvance/base/src/components/Spacer";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 
 interface SummaryProps {
-  theme?: any
+  theme?: ThemeType
   style?: ViewStyle
   frequency?: string | ReactElement
   time?: string | ReactElement
@@ -24,7 +25,7 @@ const Summary = (props: SummaryProps) => {
       marginHorizontal: cx(24),
     },
     itemTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
@@ -40,14 +41,14 @@ const Summary = (props: SummaryProps) => {
       minWidth: cx(100)
     },
     summaryImg: {
-      tintColor: props.theme.global.fontColor,
+      tintColor: props.theme?.global.fontColor,
       width: cx(12),
       height: cx(12),
       marginRight: cx(6)
     },
     leftTitle: {
       fontSize: cx(14),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
     },
     summaryRight: {
       flex: 1,
@@ -58,10 +59,10 @@ const Summary = (props: SummaryProps) => {
       borderRadius: cx(16),
       paddingHorizontal: cx(12),
       alignSelf: 'flex-start',
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
     },
     rightItem: {
-      color: props.theme.tag.fontColor,
+      color: props.theme?.tag.fontColor,
     },
   })