update

ios/AppDelegate.mm

@@ -250,7 +250,7 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
   //  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#if DEBUGaaa
+#if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

src/features/trackTimeDuration/components/MainCard.scss

@@ -0,0 +1,11 @@
+.ring_center{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+}

src/features/trackTimeDuration/components/MainDayNightCard.tsx

@@ -1,12 +1,143 @@
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import './MainCard.scss'
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { rpxToPx } from "@/utils/tools";
+import Rings, { RingCommon, BgRing, TargetRing, CurrentDot, RealRing } from "@/features/trackTimeDuration/components/Rings";
+import dayjs from "dayjs";
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import momentT from 'moment';
+import moment from 'moment-timezone'
+import { MainColorType } from "@/context/themes/color";
 
-export default function MainDayNightCard(){
-    const [isDay,setIsDay] = useState(true)
+export default function MainDayNightCard(props: { count: number }) {
+    const [isDay, setIsDay] = useState(true)
+    const [isDayMode, setIsDayMode] = useState(true)
 
-    return <View style={{width:rpxToPx(750),display:'flex',flexShrink:0}}>
+    useEffect(() => {
+        dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
+        require('moment/locale/en-gb')
+        require('moment/locale/zh-cn')
+
+        momentT.locale(global.language == 'en' ? 'en-gb' : 'zh-cn')
+        moment.defineLocale(global.language == 'en' ? 'en-gb' : 'zh-cn', (momentT.localeData() as any)._config)
+        moment.locale(global.language == 'en' ? 'en-gb' : 'zh-cn')
+
+
+        const dt = new Date()
+        if (dt.getHours() >= 18 || dt.getHours() < 6) {
+            setIsDay(false)
+        }
+        else {
+            setIsDay(true)
+        }
+
+    }, [props.count])
+
+    const common: RingCommon = {
+        useCase: 'ChooseScenario',
+        radius: 115,
+        lineWidth: 26,
+        isFast: true,
+        status: 'WAIT_FOR_START'
+    }
+
+    const bgRing: BgRing = {
+        color: '#EAE9E9'
+    }
+
+    function getTargetArc() {
+        return Math.PI
+    }
+
+    function getArc() {
+        var hour = new Date().getHours()
+        var minute = new Date().getMinutes()
+        var second = new Date().getSeconds()
+        return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - 1 / 2 * Math.PI
+    }
+
+    function ring() {
+        var offset = 0
+
+        var hour = new Date().getHours()
+        var minute = new Date().getMinutes()
+
+        if (hour != new Date().getHours() || minute != new Date().getMinutes()) {
+            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
+        }
+
+        var targetColor: string = isDayMode ? '#FFF9CC' : '#CDD1D9'
+        var realColor: string = ''
+        if (isDayMode) {
+            realColor = isDay ? MainColorType.day : '#00000000'
+        }
+        else {
+            realColor = isDay ? '#00000000' : MainColorType.night
+        }
+
+        const targetRing: TargetRing = {
+            color: targetColor,
+            startArc: isDayMode ? 0 : Math.PI,//-Math.PI / 2,
+            durationArc: getTargetArc()
+        }
+
+        const realRing: RealRing = {
+            color: realColor,
+            startArc: isDayMode ? 0 : Math.PI,//-Math.PI / 2,
+            durationArc: isDayMode ? getArc() : getArc() - Math.PI
+        }
+
+        return <Rings common={common} bgRing={bgRing} targetRing={targetRing} realRing={realRing} currentDot={currentDot} canvasId={'smal1w1l'} />
+    }
+
+    function formatTime(format: string, timestamp?: number) {
+        // var moment = require('moment-timezone');
+        // if (current) {
+        //     if (timestamp) {
+        //         return moment(timestamp).tz(current.time.timezone.id).format(format)
+        //     }
+        //     return moment().tz(current.time.timezone.id).format(format)
+        // }
+
+        return dayjs().format(format)
+    }
+
+    function switchMode() {
+        setIsDayMode(!isDayMode)
+    }
+
+    function timeStatus(){
+        if (isDay && isDayMode){
+            return 'In Progress'
+        }
+        else if (!isDay && !isDayMode){
+            return 'In Progress'
+        }
+        return 'Coming up'
+    }
+
+    return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }}>
         <View>Page Day Night</View>
+        <View style={{ position: 'relative' }}>
+            {
+                ring()
+            }
+            <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>
+        <Text onClick={switchMode}>Switch</Text>
     </View>
 }

