@ledvance/ui-biz-bundle 1.1.105 → 1.1.107

package/src/newModules/sleepWakeUp/SleepWakeUpActions.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { useDp, useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
 import { getFeature, putFeature } from '@ledvance/base/src/api/native'
 import { hex2Int, spliceByStep } from '@ledvance/base/src/utils/common'
-import { SleepData, SleepItem, SleepUIData, SleepUIItem, WakeUpData, WakeUpItem, WakeUpUIData, WakeUpUIItem } from './Interface'
+import { SleepData, SleepItem, SleepUIItem, WakeUpData, WakeUpItem, WakeUpUIItem } from './Interface'
 import { cloneDeep, padStart } from 'lodash'
 import { parseJSON, to16 } from '@tuya/tuya-panel-lamp-sdk/lib/utils'
 import { Result } from '@ledvance/base/src/models/modules/Result'
@@ -38,7 +38,7 @@ const putFeatureFn = async (devId, featureId, data) => {
   return status
 }
 let wakeUpTimerId: number | undefined = undefined
-type WakeUpType = (wakeUpDp: string, disableFeature?: boolean) => [WakeUpUIItem[], (wakeUpData: WakeUpUIData) => Promise<Result<any>>, boolean]
+type WakeUpType = (wakeUpDp: string, disableFeature?: boolean) => [WakeUpUIItem[], (wakeUpData: WakeUpUIItem[], pushFeature?: boolean) => Promise<Result<any>>, boolean]
 // @ts-ignore
 export const useWakeUp: WakeUpType = (wakeUpDp, disableFeature) => {
   const devId = useDeviceId()
@@ -77,8 +77,8 @@ export const useWakeUp: WakeUpType = (wakeUpDp, disableFeature) => {
     }
   }, [wakeUp])
 
