@ledvance/group-ui-biz-bundle 1.0.3 → 1.0.5

package/package.json

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

package/src/modules/flags/FlagActions.ts

@@ -0,0 +1,201 @@
+import { useFeatureHook } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { SceneNodeTransitionMode } from "@ledvance/group-ui-biz-bundle/src/modules/mood/SceneInfo";
+import { parseJSON } from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+import { cloneDeep } from "lodash";
+import { FlagItemInfo, FlagUiInfo, defFlagList } from "./FlagInfo";
+import { hex2Int } from "@ledvance/base/src/utils/common";
+import { spliceByStep } from "@ledvance/base/src/utils/common";
+import { NativeApi } from "@ledvance/base/src/api/native";
+import { hsv2Hex } from "@ledvance/base/src/utils";
+import { WorkMode } from "@ledvance/base/src/utils/interface";
+
+interface  LightType {
+  isStringLight?: boolean
+  isStripLight?: boolean
+  isMixLight?: boolean
+}
+
+interface FlagDataType {
+  sceneStatus?: {
+    sceneDataDpCode: string 
+  }
+  drawToolStatus?: {
+    drawToolCode: string
+    drawToolObj2dp: (colors: string[]) => string;
+  }
+  flag?: FlagItemInfo
+  workModeDpCode: string
+  workMode: WorkMode
+  switchLedDpCode: string
+}
+
+export interface FlagConfigType {
+  switchLed: boolean
+  workMode: WorkMode
+  flagSceneConfig?: FlagDataType
+}
+const featureId = 'Flag_data'
+
+type UseFlagType = (params: LightType) => [FlagDataType | undefined, (flagData: FlagDataType) => Promise<any>]
+
+export const useFlag: UseFlagType = (params) => {
+  return useFeatureHook<FlagConfigType, FlagDataType | undefined>('flagSceneConfig', undefined, undefined, (flagData) =>{
+    console.log(flagData, '< -- flagData')
+    if(flagData){
+      const dps = {}
+      const { flag, drawToolStatus, sceneStatus, switchLedDpCode, workMode, workModeDpCode} = flagData
+      if(params.isStripLight && drawToolStatus){
+        dps[drawToolStatus.drawToolCode] = flag ? drawToolStatus.drawToolObj2dp(flag.colors.map(hsv => hsv2Hex(hsv.h, hsv.s, hsv.v))) : ''
+      }else{
+        if(sceneStatus){
+          dps[sceneStatus.sceneDataDpCode] = flag ? obj2Dp(flag, {isMixLight: params.isMixLight}) : ''
+        }
+      }
+      dps[switchLedDpCode] = true
+      dps[workModeDpCode] = workMode
+      return dps
+    }
+  }, flagData => ({workMode: flagData?.workMode, switchLed: true}))
+}
+
+export interface FlagOption {
+  isFan?: boolean
+  isUVCFan?: boolean
+  isMixLight?: boolean
+}
+
+export function obj2Dp(flagItem: FlagItemInfo, option?: FlagOption): string {
+  let fanEnableHex = ''
+  let fanSpeedHex = ''
+  const version = '00'
+  const idHex = flagItem.id.toString(16).padStart(2, '0')
+  if (option?.isMixLight) {
+    const whiteEnable = '01'
+    const whiteNum = '01'
+    const whiteStatus = '02'
+    const whiteHex = whiteEnable + whiteNum + whiteStatus + flagItem.whiteColors.map(colors => {
+      const speed = '00'
+      const mode = '00'
+      const bHex = (colors.brightness * 10).toString(16).padStart(4, '0')
+      const tHex = (colors.colorTemp * 10).toString(16).padStart(4, '0')
+      return speed + speed + mode + bHex + tHex
+    }).join('')
+    const colorEnable = '01'
+    const colorNum = flagItem.colors.length.toString(16).padStart(2, '0')
+    const colorStatus = '03'
+    const colorHex = colorEnable + colorNum + colorStatus + flagItem.colors.map(item => {
+      const speed = flagItem.speed.toString(16).padStart(2, '0')
+      const mode = flagItem.mode.toString(16).padStart(2, '0')
+      const hHex = item.h.toString(16).padStart(4, '0')
+      const sHex = (item.s * 10).toString(16).padStart(4, '0')
+      const vHex = (item.v * 10).toString(16).padStart(4, '0')
+      return speed + speed + mode + hHex + sHex + vHex
+    }).join('')
+    return version + idHex + whiteHex + colorHex
+  } else {
+    if (option?.isFan) {
+      fanEnableHex = (flagItem.fanEnable ? 1 : 0).toString(16).padStart(2, '0')
+      fanSpeedHex = (flagItem.fanSpeed || 1).toString(16).padStart(2, '0')
+    }
+    const switchingIntervalHex = (option?.isUVCFan ? 101 - flagItem.speed : flagItem.speed).toString(16).padStart(2, '0')
+    const transitionTimeHex = (option?.isUVCFan ? 101 - flagItem.speed : flagItem.speed).toString(16).padStart(2, '0')
+    const transitionModeHex = flagItem.mode.toString(16).padStart(2, '0')
+    const hex = idHex + fanEnableHex + fanSpeedHex + flagItem.colors.map(color => {
+      const hHex = Math.round(color.h).toString(16).padStart(4, '0')
+      const sHex = Math.round(color.s * 10).toString(16).padStart(4, '0')
+      const vHex = Math.round(color.v * 10).toString(16).padStart(4, '0')
+      const brightnessHex = '0000'
+      const colorTempHex = '0000'
+      return switchingIntervalHex + transitionTimeHex + transitionModeHex + hHex + sHex + vHex + brightnessHex + colorTempHex
+    }).join('')
+    return hex
+  }
+}
+
+export function dp2Obj(dp: string, option?: FlagOption): FlagItemInfo | undefined {
+  if (!dp) return
+  const result = {} as FlagItemInfo
+  if (option?.isMixLight) {
+    result.version = hex2Int(dp.slice(0, 2))
+    result.id = hex2Int(dp.slice(2, 4))
+    let lampHex = dp.slice(16)
+    result.whiteColors = [
+      { brightness: hex2Int(lampHex.slice(0, 4)) / 10, colorTemp: hex2Int(lampHex.slice(4, 8)) / 10 }
+    ]
+    lampHex = lampHex.slice(14)
+    result.colors = spliceByStep(lampHex, 18).map(lamp => {
+      result.speed = hex2Int(lamp.slice(0, 2))
+      result.mode = hex2Int(lamp.slice(4, 6))
+      return {
+        h: hex2Int(lamp.slice(6, 10)),
+        s: hex2Int(lamp.slice(10, 14)) / 10,
+        v: hex2Int(lamp.slice(14, 18)) / 10
+      }
+    })
+    return result
+  } else {
+    const id = hex2Int(dp.slice(0, 2))
+    let fanEnable: any = undefined
+    let fanSpeed: any = undefined
+    if (option?.isFan) {
+      fanEnable = hex2Int(dp.slice(2, 4)) === 1
+      fanSpeed = hex2Int(dp.slice(4, 6))
+    }
+    const c = option?.isFan ? 6 : 2
+    const sliceDp = dp.slice(c)
+    let mode = SceneNodeTransitionMode.Jump
+    let speed = 70
+    const colors = spliceByStep(sliceDp, 26).map(nodeHex => {
+      speed = option?.isUVCFan ? 101 - hex2Int(nodeHex.slice(0, 2)) : hex2Int(nodeHex.slice(0, 2))
+      mode = hex2Int(nodeHex.slice(4, 6))
+      const h = hex2Int(nodeHex.slice(6, 10))
+      const s = hex2Int(nodeHex.slice(10, 14))
+      const v = hex2Int(nodeHex.slice(14, 18))
+      return {
+        h,
+        s: s / 10,
+        v: v / 10
+      }
+    })
+    const whiteColors = [{ brightness: 100, colorTemp: 0 }]
+    return {
+      id,
+      mode,
+      speed,
+      fanEnable,
+      fanSpeed,
+      colors,
+      whiteColors
+    }
+  }
+
+}
+
+
+export async function getRemoteFlag(devId: string) {
+  const res = await NativeApi.getJson(devId, featureId)
+  const isNormalData = Array.isArray(parseJSON(res?.data))
+  if (res.success && isNormalData) {
+    return {
+      success: true,
+      data: JSON.parse(res.data)
+    }
+  } else {
+    if (res.msg?.includes('资源未找到') || !isNormalData) {
+      const res = await NativeApi.putJson(devId, featureId, JSON.stringify(defFlagList))
+      if (res.success) {
+        return {
+          success: true,
+          data: cloneDeep(defFlagList)
+        }
+      }
+      return { success: false }
+    }
+    return { success: false }
+  }
+}
+
+export function saveFlag(devId: string, flagInfo: FlagUiInfo[]) {
+  return NativeApi.putJson(devId, featureId, JSON.stringify(flagInfo))
+}
+

