@ledvance/ui-biz-bundle 1.1.163 → 1.1.164

package/package.json

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

package/src/newModules/biorhythm/BiorhythmPage.tsx

@@ -242,26 +242,37 @@ const BiorhythmPage = (props: { theme?: ThemeType }) => {
       <Page
         backText={deviceInfo.name}
         onBackClick={navigation.goBack}
-        headlineTopContent={<View style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between' }}>
-          <DeleteButton style={{flex: 1}} text={I18n.getLang('biorhythm_save_as')} onPress={() => {
-            Dialog.prompt({
-              title: I18n.getLang('biorhythm_save_title'),
-              placeholder: I18n.getLang('biorhythm_save_placeholder'),
-              defaultValue: `${deviceInfo.name}`,
-              cancelText: I18n.getLang('auto_scan_system_cancel'),
-              confirmText: I18n.getLang('auto_scan_system_wifi_confirm'),
-              inputWrapperStyle: {backgroundColor: props.theme?.textInput.background, borderRadius: cx(10)},
-              autoFocus: true,
-              onConfirm: (data, { close }) => {
-                saveStorageBiorhythms(data, state.enable, state.gradient, state.weeks, state.planList)
-                close()
-              }
-            })
-          }} />
-          <DeleteButton style={{flex: 1}} text={I18n.getLang('biorhythm_load')} onPress={() => {
-            setBiorhythmListVisible(true)
-          }} />
-        </View>}
+        headlineTopContent={
+          <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
+            <TouchableOpacity
+              style={{paddingLeft: cx(16)}}
+              onPress={() => {
+                Dialog.prompt({
+                  title: I18n.getLang('biorhythm_save_title'),
+                  placeholder: I18n.getLang('biorhythm_save_placeholder'),
+                  defaultValue: `${deviceInfo.name}`,
+                  cancelText: I18n.getLang('auto_scan_system_cancel'),
+                  confirmText: I18n.getLang('auto_scan_system_wifi_confirm'),
+                  inputWrapperStyle: {backgroundColor: props.theme?.textInput.background, borderRadius: cx(10)},
+                  autoFocus: true,
+                  onConfirm: (data, { close }) => {
+                    saveStorageBiorhythms(data, state.enable, state.gradient, state.weeks, state.planList)
+                    close()
+                  }
+                })
+              }}
+            >
+              <Image source={res.icon_save} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{paddingLeft: cx(16)}}
+              onPress={() => {
+                setBiorhythmListVisible(true)
+              }}
+            >
+              <Image source={res.icon_import} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+            </TouchableOpacity>
+          </View>}
         headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
         headlineIconContent={<Switch
           value={state.enable}

package/src/newModules/diyScene/DiyScenePage.tsx

@@ -189,6 +189,9 @@ const DiyScenePage = (props: { theme?: ThemeType }) => {
     infoLine: {
       marginHorizontal: cx(24),
     },
+    rightIconView: {
+      flexDirection: 'row'
+    },
     addMoodPopover: {
       position: 'absolute',
       right: cx(60),
@@ -201,6 +204,9 @@ const DiyScenePage = (props: { theme?: ThemeType }) => {
       alignItems: 'flex-start',
       alignSelf: 'flex-start'
     },
+    refresh: {
+      paddingLeft: cx(24)
+    },
   })
 
   return (
@@ -208,10 +214,33 @@ const DiyScenePage = (props: { theme?: ThemeType }) => {
       <Page
         backText={deviceInfo.name}
         headlineText={I18n.getLang('mood_overview_headline_text')}
-        headlineIcon={state.originScenes.length < MAX_MOOD_COUNT ? res.add : undefined}
-        onHeadlineIconClick={() => {
-          navigationRoute('add', cloneDeep(DEFAULT_SCENE))
-        }}
+        headlineIconContent={<View style={styles.rightIconView}>
+          <TouchableOpacity
+            style={styles.refresh}
+            onPress={() => {
+              showDialog({
+                method: 'confirm',
+                title: I18n.getLang('mood_resetbutton'),
+                subTitle: I18n.getLang('reset_mooddescription'),
+                onConfirm: async (_, { close }) => {
+                  close()
+                  await getRemoteMixSceneInfo(true)
+                }
+              })
+            }}
+          >
+            <Image source={{uri: res.ic_refresh}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+          </TouchableOpacity>
+          {state.originScenes.length < MAX_MOOD_COUNT && <TouchableOpacity
+              style={styles.refresh}
+              onPress={() => {
+                navigationRoute('add', cloneDeep(DEFAULT_SCENE))
+              }}
+          >
+              <Image source={{uri: res.add}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.brand }} />
+          </TouchableOpacity>
+          }
+        </View>}
         loading={state.loading}
       >
         <View style={styles.tagLine}>
@@ -239,21 +268,6 @@ const DiyScenePage = (props: { theme?: ThemeType }) => {
             }}
           />
         </View>
-        <TouchableOpacity style={{ alignItems: 'flex-end',paddingRight: cx(24) }}
-                          onPress={() => {
-                            showDialog({
-                              method: 'confirm',
-                              title: I18n.getLang('mood_resetbutton'),
-                              subTitle: I18n.getLang('reset_mooddescription'),
-                              onConfirm: async (_, { close }) => {
-                                close()
-                                await getRemoteMixSceneInfo(true)
-                              }
-                            })
-                          }}
-        >
-          <Image source={{uri: res.ic_refresh}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
-        </TouchableOpacity>
         <Spacer height={cx(10)} />
         {state.originScenes.length >= MAX_MOOD_COUNT && (
           <View style={styles.infoLine}>

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

@@ -78,8 +78,6 @@ const BarChartWithTouch = (props: BarChartProps) => {
           rotate: 45,
           align: 'right',
           verticalAlign: 'top',
-          showMinLabel: true,
-          showMaxLabel: true,
         }
       },
       yAxis: [

package/src/newModules/mood/MoodInfo.ts

@@ -498,6 +498,55 @@ function getStringLightSceneList(): RemoteMoodInfo[] {
       t: 0,
       e: false,
     },
+    {
+      n: I18n.getLang('strip_lights_mood_text45'),
+      i: '0125101e1e0000003700a032000000003700c3640000000037011364000000003700782800000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text46'),
+      i: '01261014140000002d00174a000000002d002348000000002d001e24000000002d00014000000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text47'),
+      i: '01270a555500000055012c64000000005500b4640000000055010f51000000005501485c00000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text48'),
+      i: '01281028280000003700d258000000003700b564000000003700b152000000003700f06400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text49'),
+      i: '0129100f0f0000002300784c000000002300504b0000000023005238000000002300545200000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text50'),
+      i: '012a0a5050000000640000640000000064007864000000006400f0640000000064003c640000000064012c6400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text51'),
+      i: '012b1032320000001e00f04e000000001e011364000000001e00b42900000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
   ];
 }
 
