update

src/_health/components/cover_list.scss

@@ -2,14 +2,14 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin-bottom: 16px;
+    // margin-bottom: 16px;
     flex-shrink: 0;
     flex: 1;
 }
 
 .media_item {
-    width: 155px;
-    height: 155px;
-    margin-right: 4px;
-    margin-bottom: 4px;
+    width: 178px;
+    height: 178px;
+    margin-right: 7px;
+    margin-bottom: 7px;
 }

src/_health/components/fast_sleep_console.tsx

@@ -212,7 +212,7 @@ export default function FastSleepConsole(props: { step: number, data: any, del:
                 delConfirm()
                 break;
             case t('health.edit_schedule'):
-                jumpPage('/_health/pages/schedules?mode=FAST,EAT')
+                jumpPage('/_health/pages/schedules?mode=FAST&isFastSleep=1')
                 break
         }
     }

src/_health/components/no_record.scss

@@ -4,7 +4,7 @@
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
-    height: 750px;
+    height: 424px;
     // padding-top: 80px;
     // padding-bottom: 80px;
     flex-shrink: 0;

src/_health/components/no_record.tsx

@@ -1,12 +1,12 @@
-import { View,Image } from "@tarojs/components";
+import { View, Image } from "@tarojs/components";
 import './no_record.scss'
 import { rpxToPx } from "@/utils/tools";
 import { MainColorType } from "@/context/themes/color";
 
