@ledvance/ui-biz-bundle 1.1.18 → 1.1.20

package/package.json

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

package/src/modules/flags/FlagEditPage.tsx

@@ -65,7 +65,7 @@ const FlagEditPage = () => {
   }, [state.currentNode, state.currentWhiteNode])
 
   const nameRepeat = useMemo(() => {
-    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
+    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name && state.mood.name !== ''))
   }, [state.mood.name])
 
   return (

package/src/modules/flags/FlagInfo.tsx

@@ -300,7 +300,7 @@ export const defFlagList: FlagUiInfo[] = [
     version: 0,
     mode: SceneNodeTransitionMode.Jump,
     speed: 70,
-    name: '',
+    name: I18n.getLang('flag_leverkusen'),
     icon: res.leverkusen_icon,
     whiteColors: [
       { brightness: 100, colorTemp: 0},

package/src/modules/timer/TimerPage.tsx

@@ -1,381 +1,362 @@
-import React, { useCallback, useEffect } from "react";
-import { View, Text, ScrollView, TouchableOpacity, StyleSheet, FlatList, Image } from "react-native"
-import { useNavigation } from '@react-navigation/native'
-import { RouteProp, useRoute } from '@react-navigation/core'
-import { useReactive, useUpdateEffect } from "ahooks";
-import res from '@ledvance/base/src/res'
-import Card from '@ledvance/base/src/components/Card'
-import Spacer from '@ledvance/base/src/components/Spacer'
+import React, { useEffect } from 'react'
+import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import I18n from '@ledvance/base/src/i18n'
-import Page from "@ledvance/base/src/components/Page";
+import Page from '@ledvance/base/src/components/Page'
+import { Utils } from 'tuya-panel-kit'
+import { useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
 import LdvPickerView from '@ledvance/base/src/components/ldvPickerView'
-import { Utils, Progress } from 'tuya-panel-kit'
-import { useDeviceInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
-import { useProgress } from "./TimerPageAction";
-import { cloneDeep } from "lodash";
-import dayjs from "dayjs";
-import DeleteButton from "@ledvance/base/src/components/DeleteButton";
-
-export type dpItem = {
-  label: string
-  value: string
-  dpId: string
-  enableDp: string
-  cloudKey: any
-  stringOn: any
-  stringOff: any
-}
-
-type TimerPageRouteParams = {
-  params: { dps: dpItem[] }
-}
-
-type Props = {
-  route: RouteProp<TimerPageRouteParams, 'params'>
-}
+import { useReactive } from 'ahooks'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import DeleteButton from '@ledvance/base/src/components/DeleteButton'
+import { TaskStatus, timeFormat, TimerPageParams, TimerTask, useTimerTasks } from './TimerAction'
+import { cloneDeep, groupBy } from 'lodash'
+import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import GroupBizRes from '../../res/GroupBizRes'
+import dayjs from 'dayjs'
+import Card from '@ledvance/base/src/components/Card'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { CircularProgress } from '@ledvance/base/src/components/CircularProgress'
 
 const { convertX: cx } = Utils.RatioUtils
+
 const TimerPage = () => {
   const devInfo = useDeviceInfo()
-  const navigation = useNavigation()
-  const { dps } = useRoute<Props['route']>().params
-  const progress = useProgress(dps)
+
+  const params = useParams<TimerPageParams>()
+  const [timerTasks, setTimerTasks, changeTimerTasks] = useTimerTasks(params.timerSettableDps)
+
   const state = useReactive({
     hour: '00',
-    minute: '01',
-    skillList: [] as dpItem[],
-    selectedSkill: [] as dpItem[]
+    min: '01',
+    tasks: cloneDeep(timerTasks),
+    loading: false,
   })
 
-
-  const hasNotRunningTimer = () => {
-    return !!progress.find(p => p.progressHook.countdown === 0)
-  }
-
-  const runningTimer = () => {
-    return progress.filter(p => p.progressHook.countdown > 0)
-  }
-  
-  const getProgressByDp = useCallback((dpId: string) => {
-    return progress.find(p => p.dpId === dpId)!.progressHook
-  }, [progress])
-
   useEffect(() => {
-    if (progress.length > 1) {
-      state.skillList = progress.filter(p => p.progressHook.countdown === 0)
-    } else {
-      state.skillList = []
-      state.selectedSkill = cloneDeep(dps)
-    }
-  }, [runningTimer().length])
+    state.tasks = cloneDeep(timerTasks)
+      .map(task => {
+        const newStatus = params.timerSettableDps.length === 1 && task.status !== TaskStatus.Started
+          ? TaskStatus.Selected : task.status
+        return { ...task, status: newStatus }
+      })
+  }, [JSON.stringify(timerTasks)])
 
-  useUpdateEffect(() => {
-    if (state.hour === '00' && state.minute === '00') {
-      state.minute = '01'
-    }
-  }, [state.hour, state.minute])
+  const tasksByStatus = groupBy(state.tasks, 'status')
 
-
-  const handelTimer = (timer: dpItem, isAdd: boolean) => {
-    if (isAdd) {
-      state.selectedSkill = [...state.selectedSkill, timer]
-      state.skillList = state.skillList.filter(item => item.dpId !== timer.dpId)
-    } else {
-      state.selectedSkill = state.selectedSkill.filter(item => item.dpId !== timer.dpId)
-      state.skillList = [...state.skillList, timer]
-    }
-  }
-
-  const onStartPress = async () => {
-    let mCountdown = 0
-    const hour = parseInt(state.hour)
-    const minute = parseInt(state.minute)
-    if (hour > 0) {
-      mCountdown += hour * 60 * 60
-    }
-    if (minute > 0) {
-      mCountdown += minute * 60
-    }
-    if (!state.selectedSkill.length || mCountdown === 0) return
-    for (let skill of state.selectedSkill) {
-      const time = dayjs()
-        .add(Number(hour), 'h')
-        .add(Number(minute), 'm')
-        .format('YYYY-MM-DD HH:mm:ss');
-      await getProgressByDp(skill.dpId).startTimer(mCountdown, time)
-    }
-    state.selectedSkill = []
-  }
-
-  const getActiveTimeString = (c: number) => {
-    const h = parseInt(String(c / 3600))
-    const m = Number(((c - 3600 * h) / 60).toFixed(0))
-    if (h > 0) {
-      if (m === 0) {
-        return h + ' h'
-      } else {
-        return h + ' h ' + m + ' min'
-      }
-    } else {
-      return m + ' min'
-    }
-  }
-
-  const getSingleLightEndTimeString = (mCountdown: number) => {
-    const date = new Date()
-    const now = date.getTime()
-    const after = new Date(now + mCountdown * 1000)
-    const timeString = `${after.getHours()}:${after.getMinutes().toString().padStart(2, '0')}`
-    return timeString
-  }
-
-  const showActiveView = () => {
-    return progress.length > 1
-  }
-
-  const renderItem = ({ item }) => {
-    return (
-      <View style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        marginBottom: cx(8)
-      }}>
-        <Text
-          style={{
-            color: '#000',
-            fontSize: 14,
-            marginHorizontal: cx(6),
-            marginVertical: cx(9),
-          }}
-        >
-          {item.label}
-        </Text>
-        {progress.length > 1 && <TouchableOpacity onPress={() => handelTimer(item, false)}>
-          <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
-        </TouchableOpacity>}
-      </View>
-    );
-  };
+  const noSelectedTasks = tasksByStatus[TaskStatus.NoSelected] || []
+  const selectedTasks = tasksByStatus[TaskStatus.Selected] || []
+  const startedTasks = tasksByStatus[TaskStatus.Started] || []
+  const startEnable = selectedTasks.length > 0
 
   return (
     <Page
       backText={devInfo.name}
       headlineText={I18n.getLang('timer_nightplug_headline_text')}
-      onBackClick={navigation.goBack}
-    >
+      loading={state.loading}>
       <ScrollView
+        style={styles.root}
         nestedScrollEnabled={true}
         showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* picker */}
-        <View style={styles.content}>
-          {hasNotRunningTimer() && <>
-            <LdvPickerView
-              hour={state.hour}
-              minute={state.minute}
-              setHour={h => state.hour = h}
-              setMinute={m => state.minute = m}
-              unit={['h', 'min']}
-            />
-            {/* Apply for */}
-            <View>
-              <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
-              <View
-                style={{
-                  backgroundColor: '#f6f6f6',
-                  borderRadius: 4,
-                  minHeight: cx(50),
-                  flex: 1,
-                  justifyContent: 'center',
-                }}
-              >
-                {!state.selectedSkill.length ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
-                  <View
-                    style={{
-                      marginHorizontal: cx(8),
-                      marginTop: cx(8),
-                      borderRadius: 4,
-                    }}
-                  >
-                    <FlatList
-                      data={state.selectedSkill}
-                      renderItem={item => renderItem(item)}
-                      keyExtractor={(item: dpItem) => item.dpId}
-                    />
-                  </View>}
+        showsVerticalScrollIndicator={false}>
+        <View>
+          {startedTasks.length !== state.tasks.length &&
+              <View style={styles.content}>
+                  <LdvPickerView
+                      hour={state.hour}
+                      minute={state.min}
+                      unit={['h', 'min']}
+                      setHour={hour => {
+                        state.hour = hour
+                      }}
+                      setMinute={min => {
+                        state.min = min
+                      }}/>
+                  <Spacer height={cx(30)}/>
+                  <Text style={styles.applyFor}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
+                  <Spacer height={cx(10)}/>
+                  <FlatList
+                      data={selectedTasks}
+                      style={styles.taskList}
+                      renderItem={({ item }) => {
+                        return (
+                          <View style={styles.taskItem}>
+                            <Text style={styles.taskItemText}>{item.name}</Text>
+                            {state.tasks.length > 1 &&
+                                <TouchableOpacity
+                                    onPress={() => {
+                                      item.status = TaskStatus.NoSelected
+                                      changeTimerTasks([cloneDeep(item)])
+                                    }}>
+                                    <Image style={styles.taskItemIcon} source={GroupBizRes.ic_arrows_nav_clear}/>
+                                </TouchableOpacity>}
+                          </View>
+                        )
+                      }}
+                      keyExtractor={item => item.dp.key}
+                      ListEmptyComponent={() => <View style={styles.listEmptyView}>
+                        <Text style={styles.listEmptyText}>
+                          {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
+                        </Text>
+                      </View>}/>
+                  <Spacer height={cx(6)}/>
+                  <FlatList
+                      data={noSelectedTasks}
+                      style={styles.noSelectTaskList}
+                      renderItem={({ item }) => {
+                        return (
+                          <TouchableOpacity
+                            style={styles.noSelectTaskItem}
+                            onPress={() => {
+                              item.status = TaskStatus.Selected
+                              changeTimerTasks([cloneDeep(item)])
+                            }}>
+                            <Spacer width={cx(8)}/>
+                            <Text style={styles.noSelectTaskText}>{item.name}</Text>
+                            <Image style={styles.taskItemIcon} source={GroupBizRes.device_panel_timer_add}/>
+                          </TouchableOpacity>
+                        )
+                      }}
+                      keyExtractor={item => item.dp.key}/>
+                  <Spacer/>
+                  <DeleteButton
+                      text={I18n.getLang('timer_sockets_button_text')}
+                      disabled={selectedTasks.length === 0}
+                      onPress={async () => {
+                        state.loading = true
+                        const tasks = selectedTasks.map(task => {
+                          return {
+                            ...task,
+                            startTime: dayjs().unix(),
+                            duration: (parseInt(state.hour) * 60 + parseInt(state.min)) * 60,
+                            status: TaskStatus.Started,
+                          }
+                        })
+                        tasks.push(...cloneDeep(startedTasks))
+                        await setTimerTasks(cloneDeep(tasks))
+                        state.loading = false
+                      }}
+                      textStyle={{ fontSize: cx(14) }}
+                      style={{ backgroundColor: !startEnable ? '#FFE0D4' : '#f60' }}/>
               </View>
-              {state.skillList.map((skill: dpItem) => {
-                return (
-                  <TouchableOpacity style={styles.skillListItem} key={skill.dpId} onPress={() => handelTimer(skill, true)}>
-                    <Text style={{ color: '#000' }}>{skill.label}</Text>
-                    <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
-                  </TouchableOpacity>
-                )
-              })}
-            </View>
-
-            {/* Start */}
-            <Spacer />
-            <DeleteButton
-              text={I18n.getLang('timer_sockets_button_text')}
-              onPress={onStartPress}
-              textStyle={{ fontSize: cx(14) }}
-              style={{ backgroundColor: !state.selectedSkill.length ? '#FFE0D4' : '#f60' }}
-            />
-            <Spacer />
-          </>}
-
-          {/* Active timer */}
-          {!!runningTimer().length && (
-            showActiveView() ? <>
-              <Text style={styles.itemTitle}>{I18n.formatValue('timer_nightplug_active_timer_subheadline2_text', runningTimer().length.toString())}</Text>
-              {runningTimer().map(timer => (
-                <View key={timer.dpId}>
-                  <Card containerStyle={styles.activeTimer}>
-                    <View style={styles.activeTimerTitleBox}>
-                      <Text style={styles.activeTimerTitle}>{timer.label}</Text>
-                      <TouchableOpacity
-                        onPress={() => { 
-                          getProgressByDp(timer.dpId).endTimer()
-                        }}
-                        style={styles.activeTimerCancelBtn}>
-                        <Text style={{ color: '#fff', fontSize: cx(12) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
-                      </TouchableOpacity>
-                    </View>
-                    <View style={styles.activeTimerTimeBox}>
-                      <Progress.Double
-                        style={{
-                          width: 35,
-                          height: 35,
-                          // backgroundColor: 'red',
-                          justifyContent: 'center',
-                          alignItems: 'center',
-                        }}
-                        disabled={true}
-                        minValue={0}
-                        maxValue={getProgressByDp(timer.dpId).progressNumber}
-                        startDegree={270}
-                        andDegree={360}
-                        scaleHeight={2}
-                        thumbStrokeWidth={2}
-                        thumbRadius={0}
-                      />
-                      <Text style={{ marginLeft: cx(20), fontSize: cx(22) }}>{getActiveTimeString(timer.progressHook.countdown)}</Text>
-                    </View>
-                    <Text>{I18n.formatValue(timer.enable ? timer.stringOff : timer.stringOn, getSingleLightEndTimeString(timer.progressHook.countdown))}</Text>
-                  </Card>
-                  <Spacer height={cx(40)} />
-                </View>
-              ))}
-            </> :
-              <View
-                style={{
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  marginVertical: cx(30),
-                }}
-              >
-                <Progress.Double
-                  style={{
-                    width: 172,
-                    height: 172,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                  }}
-                  minValue={0}
-                  maxValue={getProgressByDp(runningTimer()[0].dpId).progressNumber}
-                  startDegree={270}
-                  andDegree={360}
-                  disabled={true}
-                  foreColor={'#f60'}
-                  scaleHeight={14}
-                  minThumbFill={'#f60'}
-                  minThumbStroke={'#f60'}
-                  thumbStrokeWidth={0}
-                  thumbRadius={14 / 2 - 0.5}
-                  thumbFill={'#f60'}
-                  thumbStroke={'#f60'}
-                  renderCenterView={
-                    <View style={{ position: 'absolute' }}>
-                      <Text style={{ fontSize: cx(22), fontWeight: 'bold', color: '#666' }}>
-                        {getActiveTimeString(runningTimer()[0].progressHook.countdown)}
-                      </Text>
-                    </View>
-                  }
-                />
-                <View style={{ marginVertical: cx(30) }}>
-                  <Text>
-                    {I18n.formatValue(
-                      runningTimer()[0].enable ?
-                        runningTimer()[0].stringOff :
-                        runningTimer()[0].stringOn, getSingleLightEndTimeString(runningTimer()[0].progressHook.countdown)
-                    )}
-                  </Text>
-                </View>
-                <DeleteButton
-                  text={I18n.getLang('auto_scan_system_cancel')}
-                  style={{ paddingHorizontal: cx(15), width: 'auto', height: cx(40) }}
-                  textStyle={{ fontSize: cx(14) }}
-                  onPress={() => {
-                    getProgressByDp(runningTimer()[0].dpId).endTimer()
-                  }}
-                />
+          }
+          {startedTasks.length > 0 && params.timerSettableDps.length > 1 &&
+              <>
+                  <Spacer height={cx(30)}/>
+                  <View style={styles.content}>
+                      <Text style={styles.applyFor}>{
+                        I18n.formatValue('timer_nightplug_active_timer_subheadline2_text', startedTasks.length.toString())
+                      }</Text>
+                  </View>
+                  <FlatList
+                      data={startedTasks}
+                      renderItem={({ item }) => {
+                        return ActiveTimerItem(item, async () => {
+                          state.loading = true
+                          const tasks = cloneDeep(startedTasks)
+                          tasks.forEach(task => {
+                            if (task.dp.code === item.dp.code) {
+                              task.status = TaskStatus.NoSelected
+                              task.startTime = 0
+                              task.duration = 0
+                            }
+                          })
+                          await setTimerTasks(tasks)
+                          state.loading = false
+                        })
+                      }}
+                      keyExtractor={item => item.dp.key}
+                      ListHeaderComponent={() => (<Spacer height={cx(10)}/>)}
+                      ItemSeparatorComponent={() => (<Spacer height={cx(10)}/>)}
+                      ListFooterComponent={() => (<Spacer height={cx(20)}/>)}/>
+              </>
+          }
+          {
+            startedTasks.length === 1 && params.timerSettableDps.length === 1 &&
+              <View style={{ justifyContent: 'center', marginHorizontal: cx(24) }}>
+                  <Spacer height={cx(116)}/>
+                  <View
+                      style={{
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                      }}>
+                      <CircularProgress
+                          progress={(startedTasks[0].timeLeft / startedTasks[0].duration) * 100}
+                          size={cx(172)}
+                          strokeWidth={cx(14)}>
+                          <Text style={styles.activeTaskTimeText2}>{timeFormat(startedTasks[0].timeLeft)}</Text>
+                      </CircularProgress>
+                  </View>
+                  <Spacer height={cx(32)}/>
+                  <Text
+                      style={[styles.activeTaskDesc, { textAlign: 'center' }]}>{I18n.formatValue(startedTasks[0].dp.enable ? startedTasks[0].stringOff : startedTasks[0].stringOn, timeFormat(startedTasks[0].timeLeft))}</Text>
+                  <Spacer height={cx(32)}/>
+                  <TextButton
+                      text={I18n.getLang('auto_scan_system_cancel')}
+                      style={styles.activeTasBtn}
+                      textStyle={styles.activeTaskBtnText}
+                      onPress={async () => {
+                        state.loading = true
+                        const task = cloneDeep(startedTasks[0])
+                        task.status = TaskStatus.NoSelected
+                        task.startTime = 0
+                        task.duration = 0
+                        await setTimerTasks([task])
+                        state.loading = false
+                      }}/>
+                  <Spacer width={cx(20)}/>
               </View>
-          )}
+          }
+          <Spacer/>
         </View>
       </ScrollView>
     </Page>
   )
 }
 
+function ActiveTimerItem(task: TimerTask, onCancel: () => void) {
+  return (
+    <Card style={{ marginHorizontal: cx(24) }}>
+      <Spacer/>
+      <View style={styles.activeTaskHeadLine}>
+        <Spacer width={cx(20)}/>
+        <Text style={styles.activeTaskHeadLineText}>{task.name}</Text>
+        <TextButton
+          text={I18n.getLang('auto_scan_system_cancel')}
+          style={styles.activeTaskHeadLineBtn}
+          textStyle={styles.activeTaskHeadLineBtnText}
+          onPress={onCancel}/>
+        <Spacer width={cx(12)}/>
+      </View>
+      <Spacer height={cx(12)}/>
+      <View style={styles.activeTaskHeadLine}>
+        <Spacer width={cx(20)}/>
+        <CircularProgress
+          progress={(task.timeLeft / task.duration) * 100}
+          size={cx(24)}
+          strokeWidth={cx(2)}/>
+        <Spacer width={cx(16)}/>
+        <Text style={styles.activeTaskTimeText}>{timeFormat(task.timeLeft)}</Text>
+        <Spacer width={cx(20)}/>
+      </View>
+      <Spacer/>
+      <View style={{ marginHorizontal: cx(20) }}>
+        <Text style={styles.activeTaskDesc}>{
+          I18n.formatValue(task.dp.enable ? task.stringOff : task.stringOn, timeFormat(task.timeLeft))
+        }</Text>
+      </View>
+      <Spacer height={cx(22)}/>
+    </Card>
+  )
+}
+
 const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
   content: {
-    marginHorizontal: cx(24)
+    marginHorizontal: cx(24),
   },
-  itemTitle: {
+  applyFor: {
     color: '#000',
     fontSize: cx(16),
     fontWeight: 'bold',
     fontFamily: 'helvetica_neue_lt_std_bd',
-    marginTop: cx(30),
-    marginBottom: cx(10)
   },
-  skillListItem: {
+  taskList: {
+    backgroundColor: '#f6f6f6',
+    paddingTop: cx(8),
+    borderRadius: cx(4),
+  },
+  taskItem: {
+    marginHorizontal: cx(8),
+    marginBottom: cx(8),
     flexDirection: 'row',
     justifyContent: 'space-between',
-    height: cx(30),
     alignItems: 'center',
-    marginVertical: cx(5)
+    backgroundColor: '#fff',
   },
-  activeTimer: {
-    marginHorizontal: cx(20),
-    marginVertical: cx(20),
+  taskItemText: {
+    color: '#000',
+    fontSize: 14,
+    marginHorizontal: cx(8),
+    marginVertical: cx(9),
   },
-  activeTimerTitleBox: {
+  taskItemIcon: {
+    width: cx(16),
+    height: cx(16),
+    marginRight: cx(8),
+  },
+  listEmptyView: {
+    marginHorizontal: cx(8),
+    marginTop: cx(6),
+    marginBottom: cx(14),
+  },
+  listEmptyText: {
+    color: '#666',
+    fontSize: cx(14),
+  },
+  noSelectTaskList: {},
+  noSelectTaskItem: {
+    height: cx(30),
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: cx(20),
   },
-  activeTimerTitle: {
-    fontSize: cx(20),
+  noSelectTaskText: {
+    flex: 1,
     color: '#000',
+    fontSize: cx(14),
   },
-  activeTimerCancelBtn: {
-    paddingHorizontal: cx(8),
-    paddingVertical: cx(5),
+  activeTaskHeadLine: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+  },
+  activeTaskHeadLineText: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(14),
+  },
+  activeTaskHeadLineBtn: {
+    minWidth: cx(50),
+    height: cx(24),
+    padding: 0,
     backgroundColor: '#666',
-    borderRadius: cx(5)
+    borderRadius: cx(4),
   },
-  activeTimerTimeBox: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: cx(20),
+  activeTaskHeadLineBtnText: {
+    color: '#fff',
+    fontSize: cx(8.2),
+  },
+  activeTaskTimeText: {
+    flex: 1,
+    color: '#666',
+    fontSize: cx(24),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  activeTaskDesc: {
+    flex: 1,
+    color: '#666',
+    fontSize: cx(14),
+  },
+  activeTasBtn: {
+    width: cx(75),
+    height: cx(36),
+    padding: 0,
+    backgroundColor: '#666',
+    borderRadius: cx(4),
+  },
+  activeTaskBtnText: {
+    color: '#fff',
+    fontSize: cx(12.2),
+  },
+  activeTaskTimeText2: {
+    flex: 1,
+    marginHorizontal: cx(20),
+    color: '#666',
+    fontSize: cx(22),
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
   },
 })
 

package/src/modules/timer/TimerPageAction.ts

@@ -1,131 +1,174 @@
-import { useCallback, useEffect, useState } from "react"
-import { useDeviceId, useDp } from "@ledvance/base/src/models/modules/NativePropsSlice"
-import { Result } from "@ledvance/base/src/models/modules/Result"
-import { dpItem } from "./TimerPage"
-import { useCountDown as useCountDownAHook, useUpdateEffect } from 'ahooks'
-import dayjs from "dayjs"
-import { NativeApi } from "@ledvance/base/src/api/native"
-
-
-export const useCountdowns = (dps: dpItem[]) => {
-  return dps.map(dp => {
-    return ({
-      countdown: useDp<number, (value: number) => Promise<Result<any>>>(dp.dpId),
-      enable: useDp<boolean, (value: boolean) => Promise<Result<any>>>(dp.enableDp),
-      ...dp
-    })
-  })
+import { useFeatureHook } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+import dayjs from 'dayjs'
+import { useCountDown, useReactive } from 'ahooks'
+import { useEffect, useMemo } from 'react'
+
+export interface TimerTask {
+  name: string
+  startTime: number
+  duration: number
+  timeLeft: number
+  dp: {
+    key: string
+    code: string
+    enable: boolean
+  }
+  status: TaskStatus
+  stringOn: string
+  stringOff: string
 }
 
-type FormateProgressType = {
-  progressNumber: number 
-  countdown: number 
-  startTimer: (c: number, time: string) => Promise<void>
-  endTimer: () => void
+export enum TaskStatus {
+  NoSelected,
+  Selected,
+  Started
 }
-const useFormateProgress: (dp: dpItem) => FormateProgressType = (dp) => {
-  const [countdown, setCountdown] = useDp<number, (value: number) => Promise<Result<any>>>(dp.dpId)
-  const [progress, setProgress] = useCountDownAHook({
-    interval: 1000,
-    onEnd: () => {
-      initTimerFn()
-      setCountdown(0)
+
+export interface TimerConfig {
+  timerTasks: TimerTask[]
+}
+
+export function useTimerTasks(timerSettableDps: TimerSettableDp[]):
+  [TimerTask[], (value: TimerTask[]) => Promise<Result<any>>, (tasks: TimerTask[]) => void] {
+  const countdowns = timerSettableDps.map(dps => {
+    const [countdown, setTargetDate] = useCountDown({ interval: 1000 })
+    return {
+      dpCode: dps.dp.code,
+      countdown: {
+        value: countdown,
+        setTargetDate,
+      },
+    }
+  })
+
+  const defTasks = useMemo(() => {
+    return timerSettableDps.map(timerSettableDp => ({
+      name: timerSettableDp.label,
+      startTime: 0,
+      duration: 0,
+      timeLeft: 0,
+      dp: timerSettableDp.dp,
+      status: TaskStatus.NoSelected,
+      stringOn: timerSettableDp.stringOn,
+      stringOff: timerSettableDp.stringOff,
+    }))
+  }, [JSON.stringify(timerSettableDps)])
+
+  const [remoteTasks, setTasks] = useFeatureHook<TimerConfig, TimerTask[]>(
+    'timerTasks',
+    defTasks,
+    () => undefined,
+    timerTasks => {
+      const dps = {}
+      timerTasks.forEach(task => {
+        dps[task.dp.code] = task.duration
+      })
+      return dps
     },
+  )
+
+  const tasks = defTasks.map(defTask => {
+    const findTask = remoteTasks.find(remoteTask => remoteTask.dp.code === defTask.dp.code)
+    return findTask ? { ...findTask, dp: defTask.dp } : defTask
   })
-  const devId = useDeviceId()
-  const [cloudProgressNumber, setCloudProgressNumber] = useState(0)
-  const [progressNumber, setProgressNumber] = useState(0)
-  const [cloudData, setCloudData] = useState<any>()
-  const [isTrigger, setIsTeigger] = useState(false)
-  const getCloudJson = () => {
-    NativeApi.getJson(devId, dp.cloudKey).then(res => {
-      if (res.success && res.data) {
-        const result = JSON.parse(res.data)
-        setCloudData(result)  
-        setCloudProgressNumber(result.progressAllNumber)
-        if (countdown > 0) setProgress(Date.now() + countdown * 1000)
-      }
-    })
-  }
-  useEffect(() => {
-    if(countdown > 0){
-      getCloudJson()
-    }
-  }, [])
+
+  const state = useReactive({ tasks: tasks })
 
   useEffect(() => {
-    if (cloudProgressNumber > 0) {
-      const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
-      const remainingTime = Number(cloudData && dayjs(cloudData[getKey('StartTime', dp.dpId)] || 0).diff(currentTime))
-      const time = (cloudData && cloudData[getKey('Status', dp.dpId)] && remainingTime >= -1000) ? remainingTime : Number(progress.toString().slice(0, -3) + "000")
-      const conversion = (time / 1000) / cloudProgressNumber * 100
-      setProgressNumber(!isNaN(conversion) ? conversion : 0)
-    }
-  }, [progress])
+    state.tasks = tasks
+      .map(task => {
+        const taskEndTime = dayjs.unix(task.startTime)
+          .add(task.duration, 'second')
+        const taskIsEnd = task.status !== TaskStatus.Started ||
+          getTaskLeftover(task) === 0
 
-  useUpdateEffect(() =>{
-    if(countdown === 0){
-      setIsTeigger(false)
-      initTimerFn()
-    }
-  }, [countdown])
+        countdowns.forEach(countdown => {
+          if (countdown.dpCode === task.dp.code) {
+            countdown.countdown.setTargetDate(taskIsEnd ? undefined : taskEndTime.toDate())
+          }
+        })
 
-  useUpdateEffect(() => {
-    if (countdown === 0) {
-      if(isTrigger){
-        NativeApi.putJson(devId, dp.cloudKey, JSON.stringify({ [getKey('Status', dp.dpId)]: false, [getKey('StartTime', dp.dpId)]: '', progressAllNumber: 0 })).then()
-      }
-    }
+        return {
+          ...task,
+          startTime: taskIsEnd ? 0 : task.startTime,
+          duration: taskIsEnd ? 0 : task.duration,
+          timeLeft: taskIsEnd ? 0 : task.timeLeft,
+          status: taskIsEnd ? TaskStatus.NoSelected : TaskStatus.Started,
+        }
+      })
 
-    if (countdown > 0 && !cloudData && !isTrigger) {
-      getCloudJson()
+    return () => {
+      countdowns.forEach(countdown => {
+        countdown.countdown.setTargetDate(undefined)
+      })
     }
-  }, [countdown, cloudData])
-
+  }, [JSON.stringify(tasks)])
 
-  
-  const initTimerFn = useCallback(() =>{
-    setProgressNumber(0)
-    setCloudData(null)
-    setCloudProgressNumber(0)
-    setProgress(0)
-  }, [])
+  useEffect(() => {
+    countdowns.forEach(cd => {
+      state.tasks.forEach(task => {
+        if (task.dp.code === cd.dpCode) {
+          task.timeLeft = Math.trunc(cd.countdown.value / 1000)
+          if (task.timeLeft > 0) {
+            task.status = TaskStatus.Started
+          } else {
+            if (task.status === TaskStatus.Started) {
+              task.status = TaskStatus.NoSelected
+            }
+          }
+        }
+      })
+    })
+  }, [JSON.stringify(countdowns.map(c => c.countdown.value))])
 
-  const getKey = (suffix: string, dpId: string) => {
-    const key = dpId + suffix
-    return key
+  const changeTasks = (timerTasks: TimerTask[]) => {
+    timerTasks.forEach(newTask => {
+      state.tasks.forEach(task => {
+        if (task.dp.code === newTask.dp.code) {
+          task.status = newTask.status
+        }
+      })
+    })
   }
 
-  const startTimer = async (time: number, t:string) => {
-    setIsTeigger(true)
-    await setCountdown(time)
-    const putData = { [getKey('Status', dp.dpId)]: true, [getKey('StartTime', dp.dpId)]: t, progressAllNumber: time }
-    await NativeApi.putJson(devId, dp.cloudKey, JSON.stringify(putData))
-    setCloudProgressNumber(time)
-    setProgress(Date.now() + time * 1000)
-    setCloudData(putData)
-  }
+  return [state.tasks, setTasks, changeTasks]
+}
 
-  const endTimer = async () =>{
-    setIsTeigger(false)
-    await setCountdown(0)
-    NativeApi.putJson(devId, dp.cloudKey, JSON.stringify({ [getKey('Status', dp.dpId)]: false, [getKey('StartTime', dp.dpId)]: '', progressAllNumber: 0 })).then(() => {
-      initTimerFn()
-    })
-  }
-  
-  return {
-    progressNumber,
-    countdown,
-    startTimer,
-    endTimer
+export function getTaskLeftover(timerTask: TimerTask): number {
+  // 当前时间和任务结束时间
+  const currentTime = dayjs()
+  const taskEndTime = dayjs.unix(timerTask.startTime).add(timerTask.duration, 'second')
+
+  // 剩余时间
+  const timeLeft = taskEndTime.diff(currentTime, 'second')
+
+  // 如果剩余时间小于0，返回0
+  return timeLeft > 0 ? timeLeft : 0
+}
+
+export interface TimerSettableDp {
+  label: string
+  dp: {
+    key: string
+    code: string
+    enable: boolean
   }
+  stringOn: string
+  stringOff: string
+}
+
+export interface TimerPageParams {
+  timerSettableDps: TimerSettableDp[]
 }
 
-export const useProgress = (dps: dpItem[]) => {
-  return dps.map(dp => ({
-    progressHook: useFormateProgress(dp),
-    enable: useDp(dp.enableDp)[0] as boolean,
-    ...dp
-  }))
+export function timeFormat(time: number): string {
+  let hour = Math.trunc(time / 3600)
+  const beforeMin = (time % 3600) / 60
+  let min = Math.ceil(beforeMin)
+  if (min === 60) {
+    hour += 1
+    min = 0
+  }
+  return `${hour > 0 ? `${hour} h ` : ''}${min > 0 ? `${min} min` : ''}`
 }