-  const setWakeUpFn = async (wakeUp: WakeUpUIData) => {
-    const featureData = wakeUp?.nodes.map(item => {
+  const setWakeUpFn = async (wakeUp: WakeUpUIItem[], pushFeature = true) => {
+    const featureData = wakeUp.map(item => {
       return {
         name: item.name,
         startTime: JSON.stringify({
@@ -86,9 +86,14 @@ export const useWakeUp: WakeUpType = (wakeUpDp, disableFeature) => {
         })
       }
     })
-    const res = await putFeature(devId, wakeUpPlanFeatureId, featureData || [])
+    const res = pushFeature ? await putFeature(devId, wakeUpPlanFeatureId, featureData || []) : {result: true}
+    const wakeUpData = {
+      version: 0,
+      num: wakeUp.length,
+      nodes: cloneDeep(wakeUp)
+    }
     if (res.result) {
-      setWakeUp(wakeUpObj2Dp(wakeUp)).then()
+      setWakeUp(wakeUpObj2Dp(wakeUpData)).then()
       return {
         success: true
       }
@@ -192,7 +197,7 @@ export const wakeUpNode2Dp = (node: WakeUpItem) =>{
 }
 
 let sleepTimerId: number | undefined = undefined
-type SleepModeType = (sleepDp: string, disableFeature?: boolean) => [SleepUIItem[], (sleepData: SleepUIData) => Promise<Result<any>>, boolean]
+type SleepModeType = (sleepDp: string, disableFeature?: boolean) => [SleepUIItem[], (sleepData: SleepUIItem[], pushFeature?: boolean) => Promise<Result<any>>, boolean]
 // @ts-ignore
 export const useSleepMode: SleepModeType = (sleepDp, disableFeature) => {
   const devId = useDeviceId()
@@ -231,8 +236,8 @@ export const useSleepMode: SleepModeType = (sleepDp, disableFeature) => {
     }
   }, [sleepMode])
 
-  const setSleepPlanFn = async (sleep: SleepUIData) => {
-    const featureData = sleep?.nodes.map(item => {
+  const setSleepPlanFn = async (sleep: SleepUIItem[], pushFeature = true) => {
+    const featureData = sleep.map(item => {
       return {
         name: item.name,
         startTime: JSON.stringify({
@@ -240,9 +245,14 @@ export const useSleepMode: SleepModeType = (sleepDp, disableFeature) => {
         })
       }
     })
-    const res = await putFeature(devId, sleepPlanFeatureId, featureData || [])
+    const res = pushFeature ? await putFeature(devId, sleepPlanFeatureId, featureData || []) : {result: true}
+    const sleepData = {
+      version: 0,
+      num: sleep.length,
+      nodes: cloneDeep(sleep)
+    }
     if (res.result) {
-      setSleepMode(sleepObj2Dp(sleep)).then()
+      setSleepMode(sleepObj2Dp(sleepData)).then()
       return {
         success: true
       }

package/src/newModules/sleepWakeUp/SleepWakeUpPage.tsx

@@ -9,8 +9,8 @@ import res from '@ledvance/base/src/res'
 import { useDeviceInfo, useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
 import { useReactive, useUpdateEffect } from "ahooks";
 import CustomListDialog from "@ledvance/base/src/components/CustomListDialog";
-import { SwitchButton, Utils } from "tuya-panel-kit";
-import { convertMinutesTo12HourFormat, loopText } from "@ledvance/base/src/utils/common";
+import { Dialog, SwitchButton, Utils } from "tuya-panel-kit";
+import { convertMinutesTo12HourFormat, loopText, isConflictTask, showDialog } from "@ledvance/base/src/utils/common";
 import TextButton from "@ledvance/base/src/components/TextButton";
 import { ui_biz_routerKey } from '../../navigation/Routers'
 import { cloneDeep } from "lodash";
@@ -21,6 +21,8 @@ import { useParams } from "@ledvance/base/src/hooks/Hooks";
 import { ApplyForItem } from "../timeSchedule/Interface";
 import InfoText from "@ledvance/base/src/components/InfoText";
 import ThemeType from '@ledvance/base/src/config/themeType'
+import { useConflictTask } from "hooks/DeviceDpStateHooks";
+
 
 const cx = Utils.RatioUtils.convertX
 const { parseTimer } = Utils.TimeUtils
@@ -31,7 +33,7 @@ export interface SleepWakeUpPageRouteParams {
   isSupportTemperature?: boolean
   isSupportBrightness?: boolean
   isMixLight?: boolean
-  sleepModeDpCode: string
+  sleepDpCode: string
   wakeUpDpCode: string
   conflictDps: {
     randomTimeDpCode?: string
@@ -48,7 +50,8 @@ const SleepWakeUpPage = (props: { theme?: ThemeType }) => {
   const is24HourClock = useSystemTimeFormate()
   const params = useParams<SleepWakeUpPageRouteParams>()
   const [wakeUpList, setWakeUpList, wakeupComplete] = useWakeUp(params.wakeUpDpCode)
-  const [sleepList, setSleepList, sleepComplete] = useSleepMode(params.sleepModeDpCode)
+  const [sleepList, setSleepList, sleepComplete] = useSleepMode(params.sleepDpCode)
+  const [checkConflict, resolveConflict] = useConflictTask(params.conflictDps)
   const state = useReactive({
     showAddSchedulePopover: false,
     sleepTagChecked: false,
@@ -65,12 +68,10 @@ const SleepWakeUpPage = (props: { theme?: ThemeType }) => {
   }, [state.sleepScheduleList, state.wakeUpScheduleList])
 
   useUpdateEffect(() => {
-    console.log(sleepList, '< --- sleepList')
     state.sleepScheduleList = cloneDeep(sleepList)
   }, [JSON.stringify(sleepList)])
 
   useUpdateEffect(() => {
-    console.log(wakeUpList, '< --- wakeUpList')
     state.wakeUpScheduleList = cloneDeep(wakeUpList)
   }, [JSON.stringify(wakeUpList)])
 
@@ -114,12 +115,79 @@ const SleepWakeUpPage = (props: { theme?: ThemeType }) => {
         return item
       })
     }
-    const def = {
-      version: 0,
-      num: cloneSleepWakeUp.length,
-      nodes: cloneDeep(cloneSleepWakeUp)
+    if ((mode === 'edit' && sleepWakeUp.enable) || mode === 'add') {
+      let sleepConflict = false
+      let wakeUpConflict = false  
+      const cloneSleepPlan = isSleep ? cloneSleepWakeUp : cloneDeep(sleepList)
+      const cloneWakeUpPlan = isSleep ? cloneDeep(wakeUpList) : cloneSleepWakeUp
+      const currentSleepWakeUp = {
+        ...sleepWakeUp, 
+        startTime: getStartTime(sleepWakeUp), 
+        endTime: getEndTime(sleepWakeUp)
+      }
+      const newSleepList = cloneSleepPlan.map((item, idx) => {
+        const itself = isSleep ? (mode === 'add' ? (idx === cloneSleepPlan.length - 1) : sleepWakeUp.id === item.id) : isSleep
+        if (!itself && item.enable && isConflictTask({
+          ...item,
+          startTime: getStartTime(item),
+          endTime: getEndTime(item)
+        }, currentSleepWakeUp)){
+          sleepConflict = true 
+          item.enable = false 
+          return item 
+        }
+        return item 
+      })
+      const newWakeUpList = cloneWakeUpPlan.map((item, idx) => {
+        const itself = !isSleep ? (mode === 'add' ? (idx === cloneWakeUpPlan.length - 1) : sleepWakeUp.id === item.id) : !isSleep
+        if (!itself && item.enable && isConflictTask({
+          ...item,
+          startTime: getStartTime(item),
+          endTime: getEndTime(item)
+        }, currentSleepWakeUp)){
+          wakeUpConflict = true 
+          item.enable = false 
+          return item 
+        }
+        return item 
+      })
+      const isConflict = checkConflict(currentSleepWakeUp) || sleepConflict || wakeUpConflict
+      if (isConflict) {
+        return new Promise((resolve) => {
+          showDialog({
+            method: 'confirm',
+            title: I18n.getLang(isSleep ? 'conflict_dialog_active_item_sleepschedule_titel' : 'conflict_dialog_active_item_wakeupschedule_titel'),
+            subTitle: I18n.getLang(isSleep ? 'conflict_dialog_active_item_sleepschedule_description' : 'conflict_dialog_active_item_wakeupschedule_description'),
+            onConfirm: async (_, { close }) => {
+              close()
+              resolveConflict()
+              const res = isSleep ? await setSleepList(newSleepList) : await setWakeUpList(newWakeUpList) 
+              if (isSleep) {
+                if (wakeUpConflict){
+                  setWakeUpList(newWakeUpList).then()
+                  state.wakeUpScheduleList = cloneDeep(newWakeUpList)
+                }
+                state.sleepScheduleList = cloneDeep(newSleepList)
+              } else {
+                if (sleepConflict){
+                  setSleepList(newSleepList).then()
+                  state.sleepScheduleList = cloneDeep(newSleepList)
+                }
+                state.wakeUpScheduleList = cloneDeep(newWakeUpList)
+              }
+              resolve(res)
+            },
+            onCancel: () => {
+              resolve({
+                success: false 
+              })
+              Dialog.close()
+            }
+          })
+        })
+      }
     }
-    const res = isSleep ? await setSleepList(def) : await setWakeUpList(def)
+    const res = isSleep ? await setSleepList(cloneSleepWakeUp) : await setWakeUpList(cloneSleepWakeUp)
     if (res.success) {
       if (isSleep) {
         state.sleepScheduleList = cloneDeep(cloneSleepWakeUp)
@@ -332,6 +400,32 @@ const SleepWakeUpPage = (props: { theme?: ThemeType }) => {
                     enable: v ? 1 : 0
                   })
                 }}
+                onLongPress={() =>{
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang(
+                      item.isSleep
+                        ? 'cancel_dialog_delete_item_sleepschedule_titel'
+                        : 'cancel_dialog_delete_item_wakeupschedule_titel'
+                    ),
+                    subTitle: I18n.getLang(
+                      item.isSleep
+                        ? 'cancel_dialog_delete_item_sleepschedule_description'
+                        : 'cancel_dialog_delete_item_wakeupschedule_description'
+                    ),
+                    onConfirm: async (_, { close }) => {
+                      close();
+                      if (state.loading) return;
+                      state.loading = true;
+                      await modDeleteTimeSchedule(
+                        'del',
+                        item.isSleep,
+                        item
+                      );
+                      state.loading = false;
+                    },
+                  });
+                }}
               />
             )}
             ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
@@ -408,12 +502,13 @@ const SleepWakeUpCard = (props: {
   sleepWakeUp: SleepUIItem | WakeUpUIItem,
   onSwitch: (enable: boolean) => void,
   onPress: () => void
+  onLongPress: () => void
   is24HourClock: boolean
   styles: StyleSheet.NamedStyles<any>
 }) => {
-  const { sleepWakeUp, is24HourClock, onSwitch, onPress, styles } = props
+  const { sleepWakeUp, is24HourClock, onSwitch, onPress, onLongPress, styles } = props
   return (
-    <Card style={styles.randomTimingCard} onPress={onPress}>
+    <Card style={styles.randomTimingCard} onPress={onPress} onLongPress={onLongPress}>
       <Spacer height={cx(16)} />
       <View style={styles.switchLine}>
         <Text style={styles.time}>

package/src/newModules/switchGradient/SwitchGradientPage.tsx

@@ -79,8 +79,10 @@ const SwitchGradientPage = (props: { theme?: ThemeType }) => {
       <View>
         <Card style={styles.stepCard}>
           <Spacer height={cx(16)}/>
-          <Text style={styles.stepTitle}>{I18n.getLang('matter_gradient_light_on_description_text')}</Text>
-          <Spacer height={cx(10)}/>
+          <View style={{ minHeight: cx(70), flexDirection: 'row'}}>
+            <Text style={styles.stepTitle}>{I18n.getLang('matter_gradient_light_on_description_text')}</Text>
+          </View>
+          <Spacer height={cx(5)}/>
           <View style={styles.stepGroup}>
             <Text style={styles.stepText}>{I18n.getLang('matter_gradient_light_on_title')}</Text>
             <Stepper
@@ -99,8 +101,9 @@ const SwitchGradientPage = (props: { theme?: ThemeType }) => {
         <Spacer/>
         <Card style={styles.stepCard}>
           <Spacer height={cx(16)}/>
-          <Text style={styles.stepTitle}>{I18n.getLang('matter_gradient_light_off_description_text')}</Text>
-          <Spacer height={cx(10)}/>
+          <View style={{ minHeight: cx(70), flexDirection: 'row'}}>
+            <Text  style={styles.stepTitle}>{I18n.getLang('matter_gradient_light_off_description_text')}</Text>
+          </View>
           <View style={styles.stepGroup}>
             <Text style={styles.stepText}>{I18n.getLang('matter_gradient_light_off_title')}</Text>
             <Stepper

package/src/newModules/swithInching/SwithInching.tsx

@@ -225,6 +225,7 @@ const SwitchInching = (props: { theme?: ThemeType }) => {
           setMinute={s => {
             state.second = s;
           }}
+          maxHour={61}
         />
       </View>
     </Page>

package/src/newModules/timeSchedule/Interface.ts

@@ -1,4 +1,5 @@
 import I18n from "@ledvance/base/src/i18n";
+import { AdjustType, DiySceneInfo } from "@ledvance/base/src/utils/interface";
 import { MoodInfo, MoodUIInfo } from "../mood/Interface";
 
 export interface Timer {
@@ -27,8 +28,8 @@ export interface HSV {
 export type Category = 'light' | 'socket' | 'fan' | 'mainLight' | 'secondaryLight'
 
 export interface ApplyForItem {
-  name?: string 
-  index?: number 
+  name?: string
+  index?: number
   key: string;
   dp: string;
   type: Category;
@@ -45,6 +46,7 @@ interface judgmentSupport {
   isMixLight?: boolean;
   isFanLight?: boolean;
   isUVCFan?: boolean;
+  isMoodStrip?: boolean;
 }
 
 export interface ManualSettingProps extends judgmentSupport {
@@ -63,7 +65,8 @@ export enum DeviceType {
   MixLight = 'mixLight',
   StripLight = 'stripLight',
   CeilingLight = 'ceilingLight',
-  FanLight = 'fanLight'
+  FanLight = 'fanLight',
+  MoodStrip = 'moodStrip',
 }
 // export type DeviceType = 'LightSource' | 'CeilingLight' | 'StringLight' | 'StripLight' | 'MixLight';
 
@@ -93,12 +96,16 @@ export interface StripLightData extends DeviceData {
 }
 
 export interface FanLightData extends DeviceData {
-  fanSpeed: number 
+  fanSpeed: number
   direction: 'forward' | 'reverse'
   mode: 'nature' | 'normal'
   disinfect: boolean
 }
 
+export interface MoodStripData extends DeviceData {
+  adjustType: AdjustType
+}
+
 export type ComponentConfig =
   | { type: DeviceType.LightSource; deviceData: DeviceData }
   | { type: DeviceType.MixLight; deviceData: MixLightData }
@@ -106,6 +113,7 @@ export type ComponentConfig =
   | { type: DeviceType.CeilingLight; deviceData: StripLightData }
   | { type: DeviceType.FanLight; deviceData: FanLightData }
   | { type: DeviceType.PowerStrip; deviceData: DeviceData}
+  | { type: DeviceType.MoodStrip; deviceData: MoodStripData}
 
 export interface TimeScheduleDetailState {
   timeSchedule: Timer;
@@ -117,14 +125,18 @@ export interface TimeScheduleDetailState {
   loading: boolean;
   moodLoading: boolean;
   manualData: ComponentConfig;
-  mood?: MoodInfo;
-  moods: MoodUIInfo[];
+  mood?: MoodInfo | DiySceneInfo;
+  moods: MoodUIInfo[] | DiySceneInfo[];
+  filterMoods: MoodUIInfo[] | DiySceneInfo[];
+  staticTagChecked: boolean;
+  dynamicTagChecked: boolean;
+  diyTagChecked: boolean;
   timerId: any;
   moodName: string;
 }
 export interface DeviceStateType {
   deviceData: ComponentConfig
-  mood?: MoodInfo
+  mood?: MoodInfo | DiySceneInfo
   isManual: boolean
 }
 

package/src/newModules/timeSchedule/TimeScheduleActions.ts

@@ -2,6 +2,7 @@ import { NativeApi } from '@ledvance/base/src/api/native';
 import { Timer, TimerActions } from './Interface';
 import { parseJSON } from '@tuya/tuya-panel-lamp-sdk/lib/utils';
 import { ColorList } from '@ledvance/base/src/components/StripAdjustView';
+import {AdjustType} from "@ledvance/base/src/utils/interface";
 
 export const defDeviceData = {
   h: 0,
@@ -32,6 +33,11 @@ export const defFanLightDeviceData = {
   disinfect: false
 }
 
+export const defMoodStripDeviceData = {
+  ...defDeviceData,
+  adjustType: AdjustType.COLOUR
+};
+
 export const getTimeSchedule = async (deviceId: string): Promise<Timer[]> => {
   const res = await NativeApi.getAllTaskTimer(deviceId);
   if (res.success && Array.isArray(res.data)) {

package/src/newModules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -1,50 +1,40 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import {
-  FlatList,
-  Image,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { useNavigation } from '@react-navigation/core';
+import React, {useCallback, useEffect, useMemo} from 'react';
+import {FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View,} from 'react-native';
+import {useNavigation} from '@react-navigation/core';
 import Page from '@ledvance/base/src/components/Page';
 import I18n from '@ledvance/base/src/i18n';
 import TextField from '@ledvance/base/src/components/TextField';
-import { cloneDeep, isEqual } from 'lodash';
-import { useReactive } from 'ahooks';
-import { SwitchButton, TimerPicker, Utils } from 'tuya-panel-kit';
+import {cloneDeep, isEqual} from 'lodash';
+import {useReactive} from 'ahooks';
+import {SwitchButton, TimerPicker, Utils} from 'tuya-panel-kit';
 import Spacer from '@ledvance/base/src/components/Spacer';
 import LdvWeekView from '@ledvance/base/src/components/weekSelect';
-import { convertTo12HourFormat, loopText, showDialog } from '@ledvance/base/src/utils/common';
-import {
-  ApplyForItem,
-  ComponentConfig,
-  DeviceType,
-  TimeScheduleDetailState,
-  Timer,
-  TimerActions,
-} from './Interface';
+import {convertTo12HourFormat, loopText, showDialog} from '@ledvance/base/src/utils/common';
+import {ApplyForItem, ComponentConfig, DeviceType, Timer, TimerActions, TimeScheduleDetailState,} from './Interface';
 import res from '@ledvance/base/src/res';
-import {
-  useDeviceId,
-  useMoods,
-  useSystemTimeFormate,
-} from '@ledvance/base/src/models/modules/NativePropsSlice';
-import { TimeSchedulePageParams } from './TimeSchedulePage';
-import { Result } from '@ledvance/base/src/models/modules/Result';
+import {useDeviceId, useMoods, useSystemTimeFormate,} from '@ledvance/base/src/models/modules/NativePropsSlice';
+import {TimeSchedulePageParams} from './TimeSchedulePage';
+import {Result} from '@ledvance/base/src/models/modules/Result';
 import DeleteButton from '@ledvance/base/src/components/DeleteButton';
 import InfoText from '@ledvance/base/src/components/InfoText';
 import SegmentControl from '@ledvance/base/src/components/segmentControl';
-import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import {useParams} from '@ledvance/base/src/hooks/Hooks';
 import ManualSettings from './components/ManuaSettings';
-import { defDeviceData, defFanLightDeviceData, defMixDeviceData, defStripDeviceData } from './TimeScheduleActions';
+import {
+  defDeviceData,
+  defFanLightDeviceData,
+  defMixDeviceData,
+  defMoodStripDeviceData,
+  defStripDeviceData
+} from './TimeScheduleActions';
 import MoodItem from '../mood/MoodItem';
-import { getRemoteMoodList } from '../mood/MoodActions';
-import { MoodUIInfo } from '../mood/Interface';
+import {getRemoteMoodList} from '../mood/MoodActions';
+import {MoodInfo, MoodUIInfo} from '../mood/Interface';
 import Summary from '@ledvance/base/src/components/Summary'
 import ThemeType from '@ledvance/base/src/config/themeType'
+import Tag from "@ledvance/base/src/components/Tag";
+import DiySceneItem from '@ledvance/base/src/components/DiySceneItem';
+import {DiySceneInfo} from "@ledvance/base/src/utils/interface";
 
 const { convertX: cx } = Utils.RatioUtils;
 const { toFixedString } = Utils.NumberUtils;
@@ -63,6 +53,7 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation();
   const devId = useDeviceId();
   const [moods, setMoods] = useMoods();
+  type MoodsType = typeof params.isMoodStrip extends true ? DiySceneInfo[] : MoodUIInfo[]
   const state = useReactive<TimeScheduleDetailState>({
     timeSchedule: params.mode === 'add' ? newTimeSchedule() : cloneDeep(params.timeSchedule),
     dps: params.mode === 'add' ? {} : params.timeSchedule.dps,
@@ -78,6 +69,10 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
         : params.manualDataDp2Obj(params.timeSchedule.dps).deviceData,
     mood: params.mode === 'add' ? undefined : params.manualDataDp2Obj(params.timeSchedule.dps)?.mood,
     moods: cloneDeep(moods),
+    filterMoods: cloneDeep(moods),
+    staticTagChecked: true,
+    dynamicTagChecked: true,
+    diyTagChecked: true,
     timerId: undefined,
     moodName: '',
   });
@@ -149,15 +144,37 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
   useEffect(() => {
     if (state.moods?.length) {
       state.moodName =
-        state.moods.find(m =>
+        (state.moods as MoodsType).find(m =>
           params.isCeilingLight
-            ? m.mainLamp.id === state.mood?.mainLamp.id &&
-            m.secondaryLamp.id === state.mood?.secondaryLamp.id
+            ? m.mainLamp.id === (state.mood as MoodInfo)?.mainLamp.id &&
+            m.secondaryLamp.id === (state.mood as MoodInfo)?.secondaryLamp.id
             : m.id === state.mood?.id
         )?.name || '';
     }
   }, [state.mood, state.moods]);
 
+  useEffect(() => {
+    if (params.isMoodStrip) {
+      state.filterMoods = (state.moods as DiySceneInfo[]).filter(item => {
+        return [state.staticTagChecked, state.dynamicTagChecked, state.diyTagChecked].every(it => !it)
+          || (state.staticTagChecked && item.type === 'Static')
+          || (state.dynamicTagChecked && item.type === 'Dynamic')
+          || (state.diyTagChecked && item.type === 'DIY')
+      })
+    } else {
+      state.filterMoods = (state.moods as MoodsType).filter(item => {
+        return (
+          (state.staticTagChecked && state.dynamicTagChecked) ||
+          (!state.staticTagChecked && !state.dynamicTagChecked) ||
+          (state.staticTagChecked && item.mainLamp.nodes.length < 2) ||
+          (state.dynamicTagChecked &&
+            (item.secondaryLamp.nodes.length > 1 || item.mainLamp.nodes.length > 1))
+        );
+      });
+    }
+
+  }, [state.staticTagChecked, state.dynamicTagChecked, state.diyTagChecked, state.moods]);
+
   const getFormateTime = useCallback((time: number | string) => {
     if (typeof time === 'number') {
       return `${toFixedString(Math.trunc(time / 60), 2)}:${toFixedString(time % 60, 2)}`;
@@ -208,7 +225,7 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
   }, [params.applyForList.length, params.applyForDisabled]);
 
   const getMoodItemEnable = useCallback((item: MoodUIInfo) => {
-    return params.isCeilingLight ? ((item.mainLamp.id === state.mood?.mainLamp?.id) && (item.secondaryLamp.id === state.mood?.secondaryLamp?.id)) : item.id === state.mood?.id
+    return params.isCeilingLight ? ((item.mainLamp.id === (state.mood as MoodInfo)?.mainLamp?.id) && (item.secondaryLamp.id === (state.mood as MoodInfo)?.secondaryLamp?.id)) : item.id === state.mood?.id
   }, [state.mood, params.isCeilingLight])
 
   const styles = StyleSheet.create({
@@ -284,6 +301,10 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
       color: props.theme?.global.fontColor,
       fontSize: cx(14)
     },
+    tagLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+    }
   });
 
   return (
@@ -473,25 +494,77 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
             }}
           />
         ) : (
-          !showMoodFanSelectText ? <FlatList
-            data={state.moods}
-            renderItem={({ item }) => {
-              return (
-                <MoodItem
-                  enable={getMoodItemEnable(item)}
-                  mood={item}
-                  isMix={!!(params.isMixLight || params.isCeilingLight)}
-                  onSwitch={_ => {
-                    state.mood = cloneDeep(item);
+          !showMoodFanSelectText ? (
+            <View>
+              {!(params.isStringLight || params.isStripLight) && <View style={styles.tagLine}>
+                  <Tag
+                      checked={state.staticTagChecked}
+                      text={I18n.getLang('mood_overview_filter_name_text1')}
+                      onCheckedChange={checked => {
+                        state.staticTagChecked = checked;
+                      }}
+                  />
+                  <Spacer width={cx(8)} height={0} />
+                  <Tag
+                      checked={state.dynamicTagChecked}
+                      text={I18n.getLang('mood_overview_filter_name_text2')}
+                      onCheckedChange={checked => {
+                        state.dynamicTagChecked = checked;
+                      }}
+                  />
+                {
+                  params.isMoodStrip && <>
+                        <Spacer width={cx(8)} height={0}/>
+                        <Tag
+                            checked={state.diyTagChecked}
+                            text={I18n.getLang('mood_overview_field_chip_diy')}
+                            onCheckedChange={checked => {
+                              state.diyTagChecked = checked;
+                            }}
+                        />
+                    </>
+                }
+              </View>}
+              {params.isMoodStrip ? <FlatList
+                  data={state.filterMoods as DiySceneInfo[]}
+                  renderItem={({item}) => {
+                    return (
+                      <DiySceneItem
+                        enable={item.id === state.mood?.id}
+                        scene={item}
+                        onSwitch={_ => {
+                          state.mood = cloneDeep(item);
+                        }}
+                      />
+                    );
+                  }}
+                  ListHeaderComponent={() => <Spacer height={cx(10)}/>}
+                  ItemSeparatorComponent={() => <Spacer/>}
+                  ListFooterComponent={() => <Spacer/>}
+                  keyExtractor={item => `${item.name}`}
+                /> :
+                <FlatList
+                  data={state.filterMoods as MoodUIInfo[]}
+                  renderItem={({ item }) => {
+                    return (
+                      <MoodItem
+                        enable={getMoodItemEnable(item)}
+                        mood={item}
+                        isMix={!!(params.isMixLight || params.isCeilingLight)}
+                        onSwitch={_ => {
+                          state.mood = cloneDeep(item);
+                        }}
+                      />
+                    );
                   }}
+                  ListHeaderComponent={() => <Spacer height={cx(10)} />}
+                  ItemSeparatorComponent={() => <Spacer />}
+                  ListFooterComponent={() => <Spacer />}
+                  keyExtractor={item => `${item.name}`}
                 />
-              );
-            }}
-            ListHeaderComponent={() => <Spacer height={cx(10)} />}
-            ItemSeparatorComponent={() => <Spacer />}
-            ListFooterComponent={() => <Spacer />}
-            keyExtractor={item => `${item.name}`}
-          /> : <View></View>
+              }
+            </View>
+          ) : <View></View>
         )}
         <Spacer />
 
@@ -632,7 +705,9 @@ const getDefaultManual = (props: TimeScheduleDetailPageParams): ComponentConfig
             ? DeviceType.FanLight
             : props.isCeilingLight
               ? DeviceType.CeilingLight
-              : DeviceType.LightSource
+              : props.isMoodStrip
+                ? DeviceType.MoodStrip
+                : DeviceType.LightSource
   const deviceData =
     (deviceType === DeviceType.StripLight || deviceType === DeviceType.CeilingLight)
       ? defStripDeviceData
@@ -640,7 +715,9 @@ const getDefaultManual = (props: TimeScheduleDetailPageParams): ComponentConfig
         ? defMixDeviceData
         : deviceType === DeviceType.FanLight
           ? defFanLightDeviceData
-          : defDeviceData;
+          : deviceType === DeviceType.MoodStrip
+            ? defMoodStripDeviceData
+            : defDeviceData;
 
   return {
     type: deviceType as any,