package/src/modules/flags/FlagEditPage.tsx

@@ -0,0 +1,431 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import I18n from '@ledvance/base/src/i18n'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import Page from '@ledvance/base/src/components/Page'
+import res from '@ledvance/base/src/res'
+import { ScrollView, View, FlatList, StyleSheet, Image, TouchableOpacity, Text } from 'react-native'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { useReactive } from 'ahooks'
+import { Utils } from 'tuya-panel-kit'
+import TextField from '@ledvance/base/src/components/TextField'
+import Card from '@ledvance/base/src/components/Card'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { hex2Hsv, hsv2Hex } from '@ledvance/base/src/utils'
+import { cloneDeep, find, isEqual } from 'lodash'
+import { FlagUiInfo } from './FlagInfo'
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+import { FlagOption } from './FlagActions'
+import { FlagPageProps } from './FlagPage'
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
+import { showDialog } from '@ledvance/base/src/utils/common'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+
+const cx = Utils.RatioUtils.convertX
+
+export interface FlagEditParams {
+  mode: 'add' | 'edit'
+  currentMood: FlagUiInfo
+  moods: FlagUiInfo[]
+  moduleParams: FlagPageProps
+  modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: FlagUiInfo, options?: FlagOption) => Promise<Result<any>>
+}
+
+const FlagEditPage = () => {
+  const navigation = useNavigation()
+  const params = cloneDeep(useRoute().params as FlagEditParams)
+  const state = useReactive({
+    showAddMoodPopover: true,
+    mood: params.currentMood,
+    currentWhiteNode: params.currentMood.whiteColors[params.currentMood.whiteColors.length - 1]!,
+    currentNode: params.currentMood.colors[params.currentMood.colors.length - 1],
+    whitePaintBucketIdx: params.currentMood.colors.length - 1,
+    colorPaintBucketIdx: params.currentMood.colors.length - 1,
+    whitePaintBucketSelected: true,
+    colorPaintBucketSelected: false,
+    loading: false
+  })
+  useEffect(() => {
+  }, [])
+
+  const getButtonStatus = () => {
+    return (params.mode === 'edit' && isEqual(state.mood, params.currentMood)) ||
+      !(!!state.mood.name) ||
+      nameRepeat ||
+      state.mood.name.length > 32
+  }
+
+  const getColorBlockColor = useCallback((isMainLight?: boolean) => {
+    if (isMainLight) {
+      return cctToColor(state.currentWhiteNode.colorTemp, Math.max(...[state.currentWhiteNode.brightness, 50]))
+    }
+    const { h, s, v } = state.currentNode
+    return hsv2Hex(h, s, v)
+  }, [state.currentNode, state.currentWhiteNode])
+
+  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}
+      loading={state.loading}
+      backDialogTitle={
+        I18n.getLang(params.mode === 'add' ?
+          'flag_canceladding' :
+          'flag_canceledit')
+      }
+      backDialogContent={
+        I18n.getLang('flag_cancelinfo')
+      }
+      headlineText={I18n.getLang(params.mode === 'add' ? 'flag_addanewflag' : 'flag_edittheflag')}
+      rightButtonIcon={getButtonStatus() ? res.ic_uncheck : res.ic_check}
+      rightButtonDisabled={getButtonStatus()}
+      rightButtonIconClick={async () => {
+        if (state.loading) return
+        state.loading = true
+        const res = await params.modDeleteFlag(params.mode, state.mood)
+        if (res.success) {
+          state.loading = false
+          navigation.goBack()
+        }
+      }}>
+      <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
+            }}
+            maxLength={33}
+            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')} />
+          {params.moduleParams.isSupportMixScene && <><Card style={styles.adjustCard}>
+            <Spacer height={cx(16)} />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {I18n.getLang('light_sources_tile_main_lighting_headline')}
+              </Text>
+              <View style={[styles.preview, { backgroundColor: getColorBlockColor(true) }]} />
+            </View>
+            <Spacer />
+            <ColorTempAdjustView
+              isSupportBrightness={!!params.moduleParams.isSupportBrightness}
+              isSupportTemperature={!!params.moduleParams.isSupportTemperature}
+              colorTemp={state.currentWhiteNode.colorTemp}
+              brightness={state.currentWhiteNode.brightness}
+              onCCTChange={(cct) => {
+                state.currentWhiteNode.colorTemp = cct
+              }}
+              onCCTChangeComplete={(cct) => {
+                state.currentWhiteNode.colorTemp = cct
+                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
+                  if (idx === state.whitePaintBucketIdx) {
+                    return {
+                      ...state.mood.whiteColors[idx],
+                      colorTemp: cct
+                    }
+                  }
+                  return item
+                })
+              }}
+              onBrightnessChange={() => { }}
+              onBrightnessChangeComplete={(bright) => {
+                state.currentWhiteNode.brightness = bright
+                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
+                  if (idx === state.whitePaintBucketIdx) {
+                    return {
+                      ...state.mood.whiteColors[idx],
+                      brightness: bright
+                    }
+                  }
+                  return item
+                })
+              }}
+            />
+            <Spacer height={cx(16)} />
+          </Card>
+            <Spacer />
+          </>}
+          <Card style={styles.adjustCard}>
+            <Spacer height={cx(16)} />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {I18n.getLang(params.moduleParams.isSupportMixScene ? 'light_sources_tile_sec_lighting_headline' : 'light_sources_tile_tw_lighting_headline')}
+              </Text>
+            </View>
+            <Spacer height={cx(10)} />
+            <LdvSlider
+              title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+              value={state.mood.speed}
+              onValueChange={value => {
+                state.mood.speed = value
+              }}
+              onSlidingComplete={value => {
+                state.mood.speed = value
+              }} />
+            <Spacer height={cx(16)} />
+            <View style={styles.nodesAdjust}>
+              <View style={styles.adjustButtons}>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.colorPaintBucketSelected = true
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#f60' : '#666' }]}
+                    source={res.ic_paint_bucket} />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.colorPaintBucketSelected = false
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#666' : '#f60' }]}
+                    source={res.ic_colorize} />
+                </TouchableOpacity>
+              </View>
+              <FlatList
+                data={state.mood.colors}
+                style={styles.nodeList}
+                renderItem={({ item, index }) => {
+                  return (
+                    <View style={styles.nodeItem}>
+                      <TouchableOpacity
+                        style={[
+                          styles.nodeBlock,
+                          {
+                            backgroundColor: hsv2Hex(item.h, item.s, item.v),
+                          },
+                        ]}
+                        onPress={() => {
+                          state.currentNode = item
+                          state.colorPaintBucketIdx = index
+                        }} />
+                      <TouchableOpacity
+                        style={styles.nodeDeleteBtn}
+                        disabled={state.mood.colors.length < 3}
+                        onPress={() => {
+                          state.mood.colors.splice(index, 1)
+                          state.currentNode = hex2Hsv(state.mood.colors[state.mood.colors.length - 1])!
+                        }}>
+                        <Image
+                          style={[
+                            styles.nodeDeleteIcon,
+                            {
+                              tintColor: state.mood.colors.length < 3 ? '#ccc' : '#666',
+                            },
+                          ]}
+                          source={res.ic_mood_del} />
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }}
+                keyExtractor={(_, index) => `${index}`}
+                ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                ListFooterComponent={() => {
+                  if (state.mood.colors.length >= 8) {
+                    return (<></>)
+                  }
+                  return (
+                    <View>
+                      <Spacer height={cx(12)} />
+                      <TouchableOpacity
+                        style={styles.nodeAddBtn}
+                        onPress={() => {
+                          const node = {
+                            ...state.currentNode,
+                          }
+                          state.mood.colors.push(node)
+                          state.currentNode = node
+                          state.colorPaintBucketIdx = state.mood.colors.length - 1
+                        }}>
+                        <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 />
+            <ColorAdjustView
+              h={state.currentNode.h}
+              s={state.currentNode.s}
+              v={state.currentNode.v}
+              reserveSV={true}
+              onHSVChange={(h, s, v) => {
+                if (state.colorPaintBucketSelected) {
+                  state.mood.colors = state.mood.colors.map(() => (
+                    { h, s, v }
+                  ))
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                }
+              }}
+              onHSVChangeComplete={(h, s, v) => {
+                if (state.colorPaintBucketSelected) {
+                  state.mood.colors = state.mood.colors.map(() => (
+                    { h, s, v }
+                  ))
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                  state.mood.colors = state.mood.colors.map((item, idx) => {
+                    if (idx === state.colorPaintBucketIdx) {
+                      return { h, s, v }
+                    }
+                    return item
+                  })
+                }
+              }}
+            />
+            <Spacer height={cx(16)} />
+          </Card>
+          <Spacer />
+          {params.mode === 'edit' &&
+            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+              <TextButton
+                style={styles.deleteBtn}
+                textStyle={styles.deleteBtnText}
+                text={I18n.getLang('flag_deleteflag')}
+                onPress={() => {
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang('flag_deletepopup'),
+                    subTitle: I18n.getLang('strip_light_static_mood_edit_dialog_text'),
+                    onConfirm: async (_, { close }) => {
+                      close()
+                      if (state.loading) return
+                      state.loading = true
+                      const res = await params.modDeleteFlag('del', state.mood)
+                      if (res.success) {
+                        state.loading = false
+                        navigation.goBack()
+                      }
+                    }
+                  })
+                }} />
+            </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 FlagEditPage

package/src/modules/flags/FlagInfo.tsx

@@ -0,0 +1,309 @@
+import I18n from "@ledvance/base/src/i18n";
+import { SceneNodeTransitionMode } from "@ledvance/ui-biz-bundle/src/modules/scene/SceneInfo";
+
+type HSV = {
+  h: number 
+  s: number 
+  v: number
+}
+
+type BT = {
+  brightness: number 
+  colorTemp: number
+}
+
+export interface FlagItemInfo {
+  id: number
+  version?: number
+  mode: number
+  speed: number
+  colors: HSV[]
+  whiteColors: BT []
+  fanEnable?: boolean
+  fanSpeed?: number
+}
+
+export interface FlagUiInfo extends FlagItemInfo{
+  name: string
+}
+
+export const defFlagList: FlagUiInfo[] = [
+  {
+    id: 255,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_DE'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [
+      {h: 48, s: 100, v: 100},
+      {h: 360, s: 100, v: 100},
+      {h: 0, s: 0, v:0}],
+  },
+  {
+    id: 254,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_BE'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 48, s: 100, v: 100}, {h: 0, s: 0, v: 0}]
+  },
+  {
+    id: 253,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_FR'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 0, s: 0, v: 100}, {h: 212, s: 100, v: 100}]
+  },
+  {
+    id: 252,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_PT'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 360, s: 100, v: 100}, {h: 150, s: 96, v: 100}]
+  },
+  {
+    id: 251,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_scotland'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 209, s: 100, v: 100}, {h: 0, s: 0, v: 100}, {h: 209, s: 100, v: 100}]
+  },
+  {
+    id: 250,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_ES'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 357, s: 87, v: 100}, {h: 47, s: 100, v: 100}, {h: 357, s: 87, v: 100}]
+  },
+  {
+    id: 249,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_TR'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 360, s: 100, v: 100}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 248,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_AT'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 0, s: 0, v: 100}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 247,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_england'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 0, s: 0, v: 100}, {h: 360, s: 100, v: 100}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 246,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_HU'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 133, s: 36, v: 100}, {h: 0, s: 0, v: 100}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 245,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_SK'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 213, s: 93, v: 100}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 244,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_AL'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 0, s: 0, v:0}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 243,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_DK'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 0, s: 0, v:0}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 242,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_NL'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 217, s: 100, v: 100}, {h: 0, s: 0, v:0}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 241,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_RO'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 48, s: 91, v: 100}, {h: 219, s: 100, v: 100}]
+  },
+  {
+    id: 240,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_CH'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 0, s: 0, v: 100}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 239,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_RS'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 0, s: 0, v: 100}, {h: 210, s: 89, v: 100}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 238,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_IT'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 212, s: 4, v: 100}, {h: 149, s: 100, v: 100}]
+  },
+  {
+    id: 237,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_CZ'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 0, s: 0, v: 100}, {h: 211, s: 86, v: 100}]
+  },
+  {
+    id: 236,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_SI'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 217, s: 100, v: 100}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 235,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_HR'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 0, s: 0, v: 100}, {h: 220, s: 89, v: 100}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 234,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_SE'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 201, s: 100, v: 100}, {h: 48, s: 99, v: 100}, {h: 201, s: 100, v: 100}]
+  },
+  {
+    id: 233,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_NO'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 0, s: 0, v: 100}, {h: 218, s: 100, v: 100}, {h: 360, s: 100, v: 100}]
+  },
+  {
+    id: 232,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('country_PL'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 0, s: 0, v: 100}]
+  },
+  {
+    id: 231,
+    version: 0,
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    name: I18n.getLang('flag_leverkusen'),
+    whiteColors: [
+      { brightness: 100, colorTemp: 0},
+    ],
+    colors: [{h: 360, s: 100, v: 100}, {h: 0, s: 0, v: 100}, {h: 60, s: 100, v: 100}]
+  },
+]

