@ledvance/ui-biz-bundle 1.1.118 → 1.1.120

package/package.json

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

package/src/newModules/childLock/ChildLockPage.tsx

@@ -1,18 +1,19 @@
 import React from 'react'
-import { SwitchButton, Utils } from "tuya-panel-kit";
+import {Utils} from "tuya-panel-kit";
 import Page from "@ledvance/base/src/components/Page";
 import I18n from "@ledvance/base/src/i18n/index";
-import { useDeviceInfo, useDp } from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { useReactive } from "ahooks";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import { View, Text, StyleSheet, Image } from "react-native";
-import { Result } from "@ledvance/base/src/models/modules/Result";
+import {useDeviceInfo, useDp} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {useReactive} from "ahooks";
+import {View, Text, StyleSheet, Image} from "react-native";
+import {Result} from "@ledvance/base/src/models/modules/Result";
 import res from "@ledvance/base/src/res";
-import { useParams } from "@ledvance/base/src/hooks/Hooks";
+import {useParams} from "@ledvance/base/src/hooks/Hooks";
 import ThemeType from '@ledvance/base/src/config/themeType'
+import Card from "@ledvance/base/src/components/Card";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
 
-const { convertX: cx } = Utils.RatioUtils
-const { withTheme } = Utils.ThemeUtils
+const {convertX: cx} = Utils.RatioUtils
+const {withTheme} = Utils.ThemeUtils
 
 export interface ChildLockPageParams {
   childLockCode: string
@@ -44,18 +45,6 @@ const ChildLockPage = (props: { theme?: ThemeType }) => {
       marginRight: cx(5),
       tintColor: props.theme?.global.fontColor
     },
-    titleBGView: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: cx(16),
-      marginHorizontal: cx(24),
-    },
-    colorBlock: {
-      width: cx(20),
-      height: cx(20),
-      marginStart: cx(12),
-      borderRadius: cx(4),
-    },
     title: {
       color: props.theme?.global.fontColor,
       fontSize: cx(14),
@@ -81,22 +70,24 @@ const ChildLockPage = (props: { theme?: ThemeType }) => {
     headlineText={I18n.getLang('sockets_specific_settings_child_lock')}
     loading={state.loading}>
     <View style={styles.tipInfoContainer}>
-      <Image style={styles.image} source={res.ic_info} />
-      <Text style={{ color: props.theme?.global.fontColor }}>
+      <Image style={styles.image} source={res.ic_info}/>
+      <Text style={{color: props.theme?.global.fontColor}}>
         {params.descriptionText ? params.descriptionText : I18n.getLang('childlock_overview_description_text')}
       </Text>
     </View>
-    <View style={[styles.titleBGView, styles.shadow]}>
-      <Text style={styles.title}>{I18n.getLang('sockets_specific_settings_child_lock')}</Text>
-      <View style={[styles.colorBlock, { backgroundColor: 'red', opacity: 0 }]} />
-      <Spacer style={{ flex: 1 }} height={0} width={0} />
-      <SwitchButton value={childLock} onValueChange={async v => {
-        state.loading = true
-        await setChildLock(v)
-        params.switchTriggerEvent && params.switchTriggerEvent(v)
-        state.loading = false
-      }} />
-    </View>
+    <Card style={{marginHorizontal: cx(24)}}>
+      <LdvSwitch
+        title={I18n.getLang('sockets_specific_settings_child_lock')}
+        colorAlpha={0}
+        enable={childLock}
+        setEnable={async (v: boolean) => {
+          state.loading = true
+          await setChildLock(v)
+          params.switchTriggerEvent && params.switchTriggerEvent(v)
+          state.loading = false
+        }}
+      />
+    </Card>
   </Page>)
 }
 

package/src/newModules/diyScene/DiySceneEditorPage.tsx

@@ -203,9 +203,9 @@ const DiySceneEditorPage = (props: { theme?: ThemeType }) => {
         state.sceneInfo.type !== 'DIY' && <TouchableOpacity onPress={() => {
           toggleLoveScene(state.sceneInfo.id)
         }}>
-          {isLove ? <Image source={res.like} style={{width: cx(24), height: cx(24)}}/>
+          {isLove ? <Image source={res.like} style={{width: cx(30), height: cx(26)}}/>
             : <Image source={res.un_like}
-                     style={{width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor}}/>}
+                     style={{width: cx(30), height: cx(26), tintColor: props.theme?.global.fontColor}}/>}
           </TouchableOpacity>
       }
       rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}

package/src/newModules/energyConsumption/EnergyConsumptionActions.ts

