@ledvance/ui-biz-bundle 1.0.71 → 1.0.72

package/package.json

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

package/src/modules/mood/FantasyMood.tsx

@@ -0,0 +1,184 @@
+import React, { useCallback, useEffect } from 'react'
+import Page from '@ledvance/base/src/components/Page'
+import { Utils } from 'tuya-panel-kit'
+import { StripScenePageUIState, StripSceneUIState } from '../scene/SceneInfo'
+import { getRemoteFantasyScene, useFantasyScene } from '../scene/SceneAction'
+import { useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import { useReactive } from 'ahooks'
+import Strings from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import { FlatList } from 'react-native'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import FantasyMoodItem from './FantasyMoodItem'
+import { useNavigation, useRoute } from '@react-navigation/core'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { stripDp2Obj } from '../scene/SceneAction'
+import { Buffer } from 'buffer'
+import { NativeApi } from '@ledvance/base/src/api/native'
+const cx = Utils.RatioUtils.convertX
+
+interface MoodPageUIState extends StripScenePageUIState {
+  staticTagChecked: boolean
+  dynamicTagChecked: boolean
+  originScene: StripSceneUIState[]
+  filteredMoods: StripSceneUIState[]
+  loading: boolean
+}
+
+export interface FantasyMoodPageProps {
+  featureId: string
+  switchLedDpCode: string
+  sceneDpCode: string
+  workModeDpCode: string
+  isStringLight?: boolean
+  isStripLight?: boolean
+  isSupportColor: boolean
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+}
+
+
+const FantasyMoodPage = () => {
+  const routeParams = useRoute().params as FantasyMoodPageProps
+  const params: FantasyMoodPageProps = {
+    ...routeParams,
+  }
+  const [sceneId, setScene] = useFantasyScene(params.sceneDpCode, params.workModeDpCode)
+  const deviceInfo = useDeviceInfo()
+  const navigation = useNavigation()
+
+  const state = useReactive<MoodPageUIState>({
+    currentScene: undefined,
+    staticTagChecked: true,
+    dynamicTagChecked: true,
+    scenes: [],
+    flag: Symbol(),
+    originScene: [],
+    filteredMoods: [],
+    loading: false,
+  })
+
+  useEffect(() =>{
+    console.log(stripDp2Obj(Buffer.from('AdgQMjIAAABkAABkAGQ8','base64').toString('hex')), '开合')
+    console.log(stripDp2Obj(Buffer.from('AdcPMjIAAABkAABkAGQ8','base64').toString('hex')), '乱闪')
+    console.log(stripDp2Obj(Buffer.from('AdYOMjIAAABkAABkAGQ8','base64').toString('hex')), '穿梭')
+    console.log(stripDp2Obj(Buffer.from('AdUNMjIAAABkAABkAGQ8','base64').toString('hex')), '反弹')
+    console.log(stripDp2Obj(Buffer.from('AdQMMjIAAABkAABkAGQ8','base64').toString('hex')), '闪现')
+    console.log(stripDp2Obj(Buffer.from('AdMJMjIAAABkAABkAGQ8','base64').toString('hex')), '飘动')
+    console.log(stripDp2Obj(Buffer.from('AdIIMjIAAABkAABkAGQ8','base64').toString('hex')), '追光')
+    console.log(stripDp2Obj(Buffer.from('AdEHMjIAAABkAABkAGQ8','base64').toString('hex')), '飘落')
+    console.log(stripDp2Obj(Buffer.from('AdAGMjIAAABkAABkAGQ8','base64').toString('hex')), '堆积')
+    console.log(stripDp2Obj(Buffer.from('Ac8FMjIAAABkAABkAGQ8','base64').toString('hex')), '流星')
+    console.log(stripDp2Obj(Buffer.from('Ac4LMjIAAABkAABkAGQ8','base64').toString('hex')), '彩虹')
+    console.log(stripDp2Obj(Buffer.from('Ac0KMjIAAABkAABkAGQ8','base64').toString('hex')), '流水')
+    console.log(stripDp2Obj(Buffer.from('AcwEMjIAAABkAABkAGQ8','base64').toString('hex')), '闪烁')
+    console.log(stripDp2Obj(Buffer.from('AcsDMjIAAABkAABkAGQ8','base64').toString('hex')), '呼吸2')
+    console.log(stripDp2Obj(Buffer.from('AcoCMjIAAABkAABkAGQ8','base64').toString('hex')), '呼吸1')
+    console.log(stripDp2Obj(Buffer.from('AckBMjIAAABkAABkAGQ8','base64').toString('hex')), '跳变')
+  }, [])
+
+  const getSceneList = useCallback(async (currentSceneId: number) => {
+    NativeApi.log(`getScene id ${currentSceneId}`)
+    const res = await getRemoteFantasyScene(routeParams.featureId, deviceInfo.devId, { isStringLight: routeParams.isStringLight, isStripLight: routeParams.isStripLight })
+    if (res.success) {
+      state.scenes = res.data || []
+      state.currentScene = state.scenes.find(scene => scene.id === currentSceneId)
+    }
+  }, [])
+
+  // useUpdateEffect(() => {
+  //   state.currentScene = state.scenes.find(scene => scene.id === sceneId)
+  // }, [sceneId])
+
+  useEffect(() => {
+    getSceneList(sceneId).then()
+  }, [state.flag, sceneId])
+
+  const navigateToEdit = useCallback((mode: 'edit' | 'add', currentMood?: StripSceneUIState) => {
+    navigation.navigate(ui_biz_routerKey.ui_biz_fantasy_mood_edit, {
+      mode,
+      currentMood,
+      moods: state.scenes,
+      moduleParams: params,
+      onSave: () => {
+        state.flag = Symbol()
+      },
+    })
+  }, [])
+
+  const getSwitchEnable = useCallback((id: number) =>{
+    return state.currentScene?.id === id
+  }, [state.currentScene?.id])
+  
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        headlineText={Strings.getLang('mood_overview_headline_text')}
+        headlineIcon={res.add}
+        onHeadlineIconClick={() => {
+          navigateToEdit('add', newScene)
+        }}
+        loading={state.loading}>
+        <Spacer height={cx(10)} />
+        <FlatList
+          data={state.scenes}
+          renderItem={({ item }) => {
+            return (
+              <FantasyMoodItem
+                enable={getSwitchEnable(item.id)}
+                mood={item}
+                onPress={() => {
+                  navigateToEdit('edit', item)
+                }}
+                onSwitch={async _ => {
+                  if (getSwitchEnable(item.id)) return
+                  state.loading = true
+                  await setScene(item)
+                  state.loading = false
+                }} />
+            )
+          }}
+          ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+          ItemSeparatorComponent={() => (<Spacer />)}
+          ListFooterComponent={() => (<Spacer />)}
+          keyExtractor={item => `${item.id}`} />
+      </Page>
+    </>
+  )
+}
+
+const newScene = {
+  version: 1,
+  id: 1,
+  mode: 10,
+  name: '',
+  speed: 50,
+  loop: 0,
+  segmented: 0,
+  direction: 0,
+  excessive: 0,
+  optionB: 0,
+  optionC: 0,
+  image: '',
+  nodes: [
+    {
+      brightness: 0,
+      colorTemp: 0,
+      h: 0,
+      isColorNode: true,
+      s: 100,
+      v: 100
+    },
+    {
+      brightness: 0,
+      colorTemp: 0,
+      h: 60,
+      isColorNode: true,
+      s: 100,
+      v: 100
+    }
+  ]
+}
+
+export default FantasyMoodPage

