update

src/app.scss

@@ -102,4 +102,24 @@ wx-scroll-view {
     width: 0;
     height: 0;
     color: transparent;
+}
+
+.box_title{
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 48px;
+    margin-bottom: 12px;
+    // width: 100%;
+    color: #fff;
+    // background-color: orange;
+}
+
+.box_subtitle{
+    font-size: 32px;
+    line-height: 32px;
+    font-weight: 400px;
+    margin-bottom: 20px;
+    opacity: 0.4;
+    color: #fff;
+    // background-color: pink;
 }

src/components/basic/CheckBox.scss

@@ -1,5 +1,5 @@
 .checkbox {
-    border-color: #fff;
+    // border-color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;

src/components/basic/CheckBox.tsx

@@ -5,6 +5,7 @@ import './CheckBox.scss'
 
 export default function Component(props: {
     type: CheckBoxType,
+    color?: string,
     width?: number,
     borderWidth?: number,
     opacity?: number,
@@ -15,6 +16,19 @@ export default function Component(props: {
     var innerWidth = outerWidth * 3 / 4
     var alpha = props.opacity ? props.opacity : 1
 
+    var bgColor = 'transparent'
+    var borderColor = '#fff'
+    if (props.type != CheckBoxType.empty) {
+        if (!props.color) {
+            bgColor = 'rgba(255,255,255,0.4)'
+            borderColor = '#fff'
+        }
+        else {
+            bgColor = props.color + '66'
+            borderColor = props.color
+        }
+    }
+
 
     return <View className="checkbox" style={{
         opacity: alpha,
@@ -23,7 +37,8 @@ export default function Component(props: {
         height: outerWidth,
         borderRadius: outerWidth / 2.0,
         borderStyle: 'solid',
-        backgroundColor: props.type == CheckBoxType.empty ? 'transparent' : 'rgba(255,255,255,0.4)'
+        borderColor: borderColor,
+        backgroundColor: bgColor
     }}>
         {
             props.type == CheckBoxType.cross &&

src/components/input/LimitPickers.tsx

@@ -154,11 +154,13 @@ const Component = forwardRef((props: {
         return num < 10 ? `0${num}` : `${num}`;
     }
 
-    function cancel() {
+    function cancel(e) {
+        e.stopPropagation();
         props.onCancel()
     }
 
-    function confirm() {
+    function confirm(e) {
+        e.stopPropagation();
         if (isDisableConfirm){
             return;
         }

src/components/input/PickerViews.tsx

@@ -32,7 +32,8 @@ const Component = forwardRef((props: {
         return hexValue;
     }
 
-    function confirm() {
+    function confirm(e) {
+        e.stopPropagation();
         // return v;
         props.onChange(v)
     }
@@ -64,7 +65,7 @@ const Component = forwardRef((props: {
 
         </PickerView >
         <View className='modal_operate'>
-            <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={()=>{props.onCancel!()}}>
+            <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={(e)=>{e.stopPropagation();props.onCancel!()}}>
                 <Text className='modal_cancel_text' style={{ color: color }}>取消</Text>
             </View>
             <View className='btn_space' />

src/components/input/SlidngScale.scss

@@ -53,7 +53,7 @@
 .scrollPadding {
     width: 375px;
     height: 30px;
-    background-color: white;
+    background-color: transparent;
     flex-shrink: 0;
 }
 

src/components/input/Stepper.scss

@@ -13,7 +13,7 @@
     // padding-right: 20px;
     // padding-top: 24px;
     box-sizing: border-box;
-    box-shadow: 0px 8px 20px 0px $blackColor;
+    // box-shadow: 0px 8px 20px 0px red//$blackColor;
 }
 
 .stepper_icon{

src/components/layout/Box.scss

@@ -3,7 +3,7 @@
 .box-container {
     background-color: $boxColor;
     // background-color: #fff;
-    border-radius: 48px;
+    border-radius: $boxBorderRadius;
     padding: 40px;
     margin-left: 46px;
     margin-right: 46px;

src/components/layout/Box.tsx

@@ -15,7 +15,6 @@ export default function Component(props: {
 }) {
 
     function onClick(e) {
-        console.log(e)
         if (props.onClick) {
             props.onClick()
             return

src/components/layout/Modal.tsx

@@ -3,6 +3,7 @@ import './Modal.scss'
 import React from 'react';
 import { ModalType } from '@/utils/types';
 import Box from './Box';
+import Taro from '@tarojs/taro';
 
 export default function Modal(props: {
     children: React.ReactNode,
@@ -16,6 +17,15 @@ export default function Modal(props: {
     //阻止中间内容点击事件穿透
     function click(e) {
         e.stopPropagation();
+        Taro.vibrateShort({
+            type:'medium'
+        })
+    }
+
+    function onClick(){
+        // Taro.vibrateShort({
+        //     type:'medium'
+        // })
     }
 
     switch (props.modalType) {
@@ -31,14 +41,16 @@ export default function Modal(props: {
                 </View>
             </View>
     }
-    return <View className='modal' catchMove>
+
+    
+    return <View className='modal' catchMove >
 
         <View style={{ flex: 1,width:375,flexShrink:0 }} onClick={(e) => {e.stopPropagation();props.dismiss()}}>
             {
                 props.testInfo ? props.testInfo : null
             }
         </View>
-        <View className='modal_bottom_content'>
+        <View className='modal_bottom_content'  onClick={onClick}>
             {/* <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text> */}
             {
                 props.children

src/components/navigation/Segment.scss

@@ -1,27 +1,37 @@
 
 .segment{
     background-color: #000;
-    height: 84px;
-    border-radius: 16px;
+    height: 92px;
+    border-radius: 46px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     padding: 4px;
     box-sizing: border-box;
+    margin-top: 20px;
+    position: relative;
 
 }
 
 .segment_item{
-    height: 76px;
-    border-radius: 16px;
-    min-width: 280px;
+    height: 84px;
+    border-radius: 42px;
+    min-width: 304px;
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 0;
+}
+
+.segment_right{
+    position: absolute;
+    right: 4px;
+    top: 4px;
 }
 
 .segment_item_sel{
     background-color: #1c1c1c;
+    z-index: 1;
 }
 
 .segment_text_sel{

src/components/navigation/Segment.tsx

@@ -16,11 +16,11 @@ export default function Component(props: {
     }
 
     return <View className='segment'>
-        <View className={current == 0 ? 'segment_item segment_item_sel' : 'segment_item'} onClick={() => { selItem(0) }}>
+        <View className={current == 0 ? 'segment_item segment_item_sel' : 'segment_item'} onClick={(e) => {e.stopPropagation(); selItem(0) }}>
             <Text className={current == 0 ? 'segment_text_sel' : 'segment_text'}>{props.titles[0]}</Text>
         </View>
         <View style={{ width: 16 }} />
-        <View className={current == 1 ? 'segment_item segment_item_sel' : 'segment_item'} onClick={() => { selItem(1) }}>
+        <View className={current == 1 ? 'segment_item segment_right segment_item_sel' : 'segment_item segment_right'} onClick={(e) => {e.stopPropagation(); selItem(1) }}>
             <Text className={current == 1 ? 'segment_text_sel' : 'segment_text'}>{props.titles[1]}</Text>
         </View>
     </View>

src/components/view/Timeline.config.ts

@@ -0,0 +1,7 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'MySVG':'../basic/svg'
+    },
+    // "navigationBarTitleText": ""
+})

src/components/view/Timeline.scss

@@ -4,6 +4,7 @@
   color: #fff;
   max-height: 70vh;
   overflow-y: scroll;
+  letter-spacing: 0.05em;
   // width: 100%;
   // margin-top: 20px;
   // background-color: aqua;
@@ -38,15 +39,22 @@
   line-height: 32px;
   width: 406px;
   margin-top: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  // background-color: paleturquoise;
   // background-color: orange;
 }
 
 .timeline-date {
-  opacity: 0.2;
+  // opacity: 0.4;
   color: #fff;
-  font-size: 32px;
+  font-size: 28px;
   line-height: 32px;
   margin-left: 6px;
+  // background-color: orange;
+  opacity: 0.3;
   // margin-top: 6px;
 }
 

src/components/view/Timeline.tsx

@@ -1,10 +1,21 @@
-import { View, Image, Text } from '@tarojs/components'
+import { View, Image, Text, Icon } from '@tarojs/components'
 import './Timeline.scss'
 import { CheckBoxType, TimelineType } from '@/utils/types'
 import CheckBox from '../basic/CheckBox'
 
 
 export default function Component(props: { items: any[], title?: string, type?: TimelineType }) {
+    function paddingIcon() {
+        // return <MySVG src='../../assets/svg/check.svg'/>
+        // return <svg  p-id="3547" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
+    }
+    function checkIcon() {
+        //<svg t="1701751531639" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686" width="200" height="200"><path d="M682.928 402.992l11.312 11.328a16 16 0 0 1 0 22.624L484.96 646.24a16 16 0 0 1-22.624 0l-99.008-98.992a16 16 0 0 1 0-22.624l11.312-11.328a16 16 0 0 1 22.624 0l76.384 76.384 186.672-186.688a16 16 0 0 1 22.624 0zM512 800c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z" fill="#000000" p-id="3687"></path></svg>
+    }
+
+    function cancelIcon() {
+        //<svg t="1701751580527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3825" width="200" height="200"><path d="M553.936 504l79.2 79.2a16 16 0 0 1 0 22.624l-11.312 11.312a16 16 0 0 1-22.624 0l-79.2-79.2-79.2 79.2a16 16 0 0 1-22.624 0l-11.312-11.312a16 16 0 0 1 0-22.624l79.2-79.2-79.2-79.2a16 16 0 0 1 0-22.624l11.312-11.312a16 16 0 0 1 22.624 0l79.2 79.2 79.2-79.2a16 16 0 0 1 22.624 0l11.312 11.312a16 16 0 0 1 0 22.624l-79.2 79.2zM512 800c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z" fill="#000000" p-id="3826"></path></svg>
+    }
     return <View className="timeline">
         {
             props.title && <Text className='timeline_title'>{props.title}</Text>
@@ -14,27 +25,34 @@ export default function Component(props: { items: any[], title?: string, type?:
                 <View className='timelineItem'>
                     <View className='timelineContentView'>
                         {
-                            item.status == 'padding' && <CheckBox type={CheckBoxType.empty} opacity={0.4} />
+                            item.status == 'padding' && <Icon type='circle' size='16' color='#ffffff66' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
                         }
                         {
-                            item.status == 'done' && <CheckBox type={CheckBoxType.check} opacity={0.4} />
+                            item.status == 'done' && <Icon type='success' color={item.color} size='16' />//<CheckBox type={CheckBoxType.check} opacity={0.4} color={item.color}/>
                         }
                         {
-                            item.status == 'un_done' && <CheckBox type={CheckBoxType.cross} opacity={0.4} />
+                            item.status == 'un_done' && <Icon type='cancel' color={item.color} size='16' />//<CheckBox type={CheckBoxType.cross} opacity={0.4} color={item.color}/>
                         }
                         <View className='timelineContentDetail'>
-                            <View className="timeline-time">{props.type == TimelineType.timeSecond ? item.title : item.content}</View>
+                            <View className="timeline-time" style={{ color: item.color ? item.color : '#fff' }}>{item.title}</View>
 
                             <View style={{ flex: 1 }} />
-                            {
+                            {/* {
                                 item.date && <View className="timeline-date">{item.date}</View>
-                            }
+                            } */}
 
                         </View>
                     </View>
-                    <View className="timeline-detail">{props.type == TimelineType.timeSecond ? item.content : item.title}</View>
+                    <View className="timeline-detail">{item.content}
+                        {
+                            item.date && <View className="timeline-date">{item.date}</View>
+                        }
+                    </View>
                     <View className={index !== props.items.length - 1 ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
-                    {index !== props.items.length - 1 && <View className={(props.items[index + 1].status == 'done' && item.status == 'done') ? 'timeline-line' : 'timeline-line'} />}
+                    {index !== props.items.length - 1 &&
+                        <View className={(props.items[index + 1].status == 'done' && item.status == 'done') ? 'timeline-line' : 'timeline-line'}
+                            style={{ background: (props.items[index + 1].status == 'done' && item.status == 'done') ? 'linear-gradient(to top, ' + props.items[index + 1].color + ', ' + item.color + ')' : '#ffffff66' }}
+                        />}
 
                 </View>
             ))

src/context/locales/zh.js

@@ -21,15 +21,15 @@ export default {
         },
         choose_scenario: {
             title: '选择生物钟',
-            sub_title: '场景时钟将在首页展示',
+            sub_title: '断食和睡眠构成生物钟',
             btn_next: '下一步',
             btn_more: '了解更多',
         },
         set_schedule: {
             fast_title: '断食日程',
             sleep_title: '睡眠日程',
-            fast_subtitle: '设定你的时间和时长目标',
-            sleep_subtitle: '设定你的时间和时长目标',
+            fast_subtitle: '设定时间和时长目标',
+            sleep_subtitle: '设定时间和时长目标',
         },
         choose_language: {
             title: '',
@@ -121,20 +121,25 @@ export default {
             schedule: {
                 section_title: '今天',
                 follow_tip: '开启日程提醒',
-                timeout_tip: '完成当前记录，恢复今天日程。',
+                timeout_tip: '完成记录，恢复日程。',
                 action_sheet_adjust_schedule: '调整日程', //点击弹出action_sheet的item
                 duration_goals_by_stage: '查看断食阶段目标',  //底部文字按钮 waite for start
-                current_stage: '查看当前断食阶段'              //底部文字按钮 onging
+                current_stage: '查看当前断食阶段',              //底部文字按钮 onging
+                timeline:'日程',            //一级页面待开始进行中，segment index=0的值
+                stage:'阶段',
+
             },
             record_fast_sleep: {
                 header: {
-                    latest_record: '最近',
+                    latest_record: '最近完成',
                     btn_show_all: '查看更多'
                 },
                 item: {
                     fast: '断食',
                     sleep: '睡眠'
-                }
+                },
+                timeline:'时间线',  //modal弹窗 segment index=0的值
+                stage:'阶段',
             },
 
             action_sheet: {

src/features/trackSomething/components/ActivityHistory.tsx

@@ -1,4 +1,4 @@
-import { View, Text,Image } from "@tarojs/components";
+import { View, Text, Image } from "@tarojs/components";
 import './MetricHistory.scss'
 import RecordItem from "@/features/common/RecordItem";
 import { deleteActivityRecord } from "@/services/trackSomething";
@@ -10,10 +10,12 @@ import Timeline from "@/components/view/Timeline";
 import { TimeFormatter } from "@/utils/time_format";
 import './ActivityHistory.scss'
 import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
+import { useRouter } from "@tarojs/taro";
 
 export default function Component(props: { records: any[] }) {
     const user = useSelector((state: any) => state.user);
     const [list, setList] = useState(props.records)
+    const router = useRouter();
     useEffect(() => {
         setList(props.records)
     }, [props.records])
@@ -68,11 +70,20 @@ export default function Component(props: { records: any[] }) {
                     title: type + item.records[i].items[0].value + '步',
                     content: TimeFormatter.timelineFormatTime(item.records[i].timestamp),
                     date: TimeFormatter.dateDescription(item.records[i].timestamp),
+                    color: item.records[i].type == 'sync' ?'#fff':router.params.themeColor
                 }
             )
         }
+        return <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <Text className="box_title">打卡详情</Text>
+            <Text className="box_subtitle">{TimeFormatter.getMonthAndDayByDate(item.date)}</Text>
+            <View style={{display:'flex',alignItems:'center',position:'relative',width:'100%',flexDirection:'column'}}>
+                <Timeline items={timelineItems} type={TimelineType.timeFirst} />
+            </View>
 
-        return <CenterContentTitleModal title= {TimeFormatter.getMonthAndDayByDate(item.date)}>
+        </View>
+
+        return <CenterContentTitleModal title={TimeFormatter.getMonthAndDayByDate(item.date)}>
             <Timeline items={timelineItems} type={TimelineType.timeFirst} />
         </CenterContentTitleModal>
         // return <View style={{ display: 'flex', width: '100%', flexDirection: 'column', alignItems: 'center' }}>
@@ -100,13 +111,13 @@ export default function Component(props: { records: any[] }) {
         }
         {
             (list as any).map(item => {
-                var showYear = lastYearStr!= TimeFormatter.getYearByDate(item.date) && lastYearStr!='2023年'
+                var showYear = lastYearStr != TimeFormatter.getYearByDate(item.date) && lastYearStr != '2023年'
                 lastYearStr = TimeFormatter.getYearByDate(item.date)
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
                     {
-                        showYear && <Text className="year" style={{backgroundColor:global.isDebug?'red':'transparent'}}>{TimeFormatter.getYearByDate(item.date)}</Text>
+                        showYear && <Text className="year" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{TimeFormatter.getYearByDate(item.date)}</Text>
                     }
-                    <Text className="operate_day" style={{backgroundColor:global.isDebug?'red':'transparent'}}>{TimeFormatter.getMonthAndDayByDate(item.date)}</Text>
+                    <Text className="operate_day" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{TimeFormatter.getMonthAndDayByDate(item.date)}</Text>
 
                     <RecordItem onClick={() => showDetail(item)} delete={() => deleteRecord(item.records[0])}>
                         <View className="operate_item">
@@ -114,11 +125,11 @@ export default function Component(props: { records: any[] }) {
                                 <Text className="status_text">{item.records[0].type == 'total' ? '总计' : item.records[0].type == 'sync' ? '同步' : '打卡'}</Text>
                             </View>
                             <View style={{ width: 12 }} /> */}
-                            <Text className="value" style={{backgroundColor:global.isDebug?'red':'transparent'}}>{item.records[0].items[0].value}</Text>
+                            <Text className="value" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{item.records[0].items[0].value}</Text>
                             <Text className="unit">步</Text>
                             <View style={{ flex: 1 }} />
                             <Text className="time">{formateHourMinutes(item.records[0].timestamp)}</Text>
-                            <Image className="operate_arrow" src={require('@assets/images/arrow3.png')}/>
+                            <Image className="operate_arrow" src={require('@assets/images/arrow3.png')} />
                         </View>
                     </RecordItem>
 

src/features/trackSomething/components/Metric.tsx

@@ -313,6 +313,11 @@ export default function Component(props: any) {
                             desc = TimeFormatter.dateDescription(item.latest_record.timestamp,true)
                             showDetail = true
                         }
+
+                        if (!user.isLogin){
+                            value = '未登录'
+                            desc = '登录后可记录'
+                        }
                         return <MetricItem title={item.name}
                             value={value}
                             unit={unit}

src/features/trackTimeDuration/components/Clock.tsx

@@ -40,7 +40,13 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         var currentDot1 = getDot((checkData as any).current_record, true)
         var targetBigRing1 = getTarget((checkData as any).current_record, true)
-        targetBigRing1.color = global.fastColor ? global.fastColor : ColorType.fast + '33'//'rgba(170,255,0,0.4)'
+        targetBigRing1.color = global.fastColor ? global.fastColor+'66' : ColorType.fast + '66'//'rgba(170,255,0,0.4)'
+        if ((checkData as any).current_record.scenario == 'SLEEP'){
+            targetBigRing1.color = global.sleepColor ? global.sleepColor+'66' : ColorType.sleep + '66'//'rgba(170,255,0,0.4)'
+        }
+
+        // console.log(targetBigRing1.color)
+        
         if (current_record.status == 'ONGOING') {
             var realRing1 = getReal((checkData as any).current_record, true, false)
 
@@ -66,14 +72,14 @@ export default function Component() {
             var realRing = getReal((checkData as any).current_record, false, false)
             var currentDot = getDot((checkData as any).current_record, false)
             var targetRing = getTarget((checkData as any).current_record, false)
-            targetRing.color = global.sleepColor ? global.sleepColor : ColorType.sleep + '33'//'rgba(0, 255, 255, 0.4)'
+            targetRing.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'rgba(0, 255, 255, 0.4)'
             if (current_record.status == 'ONGOING2') {
                 return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
             }
 
             //ongoing3时，睡眠点整理亮度降低
             if (current_record.status == 'ONGOING3') {
-                currentDot.color = global.sleepColor ? global.sleepColor : ColorType.sleep + '66'
+                currentDot.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'
             }
             return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock8' />
         }
@@ -87,7 +93,7 @@ export default function Component() {
             }
             <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                 {
-                    <Text className="clock_text fast_sleep_text" style={{ fontSize: 32 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
+                    <Text className="clock_text fast_sleep_text" style={{ fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                 }
             </View>
         </View>
@@ -105,11 +111,11 @@ export default function Component() {
                 <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                     {
                         (checkData as any).current_record.status == 'WAIT_FOR_START' && time.scenario == 'FAST_SLEEP' &&
-                        <Text className="clock_text fast_sleep_text" style={{ fontSize: 32 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
+                        <Text className="clock_text fast_sleep_text" style={{ fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                     }
                     {
                         (checkData as any).current_record.status == 'WAIT_FOR_START' && time.scenario != 'FAST_SLEEP' &&
-                        <Text className="clock_text" style={{ color: global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
+                        <Text className="clock_text" style={{ color: time.scenario == 'FAST' ? ColorType.fast : ColorType.sleep, fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                     }
                     {
                         (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep, fontSize: 32 }}>

src/features/trackTimeDuration/components/Console.tsx

@@ -29,6 +29,7 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     const [fastPickerValue, setFastPickerValue] = useState([0, 0])
     const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
+    const [isLoaded,setIsLoaded] = useState(false)
     const limitPickerRef = useRef(null)
     const durationPickerRef = useRef(null)
     const { t } = useTranslation()
@@ -50,7 +51,11 @@ export default function Component(props: { isNextStep?: boolean }) {
             setSleepDuration(sleepCount)
             setSleepPickerValue(durationIndex(time.sleep.target_start_time, time.sleep.target_end_time, common))
         }
+        checkFastStatus()
+        
+    }
 
+    function checkFastStatus(){
         if (time.scenario == 'FAST') {
             setIsFast(true)
         }
@@ -65,6 +70,7 @@ export default function Component(props: { isNextStep?: boolean }) {
                 setIsFast(false)
             }
         }
+        setIsLoaded(true)
     }
 
 
@@ -541,7 +547,7 @@ export default function Component(props: { isNextStep?: boolean }) {
         <Box >
             <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                 {
-                    ongoing()
+                    isLoaded&&ongoing()
                 }
                 {
                     (time.status == 'ONGOING1' || time.status == 'WAIT_FOR_START') && <Stepper child={

src/features/trackTimeDuration/components/Dial.tsx

@@ -143,26 +143,26 @@ const Component = (props) => {
         ctx.fill();
 
         //绘制起点图标
-        // ctx.save()
-        // ctx.beginPath()
-        // ctx.translate(pointX, pointY)
-        // ctx.rotate(startAngle)
-        // ctx.translate(-pointX, -pointY)
+        ctx.save()
+        ctx.beginPath()
+        ctx.translate(pointX, pointY)
+        ctx.rotate(startAngle)
+        ctx.translate(-pointX, -pointY)
 
         if (global.canvas_start_icon) {
-            ctx.drawImage(global.canvas_start_icon, pointX - 20, pointY - 20, 40, 40)
+            ctx.drawImage(global.canvas_start_icon, pointX - 15, pointY - 15, 30, 30)
         }
         else {
             let tempImage = global.canvas.createImage()
-            tempImage.src = require('@/assets/images/wakeup-white.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
+            tempImage.src = require('@/assets/images/dial_start.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
             tempImage.onload = () => {
                 global.canvas_start_icon = tempImage
                 drawCanvas(ctx)
             }
         }
 
-        // ctx.restore()
-        // ctx.closePath()
+        ctx.restore()
+        ctx.closePath()
 
         // 绘制终点圆点
         const pointX2 = centerX + Math.cos(endAngle) * radius;

src/features/trackTimeDuration/components/RecordFastSleep.scss

@@ -8,7 +8,7 @@
     flex-direction: row;
     align-items: center;
     background-color: $boxColor;
-    border-radius: 36px;
+    border-radius: $boxBorderRadius;
     padding-left: 40px;
     padding-right: 40px;
     margin-bottom: 16px;

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -17,6 +17,7 @@ import Stage from "./Stage";
 import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
 import { useTranslation } from "react-i18next";
 import { ColorType } from "@/context/themes/color";
+import TimelineStage from "./TimelineStage";
 
 export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function }) {
     const [showDetailModal, setShowDetailModal] = useState(false)
@@ -54,13 +55,14 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
         //     </CenterContentTitleModal>
         // }
         return <View style={{ display: 'flex', flexDirection: 'column' }}>
-
+{/* 
             <Text className="modalTitle1" style={{
                 marginBottom: 10,
                 color: '#fff', fontWeight: 'bold',
-            }}>{TimeFormatter.getDateAndWeek(props.data.last_real_check_time)}</Text>
+            }}>{TimeFormatter.getDateAndWeek(props.data.first_real_check_time)}</Text> */}
+            <TimelineStage data={props.data} title="记录详情" subTitle={TimeFormatter.getDateAndWeek(props.data.first_real_check_time)}/>
 
-            {
+            {/* {
                 props.data.scenario == 'FAST_SLEEP' &&
                 <View style={{ marginBottom: 0 }}>
                     <Segment titles={['断食睡眠时间', '断食阶段']} changed={(e) => {
@@ -89,7 +91,7 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
                     }
 
                 </View>
-            </View>
+            </View> */}
         </View>
     }
 
@@ -262,7 +264,7 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
             </View>
             {/* <Image className="arrow1" src={require('@/assets/images/arrow.png')} /> */}
             <View className="record_arrow_bg" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
-                <Text className='recordTime'>{TimeFormatter.dateDescription(props.data.last_real_check_time, true)}</Text>
+                <Text className='recordTime'>{TimeFormatter.dateDescription(props.data.first_real_check_time, true)}</Text>
                 <Image className="arrow1" src={require('@/assets/images/arrow3.png')} />
             </View>
 

src/features/trackTimeDuration/components/Schedule.scss

@@ -50,4 +50,33 @@
     height: 84px;
     align-items: center;
     color: $fastColor;
+}
+
+.schedule_box{
+    margin-left: 46px;
+    margin-right: 46px;
+    margin-bottom: 24px;
+    background-color: $boxColor;
+    border-radius: $boxBorderRadius;
+    display: flex;
+    flex-direction: column;
+    padding-top: 40px;
+    padding-left: 40px;
+    padding-bottom: 34px;
+}
+
+.schedule_line{
+    margin-bottom: 30px;
+    height: 1px;
+    background-color: #fff;
+    opacity: 0.1;
+}
+
+.schedule_row{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin-right: 40px;
+    align-items: center;
 }

src/features/trackTimeDuration/components/Schedule.tsx

@@ -19,6 +19,7 @@ import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
 import { ColorType } from "@/context/themes/color";
 import { getThemeColor } from "../hooks/Common";
 import TableCell from "@/components/layout/TableCell";
+import TimelineStage from "./TimelineStage";
 
 
 export default function Component(props: { type?: string, data?: any, delSuccess?: Function }) {
@@ -119,6 +120,45 @@ export default function Component(props: { type?: string, data?: any, delSuccess
         </View>
     }
 
+    function tapSchedule(e) {
+        e.stopPropagation();
+
+        if (permission.wxPubFollow && props.data.status == 'WAIT_FOR_START') {
+            Taro.showActionSheet({
+                itemList: ["调整日程"]
+            })
+                .then(res => {
+                    switch (res.tapIndex) {
+                        case 0:
+                            if (props.data.name == 'FAST_SLEEP') {
+                                dispatch(setStep('fast'))
+                            }
+                            else if (props.data.name == 'SLEEP') {
+                                dispatch(setStep('sleep'))
+                            }
+                            else {
+                                dispatch(setStep('fast'))
+                            }
+                            Taro.navigateTo({
+                                url: '/pages/clock/SetSchedule'
+                            })
+                            break;
+                        case 1:
+
+                            break;
+                    }
+                })
+                .catch(err => {
+                    console.log(err.errMsg)
+                })
+        }
+        else {
+            Taro.vibrateShort({
+                type: 'medium'
+            })
+        }
+    }
+
     function detailCenter() {
         if (!permission.wxPubFollow) {
             return <View className="tip_bg2">
@@ -157,9 +197,12 @@ export default function Component(props: { type?: string, data?: any, delSuccess
             </View >
         }
 
-        return <View style={{ marginTop: 10 }}>
+        return <View onClick={tapSchedule}>
+            <TimelineStage data={props.data} isSchedule={true} title={t('feature.track_time_duration.schedule.section_title')}
+                subTitle={TimeFormatter.getDateAndWeek(new Date().getTime(), true)}
+            />
 
-            <TimelineFastSleep data={props.data} />
+            {/* <TimelineFastSleep data={props.data} />
             {
                 props.data.scenario == 'FAST_SLEEP' && <View className="schedule_more" onClick={showStage}>
                     <View style={{ flex: 1 }} />
@@ -176,7 +219,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
                             }</Text>
                     }
                 </View>
-            }
+            } */}
         </View>
     }
 
@@ -196,46 +239,22 @@ export default function Component(props: { type?: string, data?: any, delSuccess
     }
 
     function tapBox(e) {
-        if (permission.wxPubFollow && props.data.status == 'WAIT_FOR_START') {
-            Taro.showActionSheet({
-                itemList: ["调整日程"]
-            })
-                .then(res => {
-                    switch (res.tapIndex) {
-                        case 0:
-                            if (props.data.name == 'FAST_SLEEP') {
-                                dispatch(setStep('fast'))
-                            }
-                            else if (props.data.name == 'SLEEP') {
-                                dispatch(setStep('sleep'))
-                            }
-                            else {
-                                dispatch(setStep('fast'))
-                            }
-                            Taro.navigateTo({
-                                url: '/pages/clock/SetSchedule'
-                            })
-                            break;
-                        case 1:
 
-                            break;
-                    }
-                })
-                .catch(err => {
-                    console.log(err.errMsg)
-                })
-        }
-        else {
-            Taro.vibrateShort({
-                type: 'medium'
-            })
-        }
     }
 
     if (!permission.wxPubFollow) {
-        return <TableCell title={t('feature.track_time_duration.schedule.follow_tip')} showMarginBottom={true}>
-            <Switch isOn={permission.wxPubFollow} onClick={() => followWxPub()} />
-        </TableCell>
+        return <View className="schedule_box">
+            <Text className="box_title">{t('feature.track_time_duration.schedule.section_title')}</Text>
+            <Text className="box_subtitle">{TimeFormatter.getDateAndWeek(new Date().getTime(), true)}</Text>
+            <View className="schedule_line" />
+            <View className="schedule_row">
+                <Text>{t('feature.track_time_duration.schedule.follow_tip')}</Text>
+                <Switch isOn={permission.wxPubFollow} onClick={() => followWxPub()} />
+            </View>
+        </View>
+        // return <TableCell title={t('feature.track_time_duration.schedule.follow_tip')} showMarginBottom={true}>
+        //     <Switch isOn={permission.wxPubFollow} onClick={() => followWxPub()} />
+        // </TableCell>
         // <View className="tip_bg2">
         //     <Text className="tip_text2">{t('feature.track_time_duration.schedule.follow_tip')}</Text>
         // </View>
@@ -268,6 +287,14 @@ export default function Component(props: { type?: string, data?: any, delSuccess
     today.setSeconds(0)
 
     if (nextCheckTimestamp != 0 && today.getTime() > nextCheckTimestamp) {
+        return <View className="schedule_box">
+            <Text className="box_title">{t('feature.track_time_duration.schedule.section_title')}</Text>
+            <Text className="box_subtitle">{TimeFormatter.getDateAndWeek(new Date().getTime(), true)}</Text>
+            <View className="schedule_line" />
+            <View className="schedule_row">
+                <Text>{t('feature.track_time_duration.schedule.timeout_tip')}</Text>
+            </View>
+        </View>
         return <TableCell title={t('feature.track_time_duration.schedule.timeout_tip')} showMarginBottom={true}>
 
         </TableCell>
@@ -275,7 +302,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
     }
 
 
-    return <Box onClick={tapBox}>
+    return <Box>
         {
             detail()
         }

src/features/trackTimeDuration/components/SetSchedule.scss

@@ -1,8 +1,9 @@
+@import '@/utils/common.scss';
 .box{
     margin-left: 32px;
     margin-right: 32px;
     background: #1C1C1C;
-    border-radius: 56px;
+    border-radius: $boxBorderRadius;
     display: flex;
     flex-direction: column;
     // margin-top: 20px;

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -301,8 +301,6 @@ export default function Component() {
       cancel={() => { setIsTimeOpen(false) }} />
   }
 
-  console.log(scenario)
-
   function detail() {
     return <View >
       {/* <Text className="subtitle">{t('page.set_schedule.fast_subtitle')}</Text> */}

src/features/trackTimeDuration/components/Stage.scss

@@ -2,7 +2,7 @@
 .stage {
     display: flex;
     flex-direction: column;
-    margin-top: 16px;
+    // margin-top: 16px;
 }
 
 .stage_item {

src/features/trackTimeDuration/components/Stage.tsx

@@ -1,43 +1,109 @@
-import { View, Text } from "@tarojs/components";
+import { View, Text, Icon } from "@tarojs/components";
 import './Stage.scss'
 import { TimeFormatter } from "@/utils/time_format";
 import { ColorType } from "@/context/themes/color";
 
 export default function Component(props: { data: any }) {
     function getTime(t1: number, t2: number) {
-        return TimeFormatter.calculateTimeDifference(t1, t2)
+        return TimeFormatter.formateTimeDifference(t1, t2)
+    }
+
+    function getDuration(t1: number, t2: number) {
+        return TimeFormatter.calculateTimeDifference(t1, t2, true)
     }
 
     function getStepATime(obj) {
         if (obj.status == 'COMPLETED' && obj.sleep.status == 'NOT_STARTED') {
-            return '未知'
+            return '未完成'
         }
+        
         return obj.status == 'ONGOING1' ?
             getTime(obj.fast.real_start_time, (new Date()).getTime()) :
-            obj.sleep.real_start_time ? getTime(obj.sleep.real_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time) :
-                getTime(obj.sleep.target_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time)
+            obj.sleep.real_start_time ? getDuration(obj.sleep.real_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time) :
+                getDuration(obj.sleep.target_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time)
     }
 
     function getStepBTime(obj) {
-        if (obj.status == 'ONGOING1') return 'Next up'
+        if (obj.status == 'ONGOING1') return '待开始'
         if (obj.status == 'ONGOING2') return getTime(obj.sleep.real_start_time, (new Date()).getTime())
-        if (obj.status == 'WAIT_FOR_START') return getTime(obj.sleep.target_end_time, obj.sleep.target_start_time)
-        if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return '未知'
-        return getTime(obj.sleep.real_end_time, obj.sleep.real_start_time)
+        if (obj.status == 'WAIT_FOR_START') return getDuration(obj.sleep.target_end_time, obj.sleep.target_start_time)
+        if (obj.sleep.status == 'NOT_STARTED') return '未开始'
+        if (obj.sleep.status == 'NOT_COMPLETED') return '未完成'
+        return getDuration(obj.sleep.real_end_time, obj.sleep.real_start_time)
 
     }
 
     function getStepCTime(obj) {
-        if (obj.status == 'ONGOING1') return 'Final stage'
-        if (obj.status == 'ONGOING2') return 'Next up'
+        if (obj.status == 'ONGOING1') return '待开始'
+        if (obj.status == 'ONGOING2') return '待开始'
         if (obj.status == 'ONGOING3') return getTime(obj.sleep.real_end_time, (new Date()).getTime())
-        if (obj.status == 'WAIT_FOR_START') return getTime(obj.fast.target_end_time, obj.sleep.target_end_time)
-        if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return '未知'
-        return getTime(obj.fast.real_end_time, obj.sleep.real_end_time)
+        if (obj.status == 'WAIT_FOR_START') return getDuration(obj.fast.target_end_time, obj.sleep.target_end_time)
+        if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return '未开始'
+        return getDuration(obj.fast.real_end_time, obj.sleep.real_end_time)
     }
 
     return <View className="stage">
-        <View className="stage_item">
+
+        <View className='timelineItem'>
+            <View className='timelineContentView'>
+                {
+                    <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
+                }
+                <View className='timelineContentDetail'>
+                    <View className="timeline-time" >{'  '}</View>
+                </View>
+            </View>
+            <View className="timeline-detail" style={{ color: ColorType.fast,opacity:1 }}>睡前断食
+                <View className="timeline-date" style={{ color: ColorType.fast,opacity:1 }}>{getStepATime(props.data)}</View>
+
+            </View>
+            <View className={true ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
+            {true &&
+                <View className='timeline-line'
+                    style={{ background: '#ffffff66' }}
+                />}
+
+        </View>
+        <View className='timelineItem'>
+            <View className='timelineContentView'>
+                {
+                    <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
+                }
+                <View className='timelineContentDetail'>
+                    <View className="timeline-time" >{'  '}</View>
+                </View>
+            </View>
+            <View className="timeline-detail" style={{ color: ColorType.sleep,opacity:1 }}>睡眠中断食
+                <View className="timeline-date" style={{ color: ColorType.sleep ,opacity:1}}>{getStepBTime(props.data)}</View>
+
+            </View>
+            <View className={true ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
+            {true &&
+                <View className='timeline-line'
+                    style={{ background: '#ffffff66' }}
+                />}
+
+        </View>
+        <View className='timelineItem'>
+            <View className='timelineContentView'>
+                {
+                    <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
+                }
+                <View className='timelineContentDetail'>
+                    <View className="timeline-time" >{'  '}</View>
+                </View>
+            </View>
+            <View className="timeline-detail" style={{ color: ColorType.fast ,opacity:1}}>起床后断食
+                <View className="timeline-date" style={{ color: ColorType.fast ,opacity:1}}>{getStepCTime(props.data)}</View>
+
+            </View>
+            <View className={'timeline_line1 line1_bottom_zero'} />
+            {true &&
+                <View className='timeline-line'
+                    style={{ background: '#ffffff66' }}
+                />}
+        </View>
+        {/* <View className="stage_item">
             <Text className='stage_step'>A</Text>
             <View className="stage_line" style={{ opacity: props.data.status == 'ONGOING1' ? 1 : 0.4 }} />
             <View className="stage_right">
@@ -51,8 +117,8 @@ export default function Component(props: { data: any }) {
                 }}>{getStepATime(props.data)}</Text>
             </View>
 
-        </View>
-        <View className="stage_item">
+        </View> */}
+        {/* <View className="stage_item">
             <Text className='stage_step'>B</Text>
             <View className="stage_line" style={{ opacity: props.data.status == 'ONGOING2' ? 1 : 0.4 }} />
             <View className="stage_right">
@@ -81,7 +147,7 @@ export default function Component(props: { data: any }) {
                 }}>{getStepCTime(props.data)}</Text>
             </View>
 
-        </View>
+        </View> */}
 
     </View>
 }

src/features/trackTimeDuration/components/TimelineFastSleep.tsx

@@ -2,6 +2,7 @@ import Timeline from "@/components/view/Timeline";
 import { TimeFormatter } from "@/utils/time_format";
 import { View } from "@tarojs/components";
 import getStatus from "../hooks/Record";
+import { ColorType } from "@/context/themes/color";
 
 export default function TimelineFastSleep(props: { data: any, title?: string }) {
 
@@ -53,6 +54,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string })
                 title: '开始断食',
                 content: formateTime(props.data.fast, false),
                 date: formateDate(props.data.fast, false),
+                color:global.fastColor?global.fastColor:ColorType.fast
             }
         )
     }
@@ -63,6 +65,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string })
                 title: '开始睡眠',
                 content: formateTime(props.data.sleep, false),
                 date: formateDate(props.data.sleep, false),
+                color:global.sleepColor?global.sleepColor:ColorType.sleep
             }
         )
     }
@@ -73,6 +76,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string })
                 title: '结束睡眠',
                 content: formateTime(props.data.sleep, true),
                 date: formateDate(props.data.sleep, true),
+                color:global.sleepColor?global.sleepColor:ColorType.sleep
             }
         )
     }
@@ -83,6 +87,7 @@ export default function TimelineFastSleep(props: { data: any, title?: string })
                 title: '结束断食',
                 content: formateTime(props.data.fast, true),
                 date: formateDate(props.data.fast, true),
+                color:global.fastColor?global.fastColor:ColorType.fast
             }
         )
     }

src/features/trackTimeDuration/components/TimelineStage.tsx

@@ -0,0 +1,69 @@
+import { View, Text } from '@tarojs/components'
+import './TimelineStage.scss'
+import { useState } from 'react';
+import Segment from '@/components/navigation/Segment';
+import TimelineFastSleep from './TimelineFastSleep';
+import Stage from './Stage';
+import { useTranslation } from 'react-i18next';
+
+
+export default function Component(props: { data: any, title?: string, subTitle?: string,isSchedule?:boolean }) {
+    const [segmentIndex, setSegmentIndex] = useState(0)
+    const {t} = useTranslation()
+    return <View style={{ display: 'flex', flexDirection: 'column', width: '578rpx' }}>
+        <Text className='box_title'>{props.title ? props.title : 'Title'}</Text>
+        <Text className='box_subtitle'>{props.subTitle ? props.subTitle : 'subTitle'}</Text>
+        <View className="segment_detail" style={{
+            display: 'flex', alignItems: 'center',
+            flexDirection: 'column', justifyContent: 'center'
+        }}>
+            <View style={{
+                position: 'relative', width: '100%', display: 'flex', alignItems: 'center',
+                flexDirection: 'column', justifyContent: 'center'
+            }}>
+                {/* <View style={{ backgroundColor: 'pink' }}>
+                    {
+                        segmentIndex == 0 ? <TimelineFastSleep data={props.data} /> : <Stage data={props.data} />
+                    }
+                </View> */}
+
+                <View style={{ position: 'relative' }}>
+                    <View style={{ opacity: segmentIndex == 0 ? 1 : 0 }}>
+                        <TimelineFastSleep data={props.data} />
+                    </View>
+                    {props.data.scenario == 'FAST_SLEEP' &&<View style={{
+                        opacity: segmentIndex == 1 ? 1 : 0,
+                        position: 'absolute', left: 0, top: 0, right: 0, bottom: 0,
+                    }}>
+                        <Stage data={props.data} />
+                    </View>}
+                </View>
+
+
+                {/* <View style={{ opacity: segmentIndex == 0 ? 1 : 0 }}>
+                    <TimelineFastSleep data={props.data} />
+                </View>
+                {
+                    props.data.scenario == 'FAST_SLEEP' && <View style={{
+                        position: 'absolute', left: 0, top: 0, right: 0, bottom: 0,
+                        opacity: segmentIndex == 1 ? 1 : 0
+                    }}>
+                        <Stage data={props.data} />
+                    </View>
+                } */}
+
+            </View>
+        </View>
+        {
+            props.data.scenario == 'FAST_SLEEP' &&
+            <View style={{ marginBottom: 0 }}>
+                <Segment titles={[props.isSchedule?t('feature.track_time_duration.schedule.timeline'):
+                t('feature.track_time_duration.record_fast_sleep.timeline'), 
+                t('feature.track_time_duration.schedule.stage')]} changed={(e) => {
+                    setSegmentIndex(e);
+                    global.segmentIndex = e
+                }} />
+            </View>
+        }
+    </View>
+}

src/features/trackTimeDuration/components/TitleView.tsx

@@ -13,6 +13,7 @@ export default function Component(props: {
     showAddBtn?: boolean
 }) {
     const time = useSelector((state: any) => state.time);
+    const user = useSelector((state: any) => state.user);
     const { t } = useTranslation()
     const dispatch = useDispatch();
     const isFastFirst = true
@@ -60,7 +61,7 @@ export default function Component(props: {
                 fontSize: props.secondPage ? 28 : 36
             }}>{props.title}</Text>
             {
-                time.status == 'WAIT_FOR_START' && props.showAddBtn && <Image onClick={more} src={require('@/assets/images/add.png')} className='icon' />
+                user.isLogin&&time.status == 'WAIT_FOR_START' && props.showAddBtn && <Image onClick={more} src={require('@/assets/images/add.png')} className='icon' />
             }
         </View>
         {

src/features/trackTimeDuration/hooks/RingData.tsx

@@ -99,7 +99,7 @@ export const getTarget = (data: any, isBigRing: boolean) => {
         if (data.scenario == 'SLEEP') {
             targetRingBig.color = global.sleepColor?global.sleepColor:ColorType.sleep
             targetRingBig.startArc = startArc(data.sleep.target_start_time)
-            targetRingBig.durationArc = durationArc(data.sleep.start_time, data.sleep.target_end_time)
+            targetRingBig.durationArc = durationArc(data.sleep.target_start_time, data.sleep.target_end_time)
         }
         else {
             targetRingBig.startArc = startArc(data.fast.target_start_time)

src/pages/account/Setting.tsx

@@ -1,5 +1,6 @@
 import Buttons from "@/components/basic/Buttons";
 import Footer from "@/components/layout/Footer";
+import TableCell from "@/components/layout/TableCell";
 import { ColorType } from "@/context/themes/color";
 import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
 import { clear, logout } from "@/services/user";
@@ -45,8 +46,10 @@ export default function Page() {
     }
 
     return <View style={{ color: '#fff',display:'flex',flexDirection:'column' }}>
+        <View style={{height:20}}/>
+        <TableCell title="版本" ><Text style={{ opacity: 0.8 }}>v1.2.3</Text></TableCell>
         <View style={{height:'80vh'}}/>
-        <Text style={{color:'#9E9E9E',textAlign:'center',fontSize:14}}>v1.2.3</Text>
+        {/* <Text style={{color:'#9E9E9E',textAlign:'center',fontSize:14}}>v1.2.2</Text> */}
         
         <Footer>
             <ChooseScenarioBtn title='退出登录' onClick={logoutF} background={ColorType.fast} />

src/pages/clock/Clock.tsx

@@ -1,5 +1,5 @@
 import { Component, PropsWithChildren, useEffect, useRef, useState } from 'react'
-import { View, Text, Button, Input, Picker, Swiper, SwiperItem } from '@tarojs/components'
+import { View, Text, Button, Input, Picker, Swiper, SwiperItem, Icon } from '@tarojs/components'
 import '../index/index.scss'
 import './Clock.scss'
 // import './context/locales/index'
@@ -39,6 +39,7 @@ import SectionHeader from '@/components/layout/SectionHeader'
 import Header from '@/components/layout/Header'
 import { TimeFormatter } from '@/utils/time_format'
 import NoData from '@/components/view/NoData'
+import { ColorType } from '@/context/themes/color'
 // import TabBar from '../../components/Tabbar';
 
 export default function IndexPage() {
@@ -144,7 +145,6 @@ export default function IndexPage() {
           }
         },
         fail: (e) => {
-          console.log(e)
         }
       });
   }
@@ -221,6 +221,14 @@ export default function IndexPage() {
     setShowSingleFastEnd(true)
   }
 
+  function tapClock() {
+    if (!user.isLogin) {
+      Taro.navigateTo({
+        url: '/pages/account/ChooseAuth'
+      })
+    }
+  }
+
   function getCheckData() {
     getClocks().then(res => {
       setErrorPage(false)
@@ -264,22 +272,8 @@ export default function IndexPage() {
         else {
         }
       }
-      // if ((res as any).current_record.status == 'ONGOING1') {
-      //   setShowSingleFastEnd(true)
-      //   setTimeout(() => {
-      //     setShowSingleFastEnd(false)
-      //     setSwiperIndex(1)
-      //     setAutoPlay(true)
-      //   }, 2000)
-
-      // }
-      // else {
-      //   setSwiperIndex(0)
-      //   setAutoPlay(false)
-      // }
 
     }).catch(e => {
-      console.log('eeeeee')
       if (!checkData) {
         setErrorPage(true)
       }
@@ -378,6 +372,7 @@ export default function IndexPage() {
       }
     </View>
   }
+  //, 'search', 'clear'
   return (
     <Layout type={TemplateType.customHeader} header={headerView()} title={t('page.clock.title')} titleShowStyle={NaviBarTitleShowType.scrollToShow}>
       <View style={{ flex: 1, flexDirection: 'column', display: 'flex', backgroundColor: '#000', color: '#fff' }}>
@@ -386,18 +381,21 @@ export default function IndexPage() {
         }
 
         <Box>
-          <View className='clock_bg'>
+          <View className='clock_bg' onClick={tapClock}>
             <Clocks />
           </View>
         </Box>
+        {/* <Icon type='circle' size='40rpx'/>
+        <Icon type='cancel' color={ColorType.fast} size='40rpx'/>
+        <Icon type='success' color={ColorType.fast} size='38rpx'/> */}
         {
           errorView()
         }
         {
-          consoleView()
+          user.isLogin && consoleView()
         }
 
-        <View style={{ backgroundColor: global.isDebug ? 'pink' : 'transparent' }}>
+        {/* <View style={{ backgroundColor: global.isDebug ? 'pink' : 'transparent' }}>
           {
             checkData && <SectionHeader top={24} bottom={12} title={t('feature.track_time_duration.schedule.section_title')}></SectionHeader>
           }
@@ -406,24 +404,26 @@ export default function IndexPage() {
           {
             checkData && <TableCellHeader title={TimeFormatter.getDateAndWeek(new Date().getTime(),true)}></TableCellHeader>
           }
-        </View>
+        </View> */}
         {
-          checkData && schedule()
+          user.isLogin && checkData && schedule()
+        }
+        {
+          user.isLogin && <View style={{ backgroundColor: global.isDebug ? 'pink' : 'transparent' }}>
+            {
+              checkData && (checkData as any).latest_record &&
+              <SectionHeader top={48} bottom={24} title={t('feature.track_time_duration.record_fast_sleep.header.latest_record')}>
+                <Header title='' action={() => {
+                  Taro.navigateTo({
+                    url: '/pages/common/RecordsHistory?type=time&title=time'
+                  })
+                }} />
+              </SectionHeader>
+            }
+          </View>
         }
-        <View style={{ backgroundColor: global.isDebug ? 'pink' : 'transparent' }}>
-          {
-            checkData && (checkData as any).latest_record &&
-            <SectionHeader top={48} bottom={24} title={t('feature.track_time_duration.record_fast_sleep.header.latest_record')}>
-              <Header title='' action={() => {
-                Taro.navigateTo({
-                  url: '/pages/common/RecordsHistory?type=time&title=time'
-                })
-              }} />
-            </SectionHeader>
-          }
-        </View>
         {
-          checkData && (checkData as any).latest_record &&
+          user.isLogin && checkData && (checkData as any).latest_record &&
           <RecordFastSleep type='latest' data={(checkData as any).latest_record} delSuccess={getCheckData} />
         }
         <View style={{ height: 100 }} />

src/pages/common/RecordsHistory.tsx

@@ -181,7 +181,6 @@ export default function Page() {
     }
 
     function doClear() {
-        debugger
         if (router.params.type == 'activity') {
             cleartActivityRecords({
                 code: '_walk'

src/pages/index/indexecharts.jsx

@@ -55,7 +55,6 @@ export default class Index extends Component {
   componentDidHide() { }
 
   callback(e){
-    console.log(e)
   }
 
   render() {

src/services/http/request.ts

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

src/utils/common.scss

@@ -11,6 +11,8 @@ $ringColor: #1c1c1c;
 $blackColor: #000000;
 $whiteColor: #ffffff;
 
+$boxBorderRadius:48px;
+
 
 .fast_sleep_text {
     background: linear-gradient(90deg, $fastColor 0%, $sleepColor 100%);

src/utils/time_format.ts

@@ -170,12 +170,35 @@ export class TimeFormatter {
 
     // 根据间隔的大小返回不同的格式
     if (diff < 60000) {
-      return `${seconds}秒`;
+      return `${seconds}秒钟`;
     } else if (diff < 3600000) {
-      return `${minutes}分${seconds}秒`;
+      return `${minutes}分钟`;
+      // return `${minutes}分${seconds}秒`;
+    } else {
+      // if (ingoreSeconds) return `${hours}小时${minutes}分钟`;
+      // return `${hours}小时${minutes}分${seconds}秒`;
+      if (minutes==0){
+        return `${hours}小时`;
+      }
+      return `${hours}小时${minutes}分钟`;
+    }
+  }
+  //格式化时间间隔
+  static formateTimeDifference(startTimestamp: number, endTimestamp: number, ingoreSeconds?: boolean): string {
+    const diff = Math.abs(endTimestamp - startTimestamp);
+    // 计算小时、分钟和秒数
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+    // 根据间隔的大小返回不同的格式
+    if (diff < 60000) {
+      return `00:00:${TimeFormatter.padZero(seconds)}`;
+    } else if (diff < 3600000) {
+      return `00:${TimeFormatter.padZero(minutes)}:${TimeFormatter.padZero(seconds)}`;
     } else {
       if (ingoreSeconds) return `${hours}小时${minutes}分`;
-      return `${hours}小时${minutes}分${seconds}秒`;
+      return `${TimeFormatter.padZero(hours)}:${TimeFormatter.padZero(minutes)}:${TimeFormatter.padZero(seconds)}`;
     }
   }