fix

src/app.tsx

@@ -5,7 +5,7 @@ import '@/i18n';
 import composeLayout from './composeLayout';
 import { SdmProvider } from '@ray-js/sdm-react';
 import { devices } from '@/devices';
-import { ProductName } from '@/constants';
+// import { ProductName } from '@/constants';
 
 const { initPanelEnvironment } = kit;
 
@@ -14,7 +14,7 @@ interface Props {
 }
 
 initPanelEnvironment({ useDefaultOffline: true });
-class App extends React.Component<Props> {
+class App extends React.Component<Props>{
   componentDidMount() {
     console.info('app did mount ');
   }
@@ -25,7 +25,7 @@ class App extends React.Component<Props> {
 
 
   render() {
-    return <SdmProvider value={devices[ProductName]} >{this.props.children}</SdmProvider>;
+    return <SdmProvider value={devices.fan} >{this.props.children}</SdmProvider>;
   }
 }
 

src/components/light-panel/index.module.less

@@ -9,23 +9,28 @@
   // position: absolute;
   // top: calc(50vh - 175px);
   margin-top: 90px;
-  padding: 20px 0 40px;
+  padding: 0 0 40px;
   color: #000000;
   z-index: 9999;
 }
 .lightModalTop {
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  // padding: 0 20px;
   width: 100%;
   justify-content: space-between;
   font-size: 16px;
   margin-bottom: 40px;
+  
+}
+.lightCloseBg {
+  padding: 20px 20px 0;
 }
 .lightModalClose {
   width: 24px;
   height: 24px;
 }
+
 .lightMiddle {
   // width: 100%;
   height: 155px;
@@ -86,6 +91,7 @@
   top: 1px;
   bottom: 1px;
   z-index: 2;
+  border-radius: 0 0 0 16px;
 }
 .lightBtn {
   width: 310px;

src/components/light-panel/index.tsx

@@ -23,7 +23,7 @@ export const LightPanel = React.memo<Props>(props => {
 
     const brightCode = 'bright_value'
     const temperatureCode = 'temp_value'
-    const switchCode = 'switch_led'
+    const switchCode = 'light'
 
    let { isShow, setModal} = props;
    const brightVal = useSdmProps(dpState => {
@@ -33,8 +33,8 @@ export const LightPanel = React.memo<Props>(props => {
    });
    const temperatureVal = useSdmProps(dpState => {
      const val = dpState[temperatureCode]
-     const percent = getValueInRange(val || 0, cctRange).percent
-     return percent
+    //  const percent = getValueInRange(val || 0, cctRange).percent
+     return val
    });
    const switchVal = useSdmProps(dpState => dpState[switchCode]);
 
@@ -44,12 +44,14 @@ export const LightPanel = React.memo<Props>(props => {
    const brightAction = actions[brightCode] as DpCommonAction<number>
    const temperatureAction = actions[temperatureCode] as DpCommonAction<number>
    
-   const [point, setPoint] = useState({pageX: getOrignPointX(), pageY: 234})
+   const [point, setPoint] = useState({pageX: getOrignPointX(), pageY: 250})
    const [selectColor, setColor] = useState(pointToRGB(point.pageX)) 
 
    function getOrignPointX() {
     const percent = getValueInRange(temperatureVal || 10, cctRange).percent
-    return 28 + 319 * Number((percent / 100).toFixed())
+    const originX = 28 + 319 * (percent / 100)
+    console.log(temperatureVal, percent, originX);
+    return originX
   }
   //0-value是值 1-value是百分比 左边最小值是0，右边最大值range[1]，起始位置rang[0]
   function getValueInRange(value, range, type = 0) {
@@ -61,20 +63,14 @@ export const LightPanel = React.memo<Props>(props => {
   }
 
     function touchStart(e) {
-        console.log(e, 'start touch');
         handlePoint(e)  
-
     }
 
     function handleTouch(e) {
-    // console.log(e, 'handle touch');
-    // const point = e.changedTouches.length && e.changedTouches[0]
-    // console.log(point, 'pppppppoint');
-    // handlePoint(e)
+        handlePoint(e)
     }
 
     function touchEnd(e) {
-    console.log(e, 'end touch');
         handlePoint(e)
     }
 
@@ -145,7 +141,7 @@ export const LightPanel = React.memo<Props>(props => {
    
       function progressMove(e) {
        console.log(e, 'progressMove');
-      //  handleProgress(e)
+       handleProgress(e)
       }
    
       function progressEnd(e) {
@@ -172,12 +168,13 @@ export const LightPanel = React.memo<Props>(props => {
     <View className={styles.modalback} style={{background:'rgba(0, 0, 0, 0.1)',backdropFilter:'blur(35px)', visibility: isShow ? 'visible':'hidden' }}>
     <View className={styles.lightModal}>
        <View className={styles.lightModalTop}>
-         <View>Light
-         </View>
+         <View className={styles.lightCloseBg}>Light</View>
+         <View className={styles.lightCloseBg}>
          <Image className={styles.lightModalClose} src={iconClose} onClick={() => {
            setModal(false)
          }}></Image>
          </View>
+       </View>
         <View
           className={styles.lightMiddle}
           onTouchStart={touchStart}  
@@ -190,7 +187,7 @@ export const LightPanel = React.memo<Props>(props => {
           onTouchEnd={progressEnd}>
           <Image className={styles.progressSun} src={iconSun}></Image>
           <View className={styles.progressTitle}>{brightVal}%</View>
-          <View className={styles.progressBar} style={{width: brightVal + '%'}}></View>
+          <View className={styles.progressBar} style={{width: (brightVal - 0.5) + '%', borderBottomRightRadius: brightVal == 100 ? '16px':'0'}}></View>
         </View>
         <View className={styles.lightBtn} style={{backgroundColor: switchVal ? '#6395F6':'rgba(0,0,0,0.5)'}} onClick={handleLightOn}>
           <Image className={styles.lightBtnIcon} src={iconLightWhite}></Image>

src/pages/home/index.module.less

@@ -105,19 +105,24 @@
   position: relative;
 }
 
+
+
 .modalBg {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 101px;
+  // position: absolute;
+  // left: 0;
+  // right: 0;
+  margin-bottom: -164px;
   display: flex;
+  flex-direction: column;
+  // align-items: flex-end;
   background-color: white;
   min-height: 127px;
-  flex-direction: column;
+  
   width: 90vw;
   z-index: 999;
-  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
+  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.05);
   border-radius: 24px;
+  align-self: center;
 }
 .swiper {
   width: 100%;
@@ -128,6 +133,7 @@
   width: 36px;
   height: 16px;
   margin-bottom: -1px;
+  z-index: 10000;
 }
 
 .sliderBg {

src/pages/home/index.tsx

@@ -16,7 +16,7 @@ import { Text, View, Swiper, SwiperItem} from '@ray-js/components';
 //   openTimerPage,
 // } from '@ray-js/api';
 // import { hooks } from '@ray-js/panel-sdk';
-import { router, usePageEvent, setNavigationBarTitle } from '@ray-js/ray';
+import { router, usePageEvent, setNavigationBarTitle} from '@ray-js/ray';
 import React from 'react';
 import { useSelector } from '@/redux';
 import styles from './index.module.less';
@@ -63,7 +63,9 @@ export function Home() {
   const fanModeCode = 'mode'
   
   const currentTempCode = 'temp_current'
-  const isOpen = useSdmProps((props) => props[fanSwitchCode])
+  const isOpen = useSdmProps((props) => {
+    return Boolean(props[fanSwitchCode])
+  })
   const spinSpeed = useSdmProps((props) => Number(props[fanSpeedCode]))
   const fanModeVal = useSdmProps((props) => props[fanModeCode])
  
@@ -192,6 +194,19 @@ export function Home() {
      )
    }
      
+   const toggleModal = () => {
+     console.log('toggleModal');
+    //  setModal(false)
+     setMenuIndex(null)
+  };
+
+  const modalSetting = {
+    show: true,
+    position: 'center',
+    overlay:true,
+    onClickOverlay: toggleModal,
+    overlayStyle: {backgroundColor: 'transparent'}
+  }
  
   return (
      <View className={styles.page}>
@@ -208,16 +223,18 @@ export function Home() {
         </View>
         <View className={styles.sliderBg}>
           <Slider
-            activeColor='linear-gradient(180deg, #87ABF2 11.62%, #4B7EE2 100%)'
+            activeColor='linear-gradient(-90deg, #87ABF2 11.62%, #4B7EE2 100%)'
             blockColor='white'
             blockSize={28}
-            min={0}
+            min={1}
             max={100}
             value={spinSpeed}
             step={1}
             disabled={!isOpen}
             onChange={(e) => {
-              console.log('SliderChange', e)
+              speedAction.set(e.value)
+            }} 
+            onChanging={(e) => { 
               speedAction.set(e.value)
             }}
           />
@@ -236,7 +253,8 @@ export function Home() {
                     >
                       {
                       menuIndex == 1 ? 
-                        <View className={styles.modalBg}>
+                      <Modal show={true}  position='center' overlay={true} onClickOverlay={toggleModal} overlayStyle={{backgroundColor: 'transparent'}}>
+                        <View className={styles.modalBg} >
                           <Swiper dots={true} dotActiveColor='#6395F6' dotColor='rgba(99,149,246, 0.2)'>
                             <SwiperItem>
                               <View className={styles.swiperItem}>
@@ -263,9 +281,13 @@ export function Home() {
                             </SwiperItem>
                           </Swiper>
                           </View>
-                      : menuIndex == 3 ? <View className={styles.modalBg} style={{height: '213px', display: 'flex', flexDirection:'column', padding:'16px 16px 0', gap:'12px'}}>
+                        </Modal>
+                      : menuIndex == 3 ? 
+                      <Modal show={true}  position='center' overlay={true} onClickOverlay={toggleModal} overlayStyle={{backgroundColor: 'transparent'}}>
+                        <View className={styles.modalBg} style={{height: '213px', display: 'flex', flexDirection:'column', padding:'16px 16px 0', gap:'12px', marginBottom:'-102px'}}>
                         <FanVertical></FanVertical>
                         </View>
+                      </Modal>
                       : null
                       }
                       <Image className={styles.middleware} src={middleware} style={{visibility: menuIndex == index ? 'visible':'hidden'}} />

src/routes.config.ts

@@ -5,7 +5,8 @@ export const routes: Routes = [
     route: '/',
     path: '/pages/home/index',
     name: 'Home',
-  },
+    id:'home'
+  }
   // {
   //   route: '/common/page4/index',
   //   path: '/pages/common/page4/index',

typings/sdm.d.ts

@@ -3,10 +3,10 @@ import { ProductName } from '@/constants';
 type SmartDeviceSchema = typeof import('@/devices/schema').fanSchema;
 
 type SmartDevices = {
-  [ProductName]?: import('@tuya-miniapp/sdm').SmartDeviceModel<SmartDeviceSchema>;
+  fan?: import('@tuya-miniapp/sdm').SmartDeviceModel<SmartDeviceSchema>;
 };
 
-declare module '@ray-js/sdm-react' {
+// declare module '@ray-js/sdm-react' {
 //   export const SdmProvider: React.FC<{
 //     value: SmartDeviceModel<SmartDeviceSchema>;
 //     children: React.ReactNode;
@@ -27,5 +27,5 @@ declare module '@ray-js/sdm-react' {
 //     selector: (device: SmartDeviceInstanceData) => Device,
 //     equalityFn?: (a: Device, b: Device) => boolean
 //   ): Device;
-  export function useActions(): SmartDevices[ProductName]['model']['actions'];
-}
+//   export function useActions(): SmartDevices[ProductName]['model']['actions'];
+// }