fix

src/app.tsx

@@ -10,12 +10,12 @@ import { devices } from '@/devices';
 const { initPanelEnvironment } = kit;
 
 interface Props {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 initPanelEnvironment({ useDefaultOffline: true });
 
-class App extends React.Component<Props>{
+class App extends React.Component<Props> {
   componentDidMount() {
     console.info('app did mount ');
   }
@@ -24,10 +24,9 @@ class App extends React.Component<Props>{
     console.info(e, '=== App onLaunch');
   }
 
-
   render() {
-    return <SdmProvider value={devices.fan} >{this.props.children}</SdmProvider>;
+    return <SdmProvider value={devices.fan}>{this.props.children}</SdmProvider>;
   }
 }
 
-export default App
+export default App;

src/components/fan-vertical/index.tsx

 import React from 'react';
 import { DpBooleanAction, DpCommonAction } from '@tuya-miniapp/sdm';
 import { useSdmProps } from '@ray-js/sdm-react';
-import {devices} from '@/devices'
+import { devices } from '@/devices';
 import styles from '../../pages/home/index.module.less';
-import { Image, View, Text } from '@ray-js/components'
-import horizontalOff from '../../../public/icon-horizontal-off.png'
-import horizontalOn from '../../../public/icon-horizontal-on.png'
-import verticalOn from '../../../public/icon-vertical-on.png'
-import verticalOff from '../../../public/icon-vertical-off.png'
-
+import { Image, View, Text } from '@ray-js/components';
+import horizontalOff from '../../../public/icon-horizontal-off.png';
+import horizontalOn from '../../../public/icon-horizontal-on.png';
+import verticalOn from '../../../public/icon-vertical-on.png';
+import verticalOff from '../../../public/icon-vertical-off.png';
 
 export const FanVertical = React.memo(() => {
+  const fanHorizontalCode = 'fan_horizontal';
+  const fanVerticalCode = 'fan_vertical';
+  const fanVerticalSwitchCode = 'switch_vertical';
+  const fanHorizontalSwitchCode = 'switch_horizontal';
 
-    const fanHorizontalCode = 'fan_horizontal'
-    const fanVerticalCode = 'fan_vertical'
-    const fanVerticalSwitchCode = 'switch_vertical'
-    const fanHorizontalSwitchCode = 'switch_horizontal'
-
-
-    const fanHorizontalVal = useSdmProps((props) =>  props[fanHorizontalCode])
-    const fanVerticalVal = useSdmProps((props) => props[fanVerticalCode])
-    const fanHorizontalSwitch = useSdmProps((props) =>  props[fanHorizontalSwitchCode])
-    const fanVerticalSwitch = useSdmProps((props) => props[fanVerticalSwitchCode])
+  const fanHorizontalVal = useSdmProps(props => props[fanHorizontalCode]);
+  const fanVerticalVal = useSdmProps(props => props[fanVerticalCode]);
+  const fanHorizontalSwitch = useSdmProps(props => props[fanHorizontalSwitchCode]);
+  const fanVerticalSwitch = useSdmProps(props => props[fanVerticalSwitchCode]);
 
-    const device  = devices.fan
-    const actions = device.model.actions
-
-    const fanHorizontalAction = actions[fanHorizontalCode] as DpCommonAction<string>
-    const fanVerticalAction = actions[fanVerticalCode] as DpCommonAction<string>
-    const fanHorizontalSwitchAction = actions[fanHorizontalSwitchCode] as DpBooleanAction
-    const fanVerticalSwitchAction = actions[fanVerticalSwitchCode] as DpBooleanAction
+  const device = devices.fan;
+  const actions = device.model.actions;
 
+  const fanHorizontalAction = actions[fanHorizontalCode] as DpCommonAction<string>;
+  const fanVerticalAction = actions[fanVerticalCode] as DpCommonAction<string>;
+  const fanHorizontalSwitchAction = actions[fanHorizontalSwitchCode] as DpBooleanAction;
+  const fanVerticalSwitchAction = actions[fanVerticalSwitchCode] as DpBooleanAction;
 
   const verticalMenu = [
     {
-          title:'Vertical',
-          icon:verticalOn,
+      title: 'Vertical',
+      icon: verticalOn,
       offIcon: verticalOff,
-          mode:'vertical',
-          value: fanVerticalVal
-        }, {
-          title:'Horizontal',
-          icon:horizontalOn,
+      mode: 'vertical',
+      value: fanVerticalVal,
+    },
+    {
+      title: 'Horizontal',
+      icon: horizontalOn,
       offIcon: horizontalOff,
-          mode:'horizontal',
-          value: fanHorizontalVal
-        }
-    ]
+      mode: 'horizontal',
+      value: fanHorizontalVal,
+    },
+  ];
 
   function handleVerticalMenu(index) {
     if (index == 0) {
@@ -57,71 +54,93 @@ export const FanVertical = React.memo(() => {
       //   fanVerticalSwitchAction.off()
 
       // }
-          fanVerticalSwitchAction.toggle()
-         
-        }else {
+      fanVerticalSwitchAction.toggle();
+    } else {
       //   if (!fanHorizontalSwitch) {
       //     fanHorizontalAction.set(String(90))
       //     fanHorizontalSwitchAction.on()
       //  }else {
       //   fanHorizontalSwitchAction.off()
       //  }
-         fanHorizontalSwitchAction.toggle()
+      fanHorizontalSwitchAction.toggle();
     }
   }
 
   function submenuItem(index, arr = verticalMenu, clickFun = handleVerticalMenu) {
-         const isOn = index == 0 ? fanVerticalSwitch : fanHorizontalSwitch
-         const {title, icon, offIcon} = arr[index]
+    const isOn = index == 0 ? fanVerticalSwitch : fanHorizontalSwitch;
+    const { title, icon, offIcon } = arr[index];
     return (
       <View className={styles.button}>
-            <Image className={styles.menuImage} src={isOn ? icon:offIcon} onClick={() => {clickFun(index)}}/>
+        <Image
+          className={styles.menuImage}
+          src={isOn ? icon : offIcon}
+          onClick={() => {
+            clickFun(index);
+          }}
+        />
         <Text className={styles.bTitle}>{title}</Text>
       </View>
-         )
+    );
   }
 
   const clickNum = (val, index) => {
-         console.log(val, index)
+    console.log(val, index);
     if (index == 0 && fanVerticalSwitch) {
-          fanVerticalAction.set(String(val))
-        }else if (index == 1 && fanHorizontalSwitch) {
-          fanHorizontalAction.set(String(val))
-        }
+      fanVerticalAction.set(String(val));
+    } else if (index == 1 && fanHorizontalSwitch) {
+      fanHorizontalAction.set(String(val));
     }
-    
+  };
 
   function verticalItem(index) {
-        const item = verticalMenu[index]
-        const isBlack = (index == 0 && fanVerticalSwitch) || (index == 1 && fanHorizontalSwitch)
-        const textColor = (subIndex) => {
-          return {color: isBlack && (Number(item.value) == (subIndex * 30)) ? '#000000':'rgba(0,0,0,0.4)',
-          width:'33.3%',
-          textAlign:'center',
-          lineHeight:'64px',
-          fontWeight:'500'
-        }}
+    const item = verticalMenu[index];
+    const isBlack = (index == 0 && fanVerticalSwitch) || (index == 1 && fanHorizontalSwitch);
+    const textColor = subIndex => {
+      return {
+        color: isBlack && Number(item.value) == subIndex * 30 ? '#000000' : 'rgba(0,0,0,0.4)',
+        width: '33.3%',
+        textAlign: 'center',
+        lineHeight: '64px',
+        fontWeight: '500',
+      };
+    };
 
     return (
       <View className={styles.verticalItem}>
         {submenuItem(index, verticalMenu, handleVerticalMenu)}
         <View className={styles.verticalNumBg}>
-              <View style={textColor(1)} onClick={() => {clickNum(30, index)}}>30</View>
-              <View style={textColor(2)} onClick={() => {clickNum(60, index)}}>60</View>
-              <View style={textColor(3)} onClick={() => {clickNum(90, index)}}>90</View>
+          <View
+            style={textColor(1)}
+            onClick={() => {
+              clickNum(30, index);
+            }}
+          >
+            30
+          </View>
+          <View
+            style={textColor(2)}
+            onClick={() => {
+              clickNum(60, index);
+            }}
+          >
+            60
+          </View>
+          <View
+            style={textColor(3)}
+            onClick={() => {
+              clickNum(90, index);
+            }}
+          >
+            90
+          </View>
         </View>
       </View>
-        )
+    );
   }
   return (
     <View>
-        {
-       verticalItem(0)
-       }
-       {
-        verticalItem(1)
-        }
+      {verticalItem(0)}
+      {verticalItem(1)}
     </View>
-   )
-
-})
\ No newline at end of file
+  );
+});

src/pages/home/index.module.less

@@ -105,13 +105,22 @@
   position: relative;
 }
 
-
+.modalOverlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width:100vw;
+  height: 100vh;
+  background-color: transparent;
+  z-index: 999;
+}
 
 .modalBg {
-  // position: absolute;
-  // left: 0;
-  // right: 0;
-  margin-bottom: -164px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  bottom: 140px;
   display: flex;
   flex-direction: column;
   // align-items: flex-end;