@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/modules/mood/DynamicMoodEditorPage.tsx

@@ -1,562 +1,562 @@
-import Page from '@ledvance/base/src/components/Page'
-import Strings from '@ledvance/base/src/i18n'
-import {StaticMoodEditorPageParams, StaticMoodEditorPageState} from './StaticMoodEditorPage'
-import {useNavigation, useRoute} from '@react-navigation/native'
-import {StackNavigationProp} from '@react-navigation/stack'
-import React, {useCallback, useEffect, useMemo} from 'react'
-import {useReactive} from 'ahooks'
-import {COLOUR, SCENE, useWorkMode, WHITE} from 'hooks/DeviceDpStateHooks'
-import {hsv2Hex, mapFloatToRange} from '@ledvance/base/src/utils'
-import {cctToColor} from '@ledvance/base/src/utils/cctUtils'
-import res from '@ledvance/base/src/res'
-import {cloneDeep, find, isEqual} from 'lodash'
-import {FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
-import TextField from '@ledvance/base/src/components/TextField'
-import Card from '@ledvance/base/src/components/Card'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
-import {Utils} from 'tuya-panel-kit'
-import LdvSlider from '@ledvance/base/src/components/ldvSlider'
-import {saveScene, useScene} from '../scene/SceneAction'
-import {isUVCFanDevice, useDeviceId, useFanMaxSpeed, useFlagMode} from '@ledvance/base/src/models/modules/NativePropsSlice'
-import TextButton from '@ledvance/base/src/components/TextButton'
-import {SceneNodeInfo, SceneNodeTransitionMode} from '../scene/SceneInfo'
-import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
-import {SelectPageData, SelectPageParams} from '../select/SelectPage'
-import {toSelectPage} from '../../navigation/tools'
-import FanAdjustView from '@ledvance/base/src/components/FanAdjustView'
-import {showDeleteMoodDialog} from './tools'
-import {ui_biz_routerKey} from '../../navigation/Routers'
-import { saveFlagMode } from 'modules/flags/FlagActions'
-const cx = Utils.RatioUtils.convertX
-interface DynamicMoodEditorPageState extends StaticMoodEditorPageState {
-  paintBucketSelected: boolean
-}
-const DynamicMoodEditorPage = () => {
-  const navigation = useNavigation<StackNavigationProp<any>>()
-  const routeParams = useRoute().params as StaticMoodEditorPageParams
-  const params = cloneDeep(routeParams)
-  const moduleParams = params.moduleParams
-  const deviceId = useDeviceId()
-  const [moodId, setScene] = useScene(moduleParams.sceneDpCode)
-  const [workMode, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
-  const [flagMode, setFlagMode] = useFlagMode()
-  const isUVCFan = isUVCFanDevice()
-  const state = useReactive<DynamicMoodEditorPageState>({
-    headline: '',
-    mood: params.currentMood,
-    currentNode: params.currentMood.nodes[params.currentMood.nodes.length - 1],
-    paintBucketSelected: false,
-  })
-
-  useEffect(() => {
-    state.headline = Strings.getLang(params.mode === 'add' ? 'add_new_dynamic_mood_headline_text' : 'edit_static_mood_headline_text')
-  }, [params.mode])
-  const getColorBlockColor = useCallback(() => {
-    const s = Math.round(mapFloatToRange(state.currentNode.s / 100, 30, 100))
-    if (moduleParams.isOnlyRGBLamp) {
-      return hsv2Hex(state.currentNode.h, s, 100)
-    }
-    if (moduleParams.isTWLamp) {
-      return cctToColor(state.currentNode.colorTemp.toFixed())
-    }
-    if (moduleParams.isDIMLamp) {
-      return '#fff'
-    }
-    if (state.currentNode.isColorNode) {
-      return hsv2Hex(state.currentNode.h, s, 100)
-    }
-    if (moduleParams.isSupportTemperature) {
-      return cctToColor(state.currentNode.colorTemp.toFixed())
-    }
-  }, [state.currentNode, state.currentNode.colorTemp])
-  const getNodeColor = useCallback((node: SceneNodeInfo) => {
-    if (node.isColorNode) {
-      const s = Math.round(mapFloatToRange(node.s / 100, 30, 100))
-      return hsv2Hex(node.h, s, 100)
-    }
-    return cctToColor(node.colorTemp.toFixed())
-  }, [])
-  const onPost = useCallback(async (isDelete: boolean) => {
-    const currentMood = {
-      id: params.currentMood.id,
-      name: state.mood.name,
-      image: state.mood.image,
-      fanEnable: state.mood.fanEnable,
-      fanSpeed: state.mood.fanSpeed,
-      nodes: state.mood.nodes,
-    }
-    const list = params.mode === 'add' ? [...params.moods, currentMood] :
-      isDelete ? params.moods.filter(mood => mood.id !== currentMood.id) :
-        params.moods.map(mood => {
-          return mood.id === currentMood.id ? currentMood : mood
-        })
-    const saveRes = await saveScene(
-      deviceId,
-      currentMood,
-      state.currentNode.transitionMode,
-      state.currentNode.transitionTime,
-      list,
-      moduleParams.isFanLamp!!,
-      isUVCFan
-    )
-    if (saveRes.success) {
-      if(flagMode?.flagMode){
-        saveFlagMode(deviceId, JSON.stringify({
-          flagMode: false,
-          flagId: undefined
-        })).then()
-        setFlagMode({
-          flagMode: false,
-          flagId: undefined
-        })
-      }
-      if (list.length > 0) {
-        if (isDelete && currentMood.id === moodId && workMode === SCENE) {
-          const setSceneRes = await setScene(
-            deviceId,
-            list[0],
-            moduleParams.sceneDpCode,
-            moduleParams.workModeDpCode,
-            moduleParams.switchLedDpCode,
-            !!moduleParams.isFanLamp,
-            isUVCFan
-          )
-          console.log('设置修改后的场景结果', setSceneRes)
-        } else if (!isDelete) {
-          const setSceneRes = await setScene(
-            deviceId,
-            currentMood,
-            moduleParams.sceneDpCode,
-            moduleParams.workModeDpCode,
-            moduleParams.switchLedDpCode,
-            !!moduleParams.isFanLamp,
-            isUVCFan
-          )
-          console.log('设置修改后的场景结果', setSceneRes)
-        }
-        
-      } else {
-        await setWorkMode(moduleParams.isOnlyRGBLamp ? COLOUR : WHITE)
-        console.log('Mood被清空，将work_mode设置成white')
-      }
-    }
-    navigation.navigate(ui_biz_routerKey.ui_biz_mood)
-    routeParams.onSave()
-  }, [])
-
-  const nameRepeat = useMemo(() => {
-    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
-  }, [state.mood.name])
-
-  const checkMoodChanged = useMemo(() =>{
-    return isEqual(state.mood, params.currentMood)
-  }, [JSON.stringify(state.mood), params.currentMood])
-
-  const canSaveMoodData = useMemo(() =>{
-    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
-  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
-
-  return (
-    <Page
-      backText={Strings.getLang('mesh_device_detail_mode')}
-      showBackDialog={!checkMoodChanged}
-      backDialogTitle={
-        Strings.getLang(params.mode === 'add' ?
-          'string_light_pp_dialog_sm_add_headline_c' :
-          'manage_user_unsaved_changes_dialog_headline')
-      }
-      backDialogContent={
-        Strings.getLang(params.mode === 'add' ?
-          'strip_light_static_mood_add_step_2_dialog_text' :
-          'strip_light_static_mood_editor_step_2_dialog_text')
-      }
-      headlineText={state.headline}
-      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={async () => {
-        if (!canSaveMoodData) return;
-        await onPost(false)
-      }}>
-      <ScrollView
-        style={{flex: 1}}
-        nestedScrollEnabled={true}>
-        <View style={styles.root}>
-          <TextField
-            style={styles.name}
-            value={state.mood.name}
-            placeholder={Strings.getLang('edit_static_mood_inputfield_topic_text')}
-            onChangeText={text => {
-              state.mood.name = text
-            }}
-            maxLength={33}
-            showError={state.mood.name.length > 32 || nameRepeat}
-            tipColor={nameRepeat ? '#f00' : undefined}
-            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
-            errorText={Strings.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')}/>
-          <Card style={styles.adjustCard}>
-            <Spacer height={cx(16)}/>
-            <View style={styles.lightLine}>
-              <Text style={styles.light}>
-                {Strings.getLang('light_sources_tile_tw_lighting_headline')}
-              </Text>
-            </View>
-            <Spacer height={cx(18)}/>
-            <TextFieldStyleButton
-              style={styles.transitionMode}
-              text={getTransitionModeString(state.mood.nodes[0].transitionMode)}
-              placeholder={Strings.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
-              onPress={() => {
-                const paramsSelect: SelectPageParams<SceneNodeTransitionMode> = {
-                  title: Strings.getLang('add_new_dynamic_mood_color_changing_mode_headline'),
-                  data: [
-                    createSelectPageData(state.mood.nodes[0].transitionMode, SceneNodeTransitionMode.Gradient),
-                    createSelectPageData(state.mood.nodes[0].transitionMode, SceneNodeTransitionMode.Jump),
-                  ],
-                  onSelect: selectPageData => {
-                    state.mood.nodes.forEach(node => {
-                      node.transitionMode = selectPageData.value
-                    })
-                  },
-                }
-                toSelectPage(navigation, paramsSelect)
-              }}/>
-            <Spacer height={cx(10)}/>
-            <LdvSlider
-              title={Strings.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
-              value={state.mood.nodes[0].transitionTime}
-              onValueChange={value => {
-                state.mood.nodes.forEach(node => {
-                  node.transitionTime = value
-                  node.switchingInterval = value
-                })
-              }}
-              onSlidingComplete={value => {
-                state.mood.nodes.forEach(node => {
-                  node.transitionTime = value
-                  node.switchingInterval = value
-                })
-              }}/>
-            <Spacer height={cx(16)}/>
-            <View style={styles.nodesAdjust}>
-              <View style={styles.adjustButtons}>
-                <TouchableOpacity
-                  onPress={() => {
-                    state.paintBucketSelected = true
-                  }}>
-                  <Image
-                    style={[styles.adjustButton, {tintColor: state.paintBucketSelected ? '#f60' : '#666'}]}
-                    source={res.ic_paint_bucket}/>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={() => {
-                    state.paintBucketSelected = false
-                  }}>
-                  <Image
-                    style={[styles.adjustButton, {tintColor: state.paintBucketSelected ? '#666' : '#f60'}]}
-                    source={res.ic_colorize}/>
-                </TouchableOpacity>
-              </View>
-              <FlatList
-                data={state.mood.nodes}
-                style={styles.nodeList}
-                renderItem={({item, index}) => {
-                  return (
-                    <View style={styles.nodeItem}>
-                      <TouchableOpacity
-                        style={[
-                          styles.nodeBlock,
-                          {
-                            backgroundColor: getNodeColor(item),
-                          },
-                        ]}
-                        onPress={() => {
-                          state.currentNode = item
-                        }}/>
-                      <TouchableOpacity
-                        style={styles.nodeDeleteBtn}
-                        disabled={state.mood.nodes.length < 3}
-                        onPress={() => {
-                          state.mood.nodes.splice(index, 1)
-                          state.currentNode = state.mood.nodes[state.mood.nodes.length - 1]
-                        }}>
-                        <Image
-                          style={[
-                            styles.nodeDeleteIcon,
-                            {
-                              tintColor: state.mood.nodes.length < 3 ? '#ccc' : '#666',
-                            },
-                          ]}
-                          source={res.ic_mood_del}/>
-                      </TouchableOpacity>
-                    </View>
-                  )
-                }}
-                keyExtractor={(_, index) => `${index}`}
-                ItemSeparatorComponent={() => <Spacer height={cx(12)}/>}
-                ListFooterComponent={() => {
-                  if (state.mood.nodes.length >= 8) {
-                    return (<></>)
-                  }
-                  return (
-                    <View>
-                      <Spacer height={cx(12)}/>
-                      <TouchableOpacity
-                        style={styles.nodeAddBtn}
-                        onPress={() => {
-                          const node = {
-                            ...state.currentNode,
-                          }
-                          state.mood.nodes.push(node)
-                          state.currentNode = node
-                        }}>
-                        <Image
-                          style={{
-                            width: cx(18),
-                            height: cx(18),
-                            tintColor: '#000',
-                          }}
-                          source={{uri: res.add}}/>
-                      </TouchableOpacity>
-                    </View>
-                  )
-                }}/>
-            </View>
-            <Spacer/>
-            <View style={styles.lightLine}>
-              <Text style={styles.light}>
-                {Strings.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
-              </Text>
-              <View style={[styles.preview, {backgroundColor: getColorBlockColor()}]}/>
-            </View>
-            <Spacer/>
-            <LampAdjustView
-              isSupportColor={moduleParams.isSupportColor}
-              isSupportBrightness={moduleParams.isSupportBrightness}
-              isSupportTemperature={moduleParams.isSupportTemperature}
-              isColorMode={state.currentNode.isColorNode}
-              reserveSV={true}
-              setIsColorMode={isColorMode => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = isColorMode
-                  })
-                } else {
-                  state.currentNode.isColorNode = isColorMode
-                }
-              }}
-              h={state.currentNode.h}
-              s={state.currentNode.s}
-              v={state.currentNode.v}
-              onHSVChange={(h, s, v) => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = true
-                    node.h = h
-                    node.s = s
-                    node.v = v
-                  })
-                } else {
-                  state.currentNode.h = h
-                  state.currentNode.s = s
-                  state.currentNode.v = v
-                }
-              }}
-              onHSVChangeComplete={(h, s, v) => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = true
-                    node.h = h
-                    node.s = s
-                    node.v = v
-                  })
-                } else {
-                  state.currentNode.h = h
-                  state.currentNode.s = s
-                  state.currentNode.v = v
-                }
-              }}
-              colorTemp={state.currentNode.colorTemp}
-              brightness={state.currentNode.brightness}
-              onCCTChange={cct => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = false
-                    node.colorTemp = cct
-                  })
-                } else {
-                  state.currentNode.colorTemp = cct
-                }
-              }}
-              onCCTChangeComplete={cct => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = false
-                    node.colorTemp = cct
-                  })
-                } else {
-                  state.currentNode.colorTemp = cct
-                }
-              }}
-              onBrightnessChange={brightness => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = false
-                    node.brightness = brightness
-                  })
-                } else {
-                  state.currentNode.brightness = brightness
-                }
-              }}
-              onBrightnessChangeComplete={brightness => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = false
-                    node.brightness = brightness
-                  })
-                } else {
-                  state.currentNode.brightness = brightness
-                }
-              }}/>
-          </Card>
-          <Spacer/>
-          {moduleParams.isFanLamp &&
-              <FanAdjustView
-                  fanEnable={!!state.mood.fanEnable}
-                  fanSpeed={state.mood.fanSpeed || 1}
-                  maxFanSpeed={useFanMaxSpeed()}
-                  onFanSwitch={fanEnable => {
-                    state.mood.fanEnable = fanEnable
-                  }}
-                  onFanSpeedChange={fanSpeed => {
-                    state.mood.fanSpeed = fanSpeed
-                  }}
-                  onFanSpeedChangeComplete={fanSpeed => {
-                    state.mood.fanSpeed = fanSpeed
-                  }}
-                  style={styles.fanAdjustCard}/>}
-          {params.mode === 'edit' &&
-              <View style={{marginTop: cx(20), marginHorizontal: cx(24)}}>
-                  <TextButton
-                      style={styles.deleteBtn}
-                      textStyle={styles.deleteBtnText}
-                      text={Strings.getLang('edit_static_mood_button_delete_text')}
-                      onPress={() => {
-                        showDeleteMoodDialog(async (_, {close}) => {
-                          close()
-                          await onPost(true)
-                        })
-                      }}/>
-              </View>}
-          <Spacer/>
-        </View>
-      </ScrollView>
-    </Page>
-  )
-}
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginVertical: cx(12),
-    marginHorizontal: cx(24),
-  },
-  fanAdjustCard: {
-    marginHorizontal: cx(24),
-  },
-  lightLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-  },
-  light: {
-    color: '#000',
-    fontSize: cx(18),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  transitionMode: {
-    marginHorizontal: cx(16),
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  nodesAdjust: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  adjustButtons: {
-    width: cx(44),
-    marginStart: cx(16),
-  },
-  adjustButton: {
-    width: cx(44),
-    height: cx(44),
-  },
-  nodeList: {
-    flex: 1,
-    marginHorizontal: cx(16),
-  },
-  nodeItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nodeBlock: {
-    flex: 1,
-    height: cx(40),
-    borderRadius: cx(8),
-    borderWidth: 1,
-    borderColor: '#ccc'
-  },
-  nodeDeleteBtn: {
-    width: cx(24),
-    height: cx(30),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  nodeDeleteIcon: {
-    width: cx(16),
-    height: cx(16),
-  },
-  nodeAddBtn: {
-    height: cx(40),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginEnd: cx(26),
-    borderRadius: cx(8),
-    borderWidth: cx(1),
-    borderStyle: 'dashed',
-    borderColor: '#666',
-    backgroundColor: '#f6f6f6',
-  },
-  deleteBtn: {
-    width: '100%',
-    height: cx(50),
-    backgroundColor: '#666',
-    borderRadius: cx(8),
-  },
-  deleteBtnText: {
-    color: '#fff',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-})
-export default DynamicMoodEditorPage
-export function getTransitionModeString(transitionMode: SceneNodeTransitionMode): string {
-  if (transitionMode === SceneNodeTransitionMode.Jump) {
-    return Strings.getLang('other_lights_modes_jump_text')
-  }
-  return Strings.getLang('other_lights_modes_gradient_text')
-}
-export function createSelectPageData(transitionMode: SceneNodeTransitionMode, mode: SceneNodeTransitionMode): SelectPageData<SceneNodeTransitionMode> {
-  return {
-    text: getTransitionModeString(mode),
-    selected: transitionMode === mode,
-    value: mode,
-  }
+import Page from '@ledvance/base/src/components/Page'
+import Strings from '@ledvance/base/src/i18n'
+import {StaticMoodEditorPageParams, StaticMoodEditorPageState} from './StaticMoodEditorPage'
+import {useNavigation, useRoute} from '@react-navigation/native'
+import {StackNavigationProp} from '@react-navigation/stack'
+import React, {useCallback, useEffect, useMemo} from 'react'
+import {useReactive} from 'ahooks'
+import {COLOUR, SCENE, useWorkMode, WHITE} from 'hooks/DeviceDpStateHooks'
+import {hsv2Hex, mapFloatToRange} from '@ledvance/base/src/utils'
+import {cctToColor} from '@ledvance/base/src/utils/cctUtils'
+import res from '@ledvance/base/src/res'
+import {cloneDeep, find, isEqual} from 'lodash'
+import {FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import TextField from '@ledvance/base/src/components/TextField'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
+import {Utils} from 'tuya-panel-kit'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import {saveScene, useScene} from '../scene/SceneAction'
+import {isUVCFanDevice, useDeviceId, useFanMaxSpeed, useFlagMode} from '@ledvance/base/src/models/modules/NativePropsSlice'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import {SceneNodeInfo, SceneNodeTransitionMode} from '../scene/SceneInfo'
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
+import {SelectPageData, SelectPageParams} from '../select/SelectPage'
+import {toSelectPage} from '../../navigation/tools'
+import FanAdjustView from '@ledvance/base/src/components/FanAdjustView'
+import {showDeleteMoodDialog} from './tools'
+import {ui_biz_routerKey} from '../../navigation/Routers'
+import { saveFlagMode } from 'modules/flags/FlagActions'
+const cx = Utils.RatioUtils.convertX
+interface DynamicMoodEditorPageState extends StaticMoodEditorPageState {
+  paintBucketSelected: boolean
+}
+const DynamicMoodEditorPage = () => {
+  const navigation = useNavigation<StackNavigationProp<any>>()
+  const routeParams = useRoute().params as StaticMoodEditorPageParams
+  const params = cloneDeep(routeParams)
+  const moduleParams = params.moduleParams
+  const deviceId = useDeviceId()
+  const [moodId, setScene] = useScene(moduleParams.sceneDpCode)
+  const [workMode, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
+  const [flagMode, setFlagMode] = useFlagMode()
+  const isUVCFan = isUVCFanDevice()
+  const state = useReactive<DynamicMoodEditorPageState>({
+    headline: '',
+    mood: params.currentMood,
+    currentNode: params.currentMood.nodes[params.currentMood.nodes.length - 1],
+    paintBucketSelected: false,
+  })
+
+  useEffect(() => {
+    state.headline = Strings.getLang(params.mode === 'add' ? 'add_new_dynamic_mood_headline_text' : 'edit_static_mood_headline_text')
+  }, [params.mode])
+  const getColorBlockColor = useCallback(() => {
+    const s = Math.round(mapFloatToRange(state.currentNode.s / 100, 30, 100))
+    if (moduleParams.isOnlyRGBLamp) {
+      return hsv2Hex(state.currentNode.h, s, 100)
+    }
+    if (moduleParams.isTWLamp) {
+      return cctToColor(state.currentNode.colorTemp.toFixed())
+    }
+    if (moduleParams.isDIMLamp) {
+      return '#fff'
+    }
+    if (state.currentNode.isColorNode) {
+      return hsv2Hex(state.currentNode.h, s, 100)
+    }
+    if (moduleParams.isSupportTemperature) {
+      return cctToColor(state.currentNode.colorTemp.toFixed())
+    }
+  }, [state.currentNode, state.currentNode.colorTemp])
+  const getNodeColor = useCallback((node: SceneNodeInfo) => {
+    if (node.isColorNode) {
+      const s = Math.round(mapFloatToRange(node.s / 100, 30, 100))
+      return hsv2Hex(node.h, s, 100)
+    }
+    return cctToColor(node.colorTemp.toFixed())
+  }, [])
+  const onPost = useCallback(async (isDelete: boolean) => {
+    const currentMood = {
+      id: params.currentMood.id,
+      name: state.mood.name,
+      image: state.mood.image,
+      fanEnable: state.mood.fanEnable,
+      fanSpeed: state.mood.fanSpeed,
+      nodes: state.mood.nodes,
+    }
+    const list = params.mode === 'add' ? [...params.moods, currentMood] :
+      isDelete ? params.moods.filter(mood => mood.id !== currentMood.id) :
+        params.moods.map(mood => {
+          return mood.id === currentMood.id ? currentMood : mood
+        })
+    const saveRes = await saveScene(
+      deviceId,
+      currentMood,
+      state.currentNode.transitionMode,
+      state.currentNode.transitionTime,
+      list,
+      moduleParams.isFanLamp!!,
+      isUVCFan
+    )
+    if (saveRes.success) {
+      if(flagMode?.flagMode){
+        saveFlagMode(deviceId, JSON.stringify({
+          flagMode: false,
+          flagId: undefined
+        })).then()
+        setFlagMode({
+          flagMode: false,
+          flagId: undefined
+        })
+      }
+      if (list.length > 0) {
+        if (isDelete && currentMood.id === moodId && workMode === SCENE) {
+          const setSceneRes = await setScene(
+            deviceId,
+            list[0],
+            moduleParams.sceneDpCode,
+            moduleParams.workModeDpCode,
+            moduleParams.switchLedDpCode,
+            !!moduleParams.isFanLamp,
+            isUVCFan
+          )
+          console.log('设置修改后的场景结果', setSceneRes)
+        } else if (!isDelete) {
+          const setSceneRes = await setScene(
+            deviceId,
+            currentMood,
+            moduleParams.sceneDpCode,
+            moduleParams.workModeDpCode,
+            moduleParams.switchLedDpCode,
+            !!moduleParams.isFanLamp,
+            isUVCFan
+          )
+          console.log('设置修改后的场景结果', setSceneRes)
+        }
+        
+      } else {
+        await setWorkMode(moduleParams.isOnlyRGBLamp ? COLOUR : WHITE)
+        console.log('Mood被清空，将work_mode设置成white')
+      }
+    }
+    navigation.navigate(ui_biz_routerKey.ui_biz_mood)
+    routeParams.onSave()
+  }, [])
+
+  const nameRepeat = useMemo(() => {
+    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
+  }, [state.mood.name])
+
+  const checkMoodChanged = useMemo(() =>{
+    return isEqual(state.mood, params.currentMood)
+  }, [JSON.stringify(state.mood), params.currentMood])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
+  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
+
+  return (
+    <Page
+      backText={Strings.getLang('mesh_device_detail_mode')}
+      showBackDialog={!checkMoodChanged}
+      backDialogTitle={
+        Strings.getLang(params.mode === 'add' ?
+          'string_light_pp_dialog_sm_add_headline_c' :
+          'manage_user_unsaved_changes_dialog_headline')
+      }
+      backDialogContent={
+        Strings.getLang(params.mode === 'add' ?
+          'strip_light_static_mood_add_step_2_dialog_text' :
+          'strip_light_static_mood_editor_step_2_dialog_text')
+      }
+      headlineText={state.headline}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        if (!canSaveMoodData) return;
+        await onPost(false)
+      }}>
+      <ScrollView
+        style={{flex: 1}}
+        nestedScrollEnabled={true}>
+        <View style={styles.root}>
+          <TextField
+            style={styles.name}
+            value={state.mood.name}
+            placeholder={Strings.getLang('edit_static_mood_inputfield_topic_text')}
+            onChangeText={text => {
+              state.mood.name = text
+            }}
+            maxLength={33}
+            showError={state.mood.name.length > 32 || nameRepeat}
+            tipColor={nameRepeat ? '#f00' : undefined}
+            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
+            errorText={Strings.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')}/>
+          <Card style={styles.adjustCard}>
+            <Spacer height={cx(16)}/>
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {Strings.getLang('light_sources_tile_tw_lighting_headline')}
+              </Text>
+            </View>
+            <Spacer height={cx(18)}/>
+            <TextFieldStyleButton
+              style={styles.transitionMode}
+              text={getTransitionModeString(state.mood.nodes[0].transitionMode)}
+              placeholder={Strings.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
+              onPress={() => {
+                const paramsSelect: SelectPageParams<SceneNodeTransitionMode> = {
+                  title: Strings.getLang('add_new_dynamic_mood_color_changing_mode_headline'),
+                  data: [
+                    createSelectPageData(state.mood.nodes[0].transitionMode, SceneNodeTransitionMode.Gradient),
+                    createSelectPageData(state.mood.nodes[0].transitionMode, SceneNodeTransitionMode.Jump),
+                  ],
+                  onSelect: selectPageData => {
+                    state.mood.nodes.forEach(node => {
+                      node.transitionMode = selectPageData.value
+                    })
+                  },
+                }
+                toSelectPage(navigation, paramsSelect)
+              }}/>
+            <Spacer height={cx(10)}/>
+            <LdvSlider
+              title={Strings.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+              value={state.mood.nodes[0].transitionTime}
+              onValueChange={value => {
+                state.mood.nodes.forEach(node => {
+                  node.transitionTime = value
+                  node.switchingInterval = value
+                })
+              }}
+              onSlidingComplete={value => {
+                state.mood.nodes.forEach(node => {
+                  node.transitionTime = value
+                  node.switchingInterval = value
+                })
+              }}/>
+            <Spacer height={cx(16)}/>
+            <View style={styles.nodesAdjust}>
+              <View style={styles.adjustButtons}>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.paintBucketSelected = true
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, {tintColor: state.paintBucketSelected ? '#f60' : '#666'}]}
+                    source={res.ic_paint_bucket}/>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.paintBucketSelected = false
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, {tintColor: state.paintBucketSelected ? '#666' : '#f60'}]}
+                    source={res.ic_colorize}/>
+                </TouchableOpacity>
+              </View>
+              <FlatList
+                data={state.mood.nodes}
+                style={styles.nodeList}
+                renderItem={({item, index}) => {
+                  return (
+                    <View style={styles.nodeItem}>
+                      <TouchableOpacity
+                        style={[
+                          styles.nodeBlock,
+                          {
+                            backgroundColor: getNodeColor(item),
+                          },
+                        ]}
+                        onPress={() => {
+                          state.currentNode = item
+                        }}/>
+                      <TouchableOpacity
+                        style={styles.nodeDeleteBtn}
+                        disabled={state.mood.nodes.length < 3}
+                        onPress={() => {
+                          state.mood.nodes.splice(index, 1)
+                          state.currentNode = state.mood.nodes[state.mood.nodes.length - 1]
+                        }}>
+                        <Image
+                          style={[
+                            styles.nodeDeleteIcon,
+                            {
+                              tintColor: state.mood.nodes.length < 3 ? '#ccc' : '#666',
+                            },
+                          ]}
+                          source={res.ic_mood_del}/>
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }}
+                keyExtractor={(_, index) => `${index}`}
+                ItemSeparatorComponent={() => <Spacer height={cx(12)}/>}
+                ListFooterComponent={() => {
+                  if (state.mood.nodes.length >= 8) {
+                    return (<></>)
+                  }
+                  return (
+                    <View>
+                      <Spacer height={cx(12)}/>
+                      <TouchableOpacity
+                        style={styles.nodeAddBtn}
+                        onPress={() => {
+                          const node = {
+                            ...state.currentNode,
+                          }
+                          state.mood.nodes.push(node)
+                          state.currentNode = node
+                        }}>
+                        <Image
+                          style={{
+                            width: cx(18),
+                            height: cx(18),
+                            tintColor: '#000',
+                          }}
+                          source={{uri: res.add}}/>
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }}/>
+            </View>
+            <Spacer/>
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {Strings.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
+              </Text>
+              <View style={[styles.preview, {backgroundColor: getColorBlockColor()}]}/>
+            </View>
+            <Spacer/>
+            <LampAdjustView
+              isSupportColor={moduleParams.isSupportColor}
+              isSupportBrightness={moduleParams.isSupportBrightness}
+              isSupportTemperature={moduleParams.isSupportTemperature}
+              isColorMode={state.currentNode.isColorNode}
+              reserveSV={true}
+              setIsColorMode={isColorMode => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = isColorMode
+                  })
+                } else {
+                  state.currentNode.isColorNode = isColorMode
+                }
+              }}
+              h={state.currentNode.h}
+              s={state.currentNode.s}
+              v={state.currentNode.v}
+              onHSVChange={(h, s, v) => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = true
+                    node.h = h
+                    node.s = s
+                    node.v = v
+                  })
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                }
+              }}
+              onHSVChangeComplete={(h, s, v) => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = true
+                    node.h = h
+                    node.s = s
+                    node.v = v
+                  })
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                }
+              }}
+              colorTemp={state.currentNode.colorTemp}
+              brightness={state.currentNode.brightness}
+              onCCTChange={cct => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.colorTemp = cct
+                  })
+                } else {
+                  state.currentNode.colorTemp = cct
+                }
+              }}
+              onCCTChangeComplete={cct => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.colorTemp = cct
+                  })
+                } else {
+                  state.currentNode.colorTemp = cct
+                }
+              }}
+              onBrightnessChange={brightness => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.brightness = brightness
+                  })
+                } else {
+                  state.currentNode.brightness = brightness
+                }
+              }}
+              onBrightnessChangeComplete={brightness => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.brightness = brightness
+                  })
+                } else {
+                  state.currentNode.brightness = brightness
+                }
+              }}/>
+          </Card>
+          <Spacer/>
+          {moduleParams.isFanLamp &&
+              <FanAdjustView
+                  fanEnable={!!state.mood.fanEnable}
+                  fanSpeed={state.mood.fanSpeed || 1}
+                  maxFanSpeed={useFanMaxSpeed()}
+                  onFanSwitch={fanEnable => {
+                    state.mood.fanEnable = fanEnable
+                  }}
+                  onFanSpeedChange={fanSpeed => {
+                    state.mood.fanSpeed = fanSpeed
+                  }}
+                  onFanSpeedChangeComplete={fanSpeed => {
+                    state.mood.fanSpeed = fanSpeed
+                  }}
+                  style={styles.fanAdjustCard}/>}
+          {params.mode === 'edit' &&
+              <View style={{marginTop: cx(20), marginHorizontal: cx(24)}}>
+                  <TextButton
+                      style={styles.deleteBtn}
+                      textStyle={styles.deleteBtnText}
+                      text={Strings.getLang('edit_static_mood_button_delete_text')}
+                      onPress={() => {
+                        showDeleteMoodDialog(async (_, {close}) => {
+                          close()
+                          await onPost(true)
+                        })
+                      }}/>
+              </View>}
+          <Spacer/>
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  name: {
+    marginHorizontal: cx(24),
+  },
+  adjustCard: {
+    marginVertical: cx(12),
+    marginHorizontal: cx(24),
+  },
+  fanAdjustCard: {
+    marginHorizontal: cx(24),
+  },
+  lightLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(16),
+  },
+  light: {
+    color: '#000',
+    fontSize: cx(18),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  transitionMode: {
+    marginHorizontal: cx(16),
+  },
+  preview: {
+    width: cx(20),
+    height: cx(20),
+    marginStart: cx(12),
+    borderRadius: cx(4),
+  },
+  nodesAdjust: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  adjustButtons: {
+    width: cx(44),
+    marginStart: cx(16),
+  },
+  adjustButton: {
+    width: cx(44),
+    height: cx(44),
+  },
+  nodeList: {
+    flex: 1,
+    marginHorizontal: cx(16),
+  },
+  nodeItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  nodeBlock: {
+    flex: 1,
+    height: cx(40),
+    borderRadius: cx(8),
+    borderWidth: 1,
+    borderColor: '#ccc'
+  },
+  nodeDeleteBtn: {
+    width: cx(24),
+    height: cx(30),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  nodeDeleteIcon: {
+    width: cx(16),
+    height: cx(16),
+  },
+  nodeAddBtn: {
+    height: cx(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginEnd: cx(26),
+    borderRadius: cx(8),
+    borderWidth: cx(1),
+    borderStyle: 'dashed',
+    borderColor: '#666',
+    backgroundColor: '#f6f6f6',
+  },
+  deleteBtn: {
+    width: '100%',
+    height: cx(50),
+    backgroundColor: '#666',
+    borderRadius: cx(8),
+  },
+  deleteBtnText: {
+    color: '#fff',
+    fontSize: cx(16),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+})
+export default DynamicMoodEditorPage
+export function getTransitionModeString(transitionMode: SceneNodeTransitionMode): string {
+  if (transitionMode === SceneNodeTransitionMode.Jump) {
+    return Strings.getLang('other_lights_modes_jump_text')
+  }
+  return Strings.getLang('other_lights_modes_gradient_text')
+}
+export function createSelectPageData(transitionMode: SceneNodeTransitionMode, mode: SceneNodeTransitionMode): SelectPageData<SceneNodeTransitionMode> {
+  return {
+    text: getTransitionModeString(mode),
+    selected: transitionMode === mode,
+    value: mode,
+  }
 }