package/src/modules/mood/FantasyMoodEditPage.tsx

@@ -0,0 +1,548 @@
+import Page from '@ledvance/base/src/components/Page'
+import I18n from '@ledvance/base/src/i18n'
+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 { useWorkMode, COLOUR } 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, maxBy } 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 { useDeviceId, useRole } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { stringLightSceneMode, stripLightSceneMode, StripSceneUIState, StripNodeInfo, StripLightSceneMode } from '../scene/SceneInfo'
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
+import { SelectPageParams } from '../select/SelectPage'
+import { showDeleteMoodDialog } from './tools'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { FantasyMoodPageProps } from './FantasyMood'
+import Segmented from '@ledvance/base/src/components/Segmented'
+import { saveFantasyScene, useFantasyScene } from '../scene/SceneAction'
+const cx = Utils.RatioUtils.convertX
+
+interface FantasyMoodEditPageState {
+  headline: string
+  mood: StripSceneUIState
+  currentNode: StripNodeInfo
+  paintBucketSelected: boolean
+  sceneMode: StripLightSceneMode
+}
+
+export interface FantasyMoodEditParams {
+  mode: 'add' | 'edit'
+  currentMood: StripSceneUIState
+  moods: StripSceneUIState[]
+  onSave: () => void
+  moduleParams: FantasyMoodPageProps
+}
+const FantasyMoodEditPage = () => {
+  const navigation = useNavigation<StackNavigationProp<any>>()
+  const routeParams = useRoute().params as FantasyMoodEditParams
+  const params = cloneDeep(routeParams)
+  const moduleParams = params.moduleParams
+  const deviceId = useDeviceId()
+  const [, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
+  const [, setFantasyScene] = useFantasyScene(params.moduleParams.sceneDpCode, params.moduleParams.workModeDpCode)
+  const role = useRole()
+  const state = useReactive<FantasyMoodEditPageState>({
+    headline: '',
+    mood: params.currentMood,
+    currentNode: params.currentMood.nodes[params.currentMood.nodes.length - 1],
+    paintBucketSelected: false,
+    sceneMode: params.moduleParams.isStringLight ? stringLightSceneMode : stripLightSceneMode
+  })
+  const canDelete = useMemo(() => (role === 0 || role === 2), [role])
+
+  useEffect(() => {
+    state.headline = I18n.getLang(params.mode ? '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 (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: StripNodeInfo) => {
+    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 maxModeObject = maxBy(params.moods, 'mode');
+    const currentMood = {
+      ...state.mood,
+      nodes: state.mood.nodes.map(node => {
+        if (node.isColorNode) {
+          node.brightness = 0;
+          node.colorTemp = 0;
+        } else {
+          node.h = 0
+          node.s = 0
+          node.v = 0
+        }
+        return node
+      }),
+      id: params.mode === 'add' ? maxModeObject && maxModeObject.mode > 200 ? maxModeObject.mode + 1 : 201 : state.mood.id
+    }
+    const list = params.mode === 'add' ? [currentMood,...params.moods] :
+      isDelete ? params.moods.filter(mood => mood.id !== currentMood.id) :
+        params.moods.map(mood => {
+          return mood.id === currentMood.id ? currentMood : mood
+        })
+    const saveRes = await saveFantasyScene(deviceId, params.moduleParams.featureId, list)
+    if (saveRes.success) {
+      if (list.length > 0) {
+        if (isDelete) {
+
+        } else {
+          await setFantasyScene(currentMood)
+        }
+      } else {
+        await setWorkMode(COLOUR)
+      }
+    }
+    navigation.navigate(ui_biz_routerKey.ui_biz_fantasy_mood)
+    routeParams.onSave()
+  }, [])
+
+  const createSelectPageData = useCallback(() => {
+    return Object.values(state.sceneMode).map(scene => {
+      return {
+        text: scene.title,
+        selected: scene.mode === state.mood.mode,
+        value: scene.mode,
+      }
+    })
+  }, [state.mood.mode, state.sceneMode])
+
+  const getButtonStatus = () => {
+    return (params.mode === 'edit' && isEqual(state.mood, routeParams.currentMood)) ||
+      !(!!state.mood.name) ||
+      nameRepeat ||
+      state.mood.name.length > 32 ||
+      state.mood.nodes.length < 2
+  }
+  console.log(state.mood, '< -- mood')
+  console.log(state.sceneMode, '< --- sceneMode')
+  const nameRepeat = useMemo(() => {
+    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
+  }, [state.mood.name])
+  return (
+    <Page
+      backText={I18n.getLang('mesh_device_detail_mode')}
+      showBackDialog={true}
+      backDialogTitle={
+        I18n.getLang(params.mode === 'add' ?
+          'string_light_pp_dialog_sm_add_headline_c' :
+          'manage_user_unsaved_changes_dialog_headline')
+      }
+      backDialogContent={
+        I18n.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={getButtonStatus() ? res.ic_uncheck : res.ic_check}
+      rightButtonDisabled={getButtonStatus()}
+      rightButtonIconClick={async () => {
+        await onPost(false)
+      }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        nestedScrollEnabled={true}>
+        <View style={styles.root}>
+          <TextField
+            style={styles.name}
+            value={state.mood.name}
+            placeholder={I18n.getLang('edit_static_mood_inputfield_topic_text')}
+            onChangeText={text => {
+              state.mood.name = text
+            }}
+            showError={state.mood.name.length > 32 || nameRepeat}
+            tipColor={nameRepeat ? '#f00' : undefined}
+            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
+            errorText={I18n.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}>
+                {I18n.getLang('light_sources_tile_tw_lighting_headline')}
+              </Text>
+            </View>
+            <Spacer height={cx(18)} />
+            <TextFieldStyleButton
+              style={styles.transitionMode}
+              text={state.sceneMode[state.mood.mode]?.title}
+              placeholder={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
+              onPress={() => {
+                const paramsSelect: SelectPageParams<number> = {
+                  title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline'),
+                  data: createSelectPageData(),
+                  onSelect: selectPageData => {
+                    state.mood.mode = selectPageData.value
+                  },
+                }
+                navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
+              }} />
+            <Spacer height={cx(10)} />
+            <LdvSlider
+              title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+              value={state.mood.speed}
+              onValueChange={() => { }}
+              onSlidingComplete={value => {
+                state.mood.speed = value
+              }} />
+            <Spacer height={cx(16)} />
+            {state.sceneMode[state.mood.mode]?.turnOn && <View style={styles.transitionMode}>
+              <Text style={{ color: '#000', fontSize: cx(14) }}>Turn to</Text>
+              <Segmented
+                value={state.mood.direction}
+                options={[
+                  {
+                    label: 'Positive',
+                    value: 0
+                  },
+                  {
+                    label: 'Negative',
+                    value: 1
+                  },
+                ]}
+                onChange={(v) => state.mood.direction = Number(v)}
+              />
+              <Spacer />
+            </View>}
+            {state.sceneMode[state.mood.mode]?.paragraph && <View style={styles.transitionMode}>
+              <Text style={{ color: '#000', fontSize: cx(14) }}>Paragraph</Text>
+              <Segmented
+                value={state.mood.segmented}
+                options={[
+                  {
+                    label: 'Paragraph',
+                    value: 0
+                  },
+                  {
+                    label: 'Segmented',
+                    value: 1
+                  },
+                ]}
+                onChange={(v) => state.mood.segmented = Number(v)}
+              />
+              <Spacer />
+            </View>}
+            {state.sceneMode[state.mood.mode]?.other && <View style={styles.transitionMode}>
+              <Text style={{ color: '#000', fontSize: cx(14) }}>Other</Text>
+              <Segmented
+                value={state.mood.direction}
+                options={state.sceneMode[state.mood.mode]?.other}
+                onChange={(v) => state.mood.direction = Number(v)}
+              />
+              <Spacer />
+            </View>}
+            <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}>
+                {I18n.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
+              </Text>
+              <View style={[styles.preview, { backgroundColor: getColorBlockColor() }]} />
+            </View>
+            <Spacer />
+            <LampAdjustView
+              isSupportColor={!moduleParams.isStripLight && moduleParams.isSupportColor}
+              isSupportBrightness={!moduleParams.isStripLight && 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 />
+          {params.mode === 'edit' && canDelete &&
+            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+              <TextButton
+                style={styles.deleteBtn}
+                textStyle={styles.deleteBtnText}
+                text={I18n.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),
+  },
+  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 FantasyMoodEditPage

package/src/modules/mood/FantasyMoodItem.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, memo } from 'react'
+import { StyleSheet, Text, View, ViewProps, ViewStyle } from 'react-native'
+import { StripSceneUIState } from '../scene/SceneInfo'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import { useReactive } from 'ahooks'
+import { hsv2Hex } from '@ledvance/base/src/utils'
+import {cctToColor} from '@ledvance/base/src/utils/cctUtils'
+import {mapFloatToRange} from '@ledvance/base/src/utils'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
+
+const cx = Utils.RatioUtils.convertX
+
+interface FantasyMoodItemProps extends ViewProps {
+    enable: boolean
+    mood: StripSceneUIState
+    style?: ViewStyle
+    onPress?: () => void
+    onSwitch: (enable: boolean) => void
+}
+
+const FantasyMoodItem = (props: FantasyMoodItemProps) => {
+    const { mood } = props
+    const state = useReactive<{ colors: string[] }>({
+        colors: [],
+    })
+
+    useEffect(() => {
+        state.colors = props.mood.nodes.map(node => {
+            if (node.isColorNode) {
+                return hsv2Hex(node.h, Math.round(node.s), Math.round(mapFloatToRange(node.v / 100, 50, 100)))
+            }
+            return cctToColor(node.colorTemp.toFixed())
+        })
+    }, [props.mood.nodes])
+
+    return (
+        <Card
+            style={[styles.card, props.style]}
+            onPress={props.onPress}>
+            <View>
+                <Spacer height={cx(16)} />
+                <View style={styles.headline}>
+                    <Text style={styles.headText}>{mood.name}</Text>
+                    <SwitchButton
+                        thumbStyle={{ elevation: 0 }}
+                        value={props.enable}
+                        onValueChange={props.onSwitch} />
+                </View>
+                <Spacer />
+                <View style={styles.gradientItem}>
+                    <MoodColorsLine
+                        type={'separate'}
+                        colors={state.colors} />
+                </View>
+                <Spacer height={cx(16)} />
+            </View>
+        </Card>
+    )
+}
+
+export default memo(FantasyMoodItem)
+
+const styles = StyleSheet.create({
+    card: {
+        marginHorizontal: cx(24),
+    },
+    headline: {
+        flexDirection: 'row',
+        marginHorizontal: cx(16),
+    },
+    headText: {
+        flex: 1,
+        color: '#000',
+        fontSize: cx(16),
+        fontFamily: 'helvetica_neue_lt_std_bd',
+        lineHeight: cx(20),
+    },
+    gradientItem: {
+        alignItems: 'center',
+    },
+    gradient: {
+        borderRadius: cx(8),
+    },
+    moodTypeItem: {
+        flexDirection: 'row',
+    },
+    moodTypeLabel: {
+        marginStart: cx(16),
+        paddingHorizontal: cx(12.5),
+        backgroundColor: '#E6E7E8',
+        borderRadius: cx(8),
+    },
+    moodTypeLabelText: {
+        height: cx(16),
+        color: '#000000DD',
+        fontSize: cx(10),
+        textAlignVertical: 'center',
+        fontFamily: 'helvetica_neue_lt_std_roman',
+        lineHeight: cx(16),
+    },
+})
+

package/src/modules/scene/SceneAction.ts

@@ -1,20 +1,26 @@
 import {NativeResult, Result} from '@ledvance/base/src/models/modules/Result'
 import {
   getDefSceneList,
+  getDefFantasyScene,
   RemoteSceneInfo,
   SceneInfo,
   SceneNodeInfo,
   SceneNodeTransitionMode,
   SceneUIState,
+  StripSceneUIState,
+  StripSceneInfo,
 } from './SceneInfo'
-import {getFeature, putFeature} from '@ledvance/base/src/api/native'
+import {getFeature, putFeature, NativeApi} from '@ledvance/base/src/api/native'
 import {setSceneDp} from '../../hooks/DeviceDpStateHooks'
 import {hex2Int, spliceByStep} from '@ledvance/base/src/utils/common'
-import {asyncSetDps, useDp} from '@ledvance/base/src/models/modules/NativePropsSlice'
+import {asyncSetDps, useDp, useDps} from '@ledvance/base/src/models/modules/NativePropsSlice'
 import {Dispatch, useState} from 'react'
 import {useUpdateEffect} from 'ahooks'
 import {useDispatch} from 'react-redux'
 import res from '@ledvance/base/src/res'
+import { SCENE } from '../../hooks/DeviceDpStateHooks'
+import { Utils } from '@tuya/tuya-panel-lamp-sdk'
+const { nToHS, toFixed, sToN, toN, formatterTransform } = Utils
 
 type SetRemoteSceneListType = (
   deviceId: string,
@@ -266,3 +272,150 @@ export async function saveScene(
   })
   return await setRemoteSceneList(deviceId, newScenes)
 }
+
+
+export function stripDp2Obj(dp: string): StripSceneInfo {
+  const version = hex2Int(dp.slice(0, 2))
+  const id = hex2Int(dp.slice(2, 4))
+  const mode = hex2Int(dp.slice(4, 6))
+  const intervalTime = hex2Int(dp.slice(6, 8))
+  const changeTime = hex2Int(dp.slice(8, 10))
+  const speed = intervalTime || changeTime
+  const optionA = toN(dp.slice(10, 12))
+  const optionAStr = toFixed(optionA.toString(2), 8);
+  const gn = formatterTransform(optionAStr);
+  const st = (n?: number) => gn.next(n);
+  st();
+  const segmented = sToN(st(1).value, 2)
+  const loop = sToN(st(1).value, 2)
+  const excessive = sToN(st(1).value, 2)
+  const direction = sToN(st(1).value, 2)
+  // 这两个目前灯具用不上
+  const optionB = toN(dp.slice(12, 14))
+  const optionC = toN(dp.slice(14, 16))
+  const nodes = spliceByStep(dp.slice(16, dp.length), 16).map(nodeHex => {
+    const v = hex2Int(nodeHex.slice(0, 2))
+    const h = hex2Int(nodeHex.slice(2, 6))
+    const s = hex2Int(nodeHex.slice(6, 8))
+    const brightness = hex2Int(nodeHex.slice(8, 12)) / 10
+    const colorTemp = hex2Int(nodeHex.slice(12, 16)) / 10
+    const isColorNode = v > 0 && brightness === 0
+    return { h, s, v, brightness, colorTemp, isColorNode }
+  })
+  return {
+    version,
+    id,
+    mode,
+    speed,
+    direction,
+    segmented,
+    loop,
+    excessive,
+    optionB,
+    optionC,
+    nodes
+  }
+}
+
+export function stripObj2Dp(scene: StripSceneInfo) {
+  const {
+    optionB = 0,
+    optionC = 0,
+    // mixedIds = [],
+    segmented = 0,
+    loop = 0,
+    excessive = 0,
+    direction = 0,
+    nodes
+  } = scene
+  const expand = 0
+  const versionHex = nToHS(scene.version)
+  const idHex = nToHS(scene.id)
+  const modeHex = nToHS(scene.mode)
+  const intervalTimeHex = nToHS(scene.speed)
+  const changeTimeHex = nToHS(scene.speed)
+  const optionAhex = nToHS(
+    parseInt(
+      `${segmented}${loop}${excessive}${direction}${toFixed(
+        expand.toString(2),
+        2
+      )}${0}${0}`,
+      2
+    )
+  );
+  const optionBhex = nToHS(optionB)
+  const optionChex = nToHS(optionC)
+  const nodeHex = nodes.map(node => {
+    return `${nToHS(node.v)}${nToHS(node.h, 4)}${nToHS(node.s)}${nToHS(node.brightness * 10, 4)}${nToHS(node.colorTemp * 10, 4)}`
+  }).join('')
+  return versionHex + idHex + modeHex + intervalTimeHex + changeTimeHex + optionAhex + optionBhex + optionChex + nodeHex
+}
+
+export function useFantasyScene(sceneDp: string, workModeDp: string): [number, (scene: StripSceneInfo) => Promise<Result<any>>] {
+  const [dps, setDps]: [any, (v: any) => Promise<Result<any>>] = useDps()
+  const dp = dps[sceneDp]
+  const [sceneState, setSceneState] = useState<StripSceneInfo>(stripDp2Obj(dp))
+
+  useUpdateEffect(() => {
+    setSceneState(stripDp2Obj(dp))
+  }, [dp])
+
+  const setFantasyScene = (scene: StripSceneInfo) => {
+    const sceneHex = stripObj2Dp(scene)
+    return setDps({
+      [sceneDp]: sceneHex,
+      [workModeDp]: SCENE
+    })
+  }
+  return [sceneState.id, setFantasyScene]
+}
+
+type LampType = {
+  isStringLight?: boolean
+  isStripLight?: boolean
+}
+export async function getRemoteFantasyScene(featureId: string, devId: string, lampType: LampType) {
+  const res = await NativeApi.getJson(devId, featureId)
+  if (res.success && res.data) {
+    return {
+      success: true,
+      data: JSON.parse(res.data)?.map(item => remoteFantasySceneInfo2SceneUIState(item)),
+    }
+  } else {
+    if (res.msg?.includes('资源未找到')) {
+      const defaultScene = getDefFantasyScene(lampType)
+      const res = await NativeApi.putJson(devId, featureId, JSON.stringify(defaultScene))
+      if (res.success) {
+        return {
+          success: true,
+          data: defaultScene.map(item => remoteFantasySceneInfo2SceneUIState(item))
+        }
+      }
+      return { success: false }
+    }
+    return { success: false }
+  }
+
+}
+
+function remoteFantasySceneInfo2SceneUIState(remoteScene: RemoteSceneInfo): StripSceneUIState {
+  const stripSceneInfo = stripDp2Obj(remoteScene.i)
+  return {
+    ...stripSceneInfo,
+    name: remoteScene.n,
+    image: ''
+  }
+}
+
+export function saveFantasyScene(devId: string, featureId: string, scenes: StripSceneUIState[]) {
+  const newScenes: RemoteSceneInfo[] = scenes.map(s => {
+    return {
+      n: s.name,
+      i: stripObj2Dp(s),
+      s: '',
+      t: 0,
+      e: false,
+    }
+  })
+  return NativeApi.putJson(devId, featureId, JSON.stringify(newScenes))
+}

package/src/modules/scene/SceneInfo.ts

@@ -32,12 +32,94 @@ export interface SceneNodeInfo {
   isColorNode: boolean
 }
 
+export interface StripSceneInfo {
+  // 版本号
+  version: number
+  // 场景号
+  id: number
+  // 变化方式
+  mode: number
+  // 速度
+  speed: number
+  // 段落 0 全段, 1 分段
+  segmented: number
+  // 循环 0 不循环, 1 循环
+  loop: number
+  // 过渡 0 不过渡, 1 过渡
+  excessive: number
+  // 方向 0 顺时针方向, 1 逆时针方向
+  direction: number
+  // 设置 目前灯用不上
+  optionB: number
+  optionC: number
+  nodes: StripNodeInfo[]
+}
+
+export interface StripNodeInfo {
+  // 0~360
+  h: number
+  // 饱和度 0~100
+  s: number
+  // 明度 1~100
+  v: number
+  // 灯泡亮度 10~1000 4hex
+  brightness: number
+  // 色温值 0~1000 4hex
+  colorTemp: number
+  // 节点类型
+  isColorNode: boolean
+}
+
 export enum SceneNodeTransitionMode {
   Static,
   Jump,
   Gradient
 }
 
+
+export interface StripLightSceneMode {
+  [key: string]: {
+    title: string;
+    mode: number;
+    turnOn?: boolean;
+    paragraph?: boolean;
+    other?: {
+      label: string
+      value: number
+    }[];
+  };
+}
+
+export const stringLightSceneMode: StripLightSceneMode = {
+  '13': { title: 'Flow', mode: 13, turnOn: true }, // 流水
+  '2': { title: 'Rainbow', mode: 2, turnOn: true }, // 彩虹
+  '14': { title: 'Chase', mode: 14, turnOn: true }, // 追光
+  '15': { title: 'Dazzle', mode: 15 }, // 炫彩
+  '16': { title: I18n.getLang('other_lights_modes_gradient_text'), mode: 16 }, // 渐变
+  '10': { title: I18n.getLang('other_lights_modes_jump_text'), mode: 10 }, // 跳变
+  '11': { title: 'Breathing', mode: 11 }, // 呼吸
+  '12': { title: 'Blink', mode: 12 } // 闪烁
+}
+
+export const stripLightSceneMode: StripLightSceneMode = {
+  '1': { title: 'Jump', mode: 1, paragraph: true },  // 跳变
+  '2': { title: 'Breath', mode: 2, paragraph: true }, // 呼吸1
+  '3': { title: 'Breathe', mode: 3, paragraph: true }, // 呼吸2
+  '4': { title: 'Blink', mode: 4, paragraph: true }, // 闪烁
+  '10': { title: 'Flow', mode: 10, turnOn: true }, // 流水
+  '11': { title: 'Rainbow', mode: 11, turnOn: true }, // 彩虹
+  '5': { title: 'Meteor', mode: 5, turnOn: true, other: [{label: 'Meteor',value: 0}, {label: 'Meteor shower',value: 1},{label: 'Magic meteor',value: 2}] }, // 流星
+  '6': { title: 'PileUp', mode: 6, turnOn: true, paragraph: true }, // 堆积
+  '7': { title: 'Falling', mode: 7, turnOn: true, paragraph: true }, // 飘落
+  '8': { title: 'Follow', mode: 8, turnOn: true }, // 追光
+  '9': { title: 'Flutter', mode: 9, turnOn: true }, // 飘动
+  '12': { title: 'flash', mode: 12, paragraph: true }, // 闪现
+  '13': { title: 'Rebound', mode: 13, other:  [{label: 'Rebound',value: 0}, {label: 'Magic rebound',value: 1}]}, // 反弹
+  '14': { title: 'Shuttle', mode: 14, }, // 穿梭
+  '15': { title: 'Random', mode: 15 }, // 乱闪
+  '16': { title: 'Switch', mode: 16, other: [{label: 'Meanwhile',value: 0}, {label: 'Staggered',value: 1}] } // 开合
+}
+
 /**
  * 萤石云端 Scene 物模型
  */
@@ -70,6 +152,17 @@ export interface SceneUIState extends SceneInfo {
   image: string
 }
 
+export interface StripScenePageUIState {
+  currentScene: StripSceneUIState | undefined
+  scenes: StripSceneUIState[]
+  flag: symbol
+}
+
+export interface StripSceneUIState extends StripSceneInfo {
+  name: string
+  image: string
+}
+
 export function getDefSceneList(
   isRGBWLamp: boolean = false,
   isRGBLamp: boolean = false,
@@ -99,6 +192,16 @@ export function getDefSceneList(
   return []
 }
 
+export function getDefFantasyScene({
+  isStringLight = false,
+  isStripLight = false
+}) {
+  if (isStringLight || isStripLight) {
+    return getStringLightSceneList()
+  }
+  return getStringLightSceneList()
+}
+
 function getRGBWDefSceneList(): RemoteSceneInfo[] {
   return [
     {
@@ -339,6 +442,67 @@ function getDIMDefSceneList(): RemoteSceneInfo[] {
   ]
 }
 
+function getStringLightSceneList(): RemoteSceneInfo[] {
+  return [
+    {
+      n: 'Flow',
+      i: '010d0d3232000000640000640000000064003c64000000006400f06400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: 'Rainbow',
+      i: '0102023232000000640000640000000064003c64000000006400f06400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: 'Chase',
+      i: '010e0e3232000000640000640000000064003c640000000064007864000000006400b464000000006400f0640000000064012c6400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: 'Dazzle',
+      i: '010f0f3232000000640000640000000064003c640000000064007864000000006400b464000000006400f0640000000064012c6400000000',
+      s: '',
+      t: 0,
+      e: false
+    },
+    {
+      n: 'Gradient',
+      i: '01101032320000006400f0640000000064012c640000000064003c6400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: 'Jump',
+      i: '010a0a32320000006400f0640000000064012c640000000064003c6400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: 'Breathing',
+      i: '010b0b32320000006400f0640000000064012c640000000064003c6400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+    {
+      n: 'Blink',
+      i: '010c0c32320000006400f0640000000064012c640000000064003c6400000000',
+      s: '',
+      t: 0,
+      e: false,
+    },
+  ]
+}
+
 export const MAXSCENE = 8
 
 export const AddScene = {

package/src/navigation/Routers.ts

@@ -5,6 +5,8 @@ import DynamicMoodEditorPage from '../modules/mood/DynamicMoodEditorPage'
 import StaticMoodEditorPage from '../modules/mood/StaticMoodEditorPage'
 import AddMoodPage from '../modules/mood/AddMoodPage'
 import MoodPage from '../modules/mood/MoodPage'
+import FantasyMoodPage from '../modules/mood/FantasyMood'
+import FantasyMoodEditPage from '../modules/mood/FantasyMoodEditPage'
 import TimerPage from '../modules/timer/TimerPage'
 import SleepWakeUpPage from 'modules/sleepWakeup/SleepWakeUpPage'
 import SleepWakeUpDetailPage from 'modules/sleepWakeup/SleepWakeUpDetailPage'
@@ -21,6 +23,8 @@ import RandomTimeDetailPage from '../modules/randomTime/RandomTimeDetailPage'
 export const ui_biz_routerKey = {
   'ui_biz_time_schedule': 'ui_biz_time_schedule',
   'ui_biz_time_schedule_edit': 'ui_biz_time_schedule_edit',
+  'ui_biz_fantasy_mood': 'ui_biz_fantasy_mood',
+  'ui_biz_fantasy_mood_edit': 'ui_biz_fantasy_mood_edit',
   'ui_biz_mood': 'ui_biz_mood',
   'ui_biz_mood_add': 'ui-biz_mood_add',
   'ui_biz_static_mood_edit': 'ui_biz_static_mood_edit',
@@ -129,6 +133,34 @@ export const MoodPageRouters: NavigationRoute[] = [
   },
 ]
 
+export const FantasyMoodRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.ui_biz_fantasy_mood,
+    component: FantasyMoodPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.ui_biz_fantasy_mood_edit,
+    component: FantasyMoodEditPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.ui_biz_select_page,
+    component: SelectPage,
+    options: {
+      gesture: true,
+      hideTopbar: true,
+      ...TransitionPresets.ModalPresentationIOS,
+    },
+  },
+]
+
 export const TimerPageRouters: NavigationRoute[] = [
   {
     name: ui_biz_routerKey.ui_biz_timer,