@ledvance/ui-biz-bundle 1.1.105 → 1.1.107

package/src/newModules/diyScene/DiySceneEditorPage.tsx

@@ -0,0 +1,359 @@
+import React, {useEffect, useMemo} from 'react';
+import {Image, ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {cloneDeep, isEqual} from 'lodash';
+import {useReactive} from 'ahooks';
+import Page from '@ledvance/base/src/components/Page';
+import I18n from '@ledvance/base/src/i18n';
+import {useNavigation} from '@react-navigation/native';
+import TextField from '@ledvance/base/src/components/TextField';
+import {Utils} from 'tuya-panel-kit';
+import Card from '@ledvance/base/src/components/Card';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import res from '@ledvance/base/src/res';
+import TextButton from '@ledvance/base/src/components/TextButton';
+import {useParams} from '@ledvance/base/src/hooks/Hooks';
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
+import {showDialog} from '@ledvance/base/src/utils/common';
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
+import ThemeType from '@ledvance/base/src/config/themeType'
+import DiySceneNodeView from "@ledvance/base/src/components/DiySceneNodeView";
+import { useLoveScenes} from "./DiySceneActions";
+import LdvSlider from "@ledvance/base/src/components/ldvSlider";
+import {Result} from "@ledvance/base/src/models/modules/Result";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+import {DiySceneInfo} from "@ledvance/base/src/utils/interface";
+
+const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
+
+export interface DiySceneEditorPageParams {
+  mode: 'add' | 'edit'
+  currentScene: DiySceneInfo
+  nameRepeat: (mood: DiySceneInfo) => boolean
+  sceneInfoOperation: (mode: 'add' | 'edit' | 'del', currentScene?: DiySceneInfo) => Promise<Result<any>>
+}
+
+export interface DiySceneEditorPageState {
+  headline: string;
+  h: number
+  s: number
+  v: number
+  sceneInfo: DiySceneInfo;
+  loading: boolean;
+  currentNode: number,
+  position: 'Top' | 'Bottom'
+}
+
+const DiySceneEditorPage = (props: { theme?: ThemeType }) => {
+  const navigation = useNavigation();
+  const routeParams = useParams<DiySceneEditorPageParams>();
+  const params = cloneDeep(routeParams);
+  const [loveScenes, setLoveScenes] = useLoveScenes()
+  const state = useReactive<DiySceneEditorPageState>({
+    headline: '',
+    h: 359,
+    s: 100,
+    v: 100,
+    sceneInfo: params.currentScene,
+    loading: false,
+    currentNode: 0,
+    position: 'Top'
+  });
+
+  useEffect(() => {
+    state.headline = I18n.getLang(
+      params.mode === 'add' ? 'string_light_pp_sm_headline_add' : 'edit_static_mood_headline_text'
+    );
+  }, [params.mode]);
+
+  useEffect(() => {
+    if (state.sceneInfo.nodes.length > 0) {
+      const color = state.sceneInfo.nodes[0].top;
+      state.h = color.h
+      state.s = Math.round(color.s / 10)
+      state.v = Math.round((state.sceneInfo.v || 1000) / 10)
+    }
+  }, []);
+
+  const onRightClick = async () => {
+    if (state.loading || !canSaveMoodData) return;
+    state.loading = true;
+    const newScene: DiySceneInfo = {
+      ...state.sceneInfo
+    };
+    const res = await params.sceneInfoOperation(params.mode, newScene);
+    state.loading = false;
+    if (res.success) {
+      navigation.navigate(ui_biz_routerKey.ui_biz_diy_scene_page);
+    }
+  };
+
+  const nameRepeat = useMemo(() => {
+    return params.nameRepeat(state.sceneInfo)
+  }, [state.sceneInfo.name]);
+
+  const isLove = useMemo(() => {
+    return loveScenes.some(it => it === state.sceneInfo.id)
+  }, [loveScenes]);
+
+  const checkSceneChanged = useMemo(() => {
+    return isEqual(state.sceneInfo, params.currentScene)
+  }, [JSON.stringify(state.sceneInfo), {}])
+
+  const canSaveMoodData = useMemo(() => {
+    return state.sceneInfo.name.length > 0 && state.sceneInfo.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkSceneChanged)
+  }, [nameRepeat, state.sceneInfo.name, checkSceneChanged, params.currentScene])
+
+  const toggleLoveScene = (id: number) => {
+    const newLoveScenes = loveScenes
+    const index = newLoveScenes.indexOf(id)
+    if (index !== -1) {
+      if (newLoveScenes.length <= 2) {
+        showLoveNumAlert()
+      } else {
+        newLoveScenes.splice(index, 1)
+      }
+    } else {
+      if (newLoveScenes.length >= 14) {
+        showLoveNumAlert()
+      } else {
+        newLoveScenes.push(id)
+      }
+    }
+    setLoveScenes(newLoveScenes).then()
+  }
+
+  const showLoveNumAlert = () => {
+    showDialog({
+      method: 'alert',
+      title: I18n.getLang('love_mood_alert_title'),
+      subTitle: I18n.getLang('love_mood_alert_content'),
+      onConfirm: async (_, { close }) => {
+        close()
+      }
+    })
+  }
+
+
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    name: {
+      marginHorizontal: cx(24),
+    },
+    nodeCard: {
+      marginHorizontal: cx(24),
+    },
+    nodeOperation: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      marginTop: cx(12),
+      paddingHorizontal: cx(12),
+    },
+    nodeList: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      flexWrap: 'wrap',
+    },
+    adjustCard: {
+      marginTop: cx(12),
+      marginHorizontal: cx(24),
+    },
+    fanAdjustCard: {
+      marginHorizontal: cx(24),
+    },
+    preview: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    deleteBtn: {
+      width: '100%',
+      height: cx(50),
+      backgroundColor: props.theme?.button.delete,
+      borderRadius: cx(8),
+    },
+    deleteBtnText: {
+      color: props.theme?.button.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+  })
+
+  return (
+    <Page
+      backText={I18n.getLang('mesh_device_detail_mode')}
+      showBackDialog={!checkSceneChanged}
+      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}
+      headlineIconContent={
+        state.sceneInfo.type !== 'DIY' && <TouchableOpacity onPress={() => {
+          toggleLoveScene(state.sceneInfo.id)
+        }}>
+          {isLove ? <Image source={res.like} style={{width: cx(24), height: cx(24)}}/>
+            : <Image source={res.un_like}
+                     style={{width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor}}/>}
+          </TouchableOpacity>
+      }
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={onRightClick}
+      loading={state.loading}
+    >
+      <ScrollView style={{ flex: 1 }} nestedScrollEnabled={true}>
+        <View style={styles.root}>
+          <TextField
+            style={styles.name}
+            value={state.sceneInfo.name}
+            placeholder={I18n.getLang('edit_static_mood_inputfield_topic_text')}
+            onChangeText={text => {
+              state.sceneInfo.name = text;
+            }}
+            maxLength={33}
+            showError={state.sceneInfo.name.length > 32 || nameRepeat}
+            tipColor={nameRepeat ? props.theme?.global.error : 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'
+            )}
+          />
+          {
+            state.sceneInfo.type === 'DIY' && <Card style={styles.nodeCard}>
+                  <View style={styles.nodeOperation}>
+                    {state.sceneInfo.nodes.length < 8 && <TouchableOpacity onPress={() => {
+                      console.log('onPress add node')
+                      const color = {h: state.h, s: state.s * 10, v: 1000}
+                      state.sceneInfo.nodes.push({top: color, bottom: color});
+                    }}>
+                        <Image source={res.ic_plus} style={{tintColor: props.theme?.icon.primary}} />
+                    </TouchableOpacity>}
+                    { state.sceneInfo.nodes.length > 2 && <TouchableOpacity onPress={() => {
+                      console.log('onPress delete node')
+                      state.sceneInfo.nodes.splice(state.currentNode, 1)
+                      state.currentNode = state.currentNode === state.sceneInfo.nodes.length ? 0 : state.currentNode
+                      console.log('nextNode', state.currentNode)
+                    }}>
+                        <Image source={res.ic_mood_del} style={{marginLeft: cx(5),tintColor: props.theme?.icon.primary}} />
+                    </TouchableOpacity>}
+                  </View>
+                  <View style={styles.nodeList}>
+                    {state.sceneInfo.nodes.map((node, index) => (
+                      <DiySceneNodeView
+                        key={index}
+                        isCurrent={state.currentNode === index}
+                        position={state.position}
+                        topColor={node.top}
+                        bottomColor={node.bottom}
+                        onChangePosition={(position: 'Top' | 'Bottom') => {
+                          state.currentNode = index
+                          state.position = position
+                          const color = state.sceneInfo.nodes[index];
+                          state.h = position === 'Top' && color.top.h || color.bottom.h
+                          state.s = Math.round((position === 'Top' && color.top.s || color.bottom.s) / 10)
+                        }}
+                      />
+                    ))}
+                  </View>
+              </Card>
+          }
+          <Card style={styles.adjustCard}>
+            <LdvSwitch
+              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+              color={''}
+              colorAlpha={1}
+              enable={false}
+              setEnable={() => {}}
+              showSwitch={false}
+            />
+            {
+              state.sceneInfo.type === 'DIY' && <ColorAdjustView
+                    reserveSV={true}
+                    h={state.h}
+                    s={state.s}
+                    v={state.v}
+                    onHSVChange={() => {}}
+                    onHSVChangeComplete={(h, s, v) => {
+                      state.h = h
+                      state.s = s
+                      state.v = v
+                      state.sceneInfo.v = v * 10
+                      const node = state.sceneInfo.nodes && state.sceneInfo.nodes[state.currentNode]
+                      if (node) {
+                        const color = { h: h, s: s * 10, v: 1000 }
+                        state.position === 'Top' && (node.top = color) || (node.bottom = color)
+                      }
+                    }} />
+            }
+            {
+              state.sceneInfo.type !== 'DIY' && <LdvSlider
+                    title={I18n.getLang('light_sources_tile_rgb_lighting_brightness')}
+                    min={1}
+                    value={Math.round((state.sceneInfo.v || 1000) / 10)}
+                    onValueChange={(v: number) => {state.sceneInfo.v = v * 10}}
+                    onSlidingComplete={(v: number) => {state.sceneInfo.v = v * 10}}/>
+            }
+            <Spacer />
+          </Card>
+
+          {
+            state.sceneInfo.type !== 'Static' && <Card style={styles.adjustCard}>
+                  <LdvSlider
+                      title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_text')}
+                      value={state.sceneInfo.speed || 1}
+                      min={1}
+                      max={100}
+                      onValueChange={(v: number) => {
+                        state.sceneInfo.speed = v
+                      }}
+                      onSlidingComplete={(v: number) => {
+                        state.sceneInfo.speed = v
+                      }}
+                      subTitleStr={`${(state.sceneInfo.speed || 1)}/100`}/>
+              </Card>
+          }
+
+          {(params.mode === 'edit' && state.sceneInfo.type === 'DIY') && (
+            <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={() => {
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang('string_light_pp_dialog_sm_ed_headline_d'),
+                    subTitle: I18n.getLang(`strip_light_static_mood_edit_dialog_text`),
+                    onConfirm: async (_, { close }) => {
+                      close();
+                      state.loading = true;
+                      const res = await params.sceneInfoOperation('del', state.sceneInfo);
+                      state.loading = false;
+                      if (res.success) {
+                        navigation.navigate(ui_biz_routerKey.ui_biz_diy_scene_page);
+                      }
+                    }
+                  })
+                }}
+              />
+            </View>
+          )}
+          <Spacer />
+        </View>
+      </ScrollView>
+    </Page>
+  );
+};
+
+export default withTheme(DiySceneEditorPage)

