@ledvance/ui-biz-bundle 1.1.152 → 1.1.153

package/package.json

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

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/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,9 +9,11 @@ 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 isPad = useIsPad()
   const { addEleDpCode, powerDpCode, price, unit, date, over365Days, over7Days, chartData } = params
 
   const getDateType = useCallback((d: string) => {
@@ -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),

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/NewBarChart.tsx

@@ -62,6 +62,7 @@ const BarChartWithTouch = (props: BarChartProps) => {
       legend: {
         show: true,
         data: ['kWh', unit],
+        top: '5%',
         textStyle: {
           color: theme?.global?.fontColor,
         }