@@ -142,3 +142,36 @@ export const exportEnergyCsv = (values: any[][], unit: string) => {
   const functionName = `${I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}`
   exportCsvFile(headers, values, functionName)
 }
+
+const EnergyGenerationId = 'EnergyGeneration'
+
+export interface EnergyHistory {
+  time: number
+  generationMode: boolean
+  type: 'Consumption' | 'Generation'
+  value: number
+}
+
+export interface EnergyGeneration {
+  generationMode: boolean
+  totalElectricity: number
+  history: EnergyHistory[]
+}
+
+export async function setEnergyGenerationValue(devId: string, data: EnergyGeneration) {
+  const res = await NativeApi.putJson(devId, EnergyGenerationId, JSON.stringify(data))
+  if (!res.success) {
+    console.log('setEnergyGenerationValue failed', res)
+  }
+  return res.success
+}
+
+export async function getEnergyGenerationValue(devId: string): Promise<EnergyGeneration | undefined> {
+  const res = await NativeApi.getJson(devId, EnergyGenerationId)
+  if (res.success && res.data) {
+    return JSON.parse(res.data)
+  } else {
+    console.log('getEnergyGenerationValue failed', res)
+    return undefined
+  }
+}

package/src/newModules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -10,7 +10,7 @@ import Card from "@ledvance/base/src/components/Card";
 import OverView from "./component/Overview";
 import {useReactive, useUpdateEffect} from "ahooks";
 import {getDataWithSpecified, getDpResultByHour} from "@ledvance/base/src/models/TuyaApi";
-import {useDeviceId, useEngergyGeneration, useTimeZoneCity} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {useDeviceId, useSolarPlug, useTimeZoneCity} from "@ledvance/base/src/models/modules/NativePropsSlice";
 import {cloneDeep, isEmpty} from "lodash";
 import {OverviewItem, PopupType} from "./EnergyConsumptionPage";
 import {exchangeNumber, localeNumber, loopsText} from '@ledvance/base/src/utils/common'