package/src/modules/flags/FlagItem.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, View, Text, ViewStyle } from 'react-native'
+import React from 'react'
+import Card from '@ledvance/base/src/components/Card'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
+import Spacer from '@ledvance/base/src/components/Spacer'
+
+const cx = Utils.RatioUtils.convertX
+
+interface RecommendMoodItemProps {
+  enable: boolean
+  title: string
+  colors: string[]
+  style?: ViewStyle
+  onPress?: () => void
+  onSwitch: (enable: boolean) => void
+}
+
+export default function FlagItem(props: RecommendMoodItemProps) {
+  return (
+    <Card
+      style={[styles.card, props.style]}
+      onPress={props.onPress}>
+      <View>
+        <Spacer height={cx(16)} />
+        <View style={styles.headline}>
+          <Text style={styles.headText}>{props.title}</Text>
+          <SwitchButton
+            thumbStyle={{ elevation: 0 }}
+            value={props.enable}
+            onValueChange={props.onSwitch} />
+        </View>
+        <Spacer />
+        <View style={styles.gradientItem}>
+          <MoodColorsLine
+            type={'separate'}
+            nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
+            colors={props.colors} />
+        </View>
+        <Spacer height={cx(16)} />
+      </View>
+    </Card>
+  )
+}
+
+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/flags/FlagPage.tsx

