@ledvance/ui-biz-bundle 1.1.105 → 1.1.106

package/src/newModules/energyConsumption/EnergyConsumptionActions.ts

@@ -2,7 +2,12 @@ import {useDp} from "@ledvance/base/src/models/modules/NativePropsSlice";
 import {localeNumber, loopsText, monthFormat, monthFormatShort} from "@ledvance/base/src/utils/common";
 import {EnergyData} from "./component/EnergyModal";
 import {NativeApi} from "@ledvance/base/src/api/native";
-import {getDataWithSpecified, getDpResultByHour, getDpResultByMonth} from "@ledvance/base/src/models/TuyaApi";
+import {
+  DpResultByMonthResData,
+  getDataWithSpecified,
+  getDpResultByHour,
+  getDpResultByMonth
+} from "@ledvance/base/src/models/TuyaApi";
 import {DateType} from "@ledvance/ui-biz-bundle/src/newModules/energyConsumption/co2Data";
 import {OverviewItem} from "@ledvance/ui-biz-bundle/src/newModules/energyConsumption/EnergyConsumptionPage";
 import {overDays} from "@ledvance/base/src/utils/index";
@@ -44,8 +49,13 @@ export async function getElectricity(devId: string, addEleDpCode: string, date:
   return res
 }
 
+let dpResultByMonthCache: DpResultByMonthResData | undefined = undefined
 const getDpResultByYear = async (devId: string, addEleDpCode: string, dateStr: string): Promise<OverviewItem[]> => {
-  const res = await getDpResultByMonth(devId, addEleDpCode, 'sum')
+  let res: DpResultByMonthResData | undefined;
+  if (!dpResultByMonthCache) {
+    dpResultByMonthCache = await getDpResultByMonth(devId, addEleDpCode, 'sum')
+  }
+  res = dpResultByMonthCache;
   if (!isEmpty(res)) {
     if (!isEmpty(res.years)) {
       const year = dateStr;
@@ -105,6 +115,9 @@ const getDpResultByDate = async (devId: string, addEleDpCode: string, date: stri
     return []
   }
   const res = await getDpResultByHour(devId, addEleDpCode, date, 'sum')
+  if (!res) {
+    return []
+  }
   const list: Array<OverviewItem> = []
   const resData = Object.keys(res)?.map(val => {
     return {key: Number(val?.slice(8, 10)), value: Number(res[val])}

package/src/newModules/energyConsumption/EnergyConsumptionChart.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import {Image, Platform, StyleSheet, View, Text} from "react-native";
+import {Image, Platform, StyleSheet, View, Text, TouchableOpacity} from "react-native";
 import {useRoute} from '@react-navigation/core'
 import Page from "@ledvance/base/src/components/Page";
 import res from "@ledvance/base/src/res";
@@ -19,6 +19,7 @@ import DateSelectedItem from "@ledvance/ui-biz-bundle/src/newModules/energyConsu
 import {useReactive, useUpdateEffect} from "ahooks";
 import {getElectricity} from "@ledvance/ui-biz-bundle/src/newModules/energyConsumption/EnergyConsumptionActions";
 import {useDeviceId} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import DateSwitch from "@ledvance/ui-biz-bundle/src/newModules/energyConsumption/component/DateSwitch";
 
 const {convertX: cx} = Utils.RatioUtils
 const {withTheme} = Utils.ThemeUtils
@@ -50,6 +51,14 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
     listEmptyText: {
       flex: 0
     },
+    downloadIcon: {
+      width: cx(24),
+      height: cx(24),
+      tintColor: props.theme?.global.brand,
+      position: 'absolute',
+      right: 0,
+      top: cx(10)
+    }
   });
 
   const getDateType = useCallback((date: string) => {
@@ -64,7 +73,7 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
       }
     }
     return DateType.Day;
-  }, [])
+  }, []);
   const dateType = getDateType(date);
   const state = useReactive({
     loading: false,
@@ -87,11 +96,13 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
     getElectricity(devId, addEleDpCode, state.date, state.dateType).then((res) => {
       state.chartData = res;
       state.loading = false;
-    })
+    }).catch(()=>{
+      state.loading = false;
+    });
   }, [state.date]);
 
   const getEmptyDataTip = useCallback(() => {
-    if (state.over365Days) {
+    if (state.over365Days && state.dateType !== DateType.Day) {
       return I18n.getLang('energyconsumption_Daylimit')
     }
     if (state.dateType === DateType.Day && state.over7Days) {
@@ -139,16 +150,26 @@ const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
   return (
       <Page
           backText={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
-          headlineIcon={state.chartData?.length ? res.download_icon : undefined}
-          onHeadlineIconClick={() => {
-            exportFile(state.chartData,params.price,params.unit)
-          }}
           showGreenery={false}
           loading={state.loading}
           greeneryIcon={res.energy_consumption_greenery}
           headlineContent={
-            <View style={{alignItems: 'center', justifyContent: 'center', flex: 1, marginStart: cx(24)}}>
-              <Text style={{fontSize: cx(24), color: props.theme?.global.brand}}>{state.headlineText}</Text>
+            <View style={{width: '100%',flexDirection:'row'}}>
+              <DateSwitch
+                  style={{flex: 1}}
+                  date={state.date}
+                  dateType={state.dateType}
+                  headlineText={state.headlineText}
+                  onDateChange={(date) => {
+                    state.date = date;
+                  }}/>
+              <TouchableOpacity onPress={() => {
+                exportFile(state.chartData, params.price, params.unit)
+              }}>
+                <Image
+                    style={styles.downloadIcon}
+                    source={state.chartData?.length ? res.download_icon : undefined}/>
+              </TouchableOpacity>
             </View>
           }
       >

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

@@ -0,0 +1,111 @@
+import ThemeType from "@ledvance/base/src/config/themeType";
+import React, {PropsWithChildren, useCallback, useEffect} from "react";
+import {Image, Text, TouchableOpacity, View, ViewProps} from "react-native";
+import {Utils} from "tuya-panel-kit";
+import {useReactive} from "ahooks";
+import {DateType} from "@ledvance/ui-biz-bundle/src/newModules/energyConsumption/co2Data";
+import res from "@ledvance/base/src/res";
+import dayjs from "dayjs";
+
+const cx = Utils.RatioUtils.convertX;
+const {withTheme} = Utils.ThemeUtils
+
+interface DateSwitchProps extends PropsWithChildren<ViewProps> {
+    theme?: ThemeType
+    headlineText: string,
+    date: string,
+    dateType: DateType,
+    onDateChange: (string) => void
+}
+
+export default withTheme(function DateSwitch(props: DateSwitchProps) {
+    const {dateType, date, onDateChange, theme, headlineText} = props;
+    const state = useReactive({
+        date: date,
+        dateType: dateType,
+        headlineText: headlineText,
+        disableArrowLeft: false,
+        disableArrowRight: false,
+    });
+
+    useEffect(() => {
+        state.date = date;
+        state.headlineText = headlineText;
+        state.dateType = dateType;
+        const {canPreChangeDate, canNextChangeDate} = canPreOrNextChangeDate(dayjs(date));
+        state.disableArrowRight = !canNextChangeDate;
+        state.disableArrowLeft = !canPreChangeDate;
+    }, [date, headlineText, dateType]);
+
+    const canPreOrNextChangeDate = useCallback((datejs: dayjs.Dayjs) => {
+        const minDatejs = dayjs('2000-1-1');
+        const nowDatejs = dayjs();
+        const year = datejs.year();
+        const month = (datejs.month() + 1).toString().padStart(2, '0');
+        const day = datejs.date().toString().padStart(2, '0');
+        const dateType = state.dateType;
+        const dateUnit = dateType === DateType.Year ? 'year' : (dateType === DateType.Month ? 'month' : 'day');
+        let canPreChangeDate = datejs.isAfter(minDatejs, dateUnit);
+        let canNextChangeDate = datejs.isBefore(nowDatejs, dateUnit);
+        let date: string | undefined = undefined;
+        if (datejs >= minDatejs && datejs <= nowDatejs) {
+            switch (state.dateType) {
+                case DateType.Day:
+                    date = `${year}${month}${day}`;
+                    break
+                case DateType.Month:
+                    date = `${year}${month}`;
+                    break
+                case DateType.Year:
+                    date = `${year}`;
+                    break
+            }
+        }
+        return {date, canPreChangeDate, canNextChangeDate};
+    }, [state.dateType]);
+
+    const changeDate = useCallback((isNextDate: boolean) => {
+        const datejs = dayjs(state.date)
+        const dateType = state.dateType
+        const dateUnit = dateType === DateType.Year ? 'year' : (dateType === DateType.Month ? 'month' : 'day');
+        const newDatejs = datejs.add(isNextDate ? 1 : -1, dateUnit);
+        const {date, canPreChangeDate, canNextChangeDate} = canPreOrNextChangeDate(newDatejs);
+        state.disableArrowRight = !canNextChangeDate;
+        state.disableArrowLeft = !canPreChangeDate;
+        if (date) {
+            onDateChange(date);
+        }
+    }, [state.date, canPreOrNextChangeDate, state.disableArrowRight, state.disableArrowLeft, onDateChange]);
+
+    return (<View style={[props.style, {flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}]}>
+        <TouchableOpacity
+            disabled={state.disableArrowLeft}
+            onPress={() => {
+                changeDate(false);
+            }}>
+            <Image
+                source={res.arrow_left}
+                style={{tintColor: state.disableArrowLeft ? theme?.global.disabledFontColor : theme?.global.brand}}
+                height={cx(36)}
+                width={cx(36)}/>
+        </TouchableOpacity>
+        <Text style={{
+            fontSize: cx(24),
+            minWidth: cx(200),
+            textAlign: 'center',
+            color: theme?.global.brand,
+            fontFamily: 'helvetica_neue_lt_std_roman',
+        }}>{state.headlineText}</Text>
+        <TouchableOpacity
+            disabled={state.disableArrowRight}
+            onPress={() => {
+                changeDate(true);
+            }}>
+            <Image
+                source={res.arrow_right}
+                style={{tintColor: state.disableArrowRight ? theme?.global.disabledFontColor : theme?.global.brand}}
+                height={cx(36)}
+                width={cx(36)}/>
+        </TouchableOpacity>
+    </View>)
+})

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

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import ECharts from '@ledvance/react-native-echarts-pro';
 import I18n from "@ledvance/base/src/i18n";
@@ -28,7 +28,20 @@ const BarChartWithTouch = (props: BarChartProps) => {
     const dataPriceY = data?.map(item => {
         return ((isNaN(Number(item.value)) ? 0 : Number(item.value)) * price).toFixed(2);
     });
-    const maxValue = Math.max(...dataKwhY);
+    const maxValue = useMemo(() => {
+        let max = Math.max(...dataKwhY)
+        if (max < 0.1) {
+            max += 0.02
+            max = max - (max % 0.02)
+        } else if (max < 1) {
+            max += 0.2
+            max = max - (max % 0.2)
+        } else if (max < 10) {
+            max = Math.ceil(max) + 2
+            max = max - (max % 2)
+        }
+        return max
+    }, [dataKwhY]);
     const option = {
         tooltip: {
             show: true,
@@ -56,7 +69,7 @@ const BarChartWithTouch = (props: BarChartProps) => {
         yAxis: [{
             type: 'value',
             name: I18n.getLang('consumption_data_annual_bar_chart_text'),
-            max: Math.ceil(maxValue),
+            max: Math.max(maxValue, 0.02),
             min: 0,
             position: 'left',
             axisLabel: {

package/src/newModules/mood/MoodPage.tsx

@@ -23,7 +23,7 @@ import { getRemoteMoodList, useMoodScene } from './MoodActions';
 import { useParams } from '@ledvance/base/src/hooks/Hooks';
 import { ui_biz_routerKey } from '../../navigation/Routers'
 import { cloneDeep, filter, map } from 'lodash';
-import { saveFlagMode } from '@ledvance/ui-biz-bundle/src/modules/flags/FlagActions';
+import { saveFlagMode } from '../../modules/flags/FlagActions';
 import { SceneStatusType, WorkMode } from '@ledvance/base/src/utils/interface';
 import { showDialog } from '@ledvance/base/src/utils/common';
 import I18n from '@ledvance/base/src/i18n';
@@ -311,7 +311,7 @@ const MoodPage = (props: { theme?: ThemeType }) => {
       right: cx(60),
       top: Platform.OS === 'android' ? cx(90) : cx(130),
       maxWidth: cx(200),
-      backgroundColor: props.theme.card.background,
+      backgroundColor: props.theme?.card.background,
     },
     popoverItem: {
       padding: cx(5),
@@ -365,7 +365,7 @@ const MoodPage = (props: { theme?: ThemeType }) => {
                             })
                           }}
         >
-          <Image source={res.ic_refresh} style={{ width: cx(24), height: cx(24), tintColor: props.theme.global.fontColor }} />
+          <Image source={res.ic_refresh} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
         </TouchableOpacity>
         <Spacer height={cx(10)} />
         {state.originMoods.length >= MAX_MOOD_COUNT && (

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,