@ledvance/ui-biz-bundle 1.1.151 → 1.1.153

package/package.json

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

package/src/modules/flags/FlagInfo.tsx

@@ -559,5 +559,53 @@ export const defFlagList: FlagUiInfo[] = [
     name: I18n.getLang('country_VE'),
     ...defFlagConfig,
     colors: [{ h: 0, s: 100, v: 100 }, { h: 205, s: 100, v: 100 }, { h: 60, s: 100, v: 100 },],
-  }
+  },
+  {
+    id: 168,
+    name: I18n.getLang('country_JO'),
+    ...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'),
+    ...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'),
+    ...defFlagConfig,
+    colors: [{"h":219,"s":92,"v":34}, {"h":0,"s":0,"v":100}, {"h":358,"s":92,"v":85}],
+  },
+  {
+    id: 165,
+    name: I18n.getLang('country_northern_ireland'),
+    ...defFlagConfig,
+    colors: [{"h":0,"s":0,"v":100}, {"h":0,"s":100,"v":82}, {"h":0,"s":0,"v":100}],
+  },
+  {
+    id: 164,
+    name: I18n.getLang('country_wales'),
+    ...defFlagConfig,
+    colors: [{"h":142,"s":100,"v":69}, {"h":350,"s":92,"v":78}, {"h":0,"s":0,"v":100}],
+  },
+  {
+    id: 163,
+    name: I18n.getLang('country_BA'),
+    ...defFlagConfig,
+    colors: [{"h":0,"s":0,"v":100}, {"h":214,"s":100,"v":42}, {"h":48,"s":100,"v":100}],
+  },
+  {
+    id: 162,
+    name: I18n.getLang('country_north_macedonia'),
+    ...defFlagConfig,
+    colors: [{"h":56,"s":81,"v":97}, {"h":358,"s":85,"v":85}],
+  },
+  {
+    id: 161,
+    name: I18n.getLang('country_werder_bremen'),
+    ...defFlagConfig,
+    colors: [{"h":0,"s":0,"v":100}, {"h":160,"s":80,"v":34}],
+  },
 ]

package/src/modules/flags/FlagItem.tsx

@@ -46,7 +46,6 @@ function FlagItem(props: RecommendMoodItemProps) {
       height: cx(45),
       marginTop: cx(-5),
       marginBottom: cx(-10),
-      fontWeight: 'bold',
     },
     gradientItem: {
       alignItems: 'center',
@@ -57,7 +56,7 @@ function FlagItem(props: RecommendMoodItemProps) {
     <Card
       style={[styles.card, props.style]}
       onPress={props.onPress}>
-      <View>
+      <View accessibilityLabel={'FlagItem'} accessibilityHint={`${props.title}`}>
         <Spacer height={cx(16)} />
         <View style={styles.headline}>
           <View style={{ flexDirection: 'row', flex: 1, paddingRight: cx(5), justifyContent: 'flex-start' }}>

package/src/modules/flags/FlagPage.tsx

@@ -207,7 +207,10 @@ const FlagPage = (props: { theme?: ThemeType }) => {
           placeholder={I18n.getLang('country_selection_textfield_headline_search')}
           style={{ marginHorizontal: cx(24), flex: 1 }}
         />
-        <TouchableOpacity style={{ paddingRight: cx(24) }}
+        <TouchableOpacity
+          style={{ paddingRight: cx(24) }}
+          accessibilityLabel={'RefreshButton'}
+          accessibilityHint={'RefreshButton'}
           onPress={() => {
             showDialog({
               method: 'confirm',

package/src/newModules/biorhythm/IconSelect.tsx

@@ -1,13 +1,15 @@
 import { useNavigation, useRoute } from '@react-navigation/native'
-import React, { useEffect, useState } from 'react'
-import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+// 导入 Dimensions API 来获取屏幕宽度
+import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
 import iconList from '../biorhythm/iconListData'
 import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
 import I18n from '@ledvance/base/src/i18n'
 import ThemeType from '@ledvance/base/src/config/themeType'
+import { xLog } from '@ledvance/base/src/utils'
 
-const cx = Utils.RatioUtils.convertX
+const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
 interface SceneDetailPageParams {
@@ -17,6 +19,13 @@ interface SceneDetailPageParams {
   iconIdList: any
 }
 
+// --- 新增：定义常量，方便维护 ---
+const ICON_WIDTH = cx(32)
+const ICON_MARGIN = cx(10)
+const CONTAINER_HORIZONTAL_PADDING = cx(24)
+// 每个图标占据的总宽度（图片宽度 + 左右margin）
+const ITEM_TOTAL_WIDTH = ICON_WIDTH + ICON_MARGIN * 2
+
 function IconSelect(props: { theme?: ThemeType }) {
   const [list, setList] = useState(iconList)
   const navigation = useNavigation()
@@ -27,7 +36,7 @@ function IconSelect(props: { theme?: ThemeType }) {
         ...item,
         selectStatus: item?.id === id,
       }
-    })
+    }) as typeof list
     setList(newList)
   }
   useEffect(() => {
@@ -39,26 +48,74 @@ function IconSelect(props: { theme?: ThemeType }) {
         selectStatus: item?.id === iconId,
         disabled: iconIdList?.some(val => val === item?.id && val !== iconId),
       }
-    })
+    }) as typeof list
     setList(newList)
   }, [])