-export default function NoRecord(){
+export default function NoRecord() {
     return <View className="no_more_bg">
         {/* <Image style={{width:rpxToPx(160),height:rpxToPx(160)}} src={require('@assets/_health/null.png')}/> */}
-        <View style={{height:'40%'}}/>
-        <View className="h44 bold" style={{color:MainColorType.g02}}>暂无数据</View>
+        <View style={{ height: rpxToPx(188) }} />
+        <View className="h30 bold g03">暂无数据</View>
     </View>
 }

src/_health/components/target_progress.scss

@@ -0,0 +1,23 @@
+.history_duration_bg {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 20px;
+    background-color: #fafafa;
+    height: 100px;
+    padding-left: 14px;
+    // width: 572px;
+}
+
+.recent_ring_bg {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.history_item_duration {
+    margin-left: 10px;
+    color: #000000;
+}

src/_health/components/target_progress.tsx

@@ -0,0 +1,62 @@
+import { View } from '@tarojs/components'
+import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
+import './target_progress.scss'
+import { MainColorType } from '@/context/themes/color';
+import { durationArc, startArc } from '@/utils/ring_utils';
+import { rpxToPx } from '@/utils/tools';
+
+export default function TargetProgress(props: {
+    showLine?: boolean,
+    color?: string,
+    startTimestamp?: number,
+    endTimerstamp?: number,
+    canvasId?: string,
+    showRing: boolean,
+    icon?: any,
+    desc?: string
+}) {
+
+    function ring() {
+        const common: RingCommon = {
+            useCase: 'ChooseScenario',
+            radius: 12,
+            lineWidth: 6,
+            isFast: true,
+            status: 'WAIT_FOR_START'
+        }
+
+        const bgRing: BgRing = {
+            color: MainColorType.ringBg
+        }
+
+        const realRing = {
+            hideBg: true,
+            color: props.color ?? MainColorType.fast,
+            startArc: startArc(props.startTimestamp ?? 0),
+            durationArc: durationArc(props.startTimestamp ?? 0, props.endTimerstamp ?? 0)
+        }
+        return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={props.canvasId ?? 'helloworld'} />
+    }
+
+
+    return <View className='history_duration_bg' style={{ position: 'relative', marginTop: 0,marginBottom:props.showLine?rpxToPx(7):0 }}>
+        {
+            props.showRing ? <View className='recent_ring_bg'>
+                {
+                    ring()
+                }
+            </View> :
+                <View className='recent_ring_bg'>
+                    {
+                        props.icon
+                    }
+                </View>
+        }
+        {
+            props.desc && <View className='history_item_duration h32'>{props.desc}</View>
+        }
+        {/* {
+            props.showLine && <View style={{height:rpxToPx(7),flexShrink:0}} />
+        } */}
+    </View>
+}

src/_health/components/time_title_desc.tsx

@@ -7,6 +7,7 @@ import dayjs from "dayjs";
 export default function TimeTitleDesc(props: {
     time: string,
     timeObj?: any,
+    showPoint?:boolean,
     dayTag?: string,
     title?: string,
     desc?: string,
@@ -42,17 +43,20 @@ export default function TimeTitleDesc(props: {
             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>
+    return <Text key={props.key} className={props.className} style={{ lineHeight: rpxToPx(48) + 'px', ...props.style }}>
+        {
+            props.showPoint && <Text className="h32" style={{ color: '#000' }}>· </Text>
+        }
+        <Text style={{ color: MainColorType.link }} className="h32" onClick={tapTime}>{props.time}</Text>
         {
             props.dayTag && <Text style={{ color: MainColorType.link, fontSize: 9, lineHeight: '20px', fontWeight: 'bold', verticalAlign: 'text-top' }}>{props.dayTag}</Text>
         }
         <Text> {' '} </Text>
         {
-            props.title && <Text style={{ color: '#000' }}> {props.title} </Text>
+            props.title && <Text className="h32" style={{ color: '#000' }}> {props.title} </Text>
         }
         {
-            props.desc && <Text style={{ color: '#000' }}> {props.desc} </Text>
+            props.desc && <Text className="h32" style={{ color: '#000' }}> {props.desc} </Text>
         }
     </Text>
 }

src/_health/pages/add_moment.scss

@@ -5,7 +5,7 @@
     font-size: 30px;
     width: 670px;
     margin-bottom: 40px;
-    padding-left: 96px;
+    padding-left: 86px;
     padding-right: 40px;
     box-sizing: border-box;
 }
@@ -28,6 +28,7 @@
     box-sizing: border-box;
     width: 750px;
     flex-shrink: 0;
+    font-size: 36px;
 }
 
 .form{

src/_health/pages/add_moment.tsx

@@ -457,7 +457,7 @@ export default function AddMoment() {
             backgroundColor: '#fff',
             // padding: rpxToPx(40),
             flexDirection: 'column',
-            height: rpxToPx(550),
+            height: rpxToPx(642),
             width: rpxToPx(750),
             boxSizing: 'border-box'
 
@@ -495,7 +495,7 @@ export default function AddMoment() {
 
             />
 
-            <Textarea placeholder="简单描述（选填）" className="textarea"
+            <Textarea placeholder="简单描述（选填）" className="textarea g01"
                 placeholder-style="color:#B2B2B2"
                 value={desc}
                 onInput={e => {

src/_health/pages/move.tsx

@@ -861,7 +861,7 @@ export default function Move() {
                                 {/* <Text className="history_item_date">{(item.date + '').substring(6, 8)}</Text> */}
                                 <View className="cell_date" >
                                     <View className="h42 bold" style={{ lineHeight: rpxToPx(60) + 'px' }}>{historyDate(item,index)}</View>
-                                    <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(11), lineHeight: rpxToPx(49) + 'px' }}>{historyMonth(item,index)}</View>
+                                    <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(13), lineHeight: rpxToPx(47) + 'px' }}>{historyMonth(item,index)}</View>
                                 </View>
                                 <View className="history_item_detail_bg">
                                     <IconWalk width={rpxToPx(32)} color={MainColorType.active} />

src/_health/pages/schedules.tsx

@@ -92,7 +92,13 @@ export default function Schedules() {
         let windows = ''
         switch (selMode) {
             case 'FAST':
-                windows = 'FAST,EAT';
+                if (router.params.isFastSleep){
+                    windows = 'FAST,SLEEP';
+                }
+                else {
+                    windows = 'FAST,EAT';
+                }
+                
                 break
             case 'EAT':
                 windows = 'EAT,FAST';
@@ -132,6 +138,9 @@ export default function Schedules() {
     function getTitle() {
         switch (selMode) {
             case 'FAST':
+                if (router.params.isFastSleep){
+                    return '断食和睡眠';
+                }
                 return '断食和进食';
             case 'EAT':
                 return '进食和断食';
@@ -436,7 +445,7 @@ export default function Schedules() {
             </Card>
             <View style={{ height: 20, flexShrink: 0 }} />
             {
-                selMode != '' && selMode != 'DAY' && selMode != 'NIGHT' && <Card><View className='item_add'
+                !router.params.isFastSleep && selMode != '' && selMode != 'DAY' && selMode != 'NIGHT' && <Card><View className='item_add'
                     onClick={() => add((selMode == 'FAST' || selMode == 'EAT'))}>
                     <StatusIndicator type={StatusType.img}
                         fontColor={getAddColor()}

src/_health/pages/timeline_detail.scss

@@ -6,13 +6,14 @@
     display: flex;
     flex-direction: row;
     box-sizing: border-box;
+    min-height: 642px;
 }
 
 .detail_header_header{
     margin-right:24px;
     width: 74px;
     height: 74px;
-    border-radius: 8px;
+    border-radius: 37px;
 }
 
 .detail_header_content{
@@ -36,8 +37,10 @@
     left: 0;
     right:0;
     bottom:0;
-    height: 108px;
-    padding-bottom: 40px;
+    height: 103px;
+    padding-bottom: constant(safe-area-inset-bottom);
+    /* 兼容 iOS < 11.2 */
+    padding-bottom: env(safe-area-inset-bottom);
     font-size: 26px;
     display: flex;
     align-items: center;
@@ -105,7 +108,7 @@
     line-height: 72px;
     font-size: 48px;
     // width: 606px;
+    margin-left: -10px;
     width: 630px;
-    // background-color: red;
     color: #fff;
 }

src/_health/pages/timeline_detail.tsx

@@ -23,6 +23,9 @@ import showAlert from "@/components/basic/Alert";
 import showActionSheet from "@/components/basic/ActionSheet";
 import { useTranslation } from "react-i18next";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+import { TimeFormatter } from "@/utils/time_format";
+import TargetProgress from "../components/target_progress";
+import formatMilliseconds from "@/utils/format_time";
 
 let timestamp = 0;
 let useRoute;
@@ -100,12 +103,12 @@ export default function TimelineDetail() {
             var params = {
                 op_page: 'FAST_WITH_SLEEP'
             }
-            getRecordDetail(window_id, router.params.isFastsleep?params:null).then(res => {
+            getRecordDetail(window_id, router.params.isfastsleep == '1' ? params : null).then(res => {
                 setLoaded(true)
                 setDetail(res)
                 setHistory((res as any).events)
                 // setList((res as any).moments)
-                // setPublish((res as any).publish)
+                setPublish((res as any).publish)
             })
         }
         else {
@@ -293,7 +296,7 @@ export default function TimelineDetail() {
         })
     }
 
-    function delHistory(){
+    function delHistory() {
         showAlert({
             title: '删除',
             content: '确认删除此记录吗?',
@@ -302,6 +305,7 @@ export default function TimelineDetail() {
                 delRecord(window_id).then(res => {
                     global.refreshWindow()
                     global.refreshHistory()
+                    Taro.navigateBack()
                 })
             }
         })
@@ -346,22 +350,8 @@ export default function TimelineDetail() {
 
     function dayTag(obj) {
         var begin = history[0].time.timestamp
-        // if (history[0].moments) {
-        //     begin = history[0].moments[0].time.timestamp
-        // }
-
         var end = obj.time.timestamp
-
-        const date1 = dayjs(begin);
-        const date2 = dayjs(end);
-
-        // 获取日期部分（去掉时间）
-        const startDate = date1.startOf('day');
-        const endDate = date2.startOf('day');
-        const days = endDate.diff(startDate, 'day')
-        if (days > 0)
-            return '+' + days;
-        return ''
+        return TimeFormatter.dayTagText(begin, end)
     }
 
     if (!loaded) return <View />
@@ -393,19 +383,47 @@ 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}
-                            />
+                            {
+                                (item.title || item.description) && <TimeTitleDesc
+                                    showPoint={detail.show}
+                                    timeObj={detail.time}
+                                    time={dayjs(item.time.timestamp).format('HH:mm')}
+                                    title={item.title}
+                                    desc={item.description}
+                                />
+                            }
+
                         </View>
                     })
                 }
                 {
                     history && history.map((item, index) => {
                         return <View key={index} style={{ flexDirection: 'column', display: 'flex' }}>
+                            {
+                                item.show && <TimeTitleDesc
+                                    timeObj={item.time}
+                                    time={dayjs(item.time.timestamp).format('HH:mm')}
+                                    title={item.title}
+                                    dayTag={dayTag(item)}
+                                    desc=''
+                                />
+                            }
                             {
+                                item.moments && item.moments.map((moment, j) => {
+                                    return (moment.title || moment.description) && <View key={j * 10} style={{ flexDirection: 'column', display: 'flex' }}>
+                                        <TimeTitleDesc
+                                            showPoint={item.show}
+                                            timeObj={moment.time}
+                                            time={dayjs(moment.time.timestamp).format('HH:mm')}
+                                            title={moment.title}
+                                            dayTag={dayTag(moment)}
+                                            desc={moment.description}
+                                        />
+                                    </View>
+                                })
+                            }
+
+                            {/* {
                                 item.moments && item.moments.map((moment, j) => {
                                     return <View key={j * 10} style={{ flexDirection: 'column', display: 'flex' }}>
                                         <TimeTitleDesc
@@ -426,7 +444,7 @@ export default function TimelineDetail() {
                                     dayTag={dayTag(item)}
                                     desc=''
                                 />
-                            }
+                            } */}
                         </View>
                     })
                 }
@@ -443,11 +461,29 @@ export default function TimelineDetail() {
 
                     </View>
                 } */}
-                <View style={{ marginTop: rpxToPx(24) }}>
-                    <CoverList imgs={imgList()} count={mediaCount()} />
-                </View>
                 {
-                    publish && <View style={{ display: 'flex', flexDirection: 'row', height: rpxToPx(60), alignItems: 'center', justifyContent: 'space-between' }}>
+                    mediaCount() > 0 && <View style={{ marginTop: rpxToPx(24) }}>
+                        <CoverList imgs={imgList()} count={mediaCount()} />
+                    </View>
+                }
+
+                {
+                    history && detail.windows && detail.windows.map((item, index) => {
+                        return <TargetProgress key={index} showLine={index < detail.windows.length - 1}
+                            color={getThemeColor(item.window)}
+                            showRing={true}
+                            desc={item.description}
+                            icon={
+                                null
+                            }
+                            canvasId={`${item.window}${item.window_range.start_timestamp}${index}aa`}
+                            startTimestamp={item.window_range.start_timestamp}
+                            endTimerstamp={item.window_range.end_timestamp}
+                        />
+                    })
+                }
+                {
+                    publish && <View style={{ display: 'flex', flexDirection: 'row', height: rpxToPx(60),marginTop:rpxToPx(17), alignItems: 'center', justifyContent: 'space-between' }}>
                         <Text className="h24 g02">{publish.edited ? '编辑于' : '发布于'}{dayjs(publish.timestamp).format('MM-DD HH:mm')}</Text>
                         <NewButton
                             type={NewButtonType.more}

src/app.scss

@@ -389,7 +389,7 @@ page {
     bottom: 0;
 }
 
-.border_header_line{
+.border_header_line {
     height: 2px;
     transform: scaleY(0.5);
     // background-color: red;
@@ -465,7 +465,7 @@ page {
     line-height: 60px;
 }
 
-.h42{
+.h42 {
     font-size: 42px;
     line-height: 50px;
 }
@@ -510,12 +510,12 @@ page {
     line-height: 24px;
 }
 
-view{
-    letter-spacing: -1px;
-}
-text{
-    letter-spacing: -1px;
-}
+// view{
+//     letter-spacing: 0px;
+// }
+// text{
+//     letter-spacing: 0px;
+// }
 
 .bold {
     font-weight: bold;
@@ -600,9 +600,27 @@ text{
     width: 100%;
 }
 
+.line2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.line3 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
 .cell_date {
     // background-color: pink;
+    display: flex;
     margin-right: 0px;
+    margin-top: -4px;
     width: 122px;
     height: 60px;
     flex-shrink: 0;
@@ -613,7 +631,7 @@ text{
     color: #000;
 }
 
-.history_year_month{
+.history_year_month {
     height: 84px;
     padding-left: 40px;
     display: flex;

src/features/health/History.scss

@@ -29,9 +29,8 @@
 }
 
 .history_item_duration {
-    margin-left: 16px;
+    margin-left: 10px;
     color: #000000;
-    font-size: 26px;
 }
 
 .history_item_title {
@@ -60,55 +59,63 @@
     box-sizing: border-box;
 }
 
-.history_duration_bg{
+.history_duration_bg {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 20px;
     background-color: #F5F5F5;
-    height: 68px;
-    padding-left: 20px;
+    height: 100px;
+    padding-left: 10px;
     // width: 572px;
 }
 
-.archive{
+.recent_ring_bg {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.archive {
     width: 36px;
     height: 36px;
     padding-top: 12px;
     padding-bottom: 12px;
 }
 
-.archived_bg{
+.archived_bg {
     background-color: #B2B2B21A;
     height: 68px;
     border-radius: 34px;
     padding-left: 48px;
-    padding-right:24px;
+    padding-right: 24px;
     display: flex;
     align-items: center;
     flex-direction: row;
 
 }
 
-.archived_text{
+.archived_text {
     margin-right: 8px;
     font-size: 26px;
 }
 
-.archived_img{
+.archived_img {
     width: 34px;
     height: 34px;
     margin-right: 4px;
 }
 
-.history_archived_row{
+.history_archived_row {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     margin-top: 30px;
 }
 
-.history_archived{
+.history_archived {
     background-color: #B2B2B21a;
     display: flex;
     width: 74px;

src/features/health/HistoryItem.tsx

@@ -18,6 +18,8 @@ import TimeTitleDesc from "@/_health/components/time_title_desc";
 import CoverList from "@/_health/components/cover_list";
 import { TimeFormatter } from "@/utils/time_format";
 import { jumpPage } from "../trackTimeDuration/hooks/Common";
+import TargetProgress from "@/_health/components/target_progress";
+import Cell from "@/_health/base/cell";
 
 export default function HistoryItem(props: {
     data: any,
@@ -71,8 +73,8 @@ export default function HistoryItem(props: {
     function ring() {
         const common: RingCommon = {
             useCase: 'ChooseScenario',
-            radius: 7,
-            lineWidth: 3,
+            radius: 12,
+            lineWidth: 6,
             isFast: true,
             status: 'WAIT_FOR_START'
         }
@@ -94,8 +96,8 @@ export default function HistoryItem(props: {
     function ring2() {
         const common: RingCommon = {
             useCase: 'ChooseScenario',
-            radius: 7,
-            lineWidth: 3,
+            radius: 12,
+            lineWidth: 6,
             isFast: true,
             status: 'WAIT_FOR_START'
         }
@@ -222,31 +224,72 @@ export default function HistoryItem(props: {
             var begin = props.data.events[0].time.timestamp
             var end = props.data.events[index].time.timestamp
 
-            const date1 = dayjs(begin);
-            const date2 = dayjs(end);
-
-            // 获取日期部分（去掉时间）
-            const startDate = date1.startOf('day');
-            const endDate = date2.startOf('day');
-            const days = endDate.diff(startDate, 'day')
-            if (days > 0)
-                return '+' + days;
+            return TimeFormatter.dayTagText(begin, end)
         }
-        return ''
     }
 
-    function goDetail(){
-        jumpPage(`/_health/pages/timeline_detail?window_id=${props.data.window_id}&fast_type=${props.fast_type}&type=recent&isFastsleep=${props.mode=='FAST,SLEEP'}`)
+    function goDetail() {
+        jumpPage(`/_health/pages/timeline_detail?window_id=${props.data.window_id}&fast_type=${props.fast_type}&type=recent&isfastsleep=${props.mode == 'FAST,SLEEP' ? 1 : 0}`)
+    }
+
+    // if (props.mode == 'FAST,SLEEP'){
+    //     debugger
+    // }
+
+    function momentItem(moment) {
+        var hasImage = false
+        if (moment.media && moment.media.length > 0) hasImage = true
+        if (moment.title || moment.description) {
+            return <View style={{
+                display: 'flex',
+                flex: 1,
+                flexShrink: 0,
+                flexDirection: 'column',
+                backgroundColor: hasImage ? 'transparent' : '#fafafa',
+                paddingLeft: !hasImage ? rpxToPx(20) : rpxToPx(17),
+                paddingRight: !hasImage ? rpxToPx(20) : 0,
+                paddingTop: !hasImage ? rpxToPx(12) : 0,
+                paddingBottom: !hasImage ? rpxToPx(12) : 0
+            }}>
+                <TimeTitleDesc
+                className={hasImage?'line3':'line2'}
+                    timeObj={moment.time}
+                    time=''
+                    // time={moment.time && dayjs(moment.time.timestamp).format('HH:mm')}
+                    // dayTag={dayTag(index)}
+                    title={moment.title}
+                    desc={moment.description}
+                />
+            </View>
+        }
+
     }
 
     return <View className="history_item2" onClick={goDetail}>
         <View className="cell_date" >
             <View className="h42 bold" style={{ lineHeight: rpxToPx(60) + 'px' }}>{historyDate()}</View>
-            <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(11), lineHeight: rpxToPx(49) + 'px' }}>{historyMonth()}</View>
+            <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(13), lineHeight: rpxToPx(47) + 'px' }}>{historyMonth()}</View>
         </View>
-        <View className="history_content" >
+        <View className="history_content" style={{ paddingTop: rpxToPx(4) }}>
+            {
+                props.data.events.map((event, i) => {
+                    return event.moments && event.moments.map((moment, j) => {
+                        return <View style={{ display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(12), flex: 1 }} key={i * 100 + j}>
+                            {
+                                moment.media && moment.media.length > 0 && <Image
+                                    style={{ width: rpxToPx(178), height: rpxToPx(178), marginRight: rpxToPx(7), flexShrink: 0 }}
+                                    src={moment.media[0].url}
+                                    mode="aspectFill" />
+                            }
+                            {
+                                momentItem(moment)
+                            }
+                        </View>
+                    })
+                })
+            }
 
-            <View style={{ display: 'flex', flexDirection: 'column', marginBottom: rpxToPx(12), flex: 1, paddingTop: rpxToPx(4) }}>
+            {/* <View style={{ display: 'flex', flexDirection: 'column', marginBottom: rpxToPx(12), flex: 1, paddingTop: rpxToPx(4) }}>
                 {
                     props.data.events.map((item, index) => {
                         return <TimeTitleDesc
@@ -256,44 +299,53 @@ export default function HistoryItem(props: {
                             title={getTitle(item)}
                             desc={item.moments && item.moments.length > 0 ? item.moments[0].description : ''}
                         />
-                        // return <Text key={index}>
-                        //     <Text className="history_item_title">{item.time && dayjs(item.time.timestamp).format('HH:mm')}
-                        //         <Text style={{ fontSize: 9, lineHeight: '20px', fontWeight: 'bold', verticalAlign: 'text-top' }}>{dayTag(index)} </Text>
-                        //         {getTitle(item)} </Text>
-                        //     {
-                        //         item.moments && item.moments.map((moment, i) => {
-                        //             return <Text className="history_item_desc" key={i * 1000}>{moment.description}</Text>
-                        //         })
-                        //     }
-                        // </Text>
                     })
                 }
-            </View>
-            {
+            </View> */}
+            {/* {
                 mediaCount() > 0 && <CoverList count={mediaCount()} imgs={imgList()} />
-            }
+            } */}
 
-            <View className="history_duration_bg" style={{ marginTop: 0 }}>
-                {
-                    props.fast_type != 'LF' && ring()
-                }
-                {
-                    props.fast_type == 'LF' && <IconLongFast color={MainColorType.fast} width={rpxToPx(32)} />
-                }
-                {
-                    props.data.window_range.end_timestamp && <Text className="history_item_duration">{formatMilliseconds(props.data.window_range.end_timestamp - props.data.window_range.start_timestamp)}</Text>
+            {
+                props.data.windows.map((item, index) => {
+                    return <TargetProgress key={index} showLine={index < props.data.windows.length - 1}
+                        color={getThemeColor(item.window)}
+                        showRing={props.fast_type != 'LF'}
+                        desc={item.description}
+                        icon={
+                            props.fast_type == 'LF' ? <IconLongFast color={MainColorType.fast} width={rpxToPx(32)} /> : null
+                        }
+                        canvasId={`${item.window}${item.window_range.start_timestamp}${index}`}
+                        startTimestamp={item.window_range.start_timestamp}
+                        endTimerstamp={item.window_range.end_timestamp}
+                    />
+                })
+            }
+            {/* <TargetProgress showLine={props.mode == 'FAST,SLEEP' && props.data.events.length > 2}
+                color={props.mode == 'FAST,SLEEP' ? getThemeColor('FAST') : getThemeColor(health.mode)}
+                showRing={props.fast_type != 'LF'}
+                desc={props.data.window_range.end_timestamp ? formatMilliseconds(props.data.window_range.end_timestamp - props.data.window_range.start_timestamp) : ''}
+                icon={
+                    props.fast_type == 'LF' ? <IconLongFast color={MainColorType.fast} width={rpxToPx(32)} /> : null
                 }
-            </View>
+                canvasId={(props.mode == 'FAST,SLEEP' ? 'history_fast_sleep' + props.index : 'history_' + props.index) + props.type}
+                startTimestamp={props.data.window_range.start_timestamp}
+                endTimerstamp={props.data.window_range.end_timestamp}
+            />
             {
                 props.mode == 'FAST,SLEEP' && props.data.events.length > 2 && <View className="history_duration_bg" style={{ marginTop: 0 }}>
                     {
-                        props.fast_type != 'LF' && ring2()
+                        props.fast_type != 'LF' && <View className="recent_ring_bg">
+                            {
+                                ring2()
+                            }
+                        </View>
                     }
                     {
-                        props.data.window_range.end_timestamp && <Text className="history_item_duration">{formatMilliseconds(props.data.events[2].time.timestamp - props.data.events[1].time.timestamp)}</Text>
+                        props.data.window_range.end_timestamp && <Text className="history_item_duration h26">{formatMilliseconds(props.data.events[2].time.timestamp - props.data.events[1].time.timestamp)}</Text>
                     }
                 </View>
-            }
+            } */}
             {/* {
                 props.isArchived && <View className="history_archived_row">
                     <View className="history_archived" onClick={(e) => {
@@ -325,17 +377,18 @@ export default function HistoryItem(props: {
                     </View>
                 </View>
             } */}
-            <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', height: rpxToPx(60), marginTop: rpxToPx(20) }}>
+            <View style={{ height: rpxToPx(0), flexShrink: 0 }} />
+            {/* <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', height: rpxToPx(60), marginTop: rpxToPx(20) }}>
                 <View style={{ flex: 1 }} />
                 <NewButton type={NewButtonType.more}
                     onClick={tapDel}
                 />
-            </View>
+            </View> */}
         </View>
-
+        {/* 
         {
             !props.hideLine && <View className="border_footer_line" />
-        }
+        } */}
 
     </View>
 }

src/features/health/MainCard.scss

@@ -128,7 +128,7 @@
 }
 
 .window_name {
-    margin-top: 16px;
+    margin-top: 20px;
     font-weight: bold;
     font-size: 28px;
     height: 42px;

src/features/health/MainConsole.tsx

@@ -176,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 && item.target.timestamp >= new Date().getTime()) {
             themeColor = MainColorType.g02
         }
         if (health.mode == 'DAY' || health.mode == 'NIGHT') {
@@ -201,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 && item.target.timestamp >= new Date().getTime() ? NewButtonType.alpha2 : NewButtonType.alpha}
                 title={operateTitle(item)}
                 width={rpxToPx(128)}
                 height={rpxToPx(72)}
@@ -800,13 +800,10 @@ export default function MainConsole(props: { type: WindowType }) {
     return <View className="main-console-bg">
         <Image className="main_arrow" src={require('@assets/images/center_arrow.png')} />
         <View className="main_summary">
-            {/* <View className="main_summary_status" style={{ color: getThemeColor(health.mode) }}>{windowStatus()}</View> */}
             <View className="main_summary_time bold" style={{
                 marginTop: rpxToPx(14),
                 color: getTitleColor()
             }} >{getCountownTime(health.windows, health.mode)}
-                {/* <View className={timePointClass()}
-                    style={{ backgroundColor: getWindowStatus(health.windows, health.mode) == WindowStatusType.upcoming ? '#B2B2B2' : getThemeColor(health.mode) }} /> */}
             </View>
             <Text className="main_summary_duration"
                 style={{

src/features/health/MainDayNightCard.tsx

@@ -73,8 +73,8 @@ export default function MainDayNightCard(props: {
 
     const common: RingCommon = {
         useCase: 'ChooseScenario',
-        radius: 23.5,
-        lineWidth: 13,
+        radius: 27,
+        lineWidth: 12,
         isFast: true,
         status: 'WAIT_FOR_START'
     }

src/features/health/MainFastEatCard.tsx

@@ -129,8 +129,8 @@ export default function MainFastEatCard(props: {
 
     const common: RingCommon = {
         useCase: 'ChooseScenario',
-        radius: 23.5,
-        lineWidth: 13,
+        radius: 27,
+        lineWidth: 12,
         isFast: true,
         status: 'WAIT_FOR_START'
     }

src/features/health/MainHistory.tsx

@@ -29,6 +29,7 @@ export default forwardRef((props: { type?: string, fast_type?: string, updateDat
     const health = useSelector((state: any) => state.health);
     const user = useSelector((state: any) => state.user);
     const [loading, setLoading] = useState(false)
+    const [showArchive, setShowArchive] = useState(true)
     const healthRef = useRef(health)
     const { t } = useTranslation()
 
@@ -182,8 +183,8 @@ export default forwardRef((props: { type?: string, fast_type?: string, updateDat
         var showDate = false;
         var dateStr = ''
         if (index == 0) {
-            var currentDate = global.language=='en'?dayjs(list[index].window_range.start_timestamp).format('YYYY'):dayjs(list[index].window_range.start_timestamp).format('YYYY年')
-            var now = global.language=='en'?dayjs().format('YYYY'):dayjs().format('YYYY年')
+            var currentDate = global.language == 'en' ? dayjs(list[index].window_range.start_timestamp).format('YYYY') : dayjs(list[index].window_range.start_timestamp).format('YYYY年')
+            var now = global.language == 'en' ? dayjs().format('YYYY') : dayjs().format('YYYY年')
 
             if (currentDate != now) {
                 showDate = true
@@ -193,8 +194,8 @@ export default forwardRef((props: { type?: string, fast_type?: string, updateDat
 
         }
         else {
-            var currentDate = global.language=='en'?dayjs(list[index].window_range.start_timestamp).format('YYYY'):dayjs(list[index].window_range.start_timestamp).format('YYYY年')
-            var now = global.language=='en'?dayjs().format('YYYY'):dayjs().format('YYYY年')
+            var currentDate = global.language == 'en' ? dayjs(list[index].window_range.start_timestamp).format('YYYY') : dayjs(list[index].window_range.start_timestamp).format('YYYY年')
+            var now = global.language == 'en' ? dayjs().format('YYYY') : dayjs().format('YYYY年')
             if (currentDate != now) {
                 showDate = true
                 dateStr = currentDate
@@ -227,6 +228,9 @@ export default forwardRef((props: { type?: string, fast_type?: string, updateDat
                 {
                     health.mode == 'EAT' && <View onClick={() => {
                         jumpPage('/_health/pages/archive')
+                        setTimeout(() => {
+                            setShowArchive(false)
+                        }, 1000)
                     }}>
                         <Image className="archive" src={require('@assets/_health/archive.png')} />
                     </View>
@@ -236,19 +240,23 @@ export default forwardRef((props: { type?: string, fast_type?: string, updateDat
             </View>
         }
         {
-            health.mode == 'EAT' && health.eatArchived && health.eatArchived.archived && <View style={{
+            showArchive && health.mode == 'EAT' && health.eatArchived && health.eatArchived.archived && <View style={{
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
-                paddingTop: rpxToPx(36),
-                paddingBottom: rpxToPx(36),
+                paddingTop: rpxToPx(82),
+                paddingBottom: rpxToPx(82),
                 backgroundColor: '#fff',
                 position: 'relative'
             }}>
                 <View className="archived_bg" onClick={() => {
                     jumpPage('/_health/pages/archive')
+                    setTimeout(() => {
+                        setShowArchive(false)
+                    }, 1000)
+
                 }}>
-                    <Text className="archived_text" style={{ color: getThemeColor(health.mode) }}>[{health.eatArchived.real_count}/{health.eatArchived.target_count} Meals] Archived {TimeFormatter.dateDescription(new Date(health.eatArchived.timestamp).getTime(), true, false)}</Text>
+                    <Text className="archived_text bold" style={{ color: getThemeColor(health.mode) }}>[{health.eatArchived.real_count}/{health.eatArchived.target_count} Meals] Archived {TimeFormatter.dateDescription(new Date(health.eatArchived.timestamp).getTime(), true, false)}</Text>
                     {
                         health.eatArchived.images.map((item, index) => {
                             return <Image src={item} key={index} className="archived_img" mode="aspectFill" />
@@ -270,22 +278,24 @@ export default forwardRef((props: { type?: string, fast_type?: string, updateDat
             list.length == 0 && <NoRecord />
         }
         {
-            list.map((item, index) => {
-                return <View id={`history-${index}`} key={index}>
-                    {
-                        historyMonth(index)
-                    }
-                    <HistoryItem
-                        data={item}
-                        preData={index > 0 ? list[index - 1] : null}
-                        index={index}
-                        mode={props.type ?? health.mode}
-                        fast_type={props.fast_type}
-                        hideLine={hideLine(index)}
-                        onClick={() => {
-                            jumpPage('/_health/pages/moment_detail')
-                        }} />
-                    {/* {
+            list.length > 0 && <View style={{ minHeight: rpxToPx(464), backgroundColor: '#fff' }}>
+                {
+                    list.map((item, index) => {
+                        return <View id={`history-${index}`} key={index}>
+                            {
+                                historyMonth(index)
+                            }
+                            <HistoryItem
+                                data={item}
+                                preData={index > 0 ? list[index - 1] : null}
+                                index={index}
+                                mode={props.type ?? health.mode}
+                                fast_type={props.fast_type}
+                                hideLine={hideLine(index)}
+                                onClick={() => {
+                                    jumpPage('/_health/pages/moment_detail')
+                                }} />
+                            {/* {
                         props.type == 'EAT' && <HistoryEatItem data={item} index={index} />
                     }
                     {
@@ -297,9 +307,14 @@ export default forwardRef((props: { type?: string, fast_type?: string, updateDat
                     {
                         props.type == 'SLEEP' && <HistorySleepItem data={item} index={index} />
                     } */}
-                </View>
-            })
+                        </View>
+                    })
+                }
+            </View>
         }
+
+
+        <View style={{ height: rpxToPx(40), flexShrink: 0, backgroundColor: '#fff' }} />
         <ListFooter noMore={(list.length > 0) && (total == list.length)} />
     </View>
 })

src/features/health/MainSleepActiveCard.tsx

@@ -57,8 +57,8 @@ export default function MainSleepActiveCard(props: {
 
     const common: RingCommon = {
         useCase: 'ChooseScenario',
-        radius: 23.5,
-        lineWidth: 13,
+        radius: 27,
+        lineWidth: 12,
         isFast: true,
         status: 'WAIT_FOR_START'
     }

src/features/health/MainSwiper.tsx

@@ -14,7 +14,7 @@ import { useTranslation } from "react-i18next";
 
 
 let scrollPage = 0;
-let maxScale = 0.66
+let maxScale = 0.75
 export default function MainSwiper(props: { count: number, pageChanged: Function, typeChanged: Function }) {
     const [current, setCurrent] = useState(1)
     const [type, setType] = useState(WindowType.day)

src/features/journal/components/journal_cover.scss

@@ -1,3 +1,12 @@
+
+.journal_cover_bg{
+    //style={{ marginRight: rpxToPx(24),marginBottom:-rpxToPx(4),display:'flex',flexShrink:0 }}
+    margin-right: 24px;
+    margin-bottom: -4px;
+    display: flex;
+    flex-shrink: 0;
+    height: 178px;
+}
 .single {
     width: 178px;
     height: 178px;

src/features/journal/components/journal_cover.tsx

@@ -158,7 +158,7 @@ export default function JournalCover(props: { imgs: any }) {
         }
     }
 
-    return <View style={{ marginRight: rpxToPx(24),marginBottom:-rpxToPx(4) }}>
+    return <View className='journal_cover_bg' >
         {
             content()
         }

src/features/trackTimeDuration/components/Rings.weapp.tsx

@@ -332,7 +332,7 @@ export default function Rings(props: {
             if (props.currentDot.color != '#ffffffff') {
                 ctx.beginPath();
                 // ctx.translate(xPrime, yPrime)
-                ctx.arc(xPrime, yPrime, lineWidth / 2 * dotScale, 0, 2 * Math.PI, false);
+                ctx.arc(xPrime, yPrime, (lineWidth-1) / 2 * dotScale, 0, 2 * Math.PI, false);
                 ctx.fillStyle = props.currentDot.color;
                 ctx.fill();
             }

src/pages/account/Album.scss

@@ -20,15 +20,6 @@
     height: 34px;
 }
 
-.album_item{
-    display: flex;
-    flex-direction: row;
-    padding-top: 40px;
-    padding-bottom: 44px;
-    padding-left: 40px;
-    position: relative;
-    background-color: #fff;
-}
 
 .album_container{
     display: flex;

src/pages/account/Album.tsx

@@ -279,10 +279,10 @@ export default function Album() {
                         {
                             historyYear(index)
                         }
-                        <View className="history_item2" >
+                        <View className="history_item2" style={{paddingRight:rpxToPx(30)}}>
                             <View className="cell_date" >
                                 <View className="h42 bold" style={{ lineHeight: rpxToPx(60) + 'px' }}>{historyDate(item, index)}</View>
-                                <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(11), lineHeight: rpxToPx(49) + 'px' }}>{historyMonth(item, index)}</View>
+                                <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(13), lineHeight: rpxToPx(47) + 'px' }}>{historyMonth(item, index)}</View>
                             </View>
                             {/* <Text className="cell_date">{(item.date + '').substring(6, 9)}</Text> */}
                             <View style={{ display: 'flex', flex: 1 }}>
@@ -303,11 +303,12 @@ export default function Album() {
                                     }
                                 </View> */}
                             </View>
-                            <View className="border_footer_line" />
+                            {/* <View className="border_footer_line" /> */}
                         </View>
                     </View>
                 })
             }
+            <View style={{height:rpxToPx(40),flexShrink:0,backgroundColor:'#fff'}}/>
             <ListFooter noMore={(medias.length > 0) && (total == medias.length)} />
         </View>
     </StickyDateList>

src/pages/account/Journal.tsx

@@ -146,7 +146,7 @@ export default function Journal() {
                 }
             })
         })
-        return <View style={{ flex: 1, display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(12), overflow: 'hidden' }} key={index}>
+        return <View style={{ flex: 1, display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(12), overflow: 'hidden',flexShrink:0 }} key={index}>
             {
                 array.length > 0 && <JournalCover imgs={array} />
             }
@@ -155,7 +155,7 @@ export default function Journal() {
                 flexDirection: 'column',
                 flex: 1,
                 overflow: 'hidden',
-                backgroundColor: array.length == 0 ? '#f5f5f5' : 'transparent',
+                backgroundColor: array.length == 0 ? '#fafafa' : 'transparent',
                 padding: array.length == 0 ? rpxToPx(20) : 0,
                 marginRight: rpxToPx(40)
             }}>
@@ -210,48 +210,48 @@ export default function Journal() {
 
     function historyDate(item, index) {
         if (index == 0) {
-            if (global.language == 'zh' && TimeFormatter.isToday(item.publish.timestamp)) {
+            if (global.language == 'zh' && TimeFormatter.isToday(item.timestamp)) {
                 return '今天'
             }
-            if (global.language == 'zh' && TimeFormatter.isYesterday(item.publish.timestamp)) {
+            if (global.language == 'zh' && TimeFormatter.isYesterday(item.timestamp)) {
                 return '昨天'
             }
-            return dayjs(item.publish.timestamp).format('DD')
+            return dayjs(item.timestamp).format('DD')
         }
-        if (dayjs(item.publish.timestamp).format('MM-DD') ==
-            dayjs(journals[index - 1].publish.timestamp).format('MM-DD')) {
+        if (dayjs(item.timestamp).format('MM-DD') ==
+            dayjs(journals[index - 1].timestamp).format('MM-DD')) {
             return ''
         }
-        if (global.language == 'zh' && TimeFormatter.isToday(item.publish.timestamp)) {
+        if (global.language == 'zh' && TimeFormatter.isToday(item.timestamp)) {
             return '今天'
         }
-        if (global.language == 'zh' && TimeFormatter.isYesterday(item.publish.timestamp)) {
+        if (global.language == 'zh' && TimeFormatter.isYesterday(item.timestamp)) {
             return '昨天'
         }
-        return dayjs(item.publish.timestamp).format('DD')
+        return dayjs(item.timestamp).format('DD')
     }
 
     function historyMonth(item, index) {
         if (index == 0) {
-            if (global.language == 'zh' && TimeFormatter.isToday(item.publish.timestamp)) {
+            if (global.language == 'zh' && TimeFormatter.isToday(item.timestamp)) {
                 return ''
             }
-            if (global.language == 'zh' && TimeFormatter.isYesterday(item.publish.timestamp)) {
+            if (global.language == 'zh' && TimeFormatter.isYesterday(item.timestamp)) {
                 return ''
             }
-            return dayjs(item.publish.timestamp).format('MMM')
+            return dayjs(item.timestamp).format('MMM')
         }
-        if (dayjs(item.publish.timestamp).format('MM-DD') ==
-            dayjs(journals[index - 1].publish.timestamp).format('MM-DD')) {
+        if (dayjs(item.timestamp).format('MM-DD') ==
+            dayjs(journals[index - 1].timestamp).format('MM-DD')) {
             return ''
         }
-        if (global.language == 'zh' && TimeFormatter.isToday(item.publish.timestamp)) {
+        if (global.language == 'zh' && TimeFormatter.isToday(item.timestamp)) {
             return ''
         }
-        if (global.language == 'zh' && TimeFormatter.isYesterday(item.publish.timestamp)) {
+        if (global.language == 'zh' && TimeFormatter.isYesterday(item.timestamp)) {
             return ''
         }
-        return dayjs(item.publish.timestamp).format('MMM')
+        return dayjs(item.timestamp).format('MMM')
     }
 
     return <StickyDateList onRefresherRefresh={() => {
@@ -272,13 +272,13 @@ export default function Journal() {
                         {
                             historyYear(index)
                         }
-                        <View className="album_item" id={`history-${index}`} onClick={() => {
+                        <View className="history_item2" id={`history-${index}`} onClick={() => {
                             jumpPage('/pages/account/JournalDetail?detail=' + JSON.stringify(item))
                         }}>
 
                             <View className="cell_date" >
                                 <View className="h42 bold" style={{ lineHeight: rpxToPx(60) + 'px' }}>{historyDate(item, index)}</View>
-                                <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(11), lineHeight: rpxToPx(49) + 'px' }}>{historyMonth(item, index)}</View>
+                                <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(13), lineHeight: rpxToPx(47) + 'px' }}>{historyMonth(item, index)}</View>
                             </View>
                             <View style={{ display: 'flex', flexDirection: 'column', flex: 1, paddingTop: rpxToPx(4) }}>
                                 {
@@ -291,6 +291,7 @@ export default function Journal() {
                         </View></View>
                 })
             }
+            <View style={{ height: rpxToPx(40), flexShrink: 0, backgroundColor: '#fff' }} />
             <ListFooter noMore={(journals.length > 0) && (total == journals.length)} />
         </View></StickyDateList>
 }

src/pages/account/JournalDetail.scss

@@ -35,5 +35,5 @@
     flex-direction: row;
     flex-wrap: wrap;
     margin-top: 12px;
-    margin-bottom: 16px;
+    // margin-bottom: 16px;
 }

src/pages/account/JournalDetail.tsx

@@ -10,6 +10,10 @@ import { MainColorType } from "@/context/themes/color";
 import TimeTitleDesc from "@/_health/components/time_title_desc";
 import CoverList from "@/_health/components/cover_list";
 import ListFooter from "@/_health/components/list_footer";
+import { TimeFormatter } from "@/utils/time_format";
+import TargetProgress from "@/_health/components/target_progress";
+import { getThemeColor } from "@/features/health/hooks/health_hooks";
+import formatMilliseconds from "@/utils/format_time";
 
 let useRoute;
 let useNavigation;
@@ -58,10 +62,64 @@ export default function JournalDetail() {
 
         // 返回一个新数组
         const newArray = [...sortedArray];
+
+        const order = {
+            'FAST_START': 1,
+            'FAST_END': 2,
+            'SLEEP_BEDTIME': 3,
+            'SLEPP_WAKE_UP': 4
+        }
+
+        // 分离出需要排序的项和其他项
+        const otherItems = newArray.filter(item => !order[item.event]);
+        const fastStartItems = newArray.filter(item => order[item.event]);
+
+        // 排序 fastStartItems
+        fastStartItems.sort((a, b) => {
+            return (order[a.event] || 0) - (order[b.event] || 0);
+        });
+
+        // 合并其他项和排序后的 fastStartItems
+        const result = otherItems.concat(fastStartItems);
+
         setImgs(obj.imgs)
-        setEvents(newArray)
+        setEvents(result)
     }, [])
 
+    // function demo() {
+    //     const array = [
+    //         { id: 1, event: "START" },
+    //         { id: 2, event: "FAST_START1" },
+    //         { id: 3, event: "STOP" },
+    //         { id: 4, event: "FAST_START5" },
+    //         { id: 5, event: "FAST_START3" },
+    //         { id: 6, event: "FAST_START2" },
+    //         { id: 7, event: "PAUSE" }
+    //     ];
+
+    //     // 定义排序的顺序
+    //     const order = {
+    //         "FAST_START1": 1,
+    //         "FAST_START2": 2,
+    //         "FAST_START3": 3,
+    //         "FAST_START4": 4
+    //     };
+
+    //     // 分离出需要排序的项和其他项
+    //     const otherItems = array.filter(item => !order[item.event]);
+    //     const fastStartItems = array.filter(item => order[item.event]);
+
+    //     // 排序 fastStartItems
+    //     fastStartItems.sort((a, b) => {
+    //         return (order[a.event] || 0) - (order[b.event] || 0);
+    //     });
+
+    //     // 合并其他项和排序后的 fastStartItems
+    //     const result = otherItems.concat(fastStartItems);
+
+    //     console.log(result);
+    // }
+
 
     function preview(url) {
 
@@ -71,16 +129,57 @@ export default function JournalDetail() {
         })
     }
 
+    function dayTag(event, moment) {
+        if (event.event == 'FAST_END' || event.event == 'SLEEP_WAKE_UP') {
+            var data = events.filter(item => {
+                if (event.event == 'FAST_END') {
+                    return item.event == 'FAST_START'
+                }
+                if (event.event == 'SLEEP_WAKE_UP') {
+                    return item.event == 'SLEEP_BEDTIME'
+                }
+            })
+            var begin = data[0].time.timestamp
+
+            var end = moment ? moment.time.timestamp : event.time.timestamp
+            return TimeFormatter.dayTagText(begin, end)
+        }
+        return ''
+    }
+
     function eventList(detail, index) {
-        const list = detail.moments
-        return <View key={index}>
+        // const list = detail.moments
+        return <View key={index} style={{ marginBottom: rpxToPx(48) }}>
+            {
+                detail.show && <TimeTitleDesc
+                    timeObj={detail.time}
+                    time={dayjs(detail.time.timestamp).format('HH:mm')}
+                    title={detail.title}
+                    dayTag={dayTag(detail, null)}
+                    desc=''
+                />
+            }
             {
+                detail.moments && detail.moments.map((moment, j) => {
+                    return (moment.title || moment.description) && <View key={j * 10} style={{ flexDirection: 'column', display: 'flex' }}>
+                        <TimeTitleDesc
+                            showPoint={detail.show}
+                            timeObj={moment.time}
+                            time={dayjs(moment.time.timestamp).format('HH:mm')}
+                            title={moment.title}
+                            dayTag={dayTag(detail, moment)}
+                            desc={moment.description}
+                        />
+                    </View>
+                })
+            }
+
+            {/* {
                 (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}
                     />
                 </View>
             }
@@ -90,12 +189,7 @@ export default function JournalDetail() {
                         timeObj={detail.time}
                         time={dayjs(detail.time.timestamp).format('HH:mm')}
                         title={detail.title}
-                    // desc={item.description}
                     />
-
-                    {/* {
-                        item.media && item.media.length > 0 && <Image mode="aspectFill" src={item.media[0].url} style={{ width: 60, height: 60, marginTop: 5 }} />
-                    } */}
                 </View>
             }
             {
@@ -107,17 +201,15 @@ export default function JournalDetail() {
                             title={detail.title}
                             desc={item.description}
                         />
-
-                        {/* {
-                            item.media && item.media.length > 0 && <Image mode="aspectFill" src={item.media[0].url} style={{ width: 60, height: 60, marginTop: 5 }} />
-                        } */}
                     </View>
                 })
-            }
+            } */}
         </View>
     }
 
 
+
+
     return <View>
         <View className="journal_detail">
             <Image className="header_avatar" src={user.avatar} mode="aspectFill" />
@@ -167,6 +259,7 @@ export default function JournalDetail() {
                     }
                 </View>
 
+
                 <View className="img_container" style={{ marginTop: -rpxToPx(24) }}>
                     <CoverList
                         imgs={imgs}
@@ -181,7 +274,23 @@ export default function JournalDetail() {
                     } */}
                 </View>
 
-                <Text className="h24" style={{ color: MainColorType.g02 }}>发布于{dayjs(data.publish_timestamp).format('MM-DD HH:mm')}</Text>
+                {
+                    data.windows.map((item, index) => {
+                        return <TargetProgress key={index} showLine={index < data.windows.length - 1}
+                            color={getThemeColor(item.window)}
+                            showRing={true}
+                            desc={item.description}
+                            icon={
+                                null
+                            }
+                            canvasId={`${item.window}${item.window_range.start_timestamp}${index}`}
+                            startTimestamp={item.window_range.start_timestamp}
+                            endTimerstamp={item.window_range.end_timestamp}
+                        />
+                    })
+                }
+
+                <Text className="h24" style={{ color: MainColorType.g02,marginTop:rpxToPx(13) }}>发布于{dayjs(data.publish_timestamp).format('MM-DD HH:mm')}</Text>
             </View>
 
 

src/pages/clock/ClockNew.tsx

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

src/utils/time_format.ts

@@ -832,19 +832,32 @@ export class TimeFormatter {
     }
   }
 
-  static isToday = (timestamp:number) =>{
-    if (dayjs().format('YYYY-MM-DD')==dayjs(timestamp).format('YYYY-MM-DD')){
+  static isToday = (timestamp: number) => {
+    if (dayjs().format('YYYY-MM-DD') == dayjs(timestamp).format('YYYY-MM-DD')) {
       return true
     }
     return false
   }
 
-  static isYesterday = (timestamp:number)=>{
-    if (dayjs().format('YYYY-MM-DD')==dayjs(timestamp+24*3600*1000).format('YYYY-MM-DD')){
+  static isYesterday = (timestamp: number) => {
+    if (dayjs().format('YYYY-MM-DD') == dayjs(timestamp + 24 * 3600 * 1000).format('YYYY-MM-DD')) {
       return true
     }
     return false
   }
 
+  static dayTagText = (begin: number, end: number) => {
+    const date1 = dayjs(begin);
+    const date2 = dayjs(end);
+
+    // 获取日期部分（去掉时间）
+    const startDate = date1.startOf('day');
+    const endDate = date2.startOf('day');
+    const days = endDate.diff(startDate, 'day')
+    if (days > 0)
+      return '+' + days;
+    return ''
+  }
+
 }