update

src/app.scss

@@ -1,4 +1,4 @@
-/* #ifdef weapp */ 
+/* #ifdef weapp */
 page {
     background-color: #000;
 }
@@ -9,7 +9,7 @@ page {
     }
 }
 
-.container{
+.container {
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -18,4 +18,49 @@ page {
     height: 100vh;
     width: 100vw;
 }
-/* #endif */ 
+
+/* #endif */
+
+.pure_black {
+    color: #000000;
+}
+
+.pure_white {
+    color: #ffffff;
+}
+
+.gray0 {
+    color: #1c1c1c;
+}
+
+.gray1{
+    background-color: #2D2D2F;
+}
+
+.pure_black_bg {
+    background-color: #000000;
+}
+
+.pure_white_bg {
+    background-color: #ffffff;
+}
+
+.gray0_bg {
+    background-color: #1c1c1c;
+}
+
+.sleep_color{
+
+}
+
+.sleep_bg_color{
+
+}
+
+.fast_color{
+
+}
+
+.fast_bg_color{
+
+}

src/components/LimitPickers.scss

@@ -0,0 +1,18 @@
+.picker-mask {
+    max-width: auto;
+    // background: red;
+    background: linear-gradient(0deg, rgba(28, 28, 28, 1) 0%,
+            rgba(28, 28, 28, 0) 45%,
+            rgba(28, 28, 28, 0) 55%,
+            rgba(28, 28, 28, 1) 100%);
+    background-size: 750px 500px !important;
+    height: 500px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    z-index: 9;
+}
+
+.picker{
+    background-size: 750px 500px !important;
+    height: 500px;
+}

src/components/LimitPickers.tsx

@@ -1,24 +1,25 @@
 import { PickerView, PickerViewColumn, View, Text } from "@tarojs/components";
-import { useEffect, useState } from "react";
-
-export default function Component(props: { limit: number, onChange: Function, onCancel: Function,isRealTime?:boolean,limitDay?:number,time?:number }) {
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import './LimitPickers.scss'
+// export default function Component(props: { limit: number, onChange: Function, onCancel: Function,isRealTime?:boolean,limitDay?:number,time?:number,ref?:any }) {
+const Component = forwardRef((props: { limit: number, onChange: Function, onCancel: Function, isRealTime?: boolean, limitDay?: number, time?: number }, ref) => {
     const days: string[] = [];
     const today = new Date();
-    const [values, setValues] = useState([props.limitDay?props.limitDay-1:6, today.getHours(), today.getMinutes()])
+    const [values, setValues] = useState([props.limitDay ? props.limitDay - 1 : 6, today.getHours(), today.getMinutes()])
 
 
-    useEffect(()=>{
-        if(props.time){
+    useEffect(() => {
+        if (props.time) {
             var date = new Date(props.time)
-            setValues([(props.limitDay?props.limitDay-1:6) - getDaysDiff(date), date.getHours(), date.getMinutes()])
+            setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(date), date.getHours(), date.getMinutes()])
         }
-    },[])
+    }, [])
     // useEffect(() => {
     //     setValues([6, today.getHours(), today.getMinutes()])
     // }, [props.limit])
 
 
-    for (let i = props.limitDay?props.limitDay-1:7; i >= 0; i--) {
+    for (let i = props.limitDay ? props.limitDay - 1 : 7; i >= 0; i--) {
         const date = new Date();
         date.setDate(today.getDate() - i);
 
@@ -75,7 +76,7 @@ export default function Component(props: { limit: number, onChange: Function, on
         var list = e.detail.value
 
         const date = new Date();
-        date.setDate(today.getDate() - ((props.limitDay?props.limitDay-1:6) - list[0]));
+        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - list[0]));
         const year = date.getFullYear();
         const month = date.getMonth() + 1;
         const day = date.getDate();
@@ -96,7 +97,7 @@ export default function Component(props: { limit: number, onChange: Function, on
             // const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[list[1]])}:${expandZero(minutes[list[2]])}:59`;
             if (getTimestamp(time) < props.limit) {
                 // console.log(6 - getDaysDiff(limitDate))
-                setValues([(props.limitDay?props.limitDay-1:6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
+                setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
                 return
             }
 
@@ -113,23 +114,43 @@ export default function Component(props: { limit: number, onChange: Function, on
         props.onCancel()
     }
 
-    function confirm() {
+    // function confirm() {
+    //     var date = new Date();
+    //     if (!props.isRealTime) {
+    //         date = new Date(global.set_time);
+    //     }
+
+    //     date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
+    //     date.setHours(values[1])
+    //     date.setMinutes(values[2])
+    //     props.onChange(date.getTime())
+    // }
+
+    function getConfirmData(){
         var date = new Date();
         if (!props.isRealTime) {
             date = new Date(global.set_time);
         }
-        
-        date.setDate(today.getDate() - ((props.limitDay?props.limitDay-1:6) - values[0]));
+
+        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
         date.setHours(values[1])
         date.setMinutes(values[2])
-        props.onChange(date.getTime())
+        return date.getTime()
     }
 
-    return <View style={{ backgroundColor: '#fff', color: '#000', position: 'relative' }}>
+    useImperativeHandle(ref, () => ({
+        getConfirmData:getConfirmData
+    }));
+
+
+
+    return <View style={{ backgroundColor: 'transparent', position: 'relative' }}>
         <PickerView value={values}
+            className="picker"
+            maskClass="picker-mask"
             onChange={onPickerChange}
             immediateChange={true}
-            indicatorStyle='height: 50px;' style='width: 100%; height: 300px;'>
+            indicatorStyle='height: 50px;'>
             <PickerViewColumn style='flex:0 0 45%'>
                 {days.map(item => {
                     return (
@@ -159,10 +180,7 @@ export default function Component(props: { limit: number, onChange: Function, on
         }}>
             <Text style={{ color: '#000', fontSize: 16, fontWeight: 'bold' }}>:</Text>
         </View>
-
-        <View style={{ marginBottom: 20,marginTop:20, display: 'flex', flexDirection: 'row', width: '100%' }}>
-            <Text style={{ flex: 1, textAlign: 'center',height:50 }} onClick={cancel}>取消</Text>
-            <Text style={{ flex: 1, textAlign: 'center',height:50 }} onClick={confirm}>确认</Text>
-        </View>
     </View>
-}
+})
+
+export default Component;

src/components/Modal.scss

@@ -12,6 +12,8 @@
     background-color: rgba($color: #000000, $alpha: 0.5);
 }
 
+
+
 /* #endif */ 
 
 
@@ -21,3 +23,56 @@
 }
 
 /* #endif */ 
+
+
+.modal_content{
+    padding-bottom: 120px;
+    width: 750px;
+    background-color: #1c1c1c;
+    border-top-left-radius: 36px;
+    border-top-right-radius: 36px;
+    display: flex;
+    flex-direction: column;
+}
+
+.modal_title{
+    font-size: 36px;
+    line-height: 120px;
+    height: 120px;
+    font-weight: 500;
+    width: 750px;
+    text-align: center;
+}
+
+.modal_operate{
+    display: flex;
+    flex-direction: row;
+    width: 750px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 36px;
+}
+
+.modal_btn{
+    width: 260px;
+    height: 84px;
+    border-radius: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn_space{
+
+    width: 90px;
+}
+
+.modal_cancel_text{
+
+}
+
+
+.modal_confirm_text{
+
+}

src/components/Modal.tsx

@@ -1,11 +1,45 @@
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import './Modal.scss'
 
-export default function Modal(props: { children: React.ReactNode,dismiss:Function }) {
-    return <View className='modal' catchMove>
-        <View style={{ flex: 1 }} onClick={()=>props.dismiss()}></View>
-        {
-            props.children
+export default function Modal(props: {
+    children: React.ReactNode,
+    title?: string, dismiss: Function,
+    confirm: Function,
+    themeColor?: string,
+}) {
+    var color = props.themeColor ? props.themeColor : '#ff0000'
+
+    function alphaToHex(alpha) {
+        var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
+        var hexValue = alphaValue.toString(16); // 将整数转换为十六进制字符串
+        if (hexValue.length === 1) {
+            hexValue = "0" + hexValue; // 如果十六进制字符串只有一位，补零
         }
+        return hexValue;
+    }
+
+    var alpha = alphaToHex(0.4)
+
+    return <View className='modal' catchMove>
+
+        <View style={{ flex: 1 }} onClick={() => props.dismiss()}></View>
+        <View className='modal_content'>
+            <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
+            {
+                props.children
+            }
+            <View className='modal_operate'>
+                <View className='modal_btn' style={{ backgroundColor: color+alpha }} onClick={() => props.dismiss()}>
+                    <Text className='modal_cancel_text' style={{color:color}}>取消</Text>
+                </View>
+                <View className='btn_space' />
+                <View className='modal_btn' style={{ backgroundColor: color }} onClick={() => props.confirm()}>
+                    <Text className='modal_confirm_text' style={{color:'#000'}}>确定</Text>
+                </View>
+
+
+            </View>
+        </View>
+
     </View>
 }

src/components/PickerViews.scss

@@ -0,0 +1,20 @@
+.picker-mask {
+    max-width: auto;
+    // background: red;
+    background: linear-gradient(0deg, rgba(28, 28, 28, 1) 0%,
+            rgba(28, 28, 28, 0) 45%,
+            rgba(28, 28, 28, 0) 55%,
+            rgba(28, 28, 28, 1) 100%);
+    background-size: 750px 400px !important;
+    height: 400px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    z-index: 9;
+    color: #fff !important;
+}
+
+.picker{
+    background-size: 750px 400px !important;
+    height: 400px;
+    color: #fff !important;
+}

src/components/PickerViews.tsx

@@ -1,7 +1,9 @@
 import { PickerView, PickerViewColumn, View, Text } from "@tarojs/components";
-import { useEffect, useState } from "react";
+import './PickerViews.scss'
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 
-export default function Component(props: { value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function, }) {
+// export default function Component(props: { value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function, }) {
+const Component = forwardRef((props: { value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function, }, ref) => {
     const [v, setV] = useState([0])
     useEffect(() => {
         setV(props.value)
@@ -15,25 +17,28 @@ export default function Component(props: { value: any, onChange: Function, items
         props.onChange(e.detail.value)
     }
 
-    function cancel() {
-        props.onCancel && props.onCancel()
-    }
-
     function confirm() {
-        props.onChange(v)
+        return v;
+        // props.onChange(v)
     }
 
-    return <View><PickerView value={v}
+    useImperativeHandle(ref, () => ({
+        getConfirmData:confirm
+    }));
+
+    return <PickerView value={v}
         onChange={onPickerChange}
         indicatorStyle='height: 50px;'
         immediateChange={true}
-        style={props.height ? `width: 100%; height: ${props.height}px;` : `width: 100%; height: 100px;`}>
+        className="picker"
+        maskClass="picker-mask"
+    >
         {
             props.items.map(item => {
                 return <PickerViewColumn>
                     {item.map(obj => {
                         return (
-                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',color:'#000' }}>{obj}</View>
+                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{obj}</View>
                         );
                     })}
                 </PickerViewColumn>
@@ -41,11 +46,13 @@ export default function Component(props: { value: any, onChange: Function, items
         }
 
     </PickerView >
-        {
-            props.showBtns ? <View style={{ marginBottom: 20,marginTop:20, display: 'flex', flexDirection: 'row', width: '100%' }}>
-                <Text style={{ flex: 1, textAlign: 'center',height:50,color:'#000' }} onClick={cancel}>取消</Text>
-                <Text style={{ flex: 1, textAlign: 'center',height:50,color:'#000' }} onClick={confirm}>确认</Text>
+        {/* {
+            props.showBtns ? <View style={{ marginBottom: 20, marginTop: 20, display: 'flex', flexDirection: 'row', width: '100%' }}>
+                <Text style={{ flex: 1, textAlign: 'center', height: 50, color: '#000' }} onClick={cancel}>取消</Text>
+                <Text style={{ flex: 1, textAlign: 'center', height: 50, color: '#000' }} onClick={confirm}>确认</Text>
             </View> : null
         }
-    </View>
-}
+    </View> */}
+})
+
+export default Component;

src/components/SlidngScale.scss

@@ -1,25 +1,34 @@
-.slidng{
+.slidng {
     position: relative;
 }
 
-.number_bg{
+.number_bg {
     display: flex;
     align-items: center;
     flex-direction: row;
     justify-content: center;
+    padding-top: 36px;
+    padding-bottom: 36px;
 }
 
-.number{
+.number {
     text-align: center;
+    color: #fff;
+    font-size: 48px;
+    line-height: 48px;
     // flex-grow: 1;
     // background-color: red;
 }
 
-.unit{
+.unit {
     margin-left: 4px;
+    color: #fff;
+    font-size: 24px;
+    line-height: 24px;
+    margin-top: 10px;
 }
 
-.value{
+.value {
     width: 750px;
     display: flex;
     align-items: center;
@@ -30,91 +39,129 @@
     text-align: center;
 }
 
-.scroll{
+.scroll {
     width: 750px;
     height: 300px;
-    background-color: pink;
     position: relative;
 }
 
-.scrollContent{
+.scrollContent {
     display: flex;
     flex-direction: row;
 }
 
-.scrollPadding{
+.scrollPadding {
     width: 375px;
     height: 30px;
     background-color: white;
     flex-shrink: 0;
 }
 
-.content{
+.content {
     height: 30px;
-    background-color: blue;
     flex-shrink: 0;
     display: flex;
     flex-direction: row;
 }
 
-.slidng_item{
+.slidng_item {
     display: flex;
     flex-shrink: 0;
     box-sizing: border-box;
     // width: 2px;
-    height: 15px;
-    background-color: white;
+    height: 16px;
     // margin-right: 18px;
 }
 
-.slidng_item_big{
+.slidng_item_big {
     display: flex;
     flex-shrink: 0;
     box-sizing: border-box;
     // width: 2px;
-    height: 30px;
-    background-color: white;
+    height: 28px;
     // margin-right: 18px;
     position: relative;
 }
 
-.slidng_item_middle{
+.slidng_item_middle {
     display: flex;
     flex-shrink: 0;
     box-sizing: border-box;
     // width: 2px;
-    height: 25px;
-    background-color: white;
+    height: 24px;
     // margin-right: 18px;
     position: relative;
 }
-.slidng_text{
+
+.slidng_text {
     position: absolute;
     left: -25px;
     width: 50px;
     // right: 30px;
     top: 30px;
     text-align: center;
-    color: black;
+    color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: oldlace;
-    font-size: 20px;
+    font-size: 36px;
+    line-height: 36px;
 }
 
-.center_line{
-    width: 2px;
-    height: 50px;
-    background-color: red;
-    position: absolute;
-    left: 374px;
-    top: 50px;
-}
 
-.demo2{
+
+.demo2 {
     width: 750px;
     height: 40px;
     background-color: pink;
     flex-shrink: 0;
+}
+
+.top_line {
+    height: 4px;
+    width: 750px;
+}
+
+.scroll_bg {
+    position: relative;
+    height: 120px;
+    width: 750px;
+}
+
+.shadow_left {
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 120px;
+    width: 375px;
+    background: linear-gradient(90deg, #1C1C1C 1%, rgba(28, 28, 28, 0) 100%);
+}
+
+.shadow_right {
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 120px;
+    width: 375px;
+    background: linear-gradient(90deg, rgba(28, 28, 28, 0) 1%, #1C1C1C 100%);
+}
+
+.shadow_top {
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(180deg, rgba(182, 225, 252, 0.1) 18%, rgba(28, 28, 28, 0) 100%);
+}
+
+.center_line {
+    width: 24px;
+    height: 30px;
+    position: absolute;
+    left: 363px;
+    top: -12px;
 }

src/components/SlidngScale.tsx

@@ -1,9 +1,13 @@
-import { ScrollView, View, Text } from "@tarojs/components";
+import { ScrollView, View, Text, Image } from "@tarojs/components";
 import './SlidngScale.scss'
 import { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 
-export default function Component(props: { step: number, min: number, max: number, default_value: number, changed: Function, unit: string }) {
+export default function Component(props: {
+    step: number, min: number,
+    max: number, default_value: number, changed: Function, unit: string
+    themeColor: string
+}) {
     const scrollViewRef = useRef<any>();
     const minNum: number = props.min;
     const maxNum: number = props.max;
@@ -73,26 +77,36 @@ export default function Component(props: { step: number, min: number, max: numbe
             <Text className="number">{current}</Text>
             <Text className="unit">{props.unit}</Text>
         </View>
-        <ScrollView ref={scrollViewRef} scrollX scrollLeft={left} className="scroll" onScroll={handleScroll}>
-            <View className="scrollContent">
-                <View className="scrollPadding" />
-                <View className="content">
-                    {
-                        list.map((item, index) => {
-                            return <View className={item.showBig ? 'slidng_item_big' : item.showMiddle ? 'slidng_item_middle' : 'slidng_item'} style={{ width: 1, marginRight: 9 }} key={index}>
-                                {
-                                    item.showBig ? <Text className="slidng_text">{item.value}</Text> : null
-                                }
-                            </View>
-                        })
-                    }
+
+        <View className="scroll_bg">
+
+            <View className="top_line" style={{ backgroundColor: props.themeColor }} />
+            <ScrollView ref={scrollViewRef} scrollX scrollLeft={left} className="scroll" onScroll={handleScroll}>
+                <View className="scrollContent">
+                    <View className="scrollPadding" />
+                    <View className="content">
+                        {
+                            list.map((item, index) => {
+                                return <View className={item.showBig ? 'slidng_item_big' : item.showMiddle ? 'slidng_item_middle' : 'slidng_item'} style={{ width: 2, marginRight: 8, backgroundColor: props.themeColor }} key={index}>
+                                    {
+                                        item.showBig ? <Text className="slidng_text">{item.value}</Text> : null
+                                    }
+                                </View>
+                            })
+                        }
+                    </View>
+                    {/* <View className="demo2"/> */}
+                    <View className="scrollPadding" />
                 </View>
-                {/* <View className="demo2"/> */}
-                <View className="scrollPadding" />
-            </View>
 
-        </ScrollView>
-        <View className="center_line" />
+            </ScrollView>
+            <View className="shadow_top"/>
+            <View className="shadow_left"/>
+            <View className="shadow_right"/>
+            <Image className="center_line" src={require('@assets/images/scale_center.png')} />
+            {/* <View className="center_line" /> */}
+        </View>
+
 
     </View>
 }

src/features/trackSomething/components/Metric.scss

@@ -10,4 +10,25 @@
     width: 320px;
     height: 100px;
     flex-shrink: 0;
+}
+
+.change_time_bg{
+    height: 140px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.time_bg{
+    height: 60px;
+    border-radius: 30px;
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
+.time{
+    height: 60px;
+    color: #fff;
+    opacity: 0.4;
+    line-height: 60px;
 }

src/features/trackSomething/components/Metric.tsx

@@ -299,7 +299,7 @@ export default function Component(props: any) {
                 })
             }
             <View className="space_width" />
-            
+
         </View>
     }
 
@@ -311,49 +311,57 @@ export default function Component(props: any) {
             refresherDefaultStyle="white" onRefresherRefresh={getCards}
             refresherTriggered={triggered}>
             {showErrorPage ? <NoData refresh={() => { getCards() }} /> : detail()}
-            <View style={{height:100}}/>
+            <View style={{ height: 100 }} />
         </ScrollView>
         {
-                isModalOpen && <Modal dismiss={closeModal}>
-                    <View style={{
-                        backgroundColor: 'white',
-                        display: 'flex', flexDirection: 'column',
-                        width: '100%', paddingBottom: 50, color: '#000'
-                    }}>
-                        <Text style={{ textAlign: 'center' }}>{(metricItem as any).name}</Text>
-                        <Text style={{ textAlign: 'center', paddingTop: 10, paddingBottom: 10, color: 'black' }} onClick={showTimePicker}>{strTime}</Text>
-                        <View style={{ position: 'relative' }}>
-                            {
-                                (metricItem as any).schemas.map((item, index) => {
-                                    return <View key={index}>
-                                        {
-                                            (metricItem as any).schemas.length > 1 && <Text style={{ textAlign: 'center', width: '100%', display: 'flex', justifyContent: 'center' }}>{item.name}</Text>
-                                        }
-                                        <SlidngScale step={item.step} min={item.min} max={item.max} default_value={item.default_value}
-                                            unit={item.default_unit}
-                                            changed={(e) => { item.tempValue = e }} />
-                                    </View>
-                                })
-                            }
+            isModalOpen && <Modal dismiss={closeModal} title={(metricItem as any).name}
+                themeColor={(metricItem as any).theme_color}
+                confirm={confirmModal}>
+                <View style={{
+                    display: 'flex', flexDirection: 'column',
+                    width: '100%', color: '#000'
+                }}>
+
+                    <View style={{ position: 'relative' }}>
+                        {
+                            (metricItem as any).schemas.map((item, index) => {
+                                return <View key={index}>
+                                    {
+                                        (metricItem as any).schemas.length > 1 && <Text style={{ textAlign: 'center', width: '100%', display: 'flex', 
+                                        justifyContent: 'center',color: (metricItem as any).theme_color}}>{item.name}</Text>
+                                    }
+                                    <SlidngScale step={item.step} min={item.min} max={item.max} default_value={item.default_value}
+                                        unit={item.default_unit}
+                                        themeColor={(metricItem as any).theme_color}
+                                        changed={(e) => { item.tempValue = e }} />
+                                </View>
+                            })
+                        }
+                    </View>
+                    <View className="change_time_bg ">
+                        <View className="gray1 time_bg" onClick={showTimePicker}>
+                            <Text className="time" >{strTime}</Text>
                         </View>
-                        <View style={{ marginBottom: 20, marginTop: 20, display: 'flex', flexDirection: 'row', width: '100%' }}>
+
+                    </View>
+                    {/* <View style={{ marginBottom: 20, marginTop: 20, display: 'flex', flexDirection: 'row', width: '100%' }}>
                             <Text style={{ flex: 1, textAlign: 'center', height: 50 }} onClick={cancelModal}>取消</Text>
                             <Text style={{ flex: 1, textAlign: 'center', height: 50 }} onClick={confirmModal}>确认</Text>
-                        </View>
+                        </View> */}
 
-                    </View>
-                </Modal>
-            }
-            {
+                </View>
+            </Modal>
+        }
+        {
 
-                isTimePickerOpen && <Modal dismiss={() => setIsTimePickerOpen(false)}>
-                    <LimitPickers isRealTime={true} time={time} limit={limit} limitDay={180} onCancel={() => { setIsTimePickerOpen(false) }} onChange={(e) => {
-                        chooseTime(e)
-                        //  pickerConfirm(e)
-                        //  hidePicker()
-                    }} />
-                </Modal>
-            }
+            isTimePickerOpen && <Modal dismiss={() => setIsTimePickerOpen(false)}>
+                <LimitPickers isRealTime={true} time={time} limit={limit} limitDay={180} onCancel={() => { setIsTimePickerOpen(false) }} onChange={(e) => {
+                    chooseTime(e)
+                    //  pickerConfirm(e)
+                    //  hidePicker()
+                }} />
+            </Modal>
+        }
     </View>
 
 }

src/features/trackTimeDuration/components/Console.tsx

@@ -1,7 +1,7 @@
 import { recordCheck } from "@/services/trackTimeDuration";
 import { View, Text, PickerView } from "@tarojs/components";
 import trackTimeService, { machine } from "@/store/trackTimeMachine"
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { TimeFormatter } from "@/utils/time_format";
 import TimePickers from '@/components/TimePickers'
 import { useSelector } from "react-redux";
@@ -30,6 +30,8 @@ export default function Component() {
     const [fastPickerValue, setFastPickerValue] = useState([0, 0])
     const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
     const [isOpenDurationPicker, setIsOpenDurationPicker] = useState(false)
+    const limitPickerRef = useRef(null)
+    const durationPickerRef = useRef(null)
 
     // const [pickerValue, setPickerValue] = useState([0,0])
 
@@ -137,17 +139,14 @@ export default function Component() {
         var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
         if (current_record && current_record.last_real_check_time)
             limit = current_record.last_real_check_time
-        return <View style={{ backgroundColor: '#fff' }}>
-            <LimitPickers limit={limit} limitDay={7} onCancel={hidePicker} onChange={(e) => {
+        return <LimitPickers ref={limitPickerRef} limit={limit} limitDay={7} onCancel={hidePicker} onChange={(e) => {
                 console.log(new Date(e))
                 pickerConfirm(e)
                 hidePicker()
             }} />
-        </View>
     }
 
     function pickerConfirm(t: number) {
-        debugger
         console.log(t)
         var date = new Date(t)
         var setDate = new Date(global.set_time);
@@ -262,8 +261,8 @@ export default function Component() {
 
 
     function durationPickerContent() {
-        return <View style={{ color: '#000', backgroundColor: '#fff' }}>
-            <PickerViews onChange={durationChange} items={durationDatas(common)} value={isFast ? fastPickerValue : sleepPickerValue} height={200} showBtns={true} onCancel={() => { setIsOpenDurationPicker(false) }} />
+        return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
+            <PickerViews ref={durationPickerRef} onChange={durationChange} items={durationDatas(common)} value={isFast ? fastPickerValue : sleepPickerValue}  showBtns={true} onCancel={() => { setIsOpenDurationPicker(false) }} />
         </View>
     }
 
@@ -379,10 +378,18 @@ export default function Component() {
                 }
             </View>
             {
-                showModal && isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} />
+                showModal && isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={()=>{
+                    var picker = limitPickerRef.current;
+                    pickerConfirm((picker as any).getConfirmData());
+                    setIsOpen(false);
+                }}/>
             }
             {
-                isOpenDurationPicker && <Modal children={durationPickerContent()} dismiss={() => setIsOpenDurationPicker(false)} />
+                isOpenDurationPicker && <Modal children={durationPickerContent()} dismiss={() => setIsOpenDurationPicker(false)} confirm={()=>{
+                    var picker = durationPickerRef.current;
+                    durationChange((picker as any).getConfirmData());
+                    setIsOpenDurationPicker(false);
+                }}/>
             }
 
             {/* {

src/features/trackTimeDuration/components/More.tsx

@@ -132,7 +132,7 @@ const Component = forwardRef((props, ref) => {
         <View ref={ref} style={{ width: '100%', marginTop: 20, marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <Text onClick={checkActionSheetData}>More Component</Text>
             {
-                showModal && isOpen && <Modal children={layoutContent()} dismiss={()=>setIsOpen(false)}/>
+                showModal && isOpen && <Modal children={layoutContent()} dismiss={()=>setIsOpen(false)}  confirm={()=>{}}/>
             }
             {/* {
                 showModal && <AtFloatLayout

src/features/trackTimeDuration/components/Schedule.tsx

@@ -533,10 +533,10 @@ export default function Component(props: { type?: string, data?: any, delSuccess
             props.type != 'record' && props.type != 'latest' && key == 'FAST_SLEEP' && (value == 'WAIT_FOR_START' ? <Text onClick={showStage}>Duration goals by stage</Text> : <Text onClick={showStage}>Current stage</Text>)
         }
         {
-            key == 'FAST_SLEEP' && isOpen && props.type != 'record' && checkData && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} />
+            key == 'FAST_SLEEP' && isOpen && props.type != 'record' && checkData && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={()=>{}}/>
         }
         {
-            key == 'FAST_SLEEP' && isOpen && props.type == 'record' && props.data.scenario == 'FAST_SLEEP' && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} />
+            key == 'FAST_SLEEP' && isOpen && props.type == 'record' && props.data.scenario == 'FAST_SLEEP' && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={()=>{}}/>
         }
 
         {/* {

src/pages/Profile.tsx

@@ -17,7 +17,16 @@ export default function Page() {
     }
 
     function reset() {
-        delSession({ type: 'WX_MP' })
+        Taro.showModal({
+            title: '重置session',
+            content: '确认重置session吗？',
+            success: res => {
+                if (res.confirm) {
+                    delSession({ type: 'WX_MP' })
+                }
+            }
+        })
+        
     }
 
     function tapProfile() {
@@ -69,7 +78,7 @@ export default function Page() {
         {user.isLogin && <View className="card" onClick={goSetting}>
             <Text className="title">设置</Text>
         </View>}
-        {/* {
+        {
             user.isLogin && <Text>用户名：{user.nickname}</Text>
         }
         {
@@ -78,7 +87,7 @@ export default function Page() {
         
         {
             user.isLogin && <Buttons title='重置session' onClick={reset} style={{ width: 289, marginBottom: 30 }} />
-        } */}
+        }
 
     </View>
 }

src/pages/RecordsHistory.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    "disableScroll": true
+})

src/pages/Setting.tsx

@@ -1,16 +1,35 @@
 import Buttons from "@/components/Buttons";
 import { clear, logout } from "@/services/user";
 import { View,Text,Button } from "@tarojs/components";
+import Taro from "@tarojs/taro";
 import { useDispatch } from "react-redux";
 
 export default function Page(){
     const dispatch = useDispatch();
     function logoutF() {
-        dispatch(logout() as any);
+        Taro.showModal({
+            title: '退出登录',
+            content: '确定退出登录吗？',
+            success: res => {
+                if (res.confirm) {
+                    dispatch(logout() as any);
+                }
+            }
+        })
+        
     }
 
     function clearF() {
-        dispatch(clear() as any);
+        Taro.showModal({
+            title: '注销账号',
+            content: '确定注销此账号吗？',
+            success: res => {
+                if (res.confirm) {
+                    dispatch(clear() as any);
+                }
+            }
+        })
+        
     }
     
     return <View>

src/services/http/request.ts

@@ -40,7 +40,7 @@ async function getStorage(key: string) {
 
 
 export async function request<T>(param: RequestParam): Promise<T> {
-    const kTimeout = 2000;
+    const kTimeout = 5000;
     const kRetryCount = 3;
 
     let retryCount = 0;

src/utils/common.scss

@@ -1,2 +1,4 @@
 $themeColor:#AAFF00;
-$backgroundColor:#1C1C1C;
+$backgroundColor:#1C1C1C;
+$fastColor:#AAFF00;
+$sleepColor:#00FFFF;