src/features/trackTimeDuration/components/MainFastEatCard.tsx

@@ -1,19 +1,177 @@
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import './MainCard.scss'
 import { useState } from "react";
 import Modal from "@/components/layout/Modal.weapp";
 import { rpxToPx } from "@/utils/tools";
+import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
+import dayjs from "dayjs";
+import moment from 'moment-timezone'
+import { MainColorType } from "@/context/themes/color";
 
-export default function MainFastEatCard(props:{count:any}) {
+export default function MainFastEatCard(props: { count: any }) {
     const [isFast, setIsFast] = useState(true)
-    const [showModal,setShowModal] = useState(false)
-    return <View>
-        
-        <View style={{height:200,backgroundColor:'blue',width:rpxToPx(750)}}/>
-        <View onClick={()=>{setShowModal(true)}}>Fast Eat Night{props.count}</View>
+    const [isFastMode, setIsFastMode] = useState(true)
+
+    const [showModal, setShowModal] = useState(false)
+
+    const startScheduleTime = '22:00'
+    const endScheduleTime = '10:00'
+    const startTime = '17:15'
+    const endTime = '18:00'
+
+    const common: RingCommon = {
+        useCase: 'ChooseScenario',
+        radius: 115,
+        lineWidth: 26,
+        isFast: true,
+        status: 'WAIT_FOR_START'
+    }
+
+    const bgRing: BgRing = {
+        color: '#EAE9E9'
+    }
+
+    function targetRing() {
+
+        var starts: any = startScheduleTime.split(':')
+        var ends: any = endScheduleTime.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 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
+        const eatCount = 1440 - fastCount
+
+        const durationArc = isFastMode ? fastCount / 1440 * 2 * Math.PI : eatCount / 1440 * 2 * Math.PI
+
+        return {
+            color,
+            startArc,
+            durationArc
+        }
+    }
+
+    function realRing() {
+        if (isFastMode) {
+            if (isFast) {
+                var starts: any = startTime ? startTime.split(':') : startScheduleTime.split(':')
+                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
+
+                const color = MainColorType.fast
+                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
+                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
+                if (endTime) {
+                    var ends: any = endTime.split(':')
+                    endSeconds = parseInt(ends[0] + '') * 60 + parseInt(ends[1] + '')
+                }
+                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
+                const durationArc = fastCount / 1440 * 2 * Math.PI
+
+                return {
+                    color,
+                    startArc,
+                    durationArc
+                }
+            }
+        }
+        else {
+            if (isCurrentTimeInRange(endScheduleTime,startScheduleTime)){
+                var starts: any = endScheduleTime.split(':')
+                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
+
+                const color = MainColorType.eat
+                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
+                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
+
+                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
+                const durationArc = fastCount / 1440 * 2 * Math.PI
+
+                return {
+                    color,
+                    startArc,
+                    durationArc
+                }
+            }
+        }
+    }
+
+    function isCurrentTimeInRange(start, end) {
+        // 获取当前时间
+        const now = new Date();
+        const currentTime = now.getHours() * 60 + now.getMinutes(); // 当前时间转换为分钟
+
+        // 将时间点转换为分钟
+        const [startHour, startMinute] = start.split(':').map(Number);
+        const [endHour, endMinute] = end.split(':').map(Number);
+        const startTime = startHour * 60 + startMinute; // 开始时间转换为分钟
+        const endTime = endHour * 60 + endMinute; // 结束时间转换为分钟
+
+        // 处理跨日的情况
+        if (endTime < startTime) {
+            return currentTime >= startTime || currentTime <= endTime;
+        }
+
+        // 判断当前时间是否在范围内
+        return currentTime >= startTime && currentTime <= endTime;
+    }
+
+    function ring() {
+        var offset = 0
+
+        var hour = new Date().getHours()
+        var minute = new Date().getMinutes()
+
+        if (hour != new Date().getHours() || minute != new Date().getMinutes()) {
+            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
+        }
+
+        return <Rings common={common} bgRing={bgRing} targetRing={targetRing()} realRing={realRing()} currentDot={currentDot} canvasId={'smal11l'} />
+    }
+
+    function formatTime(format: string, timestamp?: number) {
+        // var moment = require('moment-timezone');
+        // if (current) {
+        //     if (timestamp) {
+        //         return moment(timestamp).tz(current.time.timezone.id).format(format)
+        //     }
+        //     return moment().tz(current.time.timezone.id).format(format)
+        // }
+
+        return dayjs().format(format)
+    }
+
+    function switchMode() {
+        setIsFastMode(!isFastMode)
+    }
+
+    return <View style={{ alignItems: 'center', display: 'flex', flexDirection: 'column' }}>
+
+        <View style={{ width: rpxToPx(750), }} />
+        <View onClick={() => { setShowModal(true) }}>Fast Eat Night{props.count}</View>
+        <View style={{ height: 40 }} />
+        <View style={{ position: 'relative', }}>
+            {
+                ring()
+            }
+            <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>
+
+        <Text onClick={switchMode}>Switch</Text>
         {
-            showModal && <Modal dismiss={()=>setShowModal(false)}>
-                <View style={{width:100,height:100,backgroundColor:'red'}}>{props.count}</View>
+            showModal && <Modal dismiss={() => setShowModal(false)}>
+                <View style={{ width: 100, height: 100, backgroundColor: 'red' }}>{props.count}</View>
             </Modal>
         }
     </View>

src/features/trackTimeDuration/components/MainSleepActiveCard.tsx

@@ -1,12 +1,156 @@
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import './MainCard.scss'
 import { useState } from "react";
 import { rpxToPx } from "@/utils/tools";
+import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
+import dayjs from "dayjs";
+import moment from 'moment-timezone'
+import { MainColorType } from "@/context/themes/color";
 
 export default function MainSleepActiveCard() {
     const [isSleep, setIsSleep] = useState(true)
-    return <View style={{width:rpxToPx(750),display:'flex',flexShrink:0}}>
+    const [isSleepMode, setIsSleepMode] = useState(true)
+
+    const startScheduleTime = '19:00'
+    const endScheduleTime = '06:00'
+
+    function formatTime(format: string, timestamp?: number) {
+
+        return dayjs().format(format)
+    }
+
+    function switchMode() {
+        setIsSleepMode(!isSleepMode)
+    }
+
+    const common: RingCommon = {
+        useCase: 'ChooseScenario',
+        radius: 115,
+        lineWidth: 26,
+        isFast: true,
+        status: 'WAIT_FOR_START'
+    }
+
+    const bgRing: BgRing = {
+        color: '#EAE9E9'
+    }
+
+    function targetRing() {
+
+        var starts: any = startScheduleTime.split(':')
+        var ends: any = endScheduleTime.split(':')
+        const startSeconds: any = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
+        const endSeconds: any = parseInt(ends[0] + '') * 60 + parseInt(ends[1] + '')
+        const color = isSleepMode ? '#D0C0FB' : '#FF498366'
+        const startArc = isSleepMode ? 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
+        const eatCount = 1440 - fastCount
+
+        const durationArc = isSleepMode ? fastCount / 1440 * 2 * Math.PI : eatCount / 1440 * 2 * Math.PI
+
+        return {
+            color,
+            startArc,
+            durationArc
+        }
+    }
+
+    function realRing() {
+
+        if (isSleepMode) {
+            if (isCurrentTimeInRange( startScheduleTime,endScheduleTime)) {
+                var starts: any = startScheduleTime.split(':')
+                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
+
+                const color = MainColorType.sleep
+                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
+                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
+
+                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
+                const durationArc = fastCount / 1440 * 2 * Math.PI
+
+                return {
+                    color,
+                    startArc,
+                    durationArc
+                }
+            }
+        }
+        else {
+            if (isCurrentTimeInRange(endScheduleTime, startScheduleTime)) {
+                var starts: any = endScheduleTime.split(':')
+                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
+
+                const color = MainColorType.active
+                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
+                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()
+
+                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
+                const durationArc = fastCount / 1440 * 2 * Math.PI
+
+                return {
+                    color,
+                    startArc,
+                    durationArc
+                }
+            }
+        }
+    }
+
+    function ring() {
+        var offset = 0
+
+        var hour = new Date().getHours()
+        var minute = new Date().getMinutes()
+
+        if (hour != new Date().getHours() || minute != new Date().getMinutes()) {
+            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
+        }
+
+        return <Rings common={common} bgRing={bgRing} targetRing={targetRing()} realRing={realRing()} currentDot={currentDot} canvasId={'smal11lee'} />
+    }
+
+    function isCurrentTimeInRange(start, end) {
+        // 获取当前时间
+        const now = new Date();
+        const currentTime = now.getHours() * 60 + now.getMinutes(); // 当前时间转换为分钟
+
+        // 将时间点转换为分钟
+        const [startHour, startMinute] = start.split(':').map(Number);
+        const [endHour, endMinute] = end.split(':').map(Number);
+        const startTime = startHour * 60 + startMinute; // 开始时间转换为分钟
+        const endTime = endHour * 60 + endMinute; // 结束时间转换为分钟
+
+        // 处理跨日的情况
+        if (endTime < startTime) {
+            return currentTime >= startTime || currentTime <= endTime;
+        }
+
+        // 判断当前时间是否在范围内
+        return currentTime >= startTime && currentTime <= endTime;
+    }
+
+    return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }}>
         <View>Sleep Active</View>
-        <View style={{height:1500,backgroundColor:'yellow'}}/>
+        <View style={{ position: 'relative', }}>
+            {
+                ring()
+            }
+            <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>
+
+        <Text onClick={switchMode}>Switch</Text>
     </View>
 }

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