package/src/newModules/diyScene/DiyScenePage.tsx

@@ -0,0 +1,297 @@
+import React, {useCallback, useEffect, useMemo} from 'react';
+import Page from '@ledvance/base/src/components/Page';
+import {Utils} from 'tuya-panel-kit';
+import {useDeviceId, useDeviceInfo, useMoods,} from '@ledvance/base/src/models/modules/NativePropsSlice';
+import {useReactive} from 'ahooks';
+import I18n from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+import {FlatList, Image, Platform, StyleSheet, TouchableOpacity, View} from 'react-native';
+import Tag from '@ledvance/base/src/components/Tag';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import InfoText from '@ledvance/base/src/components/InfoText';
+import {useNavigation} from '@react-navigation/core';
+import {showDialog} from '@ledvance/base/src/utils/common';
+import ThemeType from '@ledvance/base/src/config/themeType'
+import DiySceneItem from "@ledvance/base/src/components/DiySceneItem";
+import {
+  getMixSceneList,
+  saveMixSceneList,
+  useDiySceneId,
+  useSceneData,
+  useSceneId,
+  useSceneStatus,
+  useSwitchLed,
+  useWorkMode
+} from "./DiySceneActions";
+import {cloneDeep, difference, head, range} from "lodash";
+import {DiySceneInfo, SceneStatusType, WorkMode} from "@ledvance/base/src/utils/interface";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+
+const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
+
+const MAX_MOOD_COUNT = 255;
+
+const DiyScenePage = (props: { theme?: ThemeType }) => {
+  const deviceInfo = useDeviceInfo();
+  const devId = useDeviceId();
+  const [switchLed] = useSwitchLed()
+  const [workMode, setWorkMode] = useWorkMode()
+  const [sceneStatusId, setSceneStatus] = useSceneStatus()
+  const [sceneId] = useSceneId()
+  const [diySceneId] = useDiySceneId()
+  const [setSceneData] = useSceneData()
+  const [scenes, setScenes] = useMoods()
+  const navigation = useNavigation();
+  const DEFAULT_SCENE: DiySceneInfo = {
+    id: -1,
+    type: 'DIY',
+    name: '',
+    speed: 50,
+    v: 1000,
+    nodes: [{top: {h: 359, s: 1000, v: 1000}, bottom: {h: 120, s: 1000, v: 1000}},
+      {top: {h: 359, s: 1000, v: 1000}, bottom: {h: 120, s: 1000, v: 1000}}]
+  }
+
+  const state = useReactive({
+    currentMood: undefined,
+    staticTagChecked: true,
+    dynamicTagChecked: true,
+    diyTagChecked: true,
+    showAddMoodPopover: false,
+    originScenes: cloneDeep(scenes) as DiySceneInfo[],
+    filterMoods: [] as DiySceneInfo[],
+    loading: false,
+    timerId: undefined as any,
+    flag: Symbol(),
+  });
+
+  const filterScenes = useMemo(() => {
+    return state.originScenes.filter(item => {
+      return [state.staticTagChecked, state.dynamicTagChecked, state.diyTagChecked].every(it => !it)
+        || (state.staticTagChecked && item.type === 'Static')
+        || (state.dynamicTagChecked && item.type === 'Dynamic')
+        || (state.diyTagChecked && item.type === 'DIY')
+    })
+  }, [JSON.stringify(state.originScenes), state.staticTagChecked, state.dynamicTagChecked, state.diyTagChecked])
+
+  const newSceneId = useMemo(() => {
+    const existsIds = state.originScenes.filter(it => it.type === 'DIY').map(it => it.id)
+    const idRange = range(1, 256);
+    const newId: number = head(difference(idRange, existsIds)) || 0;
+    return newId
+  }, [state.originScenes])
+
+  useEffect(() => {
+    if (sceneId) {
+      setSceneStatus(SceneStatusType.Scene, sceneId).then()
+    }
+  }, [sceneId])
+
+  useEffect(() => {
+    if (diySceneId) {
+      setSceneStatus(SceneStatusType.DIY, diySceneId).then()
+    }
+  }, [diySceneId])
+
+  const getRemoteMixSceneInfo = async (isRefresh?: boolean) => {
+    state.loading = true
+    const res = await getMixSceneList(devId, isRefresh)
+    state.loading = false
+    if (res.success && Array.isArray(res.data)) {
+      setScenes(res.data)
+      state.originScenes = cloneDeep(res.data);
+    }
+  }
+
+  const navigationRoute = (mode: 'add' | 'edit' | 'del', currentScene?: DiySceneInfo) => {
+    navigation.navigate(ui_biz_routerKey.ui_biz_diy_scene_edit_page, {
+      mode,
+      currentScene,
+      nameRepeat,
+      sceneInfoOperation,
+    });
+  };
+
+  const getItemEnable = useCallback(
+    (sceneInfo: DiySceneInfo) => {
+      if (sceneStatusId !== -1) {
+        return sceneStatusId === sceneInfo.id && workMode === WorkMode.Scene && switchLed
+      }
+      return false
+    },
+    [workMode, switchLed, sceneStatusId]
+  );
+
+  const nameRepeat = useCallback((scene: DiySceneInfo) => {
+    return !!state.originScenes.filter(m => m.id !== scene.id).find(m => m.name === scene.name)
+  }, [state.originScenes])
+
+  const sceneInfoOperation = async (mode: 'add' | 'edit' | 'del' | 'set', currentScene: DiySceneInfo) => {
+    const checkedScene: DiySceneInfo = {
+      ...currentScene
+    };
+    if (mode === 'set') {
+      await setSceneStatus(checkedScene.type === 'DIY' ? SceneStatusType.DIY : SceneStatusType.Scene, checkedScene.id)
+      return setSceneData(checkedScene);
+    }
+    let newSceneList: DiySceneInfo[]
+    if (mode === 'add') {
+      checkedScene.id = newSceneId
+      newSceneList = [checkedScene, ...state.originScenes]
+    } else if (mode === 'del') {
+      newSceneList = state.originScenes.filter(item => item.id !== checkedScene.id)
+    } else {
+      newSceneList = state.originScenes.map(item => {
+        if (item.id === checkedScene.id) {
+          return checkedScene
+        }
+        return item
+      })
+    }
+    const scene = mode === 'del' ? (newSceneList.length === 0 ? undefined : newSceneList[0]) : checkedScene
+    const res = await saveMixSceneList(devId, newSceneList)
+    if (res.success) {
+      state.originScenes = cloneDeep(newSceneList);
+      setScenes(cloneDeep(newSceneList))
+      if (scene) {
+        if (mode === 'del') {
+          if (currentScene.id !== sceneStatusId || !switchLed) {
+            return {
+              success: true,
+            };
+          }
+        }
+        setSceneData(checkedScene).then(() => {
+          setSceneStatus(checkedScene.type === 'DIY' ? SceneStatusType.DIY : SceneStatusType.Scene, checkedScene.id).then()
+        })
+      } else {
+        if (workMode === WorkMode.Scene) {
+          setWorkMode(WorkMode.Colour).then()
+        }
+      }
+      return {
+        success: true,
+      };
+    } else {
+      return {
+        success: false,
+      };
+    }
+  }
+
+  const styles = StyleSheet.create({
+    tagLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+    },
+    infoLine: {
+      marginHorizontal: cx(24),
+    },
+    addMoodPopover: {
+      position: 'absolute',
+      right: cx(60),
+      top: Platform.OS === 'android' ? cx(90) : cx(130),
+      maxWidth: cx(200),
+      backgroundColor: props.theme?.card.background,
+    },
+    popoverItem: {
+      padding: cx(5),
+      alignItems: 'flex-start',
+      alignSelf: 'flex-start'
+    },
+  })
+
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        headlineText={I18n.getLang('mood_overview_headline_text')}
+        headlineIcon={state.originScenes.length < MAX_MOOD_COUNT ? res.add : undefined}
+        onHeadlineIconClick={() => {
+          navigationRoute('add', cloneDeep(DEFAULT_SCENE))
+        }}
+        loading={state.loading}
+      >
+        <View style={styles.tagLine}>
+          <Tag
+            checked={state.staticTagChecked}
+            text={I18n.getLang('mood_overview_filter_name_text1')}
+            onCheckedChange={checked => {
+              state.staticTagChecked = checked;
+            }}
+          />
+          <Spacer width={cx(8)} height={0} />
+          <Tag
+            checked={state.dynamicTagChecked}
+            text={I18n.getLang('mood_overview_filter_name_text2')}
+            onCheckedChange={checked => {
+              state.dynamicTagChecked = checked;
+            }}
+          />
+          <Spacer width={cx(8)} height={0} />
+          <Tag
+            checked={state.diyTagChecked}
+            text={I18n.getLang('mood_overview_field_chip_diy')}
+            onCheckedChange={checked => {
+              state.diyTagChecked = checked;
+            }}
+          />
+        </View>
+        <TouchableOpacity style={{ alignItems: 'flex-end',paddingRight: cx(24) }}
+                          onPress={() => {
+                            showDialog({
+                              method: 'confirm',
+                              title: I18n.getLang('mood_resetbutton'),
+                              subTitle: I18n.getLang('reset_mooddescription'),
+                              onConfirm: async (_, { close }) => {
+                                close()
+                                await getRemoteMixSceneInfo(true)
+                              }
+                            })
+                          }}
+        >
+          <Image source={res.ic_refresh} style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }} />
+        </TouchableOpacity>
+        <Spacer height={cx(10)} />
+        {state.originScenes.length >= MAX_MOOD_COUNT && (
+          <View style={styles.infoLine}>
+            <Spacer height={cx(10)} />
+            <InfoText
+              icon={res.ic_warning_amber}
+              text={I18n.getLang('mood_overview_warning_max_number_text')}
+              contentColor={props.theme?.global.warning}
+            />
+            <Spacer height={cx(6)} />
+          </View>
+        )}
+        <FlatList
+          data={filterScenes}
+          renderItem={({ item }) => {
+            return (
+              <DiySceneItem
+                enable={getItemEnable(item)}
+                scene={item}
+                onPress={() => {
+                  navigationRoute('edit', item)
+                }}
+                onSwitch={async _ => {
+                  state.loading = true;
+                  await sceneInfoOperation('set', item);
+                  state.loading = false;
+                }}
+              />
+            );
+          }}
+          ListHeaderComponent={() => <Spacer height={cx(10)} />}
+          ItemSeparatorComponent={() => <Spacer />}
+          ListFooterComponent={() => <Spacer />}
+          keyExtractor={item => `${item.name}`}
+        />
+      </Page>
+    </>
+  );
+};
+
+export default withTheme(DiyScenePage)

package/src/newModules/diyScene/Router.ts

@@ -0,0 +1,25 @@
+import {NavigationRoute} from "tuya-panel-kit";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+import DiyScenePage from "./DiyScenePage";
+import DiySceneEditorPage from "./DiySceneEditorPage";
+
+const DiyScenePageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.ui_biz_diy_scene_page,
+    component: DiyScenePage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+  {
+    name: ui_biz_routerKey.ui_biz_diy_scene_edit_page,
+    component: DiySceneEditorPage,
+    options: {
+      hideTopbar: true,
+      showOfflineView: false,
+    },
+  },
+]
+
+export default DiyScenePageRouters