-  useEffect(() =>{
-    console.log(list, '< --- listttt')
-  }, [list])
+
+  const getStyles = useCallback((theme?: ThemeType) => StyleSheet.create({
+    container: { flex: 1, flexDirection: 'column' },
+    scrollView: { marginHorizontal: CONTAINER_HORIZONTAL_PADDING },
+    titleView: { marginTop: cx(40), marginBottom: cx(20) },
+    title: { fontSize: cx(24), color: theme?.global.brand },
+    iconContainer: {
+      flexDirection: 'row',
+      flex: 1,
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    ghostItem: {
+      width: ICON_WIDTH,
+      height: 0,
+      margin: ICON_MARGIN,
+    }
+  }), [CONTAINER_HORIZONTAL_PADDING, ICON_WIDTH, ICON_MARGIN])
+
+  const styles = useMemo(() => getStyles(props.theme), [props.theme])
+
+  // --- 新增：动态计算需要渲染的幽灵元素数量 ---
+  const ghostElements = useMemo(() => {
+
+    // 1. 获取容器的可用宽度
+    const containerWidth = cx(Dimensions.get('window').width) - CONTAINER_HORIZONTAL_PADDING * 2
+
+    // 2. 计算每行可以容纳多少个元素
+    const itemsPerRow = Math.ceil(containerWidth / ITEM_TOTAL_WIDTH)
+    // 如果无法容纳任何元素，则不渲染幽灵元素
+    if (itemsPerRow <= 0) {
+      xLog('No ghost elements needed.')
+      return null
+    }
+
+    // 3. 计算需要补充的幽灵元素数量
+    const numberOfItems = list.length
+    const itemsInLastRow = numberOfItems % itemsPerRow
+
+    // 如果最后一行为空或已满，则不需要幽灵元素
+    if (itemsInLastRow === 0) {
+      return null
+    }
+
+    const numberOfGhosts = itemsPerRow - itemsInLastRow
+
+    // 4. 返回一个包含正确数量幽灵元素的数组
+    return Array.from({ length: numberOfGhosts }).map((_, index) => (
+      <View key={`ghost-${index}`} style={styles.ghostItem}/>
+    ))
+  }, [list.length]) // 依赖项：当图标总数变化时重新计算
+
   return (
-    <View style={{ flex: 1, flexDirection: 'column' }}>
+    <View style={styles.container}>
       <LDVTopBar
         title={params.backText ?? I18n.getLang('add_new_trigger_time_system_back_text')}
-        onBackPress={() => {
-          navigation.goBack()
-        }}
+        onBackPress={() => navigation.goBack()}
       />
-      <ScrollView nestedScrollEnabled={true} style={{ marginHorizontal: cx(24) }}>
-        <View style={{ marginTop: cx(40), marginBottom: cx(20) }}>
-          <Text style={{ fontSize: cx(24), color: props.theme?.global.brand }}>{I18n.getLang('add_new_trigger_time_icon_selection_headline_text')}</Text>
+      <ScrollView nestedScrollEnabled={true} style={styles.scrollView}>
+        <View style={styles.titleView}>
+          <Text style={styles.title}>{I18n.getLang('add_new_trigger_time_icon_selection_headline_text')}</Text>
         </View>
-        <View
-          style={{ flexDirection: 'row', flex: 1, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <View style={styles.iconContainer}>
+          {/* 渲染真实的图标 */}
           {list?.map(item => {
             return <TouchableOpacity
               onPress={() => {
@@ -71,14 +128,17 @@ function IconSelect(props: { theme?: ThemeType }) {
               <Image
                 source={{ uri: item?.icon }}
                 style={{
-                  width: cx(32),
-                  height: cx(32),
-                  margin: cx(10),
+                  width: ICON_WIDTH,
+                  height: cx(32), // 高度保持不变
+                  margin: ICON_MARGIN,
                   tintColor: item?.selectStatus ? props.theme?.icon.primary : item?.disabled && props.theme?.icon.disable || props.theme?.icon.normal,
                 }}
               />
             </TouchableOpacity>
           })}
+
+          {/* 渲染精确计算出的幽灵元素 */}
+          {ghostElements}
         </View>
       </ScrollView>
     </View>

package/src/newModules/energyConsumption/EnergyConsumptionActions.ts

@@ -61,13 +61,8 @@ export async function getElectricity(devId: string, addEleDpCode: string, date:
   return res
 }
 
-let dpResultByMonthCache: DpResultByMonthResData | undefined = undefined
 const getDpResultByYear = async (devId: string, addEleDpCode: string, dateStr: string): Promise<OverviewItem[]> => {
-  let res: DpResultByMonthResData | undefined
-  if (!dpResultByMonthCache) {
-    dpResultByMonthCache = await getDpResultByMonth(devId, addEleDpCode, 'sum')
-  }
-  res = dpResultByMonthCache
+  const res = await getDpResultByMonth(devId, addEleDpCode, 'sum')
   if (!isEmpty(res)) {
     if (!isEmpty(res.years)) {
       const year = dateStr
@@ -75,7 +70,7 @@ const getDpResultByYear = async (devId: string, addEleDpCode: string, dateStr: s
       if (!curMonth) {
         return []
       }
-      const curMonthList = Object.keys(curMonth).sort((a, b) => parseInt(b) - parseInt(a))
+      const curMonthList = Object.keys(curMonth).sort((a, b) => parseInt(a) - parseInt(b))
       return curMonthList.map(month => {
         return {
           key: `${monthFormat(month)} ${year}`,

package/src/newModules/energyConsumption/EnergyConsumptionCard.tsx

@@ -98,7 +98,7 @@ const EnergyConsumptionCard = (props: EnergyConsumptionProp) => {
     consumedEnergyItemUnit: {
       color: props.theme?.global.secondFontColor,
       fontSize: cx(14),
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       textAlign: 'center'
     },
     subContent: {
@@ -112,13 +112,13 @@ const EnergyConsumptionCard = (props: EnergyConsumptionProp) => {
       color: props.theme?.global.secondBrand,
     },
     titleText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
       textAlign: 'center',
     },
     unitText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
     },

package/src/newModules/energyConsumption/EnergyConsumptionChart/EnergyChartSection.tsx

@@ -3,7 +3,6 @@ import res from '@ledvance/base/src/res'
 import React, { useCallback } from 'react'
 import { Image, TouchableOpacity, View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
-import DateSelectedItem from '../component/DateSelectedItem'
 import DateSwitch from '../component/DateSwitch'
 import { DateType } from '../co2Data'
 import DateTypeItem from '../component/DateTypeItem'
@@ -33,30 +32,13 @@ export const EnergyChartSection = ({ isLandscape, state, actions, params, styles
 
   return (
     <>
-      {!isLandscape && (
-        <View style={styles.dateSwitchContainer}>
-          <DateSwitch
-            style={{ flex: 1 }}
-            date={state.date}
-            dateType={state.dateType}
-            headlineText={state.headlineText}
-            onDateChange={actions.setDate}
-          />
-          <TouchableOpacity style={{ width: cx(30) }} onPress={handleExportCsv}>
-            <Image
-              style={styles.downloadIcon}
-              source={{ uri: !isDataEmpty ? res.download_icon : undefined }}
-            />
-          </TouchableOpacity>
-        </View>
-      )}
       <View style={styles.dateTypeContainer}>
         <DateTypeItem
-          style={{ flex: 1, marginHorizontal: cx(5) }}
+          style={{ flex: 0.5 }}
           dateType={state.dateType}
           onDateTypeChange={actions.setDateType}
         />
-        <DateSelectedItem
+        <DateSwitch
           style={{ flex: 1 }}
           dateType={state.dateType}
           date={state.date}
@@ -67,8 +49,18 @@ export const EnergyChartSection = ({ isLandscape, state, actions, params, styles
       {(state.loading || isDataEmpty) ? (
         <EmptyDataView text={getEmptyDataTip()} theme={theme} styles={styles}/>
       ) : (
-        !state.loading &&
-        <NewBarChart height={chartHeight} data={state.chartData} price={state.price} unit={params.unit}/>
+        !state.loading && <>
+          {!isLandscape && <View style={styles.downloadContainer}>
+              <TouchableOpacity
+                  style={{ width: cx(30) }}
+                  onPress={handleExportCsv}>
+                  <Image
+                      style={styles.downloadIcon}
+                      source={{ uri: res.download_icon }}/>
+              </TouchableOpacity>
+          </View>}
+            <NewBarChart height={chartHeight} data={state.chartData} price={state.price} unit={params.unit}/>
+        </>
       )}
     </>
   )

package/src/newModules/energyConsumption/EnergyConsumptionChart/styles.ts

@@ -16,13 +16,17 @@ export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
   listEmptyText: {
     flex: 0,
   },
+  downloadContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    // marginHorizontal: cx(24),
+    marginTop: cx(15),
+    marginBottom: cx(-15)
+  },
   downloadIcon: {
     width: cx(24),
     height: cx(24),
     tintColor: theme?.global.brand,
-    position: 'absolute',
-    right: 0,
-    top: cx(10),
   },
   intervalContainer: {
     flexDirection: 'row',
@@ -79,7 +83,8 @@ export const getStyles = (theme: ThemeType | undefined) => StyleSheet.create({
   },
   dateTypeContainer: {
     flexDirection: 'row',
-    marginBottom: cx(15),
+    marginTop: cx(15),
+    // marginBottom: cx(15),
   },
   scrollViewContent: {
     marginHorizontal: cx(24),

package/src/newModules/energyConsumption/EnergyConsumptionChart/useEnergyData.ts

@@ -9,10 +9,12 @@ import { useCallback, useEffect } from 'react'
 import { ChartType, DateType } from '../co2Data'
 import { getElectricity, getPowerData, PowerDataItem } from '../EnergyConsumptionActions'
 import { EnergyConsumptionChartProps } from '../EnergyConsumptionChart'
+import {useIsPad} from "@ledvance/base/src/models/modules/NativePropsSlice"
 
 export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string) => {
   const isFocused = useIsFocused()
-  const { addEleDpCode, powerDpCode, price, date, over365Days, over7Days, chartData } = params
+  const isPad = useIsPad()
+  const { addEleDpCode, powerDpCode, price, unit, date, over365Days, over7Days, chartData } = params
 
   const getDateType = useCallback((d: string) => {
     const datejs = dayjs(d)
@@ -26,7 +28,7 @@ export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string
 
   const state = useReactive({
     loading: false,
-    isSupportLandscape: OrientationService.isSupported(),
+    isSupportLandscape: OrientationService.isSupported() && !isPad,
     isLandscape: false,
     chartType: ChartType.kWh as ChartType,
     dateType: getDateType(date),
@@ -34,6 +36,7 @@ export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string
     headlineText: params.headlineText,
     chartData: chartData.filter((item) => getDateType(date) !== DateType.Year || item.headlineText.startsWith(date)),
     price: isNaN(Number(price)) ? 0 : Number(price),
+    unit: unit,
     over365Days: over365Days,
     over7Days: over7Days,
     interval: 5,
@@ -49,7 +52,7 @@ export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string
   }, 5000, { immediate: true })
 
   // 副作用：获取数据
-  useUpdateEffect(() => {
+  useEffect(() => {
     state.loading = true
     if (state.chartType === ChartType.kWh) {
       getElectricity(devId, addEleDpCode, state.date, state.dateType)
@@ -143,6 +146,10 @@ export const useEnergyData = (params: EnergyConsumptionChartProps, devId: string
         OrientationService.lockToPortrait()
       }
     }, []),
+    setPriceAndUnit: useCallback((newPrice: string, newUnit: string) => {
+      state.price = isNaN(Number(newPrice)) ? 0 : Number(newPrice)
+      state.unit = newUnit
+    }, []),
   }
 
   return { state, actions }

package/src/newModules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -147,7 +147,7 @@ const EnergyConsumptionDetail = (props: {theme?: ThemeType}) => {
     },
     consumptionNum: {
       color: props.theme?.global.secondBrand,
-      fontFamily: 'helvetica_neue_lt_std_bd',
+      // fontFamily: 'helvetica_neue_lt_std_bd',
     },
     subContent: {
       flex: 1,
@@ -160,7 +160,7 @@ const EnergyConsumptionDetail = (props: {theme?: ThemeType}) => {
       color: props.theme?.global.secondBrand,
     },
     titleText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
       textAlign: 'center',

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -1,3 +1,9 @@
+import Segmented from '@ledvance/base/src/components/Segmented'
+import { ChartType } from './co2Data'
+import { EnergyChartSection } from './EnergyConsumptionChart/EnergyChartSection'
+import { PowerChartSection } from './EnergyConsumptionChart/PowerChartSection'
+import { getStyles } from './EnergyConsumptionChart/styles'
+import { useEnergyData } from './EnergyConsumptionChart/useEnergyData'
 import React, { useEffect, useMemo } from "react";
 import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
 import { useNavigation, useIsFocused } from '@react-navigation/core'
@@ -95,6 +101,18 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
     const len = state.overviewList.length
     return state.overviewList?.length ? `${state.overviewList[len - 1].key} - ${state.overviewList[0].key}` : ''
   }, [state.overviewList])
+  const chartStyles = useMemo(() => getStyles(props.theme), [props.theme])
+  const chartParams = useMemo(() => ({
+    backTitle,
+    headlineText: chartHeadline,
+    chartData: state.overviewList,
+    price: state.price,
+    unit: state.unit,
+    addEleDpCode: params.addEleDpCode,
+    powerDpCode: params.powerDpCode,
+    date: (new Date()).getFullYear().toString(),
+  }), [backTitle, chartHeadline, state.overviewList, state.price, state.unit, params.addEleDpCode, params.powerDpCode])
+  const { state: chartState, actions } = useEnergyData(chartParams, devId)
 
   useInterval(() => {
       if (isFocused) {
@@ -204,6 +222,7 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
       const v = JSON.parse(res.data)
       state.price = v?.price || '0'
       state.unit = v?.unit
+      actions.setPriceAndUnit(v?.price, v?.unit || UnitList[0])
     } else {
       state.price = '0'
     }
@@ -213,6 +232,7 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
     updatePrice(devId, data).then()
     state.price = data.price || '0'
     state.unit = data.unit
+    actions.setPriceAndUnit(data.price, data.unit)
   }
 
   const getEnergyModeTitle = (value: boolean) => {
@@ -246,7 +266,7 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
     },
     consumptionNum: {
       color: props.theme?.global.secondBrand,
-      fontFamily: 'helvetica_neue_lt_std_bd',
+      // fontFamily: 'helvetica_neue_lt_std_bd',
     },
     subContent: {
       flex: 1,
@@ -259,7 +279,7 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
       color: props.theme?.global.secondBrand,
     },
     titleText: {
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
       color: props.theme?.global.secondFontColor,
       textAlign: 'center',
@@ -511,6 +531,23 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
               }}
             />
           </Card>
+          <Spacer/>
+          <ScrollView style={{marginHorizontal: cx(24)}}>
+            <Segmented
+              options={[
+                { label: I18n.getLang('chartdisplay_energy'), value: ChartType.kWh },
+                { label: I18n.getLang('chartdisplay_power'), value: ChartType.Watt },
+              ]}
+              value={chartState.chartType}
+              onChange={actions.setChartType}
+            />
+            {chartState.chartType === ChartType.kWh ? (
+              <EnergyChartSection state={chartState} actions={actions} params={chartParams} styles={chartStyles} theme={props.theme}
+                                  chartHeight={cx(400)}/>
+            ) : (
+              <PowerChartSection state={chartState} actions={actions} styles={chartStyles} theme={props.theme} chartHeight={cx(400)}/>
+            )}
+          </ScrollView>
           <Spacer />
           {/* Annual overview */}
           {!!state.price && <OverView

package/src/newModules/energyConsumption/component/DateSelectedItem.tsx

@@ -68,7 +68,7 @@ export default withTheme(function DateSelectedItem(props: DateSelectedItemProps)
             textAlign: 'center',
             flex: 1,
             color: props.theme?.textInput.fontColor,
-            fontFamily: 'helvetica_neue_lt_std_roman',
+            // fontFamily: 'helvetica_neue_lt_std_roman',
         },
         modalRoot: {paddingTop: cx(20), backgroundColor: theme?.popup.cellBg},
         modalButtonParent: {flex: 1, height: cx(48)},

package/src/newModules/energyConsumption/component/DateSwitch.tsx

@@ -1,6 +1,7 @@
 import ThemeType from "@ledvance/base/src/config/themeType";
+import DateSelectedItem from './DateSelectedItem'
 import React, {PropsWithChildren, useCallback, useEffect} from "react";
-import {Image, Text, TouchableOpacity, View, ViewProps} from "react-native";
+import {Image, TouchableOpacity, View, ViewProps} from "react-native";
 import {Utils} from "tuya-panel-kit";
 import {useReactive} from "ahooks";
 import {DateType} from "../co2Data";
@@ -79,33 +80,34 @@ export default withTheme(function DateSwitch(props: DateSwitchProps) {
 
     return (<View style={[props.style, {flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}]}>
         <TouchableOpacity
-            disabled={state.disableArrowLeft}
-            onPress={() => {
-                changeDate(false);
-            }}>
+          disabled={state.disableArrowLeft}
+          onPress={() => {
+              changeDate(false);
+          }}>
             <Image
-                source={{ uri: res.arrow_left}}
-                style={{tintColor: state.disableArrowLeft ? theme?.global.disabledFontColor : theme?.global.brand}}
-                height={cx(36)}
-                width={cx(36)}/>
+              source={{ uri: res.arrow_left}}
+              style={{tintColor: state.disableArrowLeft ? theme?.global.disabledFontColor : theme?.global.brand}}
+              height={cx(36)}
+              width={cx(36)}/>
         </TouchableOpacity>
-        <Text style={{
-            fontSize: cx(24),
-            minWidth: cx(200),
-            textAlign: 'center',
-            color: theme?.global.brand,
-            fontFamily: 'helvetica_neue_lt_std_roman',
-        }}>{state.headlineText}</Text>
+        <DateSelectedItem
+          style={{flex: 1}}
+          dateType={state.dateType}
+          date={state.date}
+          onDateChange={date => {
+              props.onDateChange(date)
+          }}
+        />
         <TouchableOpacity
-            disabled={state.disableArrowRight}
-            onPress={() => {
-                changeDate(true);
-            }}>
+          disabled={state.disableArrowRight}
+          onPress={() => {
+              changeDate(true);
+          }}>
             <Image
-                source={{ uri: res.arrow_right}}
-                style={{tintColor: state.disableArrowRight ? theme?.global.disabledFontColor : theme?.global.brand}}
-                height={cx(36)}
-                width={cx(36)}/>
+              source={{ uri: res.arrow_right}}
+              style={{tintColor: state.disableArrowRight ? theme?.global.disabledFontColor : theme?.global.brand}}
+              height={cx(36)}
+              width={cx(36)}/>
         </TouchableOpacity>
     </View>)
 })

package/src/newModules/energyConsumption/component/DateTypeItem.tsx

@@ -61,7 +61,7 @@ export default withTheme(function DateTypeItem(props: DateTypeItemProps) {
                     textAlign: 'center',
                     flex: 1,
                     color: props.theme?.textInput.fontColor,
-                    fontFamily: 'helvetica_neue_lt_std_roman',
+                    // fontFamily: 'helvetica_neue_lt_std_roman',
                 }}>{state.dateTypeTitle}</Text>
             </View>
         </TouchableOpacity>

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

@@ -117,7 +117,7 @@ const EnergyModal = (props: EnergyModalProps) => {
       marginEnd: cx(6),
       fontSize: cx(16),
       color: props.theme?.textInput.fontColor,
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
     },
     textInputGroup: {
       flexDirection: 'row',
@@ -159,7 +159,7 @@ const EnergyModal = (props: EnergyModalProps) => {
           <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), }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
               <View style={styles.textInputGroup}>
                 <TextInput
                   value={state.energyData?.price}

package/src/newModules/energyConsumption/component/NewBarChart.tsx

@@ -11,24 +11,22 @@ const cx = Utils.RatioUtils.convertX
 
 interface BarChartProps {
   theme?: ThemeType
-  data: OverviewItem[],
-  price: number,
-  unit: string,
-  height: number,
+  data: OverviewItem[]
+  price: number
+  unit: string
+  height: number
 }
 
 const BarChartWithTouch = (props: BarChartProps) => {
-  const echarts = useRef()
+  const echarts = useRef<any>()
   const { data, height, price, unit, theme } = props
-  const dataX = data?.map(item => {
-    return item.chartTitle
-  })
-  const dataKwhY = data?.map(item => {
-    return Number(item.value)
-  })
-  const dataPriceY = data?.map(item => {
-    return ((isNaN(Number(item.value)) ? 0 : Number(item.value)) * price).toFixed(2)
-  })
+
+  const dataX = data?.map(item => item.chartTitle)
+  const dataKwhY = data?.map(item => Number(item.value))
+  const dataPriceY = data?.map(item =>
+    ((isNaN(Number(item.value)) ? 0 : Number(item.value)) * price).toFixed(2)
+  )
+
   const maxValue = useMemo(() => {
     let max = Math.max(...dataKwhY)
     if (max < 0.1) {
@@ -48,134 +46,130 @@ const BarChartWithTouch = (props: BarChartProps) => {
     const max = Math.max(...dataPriceY.map(it => Number(it)))
     return max > 999 ? '15%' : '10%'
   }, [dataPriceY])
-  const option = {
-    tooltip: {
-      show: true,
-      triggerOn: 'click',
-      trigger: 'axis',
-    },
-    legend: {
-      show: true,
-      data: ['kWh', unit],
-      textStyle: {
-        color: theme?.global.fontColor,
-      }
-    },
-    grid: {
-      right: gridRight,
-    },
-    xAxis: {
-      data: dataX,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
+
+  const chartKey = useMemo(() => {
+    return `chart-${price}-${unit}`
+  }, [price, unit])
+
+  /** --- option 保持 useMemo，避免不必要重建 ---**/
+  const option = useMemo(() => {
+    return {
+      tooltip: {
         show: true,
-        color: props.theme?.global.secondFontColor,
-        interval: 'auto',
-        rotate: 45,
-        align: 'right',
-        verticalAlign: 'top',
-        showMinLabel: true,
-        showMaxLabel: true,
-      }
-    },
-    yAxis: [{
-      type: 'value',
-      name: I18n.getLang('consumption_data_annual_bar_chart_text'),
-      max: Math.max(maxValue, 0.02),
-      min: 0,
-      position: 'left',
-      axisLabel: {
-        formatter: function (value) {
-          const kwh = parseFloat(value)
-          let toFixed = 2
-          if (kwh >= 100) {
-            toFixed = 0
-          } else if (kwh >= 10) {
-            toFixed = 1
-          }
-          return kwh.toFixed(toFixed)
-        },
-        color: props.theme?.global.secondFontColor,
+        triggerOn: 'click',
+        trigger: 'axis',
       },
-      nameTextStyle: {
-        fontSize: 14,
-        align: 'left',
-        padding: [0, 0, 0, cx(-30)],
-        color: props.theme?.global.secondFontColor,
-      },
-    }, {
-      type: 'value',
-      name: I18n.formatValue('format_unit', unit),
-      position: 'right',
-      alignTicks: true,
-      max: Math.ceil(price ? maxValue * price * 1.4 : 0),
-      min: 0,
-      minInterval: 1,
-      axisLabel: {
-        formatter: function (value) {
-          const price = parseFloat(value)
-          let toFixed = 2
-          if (price >= 100) {
-            toFixed = 0
-          } else if (price >= 10) {
-            toFixed = 1
-          }
-          return price.toFixed(toFixed)
-        },
-        color: props.theme?.global.secondFontColor,
+      legend: {
+        show: true,
+        data: ['kWh', unit],
+        top: '5%',
+        textStyle: {
+          color: theme?.global?.fontColor,
+        }
       },
-      nameTextStyle: {
-        fontSize: 14,
-        align: 'right',
-        padding: [0, cx(-30), 0, 0],
-        color: props.theme?.global.secondFontColor,
+      grid: { right: gridRight },
+      xAxis: {
+        data: dataX,
+        axisTick: { show: false },
+        axisLabel: {
+          show: true,
+          color: theme?.global?.secondFontColor,
+          interval: 'auto',
+          rotate: 45,
+          align: 'right',
+          verticalAlign: 'top',
+          showMinLabel: true,
+          showMaxLabel: true,
+        }
       },
-    }],
-    series: [
-      {
-        name: 'kWh',
-        type: 'bar',
-        data: dataKwhY,
-        itemStyle: {
-          emphasis: {
-            color: '#FFC2A9', // Color when bar is clicked
+      yAxis: [
+        {
+          type: 'value',
+          name: I18n.getLang('consumption_data_annual_bar_chart_text'),
+          max: Math.max(maxValue, 0.02),
+          min: 0,
+          position: 'left',
+          axisLabel: {
+            formatter(value) {
+              const kwh = parseFloat(value)
+              let toFixed = 2
+              if (kwh >= 100) toFixed = 0
+              else if (kwh >= 10) toFixed = 1
+              return kwh.toFixed(toFixed)
+            },
+            color: theme?.global?.secondFontColor,
+          },
+          nameTextStyle: {
+            fontSize: 14,
+            align: 'left',
+            padding: [0, 0, 0, cx(-30)],
+            color: theme?.global?.secondFontColor,
           },
-          color: '#FFC2A9',
-          borderRadius: 2,
         },
-        barMaxWidth: 10,
-        select: {
+        {
+          type: 'value',
+          name: I18n.formatValue('format_unit', unit),
+          position: 'right',
+          alignTicks: true,
+          max: Math.ceil(price ? maxValue * price * 1.4 : 0),
+          min: 0,
+          minInterval: 1,
+          axisLabel: {
+            formatter(value) {
+              const priceValue = parseFloat(value)
+              let toFixed = 2
+              if (priceValue >= 100) toFixed = 0
+              else if (priceValue >= 10) toFixed = 1
+              return priceValue.toFixed(toFixed)
+            },
+            color: theme?.global?.secondFontColor,
+          },
+          nameTextStyle: {
+            fontSize: 14,
+            align: 'right',
+            padding: [0, cx(-30), 0, 0],
+            color: theme?.global?.secondFontColor,
+          },
+        }
+      ],
+      series: [
+        {
+          name: 'kWh',
+          type: 'bar',
+          data: dataKwhY,
           itemStyle: {
-            borderColor: '#FFC2A9',
-          }
+            color: '#FFC2A9',
+            emphasis: { color: '#FFC2A9' },
+            borderRadius: 2,
+          },
+          barMaxWidth: 10,
+          selectedMode: 'single',
         },
-        selectedMode: 'single',
-      },
-      {
-        name: unit,
-        type: 'line',
-        data: dataPriceY,
-        yAxisIndex: 1,
-        smooth: true,
-        showSymbol: false,
-        color: '#F49431',
-        selectedMode: 'single',
+        {
+          name: unit,
+          type: 'line',
+          data: dataPriceY,
+          yAxisIndex: 1,
+          smooth: true,
+          showSymbol: false,
+          color: '#F49431',
+          selectedMode: 'single',
+        }
+      ],
+      dataZoom: {
+        start: 0,
+        type: 'inside',
+        zoomLock: true,
       }
-    ],
-    dataZoom: {
-      start: 0,
-      type: 'inside',
-      zoomLock: true,
-    },
-    customMapData: {}
-  }
+    }
+  }, [dataX, dataKwhY, dataPriceY, price, unit, maxValue, gridRight, theme])
+
   return (
     <View style={{ flex: 1 }}>
       <ECharts
-        option={option}
+        key={chartKey}
         ref={echarts}
+        option={option}
         height={height}
       />
     </View>

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

@@ -40,7 +40,7 @@ const OverView = (props: OverViewProps) => {
     listEmptyText: {
       color: props.theme?.global.fontColor,
       fontSize: cx(12),
-      fontFamily: 'helvetica_neue_lt_std_roman',
+      // fontFamily: 'helvetica_neue_lt_std_roman',
     },
     overviewItemText: {
       color: props.theme?.global.fontColor,

package/src/newModules/mood/MoodItem.tsx

@@ -65,7 +65,6 @@ const MoodItem = (props: MoodItemProps) => {
       height: cx(45),
       marginTop: cx(-5),
       marginBottom: cx(-10),
-      fontWeight: 'bold',
     },
     moodTypeItem: {
       flexDirection: 'row',