@@ -811,6 +860,55 @@ function getStripLightSceneList(): RemoteMoodInfo[] {
       t: 0,
       e: false,
     },
+    {
+      n: I18n.getLang('strip_lights_mood_text45'),
+      i: '013b011e1e6000003700a03200c364011364007828',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text46'),
+      i: '013c0114146000002d00174a002348001e24000140',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text47'),
+      i: '013d02555560000055012c6400b464010f5101485c',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text48'),
+      i: '013e0128286000003700d25800b56400b15200f064',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text49'),
+      i: '013f010f0f6000002300784c00504b005238005452',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text50'),
+      i: '01400250506000006400006400786400f064003c64012c64',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text51'),
+      i: '01410132326000001e00f04e01136400b429',
+      s: '',
+      t: 0,
+      e: false,
+    },
   ];
 }
 
@@ -1152,6 +1250,55 @@ function getMixCeilingLightList(): RemoteMoodInfo[] {
       t: 0,
       e: false,
     },
+    {
+      n: I18n.getLang('strip_lights_mood_text45'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013b011e1e6000003700a03200c364011364007828',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text46'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013c0114146000002d00174a002348001e24000140',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text47'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013d02555560000055012c6400b464010f5101485c',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text48'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013e0128286000003700d25800b56400b15200f064',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text49'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '013f010f0f6000002300784c00504b005238005452',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text50'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '01400250506000006400006400786400f064003c64012c64',
+      t: 0,
+      e: false,
+    },
+    {
+      n: I18n.getLang('strip_lights_mood_text51'),
+      i: '040d0d0100000000000003e800000d0d0100000000000003e80000',
+      s: '01410132326000001e00f04e01136400b429',
+      t: 0,
+      e: false,
+    },
   ];
 }
 
@@ -1400,6 +1547,55 @@ const defColorSceneList: RemoteMoodInfo[] = [
     t: 0,
     e: false,
   },