@@ -0,0 +1,226 @@
+import React, { useEffect, useMemo } from "react";
+import Page from "@ledvance/base/src/components/Page";
+import { useDeviceInfo, useUAGroupInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { FlatList } from "react-native";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import { Utils } from "tuya-panel-kit";
+import FlagItem from "./FlagItem";
+import { FlagUiInfo } from "./FlagInfo";
+import { getRemoteFlag, saveFlag, useFlag } from "./FlagActions";
+import { useRoute, useNavigation } from '@react-navigation/core'
+import I18n from "@ledvance/base/src/i18n";
+import { useReactive } from "ahooks";
+import { cloneDeep, difference, isEqual, last, map, range } from "lodash";
+import { ui_biz_routerKey } from "../../navigation/Routers";
+import res from "@ledvance/base/src/res";
+import { hsv2Hex } from "@ledvance/base/src/utils";
+import { SceneNodeTransitionMode } from "@ledvance/group-ui-biz-bundle/src/modules/mood/SceneInfo";
+import { Result } from "@ledvance/base/src/models/modules/Result";
+import { WorkMode } from "@ledvance/base/src/utils/interface";
+const cx = Utils.RatioUtils.convertX
+
+export interface FlagPageProps {
+  isSupportMixScene?: boolean
+  isStripLight?: boolean
+  isStringLight?: boolean
+  isSupportTemperature?: boolean
+  isSupportBrightness?: boolean
+  drawToolLight?: {
+    drawToolCode: string
+    drawToolObj2dp: (colors: string[]) => string
+  }
+  getRemoteMoodList?: (groupId: string) => Promise<Result<any>>
+  sceneDataCode?: string
+  workModeCode: string
+  switchLedCode: string
+}
+
+const FlagPage = () => {
+  const params = useRoute().params as FlagPageProps
+  const devInfo = useDeviceInfo()
+  const uaGroupInfo = useUAGroupInfo()
+  const navigation = useNavigation()
+  const [flagState, setFlag] = useFlag({
+    isStripLight: params.isStripLight,
+    isStringLight: params.isStringLight,
+    isMixLight: params.isSupportMixScene
+  })
+  const state = useReactive({
+    loading: true,
+    flags: [] as FlagUiInfo[],
+    moods: [] as any[]
+  })
+  const defParams = {
+    workModeDpCode: params.workModeCode,
+    switchLedDpCode: params.switchLedCode,
+    workMode: WorkMode.Scene,
+    sceneStatus: !params.isSupportMixScene && params.sceneDataCode ? {
+      sceneDataDpCode: params.sceneDataCode
+    } : undefined,
+    drawToolStatus: params.isStripLight && params.drawToolLight ? {
+      drawToolCode: params.drawToolLight.drawToolCode,
+      drawToolObj2dp: params.drawToolLight.drawToolObj2dp
+    } : undefined
+  }
+  const flagId = useMemo(() => {
+    if (flagState && state.flags?.length) {
+      const { flag } = flagState
+      if(params.isStripLight && flag?.colors !== undefined){
+      
+      }
+      // if (flag?.colors !== undefined) {
+      //   const flag = state.flags.find(item => {
+      //     const hexColors = item.colors.map(c => hsv2Hex(c.h, c.s, c.v).toLocaleUpperCase())
+      //     return isEqual(hexColors, flag.colors)
+      //   })
+      //   return flag?.id
+      // }
+      if (flag?.id !== undefined) {
+        return flag.id
+      }
+    }
+
+    return -1
+  }, [JSON.stringify(flagState), JSON.stringify(state.flags)])
+
+  useEffect(() =>{
+    console.log(flagState, '< --- flagstate')
+    console.log(state.flags, '< --- state.flags')
+  }, [flagState, JSON.stringify(state.flags)])
+  useEffect(() => {
+    getRemoteFlagInfo().then()
+    if (params.getRemoteMoodList && !params.isStripLight) {
+      params.getRemoteMoodList(uaGroupInfo.tyGroupId.toString()).then(res => {
+        if (res.success && Array.isArray(res.data)) {
+          state.moods = res.data
+        }
+      })
+    }
+  }, [])
+
+  const getRemoteFlagInfo = async () => {
+    const res = await getRemoteFlag(uaGroupInfo.tyGroupId.toString())
+    if (res.success) {
+      let cloneFlag: FlagUiInfo[] = cloneDeep(res.data) || []
+      if(params.drawToolLight){
+        cloneFlag = cloneFlag.map(flag => {
+          flag.colors = flag.colors.reverse()
+          return flag
+        })
+      }
+      state.flags = cloneFlag
+    }
+  }
+
+  const navigationRoute = (mode: 'add' | 'edit', currentMood?: FlagUiInfo) => {
+    const path = ui_biz_routerKey.group_ui_biz_flag_page_edit
+    navigation.navigate(path, {
+      mode,
+      moods: state.flags,
+      currentMood,
+      moduleParams: params,
+      modDeleteFlag
+    })
+  }
+
+  const modDeleteFlag = async (mode: 'add' | 'edit' | 'del', currentMood: FlagUiInfo) => {
+    const checkedMood: FlagUiInfo = {
+      ...currentMood,
+    }
+
+    let newScene: FlagUiInfo[] = []
+    if (mode === 'add') {
+      newScene = [
+        checkedMood,
+        ...state.flags,
+      ]
+    } else if (mode === 'del') {
+      newScene = state.flags.filter(item => item.id !== checkedMood.id)
+    } else {
+      newScene = state.flags.map(item => {
+        if (item.id === checkedMood.id) {
+          return checkedMood
+        }
+        return item
+      })
+    }
+    const mood = mode === 'del' ? (newScene.length === 0 ? undefined : newScene[0]) : checkedMood
+    const res = await saveFlag(uaGroupInfo.tyGroupId.toString(), cloneDeep(newScene))
+    if (res.success) {
+      state.flags = cloneDeep(newScene)
+      if(mode === 'del' && flagState?.flag && (checkedMood.id !== flagState.flag.id)){
+        return{
+          success: true
+        }
+      }
+      return setFlag({
+        ...defParams,
+        flag: cloneDeep(mood)
+      })
+    }
+    return {
+      success: false
+    }
+  }
+
+  return (
+    <Page
+      headlineText={I18n.getLang('Feature_devicepanel_flags')}
+      backText={devInfo.name}
+      headlineIcon={res.add}
+      onHeadlineIconClick={() => {
+        const useIds = map([
+          ...state.flags,
+          ...state.moods
+        ], 'id')
+        console.log(useIds, '< --- useIds')
+        const idRange = range(0, 256)
+        const unuseId = last(difference(idRange, useIds))
+        if (unuseId !== undefined) {
+          navigationRoute('add', newFlag(unuseId))
+        }
+      }}
+    >
+      <FlatList
+        data={state.flags}
+        renderItem={({ item }) => <FlagItem
+          enable={flagId === item.id}
+          title={item.name}
+          colors={item.colors.map(item => hsv2Hex(item.h, item.s, item.v))}
+          onSwitch={async (enable) => {
+            if (enable) {
+              await setFlag({
+                ...defParams,
+                flag: cloneDeep(item),
+              })
+            }
+          }}
+          onPress={() => {
+            navigationRoute('edit', item)
+          }}
+        />}
+        keyExtractor={item => item.name}
+        ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+        ItemSeparatorComponent={() => (<Spacer />)}
+        ListFooterComponent={() => (<Spacer />)}
+      />
+    </Page>
+  )
+}
+
+export const newFlag = (id: number) => {
+  return {
+    version: 0,
+    id,
+    name: '',
+    mode: SceneNodeTransitionMode.Jump,
+    speed: 70,
+    colors: [
+      { h: 48, s: 100, v: 100 },
+      { h: 360, s: 100, v: 86 },
+    ],
+    whiteColors: [{ brightness: 100, colorTemp: 0 }],
+  }
+}
+
+export default FlagPage

package/src/navigation/Routers.ts

@@ -7,6 +7,8 @@ import AddMoodPage from '../modules/mood/AddMoodPage'
 import DynamicMoodEditorPage from '../modules/mood/DynamicMoodEditorPage'
 import StaticMoodEditorPage from '../modules/mood/StaticMoodEditorPage'
 import SelectPage from '../modules/select/SelectPage'
+import FlagPage from '../modules/flags/FlagPage'
+import FlagEditPage from '../modules/flags/FlagEditPage'
 
 export const ui_biz_routerKey = {
   'group_ui_biz_timer': 'group_ui_biz_timer',
@@ -17,6 +19,8 @@ export const ui_biz_routerKey = {
   'group_ui_biz_static_mood_edit': 'group_ui_biz_static_mood_edit',
   'group_ui_biz_dynamic_mood_edit': 'group_ui_biz_dynamic_mood_edit',
   'group_ui_biz_select_page': 'group_ui_biz_select_page',
+  'group_ui_biz_flag_page': 'group_ui_biz_flag_page',
+  'group_ui_biz_flag_page_edit': 'group_ui_biz_flag_page_edit'
 }
 
 export const TimerRouters: NavigationRoute[] = [
@@ -94,4 +98,23 @@ export const SelectPageRouters: NavigationRoute[] = [
       ...TransitionPresets.ModalPresentationIOS,
     },
   },
+]
+
+export const FlagPageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.group_ui_biz_flag_page,
+    component: FlagPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  },
+  {
+    name: ui_biz_routerKey.group_ui_biz_flag_page_edit,
+    component: FlagEditPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  },
 ]