update

src/_eat/components/add_label.tsx

@@ -39,11 +39,13 @@ export default function AddLabel(props: { labels: any }) {
     }
 
     function confirmPickerTime(e){
+        console.log(e)
         createSchedule({
             event:'EAT_CUSTOM',
             title:value,
             time:e
         }).then(res=>{
+            global.refreshWindow()
             if (process.env.TARO_ENV=='weapp'){
                 Taro.navigateBack()
             }

src/app.config.ts

@@ -41,10 +41,10 @@ const appConfig = defineAppConfig({
   //     ]
   //   }
   // ],
-  subPackages:[
+  subPackages: [
     {
-      root:'_eat',
-      pages:[
+      root: '_eat',
+      pages: [
         'pages/meal_list'
       ]
     }
@@ -56,6 +56,15 @@ const appConfig = defineAppConfig({
   "requiredPrivateInfos": [
     "chooseLocation"
   ],
+  // "componentFramework": "glass-easel",
+  // "lazyCodeLoading": "requiredComponents",
+  // "renderer": "skyline",
+  // "rendererOptions": {
+  //   "skyline": {
+  //     "disableABTest": true,
+  //     "defaultDisplayBlock": true
+  //   }
+  // },
   "permission": {
     "scope.userLocation": {
       "desc": "获取您选择的位置...."
@@ -92,7 +101,7 @@ const appConfig = defineAppConfig({
     "navigationBarBackgroundColor": "#ffffff",
     "navigationBarTitleText": "Weixin",
     "navigationBarTextStyle": "black",
-    "backgroundColor": "#ffffff"
+    "backgroundColor": "#f5f5f5"
   },
   // darkmode: true
 })

src/app.scss

@@ -2,12 +2,12 @@
 // @import '@/utils/common.scss';
 
 page {
-    background-color: #fff;
+    background-color: #f5f5f5;
 }
 
 @media (prefers-color-scheme:dark) {
     page {
-        background-color: #fff;
+        background-color: #f5f5f5;
     }
 }
 
@@ -378,4 +378,15 @@ page {
 //         -webkit-transform: scaleY(0.33);
 //         transform: scaleY(0.33);
 //     }
-// }
+// }
+
+.border_footer_line {
+    height: 2px;
+    transform: scaleY(0.5);
+    background-color: #B2B2B2;
+    opacity: 0.4;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}

src/context/themes/color.tsx

@@ -15,10 +15,18 @@ export enum ColorType {
 }
 
 export enum MainColorType {
-    day = '#FFDF00',
-    night = '#041A40',
-    fast = '#02B6FD',
-    eat = '#FE810C',
-    sleep = '#8961F5',
-    active = '#FF4983'
+    bg = '#f5f5f5',
+    ringBg = 'rgba(178,178,178,0.2)',
+    day = '#FFBB00',
+    dayLight = '#FFE499',
+    night = '#002266',
+    nightLight = '#99A7C2',
+    fast = '#26B7FF',
+    fastLight = '#A8E2FF',
+    eat = '#FF751A',
+    eatLight = '#FFC8A3',
+    sleep = '#AF75FF',
+    sleepLight = '#DFC8FF',
+    active = '#FF2E66',
+    activeLight = '#FFABC2',
 }

src/features/health/MainCard.scss

@@ -107,7 +107,7 @@
     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
 }
 
-.tabs{
+.tabs {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -121,4 +121,45 @@
     border-radius: 36px;
     align-items: center;
     justify-content: center;
+}
+
+.demo_scale {
+    // transform: scale(2)
+}
+
+.window_name {
+    margin-top: 16px;
+    color: #B2B2B2;
+    font-weight: bold;
+    font-size: 28px;
+    line-height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.window_name_sel {
+    font-size: 34px;
+    color: #000;
+    line-height: 42px;
+}
+
+.today{
+    margin-top: 24px;
+    font-weight: bold;
+    font-size: 48px;
+    color: #000;
+
+}
+
+.main_date{
+    margin-top: 12px;
+    margin-bottom: 60px;
+    color: #B2B2B2;
+    font-size: 30px;
+}
+
+.aaaa{
+    // transform-origin: center;
+    // transform: scale(0.4);
 }

src/features/health/MainConsole.scss

@@ -3,9 +3,10 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding-left: 40px;
     padding-right: 40px;
-    padding-bottom: 28px;
+    position: relative;
+    margin-left: 64px;
+    height: 128px;
 }
 
 .timeline_left{
@@ -15,18 +16,84 @@
 }
 
 .timeline_title{
-    font-size: 28px;
-    line-height: 34px;
+    font-size: 24px;
     color: #808080;
 
 }
 
 .timeline_time{
-    font-size: 48px;
-    line-height: 56px;
+    font-size: 34px;
     color: #4D4D4D;
 }
 
 .timeline_operate{
+    height: 72px;
+    border-radius: 20px;
+    font-size: 28px;
+    font-weight: bold;
+    padding-left: 40px;
+    padding-right: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.main-console-bg{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.main_arrow{
+    width: 228px;
+    height: 36px;
+}
+
+.main_summary{
+    display: flex;
+    width: 750px;
+    background-color: #fff;
+    height: 134px;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.main_summary_time{
+    font-size: 36px;
+    color: #000;
+    line-height: 44px;
+}
+
+.main_summary_duration{
+    margin-top: 6px;
+    color: #B2B2B2;
+    font-size: 24px;
+    line-height: 28px;
+}
+
+.main_summary_status{
+    display: flex;
+    position: absolute;
+    left: 64px;
+    top: 0;
+    bottom: 0;
+    flex-direction: row;
+    align-items: center;
+}
+
+.main_footer{
+    height: 108px;
+    width: 750px;
+    background-color: #fff;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+.main_footer_text{
+    color: #B2B2B2;
+    font-size: 24px;
+}
 
-}

src/features/health/MainConsole.tsx

@@ -1,8 +1,8 @@
 import { WindowType } from "@/utils/types";
-import { View, Text } from "@tarojs/components";
+import { View, Text, Image } from "@tarojs/components";
 import dayjs from "dayjs";
 import { useEffect, useRef, useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import './MainConsole.scss'
 import { jumpPage } from "../trackTimeDuration/hooks/Common";
 import Modal from "@/components/layout/Modal.weapp";
@@ -11,6 +11,9 @@ import ConsolePicker from "../trackTimeDuration/components/ConsolePicker";
 import { clockTimes, updateSchedule, updateTarget } from "@/services/health";
 import TimePicker from "../common/TimePicker";
 import showActionSheet from "@/components/basic/ActionSheet";
+import { rpxToPx } from "@/utils/tools";
+import { setMode } from "@/store/health";
+import { getCountownTime, getDuration, getScenario, getWindowStatus } from "./hooks/health_hooks";
 
 let useNavigation;
 let min = 0
@@ -30,6 +33,7 @@ export default function MainConsole(props: { type: WindowType }) {
     const [btnDisable, setBtnDisable] = useState(false)
     const [selItem, setSelItem] = useState<any>(null)
     const limitPickerRef = useRef(null)
+    const dispatch = useDispatch()
 
     let navigation, showActionSheetWithOptions;
     if (useNavigation) {
@@ -46,7 +50,7 @@ export default function MainConsole(props: { type: WindowType }) {
             return
         }
 
-        if (item.action == 'NA' || item.action == 'POST_MOMENT' ||'SLEEP_WAKE_UP' == item.action) {
+        if (item.action == 'NA' || item.action == 'POST_MOMENT' || 'SLEEP_WAKE_UP' == item.action) {
             return;
         }
         if (!user.isLogin) {
@@ -102,16 +106,45 @@ export default function MainConsole(props: { type: WindowType }) {
         return '记录'
     }
 
-    function timelineItem(item: any, index: number) {
+    function itemTitle(item: any) {
+        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
+            return item.title
+        }
+        return dayjs(item.target.timestamp).format('HH:mm')
+    }
+
+    function itemValue(item: any) {
+        let themeColor: any = getThemeColor()
+        const scenario = getScenario(health.windows,health.mode)
+        if (item.action == 'END' && !scenario.real) {
+            themeColor = '#B2B2B2'
+        }
+        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
+            return <Text className="timeline_time">{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+        }
+        if (item.action && item.action != 'NA')
+            return <View className="timeline_operate" style={{ color: themeColor, backgroundColor: themeColor + '1A' }} onClick={() => record(item)}>{operateTitle(item)}</View>
+        return <View />
+    }
+
+    function timelineItem(item: any, index: number, count: number) {
         return <View key={index} className="timeline_item" >
             <View className="timeline_left">
-                <Text className="timeline_title">{item.title}</Text>
-                <Text className="timeline_time" onClick={() => edit(item)}>{dayjs(item.target.timestamp).format('HH:mm')}</Text>
+                {
+                    health.mode != 'DAY' && health.mode != 'NIGHT' && <Text className="timeline_title">{item.title}</Text>
+                }
+                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                    <Text className="timeline_time" onClick={() => edit(item)}>{itemTitle(item)}</Text>
+                </View>
+
             </View>
             {
-                item.action && item.action != 'NA' && <View className="timeline_operate" onClick={() => record(item)}>{operateTitle(item)}</View>
+                itemValue(item)
             }
-
+            {/* {
+                item.action && item.action != 'NA' && 
+            } */}
+            <View className="border_footer_line" style={{ left: count - 1 == index ? -rpxToPx(64) : 0 }} />
         </View>
     }
 
@@ -157,7 +190,7 @@ export default function MainConsole(props: { type: WindowType }) {
     function confirmPickerTime(strTime) {
         if (selItem.event == 'FAST_END') {
             const obj = health.windows.fast_eat.fast.timeline[0]
-            if (obj.action=='POST_MOMENT' || obj.action == 'NA') {
+            if (obj.action == 'POST_MOMENT' || obj.action == 'NA') {
                 const format = dayjs(obj.target.timestamp).format(`YYYY-MM-DDT${strTime}:ss`)
                 var t = new Date(format).getTime()
                 if (t <= obj.target.timestamp) {
@@ -172,7 +205,7 @@ export default function MainConsole(props: { type: WindowType }) {
         }
         else if (selItem.event == 'SLEEP_WAKE_UP') {
             const obj = health.windows.sleep_active.sleep.timeline[0]
-            if (obj.action=='POST_MOMENT' || obj.action == 'NA') {
+            if (obj.action == 'POST_MOMENT' || obj.action == 'NA') {
                 const format = dayjs(obj.target.timestamp).format(`YYYY-MM-DDT${strTime}:ss`)
                 var t = new Date(format).getTime()
                 if (t <= obj.target.timestamp) {
@@ -293,67 +326,116 @@ export default function MainConsole(props: { type: WindowType }) {
         });
     }
 
+    function getThemeColor() {
+        switch (health.mode) {
+            case 'DAY':
+                return MainColorType.day;
+            case 'NIGHT':
+                return MainColorType.night;
+            case 'FAST':
+                return MainColorType.fast;
+            case 'EAT':
+                return MainColorType.eat;
+            case 'SLEEP':
+                return MainColorType.sleep;
+            case 'ACTIVE':
+                return MainColorType.active;
+        }
+    }
+
     function detail() {
         const { day, night } = health.windows.night_day
         const { fast, eat } = health.windows.fast_eat
         const { sleep, active } = health.windows.sleep_active
+        let list: any = []
         switch (health.mode) {
             case 'DAY':
-                return <View>
-                    {
-                        day.timeline.map((item, index) => {
-                            return timelineItem(item, index)
-                        })
-                    }
-                </View>
+                list = day.timeline
+                break;
             case 'NIGHT':
-                return <View>
-                    {
-                        night.timeline.map((item, index) => {
-                            return timelineItem(item, index)
-                        })
-                    }
-                </View>
+                list = night.timeline
+                break;
             case 'FAST':
-                return <View>
-                    {
-                        fast.timeline.map((item, index) => {
-                            return timelineItem(item, index)
-                        })
-                    }
-                </View>
+                list = fast.timeline
+                break;
             case 'EAT':
-                return <View>
-                    {
-                        eat.timeline.map((item, index) => {
-                            return timelineItem(item, index)
-                        })
-                    }
-                </View>
+                list = eat.timeline
+                break;
             case 'SLEEP':
-                return <View>
-                    {
-                        sleep.timeline.map((item, index) => {
-                            return timelineItem(item, index)
-                        })
-                    }
-                </View>
+                list = sleep.timeline
+                break;
             case 'ACTIVE':
-                return <View>
-                    {
-                        active.timeline && active.timeline.map((item, index) => {
-                            return timelineItem(item, index)
-                        })
-                    }
-                </View>
+                list = active.timeline
+                break;
         }
 
-        return <View />
+        return <View>
+            {
+                list.map((item, index) => {
+                    return timelineItem(item, index, list.length)
+                })
+            }
+        </View>
     }
-    return <View>
-        {
-            detail()
+
+    function switchText() {
+        switch (health.mode) {
+            case 'FAST':
+                return 'Switch to Eat'
+            case 'EAT':
+                return 'Switch to Fast'
+            case 'DAY':
+                return 'Switch to Night'
+            case 'NIGHT':
+                return 'Switch to Daylight'
+            case 'SLEEP':
+                return 'Switch to Activity'
+            case 'ACTIVE':
+                return 'Switch to Sleep'
+
         }
+        return ''
+    }
+
+    function tapSwitchBtn() {
+        switch (health.mode) {
+            case 'FAST':
+                dispatch(setMode('EAT'));
+                break
+            case 'EAT':
+                dispatch(setMode('FAST'));
+                break
+            case 'DAY':
+                dispatch(setMode('NIGHT'));
+                break
+            case 'NIGHT':
+                dispatch(setMode('DAY'));
+                break
+            case 'SLEEP':
+                dispatch(setMode('ACTIVE'));
+                break
+            case 'ACTIVE':
+                dispatch(setMode('SLEEP'));
+                break
+
+        }
+    }
+    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() }}>{getWindowStatus(health.windows, health.mode)}</View>
+            <Text className="main_summary_time">{getCountownTime(health.windows, health.mode)}</Text>
+            <Text className="main_summary_duration">Total {getDuration(health.windows, health.mode)}</Text>
+            <View className="border_footer_line" />
+        </View>
+        <View style={{ backgroundColor: '#fff', width: rpxToPx(750) }}>
+            {
+                detail()
+            }
+        </View>
+        <View className="main_footer">
+            <Text className="main_footer_text" onClick={tapSwitchBtn}>{switchText()}</Text>
+        </View>
         {
             (health.mode == 'EAT' || health.mode == 'ACTIVE') && <Text style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={more}>更多</Text>
         }

src/features/health/MainDayNightCard.tsx

@@ -16,7 +16,7 @@ import { durationArc, isCurrentTimeInRange, startArc } from "./util";
 import { setMode } from "@/store/health";
 import { IconSwitch1, IconSwitch2 } from "@/components/basic/Icons";
 
-export default function MainDayNightCard(props: { count: number, typeChanged: Function,id:number }) {
+export default function MainDayNightCard(props: { count: number, typeChanged: Function, id: number, onClick: Function }) {
     const [isDay, setIsDay] = useState(true)
     const [isDayMode, setIsDayMode] = useState(true)
     const user = useSelector((state: any) => state.user);
@@ -41,6 +41,15 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
         }
     }, [health.selTab, isDayMode])
 
+    useEffect(() => {
+        if (health.mode == 'DAY') {
+            setIsDayMode(true)
+        }
+        else if (health.mode == 'NIGHT') {
+            setIsDayMode(false)
+        }
+    }, [health.mode])
+
     useEffect(() => {
         dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
         require('moment/locale/en-gb')
@@ -55,14 +64,14 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
 
     const common: RingCommon = {
         useCase: 'ChooseScenario',
-        radius: 50,
-        lineWidth: 15,
+        radius: 37,
+        lineWidth: 14,
         isFast: true,
         status: 'WAIT_FOR_START'
     }
 
     const bgRing: BgRing = {
-        color: '#EAE9E9'
+        color: MainColorType.ringBg
     }
 
     function getTargetArc() {
@@ -73,6 +82,20 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
         return durationArc(night.target.start_timestamp, night.target.end_timestamp)
     }
 
+    function getStartRealArc() {
+        const { day, night } = health.windows.night_day
+        const timestamp = new Date().getTime()
+        if (isDayMode) {
+            if (timestamp >= day.target.start_timestamp && timestamp <= day.target.end_timestamp)
+                return startArc(day.target.start_timestamp)
+        }
+        else {
+            if (timestamp >= night.target.start_timestamp && timestamp <= night.target.end_timestamp)
+                return startArc(night.target.start_timestamp)
+        }
+        return startArc(timestamp)
+    }
+
     function getRealArc() {
         const { day, night } = health.windows.night_day
         if (isDayMode) {
@@ -99,22 +122,16 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
             offset = hour * 60 + minute - new Date().getHours() * 60 - new Date().getMinutes()
         }
 
-        const currentDot: CurrentDot = {
-            color: isDayMode ? MainColorType.day : MainColorType.night,
-            lineWidth: 10,
-            borderColor: '#fff',
-            offset: offset,
-            whiteIcon: true
-        }
+        // const currentDot: CurrentDot = {
+        //     color: isDayMode ? MainColorType.day : MainColorType.night,
+        //     lineWidth: 10,
+        //     borderColor: '#fff',
+        //     offset: offset,
+        //     whiteIcon: true
+        // }
 
-        var targetColor: string = isDayMode ? '#FFF9CC' : '#CDD1D9'
-        var realColor: string = ''
-        if (isDayMode) {
-            realColor = isDay ? MainColorType.day : '#00000000'
-        }
-        else {
-            realColor = isDay ? '#00000000' : MainColorType.night
-        }
+        var targetColor: string = isDayMode ? MainColorType.dayLight : MainColorType.nightLight
+        var realColor: string = isDayMode ? MainColorType.day : MainColorType.night
 
         const targetRing: TargetRing = {
             color: targetColor,
@@ -124,11 +141,11 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
 
         const realRing: RealRing = {
             color: realColor,
-            startArc: getArc(),//-Math.PI / 2,
+            startArc: getStartRealArc(),//-Math.PI / 2,
             durationArc: getRealArc()
         }
 
-        return <Rings common={common} bgRing={bgRing} targetRing={targetRing} realRing={realRing} currentDot={currentDot} canvasId={'smal1w1l'+props.id} />
+        return <Rings common={common} bgRing={bgRing} targetRing={targetRing} realRing={realRing} canvasId={'smal1w1l' + props.id} />
     }
 
     function formatTime(format: string, timestamp?: number) {
@@ -198,21 +215,22 @@ export default function MainDayNightCard(props: { count: number, typeChanged: Fu
         </View>
     }
 
-    return <View style={{ width: rpxToPx(750/3), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
+    return <View onClick={() => props.onClick()} style={{ width: rpxToPx(750 / 3), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
         {/* <Calendar year={2024} month={8}/> */}
         <View style={{ position: 'relative' }}>
             {
                 ring()
             }
-            <View className="ring_center">
+            <View className={health.selTab == 0 ? 'window_name window_name_sel' : 'window_name'}>{isDayMode ? 'Day' : 'Night'}</View>
+            {/* <View className="ring_center">
                 <View>{isDayMode ? 'Daylight' : 'Night'}</View>
                 <View>{timeStatus()}</View>
                 <Text className="time1" style={{ color: '#000' }}>{formatTime('HH:mm:ss')}</Text>
                 <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
-            </View>
+            </View> */}
         </View>
 
-        {switchBtn()}
+        {/* {switchBtn()} */}
         {/* <Text onClick={switchMode}>Switch</Text> */}
         {/* <View className="sticky"></View> */}
         {/* <View style={{ height: 200 }} /> */}

src/features/health/MainFastEatCard.tsx

@@ -39,7 +39,7 @@ if (process.env.TARO_ENV == 'rn') {
     checkNotification = require('@/utils/native_permission_check').checkNotification;
     useActionSheet = require('@expo/react-native-action-sheet').useActionSheet
 }
-export default function MainFastEatCard(props: { count: any, typeChanged: Function,id:number }) {
+export default function MainFastEatCard(props: { count: any, typeChanged: Function,id:number,onClick:Function }) {
     const [isFastMode, setIsFastMode] = useState(true)
 
     const [showModal, setShowModal] = useState(false)
@@ -67,6 +67,15 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         showActionSheetWithOptions = useActionSheet()
     }
 
+    useEffect(()=>{
+        if (health.mode == 'FAST'){
+            setIsFastMode(true)
+        }
+        else if (health.mode == 'EAT'){
+            setIsFastMode(false)
+        }
+    },[health.mode])
+
     useEffect(() => {
         const { fast, eat } = health.windows.fast_eat
         var now = new Date().getTime()
@@ -112,14 +121,14 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
 
     const common: RingCommon = {
         useCase: 'ChooseScenario',
-        radius: 50,
-        lineWidth: 15,
+        radius: 37,
+        lineWidth: 14,
         isFast: true,
         status: 'WAIT_FOR_START'
     }
 
     const bgRing: BgRing = {
-        color: '#EAE9E9'
+        color: MainColorType.ringBg
     }
 
     function scheduleRing() {
@@ -129,7 +138,7 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
         var ends: any = fast.period.end_time.split(':')
         const startSeconds: any = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
         const endSeconds: any = parseInt(ends[0] + '') * 60 + parseInt(ends[1] + '')
-        const color = isFastMode ? '#9AE2FE' : '#FE810C66'
+        const color = isFastMode ? MainColorType.fastLight : MainColorType.eatLight
         const startArc = isFastMode ? startSeconds / 1440 * 2 * Math.PI - Math.PI / 2 : endSeconds / 1440 * 2 * Math.PI - Math.PI / 2
 
         const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
@@ -294,15 +303,15 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
             offset = hour * 60 + minute - new Date().getHours() * 60 - new Date().getMinutes()
         }
 
-        const currentDot: CurrentDot = {
-            color: isFastMode ? MainColorType.fast : MainColorType.eat,
-            lineWidth: 10,
-            borderColor: '#fff',
-            offset: offset,
-            whiteIcon: true
-        }
+        // const currentDot: CurrentDot = {
+        //     color: isFastMode ? MainColorType.fast : MainColorType.eat,
+        //     lineWidth: 10,
+        //     borderColor: '#fff',
+        //     offset: offset,
+        //     whiteIcon: true
+        // }
 
-        return <Rings common={common} bgRing={bgRing} scheduleRing={scheduleRing()} targetRing={targetRing()} realRing={realRing()} currentDot={currentDot} canvasId={'smal11l'+props.id} />
+        return <Rings common={common} bgRing={bgRing} scheduleRing={scheduleRing()} targetRing={targetRing()} realRing={realRing()} canvasId={'smal11l'+props.id} />
     }
 
     function formatTime(format: string, timestamp?: number) {
@@ -632,22 +641,23 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
     if (!fastData)
         return <View />
 
-    return <View style={{ alignItems: 'center', display: 'flex', flexDirection: 'column', width: rpxToPx(750/3), flexShrink: 0 }}>
+    return <View style={{ alignItems: 'center', display: 'flex', flexDirection: 'column', width: rpxToPx(750/3), flexShrink: 0 }} onClick={()=>props.onClick()}>
 
         <View style={{ width: rpxToPx(750/3), }} />
         <View style={{ position: 'relative', }}>
             {
                 ring()
             }
-            <View className="ring_center">
+            <View className={health.selTab==1?'window_name window_name_sel':'window_name'}>{isFastMode ? 'Fast' : 'Eat'}</View>
+            {/* <View className="ring_center">
                 {
                     isFastMode && <Text>{getFastStatus()}</Text>
                 }
                 <Text className="time1">{isFastMode ? getFastTime() : getEatTime()}</Text>
                 <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
-            </View>
+            </View> */}
         </View>
-        <View>{isFastMode ? formatMilliseconds(health.windows.fast_eat.fast.target.duration) : formatMilliseconds(health.windows.fast_eat.eat.target.duration)}</View>
+        {/* <View>{isFastMode ? formatMilliseconds(health.windows.fast_eat.fast.target.duration) : formatMilliseconds(health.windows.fast_eat.eat.target.duration)}</View> */}
         {/* {
             isFastMode && <View>
                 <View className="log_row">
@@ -709,9 +719,9 @@ export default function MainFastEatCard(props: { count: any, typeChanged: Functi
 
 
 
-        {
+        {/* {
             switchBtn()
-        }
+        } */}
         {/* {
             !isFastMode && <Text onClick={more}>更多</Text>
         } */}

src/features/health/MainSleepActiveCard.tsx

@@ -13,7 +13,7 @@ import { durationArc, isCurrentTimeInRange, startArc } from "./util";
 import { setMode } from "@/store/health";
 import { IconSwitch1, IconSwitch2 } from "@/components/basic/Icons";
 
-export default function MainSleepActiveCard(props: { count: any, typeChanged: Function,id:number }) {
+export default function MainSleepActiveCard(props: { count: any, typeChanged: Function, id: number, onClick: Function }) {
     const [isSleepMode, setIsSleepMode] = useState(true)
 
     const startScheduleTime = '19:00'
@@ -23,6 +23,16 @@ export default function MainSleepActiveCard(props: { count: any, typeChanged: Fu
     const health = useSelector((state: any) => state.health);
     const dispatch = useDispatch()
 
+
+    useEffect(()=>{
+        if (health.mode == 'SLEEP'){
+            setIsSleepMode(true)
+        }
+        else if (health.mode == 'ACTIVE'){
+            setIsSleepMode(false)
+        }
+    },[health.mode])
+
     useEffect(() => {
         const { sleep } = health.windows.sleep_active
         if (isCurrentTimeInRange(sleep.period.start_time, sleep.period.end_time)) {
@@ -56,14 +66,14 @@ export default function MainSleepActiveCard(props: { count: any, typeChanged: Fu
 
     const common: RingCommon = {
         useCase: 'ChooseScenario',
-        radius: 50,
-        lineWidth: 15,
+        radius: 37,
+        lineWidth: 14,
         isFast: true,
         status: 'WAIT_FOR_START'
     }
 
     const bgRing: BgRing = {
-        color: '#EAE9E9'
+        color: MainColorType.ringBg
     }
 
     function getArc() {
@@ -170,15 +180,15 @@ export default function MainSleepActiveCard(props: { count: any, typeChanged: Fu
             offset = hour * 60 + minute - new Date().getHours() * 60 - new Date().getMinutes()
         }
 
-        const currentDot: CurrentDot = {
-            color: isSleepMode ? MainColorType.sleep : MainColorType.active,
-            lineWidth: 10,
-            borderColor: '#fff',
-            offset: offset,
-            whiteIcon: true
-        }
+        // const currentDot: CurrentDot = {
+        //     color: isSleepMode ? MainColorType.sleep : MainColorType.active,
+        //     lineWidth: 10,
+        //     borderColor: '#fff',
+        //     offset: offset,
+        //     whiteIcon: true
+        // }
 
-        return <Rings common={common} bgRing={bgRing} targetRing={targetRing()} realRing={realRing()} currentDot={currentDot} canvasId={'smal11lee'+props.id} />
+        return <Rings common={common} bgRing={bgRing} targetRing={targetRing()} realRing={realRing()} canvasId={'smal11lee' + props.id} />
     }
 
     function switchIcon() {
@@ -222,19 +232,22 @@ export default function MainSleepActiveCard(props: { count: any, typeChanged: Fu
         </View>
     }
 
-    return <View style={{ width: rpxToPx(750/3), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }}>
-        <View style={{ position: 'relative', }}>
-            {
-                ring()
-            }
-            <View className="ring_center">
+    return <View style={{ width: rpxToPx(750 / 3), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }} onClick={() => props.onClick()}>
+        <View style={{ position: 'relative', alignItems: 'center', display: 'flex', flexDirection: 'column' }}>
+            <View className="demo_scale">
+                {
+                    ring()
+                }
+            </View>
+            <View className={health.selTab == 2 ? 'window_name window_name_sel' : 'window_name'}>{isSleepMode ? 'Sleep' : 'Activity'}</View>
+            {/* <View className="ring_center">
                 <Text className="time1">{formatTime('HH:mm:ss')}</Text>
                 <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
-            </View>
+            </View> */}
         </View>
 
-        {
+        {/* {
             switchBtn()
-        }
+        } */}
     </View>
 }

src/features/health/MainSwiper.tsx

@@ -1,4 +1,4 @@
-import { View, Swiper, SwiperItem } from "@tarojs/components";
+import { View, Swiper, SwiperItem, Text } from "@tarojs/components";
 import './MainCard.scss';
 import MainDayNightCard from "./MainDayNightCard";
 import MainFastEatCard from "./MainFastEatCard";
@@ -9,6 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { setTab } from "@/store/health";
 import { MainColorType } from "@/context/themes/color";
 import { rpxToPx } from "@/utils/tools";
+import dayjs from "dayjs";
 
 export default function MainSwiper(props: { count: number, pageChanged: Function, typeChanged: Function }) {
     const [current, setCurrent] = useState(0)
@@ -38,7 +39,7 @@ export default function MainSwiper(props: { count: number, pageChanged: Function
         }
 
         props.typeChanged(strType)
-        dispatch(setTab(page))
+        dispatch(setTab(page % 3))
     }
 
     function typeChanged(e) {
@@ -46,52 +47,58 @@ export default function MainSwiper(props: { count: number, pageChanged: Function
         props.typeChanged(e)
     }
 
-    function isDay() {
-        return health.mode == 'DAY'
-    }
-
-    function isFast() {
-        return health.mode == 'FAST'
-    }
-
-    function isSleep() {
-        return health.mode == 'SLEEP'
-    }
-
-    return <View>
-        <View className="tabs">
+    return <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center' }}>
+        <Text className="today">Today</Text>
+        <Text className="main_date">{global.language == 'en' ? dayjs().format('dddd, MMM D') : dayjs().format('MMMD日, dddd')}</Text>
+        {/* <View className="tabs">
             <View className="tab_item" style={{ backgroundColor: current != 0 ? '#B2B2B2' : isDay() ? MainColorType.day : MainColorType.night }} onClick={() => tapScroll(0)}></View>
             <View style={{ width: rpxToPx(40) }} />
             <View className="tab_item" style={{ backgroundColor: current != 1 ? '#B2B2B2' : isFast() ? MainColorType.fast : MainColorType.eat }} onClick={() => tapScroll(1)}></View>
             <View style={{ width: rpxToPx(40) }} />
             <View className="tab_item" style={{ backgroundColor: current != 2 ? '#B2B2B2' : isSleep() ? MainColorType.sleep : MainColorType.active }} onClick={() => tapScroll(2)}></View>
-        </View>
-        <Swiper style={{ height: 200, width: rpxToPx(750) }} circular
+        </View> */}
+        <Swiper
+
+            style={{ height: 140, width: rpxToPx(750) }} circular
             previousMargin={rpxToPx(250)}
             nextMargin={rpxToPx(250)}
             onChange={pageChanged}
             current={current}>
             <SwiperItem>
-                <MainDayNightCard count={props.count} typeChanged={typeChanged} id={1}/>
+                <View className="aaaa">
+                <MainDayNightCard count={props.count} typeChanged={typeChanged} id={1} onClick={() => {
+                    setCurrent(0)
+                }} />
+                </View>
             </SwiperItem>
             <SwiperItem>
-                <MainFastEatCard count={props.count} typeChanged={typeChanged} id={2}/>
+                <MainFastEatCard count={props.count} typeChanged={typeChanged} id={2} onClick={() => {
+                    setCurrent(1)
+                }} />
             </SwiperItem>
             <SwiperItem>
-                <MainSleepActiveCard count={props.count} typeChanged={typeChanged} id={3}/>
+                <MainSleepActiveCard count={props.count} typeChanged={typeChanged} id={3} onClick={() => {
+                    setCurrent(2)
+                }} />
             </SwiperItem>
             <SwiperItem>
-                <MainDayNightCard count={props.count} typeChanged={typeChanged} id={7}/>
+                <MainDayNightCard count={props.count} typeChanged={typeChanged} id={7} onClick={() => {
+                    setCurrent(3)
+                }} />
             </SwiperItem>
             <SwiperItem>
-                <MainFastEatCard count={props.count} typeChanged={typeChanged} id={8}/>
+                <MainFastEatCard count={props.count} typeChanged={typeChanged} id={8} onClick={() => {
+                    setCurrent(4)
+                }} />
             </SwiperItem>
             <SwiperItem>
-                <MainSleepActiveCard count={props.count} typeChanged={typeChanged} id={9}/>
+                <MainSleepActiveCard count={props.count} typeChanged={typeChanged} id={9} onClick={() => {
+                    setCurrent(5)
+                }} />
             </SwiperItem>
         </Swiper>
 
-        <View style={{flexDirection:'row',display:'flex'}}>
+        {/* <View style={{flexDirection:'row',display:'flex'}}>
             <View style={{backgroundColor:current==0?'#f0f0f0':'#fff'}} onClick={()=>setCurrent(0)}>
                 <MainDayNightCard count={props.count} typeChanged={typeChanged} id={4}/>
             </View>
@@ -101,6 +108,6 @@ export default function MainSwiper(props: { count: number, pageChanged: Function
             <View style={{backgroundColor:current==2?'#f0f0f0':'#fff'}} onClick={()=>setCurrent(2)}>
                 <MainSleepActiveCard count={props.count} typeChanged={typeChanged} id={6}/>
             </View>
-        </View>
+        </View> */}
     </View>
 }

src/features/health/hooks/health_hooks.tsx

@@ -0,0 +1,59 @@
+import { TimeFormatter } from "@/utils/time_format"
+
+export function getScenario(windows: any, mode: string) {
+    switch (mode) {
+        case 'FAST':
+            return windows.fast_eat.fast
+
+        case 'EAT':
+            return windows.fast_eat.eat
+
+        case 'DAY':
+            return windows.night_day.day
+
+        case 'NIGHT':
+            return windows.night_day.night
+
+        case 'SLEEP':
+            return windows.sleep_active.sleep
+
+        case 'ACTIVE':
+            return windows.sleep_active.active
+
+    }
+}
+
+export function getWindowStatus(windows: any, mode: any) {
+    const scenario = getScenario(windows, mode)
+    if (scenario.real) {
+        return 'In progress'
+    }
+    const now = new Date().getTime()
+    if (now>=scenario.target.start_timestamp&& now<=scenario.target.end_timestamp){
+        return 'Now open'
+    }
+    return 'Upcoming'
+
+    //否则按时间段来处理
+}
+
+export function getDuration(windows: any, mode: string) {
+    const scenario = getScenario(windows, mode)
+    const { duration } = scenario.target
+    return TimeFormatter.durationFormate(0, duration, false)
+}
+
+export function getCountownTime(windows: any, mode: any) {
+    const status = getWindowStatus(windows,mode)
+    const scenario = getScenario(windows, mode)
+    const now = new Date().getTime()
+    switch (status){
+        case 'In progress':
+            return TimeFormatter.countdown(scenario.real.start_timestamp,now)
+        case 'Now open':
+            return TimeFormatter.countdown(scenario.target.start_timestamp,now)
+        case 'Upcoming':
+            return TimeFormatter.countdown(now,scenario.target.start_timestamp)
+    }
+    return ''
+}

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

@@ -1,3 +1,4 @@
+import { MainColorType } from "@/context/themes/color";
 import { Canvas } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { useDidShow, useReady } from "@tarojs/taro";
@@ -198,6 +199,15 @@ export default function Rings(props: {
 
         // 绘制schedule进度环
         if (props.scheduleRing){
+            ctx.beginPath();
+            ctx.arc(center, center, radius, props.scheduleRing!.startArc,
+                props.scheduleRing!.startArc + props.scheduleRing!.durationArc);
+            ctx.lineWidth = lineWidth+4;
+            ctx.strokeStyle = MainColorType.bg;
+            ctx.lineCap = 'round'; // 设置为圆角
+            ctx.stroke();
+
+
             ctx.beginPath();
             ctx.arc(center, center, radius, props.scheduleRing!.startArc,
                 props.scheduleRing!.startArc + props.scheduleRing!.durationArc);
@@ -209,6 +219,14 @@ export default function Rings(props: {
 
         // 绘制target进度环
         if (props.targetRing) {
+            ctx.beginPath();
+            ctx.arc(center, center, props.targetRing!.radius?props.targetRing!.radius:radius, props.targetRing!.startArc,
+                props.targetRing!.startArc + props.targetRing!.durationArc);
+            ctx.lineWidth = props.targetRing!.lineWidth?props.targetRing!.lineWidth+4:lineWidth+4;
+            ctx.strokeStyle = MainColorType.bg;
+            ctx.lineCap = 'round'; // 设置为圆角
+            ctx.stroke();
+            
             ctx.beginPath();
             ctx.arc(center, center, props.targetRing!.radius?props.targetRing!.radius:radius, props.targetRing!.startArc,
                 props.targetRing!.startArc + props.targetRing!.durationArc);
@@ -221,6 +239,14 @@ export default function Rings(props: {
         //绘制real进度环
         if (props.realRing) {
             if (props.realRing.durationArc <0.01) props.realRing.durationArc=0.01;
+            ctx.beginPath();
+            ctx.arc(center, center, props.realRing!.radius?props.realRing!.radius:radius, props.realRing!.startArc,
+                props.realRing!.startArc + props.realRing!.durationArc);
+            ctx.lineWidth = props.realRing!.lineWidth?props.realRing!.lineWidth+4:lineWidth+4;
+            ctx.strokeStyle = MainColorType.bg;
+            ctx.lineCap = 'round'; // 设置为圆角
+            ctx.stroke();
+
             ctx.beginPath();
             ctx.arc(center, center, props.realRing!.radius?props.realRing!.radius:radius, props.realRing!.startArc,
                 props.realRing!.startArc + props.realRing!.durationArc);

src/pages/clock/Clock.config.ts

@@ -1,3 +1,5 @@
 export default definePageConfig({
+    // "renderer":"skyline",
+    
     "navigationStyle":"custom"
 })

src/pages/clock/Clock.tsx

@@ -6,6 +6,7 @@ import Taro, { useShareAppMessage } from "@tarojs/taro";
 import { useDispatch } from "react-redux";
 import { getInfoSuccess } from "@/store/user";
 import { useTranslation } from "react-i18next";
+import { MainColorType } from "@/context/themes/color";
 
 let useNavigation;
 
@@ -89,7 +90,7 @@ export default function Clock() {
         return <View />
     
     return <View style={{flex:1}}>
-        <View style={{height:100,backgroundColor:'pink',zIndex:1000}}/>
+        <View style={{height:100,backgroundColor:MainColorType.bg,zIndex:1000}}/>
         <ClockNew />
     </View>
 }

src/pages/clock/ClockNew.tsx

@@ -17,6 +17,7 @@ import dayjs from "dayjs";
 import Modal from "@/components/layout/Modal.weapp";
 import Streak from "@/features/health/Streak";
 import Calendar from "@/features/health/calendar";
+import { MainColorType } from "@/context/themes/color";
 
 export default function ClockNew() {
     const [count, setCount] = useState(0)
@@ -97,7 +98,7 @@ export default function ClockNew() {
     //https://blog.csdn.net/weixin_43525284/article/details/130182218
     return <View style={{ flex: 1 }}>
         {
-            process.env.TARO_ENV == 'weapp' ? detail() : <ScrollView style={{ flex: 1 }}>
+            process.env.TARO_ENV == 'weapp' ? detail() : <ScrollView style={{ flex: 1,backgroundColor:MainColorType.bg }}>
                 {
                     detail()
                 }

src/utils/common.scss

@@ -21,6 +21,8 @@ $boxPadding: 40px;
 
 $historyItemMarginBottom: 16px;
 
+$ringBgColor:rgba(178,178,178,0.2);
+
 
 /* #ifdef weapp */
 .fast_sleep_text {