update

config/env.ts

@@ -1,3 +1,3 @@
 
 export const APP_VERSION = '1.0.0'
-export const WX_VERSION = '1.4.4'
+export const WX_VERSION = '1.4.5'

src/context/locales/en.js

@@ -697,6 +697,8 @@ export default {
                 title: 'Weekly',
                 fast_average: 'Average fast',
                 sleep_average: 'Average sleep',
+                eat_average:'Eating window',
+                wake_average:'Wake window'
             }
         },
         food: {

src/context/locales/zh.js

@@ -694,6 +694,8 @@ export default {
                 title: '每周趋势',
                 fast_average: '平均断食',
                 sleep_average: '平均睡眠',
+                eat_average:'平均进食',
+                wake_average:'平均活动'
 
             }
         },

src/features/trackTimeDuration/components/ConsolePicker.tsx

@@ -208,39 +208,37 @@ const Component = forwardRef((props: {
     function pickerDetail() {
         return <View style={{ display: 'flex', flexDirection: 'column', opacity: loaded ? 1 : 0 }}>
             <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
-            <View style={{ backgroundColor: 'transparent', position: 'relative' }}>
-                <PickerView
-                    itemStyle={{ color: '#fff', margin: 0, padding: 0 }}
-                    value={values}
-                    className="picker"
-                    maskClass="picker-mask"
-                    style={{ color: '#fff' }}
-                    onChange={onPickerChange}
-                    immediateChange={true}
-                    indicatorStyle='height: 50px;color:red;'>
-                    <PickerViewColumn style='flex:0 0 45%'>
-                        {days.map(item => {
-                            return (
-                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',height:50 }}>{item}</View>
-                            );
-                        })}
-                    </PickerViewColumn>
-                    <PickerViewColumn>
-                        {hours.map(item => {
-                            return (
-                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',height:50 }}>{item < 10 ? `0${item}` : item}</View>
-                            );
-                        })}
-                    </PickerViewColumn>
-                    <PickerViewColumn>
-                        {minutes.map(item => {
-                            return (
-                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',height:50 }}>{item < 10 ? `0${item}` : item}</View>
-                            );
-                        })}
-                    </PickerViewColumn>
-                </PickerView>
-            </View>
+            <PickerView
+                itemStyle={{ color: '#fff', margin: 0, padding: 0 }}
+                value={values}
+                className="picker"
+                maskClass="picker-mask"
+                style={{ color: '#fff' }}
+                onChange={onPickerChange}
+                immediateChange={true}
+                indicatorStyle='height: 50px;color:red;'>
+                <PickerViewColumn style='flex:0 0 45%'>
+                    {days.map(item => {
+                        return (
+                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', height: 50 }}>{item}</View>
+                        );
+                    })}
+                </PickerViewColumn>
+                <PickerViewColumn>
+                    {hours.map(item => {
+                        return (
+                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', height: 50 }}>{item < 10 ? `0${item}` : item}</View>
+                        );
+                    })}
+                </PickerViewColumn>
+                <PickerViewColumn>
+                    {minutes.map(item => {
+                        return (
+                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', height: 50 }}>{item < 10 ? `0${item}` : item}</View>
+                        );
+                    })}
+                </PickerViewColumn>
+            </PickerView>
             <Text className="pickerEndTime" style={{ color: props.isTimeout ? 'red' : '#ffffff' }}>{pickerTimeText()}</Text>
             <View className='modal_operate'>
                 <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>

src/features/trackTimeDuration/components/IndexConsole.tsx

@@ -9,7 +9,7 @@ import ConsolePicker from './ConsolePicker';
 import LimitPickers from '@/components/input/LimitPickers';
 import LimitTimeoutPickers from '@/components/input/LimitTimeoutPickers';
 import { getColor, getTimePickerTitle } from '../hooks/Console';
-import { isIOS, kIsIOS, rpxToPx, vibrate } from '@/utils/tools';
+import {kIsIOS, rpxToPx, vibrate } from '@/utils/tools';
 import { TimeFormatter } from '@/utils/time_format';
 import Modal from '@/components/layout/Modal.weapp';
 import Taro, { useDidShow } from '@tarojs/taro';
@@ -19,6 +19,7 @@ import CircadianDetailPopup from './CircadianDetailPopup';
 import showAlert from '@/components/basic/Alert';
 import CheckAccess from './CheckAccess';
 import { ColorType } from '@/context/themes/color';
+import IndexConsoleMuti from './IndexConsoleMuti';
 
 let useNavigation;
 
@@ -54,6 +55,8 @@ export default function IndexConsole(props: { record: any, count: number }) {
     const dayMilliSeconds = 24 * 3600 * 1000;
     const [btnDisable, setBtnDisable] = useState(false)
     const [showStageModal, setShowStageModal] = useState(false)
+    const [showMutiPicker, setShowMutiPicker] = useState(false);
+    const [mutiEvent, setMutiEvent] = useState('start_fast');
     const dispatch = useDispatch();
 
 
@@ -189,14 +192,16 @@ export default function IndexConsole(props: { record: any, count: number }) {
             return
         }
         if (status != 'ONGOING1' && props.record.scenario.name == 'FAST_SLEEP') {
-            if (status == 'WAIT_FOR_START') {
-                Taro.showToast({
-                    title: t('feature.track_time_duration.console.lock_fast_tip'),
-                    icon: 'none'
-                })
-            }
-
-            vibrate()
+            // if (status == 'WAIT_FOR_START') {
+            //     Taro.showToast({
+            //         title: t('feature.track_time_duration.console.lock_fast_tip'),
+            //         icon: 'none'
+            //     })
+            // }
+
+            // vibrate()
+            setMutiEvent('start_sleep')
+            setShowMutiPicker(true);
             return;
         }
         operateType = 'startSleep'
@@ -247,12 +252,14 @@ export default function IndexConsole(props: { record: any, count: number }) {
         }
         if (status != 'ONGOING2' && status != 'ONGOING') {
 
-            Taro.showToast({
-                title: t('feature.track_time_duration.console.lock_sleep_tip'),
-                icon: 'none'
-            })
+            // Taro.showToast({
+            //     title: t('feature.track_time_duration.console.lock_sleep_tip'),
+            //     icon: 'none'
+            // })
 
-            vibrate()
+            // vibrate()
+            setMutiEvent('end_sleep')
+            setShowMutiPicker(true);
             return;
         }
         operateType = 'endSleep'
@@ -298,44 +305,50 @@ export default function IndexConsole(props: { record: any, count: number }) {
             return
         }
         if (status == 'WAIT_FOR_START') {
-            Taro.showToast({
-                title: t('feature.track_time_duration.console.lock_fast_tip'),
-                icon: 'none'
-            })
-            vibrate()
+            // Taro.showToast({
+            //     title: t('feature.track_time_duration.console.lock_fast_tip'),
+            //     icon: 'none'
+            // })
+            // vibrate()
+            setMutiEvent('end_fast')
+            setShowMutiPicker(true);
             return;
         }
 
         if (status == 'ONGOING1'){
-            showAlert({
-                title:t('feature.heads_up.alert_title'),
-                content:t('feature.heads_up.ongoing1_content'),
-                cancelText:t('feature.heads_up.ongoing1_cancel'),
-                confirmText:t('feature.heads_up.ongoing1_confirm'),
-                showCancel:true,
-                cancel:()=>{
+            // showAlert({
+            //     title:t('feature.heads_up.alert_title'),
+            //     content:t('feature.heads_up.ongoing1_content'),
+            //     cancelText:t('feature.heads_up.ongoing1_cancel'),
+            //     confirmText:t('feature.heads_up.ongoing1_confirm'),
+            //     showCancel:true,
+            //     cancel:()=>{
                     
-                },
-                confirm:()=>{
-                    tapEndFastOperate()
-                }
-            })
+            //     },
+            //     confirm:()=>{
+            //         tapEndFastOperate()
+            //     }
+            // })
+            setMutiEvent('end_fast')
+            setShowMutiPicker(true);
             return
         }
         else if (status == 'ONGOING2'){
-            showAlert({
-                title:t('feature.heads_up.alert_title'),
-                content:t('feature.heads_up.ongoing2_content'),
-                cancelText:t('feature.heads_up.ongoing2_cancel'),
-                confirmText:t('feature.heads_up.ongoing2_confirm'),
-                showCancel:true,
-                cancel:()=>{
+            setMutiEvent('end_fast')
+            setShowMutiPicker(true);
+            // showAlert({
+            //     title:t('feature.heads_up.alert_title'),
+            //     content:t('feature.heads_up.ongoing2_content'),
+            //     cancelText:t('feature.heads_up.ongoing2_cancel'),
+            //     confirmText:t('feature.heads_up.ongoing2_confirm'),
+            //     showCancel:true,
+            //     cancel:()=>{
                     
-                },
-                confirm:()=>{
-                    tapEndFastOperate()
-                }
-            })
+            //     },
+            //     confirm:()=>{
+            //         tapEndFastOperate()
+            //     }
+            // })
             return
         }
         
@@ -780,6 +793,24 @@ export default function IndexConsole(props: { record: any, count: number }) {
         </Modal>
     }
 
+    function mutiContent() {
+        return <Modal
+            testInfo={null}
+            dismiss={() => {
+                setShowMutiPicker(false)
+            }}
+            confirm={() => { }}>
+            {
+                mutiPickerContent()
+            }
+        </Modal>
+    }
+
+    function mutiPickerContent() {
+        global.set_time = new Date().getTime()
+        return <IndexConsoleMuti status={status} event={mutiEvent} scenario={props.record.scenario.name} close={() => setShowMutiPicker(false)} />
+    }
+
     function single() {
         if (props.record.scenario.name == 'FAST') {
             return <View style={{ marginTop: rpxToPx(0) }}>
@@ -797,9 +828,25 @@ export default function IndexConsole(props: { record: any, count: number }) {
                         <Text style={{ fontWeight: 'bold',color:ColorType.black }}>{t('feature.track_time_duration.common.end_fast')}</Text>
                     </View>
                 }
+                {
+                    status == 'WAIT_FOR_START' && <View>
+                        {
+                            !expand && <Text className='expand' onClick={() => { setExpand(true) }}>{expandBtnText()}</Text>
+                        }
+                    </View>
+                }
+                {status == 'WAIT_FOR_START' && expand && <View className='btn_line' />}
+                {
+                    status == 'WAIT_FOR_START' && expand && <View onClick={tapEndFast} className={status == 'ONGOING3' ? 'console_btn' : 'console_btn btn_disable'}>
+                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(32), color: ColorType.black }}>{t('feature.track_time_duration.common.end_fast')}</Text>
+                    </View>
+                }
                 {
                     showTimePicker && modalContent()
                 }
+                {
+                    showMutiPicker && mutiContent()
+                }
             </View>
         }
         else if (props.record.scenario.name == 'SLEEP') {
@@ -908,6 +955,9 @@ export default function IndexConsole(props: { record: any, count: number }) {
             {
                 showStageModal && stageContent()
             }
+            {
+                showMutiPicker && mutiContent()
+            }
 
 
         </View>

src/features/trackTimeDuration/components/IndexConsoleMuti.scss

@@ -0,0 +1,19 @@
+.new_item_cell{
+    height: 96px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 40px;
+    margin-right: 40px;
+}
+
+.new_item_cell_title{
+    font-size: 28px;
+    color: #fff;
+}
+
+.new_item_cell_desc{
+    font-size: 28px;
+    color: #fff;
+    opacity: 0.4;
+}

src/features/trackTimeDuration/components/IndexConsoleMuti.tsx

@@ -0,0 +1,398 @@
+import { View, Text, Image, PickerView, PickerViewColumn } from "@tarojs/components";
+import { useTranslation } from "react-i18next";
+import { AtActivityIndicator } from "taro-ui";
+import { alphaToHex, rpxToPx } from "@/utils/tools";
+import { ColorType } from "@/context/themes/color";
+import "@/components/layout/Modal.scss";
+import './IndexConsoleMuti.scss';
+import { useRef, useState } from "react";
+import { batchClocks, endFast, getLocalPush } from "../actions/TrackTimeActions";
+import dayjs from "dayjs";
+import Modal from "@/components/layout/Modal.weapp";
+import ConsolePicker from "./ConsolePicker";
+import Taro from "@tarojs/taro";
+import { TimeFormatter } from "@/utils/time_format";
+
+let min = 0
+let max = 0
+let defaultTimestamp = 0
+export default function IndexConsoleMuti(props: { status: string, event: string, close: Function, scenario: string }) {
+    const { t } = useTranslation();
+    const isLoading = false;
+    var color = ColorType.fast;
+    var alpha = alphaToHex(0.4)
+    const [fastStart, setFastStart] = useState<any>(null)
+    const [fastEnd, setFastEnd] = useState<any>(null)
+    const [sleepStart, setSleepStart] = useState<any>(null)
+    const [sleepEnd, setSleepEnd] = useState<any>(null)
+    const [showPicker, setShowPicker] = useState(false)
+    const [operateType, setOperateType] = useState('startFast')
+    const pickerRef = useRef(null)
+
+
+    function cancel() {
+        props.close()
+    }
+
+    function confirm() {
+        var fast: any = {}
+        var sleep: any = {}
+        debugger
+        switch (props.event) {
+            case 'start_sleep':
+                if (!fastStart) {
+                    Taro.showToast({
+                        icon: 'none',
+                        title: '请选择开始断食时间'
+                    })
+                    return
+                }
+                if (!sleepStart) {
+                    Taro.showToast({
+                        icon: 'none',
+                        title: '请选择开始睡眠时间'
+                    })
+                    return
+                }
+                fast.real_start_time = fastStart.time
+                fast.real_start_date = fastStart.date
+                sleep.real_start_time = sleepStart.time
+                sleep.real_start_date = sleepStart.date
+                break;
+            case 'end_sleep':
+                if (props.status == 'WAIT_FOR_START') {
+                    if (!fastStart) {
+                        Taro.showToast({
+                            icon: 'none',
+                            title: '请选择开始断食时间'
+                        })
+                        return
+                    }
+                    fast.real_start_time = fastStart.time
+                    fast.real_start_date = fastStart.date
+                }
+                if (!sleepStart) {
+                    Taro.showToast({
+                        icon: 'none',
+                        title: '请选择开始睡眠时间'
+                    })
+                    return
+                }
+                if (!sleepEnd) {
+                    Taro.showToast({
+                        icon: 'none',
+                        title: '请选择结束睡眠时间'
+                    })
+                    return
+                }
+                sleep.real_start_time = sleepStart.time
+                sleep.real_start_date = sleepStart.date
+                sleep.real_end_time = sleepEnd.time
+                sleep.real_end_date = sleepEnd.date
+                break;
+            case 'end_fast':
+                if (props.status == 'WAIT_FOR_START') {
+                    if (!fastStart) {
+                        Taro.showToast({
+                            icon: 'none',
+                            title: '请选择开始断食时间'
+                        })
+                        return
+                    }
+                    if (!sleepStart && props.scenario == 'FAST_SLEEP') {
+                        Taro.showToast({
+                            icon: 'none',
+                            title: '请选择开始睡眠时间'
+                        })
+                        return
+                    }
+                    fast.real_start_time = fastStart.time
+                    fast.real_start_date = fastStart.date
+
+                    if (props.scenario == 'FAST_SLEEP') {
+                        sleep.real_start_time = sleepStart.time
+                        sleep.real_start_date = sleepStart.date
+                    }
+
+
+                }
+                else if (props.status == 'ONGOING1') {
+                    if (!sleepStart) {
+                        Taro.showToast({
+                            icon: 'none',
+                            title: '请选择开始睡眠时间'
+                        })
+                        return
+                    }
+                    sleep.real_start_time = sleepStart.time
+                    sleep.real_start_date = sleepStart.date
+                }
+                if (!sleepEnd) {
+                    Taro.showToast({
+                        icon: 'none',
+                        title: '请选择结束睡眠时间'
+                    })
+                    return
+                }
+                if (!fastEnd) {
+                    Taro.showToast({
+                        icon: 'none',
+                        title: '请选择结束断食时间'
+                    })
+                    return
+                }
+                sleep.real_end_time = sleepEnd.time
+                sleep.real_end_date = sleepEnd.date
+                fast.real_end_time = fastEnd.time
+                fast.real_end_date = fastEnd.date
+                break;
+        }
+        var params: any = {
+        }
+        if (props.scenario == 'FAST_SLEEP') {
+            params = {
+                fast,
+                sleep
+            }
+        }
+        else {
+            params = {
+                fast
+            }
+        }
+        batchClocks(params).then(res => {
+            getLocalPush()
+            global.indexPageRefresh()
+            global.scrollToLatest()
+            global.refrehWeekly()
+            global.refreshStreaks()
+            global.checkAccess((res as any).access)
+
+            cancel()
+        }).catch(e => {
+
+        })
+    }
+
+    function tapItem(index: number) {
+        setShowPicker(true);
+        switch (index) {
+            case 0:
+                setOperateType('startFast')
+                break;
+            case 1:
+                setOperateType('startSleep')
+                break;
+            case 2:
+                setOperateType('endSleep')
+                break;
+            case 3:
+                setOperateType('endFast')
+                break;
+        }
+    }
+
+    function startFastCell() {
+        return <View className="new_item_cell" onClick={() => tapItem(0)}>
+            <Text className="new_item_cell_title">{t('feature.track_time_duration.common.start_fast')}</Text>
+            <View style={{ flex: 1 }} />
+            <Text className="new_item_cell_desc">{fastStart ? TimeFormatter.dateTimeFormate(fastStart.time, true) : 'Pick Time'}</Text>
+            <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
+        </View>
+    }
+
+    function startSleepCell() {
+        return <View className="new_item_cell" onClick={() => tapItem(1)}>
+            <Text className="new_item_cell_title">{t('feature.track_time_duration.common.start_sleep')}</Text>
+            <View style={{ flex: 1 }} />
+            <Text className="new_item_cell_desc">{sleepStart ? TimeFormatter.dateTimeFormate(sleepStart.time, true) : 'Pick Time'}</Text>
+            <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
+        </View>
+    }
+
+    function endSleepCell() {
+        return <View className="new_item_cell" onClick={() => tapItem(2)}>
+            <Text className="new_item_cell_title">{t('feature.track_time_duration.common.end_sleep')}</Text>
+            <View style={{ flex: 1 }} />
+            <Text className="new_item_cell_desc">{sleepEnd ? TimeFormatter.dateTimeFormate(sleepEnd.time, true) : 'Pick Time'}</Text>
+            <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
+        </View>
+    }
+
+    function endFastCell() {
+        return <View className="new_item_cell" onClick={() => tapItem(3)}>
+            <Text className="new_item_cell_title">{t('feature.track_time_duration.common.end_fast')}</Text>
+            <View style={{ flex: 1 }} />
+            <Text className="new_item_cell_desc">{fastEnd ? TimeFormatter.dateTimeFormate(fastEnd.time, true) : 'Pick Time'}</Text>
+            <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
+        </View>
+    }
+
+    function modalContent() {
+        return <Modal
+            testInfo={null}
+            dismiss={() => {
+                setShowPicker(false)
+            }}
+            confirm={() => { }}>
+            {
+                timePickerContent()
+            }
+        </Modal>
+    }
+
+    function timePickerContent() {
+        defaultTimestamp = new Date().getTime()
+        min = defaultTimestamp - 1 * 24 * 3600 * 1000
+        max = defaultTimestamp
+        global.pauseIndexTimer = true
+        var title = t('feature.track_time_duration.common.start_fast')
+        if (operateType == 'endFast') {
+            title = t('feature.track_time_duration.common.end_fast')
+        }
+        else if (operateType == 'startSleep') {
+            title = t('feature.track_time_duration.common.start_sleep')
+        }
+        else if (operateType == 'endSleep') {
+            title = t('feature.track_time_duration.common.end_sleep')
+        }
+        var color = operateType == 'startFast' || operateType == 'endFast' ? ColorType.fast : ColorType.sleep
+        var endTimestamp = min
+        // if (operateType == 'endFast') {
+        //     endTimestamp = currentRecord.fast.target_end_time
+        // }
+        // else if (operateType == 'endSleep') {
+        //     endTimestamp = currentRecord.sleep.target_end_time
+        // }
+
+        var duration = 20000
+        // if (operateType == 'startFast' && currentRecord.fast) {
+        //     duration = currentRecord.fast.target_end_time - currentRecord.fast.target_start_time
+        // }
+        // if (operateType == 'startSleep' && currentRecord.sleep) {
+        //     duration = currentRecord.sleep.target_end_time - currentRecord.sleep.target_start_time
+        // }
+
+        return <View className="modal_content">
+
+            <ConsolePicker ref={pickerRef}
+                themeColor={color}
+                title={title}
+                onCancel={() => {
+                    setShowPicker(false)
+                    global.pauseIndexTimer = false
+                }}
+                min={min}
+                max={max}
+                current={defaultTimestamp}
+                duration={duration}
+                endTimestamp={endTimestamp}
+                isFast={operateType == 'startFast' || operateType == 'endFast'}
+                isEnd={operateType == 'endFast' || operateType == 'endSleep'}
+                isTimeout={false}
+                isLoading={false}
+                hidenEndTime={true}
+                onChange={(e) => {
+                    setShowPicker(false)
+                    global.pauseIndexTimer = false
+                    if (operateType == 'startFast') {
+                        setFastStart({
+                            time: e,
+                            date: dayjs(e).format('YYYYMMDD')
+                        })
+                    }
+                    else if (operateType == 'endFast') {
+                        setFastEnd({
+                            time: e,
+                            date: dayjs(e).format('YYYYMMDD')
+                        })
+                    }
+                    else if (operateType == 'startSleep') {
+                        setSleepStart({
+                            time: e,
+                            date: dayjs(e).format('YYYYMMDD')
+                        })
+                    }
+                    else {
+                        setSleepEnd({
+                            time: e,
+                            date: dayjs(e).format('YYYYMMDD')
+                        })
+                    }
+                }}
+            />
+
+        </View>
+    }
+
+    return <View className="modal_content">
+        <View style={{
+            marginLeft: rpxToPx(46),
+            height: rpxToPx(120), display: 'flex',
+            flexDirection: 'row', alignItems: 'center',
+            marginTop: rpxToPx(36),
+            marginBottom: rpxToPx(48)
+        }}>
+            <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: rpxToPx(48) }}>Log your timings</Text>
+        </View>
+
+        <View style={{
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: '#262626',
+            borderRadius: rpxToPx(24),
+            marginLeft: rpxToPx(46),
+            marginRight: rpxToPx(46),
+            marginBottom: rpxToPx(60)
+
+        }}>
+            {
+                props.event == 'start_sleep' && startFastCell()
+            }
+            {
+                props.event == 'start_sleep' && startSleepCell()
+            }
+            {
+                props.event == 'end_sleep' && props.status == 'WAIT_FOR_START' && startFastCell()
+            }
+            {
+                props.event == 'end_sleep' && startSleepCell()
+            }
+            {
+                props.event == 'end_sleep' && endSleepCell()
+            }
+            {
+                props.event == 'end_fast' && props.status == 'WAIT_FOR_START' && startFastCell()
+            }
+            {
+                props.event == 'end_fast' && props.scenario == 'FAST_SLEEP' && (props.status == 'ONGOING1' || props.status == 'WAIT_FOR_START') && startSleepCell()
+            }
+            {
+                props.event == 'end_fast' && props.scenario == 'FAST_SLEEP' && (props.status == 'ONGOING1' || props.status == 'ONGOING2' || props.status == 'WAIT_FOR_START') && endSleepCell()
+            }
+            {
+                props.event == 'end_fast' && endFastCell()
+            }
+        </View>
+
+        <View className='modal_operate'>
+
+            <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>
+                <Text className='modal_cancel_text' style={{ color: color, fontWeight: 'bold' }}>{t('feature.common.picker_cancel_btn')}</Text>
+            </View>
+            <View className='btn_space' />
+            <View className='modal_btn' style={{ backgroundColor: color, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', opacity: isLoading ? 0.6 : 1 }} onClick={confirm}>
+                {
+                    isLoading && process.env.TARO_ENV == 'rn' && <View style={{ display: 'flex', overflow: 'hidden', height: 20, marginRight: 5 }}><AtActivityIndicator mode="center" color="#000" /></View>
+                }
+
+                <Text className='modal_confirm_text' style={{ color: '#000', fontWeight: 'bold' }}>{t('feature.common.picker_confirm_btn')}</Text>
+            </View>
+
+
+        </View>
+        {
+            showPicker && modalContent()
+        }
+    </View>
+}

src/features/trackTimeDuration/components/WeekCalendar.tsx

@@ -5,7 +5,7 @@ import { ColorType } from "@/context/themes/color";
 import WeekCalendarItem from "./WeekCalendarItem";
 import { rpxToPx } from "@/utils/tools";
 import { TimeFormatter } from "@/utils/time_format";
-import { clockSummaryStats } from "@/services/trackTimeDuration";
+import { clockSummaryStats, eatWakes } from "@/services/trackTimeDuration";
 import { useTranslation } from "react-i18next";
 import { IconBigArrow } from "@/components/basic/Icons";
 import dayjs from "dayjs";
@@ -24,7 +24,7 @@ if (process.env.TARO_ENV == 'rn') {
 }
 
 
-const WeekCalendar = memo(() => {
+const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
     const [calendars, setCalendars] = useState<any>([])
     const [current, setCurrent] = useState(0)
     const [summary, setSummary] = useState<any>(null)
@@ -53,20 +53,39 @@ const WeekCalendar = memo(() => {
         }
         var list: any = []
         var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
+        if (!props.isFastSleep){
+            offset = pageIndex * pageSize * 24 * 3600 * 1000
+        }
         for (var i = 0; i < pageSize; i++) {
             list.push(`${i + pageIndex * pageSize},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
         }
-        clockSummaryStats({ times: list.join(';') }).then(res => {
-            var list = (res as any).data.reverse()
-            if (pageIndex == 0) {
-                setCalendars(list)
-                setSummary(list[current].summary_stats ? list[current].summary_stats : null)
-                setCalendarData(list[current])
-
-                setIsLoading(false)
-            }
-
-        })
+        if (props.isFastSleep){
+            clockSummaryStats({ times: list.join(';') }).then(res => {
+                var list = (res as any).data.reverse()
+                if (pageIndex == 0) {
+                    setCalendars(list)
+                    setSummary(list[current].summary_stats ? list[current].summary_stats : null)
+                    setCalendarData(list[current])
+    
+                    setIsLoading(false)
+                }
+    
+            })
+        }
+        else {
+            eatWakes({ times: list.join(';') }).then(res => {
+                var list = (res as any).data.reverse()
+                if (pageIndex == 0) {
+                    setCalendars(list)
+                    setSummary(list[current].summary_stats ? list[current].summary_stats : null)
+                    setCalendarData(list[current])
+    
+                    setIsLoading(false)
+                }
+    
+            })
+        }
+        
     }
 
     function getRecords() {
@@ -80,36 +99,72 @@ const WeekCalendar = memo(() => {
         }
         var list: any = []
         var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
+        if (!props.isFastSleep){
+            offset = pageIndex * pageSize * 24 * 3600 * 1000
+        }
         for (var i = 0; i < pageSize; i++) {
             list.push(`${i + pageIndex * pageSize},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
         }
-        clockSummaryStats({ times: list.join(';') }).then(res => {
-            var list = (res as any).data.reverse()
-            if (list.length > 1) {
-                lastFastValue = list[list.length - 2].summary_stats.fast.avg
-                lastSleepValue = list[list.length - 2].summary_stats.sleep.avg
-            }
 
-            if (pageIndex == 0) {
-                setCalendars(list)
-                setCurrent(list.length - 1)
-                setSummary(list[list.length - 1].summary_stats ? list[list.length - 1].summary_stats : null)
-                setCalendarData(list[list.length - 1])
-                setMinTime((res as any).extra.real_start_time_min)
-                setLeft((list.length - 1) * parseInt(rpxToPx(658) + ''))
-                setIsLoading(false);
-                if (ref.current) {
-                    (ref.current as any).scrollToOffset((list.length - 1) * parseInt(rpxToPx(658) + ''), false);
-                    setTimeout(() => {
+        if (props.isFastSleep){
+            clockSummaryStats({ times: list.join(';') }).then(res => {
+                var list = (res as any).data.reverse()
+                if (list.length > 1) {
+                    lastFastValue = list[list.length - 2].summary_stats.fast.avg
+                    lastSleepValue = list[list.length - 2].summary_stats.sleep.avg
+                }
+    
+                if (pageIndex == 0) {
+                    setCalendars(list)
+                    setCurrent(list.length - 1)
+                    setSummary(list[list.length - 1].summary_stats ? list[list.length - 1].summary_stats : null)
+                    setCalendarData(list[list.length - 1])
+                    setMinTime((res as any).extra.real_start_time_min)
+                    setLeft((list.length - 1) * parseInt(rpxToPx(658) + ''))
+                    setIsLoading(false);
+                    if (ref.current) {
                         (ref.current as any).scrollToOffset((list.length - 1) * parseInt(rpxToPx(658) + ''), false);
-                    }, 500)
+                        setTimeout(() => {
+                            (ref.current as any).scrollToOffset((list.length - 1) * parseInt(rpxToPx(658) + ''), false);
+                        }, 500)
+                    }
                 }
-            }
-            else {
-
-            }
-
-        })
+                else {
+    
+                }
+    
+            })
+        }
+        else {
+            eatWakes({ times: list.join(';') }).then(res => {
+                var list = (res as any).data.reverse()
+                if (list.length > 1) {
+                    lastFastValue = list[list.length - 2].summary_stats.eat.avg
+                    lastSleepValue = list[list.length - 2].summary_stats.wake.avg
+                }
+    
+                if (pageIndex == 0) {
+                    setCalendars(list)
+                    setCurrent(list.length - 1)
+                    setSummary(list[list.length - 1].summary_stats ? list[list.length - 1].summary_stats : null)
+                    setCalendarData(list[list.length - 1])
+                    setMinTime((res as any).extra.real_start_time_min)
+                    setLeft((list.length - 1) * parseInt(rpxToPx(658) + ''))
+                    setIsLoading(false);
+                    if (ref.current) {
+                        (ref.current as any).scrollToOffset((list.length - 1) * parseInt(rpxToPx(658) + ''), false);
+                        setTimeout(() => {
+                            (ref.current as any).scrollToOffset((list.length - 1) * parseInt(rpxToPx(658) + ''), false);
+                        }, 500)
+                    }
+                }
+                else {
+    
+                }
+    
+            })
+        }
+        
         // clockSummaryStats({start:new Date().getTime()-7*24*3600*1000,end:new Date().getTime()}).then(res => { })
     }
 
@@ -157,8 +212,8 @@ const WeekCalendar = memo(() => {
 
     function onChange(e) {
         var page = e.detail.current
-        lastFastValue = calendars[current].summary_stats.fast.avg
-        lastSleepValue = calendars[current].summary_stats.sleep.avg
+        lastFastValue = props.isFastSleep?calendars[current].summary_stats.fast.avg:calendars[current].summary_stats.eat.avg
+        lastSleepValue = props.isFastSleep?calendars[current].summary_stats.sleep.avg:calendars[current].summary_stats.wake.avg
         setCurrent(page)
         setSummary(calendars[page].summary_stats ? calendars[page].summary_stats : null)
         setCalendarData(calendars[page])
@@ -175,8 +230,14 @@ const WeekCalendar = memo(() => {
 
     function getWeekDuration() {
         if (global.language == 'en') {
+            if (!props.isFastSleep) {
+                return `${t('feature.common.day_of_week_full.mon')}, ${getDate(calendarData.start)} - ${t('feature.common.day_of_week_full.sun')}, ${getDate(calendarData.end-1)}`
+            }
             return `${t('feature.common.day_of_week_full.sun')} ${t('feature.common.time_desc.afternoon')}, ${getDate(calendarData.start)} - ${t('feature.common.day_of_week_full.sun')} ${t('feature.common.time_desc.morning')}, ${getDate(calendarData.end)}`
         }
+        if (!props.isFastSleep) {
+            return `${getDate(calendarData.start)} ${t('feature.common.day_of_week_full.mon')} - ${getDate(calendarData.end-1)} ${t('feature.common.day_of_week_full.sun')}`
+        }
         return `${getDate(calendarData.start)} ${t('feature.common.day_of_week_full.sun')}${t('feature.common.time_desc.afternoon')} - ${getDate(calendarData.end)} ${t('feature.common.day_of_week_full.sun')}${t('feature.common.time_desc.morning')}`
     }
 
@@ -193,49 +254,49 @@ const WeekCalendar = memo(() => {
         }
     }
 
-    function showWeeklyItem(index){
-        if (process.env.TARO_ENV=='weapp'){
-            if (index >= current - 1 && index <= current + 1){
+    function showWeeklyItem(index) {
+        if (process.env.TARO_ENV == 'weapp') {
+            if (index >= current - 1 && index <= current + 1) {
                 return true
             }
             return false
         }
-        if (index >= current - 2 && index <= current + 2){
+        if (index >= current - 2 && index <= current + 2) {
             return true
         }
         return false
     }
 
     if (!calendarData)
-        return <View />
+        return <View style={{height:parseInt(rpxToPx(520) + '')+rpxToPx(16)+rpxToPx(32)+rpxToPx(20)+rpxToPx(72)}}/>
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
         <View className="calendar_summary_top">
             <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                 {
-                    !summary || summary.fast.avg == 0 ? <View className="calendar-empty-bg" style={{ borderColor: ColorType.fast }}>
-                        <View className="calendar-empty-line" style={{ backgroundColor: ColorType.fast }} />
+                    !summary || (props.isFastSleep?summary.fast.avg == 0:summary.eat.avg == 0) ? <View className="calendar-empty-bg" style={{ borderColor: props.isFastSleep ? ColorType.fast : ColorType.food }}>
+                        <View className="calendar-empty-line" style={{ backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food }} />
                     </View> :
-                        <View className={lastFastValue > summary.fast.avg ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: ColorType.fast }}>
+                        <View className={(props.isFastSleep?lastFastValue > summary.fast.avg:lastFastValue > summary.eat.avg) ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food }}>
                             <IconBigArrow color="#fff" width={rpxToPx(32)} />
                         </View>
                 }
                 <View className="calendar_summary_item">
-                    <Text className="calendar_summary_title">{t('feature.track_time_duration.weekly.fast_average')}</Text>
-                    <Text className="calendar_summary_value" style={{ color: ColorType.fast }}>{!summary || summary.fast.avg == 0 ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.fast.avg)}</Text>
+                    <Text className="calendar_summary_title">{props.isFastSleep ? t('feature.track_time_duration.weekly.fast_average') : t('feature.track_time_duration.weekly.eat_average')}</Text>
+                    <Text className="calendar_summary_value" style={{ color: props.isFastSleep ? ColorType.fast : ColorType.food }}>{!summary || (props.isFastSleep?summary.fast.avg == 0:summary.eat.avg == 0) ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + (props.isFastSleep?summary.fast.avg:summary.eat.avg))}</Text>
                 </View>
             </View>
             <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                 {
-                    !summary || summary.sleep.avg == 0 ? <View className="calendar-empty-bg" style={{ borderColor: ColorType.sleep }}>
-                        <View className="calendar-empty-line" style={{ backgroundColor: ColorType.sleep }} />
+                    !summary || (props.isFastSleep?summary.sleep.avg == 0:summary.wake.avg == 0) ? <View className="calendar-empty-bg" style={{ borderColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>
+                        <View className="calendar-empty-line" style={{ backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }} />
                     </View> :
-                        <View className={lastSleepValue > summary.sleep.avg ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: ColorType.sleep }}>
+                        <View className={lastSleepValue > (props.isFastSleep?summary.sleep.avg:summary.wake.avg) ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>
                             <IconBigArrow color="#fff" width={rpxToPx(32)} />
                         </View>
                 }
                 <View className="calendar_summary_item">
-                    <Text className="calendar_summary_title">{t('feature.track_time_duration.weekly.sleep_average')}</Text>
-                    <Text className="calendar_summary_value" style={{ color: ColorType.sleep }}>{!summary || summary.sleep.avg == 0 ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.sleep.avg)}</Text>
+                    <Text className="calendar_summary_title">{props.isFastSleep ? t('feature.track_time_duration.weekly.sleep_average') : t('feature.track_time_duration.weekly.wake_average')}</Text>
+                    <Text className="calendar_summary_value" style={{ color: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>{!summary || (props.isFastSleep?summary.sleep.avg == 0:summary.wake.avg == 0) ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + (props.isFastSleep?summary.sleep.avg:summary.wake.avg))}</Text>
                 </View>
             </View>
 
@@ -287,51 +348,35 @@ const WeekCalendar = memo(() => {
                                 return <SwiperItem key={index}>
                                     {
                                         showWeeklyItem(index) ?
-                                            <WeekCalendarItem data={item} isCurrentWeek={index == calendars.length - 1} /> :
+                                            <WeekCalendarItem data={item} isCurrentWeek={index == calendars.length - 1} isFastSleep={props.isFastSleep} /> :
                                             <View style={{ width: parseInt(rpxToPx(658) + ''), flexShrink: 0 }} />
                                     }
                                 </SwiperItem>
                             })
                         }
                     </Swiper>
-                    {/* <ScrollView
-                        style={{
-                            marginLeft: parseInt(rpxToPx(46) + ''),
-                            width: parseInt(rpxToPx(658) + ''),
-                            height: parseInt(rpxToPx(520) + ''),
-                            flexDirection: 'row', display: 'flex',
-
-                        }}
-                        ref={ref}
-                        showScrollbar={false}
-                        onScroll={onScroll}
-                        onDragEnd={dragEnd}
-                        onDragStart={dragStart}
-                        scrollLeft={left}
-                        scrollX pagingEnabled={true}
-                        showsHorizontalScrollIndicator={false}
-                        enableFlex enhanced>
-                        {
-                            calendars.map((item, index) => {
-
-                                if (index == current || index == current - 1 || index == current + 1)
-                                    return <WeekCalendarItem data={item} key={index} isCurrentWeek={index == calendars.length - 1} />
-                                return <View key={index} style={{ width: parseInt(rpxToPx(658) + ''), flexShrink: 0 }} />
-                            })
-                        }
-
-                    </ScrollView> */}
-                </View>
-                <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
-                    <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>12:00</Text>
-                    <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>18:00</Text>
-                    <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>24:00</Text>
-                    <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>06:00</Text>
-                    <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>12:00</Text>
                 </View>
+                {
+                    props.isFastSleep ? <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
+                        <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>12:00</Text>
+                        <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>18:00</Text>
+                        <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>24:00</Text>
+                        <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>06:00</Text>
+                        <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>12:00</Text>
+                    </View> :
+                        <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
+                            <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>00:00</Text>
+                            <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>06:00</Text>
+                            <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>12:00</Text>
+                            <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>18:00</Text>
+                            <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>24:00</Text>
+                        </View>
+                }
+
             </View>
 
         </View>
+
     </View>
 })
 

src/features/trackTimeDuration/components/WeekCalendarItem.tsx

@@ -15,7 +15,7 @@ dayjs.extend(utc)
 dayjs.extend(timezone)
 
 let timer
-export default function WeekCalendarItem(props: { data: any, isCurrentWeek: boolean }) {
+export default function WeekCalendarItem(props: { data: any, isCurrentWeek: boolean, isFastSleep: boolean }) {
     const [charts, setCharts] = useState([])
     const [showCurrentTime, setShowCurrentTime] = useState(false)
     const [position, setPosition] = useState({ left: 0, top: 0 })
@@ -51,22 +51,25 @@ export default function WeekCalendarItem(props: { data: any, isCurrentWeek: bool
 
             props.data.list.map((item, index) => {
                 var isFast = item.scenario == 'FAST'
+                if (!props.isFastSleep) {
+                    isFast = item.scenario == 'EAT'
+                }
 
                 var real_start = item.real_start_time
                 var real_end = item.real_end_time
 
-                
+
 
                 //睡眠数据下，以fast_end为准
-                if (item.fast_real_end_timezone && item.fast_real_end_timezone.id){
-                    var strEnd = TimeFormatter.tzTimeFormateLocalTime(real_end, item.fast_real_end_timezone.id,'YYYY-MM-DDTHH:mm:ss')
+                if (item.fast_real_end_timezone && item.fast_real_end_timezone.id) {
+                    var strEnd = TimeFormatter.tzTimeFormateLocalTime(real_end, item.fast_real_end_timezone.id, 'YYYY-MM-DDTHH:mm:ss')
                     var duration = real_end - real_start
                     real_end = new Date(strEnd).getTime()
                     real_start = real_end - duration
                 }
 
                 else if (item.real_end_timezone && item.real_end_timezone.id) {
-                    var strEnd = TimeFormatter.tzTimeFormateLocalTime(real_end, item.real_end_timezone.id,'YYYY-MM-DDTHH:mm:ss')
+                    var strEnd = TimeFormatter.tzTimeFormateLocalTime(real_end, item.real_end_timezone.id, 'YYYY-MM-DDTHH:mm:ss')
                     var duration = real_end - real_start
                     real_end = new Date(strEnd).getTime()
                     real_start = real_end - duration
@@ -163,13 +166,21 @@ export default function WeekCalendarItem(props: { data: any, isCurrentWeek: bool
     function isTop() {
         var now = new Date()
         if (now.getHours() >= 12) {
+            if (!props.isFastSleep) return false;
             return true
         }
+        if (!props.isFastSleep) return true;
         return false
     }
 
     function weekIndex() {
         var week = new Date().getDay()
+        if (!props.isFastSleep) {
+            if (week == 0) {
+                return 6;
+            }
+            return week - 1;
+        }
         if (!isTop()) {
             return week - 1
         }
@@ -177,15 +188,27 @@ export default function WeekCalendarItem(props: { data: any, isCurrentWeek: bool
     }
     return <View className="chart_content" style={{ width: parseInt(rpxToPx(658) + '') }}>
         <View style={{ height: parseInt(rpxToPx(60) + '') }}>
-            <View className="chart_top_week">
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 0 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(0)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(1)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 2 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(2)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 3 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(3)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 4 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(4)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 5 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(5)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 6 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(6)}</Text>
-            </View>
+            {
+                props.isFastSleep ? <View className="chart_top_week">
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 0 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(0)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(1)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 2 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(2)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 3 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(3)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 4 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(4)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 5 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(5)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 6 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(6)}</Text>
+                </View> :
+                    <View className="chart_top_week">
+                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + ''), opacity: props.isCurrentWeek  && weekIndex() == 0 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(1)}</Text>
+                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + ''), opacity: props.isCurrentWeek  && weekIndex() == 1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(2)}</Text>
+                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + ''), opacity: props.isCurrentWeek  && weekIndex() == 2 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(3)}</Text>
+                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + ''), opacity: props.isCurrentWeek  && weekIndex() == 3 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(4)}</Text>
+                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + ''), opacity: props.isCurrentWeek  && weekIndex() == 4 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(5)}</Text>
+                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + ''), opacity: props.isCurrentWeek  && weekIndex() == 5 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(6)}</Text>
+                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + ''), opacity: props.isCurrentWeek  && weekIndex() == 6 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(0)}</Text>
+                    </View>
+            }
+
         </View>
 
         <View className="chart_detail">
@@ -209,7 +232,7 @@ export default function WeekCalendarItem(props: { data: any, isCurrentWeek: bool
                                 {
                                     (item as any).fasts.map((obj, k) => {
                                         return <View key={k} className="detailLine" style={{
-                                            backgroundColor: ColorType.fast,
+                                            backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food,
                                             top: rpxToPx(obj.begin * 400),
                                             height: rpxToPx(obj.height * 400)
                                         }} />
@@ -224,7 +247,7 @@ export default function WeekCalendarItem(props: { data: any, isCurrentWeek: bool
                                 {
                                     (item as any).sleeps.map((obj, j) => {
                                         return <View key={j} className="detailLine" style={{
-                                            backgroundColor: ColorType.sleep,
+                                            backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity,
                                             top: rpxToPx(obj.begin * 400),
                                             height: rpxToPx(obj.height * 400)
                                         }} />
@@ -247,16 +270,19 @@ export default function WeekCalendarItem(props: { data: any, isCurrentWeek: bool
                 </View>
             }
         </View>
-        <View style={{ height: parseInt(rpxToPx(60) + '') }}>
-            <View className="chart_bottom_week">
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 0 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(1)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(2)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 2 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(3)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 3 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(4)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 4 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(5)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 5 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(6)}</Text>
-                <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == -1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(0)}</Text>
+        {
+            props.isFastSleep && <View style={{ height: parseInt(rpxToPx(60) + '') }}>
+                <View className="chart_bottom_week">
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 0 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(1)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(2)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 2 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(3)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 3 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(4)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 4 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(5)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 5 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(6)}</Text>
+                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == -1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(0)}</Text>
+                </View>
             </View>
-        </View>
+        }
+
     </View>
 }

src/pages/clock/Clock.scss

@@ -77,4 +77,16 @@
     opacity: 0.6;
     font-size: 48px;
     font-weight: bold;
+}
+
+.vip_calendar{
+    margin-top: 40px;
+    margin-left: 46px;
+    width: 658px;
+    height: 104px;
+    background-color: #212121;
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

src/pages/clock/ClockMain.tsx

@@ -118,6 +118,8 @@ export default function Page() {
     const permission = useSelector((state: any) => state.permission);
     const common = useSelector((state: any) => state.common);
 
+    const [showEatCalendar, setShowEatCalendar] = useState(false)
+
     const scrollRef = useRef(null);
 
     const nightStore = useSelector((state: any) => state.night);
@@ -307,7 +309,7 @@ export default function Page() {
             checkTimeZone()
         }
         else {
-            if (!kIsIOS){
+            if (!kIsIOS) {
                 updateNotificationStatus()
             }
         }
@@ -801,6 +803,18 @@ export default function Page() {
 
     var timestamp = new Date().getTime()
 
+    function eatCalendarContent() {
+        return <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <View className="index_section">
+                <Text className="index_section_title">{t('feature.track_time_duration.weekly.title')}</Text>
+            </View>
+            <WeekCalendar isFastSleep={false} />
+            <View className="vip_calendar" style={{ marginBottom: 40 }} onClick={() => setShowEatCalendar(false)}>
+                <Text style={{ color: '#fff' }}>关闭</Text>
+            </View>
+        </View>
+    }
+
     function render() {
         var smallTitle = ''
         const weekday = TimeFormatter.getDayOfWeek(new Date().getDay(), true);
@@ -845,7 +859,7 @@ export default function Page() {
                         }
                         {
                             process.env.TARO_ENV == 'rn' && <View onClick={more}>
-                                <GradientText style={{ fontSize: rpxToPx(32), fontWeight: 'bold',color:'black' }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</GradientText>
+                                <GradientText style={{ fontSize: rpxToPx(32), fontWeight: 'bold', color: 'black' }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</GradientText>
                             </View>
                         }
                     </View>
@@ -877,11 +891,25 @@ export default function Page() {
                         <View className="index_section">
                             <Text className="index_section_title">{t('feature.track_time_duration.weekly.title')}</Text>
                         </View>
-                        <WeekCalendar />
+                        <WeekCalendar isFastSleep={true}/>
+                        <View className="vip_calendar" onClick={() => setShowEatCalendar(true)}>
+                            <Text style={{ color: '#fff' }}>Show eating and wake windows</Text>
+                        </View>
                     </View>
                 }
 
-
+                {
+                    showEatCalendar && <Modal
+                        testInfo={null}
+                        dismiss={() => {
+                            setShowEatCalendar(false)
+                        }}
+                        confirm={() => { }}>
+                        {
+                            eatCalendarContent()
+                        }
+                    </Modal>
+                }
 
 
                 {

src/services/http/api.js

@@ -1,4 +1,4 @@
-const online = process.env.TARO_ENV == 'weapp' ? true : true;
+const online = process.env.TARO_ENV == 'weapp' ? false : false;
 
 import { WX_VERSION as _WX_VERSION, APP_VERSION as _APP_VERSION } from "../../../config/env";
 
@@ -40,8 +40,10 @@ export const API_SYSTEM_VERSION = `${baseUrl}/api/system/version/fast/`
 export const API_FAST_PLANS = `${baseUrl}/api/fast/plans`
 export const API_FAST_CHECKS = `${baseUrl}/api/fast/checks`
 export const API_FAST_CLOCKS = `${baseUrl}/api/fast/clocks`
+export const API_MIX_CLOCKS = `${baseUrl}/api/fast/batch-clocks`
 export const API_CLOCK_HOME = `${baseUrl}/api/clock/home`
 export const API_CLOCK_STATS = `${baseUrl}/api/clock/summary/stats`
+export const API_EAT_WAKES = `${baseUrl}/api/clock/eat-wakes`
 export const API_FAST_CHECK_ABANDONED = `${baseUrl}/api/fast/check-abandoned`
 export const API_FAST_RECORDS = `${baseUrl}/api/fast/records`
 export const API_FAST_SCHEDULES = `${baseUrl}/api/fast/schedules`

src/services/trackTimeDuration.tsx

@@ -1,6 +1,6 @@
 
 
-import { API_FAST_PLANS, API_FAST_CHECKS, API_FAST_CLOCKS, API_CLOCK_RECORDS, API_CLOCK_HOME, API_CLOCK_STATS, API_CLOCK_SUMMARY_RECORDS, API_CLOCK_RECORD_UPDATE, API_CLOCK_STREAKS } from './http/api'
+import { API_FAST_PLANS, API_FAST_CHECKS, API_FAST_CLOCKS, API_CLOCK_RECORDS, API_CLOCK_HOME, API_CLOCK_STATS, API_CLOCK_SUMMARY_RECORDS, API_CLOCK_RECORD_UPDATE, API_CLOCK_STREAKS, API_EAT_WAKES } from './http/api'
 import { request } from './http/request';
 import { getLocalPush } from '@/features/trackTimeDuration/actions/TrackTimeActions';
 
@@ -61,6 +61,16 @@ export const clockSummaryStats = (params: any) => {
     })
 }
 
+export const eatWakes = (params:any)=>{
+    return new Promise((resolve) => {
+        request({
+            url: API_EAT_WAKES, method: 'GET', data: { ...params }
+        }).then(res => {
+            resolve(res);
+        })
+    })
+}
+
 export const getClocks = () => {
     return new Promise((resolve, reject) => {
         request({

src/utils/time_format.ts

@@ -114,7 +114,6 @@ export class TimeFormatter {
   static dateTimeFormate(timestamp: number, ignoreWeek?: boolean) {
     const currentDate = new Date();
     const inputDate = new Date(timestamp);
-    debugger
 
     // 判断是否是今天
     if (