@@ -37,7 +37,7 @@ export interface EnergyConsumptionDetailProps {
 const EnergyConsumptionDetail = (props: {theme?: ThemeType}) => {
   const params = useRoute().params as EnergyConsumptionDetailProps
   const devId = useDeviceId()
-  const isSolarPlug = useEngergyGeneration()
+  const isSolarPlug = useSolarPlug()
   const navigation = useNavigation()
   const timeZoneCity = useTimeZoneCity()
   const state = useReactive({

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -11,10 +11,17 @@ import Card from "@ledvance/base/src/components/Card";
 import OverView from "./component/Overview";
 import { useInterval, useReactive, useUpdateEffect } from "ahooks";
 import { getDpResultByMonth } from "@ledvance/base/src/models/TuyaApi";
-import {useDeviceId, useEngergyGeneration, useTimeZoneCity} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {useDeviceId, useSolarPlug, useTimeZoneCity} from "@ledvance/base/src/models/modules/NativePropsSlice";
 import { flattenDeep, isEmpty } from "lodash";
-import { exchangeNumber, exportFile, localeNumber, monthFormat, monthFormatShort } from "@ledvance/base/src/utils/common";
-import {exportEnergyCsv, updatePrice, useElectricCurrent, usePower, useVoltage} from "./EnergyConsumptionActions";
+import { exchangeNumber, localeNumber, monthFormat, monthFormatShort, showDialog } from "@ledvance/base/src/utils/common";
+import {
+  EnergyGeneration, EnergyHistory,
+  exportEnergyCsv, getEnergyGenerationValue, setEnergyGenerationValue,
+  updatePrice,
+  useElectricCurrent,
+  usePower,
+  useVoltage
+} from "./EnergyConsumptionActions";
 import {ui_biz_routerKey} from "../../navigation/Routers";
 import { EnergyConsumptionDetailProps } from "./EnergyConsumptionDetail";
 import { EnergyConsumptionChartProps } from "./EnergyConsumptionChart";
@@ -22,6 +29,8 @@ import EnergyPopup, { EnergyData, UnitList } from "./component/EnergyModal";
 import { NativeApi, queryDpIds } from "@ledvance/base/src/api/native";
 import { carbonDioxideEmission, countryAndRegion } from "./co2Data";
 import ThemeType from '@ledvance/base/src/config/themeType'
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
+import dayjs from "dayjs";
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -39,7 +48,8 @@ export interface OverviewItem {
   headlineText: string
   chartTitle: string
 }
-export type PopupType = 'co2' | 'money' | 'unit' | ''
+
+export type PopupType = 'co2' | 'money' | 'unit' | 'history' | ''
 
 interface EnergyConsumptionState {
   todayElectricity: string
@@ -50,6 +60,9 @@ interface EnergyConsumptionState {
   showPopup: boolean
   popupType: PopupType
   co2Saved: string
+  loading: boolean
+  generationMode: boolean
+  energyGeneration: EnergyGeneration
 }
 const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
   const params = useRoute().params as EnergyConsumptionPageProps
@@ -60,7 +73,7 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
   const power = usePower(params.powerDpCode)
   const voltage = useVoltage(params.voltageDpCode)
   const electric = useElectricCurrent(params.electricDpCode)
-  const isSolarPlug = useEngergyGeneration()
+  const isSolarPlug = useSolarPlug()
   const state = useReactive<EnergyConsumptionState>({
     todayElectricity: '0',
     totalElectricity: '0',
@@ -69,7 +82,14 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
     unit: UnitList[0],
     showPopup: false,
     popupType: '',
-    co2Saved: '0'
+    co2Saved: '0',
+    loading: false,
+    generationMode: false,
+    energyGeneration: {
+      generationMode: false,
+      totalElectricity: 0,
+      history: []
+    }
   })
   const chartHeadline = useMemo(() => {
     const len = state.overviewList.length
@@ -89,21 +109,74 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
   useEffect(() => {
     getElectricity().then()
     getInitPrice().then()
+    getEnergyGeneration().then()
   }, [])
 
+  const isGeneration = useMemo(() => {
+    // 当 isSolarPlug 和 state.generationMode 不相等时返回 true
+    return isSolarPlug !== state.generationMode
+  }, [isSolarPlug, state.generationMode])
+
+  const totalElectricity = useMemo(() => {
+    return Math.max(Number(state.totalElectricity) - (state.energyGeneration.totalElectricity || 0), 0)
+  }, [state.totalElectricity, state.energyGeneration.totalElectricity])
+
   useUpdateEffect(() =>{
-    if(Number(state.totalElectricity) > 0 && timeZoneCity){
+    if(totalElectricity > 0 && timeZoneCity){
       const letOut = carbonDioxideEmission(timeZoneCity, countryAndRegion) || 0
-      state.co2Saved = localeNumber((letOut * Number(state.totalElectricity)) / 1000, 4)
+      state.co2Saved = localeNumber((letOut * totalElectricity) / 1000, 4)
+    }
+  }, [totalElectricity, timeZoneCity])
+
+  const getEnergyGeneration = async () => {
+    const data = await getEnergyGenerationValue(devId)
+    if (data) {
+      state.energyGeneration = data
+      state.generationMode = data.generationMode
+    } else {
+      state.energyGeneration = {
+        generationMode: false,
+        totalElectricity: 0,
+        history: []
+      }
     }
-  }, [state.totalElectricity, timeZoneCity])
+  }
+
+  const setEnergyGeneration = async (value: boolean) => {
+    state.loading = true
+    await getElectricity()
+    const time = dayjs().startOf('day').valueOf()
+    const item: EnergyHistory = {
+      time,
+      generationMode: value,
+      value: Number(state.totalElectricity) || 0,
+      type: isSolarPlug ? (value ? 'Consumption' : 'Generation') : (value ? 'Generation' : 'Consumption')
+    }
+    const data: EnergyGeneration = {
+      generationMode: value,
+      totalElectricity: Number(state.totalElectricity) || 0,
+      history: [item, ...state.energyGeneration.history]
+    }
+    const res = await setEnergyGenerationValue(devId, data)
+    if (res) {
+      state.generationMode = value
+      state.energyGeneration = data
+    } else {
+      state.generationMode = !value
+    }
+    state.loading = false
+  }
+
+  const onceByDay = () => {
+    const currentDay = dayjs().startOf('day').valueOf()
+    return !!state.energyGeneration.history.find(item => item.time === currentDay)
+  }
 
   const getElectricity = async () => {
     const res = await getDpResultByMonth(devId, params.addEleDpCode, 'sum')
     if (!isEmpty(res)) {
       state.todayElectricity = res.thisDay
       state.totalElectricity = res.sum
-      console.log(res, '< --- res')
       if (!isEmpty(res.years)) {
         const yearsList = Object.keys(res.years)
         yearsList.sort((a, b) => parseInt(b) - parseInt(a))
@@ -142,6 +215,13 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
     state.unit = data.unit
   }
 
+  const getEnergyModeTitle = (value: boolean) => {
+    const generationTitle = I18n.getLang('switchtitle_energygeneration', 'Do you really want to switch to energy generation?')
+    const consumptionTitle = I18n.getLang('switchtitle_energyconsumption', 'Do you really want to switch to energy consumption?')
+    const titleMapping = isSolarPlug ? [consumptionTitle, generationTitle] : [generationTitle, consumptionTitle]
+    return titleMapping[value ? 0 : 1]
+  }
+
   const styles = StyleSheet.create({
     showTip: {
       marginHorizontal: cx(24)
@@ -222,190 +302,240 @@ const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
 
   const ConsumedEnergyItem = (props: { value: number, unit: string }) => {
     return (
-        <View style={styles.subContent}>
-          <Text style={styles.valueText}>{(props.value) || 0}</Text>
-          <Spacer height={cx(4)} />
-          <Text style={styles.titleText}>
-            {unitDivision(props.unit)[0]}
-          </Text>
-          <Text style={styles.titleText}>
-            {unitDivision(props.unit)[1]}
-          </Text>
-        </View>
+      <View style={styles.subContent}>
+        <Text style={styles.valueText}>{(props.value) || 0}</Text>
+        <Spacer height={cx(4)} />
+        <Text style={styles.titleText}>
+          {unitDivision(props.unit)[0]}
+        </Text>
+        <Text style={styles.titleText}>
+          {unitDivision(props.unit)[1]}
+        </Text>
+      </View>
     )
   }
 
   return (
-      <Page
-          style={{ position: 'relative' }}
-          backText={I18n.getLang(isSolarPlug ? 'sockets_headline_power' : 'consumption_data_annual_bar_chart_system_back_text')}
-          headlineText={I18n.getLang(isSolarPlug ? 'sockets_headline_power' : 'consumption_data_annual_bar_chart_system_back_text')}
-          headlineIcon={state.overviewList.length ? res.download_icon : undefined}
-          onHeadlineIconClick={() => {
-            const values = state.overviewList.map(item => [item.key, item.value, (Number(state.price) * Number(item.value)).toFixed(2)])
-            exportEnergyCsv(values, state.unit)
-          }}
-          showGreenery={isSolarPlug}
-          greeneryIcon={res.energy_consumption_greenery}
-      >
-        <ScrollView nestedScrollEnabled={true}>
-          <View>
-            {/* tip */}
+    <Page
+      style={{ position: 'relative' }}
+      backText={I18n.getLang(isGeneration ? 'sockets_headline_power' : 'consumption_data_annual_bar_chart_system_back_text')}
+      headlineText={I18n.getLang(isGeneration ? 'sockets_headline_power' : 'consumption_data_annual_bar_chart_system_back_text')}
+      headlineIcon={state.overviewList.length ? res.download_icon : undefined}
+      onHeadlineIconClick={() => {
+        const values = state.overviewList.map(item => [item.key, item.value, (Number(state.price) * Number(item.value)).toFixed(2)])
+        exportEnergyCsv(values, state.unit)
+      }}
+      showGreenery={isGeneration}
+      greeneryIcon={res.energy_consumption_greenery}
+      loading={state.loading}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <View>
+          {/* tip */}
+          <Spacer height={cx(15)} />
+
+          <View style={styles.showTip}>
+            <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor, }}>{I18n.getLang(isGeneration ? 'generation_data_description_text' : 'consumption_data_description_text')}</Text>
+          </View>
+          <Spacer />
+          {/* Today */}
+          <Card
+            style={styles.cardContainer}
+          >
+            <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
             <Spacer height={cx(15)} />
-            <View style={styles.showTip}>
-              <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor, }}>{I18n.getLang(isSolarPlug ? 'generation_data_description_text' : 'consumption_data_description_text')}</Text>
+            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{localeNumber(state.todayElectricity)}</Text>
+              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
             </View>
-            <Spacer />
-            {/* Today */}
-            <Card
-                style={styles.cardContainer}
-            >
-              <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
-              <Spacer height={cx(15)} />
-              <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-                <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{localeNumber(state.todayElectricity)}</Text>
-                <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
-              </View>
-              <Spacer height={cx(10)} />
-            </Card>
-            <Spacer />
-            <Card
-                style={styles.cardContainer}
-            >
-              <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
-              <Spacer height={cx(15)} />
-              <View style={styles.consumedEnergyContent}>
-                <ConsumedEnergyItem
-                    value={power}
-                    unit={I18n.getLang('consumption_data_field2_value_text1')} />
-                <ConsumedEnergyItem
-                    value={electric}
-                    unit={I18n.getLang('consumption_data_field2_value_text2')} />
-                <ConsumedEnergyItem
-                    value={voltage}
-                    unit={I18n.getLang('consumption_data_field2_value_text3')} />
-              </View>
-            </Card>
-            <Spacer />
-            {/* 365 day */}
-            <Card
-                style={styles.cardContainer}
-            >
+            <Spacer height={cx(10)} />
+          </Card>
+          <Spacer />
+          <Card
+            style={styles.cardContainer}
+          >
+            <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
+            <Spacer height={cx(15)} />
+            <View style={styles.consumedEnergyContent}>
+              <ConsumedEnergyItem
+                value={power}
+                unit={I18n.getLang('consumption_data_field2_value_text1')} />
+              <ConsumedEnergyItem
+                value={electric}
+                unit={I18n.getLang('consumption_data_field2_value_text2')} />
+              <ConsumedEnergyItem
+                value={voltage}
+                unit={I18n.getLang('consumption_data_field2_value_text3')} />
+            </View>
+          </Card>
+          <Spacer />
+          {/* 365 day */}
+          <Card
+            style={styles.cardContainer}
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
               <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
-              <Spacer height={cx(15)} />
-              <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-                <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{localeNumber(state.totalElectricity)}</Text>
-                <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
-              </View>
-              <Spacer />
-              {/* CO2 */}
-              {isSolarPlug && <>
+              { state.energyGeneration.history.length > 0 && <TouchableOpacity
+                  onPress={() => {
+                    state.showPopup = true
+                    state.popupType = 'history'
+                  }}
+              >
+                  <Image
+                      source={res.co2Icon}
+                      resizeMode="contain"
+                      style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
+                  />
+              </TouchableOpacity>}
+            </View>
+            <Spacer height={cx(15)} />
+            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+              <Text style={[styles.consumptionNum, { fontSize: cx(38), marginRight: cx(8) }]}>{localeNumber(totalElectricity)}</Text>
+              <Text style={[styles.consumptionNum, { fontSize: cx(22), marginBottom: cx(4) }]}>kWh</Text>
+            </View>
+            <Spacer />
+            {/* CO2 */}
+            {isGeneration && <>
                 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                  <View style={styles.priceBg}>
-                    <Image
-                        source={res.energy_consumption_cash}
-                        resizeMode="contain"
-                        style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
-                    />
-                  </View>
-                  <View style={styles.priceNum}>
-                    <View style={{ flexDirection: 'row' }}>
-                      <Text style={{ color: props.theme?.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
-                      <TouchableOpacity
-                          onPress={() => {
-                            state.showPopup = true
-                            state.popupType = 'co2'
-                          }}
-                      >
+                    <View style={styles.priceBg}>
                         <Image
-                            source={res.co2Icon}
+                            source={res.energy_consumption_cash}
                             resizeMode="contain"
                             style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
                         />
-                      </TouchableOpacity>
                     </View>
-                    <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
-                  </View>
+                    <View style={styles.priceNum}>
+                        <View style={{ flexDirection: 'row' }}>
+                            <Text style={{ color: props.theme?.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
+                            <TouchableOpacity
+                                onPress={() => {
+                                  state.showPopup = true
+                                  state.popupType = 'co2'
+                                }}
+                            >
+                                <Image
+                                    source={res.co2Icon}
+                                    resizeMode="contain"
+                                    style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                        <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
+                    </View>
                 </View>
                 <Spacer height={cx(10)} />
-              </>}
-              {/* money */}
-              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <View style={styles.priceBg}>
-                  <Image
-                      source={res.energy_consumption_cash}
-                      resizeMode="contain"
-                      style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
-                  />
+            </>}
+            {/* money */}
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <View style={styles.priceBg}>
+                <Image
+                  source={res.energy_consumption_cash}
+                  resizeMode="contain"
+                  style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
+                />
+              </View>
+              <View>
+                <View style={styles.priceNum}>
+                  <Text style={{ color: props.theme?.global.secondFontColor }}>{I18n.getLang(isGeneration ? 'consumption_data_monthly_overview_field1_text2' : 'consumption_data_field3_value_text2')}</Text>
+                  <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * totalElectricity, 2)} ${state.unit}` : '-'}</Text>
                 </View>
-                <View>
-                  <View style={styles.priceNum}>
-                    <Text style={{ color: props.theme?.global.secondFontColor }}>{I18n.getLang(isSolarPlug ? 'consumption_data_monthly_overview_field1_text2' : 'consumption_data_field3_value_text2')}</Text>
-                    <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(state.totalElectricity), 2)} ${state.unit}` : '-'}</Text>
+                <TouchableOpacity onPress={() => {
+                  state.showPopup = true
+                  state.popupType = 'money'
+                }}>
+                  <View style={styles.priceButton}>
+                    <Text style={{ color: props.theme?.button.fontColor }}>{I18n.getLang('consumption_data_field3_button_text')}</Text>
                   </View>
-                  <TouchableOpacity onPress={() => {
-                    state.showPopup = true
-                    state.popupType = 'money'
-                  }}>
-                    <View style={styles.priceButton}>
-                      <Text style={{ color: props.theme?.button.fontColor }}>{I18n.getLang('consumption_data_field3_button_text')}</Text>
-                    </View>
-                  </TouchableOpacity>
-                </View>
+                </TouchableOpacity>
               </View>
-            </Card>
-            <Spacer height={cx(30)} />
-            {/* Annual overview */}
-            {!!state.price && <OverView
-                style={{marginHorizontal: cx(24)}}
-                headlineText={I18n.getLang('consumption_data_field4_headline_text')}
-                headlineClick={() => {
-                  navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_chart, {
-                    headlineText: chartHeadline,
-                    chartData: state.overviewList,
-                    price: state.price,
-                    unit: state.unit,
-                    addEleDpCode: params.addEleDpCode,
-                    date: (new Date()).getFullYear().toString(),
-                  } as EnergyConsumptionChartProps)
-                }}
-                overviewItemClick={(item) => {
-                  navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_detail, {
-                    addEleDpCode: params.addEleDpCode,
-                    curMonth: item,
-                    price: state.price,
-                    unit: state.unit,
-                    updateEnergyData
-                  } as EnergyConsumptionDetailProps)
-                }}
-                overViewList={state.overviewList}
-            />}
-            {/* modal */}
-            <EnergyPopup
-                visible={!!(state.popupType && state.showPopup)}
-                popupType={state.popupType || 'co2'}
-                title={state.popupType === 'co2' ? I18n.getLang('consumption_data_field3_co2_topic_text') : ''}
-                cancelText={state.popupType === 'co2' ? '' : I18n.getLang("auto_scan_system_cancel")}
-                confirmText={I18n.getLang(state.popupType === 'co2' ? 'home_screen_home_dialog_yes_con' : 'auto_scan_system_wifi_confirm')}
-                energyData={{ price: state.price, unit: state.unit }}
-                onConfirm={(energyData) => {
-                  state.popupType = ''
-                  state.showPopup = false
-                  if(energyData){
-                    updateEnergyData({
-                      ...energyData,
-                      price: exchangeNumber(energyData.price)
-                    })
+            </View>
+          </Card>
+          <Spacer />
+          <Card style={{marginHorizontal: cx(24)}}>
+            <LdvSwitch
+              title={isSolarPlug ? I18n.getLang('plug_energyconsumptionswitch', 'Switch to energy consumption mode') : I18n.getLang('plug_energygenerationswitch', 'Switch to energy generation mode')}
+              colorAlpha={0}
+              enable={state.generationMode}
+              setEnable={async (value: boolean) => {
+                if (state.loading) {
+                  return
+                }
+                if (onceByDay()) {
+                  showDialog({
+                    method: 'alert',
+                    title: I18n.getLang('switchonlyonce', 'Switching the mode is only allowed once a day.'),
+                    confirmText: I18n.getLang('home_screen_home_dialog_yes_con'),
+                    onConfirm: (_, {close}) => {
+                      close()
+                    }
+                  })
+                  return
+                }
+                showDialog({
+                  method: 'confirm',
+                  title: getEnergyModeTitle(value),
+                  subTitle: I18n.getLang('switchdescription_energy', 'Note that the total energy data will be resetted and cannot be recovered again.'),
+                  onConfirm: async (_, { close }) => {
+                    close()
+                    await setEnergyGeneration(value)
                   }
-                }}
-                onCancel={() => {
-                  state.popupType = ''
-                  state.showPopup = false
-                }}
+                })
+              }}
             />
-          </View>
-        </ScrollView>
-      </Page>
+          </Card>
+          <Spacer />
+          {/* Annual overview */}
+          {!!state.price && <OverView
+              style={{marginHorizontal: cx(24)}}
+              headlineText={I18n.getLang('consumption_data_field4_headline_text')}
+              headlineClick={() => {
+                navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_chart, {
+                  headlineText: chartHeadline,
+                  chartData: state.overviewList,
+                  price: state.price,
+                  unit: state.unit,
+                  addEleDpCode: params.addEleDpCode,
+                  date: (new Date()).getFullYear().toString(),
+                } as EnergyConsumptionChartProps)
+              }}
+              overviewItemClick={(item) => {
+                navigation.navigate(ui_biz_routerKey.ui_biz_energy_consumption_detail, {
+                  addEleDpCode: params.addEleDpCode,
+                  curMonth: item,
+                  price: state.price,
+                  unit: state.unit,
+                  updateEnergyData
+                } as EnergyConsumptionDetailProps)
+              }}
+              overViewList={state.overviewList}
+          />}
+          {/* modal */}
+          <EnergyPopup
+            visible={!!(state.popupType && state.showPopup)}
+            popupType={state.popupType || 'co2'}
+            title={state.popupType === 'co2' ? I18n.getLang('consumption_data_field3_co2_topic_text') : state.popupType === 'history' ? I18n.getLang('group_energytotal') : ''}
+            cancelText={['co2', 'history'].includes(state.popupType) ? '' : I18n.getLang("auto_scan_system_cancel")}
+            confirmText={I18n.getLang(['co2', 'history'].includes(state.popupType) ? 'home_screen_home_dialog_yes_con' : 'auto_scan_system_wifi_confirm')}
+            energyData={{ price: state.price, unit: state.unit }}
+            energyHistory={state.energyGeneration.history}
+            onConfirm={(energyData) => {
+              state.popupType = ''
+              state.showPopup = false
+              if(energyData){
+                updateEnergyData({
+                  ...energyData,
+                  price: exchangeNumber(energyData.price)
+                })
+              }
+            }}
+            onCancel={() => {
+              state.popupType = ''
+              state.showPopup = false
+            }}
+          />
+        </View>
+      </ScrollView>
+    </Page>
   )
 }
 

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

@@ -9,6 +9,8 @@ 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'
+import dayjs from "dayjs";
+import {EnergyHistory} from "../EnergyConsumptionActions";
 
 const { convertX: cx, height } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -33,14 +35,16 @@ export interface EnergyData {
   price: string
   unit: string
 }
+
 interface EnergyModalProps {
   theme?: ThemeType
   visible: boolean
-  popupType: 'money' | 'co2' | 'unit'
+  popupType: 'money' | 'co2' | 'unit' | 'history'
   title: string
   confirmText?: string
   cancelText?: string
   energyData?: EnergyData
+  energyHistory?: EnergyHistory[]
   motionType?: 'none'
   onConfirm?: (data?: EnergyData) => void
   onCancel?: () => void
@@ -51,29 +55,49 @@ const EnergyModal = (props: EnergyModalProps) => {
     unitPopup: false
   })
 
-
   const openLink = (url: string) => {
     Linking.openURL(url).catch((error) => console.error('无法打开链接:', error));
   };
 
   const getDescription = (string: string) => {
-    const separators = /[.:]/;
-    const text = string.split(separators)
-    const length = text.length - 1
-    return <View>
-      <Text style={{ color: props.theme?.global.fontColor }}>{text[length - 6] + '.'}</Text>
-      <Spacer />
-      <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>
-      <Spacer />
-      <Text
-        style={{ textDecorationLine: 'underline', color: props.theme?.button.primary }}
-        onPress={() => openLink(`${text[length - 2]}:${text[length - 1]}${text[length]}`)}
-      >
-        {`${text[length - 2]}:${text[length - 1]}${text[length]}`}
-      </Text>
-    </View>
+    // 首先提取URL
+    const urlRegex = /(https?:\/\/[^\s]+)$/;
+    const urlMatch = string.match(urlRegex);
+    const url = urlMatch ? urlMatch[0] : '';
+
+    // 移除URL部分以处理正文文本
+    const textWithoutUrl = urlMatch
+      ? string.slice(0, string.lastIndexOf(url)).trim()
+      : string;
+
+    // 分割文本但保留分隔符
+    const sentences:string[] = [];
+    const parts = textWithoutUrl.split(/([.:])/);
+
+    for (let i = 0; i < parts.length - 1; i += 2) {
+      if (i + 1 < parts.length) {
+        sentences.push(parts[i] + parts[i + 1]);
+      }
+    }
+
+    return (
+      <View>
+        {sentences.map((sentence, index) => (
+          <View key={index}>
+            <Text style={{ color: props.theme?.global.fontColor }}>{sentence.trim()}</Text>
+            <Spacer />
+          </View>
+        ))}
+        {url && (
+          <Text
+            style={{ textDecorationLine: 'underline', color: props.theme?.button.primary }}
+            onPress={() => openLink(url)}
+          >
+            {url}
+          </Text>
+        )}
+      </View>
+    );
   }
 
   useUpdateEffect(() =>{
@@ -196,6 +220,23 @@ const EnergyModal = (props: EnergyModalProps) => {
           </Card>
         </View>
       )
+    } else if (props.popupType === 'history') {
+      return (
+        <View>
+          <Spacer />
+          <Text style={styles.popupTip}>{I18n.getLang('infobutton_totalenergy', 'The total energy shows only the total consumption/generation data after the last reset.\n' +
+            'The data was switched on the following days:')}</Text>
+          <Spacer height={cx(20)} />
+          {
+            props.energyHistory?.map((item) => (
+              <View key={item.time} style={{ backgroundColor: props.theme?.card.background, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', }}>
+                <Text style={{color: props.theme?.global.fontColor}}>{dayjs(item.time).format('DD/MM/YYYY')}</Text>
+                <Text style={{color: props.theme?.global.fontColor}}>{item.type === 'Generation' ? I18n.getLang('plug_energygenerationswitch', 'Switch to energy generation mode') : I18n.getLang('plug_energyconsumptionswitch', 'Switch to energy consumption mode')}</Text>
+              </View>
+            ))
+          }
+        </View>
+      )
     } else {
       return (
         <View>

package/src/newModules/overchargeSwitch/OverchargeSwitchPage.tsx

@@ -1,17 +1,19 @@
 import React from 'react'
-import {SwitchButton, Utils} from "tuya-panel-kit";
+import {Utils} from "tuya-panel-kit";
 import Page from "@ledvance/base/src/components/Page";
 import I18n from "@ledvance/base/src/i18n/index";
 import {useDeviceInfo, useDp} from "@ledvance/base/src/models/modules/NativePropsSlice";
 import {useReactive} from "ahooks";
 import Spacer from "@ledvance/base/src/components/Spacer";
-import {StyleSheet, Text, View} from "react-native";
+import {StyleSheet, Text} from "react-native";
 import {Result} from "@ledvance/base/src/models/modules/Result";
 import {useParams} from "@ledvance/base/src/hooks/Hooks";
 import ThemeType from '@ledvance/base/src/config/themeType'
+import Card from "@ledvance/base/src/components/Card";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
 
-const { convertX: cx } = Utils.RatioUtils
-const { withTheme } = Utils.ThemeUtils
+const {convertX: cx} = Utils.RatioUtils
+const {withTheme} = Utils.ThemeUtils
 
 export interface OverchargeSwitchPageParams {
   overchargeSwitchCode: string
@@ -30,55 +32,34 @@ const OverchargeSwitchPage = (props: { theme?: ThemeType }) => {
   })
 
   const styles = StyleSheet.create({
-    titleBGView: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: cx(16),
-      marginHorizontal: cx(24),
-      marginTop: cx(30)
-    },
     title: {
       color: props.theme?.global.fontColor,
-      fontSize: cx(14),
+      fontSize: cx(16),
+      fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
-      paddingVertical: cx(16),
-    },
-    desc: {
-      color: props.theme?.global.fontColor,
-    },
-    shadow: {
-      shadowColor: props.theme?.card.shadowColor,
-      shadowOpacity: 0.2,
-      shadowRadius: 8,
-      elevation:8,
-      shadowOffset: {
-        width: 0,
-        height: 4,
-      },
-      backgroundColor: props.theme?.card.background,
-      borderRadius: 8,
+      paddingTop: cx(16),
+      paddingHorizontal: cx(16),
     },
   })
 
   return (<Page
     backText={devInfo.name}
     loading={state.loading}>
-    <View style={[styles.titleBGView, styles.shadow]}>
-      <View style={{ flex: 7 }}>
-        <View>
-          <Text style={styles.title}>{I18n.getLang('switch_overcharge_headline_text')}</Text>
-        </View>
-        <View style={{ paddingBottom: cx(16) }}>
-          <Text style={styles.desc}>{I18n.getLang('switch_overcharge_headline_description')}</Text>
-        </View>
-      </View>
-      <Spacer style={{ flex: 1 }} height={0} width={0} />
-      <SwitchButton value={overchargeSwitch} onValueChange={async v => {
-        state.loading = true
-        await setOverchargeSwitch(v)
-        state.loading = false
-      } } />
-    </View>
+    <Spacer height={cx(24)}/>
+    <Card style={{marginHorizontal: cx(24)}}>
+      <Text style={styles.title}>{I18n.getLang('switch_overcharge_headline_text')}</Text>
+      <LdvSwitch
+        title={I18n.getLang('switch_overcharge_headline_description')}
+        titleStyle={{fontWeight: 'normal', fontSize: cx(14)}}
+        colorAlpha={1}
+        enable={overchargeSwitch}
+        setEnable={async (v) => {
+          state.loading = true
+          await setOverchargeSwitch(v)
+          state.loading = false
+        }}
+      />
+    </Card>
   </Page>)
 }