update

src/_health/base/new_date_picker.tsx

@@ -54,12 +54,12 @@ export default function NewDatePicker(props: {
         const yesterday = today.subtract(1, 'day');
         while (date <= currentDate) {
             var dt = dayjs(date.getTime())
-            var string = global.langauge == 'en' ? dt.format('MMM D') : dt.format('MMMD日')
+            var string = global.language == 'en' ? dt.format('MMM D') : dt.format('MMMD日')
             if (dt.isSame(today, 'day')&&dt.isSame(today, 'month')&&dt.isSame(today, 'year')) {
-                string = (global.langauge == 'en' ? 'Today, ' : '今天 ') + string
+                string = (global.language == 'en' ? 'Today, ' : '今天 ') + string
             }
             else if (dt.isSame(yesterday, 'day')&&dt.isSame(yesterday, 'month')&&dt.isSame(yesterday, 'year')) {
-                string = (global.langauge == 'en' ? 'Yesterday, ' : '昨天 ') + string
+                string = (global.language == 'en' ? 'Yesterday, ' : '昨天 ') + string
             }
             result.push(string)
             date.setDate(date.getDate() + 1)

src/_health/components/choose_date_time.tsx

@@ -33,26 +33,26 @@ export default function ChooseDateTime(props: {
         var date = dayjs(props.date)
 
         if (today.format('YYYY-MM-DD') == date.format('YYYY-MM-DD')) {
-            return global.languange == 'en' ? 'Today' : '今天'
+            return global.language == 'en' ? 'Today' : '今天'
         }
         if (yesterday.format('YYYY-MM-DD') == date.format('YYYY-MM-DD')) {
-            return global.languange == 'en' ? 'Yesterday' : '昨天'
+            return global.language == 'en' ? 'Yesterday' : '昨天'
         }
         else {
-            return global.languange == 'en' ? date.format('MMM D') : date.format('MMMD日')
+            return global.language == 'en' ? date.format('MMM D') : date.format('MMMD日')
         }
     }
 
     return <View style={{ position: 'relative' }}>
         <View className="card_header">
-            {
+            {/* {
                 props.showError && <View className="error_icon_bg">
                     <Image src={require('@assets/_health/tip_error.png')} style={{ width: rpxToPx(26), height: rpxToPx(26) }} />
                 </View>
 
-            }
+            } */}
             {
-                props.title ? <View className="h34" style={{ flex: 1 }}>{props.title}</View> :
+                props.title ? <View className="h34" style={{ flex: 1,color:'#000' }}>{props.title}</View> :
                     <View style={{ flex: 1 }} />
             }
 
@@ -98,7 +98,7 @@ export default function ChooseDateTime(props: {
                 color={props.color}
                 title={props.time}
                 fontSize={rpxToPx(34)}
-                width={rpxToPx(136)}
+                width={rpxToPx(196)}
                 height={rpxToPx(84)}
                 disable={props.disable}
                 fontNormal

src/_health/components/fast_sleep_card.tsx

@@ -6,9 +6,13 @@ import { TimeFormatter } from '@/utils/time_format';
 import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import { getDurationArc, getStartArc, getThemeColor } from '@/features/health/hooks/health_hooks';
 import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import StatusIndicator, { StatusType } from '../base/status_indicator';
+import { IconCheck, IconCircle, IconMiss } from '@/components/basic/Icons';
 
 export default function FastSleepCard(props: { step: number, data: any }) {
     const health = useSelector((state: any) => state.health);
+    const { t } = useTranslation()
 
     const common: RingCommon = {
         useCase: 'ChooseScenario',
@@ -178,7 +182,7 @@ export default function FastSleepCard(props: { step: number, data: any }) {
         return {
             color: getThemeColor(mode),
             lineWidth: 4,
-            borderColor: '#F5F5F5',
+            borderColor: '#ffffff',
             offset: 0
         }
 
@@ -275,59 +279,186 @@ export default function FastSleepCard(props: { step: number, data: any }) {
             case 0:
                 {
                     if (status == 'WFS') {
-                        title = 'Ready to start'
-                    }
-                    else if (status == 'OG2_NO1') {
-                        title = ''
-                        hide = true
+                        title = t('health.ready_for_logging')
                     }
                     else {
-                        title = 'In progress'
+                        title = t('health.logging_progress')
                     }
+
+                    return <View style={{
+                        position: 'absolute',
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexDirection: 'row',
+                        left: rpxToPx(20),
+                        top: rpxToPx(20),
+                        opacity: hide ? 0 : 1
+                    }}>
+                        <StatusIndicator type={status == 'WFS' ? StatusType.normal : StatusType.ing}
+                            color={status == 'OG2_NO1' || status == 'OG2' ? MainColorType.sleep : MainColorType.fast}
+                            text={title}
+                            fontColor={MainColorType.g01}
+                            fontSize={rpxToPx(20)}
+                        >
+                            {/* {status == 'WFS' && <IconCircle width={rpxToPx(26)} color={MainColorType.fast} />} */}
+                        </StatusIndicator>
+                    </View>
+                    // else if (status == 'OG2_NO1') {
+                    //     title = ''
+                    //     hide = true
+                    // }
+                    // else {
+                    //     title = 'In progress'
+                    // }
                 }
                 break;
             case 1:
                 {
+                    title = t('health.stage1')
+                    var type = StatusType.normal
+                    var color:any = MainColorType.fast
+                    var img: any = null
                     if (status == 'WFS') {
-                        title = 'Stage 1'
+                        type = StatusType.img
+                        color = 'transparent'
+                        img = <IconCircle width={rpxToPx(26)} color={MainColorType.fast} />
                     }
                     else if (status == 'OG1') {
-                        title = 'Stage 1 in progress'
+                        type = StatusType.ing
                     }
                     else if (status == 'OG2_NO1') {
-                        title = 'Stage 1 missing'
+                        type = StatusType.img
+                        color = MainColorType.error
+                        img = <IconMiss width={rpxToPx(26)} color='#fff' />
                     }
                     else {
-                        title = 'Stage 1 completed'
+                        type = StatusType.img
+                        img = <IconCheck width={rpxToPx(26)} height={rpxToPx(26)} color='#fff' />
                     }
 
+                    return <View style={{
+                        position: 'absolute',
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexDirection: 'row',
+                        left: rpxToPx(20),
+                        top: rpxToPx(20),
+                        opacity: hide ? 0 : 1
+                    }}>
+                        <StatusIndicator type={type}
+                            color={color}
+                            text={title}
+                            fontColor={MainColorType.g01}
+                            fontSize={rpxToPx(20)}
+                        >
+                            {
+                                img
+                            }
+                        </StatusIndicator>
+                    </View>
+
                 }
                 break;
             case 2:
                 {
-                    if (status == 'OG2') {
-                        title = 'Stage 2 in progress'
+                    title = t('health.stage2')
+                    // if (status == 'OG2') {
+                    //     title = 'Stage 2 in progress'
+                    // }
+                    // else if (status == 'OG3' || status == 'OG2_NO1') {
+                    //     title = 'Stage 2'
+                    // }
+                    // else {
+                    //     title = 'Stage 2'
+                    // }
+                    var type = StatusType.normal
+                    var img: any = null
+                    var color:any = MainColorType.sleep
+                    if (status == 'WFS'||status == 'OG1') {
+                        type = StatusType.img
+                        img = <IconCircle width={rpxToPx(26)} color={MainColorType.sleep} />
+                        color='transparent'
                     }
-                    else if (status == 'OG3' || status == 'OG2_NO1') {
-                        title = 'Stage 2'
+                    else if (status == 'OG2') {
+                        type = StatusType.ing
+                    }
+                    else if (status == 'OG2_NO1') {
+                        type = StatusType.ing
+                        img = <IconMiss width={rpxToPx(26)} color='#fff' />
                     }
                     else {
-                        title = 'Stage 2'
+                        type = StatusType.img
+                        img = <IconCheck width={rpxToPx(26)} height={rpxToPx(26)} color='#fff' />
                     }
+
+                    return <View style={{
+                        position: 'absolute',
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexDirection: 'row',
+                        left: rpxToPx(20),
+                        top: rpxToPx(20),
+                        opacity: hide ? 0 : 1
+                    }}>
+                        <StatusIndicator type={type}
+                            color={color}
+                            text={title}
+                            fontColor={MainColorType.g01}
+                            fontSize={rpxToPx(20)}
+                        >
+                            {
+                                img
+                            }
+                        </StatusIndicator>
+                    </View>
                 }
-                break;
             case 3:
                 {
+                    title = t('health.stage3')
+                    var type = StatusType.normal
+                    var img: any = null
                     if (status == 'OG3') {
-                        title = 'Stage 3 in progress'
+                        type = StatusType.ing
                     }
                     else if (status == 'OG2_NO1') {
-                        title = 'Stage 3 pending start'
+                        type = StatusType.img
+                        img = <IconCircle width={rpxToPx(26)} color={MainColorType.fast} />
                     }
                     else {
-                        title = 'Stage 3'
+                        type = StatusType.img
+                        img = <IconCircle width={rpxToPx(26)} color={MainColorType.fast} />
                     }
 
+                    return <View style={{
+                        position: 'absolute',
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexDirection: 'row',
+                        left: rpxToPx(20),
+                        top: rpxToPx(20),
+                        opacity: hide ? 0 : 1
+                    }}>
+                        <StatusIndicator type={type}
+                            color={status == 'OG3'?MainColorType.fast:'transparent'}
+                            text={title}
+                            fontColor={MainColorType.g01}
+                            fontSize={rpxToPx(20)}
+                        >
+                            {
+                                img
+                            }
+                        </StatusIndicator>
+                    </View>
+                    // if (status == 'OG3') {
+                    //     title = 'Stage 3 in progress'
+                    // }
+                    // else if (status == 'OG2_NO1') {
+                    //     title = 'Stage 3 pending start'
+                    // }
+                    // else {
+                    //     title = 'Stage 3'
+                    // }
+
                 }
                 break;
         }
@@ -439,27 +570,27 @@ export default function FastSleepCard(props: { step: number, data: any }) {
         switch (props.step) {
             case 0:
                 return <View className='right_content'>
-                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>Fast</View>
+                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>{t('health.fasting')}</View>
                     <View className='h44 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{fastTime()}</View>
                     <View style={{ height: rpxToPx(24) }} />
-                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>Sleep</View>
+                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>{t('health.sleep')}</View>
                     <View className='h44 bold' style={{ color: MainColorType.sleep, lineHeight: rpxToPx(52) + 'px' }}>{sleepTime()}</View>
                 </View>
             case 1:
                 return <View className='right_content'>
-                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>Fast before Bedtime</View>
+                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_before_bed')}</View>
                     <View style={{ height: rpxToPx(12) }} />
                     <View className='h44 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{step1()}</View>
                 </View>
             case 2:
                 return <View className='right_content'>
-                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>Fast while Sleeping</View>
+                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_while_sleep')}</View>
                     <View style={{ height: rpxToPx(12) }} />
                     <View className='h44 bold' style={{ color: MainColorType.sleep, lineHeight: rpxToPx(52) + 'px' }}>{step2()}</View>
                 </View>
             case 3:
                 return <View className='right_content'>
-                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>Fast after Wake Up</View>
+                    <View className='h34' style={{ color: MainColorType.g01, lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_after_sleep')}</View>
                     <View style={{ height: rpxToPx(12) }} />
                     <View className='h44 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{step3()}</View>
                 </View>
@@ -480,7 +611,7 @@ export default function FastSleepCard(props: { step: number, data: any }) {
             circleContent()
         }
         <View style={{
-            marginLeft: rpxToPx(36), height: props.step == 0 ?114:96, 
+            marginLeft: rpxToPx(36), height: props.step == 0 ? 114 : 96,
             marginTop: props.step == 0 ? rpxToPx(86) : rpxToPx(100),
             display: 'flex',
             flexDirection: 'row',

src/_health/components/fast_sleep_console.tsx

@@ -398,7 +398,7 @@ export default function FastSleepConsole(props: { step: number, data: any, del:
         }
         {
             props.step != 2 && props.step != 3 && timelineItem({
-                title: 'Start Fast',
+                title: props.data.fast.timeline[0].title,
                 mode: 'FAST',
                 is_start: true,
                 action: props.data.fast.timeline[0].action,
@@ -408,7 +408,7 @@ export default function FastSleepConsole(props: { step: number, data: any, del:
         }
         {
             props.step != 3 && timelineItem({
-                title: 'Go to bed',
+                title: props.data.sleep.timeline[0].title,
                 mode: 'SLEEP',
                 is_start: true,
                 action: props.data.fast.timeline[0].action,
@@ -418,7 +418,7 @@ export default function FastSleepConsole(props: { step: number, data: any, del:
         }
         {
             props.step != 1 && timelineItem({
-                title: 'Wake up',
+                title: props.data.sleep.timeline[1].title,
                 mode: 'SLEEP',
                 is_start: false,
                 moment: props.data.sleep.timeline[1].moment,
@@ -427,7 +427,7 @@ export default function FastSleepConsole(props: { step: number, data: any, del:
         }
         {
             props.step != 1 && props.step != 2 && timelineItem({
-                title: 'End Fast',
+                title: props.data.fast.timeline[1].title,
                 mode: 'FAST',
                 is_start: false,
                 moment: props.data.fast.timeline[1].moment,

src/_health/components/fast_sleep_popup.tsx

@@ -109,7 +109,7 @@ export default function FastSleepPopup(props: { close: any, data: any }) {
         return <StatusIndicator type={type}
             color={MainColorType.fast}
             fontColor={MainColorType.g01}
-            text={t('health.fast_befor_bed')}
+            text={t('health.fast_before_bed')}
         >
             {
                 type == StatusType.img && <Image style={{ width: rpxToPx(20), height: rpxToPx(20) }} src={require('@assets/_health/checked.png')} />

src/_health/components/fast_sleep_popup_content.tsx

@@ -27,7 +27,7 @@ export default function FastSleepPopupContent(props: {
         return <StatusIndicator type={type}
             color={MainColorType.fast}
             fontColor={MainColorType.g01}
-            text={t('health.fast_befor_bed')}
+            text={t('health.fast_before_bed')}
         >
             {
                 type == StatusType.img && <Image style={{ width: rpxToPx(20), height: rpxToPx(20) }} src={require('@assets/_health/checked.png')} />

src/_health/components/list_footer.scss

@@ -1,13 +1,14 @@
-
-.list_footer{
+.list_footer {
     height: 128px;
     flex-shrink: 0;
-    margin-bottom: 10px;
+    margin-bottom: constant(safe-area-inset-bottom);
+    margin-bottom: env(safe-area-inset-bottom);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 750px;
 }
+
 .no_more {
     display: flex;
     align-items: center;

src/_health/components/time_title_desc.tsx

@@ -1,12 +1,51 @@
 import { MainColorType } from "@/context/themes/color";
 import { rpxToPx } from "@/utils/tools";
 import { Text } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import dayjs from "dayjs";
 
-export default function TimeTitleDesc(props: { time: string, dayTag?: string, title?: string, desc?: string, className?: string,key?:any,style?:any }) {
-    return <Text key={props.key} className={props.className} style={{ fontSize: rpxToPx(32), lineHeight: rpxToPx(48) + 'px',...props.style }}>
-        <Text style={{ color: MainColorType.link }}>{props.time}</Text>
+export default function TimeTitleDesc(props: {
+    time: string,
+    timeObj?: any,
+    dayTag?: string,
+    title?: string,
+    desc?: string,
+    className?: string,
+    key?: any,
+    style?: any
+}) {
+    function tapTime(e) {
+        if (process.env.TARO_ENV == 'weapp') {
+            e.stopPropagation()
+        }
+        if (props.timeObj) {
+            var str = global.language == 'en' ? dayjs(props.timeObj.timestamp).format('MMM D, YYYY HH:mm') : dayjs(props.timeObj.timestamp).format('YYYY年M月D日 HH:mm')
+            if (props.timeObj.timezone) {
+                const { name, gmt } = props.timeObj.timezone
+                str = str + '\n'
+                if (name){
+                    str += name
+                }
+                if (gmt){
+                    str += ' ('+gmt+')'
+                }
+            }
+
+            Taro.showToast({
+                title: str,
+                icon: 'none'
+            })
+            return;
+        }
+        Taro.showToast({
+            title: props.time,
+            icon: 'none'
+        })
+    }
+    return <Text key={props.key} className={props.className} style={{ fontSize: rpxToPx(32), lineHeight: rpxToPx(48) + 'px', ...props.style }}>
+        <Text style={{ color: MainColorType.link }} onClick={tapTime}>{props.time}</Text>
         {
-            props.dayTag && <Text style={{color: MainColorType.link, fontSize: 9, lineHeight: '20px', fontWeight: 'bold', verticalAlign: 'text-top' }}>{props.dayTag}</Text>
+            props.dayTag && <Text style={{ color: MainColorType.link, fontSize: 9, lineHeight: '20px', fontWeight: 'bold', verticalAlign: 'text-top' }}>{props.dayTag}</Text>
         }
         <Text> {' '} </Text>
         {

src/_health/pages/add_moment.tsx

@@ -423,10 +423,10 @@ export default function AddMoment() {
             return ''
         }
         if (yesterday.format('YYYY-MM-DD') == sel.format('YYYY-MM-DD')) {
-            return global.languange == 'en' ? 'Yesterday ' : '昨天 '
+            return global.language == 'en' ? 'Yesterday ' : '昨天 '
         }
         else {
-            return global.languange == 'en' ? sel.format('MMM D ') : sel.format('MMMD日 ')
+            return global.language == 'en' ? sel.format('MMM D ') : sel.format('MMMD日 ')
         }
 
     }

src/_health/pages/archive.tsx

@@ -73,7 +73,7 @@ export default function Archive() {
         {
             list.map((item, index) => {
                 return <View ref={refDemo} id="demo1" key={index}>
-                    <HistoryItem data={item} preData={index==0?null:list[index-1]} index={index} isArchived={true} mode={health.mode} onClick={() => {
+                    <HistoryItem type="archive" data={item} preData={index==0?null:list[index-1]} index={index} isArchived={true} mode={health.mode} onClick={() => {
                         jumpPage('/_health/pages/moment_detail')
                     }} refresh={refresh}/>
                     {/* {

src/_health/pages/fast_sleep.tsx

@@ -17,6 +17,7 @@ import FastSleepCard from "../components/fast_sleep_card";
 import MainHistory from "@/features/health/MainHistory";
 import StickyDateList from "../components/sticky_date_list";
 import FastSleepPopup from "../components/fast_sleep_popup";
+import { useTranslation } from "react-i18next";
 
 export default function FastSleep() {
     const health = useSelector((state: any) => state.health);
@@ -31,6 +32,7 @@ export default function FastSleep() {
     const [showDate, setShowDate] = useState(false)
     const [date, setDate] = useState('')
     const historyRef = useRef()
+    const {t} = useTranslation()
 
     useEffect(() => {
 
@@ -97,7 +99,7 @@ export default function FastSleep() {
     >
         <View className="page_container">
             <NewHeader type={health.fast_with_sleep.status != 'OG2_MISALIGNED' ? NewHeaderType.left_subtitle : NewHeaderType.left}
-                title="Fast with Sleep"
+                title={t('health.fast_with_sleep')}
                 subtitle={health.fast_with_sleep.status != 'OG2_MISALIGNED' ? 'Tune Into Your Circadian Rhythm ' : ''}
             />
             {

src/_health/pages/log_time.tsx

@@ -69,18 +69,9 @@ export default function LogTime() {
 
 
     useEffect(() => {
-        if (isSingle) {
-            if (isFast) {
-                Taro.setNavigationBarTitle({
-                    title: isStart ? '开始断食' : '结束断食'
-                });
-            }
-            else {
-                Taro.setNavigationBarTitle({
-                    title: isStart ? '就寝' : '起床'
-                });
-            }
-        }
+        // if (isSingle) {
+
+        // }
 
         loadData()
 
@@ -132,14 +123,21 @@ export default function LogTime() {
 
     function initDatas(res = data) {
         const { fast, sleep } = res
+
         var list: any = []
         if (isSingle) {
             var timeline: any;
             if (isFast) {
                 timeline = isStart ? fast.timeline[0] : fast.timeline[1]
+                Taro.setNavigationBarTitle({
+                    title: isStart ? fast.timeline[0].title : fast.timeline[1].title
+                });
             }
             else {
                 timeline = isStart ? sleep.timeline[0] : sleep.timeline[1]
+                Taro.setNavigationBarTitle({
+                    title: isStart ? sleep.timeline[0].title : sleep.timeline[1].title
+                });
             }
             list.push({
                 event_id: timeline.event_id,
@@ -170,9 +168,15 @@ export default function LogTime() {
                 var timeline: any;
                 if (i == 0 || i == 3) {
                     timeline = i == 0 ? fast.timeline[0] : fast.timeline[1]
+                    Taro.setNavigationBarTitle({
+                        title: i == 0 ? fast.timeline[0].title : fast.timeline[1].title
+                    });
                 }
                 else {
                     timeline = i == 1 ? sleep.timeline[0] : sleep.timeline[1]
+                    Taro.setNavigationBarTitle({
+                        title: i == 1 ? sleep.timeline[0].title : sleep.timeline[1].title
+                    });
                 }
                 list.push({
                     event_id: timeline.event_id,
@@ -512,7 +516,6 @@ export default function LogTime() {
 
     function logItem(index: number, iFast: boolean, iStart: boolean, showLine: boolean) {
         const { fast, sleep } = data
-        debugger
         var schedule_time = ''
         var title = ''
 
@@ -583,12 +586,17 @@ export default function LogTime() {
         }
         return <ChooseDateTime
             title={isSingle ? null : <StatusIndicator
-                type={StatusType.normal}
-                color={iFast ? MainColorType.fast : MainColorType.sleep}
+                type={showError ? StatusType.img : StatusType.normal}
+                color={showError ? MainColorType.error : iFast ? MainColorType.fast : MainColorType.sleep}
+                fontColor="#000"
                 fontSize={rpxToPx(34)}
                 text={title}
                 defaultSpace
-            />}
+            >
+                {
+                    showError && <Image src={require('@assets/_health/tip_error.png')} style={{ width: rpxToPx(26), height: rpxToPx(26) }} />
+                }
+            </StatusIndicator>}
             disable={array[index].disable}
             showError={showError}
             showLine={showLine}

src/_health/pages/timeline_detail.tsx

@@ -90,7 +90,7 @@ export default function TimelineDetail() {
         }
     }, [desc, imgUrl])
 
-    global.refreshMoment = ()=>{
+    global.refreshMoment = () => {
         getDatas()
     }
 
@@ -305,6 +305,7 @@ export default function TimelineDetail() {
                 {
                     (detail.scenario != 'MEAL' && detail.scenario != 'ACTIVITY') &&
                     <TimeTitleDesc
+                        timeObj={detail.time}
                         time={dayjs(detail.time.timestamp).format('HH:mm')}
                         title={detail.title}
                     />
@@ -312,6 +313,7 @@ export default function TimelineDetail() {
                 {
                     detail.scenario == 'ACTIVITY' && !list &&
                     <TimeTitleDesc
+                        timeObj={detail.time}
                         time={dayjs(detail.time.timestamp).format('HH:mm')}
                         title={detail.title}
                     />
@@ -320,6 +322,7 @@ export default function TimelineDetail() {
                     list && list.map((item, index) => {
                         return <View key={index} style={{ flexDirection: 'column', display: 'flex' }}>
                             <TimeTitleDesc
+                                timeObj={detail.time}
                                 time={dayjs(item.time.timestamp).format('HH:mm')}
                                 title={item.title}
                                 desc={item.description}

src/context/locales/en.js

@@ -878,6 +878,7 @@ export default {
         mark_done:'Mark Done',
         i_know: 'Got it',
 
+        fasting:'Fasting',
         fast: 'Fast',
         eat: 'Eat',
         sleep: 'Sleep',
@@ -931,12 +932,20 @@ export default {
 
         more_actions:'More Actions',
 
-        fast_befor_bed:'Fasting before Bedtime',
+        misaligned:'Misaligned',
+        fast_missing:'Fasting Backlog',
+        fast_before_bed:'Fasting before Bedtime',
         fast_while_sleep:'Fasting while Sleeping',
         fast_after_sleep:'Fasting after Waking Up',
         my_fast_journal:'My Fasting Journey',
         my_fast_duration:'Total {{time}}',
 
+        ready_for_logging:'Ready for Logging',
+        logging_progress:'Logging in Progress',
+        stage1:'Stage 1',
+        stage2:'Stage 2',
+        stage3:'Stage 3',
+
         ok:'OK',
 
         logging:'logging',

src/context/locales/zh.js

@@ -877,6 +877,7 @@ export default {
         mark_done: '标记完成',
         i_know: '我知道了',
 
+        fasting:'断食',
         fast: '断食',
         eat: '进食',
         sleep: '睡眠',
@@ -931,12 +932,20 @@ export default {
 
         more_actions: '更多操作',
 
-        fast_befor_bed:'睡前断食',
+        misaligned:'错位',
+        fast_missing:'断食待补记',
+        fast_before_bed:'睡前断食',
         fast_while_sleep:'睡眠期间断食',
         fast_after_sleep:'起床后断食',
         my_fast_journal:'我的断食旅程',
         my_fast_duration:'全长 {{time}}',
 
+        ready_for_logging:'待记录',
+        logging_progress:'记录中',
+        stage1:'阶段一',
+        stage2:'阶段二',
+        stage3:'阶段三',
+
         ok:'我知道了',
 
         logging:'记录中',

src/features/health/HistoryItem.tsx

@@ -27,7 +27,8 @@ export default function HistoryItem(props: {
     refresh?: Function,
     mode: string,
     fast_type?: string,
-    hideLine?: boolean
+    hideLine?: boolean,
+    type?: string
 }) {
     const health = useSelector((state: any) => state.health);
     let showActionSheetWithOptions;
@@ -85,7 +86,7 @@ export default function HistoryItem(props: {
             startArc: startArc(props.data.window_range.start_timestamp),
             durationArc: durationArc(props.data.window_range.start_timestamp, props.data.window_range.end_timestamp)
         }
-        const canvasId = props.mode == 'FAST,SLEEP' ? 'history_fast_sleep' + props.index : 'history_' + props.index
+        const canvasId = (props.mode == 'FAST,SLEEP' ? 'history_fast_sleep' + props.index : 'history_' + props.index) + props.type
         return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={canvasId} />
     }
 
@@ -110,7 +111,7 @@ export default function HistoryItem(props: {
         }
 
 
-        const canvasId = 'history2_props_mode' + props.index
+        const canvasId = 'history2_props_mode' + props.index + props.type
         return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={canvasId} />
     }
 
@@ -244,6 +245,7 @@ export default function HistoryItem(props: {
                 {
                     props.data.events.map((item, index) => {
                         return <TimeTitleDesc
+                            timeObj={item.time}
                             time={item.time && dayjs(item.time.timestamp).format('HH:mm')}
                             dayTag={dayTag(index)}
                             title={getTitle(item)}

src/features/health/MainConsole.tsx

@@ -41,7 +41,6 @@ if (process.env.TARO_ENV == 'rn') {
 export default function MainConsole(props: { type: WindowType }) {
     const health = useSelector((state: any) => state.health);
     const user = useSelector((state: any) => state.user);
-    const [showPicker, setShowPicker] = useState(false)
     const [durationPicker, setDurationPicker] = useState(false)
     const [btnDisable, setBtnDisable] = useState(false)
     const [selItem, setSelItem] = useState<any>(null)
@@ -77,7 +76,6 @@ export default function MainConsole(props: { type: WindowType }) {
         }
         console.log(item)
         setSelItem(item)
-        // setShowPicker(true)
     }
 
 
@@ -178,7 +176,7 @@ export default function MainConsole(props: { type: WindowType }) {
         // if (item.action == 'END' && !scenario.real) {
         //     themeColor = MainColorType.g01
         // }
-        if (item.target.timestamp>=new Date().getTime()){
+        if (item.target.timestamp >= new Date().getTime()) {
             themeColor = MainColorType.g02
         }
         if (health.mode == 'DAY' || health.mode == 'NIGHT') {
@@ -203,7 +201,7 @@ export default function MainConsole(props: { type: WindowType }) {
             // }
             return <NewButton
                 color={themeColor}
-                type={item.target.timestamp>=new Date().getTime()?NewButtonType.alpha2:NewButtonType.alpha}
+                type={item.target.timestamp >= new Date().getTime() ? NewButtonType.alpha2 : NewButtonType.alpha}
                 title={operateTitle(item)}
                 width={rpxToPx(128)}
                 height={rpxToPx(72)}
@@ -283,7 +281,8 @@ export default function MainConsole(props: { type: WindowType }) {
             if (time > timeline.target.timestamp) {
                 return <Image style={{ width: rpxToPx(24), height: rpxToPx(24) }} src={require('@assets/_health/checked.png')} />
             }
-            return <View style={{width:rpxToPx(26),height:rpxToPx(26),borderRadius:rpxToPx(13),backgroundColor:'#fff'}}/>
+            return <IconCircle width={rpxToPx(32)} color={MainColorType.g02} />
+            // return <View style={{width:rpxToPx(26),height:rpxToPx(26),borderRadius:rpxToPx(13),backgroundColor:'#fff'}}/>
         }
         // if (timeline.target.timestamp < new Date().getTime()) {
         //     return <IconMiss color="#fff" width={rpxToPx(24)} />
@@ -291,21 +290,39 @@ export default function MainConsole(props: { type: WindowType }) {
         if (timeline.real) {
             return <Image style={{ width: rpxToPx(24), height: rpxToPx(24) }} src={require('@assets/_health/checked.png')} />
         }
-        return <View style={{width:rpxToPx(26),height:rpxToPx(26),borderRadius:rpxToPx(13),backgroundColor:'#fff'}}/>
+        return <View style={{ width: rpxToPx(26), height: rpxToPx(26), borderRadius: rpxToPx(13), backgroundColor: '#fff' }} />
         // return timeline.reminder ? <IconNotification color="#fff" width={rpxToPx(24)} /> : <IconNotificationOff color="#fff" width={rpxToPx(24)} />
     }
 
     function timelineItem(item: any, index: number, count: number) {
+        var strColor = ''
+        if (item.real) {
+            strColor = getThemeColor(health.mode)
+        }
+        else if (health.mode == 'DAY' || health.mode == 'NIGHT') {
+            const time = new Date().getTime()
+            const scenario = getScenario(health.windows, health.mode)
+            const timeline = scenario.timeline[index]
+            if (time > timeline.target.timestamp) {
+                strColor = getThemeColor(health.mode)
+            }
+            else {
+                strColor = 'transparent'
+            }
+        }
+        else {
+            strColor = 'transparent'
+        }
         function statusView() {
             return <StatusIndicator type={StatusType.console}
-                color={item.real?getThemeColor(health.mode):'transparent' }
-                fontColor={item.real?getThemeColor(health.mode):MainColorType.g01 }
-                bold={item.real?true:false}
+                color={strColor}
+                fontColor={item.real ? getThemeColor(health.mode) : MainColorType.g01}
+                bold={item.real ? true : false}
                 // color={new Date().getTime()<item.target.timestamp?MainColorType.g02:getThemeColor(health.mode)}
                 text={itemTitle(item)}
                 fontSize={rpxToPx(24)}
             >{
-                    item.real?processIcon(index):<IconCircle width={rpxToPx(32)} color={MainColorType.g02}/>
+                    (item.real || (health.mode == 'DAY' || health.mode == 'NIGHT')) ? processIcon(index) : <IconCircle width={rpxToPx(32)} color={MainColorType.g02} />
                 }</StatusIndicator>
         }
         return <ConsoleCell
@@ -320,93 +337,6 @@ export default function MainConsole(props: { type: WindowType }) {
         />
     }
 
-    function timeContent() {
-        return <Modal
-            testInfo={null}
-            dismiss={() => {
-                setShowPicker(false)
-            }}
-            confirm={() => { }}>
-            {
-                pickerContent()
-            }
-        </Modal>
-    }
-
-    function pickerContent() {
-        const timestamp = selItem.target.timestamp
-        const strTime = dayjs(timestamp).format('HH:mm')
-
-        var title, color;
-        switch (selItem.scenario) {
-            case 'FAST':
-                title = selItem.event == 'FAST_END' ? '结束断食' : '开始断食'
-                color = MainColorType.fast
-                break;
-            case 'SLEEP':
-                title = selItem.event == 'SLEEP_WAKE_UP' ? '结束睡眠' : '开始睡眠'
-                color = MainColorType.sleep
-        }
-
-        return <TimePicker time={strTime}
-            color={color}
-            title={title}
-            confirm={(e) => {
-                confirmPickerTime(e)
-            }}
-            cancel={() => {
-                setShowPicker(false)
-            }} />
-    }
-
-    function confirmPickerTime(strTime) {
-        if (selItem.event == 'FAST_END') {
-            const obj = health.windows.fast_eat.fast.timeline[0]
-            if (obj.action == 'POST_MOMENT' || obj.action == 'NA') {
-                const format = dayjs(obj.target.timestamp).format(`YYYY-MM-DDT${strTime}:ss`)
-                var t = new Date(format).getTime()
-                if (t <= obj.target.timestamp) {
-                    t += 24 * 3600 * 1000
-                }
-                updateTarget(t, obj.event_id).then(res => {
-                    global.refreshWindow()
-                    global.refreshHistory()
-                    setShowPicker(false)
-                })
-                return;
-            }
-        }
-        else if (selItem.event == 'SLEEP_WAKE_UP') {
-            const obj = health.windows.sleep_active.sleep.timeline[0]
-            if (obj.action == 'POST_MOMENT' || obj.action == 'NA') {
-                const format = dayjs(obj.target.timestamp).format(`YYYY-MM-DDT${strTime}:ss`)
-                var t = new Date(format).getTime()
-                if (t <= obj.target.timestamp) {
-                    t += 24 * 3600 * 1000
-                }
-                updateTarget(t, obj.event_id).then(res => {
-                    global.refreshWindow()
-                    global.refreshHistory()
-                    setShowPicker(false)
-                })
-                return;
-            }
-        }
-
-
-
-        updateSchedule({
-            time: strTime,
-            event: selItem.event,
-            title: selItem.title,
-            specific_time: true
-        }, selItem.schedule_id).then(res => {
-            global.refreshWindow()
-            global.refreshHistory()
-            setShowPicker(false)
-        })
-    }
-
     function changeToIF() {
         updateFast({ fast_type: 'IF' }).then(res => {
             global.refreshWindow()
@@ -480,12 +410,12 @@ export default function MainConsole(props: { type: WindowType }) {
         }
 
         var strTitle = ''
-        if (health.mode == 'DAY' || health.mode == 'NIGHT'){
+        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
             strTitle = getLocation()
         }
-        else if (health.mode == 'EAT' || health.mode == 'ACTIVE'){
-            const scenario = getScenario(health.windows,health.mode)
-            if (scenario.archive_timestamp){
+        else if (health.mode == 'EAT' || health.mode == 'ACTIVE') {
+            const scenario = getScenario(health.windows, health.mode)
+            if (scenario.archive_timestamp) {
                 /*"Today's logs will be archived at 23:59."
 "Today's logs will be archived at 03:10 tomorrow."
 
@@ -493,7 +423,7 @@ export default function MainConsole(props: { type: WindowType }) {
 "今日记录将于明天 23:59 归档"*/
                 var today = new Date().getDate()
                 var date = new Date(scenario.archive_timestamp).getDate()
-                strTitle = `今日记录将于${today==date?'':'明天'} ${dayjs(scenario.archive_timestamp).format('HH:mm')} 归档`
+                strTitle = `今日记录将于${today == date ? '' : '明天'} ${dayjs(scenario.archive_timestamp).format('HH:mm')} 归档`
             }
             else {
                 strTitle = t('health.more_actions')
@@ -824,19 +754,19 @@ export default function MainConsole(props: { type: WindowType }) {
         var str = ''
         switch (status) {
             case 'OG1':
-                str = 'Fast before Bedtime'
+                str = t('health.fast_before_bed')
                 break;
             case 'OG2_NO1':
-                str = 'Fast before Bedtime'
+                str = t('health.fast_missing')
                 break;
             case 'OG2':
-                str = 'Fast while Sleeping'
+                str = t('health.fast_while_sleep')
                 break;
             case 'OG2_MISALIGNED':
-                str = 'Misaligned/错位'
+                str = t('health.misaligned')
                 break;
             case 'OG3':
-                str = 'Fast after Wake Up'
+                str = t('health.fast_after_sleep')
                 break
         }
         return <View className="h26" style={{ color: MainColorType.g01 }}>{str}</View>
@@ -882,7 +812,7 @@ export default function MainConsole(props: { type: WindowType }) {
                 style={{
                     color: getWindowStatus(health.windows, health.mode) == WindowStatusType.upcoming ? MainColorType.g02 : MainColorType.g01,
                     marginBottom: rpxToPx(30)
-                }}>{getDuration(health.windows, health.mode)}{getScenario(health.windows,health.mode).status=='OG'?' ('+t('health.logging')+')':''}</Text>
+                }}>{getDuration(health.windows, health.mode)}{getScenario(health.windows, health.mode).status == 'OG' ? ' (' + t('health.logging') + ')' : ''}</Text>
             <View className="border_footer_line" />
         </View>
         <View style={{ backgroundColor: '#fff', width: rpxToPx(750) }}>
@@ -982,7 +912,7 @@ export default function MainConsole(props: { type: WindowType }) {
                             fastWithSleepStatus()
                         }
                         {
-                            health.fast_with_sleep.status == 'OG2_MISALIGNED' && <View style={{
+                            (health.fast_with_sleep.status == 'OG2_MISALIGNED' || health.fast_with_sleep.status == 'OG2_NO1') && <View style={{
                                 backgroundColor: MainColorType.error,
                                 width: rpxToPx(12),
                                 height: rpxToPx(12),
@@ -1010,9 +940,6 @@ export default function MainConsole(props: { type: WindowType }) {
             />
         }
         <View className="circle" />
-        {
-            showPicker && timeContent()
-        }
         {
             durationPicker && <DurationPicker
                 done={(time) => {

src/pages/account/Journal.tsx

@@ -166,6 +166,7 @@ export default function Journal() {
                             key={index2 * 1000}
                             className="line1"
                             style={{ width: array.length > 0 ? rpxToPx(350) : rpxToPx(512) }}
+                            timeObj={item2.time}
                             time={dayjs(item2.time.timestamp).format('HH:mm')}
                             title={getTitle(item2)}
                             desc={item2.moments && item2.moments.length > 0 ? item2.moments[0].description : ''}

src/pages/account/JournalDetail.tsx

@@ -77,6 +77,7 @@ export default function JournalDetail() {
             {
                 (detail.scenario != 'MEAL' && detail.scenario != 'ACTIVITY') && <View style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
                     <TimeTitleDesc
+                        timeObj={detail.time}
                         time={dayjs(detail.time.timestamp).format('HH:mm')}
                         title={detail.title}
                     // desc={item.description}
@@ -86,6 +87,7 @@ export default function JournalDetail() {
             {
                 detail.scenario == 'ACTIVITY' && !list && <View style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
                     <TimeTitleDesc
+                        timeObj={detail.time}
                         time={dayjs(detail.time.timestamp).format('HH:mm')}
                         title={detail.title}
                     // desc={item.description}
@@ -100,6 +102,7 @@ export default function JournalDetail() {
                 list && list.map((item, index) => {
                     return <View key={index} style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
                         <TimeTitleDesc
+                            timeObj={detail.time}
                             time={dayjs(detail.time.timestamp).format('HH:mm')}
                             title={detail.title}
                             desc={item.description}
@@ -164,8 +167,8 @@ export default function JournalDetail() {
                     }
                 </View>
 
-                <View className="img_container" style={{marginTop:-rpxToPx(24)}}>
-                    <CoverList 
+                <View className="img_container" style={{ marginTop: -rpxToPx(24) }}>
+                    <CoverList
                         imgs={imgs}
                         count={imgs.length}
                     />

src/pages/clock/ClockNew.tsx

@@ -261,7 +261,7 @@ export default function ClockNew() {
                     setShowDate(e.show)
                     setDate(e.date)
                 }} />
-                <View style={{ height: 200 }} />
+                <View style={{ height: 150 }} />
                 {
                     (health.mode == 'DAY' || health.mode == 'NIGHT') && <View style={{ height: 150, flexShrink: 0 }} />
                 }

src/utils/time_format.ts

@@ -770,20 +770,20 @@ export class TimeFormatter {
 
     if (dt.isSame(today, 'day')) {
       if (showToday) {
-        if (global.languange == 'en') return 'Today ' + strTime;
+        if (global.language == 'en') return 'Today ' + strTime;
         return '今天 ' + strTime
       }
       return strTime;
     } else if (dt.isSame(yesterday, 'day')) {
-      if (global.languange == 'en') return 'Yesterday ' + strTime;
+      if (global.language == 'en') return 'Yesterday ' + strTime;
       return '昨天 ' + strTime;
 
     } else if (dt.isSame(tomorrow, 'day')) {
-      if (global.languange == 'cn') return 'Tomorrow ' + strTime;
+      if (global.language == 'en') return 'Tomorrow ' + strTime;
       return '明天 ' + strTime;
 
     } else {
-      if (global.languange == 'cn') return dt.format('MMM DD ') + strTime;
+      if (global.language == 'en') return dt.format('MMM DD ') + strTime;
       return dt.format('MMMDD日 ') + strTime;
 
     }