+  {
+    n: I18n.getLang('strip_lights_mood_text45'),
+    i: '251e1e0200a001f40226000000001e1e0200c303e80226000000001e1e02011303e80226000000001e1e0200780190022600000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text46'),
+    i: '26141402001702e401c200000000141402002302d001c200000000141402001e016801c2000000001414020001028001c200000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text47'),
+    i: '27555501012c03e803520000000055550100b403e8035200000000555501010f032a03520000000055550101480398035200000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text48'),
+    i: '2828280200d2037002260000000028280200b503e802260000000028280200b1033402260000000028280200f003e8022600000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text49'),
+    i: '290f0f02007802f8015e000000000f0f02005002ee015e000000000f0f0200520230015e000000000f0f0200540334015e00000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text50'),
+    i: '2a505001000003e803e800000000505001007803e803e80000000050500100f003e803e800000000505001003c03e803e800000000505001012c03e803e800000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
+  {
+    n: I18n.getLang('strip_lights_mood_text51'),
+    i: '2b32320200f0030c012c00000000323202011303e8012c0000000032320200b4019a012c00000000',
+    s: '',
+    t: 0,
+    e: false,
+  },
 ];
 
 const defMixColorSceneList: MixRemoteMoodInfo[] = [
@@ -1553,6 +1749,41 @@ const defMixColorSceneList: MixRemoteMoodInfo[] = [
     image: '',
     value: '002400000103034b4b0200d203e803e84b4b0200b403e803e84b4b02009603e803e8',
   },
+  {
+    name: I18n.getLang('strip_lights_mood_text45'),
+    image: '',
+    value: '002500000104031e1e0200a001f402261e1e0200c303e802261e1e02011303e802261e1e02007801900226',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text46'),
+    image: '',
+    value: '00260000010403141402001702e401c2141402002302d001c2141402001e016801c21414020001028001c2',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text47'),
+    image: '',
+    value: '00270000010403555501012c03e8035255550100b403e80352555501010f032a0352555501014803980352',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text48'),
+    image: '',
+    value: '0028000001040328280200d20370022628280200b503e8022628280200b10334022628280200f003e80226',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text49'),
+    image: '',
+    value: '002900000104030f0f02007802f8015e0f0f02005002ee015e0f0f0200520230015e0f0f0200540334015e',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text50'),
+    image: '',
+    value: '002a0000010503505001000003e803e8505001007803e803e850500100f003e803e8505001003c03e803e8505001012c03e803e8',
+  },
+  {
+    name: I18n.getLang('strip_lights_mood_text51'),
+    image: '',
+    value: '002b000001030332320200f0030c012c323202011303e8012c32320200b4019a012c',
+  },
 ];
 
 export type RecommendMood = {

package/src/newModules/mood/MoodPage.tsx

@@ -6,6 +6,7 @@ import {
   useDeviceId,
   useDeviceInfo,
   useFlagMode,
+  useIsPad,
   useMoods,
 } from '@ledvance/base/src/models/modules/NativePropsSlice';
 import { useReactive } from 'ahooks';
@@ -30,19 +31,14 @@ import I18n from '@ledvance/base/src/i18n';
 import ThemeType from '@ledvance/base/src/config/themeType'
 
 
-const { convertX: cx, width: screenWidth } = Utils.RatioUtils;
+const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 
 const MAX_MOOD_COUNT = 255;
-// --- 动态计算项目宽度 ---
-// 1. 定义网格的边距和列间距
-const GRID_HORIZONTAL_PADDING = cx(24);
+
+// --- 关键修改 1: 定义新的布局常量 ---
+const OPTIMAL_ITEM_WIDTH = cx(165); // 定义一个在所有设备上看起来都很好的“最佳宽度”
 const GRID_GAP = cx(16);
-const NUM_COLUMNS = 2;
-// 2. 计算每个 MoodItem 的宽度
-// (屏幕总宽度 - 两边的边距 - (列数 - 1) * 列间距) / 列数
-const ITEM_WIDTH =
-  (screenWidth - GRID_HORIZONTAL_PADDING * 2 - (NUM_COLUMNS - 1) * GRID_GAP) / NUM_COLUMNS;
 
 const MoodPage = (props: { theme?: ThemeType }) => {
   const params = useParams<MoodPageParams>();
@@ -60,6 +56,7 @@ const MoodPage = (props: { theme?: ThemeType }) => {
     isSupportSceneStatus: params.isSupportSceneStatus,
     sceneStatusType: SceneStatusType.Mood
   });
+  const isPad = useIsPad(); // 使用 isPad hook
 
   const state = useReactive<MoodPageState>({
     currentMood: undefined,
@@ -73,6 +70,28 @@ const MoodPage = (props: { theme?: ThemeType }) => {
     flag: Symbol(),
   });
 
+  // --- 关键修改 2: 基于 isPad 决定列数，并计算出 FlatList 自身所需的总宽度 ---
+  const { numColumns, flatListWidth } = useMemo(() => {
+    const cols = isPad ? 3 : 2;
+    const listWidth = cols * OPTIMAL_ITEM_WIDTH + (cols - 1) * GRID_GAP;
+    return {
+      numColumns: cols,
+      flatListWidth: listWidth,
+    };
+  }, [isPad]);
+
+  // --- 关键修改 3: 准备幽灵元素数据 ---
+  const gridData = useMemo(() => {
+    const data = state.filterMoods;
+    const numToPad = numColumns - (data.length % numColumns);
+    if (numToPad === numColumns) {
+      return data;
+    }
+    const ghostItems = Array.from({ length: numToPad }, (_, i) => ({ name: `ghost-${i}`, isGhost: true }));
+    return [...data, ...ghostItems];
+  }, [state.filterMoods, numColumns]);
+
+  // ... (其余所有业务逻辑和状态管理保持不变) ...
   const moodIds = useMemo(() => {
     // @ts-ignore
     const mainIds = map(params.isCeilingLight ? (state.originMoods.map(m => m.mainLamp) || []) : state.originMoods, 'id').filter(v => v !== undefined)
@@ -316,6 +335,9 @@ const MoodPage = (props: { theme?: ThemeType }) => {
     infoLine: {
       marginHorizontal: cx(24),
     },
+    rightIconView: {
+      flexDirection: 'row'
+    },
     addMoodPopover: {
       position: 'absolute',
       right: cx(60),
@@ -329,12 +351,16 @@ const MoodPage = (props: { theme?: ThemeType }) => {
       alignSelf: 'flex-start'
     },
     refresh: {
-      alignItems: 'flex-end',
-      paddingRight: cx(24)
+      paddingLeft: cx(24)
     },
     columnWrapperStyle: {
       justifyContent: 'space-between',
     },
+    // --- 关键修改 4: 新增列表容器样式 ---
+    listContainer: {
+      flex: 1,
+      alignItems: 'center', // 让内部的 FlatList 水平居中
+    },
   })
 
   return (
@@ -342,14 +368,37 @@ const MoodPage = (props: { theme?: ThemeType }) => {
       <Page
         backText={deviceInfo.name}
         headlineText={Strings.getLang('mood_overview_headline_text')}
-        headlineIcon={state.originMoods.length < MAX_MOOD_COUNT ? res.add : undefined}
-        onHeadlineIconClick={() => {
-          if (params.isStringLight || params.isStripLight) {
-            onAddMoodDialogItemClick(false, 1);
-          } else {
-            state.showAddMoodPopover = !state.showAddMoodPopover;
+        headlineIconContent={<View style={styles.rightIconView}>
+          <TouchableOpacity
+            style={styles.refresh}
+            onPress={() => {
+              showDialog({
+                method: 'confirm',
+                title: I18n.getLang('mood_resetbutton'),
+                subTitle: I18n.getLang('reset_mooddescription'),
+                onConfirm: async (_, { close }) => {
+                  close()
+                  await getRemoteMoodInfo(true)
+                }
+              })
+            }}
+          >
+            <Image source={{uri: res.ic_refresh}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+          </TouchableOpacity>
+          {state.originMoods.length < MAX_MOOD_COUNT && <TouchableOpacity
+              style={styles.refresh}
+              onPress={() => {
+                if (params.isStringLight || params.isStripLight) {
+                  onAddMoodDialogItemClick(false, 1);
+                } else {
+                  state.showAddMoodPopover = !state.showAddMoodPopover;
+                }
+              }}
+          >
+              <Image source={{uri: res.add}} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.brand }} />
+          </TouchableOpacity>
           }
-        }}
+        </View>}
         loading={state.loading}
       >
         {!(params.isStringLight || params.isStripLight) && <View style={styles.tagLine}>
@@ -369,22 +418,6 @@ const MoodPage = (props: { theme?: ThemeType }) => {
                 }}
             />
         </View>}
-        <TouchableOpacity
-          style={styles.refresh}
-          onPress={() => {
-            showDialog({
-              method: 'confirm',
-              title: I18n.getLang('mood_resetbutton'),
-              subTitle: I18n.getLang('reset_mooddescription'),
-              onConfirm: async (_, { close }) => {
-                close()
-                await getRemoteMoodInfo(true)
-              }
-            })
-          }}
-        >
-          <Image source={{uri: 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 && (
           <View style={styles.infoLine}>
@@ -397,44 +430,45 @@ const MoodPage = (props: { theme?: ThemeType }) => {
             <Spacer height={cx(6)} />
           </View>
         )}
-        <FlatList
-          data={state.filterMoods}
-          // 关键属性 1: 设置列数
-          numColumns={NUM_COLUMNS}
-          // 关键属性 2: 为 FlatList 提供一个唯一的 key，当列数改变时强制刷新
-          key={NUM_COLUMNS}
-          // 关键属性 3: 设置整个列表容器的样式，主要是左右边距
-          contentContainerStyle={{
-            paddingHorizontal: GRID_HORIZONTAL_PADDING,
-          }}
-          // 关键属性 4: 设置行包装器的样式，用于在列之间创建间距
-          columnWrapperStyle={styles.columnWrapperStyle}
-          renderItem={({ item }) => {
-            return (
-              <MoodItem
-                // 关键修改：通过 style prop 传入计算好的宽度
-                style={{ width: ITEM_WIDTH }}
-                enable={getItemEnable(item)}
-                isMix={!!(params.isMixLight || params.isCeilingLight)}
-                mood={item}
-                deviceTypeOption={params}
-                onPress={() => {
-                  navigationRoute(item.mainLamp.nodes.length === 1, 'edit', item);
-                }}
-                onSwitch={async _ => {
-                  state.loading = true;
-                  await modDeleteMood('set', item);
-                  updateFlagMode();
-                  state.loading = false;
-                }}
-              />
-            );
-          }}
-          ListHeaderComponent={() => <Spacer height={cx(10)} />}
-          ItemSeparatorComponent={() => <Spacer />}
-          ListFooterComponent={() => <Spacer />}
-          keyExtractor={item => `${item.name}`}
-        />
+
+        {/* --- 关键修改 5: 应用新的 FlatList 布局 --- */}
+        <View style={styles.listContainer}>
+          <FlatList
+            data={gridData}
+            numColumns={numColumns}
+            key={numColumns}
+            style={{ width: flatListWidth }}
+            columnWrapperStyle={styles.columnWrapperStyle}
+            renderItem={({ item }) => {
+              if (item.isGhost) {
+                return <View style={{ width: OPTIMAL_ITEM_WIDTH, marginBottom: cx(16) }} />;
+              }
+
+              return (
+                <MoodItem
+                  style={{ width: OPTIMAL_ITEM_WIDTH }}
+                  enable={getItemEnable(item)}
+                  isMix={!!(params.isMixLight || params.isCeilingLight)}
+                  mood={item}
+                  deviceTypeOption={params}
+                  onPress={() => {
+                    navigationRoute(item.mainLamp.nodes.length === 1, 'edit', item);
+                  }}
+                  onSwitch={async _ => {
+                    state.loading = true;
+                    await modDeleteMood('set', item);
+                    updateFlagMode();
+                    state.loading = false;
+                  }}
+                />
+              );
+            }}
+            ListHeaderComponent={() => <Spacer height={cx(10)} />}
+            ItemSeparatorComponent={() => <Spacer />}
+            ListFooterComponent={() => <Spacer />}
+            keyExtractor={item => `${item.name}`}
+          />
+        </View>
       </Page>
       <CustomListDialog
         show={state.showAddMoodPopover}
@@ -459,4 +493,4 @@ const MoodPage = (props: { theme?: ThemeType }) => {
   );
 };
 
-export default withTheme(MoodPage)
+export default withTheme(MoodPage)

package/src/newModules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -450,7 +450,7 @@ const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
           }}
         />
         <Spacer />
-        <Text style={{ ...styles.cardContainer, color: props.theme?.global.fontColor, fontSize: cx(14) }}>{loopText(state.timeSchedule.loops.split(''))}</Text>
+        <Text style={{ ...styles.cardContainer, color: props.theme?.global.fontColor, fontSize: cx(14) }}>{loopText(state.timeSchedule.loops.split(''), state.timeSchedule.time)}</Text>
         <Spacer height={cx(30)} />
 
         {/* Apply for */}