@@ -18,6 +18,7 @@ export type CurrentDot = {
     borderColor: string;
     timestamp?:number;
     offset?:number;
+    whiteIcon?:boolean;
 }
 
 export type RealRing = {
@@ -243,7 +244,7 @@ export default function Rings(props: {
             }
             ctx.arc(xPrime, yPrime, lineWidth/2.0+dotLineWidth/2, 0, 2 * Math.PI);
             ctx.lineWidth = dotLineWidth;
-            ctx.strokeStyle = '#1C1C1C';
+            ctx.strokeStyle = props.currentDot.borderColor//'#1C1C1C';
             ctx.lineCap = 'round'; // 设置为圆角
             ctx.stroke();
 
@@ -269,7 +270,7 @@ export default function Rings(props: {
             }
             else {
                 let tempImage = global.canvas2.createImage()
-                tempImage.src = require('@/assets/images/dot_arrow.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
+                tempImage.src = require(props.currentDot.whiteIcon?'@/assets/images/dot_arrow_white.png':'@/assets/images/dot_arrow.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
                 tempImage.onload = () => {
                     arrowImg = tempImage
                     ctx.save()

src/pages/clock/Clock.scss

@@ -0,0 +1,9 @@
+.tabs{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    .item{
+        margin: 0 20px;
+    }
+}

src/pages/clock/ClockNew.tsx

@@ -9,29 +9,40 @@ import { rpxToPx } from "@/utils/tools";
 
 export default function ClockNew() {
     const [count, setCount] = useState(0)
-    const [scrollLeft,setScrollLeft] = useState(rpxToPx(750))
+    const [scrollLeft, setScrollLeft] = useState(rpxToPx(750) * 0)
+    
+
     useEffect(() => {
         setInterval(() => {
             setCount(index => index + 1)
         }, 1000)
     }, [])
 
-    function tapScroll(index){
-        setScrollLeft(rpxToPx(750)*index)
+    function tapScroll(index) {
+        setScrollLeft(rpxToPx(750) * index)
+    }
+
+    function scroll(e){
+        console.log(e.detail.scrollLeft)
     }
     return <View>
-        <View onClick={()=>tapScroll(0)}>tab 0</View>
-        <View onClick={()=>tapScroll(1)}>tab 1</View>
-        <View onClick={()=>tapScroll(2)}>tab 2</View>
-        <ScrollView scrollX 
-        scrollLeft={scrollLeft} 
-        scrollWithAnimation={true}
-        pagingEnabled={true} 
-        enableFlex enhanced 
-        style={{width:rpxToPx(750),flexDirection:'row',}}>
+        <View className="tabs">
+            <View className="item" onClick={() => tapScroll(0)}> tab 0</View>
+            <View className="item" onClick={() => tapScroll(1)}>tab 1</View>
+            <View className="item" onClick={() => tapScroll(2)}>tab 2</View>
+        </View>
+        <ScrollView scrollX
+            scrollLeft={scrollLeft}
+            scrollWithAnimation={true}
+            // pagingEnabled={true} 
+            enableFlex
+            // enhanced 
+            onScroll={scroll}
+            style={{ width: rpxToPx(750), flexDirection: 'row', }}>
             <View style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
-                <MainDayNightCard />
                 <MainFastEatCard count={count} />
+                <MainDayNightCard count={count} />
+
                 <MainSleepActiveCard />
             </View>
 

src/pages/rn/RNMain.tsx

@@ -235,7 +235,7 @@ export default function RNMain() {
         primary: 'white',
         card: 'white',
         border: 'transparent',
-        background: 'black',
+        background: 'white',
         notification: 'red'
       }
     }}>