ring 统一组件和数据源

src/context/locales/en.js

@@ -28,7 +28,7 @@ export default {
         },
         explore: {
             title: 'Explore',
-            share_title:'My explore'
+            share_title: 'My explore'
         },
         more: {
             title: 'Me',
@@ -94,7 +94,7 @@ export default {
             title: 'Edit profile',
             nickname: 'Nickname',
             save: 'Save',
-            nickname_footer:'Envision the kind of person you aspire to be, and name yourself accordingly.'
+            nickname_footer: 'Envision the kind of person you aspire to be, and name yourself accordingly.'
         }
     },
     feature: {
@@ -217,27 +217,37 @@ export default {
             stages: 'Stages',
             get_local_time: 'Show my local nighttime',
             get_local_time_sunrise: 'Show my local daytime',
-            to:' to ',
-            note:'Note',
-            night_tip:'Times displayed represent global annual averages for sunset and sunrise. Actual times vary based on your location and season.',
-            day_tip:'Times displayed represent global annual averages for sunrise and sunset. Actual times vary based on your location and season.',
-            alert_required_night:'Location Required',
-            alert_required_day:'Location Required',
-            alert_night_content:'To accurately calculate daily sunset and sunrise times for your city, please enable location service.',
-            alert_day_content:'To accurately calculate daily sunrise and sunset times for your city, please enable location service.',
-            choose_location:'Enable location',
-            view_more:'More',
-            got_it:'Got it',
-            more:'More',
-            night_alert_title:'Night Ring On',
-            night_alert_content:'Log in and check out your local nighttime hours spanning from sunset to sunrise.',
-            day_alert_title:'Day Ring On',
-            day_alert_content:'Log in and check out your local daytime hours spanning from sunrise to sunset.',
-            location_need:'Location needed',
-            location_need_content_day:'To accurately calculate local daytime from sunrise to sunset, which  please pick your location.',
-            location_need_content_night:'To accurately calculate local nighttime from sunset to sunrise, please pick your location.',
-            later:'Later',
-            picker_now:'Pick now'
+            to: ' to ',
+            note: 'Note',
+            night_tip: 'Times displayed represent global annual averages for sunset and sunrise. Actual times vary based on your location and season.',
+            day_tip: 'Times displayed represent global annual averages for sunrise and sunset. Actual times vary based on your location and season.',
+            alert_required_night: 'Location Required',
+            alert_required_day: 'Location Required',
+            alert_night_content: 'To accurately calculate daily sunset and sunrise times for your city, please enable location service.',
+            alert_day_content: 'To accurately calculate daily sunrise and sunset times for your city, please enable location service.',
+            choose_location: 'Enable location',
+            view_more: 'More',
+            got_it: 'Got it',
+            more: 'More',
+            night_alert_title: 'Night Ring On',
+            night_alert_content: 'Log in and check out your local nighttime hours spanning from sunset to sunrise.',
+            day_alert_title: 'Day Ring On',
+            day_alert_content: 'Log in and check out your local daytime hours spanning from sunrise to sunset.',
+            location_need: 'Location needed',
+            location_need_content_day: 'To accurately calculate local daytime from sunrise to sunset, which  please pick your location.',
+            location_need_content_night: 'To accurately calculate local nighttime from sunset to sunrise, please pick your location.',
+            later: 'Later',
+            picker_now: 'Pick now',
+            ahead_desc: '{{time}} ahead',
+            ahead_of:'ahead of',
+            behind_desc: '{{time}} behind',
+            behind:'behind',
+            diff_tz_desc: 'These events occured in {{location}} time which is {{time}} {{type}}  your current time zone.',
+            upcoming:'Upcoming',
+            in_real_time:'In real-time',
+            ended:'Ended',
+            update_paused:'Update paused',
+            last_updated:'Last updated '
         },
         track_time_duration: {
             common: {
@@ -264,7 +274,7 @@ export default {
 
                 schedule_fast_content: 'Once enabled, you will receive a reminder at the set start time.',
                 schedule_sleep_content: 'Once enabled, you will receive a reminder at the set bedtime.',
-                schedule_mix_content:'Once enabled, you will receive reminders at the set fasting start time and bedtime.',
+                schedule_mix_content: 'Once enabled, you will receive reminders at the set fasting start time and bedtime.',
                 post_fast_content: 'Once enabled, you will receive an end reminder {{time}}.',
                 post_sleep_content: 'Once enabled, you will receive a wake-up reminder {{time}}.',
 
@@ -289,7 +299,7 @@ export default {
                 member_desc: 'Sunset and sunrise times are global average. For actual times at your location, join our Pro program.',
                 base_location_desc: 'Calculated based on your location.',
                 enter_location_desc: 'Sunset and sunrise times are global average. For actual times at your location, enter your location.',
-                update_my_location:'Update my location',
+                update_my_location: 'Update my location',
 
                 location: 'Location',
                 enter: 'Enter',
@@ -346,22 +356,22 @@ export default {
                 fast_duration: 'Fasting target duration',
                 sleep_duration: 'Sleep target duration',
                 real_fast_start_dt: 'Start time of fasting',
-                real_fast_start_tip:'Expected end time: {{time}}',
+                real_fast_start_tip: 'Expected end time: {{time}}',
                 real_fast_end_dt: 'End time of fasting',
-                real_fast_end_tip:'Expected end time: {{time}}',
+                real_fast_end_tip: 'Expected end time: {{time}}',
                 real_sleep_start_dt: 'Bedtime',
-                real_sleep_start_tip:'Expected wake-up time: {{time}}',
+                real_sleep_start_tip: 'Expected wake-up time: {{time}}',
                 real_sleep_end_dt: 'Wake-up time',
-                real_sleep_end_tip:'Expected wake-up time: {{time}}',
+                real_sleep_end_tip: 'Expected wake-up time: {{time}}',
                 target: 'Target',
-                lock_fast_tip:'Start fasting first.',
-                lock_sleep_tip:'Start sleeping first.',
-                no_duration_available:'Unpredictable duration',
-                predicted:'Predicted',
-                predicted_alert_title:'Off Schedule ',
-                predicted_alert_content:'Unpredictable duration due to deviation from scheduled timeline.',
-                predicted_alert_btn:'Got it'
-                
+                lock_fast_tip: 'Start fasting first.',
+                lock_sleep_tip: 'Start sleeping first.',
+                no_duration_available: 'Unpredictable duration',
+                predicted: 'Predicted',
+                predicted_alert_title: 'Off Schedule ',
+                predicted_alert_content: 'Unpredictable duration due to deviation from scheduled timeline.',
+                predicted_alert_btn: 'Got it'
+
             },
             schedule: {
                 section_title: 'Today',
@@ -393,8 +403,8 @@ export default {
                 tab_fast: 'Fast',
                 tab_sleep: 'Sleep',
                 delete: 'Delete',
-                none:'Not available',
-                
+                none: 'Not available',
+
             },
 
             action_sheet: {

src/context/locales/zh.js

@@ -242,7 +242,17 @@ export default {
             location_need_content_day:'为准确计算本地白天时间(日落至日出), 请选择您所在位置。',
             location_need_content_night:'为准确计算本地夜晚时间(日出至日落), 请选择您所在位置。',
             later:'稍后',
-            picker_now:'立即选择'
+            picker_now:'立即选择',
+            ahead_desc:'前{{time}}',
+            behind_desc:'后{{time}}',
+            ahead_of:'前',
+            behind:'后',
+            diff_tz_desc: '上述事件发生在{{location}}时区, 比您当前设备时区{{type}}{{time}}',
+            upcoming:'即将开始',
+            in_real_time:'正在进行',
+            ended:'已结束',
+            update_paused:'更新暂停',
+            last_updated:'最后更新 '
         },
         track_time_duration: {
             common: {

src/features/trackTimeDuration/components/AllDayRings.tsx

@@ -1,7 +1,7 @@
 import Box from '@/components/layout/Box'
 import './AllRings.scss'
 import { PageContainer, View, Text } from '@tarojs/components'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Modal from '@/components/layout/Modal.weapp'
 import { rpxToPx } from '@/utils/tools'
 import { ColorType } from '@/context/themes/color'
@@ -12,6 +12,7 @@ import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { TimeFormatter } from '@/utils/time_format'
 import '@/utils/ring_card.scss';
+import DayNightRing from './DayNightRing'
 
 let sunriseA = new Date()
 sunriseA.setHours(6)
@@ -39,6 +40,10 @@ export default function AllDayRings(props: { schedule: any }) {
     const [schedule] = useState(props.schedule)
     const { t } = useTranslation()
 
+    useEffect(() => {
+        setAuthInfo(global.locationDetail)
+    }, [global.locationDetail])
+
     function tapShow() {
         setShowRing(true)
     }
@@ -248,86 +253,93 @@ export default function AllDayRings(props: { schedule: any }) {
         return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'pop_day_small'} />
     }
     function dayRing() {
-        var common = getCommon(null, true)
-        common.radius = thirdRingRadius;
-        common.lineWidth = ringWidth;
-        var bgRing = getBgRing()
-
-        const realRingBig: RealRing = {
-            color: ColorType.day + '66',
-            startArc: 0,
-            durationArc: 2
-        }
-
-        var now = new Date().getTime()
-        if (authInfo && authInfo.timezone) {
-            now = TimeFormatter.transferTimestamp(now, authInfo.timezone)
-        }
-
-        if (authInfo && authInfo.day_completed && now > authInfo.day_completed.sunset_ts) {
-            realRingBig.color = ColorType.day
-            var duration = (authInfo.day_completed.sunset_ts - authInfo.day_completed.sunrise_ts) / 1000
-            // var start = new Date(authInfo.day_completed.sunrise_ts)
-            // var start = new Date(authInfo.night_completed.sunset_ts)
-            var newT = TimeFormatter.transferTimestamp(authInfo.day_completed.sunrise_ts,authInfo.timezone)
-            var start = new Date(newT)
-            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
-            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'ddddsss_day1111' + 'index_day'} />
-
-        }
-
-
-        var sunRise = 6 * 60
-        var sunSet = 18 * 60
-
-        var sunRiseObj = day.dayRingSunrise
-        var sunSetObj = day.dayRingSunset
-        sunRise = parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
-        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
-
-
-        var duration = sunSet - sunRise
-
-        realRingBig.startArc = (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
-
-        var currentDot = getDot(null, false)
-        if (authInfo && authInfo.timezone){
-            currentDot.offset = TimeFormatter.timeZoneOffset(authInfo.timezone)
-        }
-        var date = new Date()
-        var minutes = date.getHours() * 60 + date.getMinutes()
-        if (minutes < sunRise) {
-            minutes += 1440
-        }
-
-        currentDot.color = ColorType.day
-
-
-        var now = new Date()
-        var t = now.getHours() * 60 + now.getMinutes()
-        var duration2 = t - sunRise
-        if (duration2 < 0) {
-            duration2 += 24 * 60
-        }
-        var realRing: RealRing = {
-            color: ColorType.day,
-            startArc: (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
-            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
-        }
-        if (day.dayRingDate) {
-            if (new Date(day.dayRingDate).getDate() != new Date().getDate()) {
-                realRing = null;
-            }
-        }
-
-        if (!user.isLogin) {
-            currentDot = null
-            realRing = null
-        }
-
-        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'day111_day2'} />
+        return <DayNightRing
+            isNight={false}
+            isThirdRing={true}
+            canvasId={'day_night_card_big_day_ring111'}
+            authInfo={authInfo}
+        />
+        // var common = getCommon(null, true)
+        // common.radius = thirdRingRadius;
+        // common.lineWidth = ringWidth;
+        // var bgRing = getBgRing()
+
+        // const realRingBig: RealRing = {
+        //     color: ColorType.day + '66',
+        //     startArc: 0,
+        //     durationArc: 2
+        // }
+
+        // var now = new Date().getTime()
+        
+
+        // if (authInfo && authInfo.day_completed && now > authInfo.day_completed.sunset_ts) {
+        //     realRingBig.color = ColorType.day
+        //     var duration = (authInfo.day_completed.sunset_ts - authInfo.day_completed.sunrise_ts) / 1000
+        //     // var start = new Date(authInfo.day_completed.sunrise_ts)
+        //     // var start = new Date(authInfo.night_completed.sunset_ts)
+        //     var newT = TimeFormatter.transferTimestamp(authInfo.day_completed.sunrise_ts,authInfo.timezone)
+        //     var start = new Date(newT)
+        //     realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        //     realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
+        //     return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'ddddsss_day1111' + 'index_day'} />
+
+        // }
+
+        // if (authInfo && authInfo.timezone) {
+        //     now = TimeFormatter.transferTimestamp(now, authInfo.timezone)
+        // }
+
+
+        // var sunRise = 6 * 60
+        // var sunSet = 18 * 60
+
+        // var sunRiseObj = day.dayRingSunrise
+        // var sunSetObj = day.dayRingSunset
+        // sunRise = parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        // sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+
+
+        // var duration = sunSet - sunRise
+
+        // realRingBig.startArc = (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        // realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
+
+        // var currentDot = getDot(null, false)
+        // if (authInfo && authInfo.timezone){
+        //     currentDot.offset = TimeFormatter.timeZoneOffset(authInfo.timezone)
+        // }
+        // var date = new Date(now)
+        // var minutes = date.getHours() * 60 + date.getMinutes()
+        // if (minutes < sunRise) {
+        //     minutes += 1440
+        // }
+
+        // currentDot.color = ColorType.day
+
+        // var t = date.getHours() * 60 + date.getMinutes()
+        // var duration2 = t - sunRise
+        // if (duration2 < 0) {
+        //     duration2 += 24 * 60
+        // }
+        // var realRing: RealRing = {
+        //     color: ColorType.day,
+        //     startArc: (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
+        //     durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
+        // }
+        // if (day.dayRingDate) {
+        //     if (new Date(day.dayRingDate).getDate() != new Date().getDate()) {
+        //         realRing = null;
+        //     }
+        // }
+
+        // if (!user.isLogin) {
+        //     currentDot = null
+        //     realRing = null
+        // }
+
+        // return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'day111_day2'} />
+    
     }
 
 

src/features/trackTimeDuration/components/AllRings.tsx

@@ -1,7 +1,7 @@
 import Box from '@/components/layout/Box'
 import './AllRings.scss'
 import { PageContainer, View, Text } from '@tarojs/components'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Modal from '@/components/layout/Modal.weapp'
 import { bigRingRadius, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, ringWidth, smallRingRadius, thirdRingRadius, timeTotimestamp } from '../hooks/RingData'
 import { rpxToPx } from '@/utils/tools'
@@ -11,6 +11,7 @@ import Rings from "./Rings";
 import { TimeFormatter } from '@/utils/time_format'
 import { useSelector } from 'react-redux'
 import { RealRing } from '@/features/trackTimeDuration/components/Rings'
+import DayNightRing from './DayNightRing'
 
 
 export default function AllRings(props: { data?: any, time?: any }) {
@@ -21,6 +22,14 @@ export default function AllRings(props: { data?: any, time?: any }) {
     const [authInfo, setAuthInfo] = useState(global.locationDetail ? global.locationDetail : null)
     const { t } = useTranslation()
 
+    useEffect(() => {
+        setAuthInfo(global.locationDetail)
+    }, [global.locationDetail])
+
+    useEffect(()=>{
+        setRecord(props.data.current_record);
+    },[props.data])
+
     function tapShow() {
         setShowRing(true)
     }
@@ -47,6 +56,7 @@ export default function AllRings(props: { data?: any, time?: any }) {
         var currentDot1 = getDot(record, true)
         var targetBigRing1 = getTarget(record, true)
         targetBigRing1.color = record.scenario == 'SLEEP' ? ColorType.sleep + '66' : ColorType.fast + '66'
+        debugger
         if (record.status == 'ONGOING') {
             var realRing1 = getReal(record, true, false)
             // debugger
@@ -191,82 +201,88 @@ export default function AllRings(props: { data?: any, time?: any }) {
     }
 
     function dayRing() {
-        var common = getCommon(null, true)
-        common.radius = thirdRingRadius;
-        common.lineWidth = ringWidth;
-        var bgRing = getBgRing()
-
-        let realRingBig: RealRing = {
-            color: ColorType.night + '66',
-            startArc: 0,
-            durationArc: 2
-        }
+        return <DayNightRing
+            isNight={true}
+            isThirdRing={true}
+            canvasId={'day_night_card_big_night_ring111'}
+            authInfo={authInfo}
+        />
+        // var common = getCommon(null, true)
+        // common.radius = thirdRingRadius;
+        // common.lineWidth = ringWidth;
+        // var bgRing = getBgRing()
+
+        // let realRingBig: RealRing = {
+        //     color: ColorType.night + '66',
+        //     startArc: 0,
+        //     durationArc: 2
+        // }
 
-        var now = new Date().getTime()
-        if (authInfo && authInfo.timezone) {
-            now = TimeFormatter.transferTimestamp(now, authInfo.timezone)
-        }
+        // var now = new Date().getTime()
+        // if (authInfo && authInfo.timezone) {
+        //     now = TimeFormatter.transferTimestamp(now, authInfo.timezone)
+        // }
 
 
-        if (authInfo && authInfo.night_completed && now > authInfo.night_completed.sunrise_ts) {
-            realRingBig.color = ColorType.night
-            var duration = (authInfo.night_completed.sunrise_ts - authInfo.night_completed.sunset_ts) / 1000
-            // var start = new Date(authInfo.night_completed.sunset_ts)
-            var newT = TimeFormatter.transferTimestamp(authInfo.night_completed.sunset_ts, authInfo.timezone)
-            var start = new Date(newT)
-            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
-            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'allday' + 'index_day'} />
+        // if (authInfo && authInfo.night_completed && now > authInfo.night_completed.sunrise_ts) {
+        //     realRingBig.color = ColorType.night
+        //     var duration = (authInfo.night_completed.sunrise_ts - authInfo.night_completed.sunset_ts) / 1000
+        //     // var start = new Date(authInfo.night_completed.sunset_ts)
+        //     var newT = TimeFormatter.transferTimestamp(authInfo.night_completed.sunset_ts, authInfo.timezone)
+        //     var start = new Date(newT)
+        //     realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        //     realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
+        //     return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'allday' + 'index_day'} />
 
-        }
+        // }
 
-        var sunRise = 24 * 60 + 6 * 60
-        var sunSet = 18 * 60
+        // var sunRise = 24 * 60 + 6 * 60
+        // var sunSet = 18 * 60
 
-        var sunRiseObj = nightStore.nightRingSunrise
-        var sunSetObj = nightStore.nightRingSunset
-        sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
-        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
-        if (sunSetObj.indexOf('PM') != -1) {
-            sunSet += 12 * 60
-        }
+        // var sunRiseObj = nightStore.nightRingSunrise
+        // var sunSetObj = nightStore.nightRingSunset
+        // sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        // sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+        // if (sunSetObj.indexOf('PM') != -1) {
+        //     sunSet += 12 * 60
         // }
-        var duration = sunRise - sunSet
-        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
-
-        var currentDot = getDot(null, false)
-        if (authInfo && authInfo.timezone) {
-            currentDot.offset = TimeFormatter.timeZoneOffset(authInfo.timezone)
-        }
-        currentDot.color = ColorType.night
+        // // }
+        // var duration = sunRise - sunSet
+        // realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        // realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
+
+        // var currentDot = getDot(null, false)
+        // if (authInfo && authInfo.timezone) {
+        //     currentDot.offset = TimeFormatter.timeZoneOffset(authInfo.timezone)
+        // }
+        // currentDot.color = ColorType.night
 
-        var now = new Date()
-        var t = now.getHours() * 60 + now.getMinutes()
-        var duration2 = t - sunSet
-        if (duration2 < 0) {
-            duration2 += 24 * 60
-        }
-        let realRing: RealRing = {
-            color: ColorType.night,
-            startArc: (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
-            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
-        }
+        // var date = new Date(now)
+        // var t = date.getHours() * 60 + date.getMinutes()
+        // var duration2 = t - sunSet
+        // if (duration2 < 0) {
+        //     duration2 += 24 * 60
+        // }
+        // let realRing: RealRing = {
+        //     color: ColorType.night,
+        //     startArc: (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
+        //     durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
+        // }
 
-        if (nightStore.nightRingDate) {
-            if (new Date(nightStore.nightRingDate).getDate() == new Date().getDate() && new Date().getHours() < 12) {
+        // if (nightStore.nightRingDate) {
+        //     if (new Date(nightStore.nightRingDate).getDate() == date.getDate() && date.getHours() < 12) {
 
-                realRing = null;
-            }
-        }
+        //         realRing = null;
+        //     }
+        // }
 
-        if (!user.isLogin) {
-            currentDot = null;
-            realRing = null;
-        }
+        // if (!user.isLogin) {
+        //     currentDot = null;
+        //     realRing = null;
+        // }
 
 
-        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 > duration ? null : realRing} currentDot={currentDot} canvasId={'all_night' + 'index_day'} />
+        // return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 > duration ? null : realRing} currentDot={currentDot} canvasId={'all_night' + 'index_day'} />
 
     }
 
@@ -296,44 +312,13 @@ export default function AllRings(props: { data?: any, time?: any }) {
         </View>
     }
 
-    function getDuration(obj) {
-        if (!obj) {
-        }
-        if (obj.status == 'NOT_STARTED' || obj.status == 'NOT_COMPLETED') {
-            return ''
-        }
-        var start = obj.real_start_time
-        var end = obj.real_end_time
-        if (!end) {
-            end = (new Date()).getTime()
-        }
-        if (obj.status == 'WAIT_FOR_START') {
-            start = obj.target_start_time
-            end = obj.target_end_time
-        }
-        return TimeFormatter.durationFormate(start, end)
-        // return TimeFormatter.calculateTimeDifference(start, end)
-    }
 
     function fastDuration() {
-        if (!record.fast) {
-            return ''
-        }
-        if (record.fast.status == 'WAIT_FOR_END') {
-            return TimeFormatter.countdown(record.fast.real_start_time)
-            // return TimeFormatter.formateTimeDifference(record.fast.real_start_time, new Date().getTime(), false)
-        }
-        return getDuration(record.fast)
+        return global.fastDuration
     }
 
     function sleepDuration() {
-        if (!record.sleep) {
-            return ''
-        }
-        if (record.sleep.status == 'WAIT_FOR_END') {
-            return TimeFormatter.formateTimeDifference(record.sleep.real_start_time, new Date().getTime(), false)
-        }
-        return getDuration(record.sleep)
+        return global.sleepDuration
     }
 
     function nightDuration() {

src/features/trackTimeDuration/components/DayNightCard.scss

@@ -25,6 +25,7 @@
     padding-left: 16px;
     padding-right: 16px;
     margin-left: 6px;
+    font-weight: bold;
 }
 
 .day_night_card_footer {
@@ -217,7 +218,7 @@
     z-index: 0;
 }
 
-.day_card_header{
+.day_card_header {
     position: absolute;
     right: 0;
     top: -16px;
@@ -233,6 +234,15 @@
     align-items: center;
 }
 
+.day_card_footer2{
+    position: absolute;
+    right: 0px;
+    bottom: -8px;
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+}
+
 .day_card_footer_date {
     opacity: 0.4;
     color: #767676;
@@ -246,8 +256,42 @@
     opacity: 0.2;
 }
 
-.footer_desc_text{
+.card_arrow2{
+    width: 48px;
+    height: 48px;
+    opacity: 0.2;
+}
+
+.footer_desc_text {
     font-size: 24px;
     line-height: 24px;
-    margin-left: 5px;
+    margin-left: 6px;
+    margin-top: 6px;
+}
+
+.ring_clock {
+    font-size: 28px;
+    line-height: 36px;
+    font-weight: bold;
+}
+
+.ring_city {
+    font-size: 18px;
+    line-height: 20px;
+    color: #767676;
+    opacity: 0.4;
+    max-width: 112px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ring_timezone {
+    font-size: 14px;
+    line-height: 20px;
+    color: #767676;
+    opacity: 0.4;
+    max-width: 112px;
+    text-align: center;
 }

src/features/trackTimeDuration/components/DayNightCard.tsx

@@ -20,6 +20,7 @@ import Rings from "./Rings";
 import { bigRingRadius, getBgRing, getCommon, getDot, ringWidth } from '../hooks/RingData'
 import '@/utils/ring_card.scss';
 import { IconNight, IconSunrise, IconSunset } from '@/components/basic/Icons'
+import DayNightRing from './DayNightRing'
 
 let useNavigation;
 if (process.env.TARO_ENV == 'rn') {
@@ -107,6 +108,20 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
             setSunriseDate(sunriseA)
             setSunriseTmrDate(new Date(sunriseB.getTime() + 24 * 3600 * 1000))
             setSunsetDate(sunsetA)
+
+            dispatch(setDayRingData({
+                date: new Date().getTime(),
+                sunrise: '06:00',
+                sunset: '18:00'
+            }))
+            dispatch(setNightRingData({
+                date: new Date().getTime(),
+                sunrise: '06:00',
+                sunset: '18:00'
+            }))
+
+            setAuthInfo(null)
+            global.locationDetail = null
         }
     }, [user.isLogin])
 
@@ -232,12 +247,14 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     function updateDate(data) {
 
         var today = new Date()
+        if (authInfo && authInfo.timezone) {
+            today = localNow(today)
+        }
         // var yesterday = new Date(today.getTime() - 24 * 3600 * 1000)
-        var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000)
+        // var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000)
         // var strYesterday = `${yesterday.getFullYear()}-${TimeFormatter.padZero(yesterday.getMonth() + 1)}-${TimeFormatter.padZero(yesterday.getDate())}`
         // var strTomorrow = `${tomorrow.getFullYear()}-${TimeFormatter.padZero(tomorrow.getMonth() + 1)}-${TimeFormatter.padZero(tomorrow.getDate())}`
         if (isMember && data && data.daylights && data.daylights.length > 0) {
-            debugger
             var yesterdayDate = new Date(data.daylights[0].date + 'T' + data.daylights[0].sunset)
             var todaySunriseDate = new Date(data.daylights[1].date + 'T' + data.daylights[1].sunrise)
             var todaySunsetDate = new Date(data.daylights[1].date + 'T' + data.daylights[1].sunset)
@@ -325,7 +342,6 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                 sunrise: '06:00',
                 sunset: '18:00'
             }))
-            debugger
             dispatch(setNightRingData({
                 date: sunsetDate,
                 sunrise: '06:00',
@@ -336,11 +352,13 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     }
 
     function updateNightStore(date, sunrise, sunset) {
-        debugger
-        if (lastNightInfo && lastNightInfo.date.getDate() == new Date(date).getDate() &&
-            lastNightInfo.sunrise == sunrise &&
-            lastNightInfo.sunset == sunset
-        ) {
+        // if (lastNightInfo && lastNightInfo.date.getDate() == new Date(date).getDate() &&
+        //     lastNightInfo.sunrise == sunrise &&
+        //     lastNightInfo.sunset == sunset
+        // ) {
+        //     return
+        // }
+        if (!user.isLogin) {
             return
         }
         lastNightInfo = {
@@ -356,10 +374,13 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     }
 
     function updateDayStore(date, sunrise, sunset) {
-        if (lastDayInfo && lastDayInfo.date.getDate() == new Date(date).getDate() &&
-            lastDayInfo.sunrise == sunrise &&
-            lastDayInfo.sunset == sunset
-        ) {
+        // if (lastDayInfo && lastDayInfo.date.getDate() == new Date(date).getDate() &&
+        //     lastDayInfo.sunrise == sunrise &&
+        //     lastDayInfo.sunset == sunset
+        // ) {
+        //     return
+        // }
+        if (!user.isLogin) {
             return
         }
         lastDayInfo = {
@@ -508,7 +529,17 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     }
 
     function getLocation() {
+        if (!authInfo) {
+            return ''
+        }
+        return `${getCity()} | ${Math.abs(parseInt(authInfo.lat))}°${parseInt(authInfo.lat) < 0 ? 'S' : 'N'} ${Math.abs(parseInt(authInfo.lng))}°${parseInt(authInfo.lng) < 0 ? 'W' : 'E'}`
+    }
+
+    function getCity() {
         var city = ''
+        if (!authInfo) {
+            return ''
+        }
         if ((authInfo as any).address) {
             if ((authInfo as any).address.city.length > 0) {
                 city = (authInfo as any).address.city
@@ -526,8 +557,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         else {
             city = t('feature.track_time_duration.third_ring.unknown')
         }
-        // return city +' | '+parseInt(authInfo.lat)+'°'+ ' '+parseInt(authInfo.lng)
-        return `${city} | ${Math.abs(parseInt(authInfo.lat))}°${parseInt(authInfo.lat) < 0 ? 'S' : 'N'} ${Math.abs(parseInt(authInfo.lng))}°${parseInt(authInfo.lng) < 0 ? 'W' : 'E'}`
+        return city
     }
 
     function clearData() {
@@ -545,6 +575,9 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                         }
                         lastNightInfo = null
                         lastDayInfo = null
+
+                        setAuthInfo(null)
+                        global.locationDetail = null
                     })
                 } else if (res.cancel) {
                     console.log('用户点击取消')
@@ -566,6 +599,10 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         setSunsetTime('18:00')
         dispatch(updateMember({ isMember: isMember, gpsInfo: null }))
 
+        setSunriseDate(sunriseA)
+        setSunriseTmrDate(new Date(sunriseB.getTime() + 24 * 3600 * 1000))
+        setSunsetDate(sunsetA)
+
 
         dispatch(setDayRingData({
             date: new Date().getTime(),
@@ -734,68 +771,6 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     }
 
 
-    function getSunsetTime() {
-        if (props.isNight) {
-            if (!authInfo || !(authInfo as any).lat) {
-                if (new Date().getHours() >= 6) {
-                    return `${sunsetTime}`
-                }
-                return `${sunsetTime}`
-                // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
-            }
-            if (nightDate.getDate() == new Date().getDate()) {
-                return `${sunsetTime.substring(0, 5)}`
-            }
-            return `${sunsetTime.substring(0, 5)}`
-        }
-        if (!authInfo || !(authInfo as any).lat) {
-            if (new Date().getHours() >= 18) {
-                return `${sunsetTime}`
-
-                // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
-            }
-            return `${sunsetTime}`
-            // return `Today ${sunriseTime} - ${sunsetTime}`
-        }
-        if (dayDate.getDate() == new Date().getDate()) {
-            return `${sunsetTime.substring(0, 5)}`
-            // return `Today ${sunriseTime} - ${sunsetTime}`
-        }
-        return `${sunsetTime.substring(0, 5)}`
-
-    }
-
-    function getSunriseTime() {
-        if (props.isNight) {
-            if (!authInfo || !(authInfo as any).lat) {
-                if (new Date().getHours() >= 6) {
-                    return `${sunriseTmrTime}`
-                }
-                return `${sunriseTmrTime}`
-                // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
-            }
-            if (nightDate.getDate() == new Date().getDate()) {
-                return `${sunriseTmrTime.substring(0, 5)}`
-            }
-            return `${sunriseTmrTime.substring(0, 5)}`
-        }
-        if (!authInfo || !(authInfo as any).lat) {
-            if (new Date().getHours() >= 18) {
-                return `${sunriseTime}`
-
-                // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
-            }
-            return `${sunriseTime}`
-            // return `Today ${sunriseTime} - ${sunsetTime}`
-        }
-        if (dayDate.getDate() == new Date().getDate()) {
-            return `${sunriseTime.substring(0, 5)}`
-            // return `Today ${sunriseTime} - ${sunsetTime}`
-        }
-        return `${sunriseTime.substring(0, 5)}`
-    }
-
-
     function longClick() {
         if (user.isLogin && user.test_user && authInfo)
             setShowDetailModal(true)
@@ -806,220 +781,100 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
             e.stopPropagation()
         }
         tapCard(e)
-        // if (isMember && authInfo && authInfo.lat) {
-        //     tapCard(e)
-        //     return
-        // }
-        // setShowDetailPopup(true)
-        // Taro.showModal({
-        //     title: props.isNight ? t('feature.day_night.alert_required_night') : t('feature.day_night.alert_required_day'),
-        //     content: props.isNight ? t('feature.day_night.alert_night_content') : t('feature.day_night.alert_day_content'),
-        //     confirmText: t('feature.day_night.choose_location'),
-        //     cancelText: t('feature.day_night.view_more'),
-        //     success: function (res) {
-        //         if (res.confirm) {
-        //             auth()
-        //             // console.log('用户点击确定')
-        //         } else if (res.cancel) {
-        //             setShowDetailPopup(true)
-        //         }
-        //     }
-        // })
-    }
-
-    function tapShow() {
-        dispatch(showNight(true))
-        dispatch(showDay(true))
-        Taro.showModal({
-            title: 'Login Required',
-            content: props.isNight ? 'Log in to see your daily local nighttime from sunset to sunrise.' : 'Log in to see your daily local daytime from sunrise to sunset.',
-            cancelText: 'Later',
-            confirmText: 'Login',
-            success: function (res) {
-                if (res.confirm) {
-                    Taro.setStorage({
-                        key: 'showNightRing',
-                        data: true
-                    })
-                    Taro.setStorage({
-                        key: 'showDayRing',
-                        data: true
-                    })
-                    if (!user.isLogin) {
-                        jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
-                        return
-                    }
-
-                } else if (res.cancel) {
-                    dispatch(showNight(false))
-                    dispatch(showDay(false))
-                    Taro.setStorage({
-                        key: 'showNightRing',
-                        data: false
-                    })
-                    Taro.setStorage({
-                        key: 'showDayRing',
-                        data: false
-                    })
-                }
-            }
-        })
-    }
-
-    function operate(e) {
-        if (process.env.TARO_ENV == 'weapp') {
-            e.stopPropagation()
-        }
-        Taro.showActionSheet({
-            itemList: ['选择位置', '重置'],
-            success: function (res) {
-                switch (res.tapIndex) {
-                    case 0:
-                        auth()
-                        break;
-                    case 1:
-                        reset()
-                        break;
-                }
-            },
-            fail: function (res) {
-                console.log(res.errMsg)
-            }
-        })
-    }
-
-    function reset() {
-        var content = ''
-        if (props.isNight) {
-            if (authInfo && authInfo.lat) {
-                content = 'Local times for sunset and sunrise, together with the nighttime ring will turn off, and your location data will be cleared. '
-            }
-            else {
-                content = 'Sunset and sunrise times, together with the nighttime ring will turn off.'
-            }
-        }
-        else {
-            if (authInfo && authInfo.lat) {
-                content = 'Local times for sunrise and sunset, together with the daytime ring will turn off, and your location data will be cleared. '
-            }
-            else {
-                content = 'Sunrise and sunset times, together with the daytime ring will turn off.'
-            }
-        }
-        Taro.showModal({
-            title: 'Reset Alert',
-            content: content,
-            success: function (res) {
-                if (res.confirm) {
-                    if (user.isLogin) {
-                        uploadPerm({ show_ring: false })
-                    }
-                    clearLocation().then(res => {
-                        if (global.clearNightLocation) {
-                            global.clearNightLocation()
-                        }
-                        if (global.clearDayLocation) {
-                            global.clearDayLocation()
-                        }
-                        lastNightInfo = null
-                        lastDayInfo = null
-
-                        dispatch(showNight(false))
-                        dispatch(showDay(false))
-                        Taro.setStorage({
-                            key: 'showNightRing',
-                            data: false
-                        })
-                        Taro.setStorage({
-                            key: 'showDayRing',
-                            data: false
-                        })
-                    })
-                } else if (res.cancel) {
-                    console.log('用户点击取消')
-                }
-            }
-
-        })
-
     }
 
     function nightRing() {
-        var common = getCommon(null, true)
-        common.radius = bigRingRadius;
-        common.lineWidth = ringWidth;
-        var bgRing = getBgRing()
-
-        let realRingBig: RealRing = {
-            color: ColorType.night + '66',
-            startArc: 0,
-            durationArc: 2
-        }
-
-        var now1 = new Date().getTime()
-        if (authInfo && authInfo.timezone) {
-            now1 = TimeFormatter.transferTimestamp(now1, authInfo.timezone)
-        }
+        return <DayNightRing
+            isNight={true}
+            isThirdRing={false}
+            canvasId={'day_night_card_night_ring'}
+            authInfo={authInfo}
+            currentStatus={currentStatus()}
+        />
+        // var common = getCommon(null, true)
+        // common.radius = bigRingRadius;
+        // common.lineWidth = ringWidth;
+        // var bgRing = getBgRing()
+
+        // let realRingBig: RealRing = {
+        //     color: ColorType.night + '66',
+        //     startArc: 0,
+        //     durationArc: 2
+        // }
 
 
-        if (authInfo && authInfo.night_completed && now1 > authInfo.night_completed.sunrise_ts) {
-            realRingBig.color = ColorType.night
-            var duration = (authInfo.night_completed.sunrise_ts - authInfo.night_completed.sunset_ts) / 1000
-            // var start = new Date(authInfo.night_completed.sunset_ts)
-            var newT = TimeFormatter.transferTimestamp(authInfo.night_completed.sunset_ts, authInfo.timezone)
-            var start = new Date(newT)
-            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
-            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'ddddsss' + 'index_day'} />
+        // var now1 = new Date().getTime()
+        // if (authInfo && authInfo.timezone) {
+        //     now1 = TimeFormatter.transferTimestamp(now1, authInfo.timezone)
+        // }
 
-        }
+        // if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
+        //     realRingBig.color = ColorType.night
+        //     var duration = (authInfo.night_completed.sunrise_ts - authInfo.night_completed.sunset_ts) / 1000
+        //     // var start = new Date(authInfo.night_completed.sunset_ts)
+        //     var newT = TimeFormatter.transferTimestamp(authInfo.night_completed.sunset_ts, authInfo.timezone)
+        //     var start = new Date(newT)
+        //     realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        //     realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
+
+        //     var currentDot = getDot(null, false)
+        //     currentDot.color = ColorType.night
+        //     currentDot.offset = (authInfo && authInfo.timezone) ? TimeFormatter.timeZoneOffset(authInfo.timezone) : 0;
+        //     //已结束未更新暂停时，显示current_dot
+        //     if (currentStatus() == t('feature.day_night.update_paused')){
+        //         currentDot = null
+        //     }
 
-        var sunRise = 24 * 60 + 6 * 60
-        var sunSet = 18 * 60
+        //     return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} currentDot={currentDot} canvasId={'ddddsss' + 'index_day'} />
 
-        var sunRiseObj = nightStore.nightRingSunrise
-        var sunSetObj = nightStore.nightRingSunset
-        sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
-        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
-        if (sunSetObj.indexOf('PM') != -1) {
-            sunSet += 12 * 60
-        }
         // }
-        var duration = sunRise - sunSet
-        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
-
-        var currentDot = getDot(null, false)
-        currentDot.color = ColorType.night
-        currentDot.offset = (authInfo && authInfo.timezone) ? TimeFormatter.timeZoneOffset(authInfo.timezone) : 0
 
-        var now = new Date()
-        now = localNow(now)
+        // var sunRise = 24 * 60 + 6 * 60
+        // var sunSet = 18 * 60
 
-        var t = now.getHours() * 60 + now.getMinutes()
-        var duration2 = t - sunSet
-        if (duration2 < 0) {
-            duration2 += 24 * 60
-        }
-        let realRing: RealRing = {
-            color: ColorType.night,
-            startArc: (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
-            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
-        }
+        // var sunRiseObj = user.isLogin ? nightStore.nightRingSunrise : '06:00:00'
+        // var sunSetObj = user.isLogin ? nightStore.nightRingSunset : '18:00:00'
+        // sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        // sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+        // if (sunSetObj.indexOf('PM') != -1) {
+        //     sunSet += 12 * 60
+        // }
+        // // }
+        // var duration = sunRise - sunSet
+        // realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        // realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
+
+        // var currentDot = getDot(null, false)
+        // currentDot.color = ColorType.night
+        // currentDot.offset = (authInfo && authInfo.timezone) ? TimeFormatter.timeZoneOffset(authInfo.timezone) : 0
+
+        // var now = new Date()
+        // now = localNow(now)
+
+        // var t1 = now.getHours() * 60 + now.getMinutes()
+        // var duration2 = t1 - sunSet
+        // if (duration2 < 0) {
+        //     duration2 += 24 * 60
+        // }
+        // let realRing: RealRing = {
+        //     color: ColorType.night,
+        //     startArc: (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
+        //     durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
+        // }
 
-        if (nightStore.nightRingDate) {
-            if (new Date(nightStore.nightRingDate).getDate() == new Date().getDate() && new Date().getHours() < 12) {
-                realRing = null;
-            }
-        }
+        // if (nightStore.nightRingDate) {
+        //     if (new Date(nightStore.nightRingDate).getDate() == now.getDate() && now.getHours() < 12) {
+        //         realRing = null;
+        //     }
+        // }
 
-        if (!user.isLogin) {
-            currentDot = null;
-            realRing = null;
-        }
+        // // if (!user.isLogin) {
+        // //     currentDot = null;
+        // //     realRing = null;
+        // // }
 
 
-        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 > duration ? null : realRing} currentDot={currentDot} canvasId={'dddd' + 'index_day'} />
+        // return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 > duration ? null : realRing} currentDot={currentDot} canvasId={'dddd' + 'index_day'} />
 
     }
 
@@ -1031,88 +886,101 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
     }
 
     function dayRing() {
-        var common = getCommon(null, true)
-        common.radius = bigRingRadius;
-        common.lineWidth = ringWidth;
-        var bgRing = getBgRing()
-
-        const realRingBig: RealRing = {
-            color: ColorType.day + '66',
-            startArc: 0,
-            durationArc: 2
-        }
 
-        var now1 = new Date().getTime()
-        if (authInfo && authInfo.timezone) {
-            now1 = TimeFormatter.transferTimestamp(now1, authInfo.timezone)
-        }
+        return <DayNightRing
+            isNight={false}
+            isThirdRing={false}
+            canvasId={'day_night_card_big_day'}
+            authInfo={authInfo}
+        />
+
+        // var common = getCommon(null, true)
+        // common.radius = bigRingRadius;
+        // common.lineWidth = ringWidth;
+        // var bgRing = getBgRing()
+
+        // const realRingBig: RealRing = {
+        //     color: ColorType.day + '66',
+        //     startArc: 0,
+        //     durationArc: 2
+        // }
 
-        if (authInfo && authInfo.day_completed && now1 > authInfo.day_completed.sunset_ts) {
-            realRingBig.color = ColorType.day
-            var duration = (authInfo.day_completed.sunset_ts - authInfo.day_completed.sunrise_ts) / 1000
-            // var start = new Date(authInfo.day_completed.sunrise_ts)
-            // var start = new Date(authInfo.night_completed.sunset_ts)
-            var newT = TimeFormatter.transferTimestamp(authInfo.day_completed.sunrise_ts, authInfo.timezone)
-            var start = new Date(newT)
-            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
-            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'ddddsss_day' + 'index_day'} />
+        // var now1 = new Date().getTime()
 
-        }
 
 
-        var sunRise = 6 * 60
-        var sunSet = 18 * 60
+        // if (authInfo && authInfo.day_completed && now1 > authInfo.day_completed.sunset_ts) {
+        //     realRingBig.color = ColorType.day
+        //     var duration = (authInfo.day_completed.sunset_ts - authInfo.day_completed.sunrise_ts) / 1000
+        //     // var start = new Date(authInfo.day_completed.sunrise_ts)
+        //     // var start = new Date(authInfo.night_completed.sunset_ts)
+        //     var newT = TimeFormatter.transferTimestamp(authInfo.day_completed.sunrise_ts, authInfo.timezone)
+        //     var start = new Date(newT)
+        //     realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        //     realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
+        //     return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={'ddddsss_day' + 'index_day'} />
 
-        var sunRiseObj = dayStore.dayRingSunrise
-        var sunSetObj = dayStore.dayRingSunset
-        sunRise = parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
-        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+        // }
 
+        // if (authInfo && authInfo.timezone) {
+        //     now1 = TimeFormatter.transferTimestamp(now1, authInfo.timezone)
+        // }
 
-        var duration = sunSet - sunRise
 
-        realRingBig.startArc = (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
+        // var sunRise = 6 * 60
+        // var sunSet = 18 * 60
 
-        var currentDot = getDot(null, false)
-        currentDot.offset = (authInfo && authInfo.timezone) ? TimeFormatter.timeZoneOffset(authInfo.timezone) : 0
-        var date = new Date()
-        var minutes = date.getHours() * 60 + date.getMinutes()
-        if (minutes < sunRise) {
-            minutes += 1440
-        }
+        // var sunRiseObj = user.isLogin ? dayStore.dayRingSunrise : '06:00:00'
+        // var sunSetObj = user.isLogin ? dayStore.dayRingSunset : '18:00:00'
+        // sunRise = parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        // sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
 
-        currentDot.color = ColorType.day
 
+        // var duration = sunSet - sunRise
 
-        var now = new Date()
-        var t = now.getHours() * 60 + now.getMinutes()
-        var duration2 = t - sunRise
-        if (duration2 < 0) {
-            duration2 += 24 * 60
-        }
-        var realRing: RealRing = {
-            color: ColorType.day,
-            startArc: (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
-            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
-        }
-        if (dayStore.dayRingDate) {
-            if (new Date(dayStore.dayRingDate).getDate() != new Date().getDate()) {
-                realRing = null;
-            }
-        }
+        // realRingBig.startArc = (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        // realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
 
-        if (!user.isLogin) {
-            currentDot = null
-            realRing = null
-        }
+        // var currentDot = getDot(null, false)
+        // currentDot.offset = (authInfo && authInfo.timezone) ? TimeFormatter.timeZoneOffset(authInfo.timezone) : 0
+        // var date = new Date()
+        // var minutes = date.getHours() * 60 + date.getMinutes()
+        // if (minutes < sunRise) {
+        //     minutes += 1440
+        // }
 
-        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'day_day2'} />
+        // currentDot.color = ColorType.day
+
+
+        // var now = new Date()
+        // now = localNow(now)
+        // var t = now.getHours() * 60 + now.getMinutes()
+        // var duration2 = t - sunRise
+        // if (duration2 < 0) {
+        //     duration2 += 24 * 60
+        // }
+        // var realRing: RealRing = {
+        //     color: ColorType.day,
+        //     startArc: (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
+        //     durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
+        // }
+        // if (dayStore.dayRingDate) {
+        //     if (new Date(dayStore.dayRingDate).getDate() != now.getDate()) {
+        //         realRing = null;
+        //     }
+        // }
+
+        // // if (!user.isLogin) {
+        // //     currentDot = null
+        // //     realRing = null
+        // // }
+
+        // return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'day_day2'} />
 
     }
 
     function getSunsetDuration() {
+
         if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
             global.sunsetDuration = TimeFormatter.durationFormate(authInfo.night_completed.sunrise_ts, authInfo.night_completed.sunset_ts)
             return TimeFormatter.durationFormate(authInfo.night_completed.sunrise_ts, authInfo.night_completed.sunset_ts)
@@ -1121,7 +989,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         var now = new Date()
         now = localNow(now)
         if (props.isNight && sunsetDate) {
-            if (now.getTime() > sunsetDate.getTime()) {
+            if (new Date().getTime() > sunsetDate.getTime()) {
                 global.sunsetDuration = TimeFormatter.countdown(sunsetDate.getTime(), now.getTime())
                 return TimeFormatter.countdown(sunsetDate.getTime(), now.getTime())
             }
@@ -1138,8 +1006,8 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         }
 
         var duration = (sunRise - sunSet) * 60 * 1000
-        global.sunsetDuration = TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
-        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
+        global.sunsetDuration = TimeFormatter.calculateTimeDifference(now.getTime(), now.getTime() + duration);
+        return TimeFormatter.calculateTimeDifference(now.getTime(), now.getTime() + duration);
 
         // //COMPLETED
         // if (time.last_real_check_time && time.status != 'WAIT_FOR_START' && time.status != 'COMPLETED') {
@@ -1168,11 +1036,11 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         }
 
         var now = new Date()
-        debugger
+        now = localNow(now)
         if (!props.isNight && sunriseDate) {
             if (now.getTime() > sunriseDate.getTime()) {
                 global.sunriseDuration = TimeFormatter.countdown(sunriseDate.getTime())
-                return TimeFormatter.countdown(sunriseDate.getTime())
+                return TimeFormatter.countdown(sunriseDate.getTime(), now.getTime())
             }
         }
 
@@ -1186,19 +1054,25 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         }
 
         var duration = (sunSet - sunRise) * 60 * 1000
-        global.sunriseDuration = TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
-        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
+        global.sunriseDuration = TimeFormatter.calculateTimeDifference(now.getTime(), now.getTime() + duration);
+        return TimeFormatter.calculateTimeDifference(now.getTime(), now.getTime() + duration);
     }
 
     function completedDate() {
         if (props.isNight) {
             if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
-                return TimeFormatter.dateDescription(authInfo.night_completed.sunset_ts)
+                if (localNow(new Date()).getTime() != new Date().getTime()) {
+                    return TimeFormatter.getMonthAndDayByTimestamp(authInfo.night_completed.sunrise_ts, true)
+                }
+                return TimeFormatter.dateDescription(authInfo.night_completed.sunrise_ts, true)
             }
             return ''
         }
         if (authInfo && authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
-            return TimeFormatter.dateDescription(authInfo.day_completed.sunrise_ts)
+            if (localNow(new Date()).getTime() != new Date().getTime()) {
+                return TimeFormatter.getMonthAndDayByTimestamp(authInfo.day_completed.sunset_ts, true)
+            }
+            return TimeFormatter.dateDescription(authInfo.day_completed.sunset_ts, true)
         }
         return ''
     }
@@ -1220,14 +1094,14 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         if (showArrow()) {
             if (props.isNight) {
                 if (authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
-                    return '更新暂停'
+                    return t('feature.day_night.update_paused')
                 }
-                return '已结束'
+                return t('feature.day_night.ended')
             }
-            return '更新暂停'
+            return t('feature.day_night.update_paused')
         }
         var strTime = props.isNight ? getSunsetDuration() : getSunriseDuration()
-        return (strTime.indexOf('小时') != -1 || strTime.indexOf('分钟') != -1) ? '即将到来' : '正在进行'
+        return (strTime.indexOf('小时') != -1 || strTime.indexOf('分钟') != -1) ? t('feature.day_night.upcoming') : t('feature.day_night.in_real_time')
     }
 
     function footerDesc() {
@@ -1255,18 +1129,51 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
         var now = new Date()
         if (props.isNight) {
             if (now.getTime() < sunsetDate.getTime()) {
-                return <IconSunset color={ColorType.night + '66'} width={14} />
+                return <IconSunset color={ColorType.night + '66'} width={rpxToPx(28)} />
 
             }
-            return <IconSunrise color={ColorType.night + '66'} width={14} />
+            return <IconSunrise color={ColorType.night + '66'} width={rpxToPx(28)} />
         }
 
         if (now.getTime() > sunriseDate.getTime() && now.getTime() < sunsetDate.getTime()) {
 
-            return <IconSunset color={ColorType.day + '66'} width={14} />
+            return <IconSunset color={ColorType.day + '66'} width={rpxToPx(28)} />
+        }
+        return <IconSunrise color={ColorType.day + '66'} width={rpxToPx(28)} />
+
+    }
+
+    function currentTime() {
+        var now = new Date()
+        var now2 = localNow(now)
+        if (now.getTime() == now2.getTime()) {
+            return ''
+        }
+        var offset = TimeFormatter.timeZoneOffset(authInfo.timezone);
+        var hour = Math.floor(Math.abs(offset) / 60)
+        var minute = Math.abs(offset) % 60
+        var time = ''
+        if (global.language == 'en') {
+            time = `${hour} h`
+            if (minute > 0) {
+                time += ` ${minute} m`
+            }
+        }
+        else {
+            time = `${hour}小时`
+            if (minute > 0) {
+                time += `${minute}分钟`
+            }
         }
-        return <IconSunrise color={ColorType.day + '66'} width={14} />
+        return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Text className='ring_city'>{getCity()}</Text>
+            <Text className='ring_clock' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{TimeFormatter.padZero(now2.getHours()) + ':' + TimeFormatter.padZero(now2.getMinutes())}</Text>
+            <Text className='ring_timezone'>{
+                offset > 0 ? t('feature.day_night.ahead_desc', { time: time }) : t('feature.day_night.behind_desc', { time: time })
+            }</Text>
+        </View>
 
+        // return (now.getMonth() + 1) + '.' + now.getDate() + ' ' + TimeFormatter.padZero(now.getHours()) + ':' + TimeFormatter.padZero(now.getMinutes())
     }
 
     return <Box><View style={{ position: 'relative' }}>
@@ -1283,9 +1190,12 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                         padding: 0,
                         alignItems: 'center'
                     }}>
-                        {
-                            props.isNight ? nightRing() : dayRing()
-                        }
+                        <View style={{ display: 'flex', position: 'relative' }}>
+                            {
+                                props.isNight ? nightRing() : dayRing()
+                            }
+                            <View style={{ color: '#fff', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center', display: 'flex' }}>{currentTime()}</View>
+                        </View>
                         <View style={{ display: 'flex', flexDirection: 'column', flexShrink: 0, flex: 1, marginLeft: rpxToPx(52) }}>
                             <Text className='ring_card_duration_title'>{props.isNight ? t('feature.common.overnight') : t('feature.common.day')}</Text>
                             <Text className='ring_card_duration_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? getSunsetDuration() : getSunriseDuration()}</Text>
@@ -1293,6 +1203,9 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                             {/* <Text className='duration_value22' style={{ color: !props.isNight ? ColorType.night : ColorType.day }}>{!props.isNight ? getSunsetTime() : getSunriseTime()}</Text> */}
 
                         </View>
+                        {
+                            !showArrow() && <Image className="card_arrow2" src={require('@/assets/images/arrow3.png')} />
+                        }
                         {/* <View style={{ position: 'absolute', right: -rpxToPx(20), top: -rpxToPx(20) }}>
                             {
                                 authInfo && authInfo.lat ?
@@ -1308,9 +1221,25 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                             }
                         </View> */}
                         <View className='day_card_header'>
-                            <View className='free' style={{ backgroundColor: props.isNight ? ColorType.night : ColorType.day, color: props.isNight ? '#fff' : '#1C1C1C' }}>{currentStatus()}</View>
+                            <View className='free' style={{ backgroundColor: props.isNight ? ColorType.night + '33' : ColorType.day + '33', color: props.isNight ? ColorType.night : ColorType.day }}>{currentStatus()}</View>
                         </View>
-                        <View className='day_card_footer'>
+                        {
+                            showArrow() ? <View className='day_card_footer'>
+                                <Text className='day_card_footer_date'>{t('feature.day_night.update_paused') == currentStatus() ? t('feature.day_night.last_updated') : ''}
+                                    {
+                                        completedDate()
+                                    }
+                                </Text>
+                                <Image className="card_arrow" src={require('@/assets/images/arrow3.png')} />
+                            </View> :
+                                <View className='day_card_footer2'>
+                                    {
+                                        footerIcon()
+                                    }
+                                    <Text className='footer_desc_text' style={{ color: props.isNight ? ColorType.night : ColorType.day, opacity: 0.4 }}>{footerDesc()}</Text>
+                                </View>
+                        }
+                        {/* <View className='day_card_footer'>
                             <Text className='day_card_footer_date'>
                                 {
                                     completedDate()
@@ -1326,7 +1255,7 @@ export default function DayNightCard(props: { isNight: boolean, count: number })
                             {
                                 !showArrow() && <Text className='footer_desc_text' style={{ color: props.isNight ? ColorType.night : ColorType.day, opacity: 0.4 }}>{footerDesc()}</Text>
                             }
-                        </View>
+                        </View> */}
                     </View>
                 </View>
             </View>

src/features/trackTimeDuration/components/DayNightDetailPopup.tsx

@@ -105,6 +105,9 @@ export default function DayNightDetailPopup(props: {
 
     function showExtraData() {
         var now = new Date()
+        if (props.authInfo && props.authInfo.timezone) {
+            now = new Date(TimeFormatter.transferTimestamp(now.getTime(), props.authInfo.timezone))
+        }
         if (props.isNight) {
             if (props.sunsetDate.getTime() > now.getTime()) {
                 return false
@@ -119,20 +122,20 @@ export default function DayNightDetailPopup(props: {
 
     function timeCount() {
         var now = new Date()
-        if (diffTimeZone()){
-            now = new Date(TimeFormatter.transferTimestamp(now.getTime(),props.authInfo.timezone))
+        if (diffTimeZone()) {
+            now = new Date(TimeFormatter.transferTimestamp(now.getTime(), props.authInfo.timezone))
         }
         if (props.isNight) {
             if (now.getTime() < props.sunriseTmrDate.getTime()) {
-                return TimeFormatter.countdown(props.sunsetDate.getTime(),now.getTime())
+                return TimeFormatter.countdown(props.sunsetDate.getTime(), now.getTime())
             }
-            return TimeFormatter.countdown(props.sunsetDate.getTime(),now.getTime())
+            return TimeFormatter.countdown(props.sunsetDate.getTime(), now.getTime())
         } else {
 
             if (now.getTime() < props.sunsetDate.getTime()) {
-                return TimeFormatter.countdown(props.sunriseDate.getTime(),now.getTime())
+                return TimeFormatter.countdown(props.sunriseDate.getTime(), now.getTime())
             }
-            return TimeFormatter.countdown(props.sunriseTmrDate.getTime(),now.getTime())
+            return TimeFormatter.countdown(props.sunriseTmrDate.getTime(), now.getTime())
 
 
         }
@@ -140,18 +143,18 @@ export default function DayNightDetailPopup(props: {
 
     function timeCount2() {
         var now = new Date()
-        if (diffTimeZone()){
-            now = new Date(TimeFormatter.transferTimestamp(now.getTime(),props.authInfo.timezone))
+        if (diffTimeZone()) {
+            now = new Date(TimeFormatter.transferTimestamp(now.getTime(), props.authInfo.timezone))
         }
         if (props.isNight) {
 
             if (now.getTime() < props.sunsetDate.getTime()) {
-                return TimeFormatter.countdown(props.sunriseTmrDate.getTime(),now.getTime())
+                return TimeFormatter.countdown(props.sunriseTmrDate.getTime(), now.getTime())
             }
-            return TimeFormatter.countdown(props.sunriseTmrDate.getTime(),now.getTime())
+            return TimeFormatter.countdown(props.sunriseTmrDate.getTime(), now.getTime())
 
         } else {
-            return TimeFormatter.countdown(props.sunsetDate.getTime(),now.getTime())
+            return TimeFormatter.countdown(props.sunsetDate.getTime(), now.getTime())
         }
     }
 
@@ -251,6 +254,13 @@ export default function DayNightDetailPopup(props: {
             return [t('feature.day_night.last_night'), t('feature.day_night.this_morning')]
             // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
         }
+
+        if (diffTimeZone()) {
+            return [
+                (props.nightDate.getMonth() + 1) + '月' + props.nightDate.getDate() + '日',
+                (props.sunriseDate.getMonth() + 1) + '月' + props.sunriseDate.getDate() + '日',
+            ];
+        }
         if (props.nightDate.getDate() == new Date().getDate()) {
             return [t('feature.day_night.tonight'), t('feature.day_night.tomorrow_morning')]
         }
@@ -268,6 +278,12 @@ export default function DayNightDetailPopup(props: {
             return `${t('feature.day_night.today')}`
             // return `Today ${sunriseTime} - ${sunsetTime}`
         }
+        if (diffTimeZone()) {
+            return [
+                (props.sunriseDate.getMonth() + 1) + '月' + props.sunriseDate.getDate() + '日',
+                (props.sunsetDate.getMonth() + 1) + '月' + props.sunsetDate.getDate() + '日',
+            ];
+        }
         if (props.dayDate.getDate() == new Date().getDate()) {
             return `${t('feature.day_night.today')}`
             // return `Today ${sunriseTime} - ${sunsetTime}`
@@ -315,6 +331,7 @@ export default function DayNightDetailPopup(props: {
                 )
             }
             else {
+                debugger
 
                 var list = nightDurationDesc()
                 timelineItems.push(
@@ -346,7 +363,7 @@ export default function DayNightDetailPopup(props: {
                 timelineItems.push(
                     {
                         status: 'done',
-                        title: '日落',//list[0],
+                        title: '日出',//list[0],
                         content: diffTimeZone() ? TimeFormatter.dateTimeFormate2(newT) : TimeFormatter.dateTimeFormate(newT, true),
                         date: '',
                         color: ColorType.day
@@ -356,19 +373,25 @@ export default function DayNightDetailPopup(props: {
                 timelineItems.push(
                     {
                         status: 'done',
-                        title: '日出',//list[1],
-                        content: diffTimeZone() ? TimeFormatter.dateTimeFormate2(newT) : TimeFormatter.dateTimeFormate(newT2, true),
+                        title: '日落',//list[1],
+                        content: diffTimeZone() ? TimeFormatter.dateTimeFormate2(newT2) : TimeFormatter.dateTimeFormate(newT2, true),
                         date: '',
                         color: ColorType.day
                     }
                 )
             }
             else {
+                var contentDate = dayDurationDesc()
+                var contentDate2 = dayDurationDesc()
+                if (diffTimeZone()) {
+                    contentDate = dayDurationDesc()[0]
+                    contentDate2 = dayDurationDesc()[1]
+                }
                 timelineItems.push(
                     {
                         status: showExtraData() ? 'done' : 'padding',
                         title: '日出',//dayDurationDesc(),
-                        content: dayDurationDesc() + ' ' + props.sunriseTime.substring(0, 5),
+                        content: contentDate + ' ' + props.sunriseTime.substring(0, 5),
                         date: '',
                         color: ColorType.day
                     }
@@ -378,7 +401,7 @@ export default function DayNightDetailPopup(props: {
                     {
                         status: 'padding',
                         title: '日落',//dayDurationDesc(),
-                        content: dayDurationDesc() + ' ' + props.sunsetTime.substring(0, 5),
+                        content: contentDate2 + ' ' + props.sunsetTime.substring(0, 5),
                         date: '',
                         color: ColorType.day
                     }
@@ -392,11 +415,34 @@ export default function DayNightDetailPopup(props: {
 
         </View>
             {
-                props.authInfo && props.authInfo.timezone && props.authInfo.timezone != timeZoneFormatted && <Text className="tz_note_desc">{t('feature.common.diff_tz_desc', { location: props.authInfo.timezone })}</Text>
+                props.authInfo && props.authInfo.timezone && props.authInfo.timezone != timeZoneFormatted && <Text className="tz_note_desc">{diffentTZDesc()}</Text>
             }
         </View>
     }
 
+    function diffentTZDesc() {
+        var offset = TimeFormatter.timeZoneOffset(props.authInfo.timezone);
+        var hour = Math.floor(Math.abs(offset) / 60)
+        var minute = Math.abs(offset) % 60
+        var time = ''
+        var type = ''
+        if (global.language == 'en') {
+            time = `${hour} h`
+            type = t('feature.day_night.ahead_of')
+            if (minute > 0) {
+                time += ` ${minute} m`
+            }
+        }
+        else {
+            time = `${hour}小时`
+            type = t('feature.day_night.behind')
+            if (minute > 0) {
+                time += `${minute}分钟`
+            }
+        }
+        return t('feature.day_night.diff_tz_desc', { location: props.authInfo.timezone,time:time,type: type})
+    }
+
     function getLocation() {
         var city = ''
         if ((props.authInfo as any).address) {
@@ -417,7 +463,7 @@ export default function DayNightDetailPopup(props: {
             city = t('feature.track_time_duration.third_ring.unknown')
         }
         // return city +' | '+parseInt(authInfo.lat)+'°'+ ' '+parseInt(authInfo.lng)
-        return `${city} | ${Math.abs(parseInt(props.authInfo.lat))}°${parseInt(props.authInfo.lat) < 0 ? 'S' : 'N'} ${Math.abs(parseInt(props.authInfo.lng))}°${parseInt(props.authInfo.lng) < 0 ? 'W' : 'E'}`
+        return `${city} | ${Math.abs(parseInt(props.authInfo.lat))}°${parseInt(props.authInfo.lat) < 0 ? 'S' : 'N'} ${Math.abs(parseInt(props.authInfo.lng))}°${parseInt(props.authInfo.lng) < 0 ? 'W' : 'E'} | ${props.authInfo.timezone}`
     }
 
     function chooseLocation() {

src/features/trackTimeDuration/components/DayNightRing.tsx

@@ -0,0 +1,213 @@
+import { View } from "@tarojs/components"
+import { bigRingRadius, getBgRing, getCommon, getDot, ringWidth, thirdRingRadius } from "../hooks/RingData";
+import Rings from "@/features/trackTimeDuration/components/Rings";
+import { RealRing } from './Rings'
+import { ColorType } from "@/context/themes/color";
+import { useEffect, useState } from "react";
+import { TimeFormatter } from "@/utils/time_format";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+
+export default function DayNightRing(props: {
+    isNight: boolean,
+    isThirdRing: boolean,
+    canvasId: any,
+    authInfo: any
+}) {
+    const [authInfo, setAuthInfo] = useState(props.authInfo)
+    const user = useSelector((state: any) => state.user);
+    const day = useSelector((state: any) => state.day);
+    const night = useSelector((state: any) => state.night);
+    const { t } = useTranslation()
+
+
+    useEffect(() => {
+        setAuthInfo(props.authInfo)
+    }, [props.authInfo])
+
+    function dayRing() {
+        var common = getCommon(null, true)
+        common.radius = props.isThirdRing ? thirdRingRadius : bigRingRadius;
+        common.lineWidth = ringWidth;
+        var bgRing = getBgRing()
+
+        const realRingBig: RealRing = {
+            color: ColorType.day + '66',
+            startArc: 0,
+            durationArc: 2
+        }
+
+        var now = new Date().getTime()
+
+
+        if (authInfo && authInfo.day_completed && now > authInfo.day_completed.sunset_ts) {
+            realRingBig.color = ColorType.day
+            var duration = (authInfo.day_completed.sunset_ts - authInfo.day_completed.sunrise_ts) / 1000
+            // var start = new Date(authInfo.day_completed.sunrise_ts)
+            // var start = new Date(authInfo.night_completed.sunset_ts)
+            var newT = TimeFormatter.transferTimestamp(authInfo.day_completed.sunrise_ts, authInfo.timezone)
+            var start = new Date(newT)
+            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
+            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={props.canvasId} />
+
+        }
+
+        if (authInfo && authInfo.timezone) {
+            now = TimeFormatter.transferTimestamp(now, authInfo.timezone)
+        }
+
+
+        var sunRise = 6 * 60
+        var sunSet = 18 * 60
+
+        var sunRiseObj = day.dayRingSunrise
+        var sunSetObj = day.dayRingSunset
+        sunRise = parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+
+
+        var duration = sunSet - sunRise
+
+        realRingBig.startArc = (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
+
+        var currentDot = getDot(null, false)
+        if (authInfo && authInfo.timezone) {
+            currentDot.offset = TimeFormatter.timeZoneOffset(authInfo.timezone)
+        }
+        var date = new Date(now)
+        var minutes = date.getHours() * 60 + date.getMinutes()
+        if (minutes < sunRise) {
+            minutes += 1440
+        }
+
+        currentDot.color = ColorType.day
+
+        var t = date.getHours() * 60 + date.getMinutes()
+        var duration2 = t - sunRise
+        if (duration2 < 0) {
+            duration2 += 24 * 60
+        }
+        var realRing: RealRing = {
+            color: ColorType.day,
+            startArc: (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
+            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
+        }
+        if (day.dayRingDate) {
+            if (new Date(day.dayRingDate).getDate() != new Date().getDate()) {
+                realRing = null;
+            }
+        }
+
+        if (!user.isLogin) {
+            currentDot = null
+            realRing = null
+        }
+
+        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={props.canvasId} />
+
+    }
+
+    function localNow(now: Date) {
+        if (authInfo && authInfo.timezone) {
+            return new Date(TimeFormatter.transferTimestamp(now.getTime(), authInfo.timezone))
+        }
+        return now
+    }
+
+    function nightRing() {
+        var common = getCommon(null, true)
+        common.radius = props.isThirdRing ? thirdRingRadius : bigRingRadius;
+        common.lineWidth = ringWidth;
+        var bgRing = getBgRing()
+
+        let realRingBig: RealRing = {
+            color: ColorType.night + '66',
+            startArc: 0,
+            durationArc: 2
+        }
+
+
+        var now1 = new Date().getTime()
+        if (authInfo && authInfo.timezone) {
+            now1 = TimeFormatter.transferTimestamp(now1, authInfo.timezone)
+        }
+
+        if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
+            var isCompleted = false;
+            if (authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
+                isCompleted = true
+            }
+
+            realRingBig.color = ColorType.night
+            var duration = (authInfo.night_completed.sunrise_ts - authInfo.night_completed.sunset_ts) / 1000
+            // var start = new Date(authInfo.night_completed.sunset_ts)
+            var newT = TimeFormatter.transferTimestamp(authInfo.night_completed.sunset_ts, authInfo.timezone)
+            var start = new Date(newT)
+            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
+
+            var currentDot = getDot(null, false)
+            currentDot.color = ColorType.night
+            currentDot.offset = (authInfo && authInfo.timezone) ? TimeFormatter.timeZoneOffset(authInfo.timezone) : 0;
+            //已结束未更新暂停时，显示current_dot
+            if (isCompleted) {
+                currentDot = null
+            }
+
+            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} currentDot={currentDot} canvasId={props.canvasId} />
+
+        }
+
+        var sunRise = 24 * 60 + 6 * 60
+        var sunSet = 18 * 60
+
+        var sunRiseObj = user.isLogin ? night.nightRingSunrise : '06:00:00'
+        var sunSetObj = user.isLogin ? night.nightRingSunset : '18:00:00'
+        sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
+        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
+        if (sunSetObj.indexOf('PM') != -1) {
+            sunSet += 12 * 60
+        }
+        // }
+        var duration = sunRise - sunSet
+        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
+
+        var currentDot = getDot(null, false)
+        currentDot.color = ColorType.night
+        currentDot.offset = (authInfo && authInfo.timezone) ? TimeFormatter.timeZoneOffset(authInfo.timezone) : 0
+
+        var now = new Date()
+        now = localNow(now)
+
+        var t1 = now.getHours() * 60 + now.getMinutes()
+        var duration2 = t1 - sunSet
+        if (duration2 < 0) {
+            duration2 += 24 * 60
+        }
+        let realRing: RealRing = {
+            color: ColorType.night,
+            startArc: (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
+            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
+        }
+
+        if (night.nightRingDate) {
+            if (new Date(night.nightRingDate).getDate() == now.getDate() && now.getHours() < 12) {
+                realRing = null;
+            }
+        }
+
+        // if (!user.isLogin) {
+        //     currentDot = null;
+        //     realRing = null;
+        // }
+
+
+        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 > duration ? null : realRing} currentDot={currentDot} canvasId={props.canvasId} />
+
+    }
+
+    return props.isNight ? nightRing() : dayRing()
+}

src/features/trackTimeDuration/components/IndexItem.tsx

@@ -393,9 +393,11 @@ export default function Component(props: { type: string, data: any, time: any, s
             if (count == 0) {
                 return t('feature.track_time_duration.stage.no_stage_selected')
             }
+            global.fastDuration = TimeFormatter.durationFormate(new Date().getTime(), new Date().getTime() + count)//`${count}小时`
             return TimeFormatter.durationFormate(new Date().getTime(), new Date().getTime() + count)//`${count}小时`
         }
         if (record.fast.status == 'WAIT_FOR_END') {
+            global.fastDuration = TimeFormatter.countdown(record.fast.real_start_time)
             return TimeFormatter.countdown(record.fast.real_start_time)
             // return TimeFormatter.formateTimeDifference(record.fast.real_start_time, new Date().getTime(), false)
         }
@@ -410,6 +412,7 @@ export default function Component(props: { type: string, data: any, time: any, s
                 return TimeFormatter.durationFormate(record.sleep.target_end_time, record.fast.target_end_time)
             }
         }
+        global.fastDuration = getDuration(record.fast)
         return getDuration(record.fast)
     }
 
@@ -418,8 +421,10 @@ export default function Component(props: { type: string, data: any, time: any, s
             return ''
         }
         if (record.sleep.status == 'WAIT_FOR_END') {
+            global.sleepDuration = TimeFormatter.formateTimeDifference(record.sleep.real_start_time, new Date().getTime(), false)
             return TimeFormatter.formateTimeDifference(record.sleep.real_start_time, new Date().getTime(), false)
         }
+        global.sleepDuration = getDuration(record.sleep)
         return getDuration(record.sleep)
     }
 

src/pages/account/Setting.tsx

@@ -43,12 +43,16 @@ export default function Page() {
                             Taro.switchTab({
                                 url: '/pages/clock/Clock'
                             })
-                            Taro.navigateBack();
+                            //check
+                            //退出到首页后，点击登录，会再次执行naviback函数
+                            // Taro.navigateBack();
                             console.log('setting navi back')
                         }
                         else {
                             navigation.goBack()
                         }
+                    }).catch((e)=>{
+
                     })
                     // dispatch(logout() as any);
                 }

src/pages/clock/Clock.tsx

@@ -134,7 +134,7 @@ export default function Page() {
 
     useEffect(() => {
         getCheckData()
-        global.pauseIndexTimer = !user.isLogin
+        // global.pauseIndexTimer = !user.isLogin
 
         if (user.isLogin) {
             uploadUserClient();

src/utils/time_format.ts

@@ -23,7 +23,6 @@ export class TimeFormatter {
     if (timeZone) {
       var localOffset = date.getTimezoneOffset()
       var targetOffset = localOffset + TimeFormatter.convertGMTtoOffset(timeZone)
-      debugger
       // 计算目标时间值（毫秒数加上偏移量的毫秒数）
       var targetTime = date.getTime() + (targetOffset * 60 * 1000);
 
@@ -571,7 +570,6 @@ export class TimeFormatter {
     var now = new Date()
     // var localOffset = now.getTimezoneOffset()
     // console.log(localOffset)
-    // debugger
     return `${TimeFormatter.padZero(now.getHours())}:${TimeFormatter.padZero(now.getMinutes())}`;
   }