change some ui

src/components/input/LimitPickers.tsx

@@ -125,15 +125,7 @@ const Component = forwardRef((props: {
         else {
             var limitDate = new Date(props.limit)
 
-            // const date = new Date();
-            // date.setDate(today.getDate() - (6 - list[0]));
-            // const year = date.getFullYear();
-            // const month = date.getMonth() + 1;
-            // const day = date.getDate();
-            // debugger
-            // const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[list[1]])}:${expandZero(minutes[list[2]])}:59`;
             if (getTimestamp(time) < props.limit) {
-                // console.log(6 - getDaysDiff(limitDate))
                 Taro.showToast({
                     icon: 'none',
                     title: '不能更小了',

src/components/input/SlidngScale.tsx

@@ -15,9 +15,6 @@ export default function Component(props: {
     const jingdu: number = props.step < 1 ? 10 : 1;
     const list: any[] = [];
 
-    // console.log(750/Taro.getSystemInfoSync().screenWidth)
-    // const ratio = 2//750.0/Taro.getSystemInfoSync().screenWidth;
-
     const slidngWidth = 10
 
     const [current, setCurrent] = useState(props.default_value)

src/components/layout/GlobalModal.tsx

@@ -18,7 +18,6 @@ const GlobalModal: React.FC = () => {
   if (!modal.isOpen) {
     return null;
   }
-  console.log('9527')
 
   return (
     <View className="modal">

src/components/layout/Header.tsx

@@ -1,9 +1,11 @@
 import { View, Text } from "@tarojs/components";
 import './Header.scss'
+import { useTranslation } from "react-i18next";
 
 export default function Component(props: { title: string, action?: Function }) {
+    const {t} = useTranslation()
     return <View className="header">
         <Text className="header_title">{props.title}</Text>
-        <Text className="header_action" onClick={() => { props.action!() }}>显示更多</Text>
+        <Text className="header_action" onClick={() => { props.action!() }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>
     </View>
 }

src/components/layout/layout.tsx

@@ -14,6 +14,7 @@ export default function Layout(props: {
     more?: Function,
     triggered?: boolean,
     title?: string,
+    titleColor?: string,
     header?: React.ReactNode,
     titleShowStyle: NaviBarTitleShowType
 }) {
@@ -60,11 +61,13 @@ export default function Layout(props: {
                 refresherDefaultStyle="white"
                 onRefresherRefresh={() => { props.refresh!() }}
                 upperThreshold={50}
-                onScrollToLower={() => { props.more?props.more():null }}
+                onScrollToLower={() => { props.more ? props.more() : null }}
                 refresherTriggered={triggered}>
                 {
                     props.title && <View className="layout_title_view">
-                        <Text className='layout_title'>{props.title}</Text>
+                        <Text className='layout_title'
+                            style={{ color: props.titleColor ? props.titleColor : '#fff' }}
+                        >{props.title}</Text>
                     </View>
                 }
                 {children}
@@ -80,11 +83,13 @@ export default function Layout(props: {
                 refresherDefaultStyle="white"
                 onRefresherRefresh={() => { props.refresh!() }}
                 upperThreshold={50}
-                onScrollToLower={() => { props.more?props.more():null }}
+                onScrollToLower={() => { props.more ? props.more() : null }}
                 refresherTriggered={triggered}>
                 {
                     props.title && <View className="layout_title_view">
-                        <Text className='layout_title'>{props.title}</Text>
+                        <Text className='layout_title'
+                            style={{ color: props.titleColor ? props.titleColor : '#fff' }}
+                        >{props.title}</Text>
                     </View>
                 }
                 <View className="grid_bg">
@@ -96,7 +101,9 @@ export default function Layout(props: {
             return <View className='flex'>
                 {
                     props.title && <View className="layout_title_view">
-                        <Text className='layout_title'>{props.title}</Text>
+                        <Text className='layout_title'
+                            style={{ color: props.titleColor ? props.titleColor : '#fff' }}
+                        >{props.title}</Text>
                     </View>
                 }
                 {children}

src/context/locales/zh.js

@@ -31,8 +31,8 @@ export default {
         set_schedule: {
             fast_title: '断食日程',
             sleep_title: '睡眠日程',
-            fast_subtitle: '',
-            sleep_subtitle: ''
+            fast_subtitle: '设定你的时间和时长目标',
+            sleep_subtitle: '设定你的时间和时长目标',
         },
         choose_language: {
             title: '',
@@ -51,7 +51,8 @@ export default {
         records_history: {
             time_title: '断食睡眠记录',
             metric_title: '{{title}}记录',
-            activity_title: '{{title}}记录'
+            activity_title: '{{title}}记录',
+            del_success: '删除成功'
         },
         setting: {
             title: '设置',
@@ -66,7 +67,15 @@ export default {
     feature: {
         common: {
             picker_cancel_btn: '取消',
-            picker_confirm_btn: '确定'
+            picker_confirm_btn: '确定',
+            wait_for_end: "待结束",
+            not_started: "未开始",
+            not_completed: "未完成",
+            btn_next: '下一步',
+            btn_done: '完成',
+            btn_set_and_next: "下一步",// "Set and Next"
+            btn_set_and_done: "完成",// "Set and Done"
+
         },
         auth: {
             create_account: {
@@ -104,7 +113,7 @@ export default {
                 countup: '已进行',             //indicator
                 countdown_not_due: '距结束',
                 timeout: '已超时',
-                fast_duration: '断食时长',    //时长picker titlte
+                fast_duration: '断食时长',    //时长picker title
                 sleep_duration: '睡眠时长',
                 real_fast_start_dt: '断食开始时间', //时间picker title
                 real_fast_end_dt: '断食结束时间',
@@ -141,11 +150,34 @@ export default {
                 start_time: '开始时间',
                 end_time: '结束时间',
                 duration: '时长',
-                schedule_start_time: '日程开始时间',
-                schedule_end_time: '日程结束时间',
-                schedule_duration: '日程时长',
-                btn_next: '下一步',
-                btn_done: '完成'
+
+                // 二级 modal - picker title
+                picker_fast_schedule_start_time: "断食日程开始时间",// "Fast schedule start time" 
+                picker_fast_schedule_end_time: "断食日程结束时间",// "Fast schedule end time" 
+                picker_fast_schedule_duration: "断食日程时长",// "Fast schedule duration" 
+                picker_sleep_schedule_start_time: "睡眠日程开始时间",// "Sleep schedule start time"
+                picker_sleep_schedule_end_time: "睡眠日程结束时间",// "Sleep schedule end time"
+                picker_sleep_schedule_duration: "睡眠日程时长",// "Sleep schedule duration"
+            },
+            choose_scenario: {
+                list: {
+                    item1: {
+                        name: '断食',
+                        desc: '',
+                        note: ''
+                    },
+                    item2: {
+                        name: '睡眠',
+                        desc: '',
+                        note: ''
+                    },
+                    item3: {
+                        name: '断食和睡眠',
+                        desc: '',
+                        note: ''
+                    },
+                }
+
             }
         }
     }

src/custom-tab-bar/index.tsx

@@ -7,7 +7,6 @@ import { useEffect, useState } from 'react'
 export default function TabBar() {
     const { t } = useTranslation()
     const [selIndex, setSelIndex] = useState(global.index?global.index:0)
-    console.log(selIndex)
     useEffect(() => {
         setSelIndex(global.index?global.index:0)
       }, [global.index])
@@ -46,20 +45,20 @@ export default function TabBar() {
     return (
         <View className='tabbar'>
             <View className={selIndex == 0 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(0)}>
-                <Text>{t('tabbar.clock')}</Text>
-                {/* <Text>时钟</Text> */}
+                {/* <Text>{t('tabbar.clock')}</Text> */}
+                <Text>生物钟</Text>
             </View>
             <View className={selIndex == 1 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(1)}>
-                {/* <Text>指标</Text> */}
-                <Text>{t('tabbar.metric')}</Text>
+                <Text>指标</Text>
+                {/* <Text>{t('tabbar.metric')}</Text> */}
             </View>
             <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
-                {/* <Text>运动</Text> */}
-                <Text>{t('tabbar.activity')}</Text>
+                <Text>运动</Text>
+                {/* <Text>{t('tabbar.activity')}</Text> */}
             </View>
             <View className={selIndex == 3 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(3)}>
-                <Text>{t('tabbar.more')}</Text>
-                {/* <Text>我</Text> */}
+                {/* <Text>{t('tabbar.more')}</Text> */}
+                <Text>更多</Text>
             </View>
         </View>
     )

src/custom-tab-bar2/index.js

@@ -22,7 +22,6 @@ Component({
   },
   methods: {
     update(index){
-      console.log('update index'+index)
       this.setData({
         selected:-1
       })
@@ -33,7 +32,6 @@ Component({
     },
     switchTab(e) {
       const data = e.currentTarget.dataset
-      console.log(data.index)
       this.setData({
         selected:data.index
       })

src/features/common/RecordItem.tsx

@@ -31,7 +31,6 @@ export default function Component(props: { children: React.ReactNode,onClick?:Fu
                             content: '确认要删除吗？',
                             success: function (res) {
                                 if (res.confirm) {
-                                    console.log('delete')
                                     props.delete!();
                                 }
                             }

src/features/common/SpecBtns.tsx

@@ -5,28 +5,29 @@ import { useState } from "react"
 import PostBtn from "./PostBtn"
 import './SpecBtns.scss'
 import Taro from "@tarojs/taro"
+import { useTranslation } from "react-i18next"
 
-export const rpxToPx = (n:number) =>{
-    var rate = Taro.getSystemInfoSync().windowWidth/750;
-    return n*rate;
+export const rpxToPx = (n: number) => {
+    var rate = Taro.getSystemInfoSync().windowWidth / 750;
+    return n * rate;
 }
 
 export const StartFastBtn = (props: { onClick: Function, isLoading?: boolean }) => {
-
+    const { t } = useTranslation()
 
     return (
-        <PostBtn title="开始断食" type={ButtonType.elevated}
+        <PostBtn title={t('feature.track_time_duration.console.fast_start')} type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
                 backgroundColor: '#AAFF00',
-                width:rpxToPx(320),
+                width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
                 color: 'black',
                 fontSize: 20,
-                fontWeight:500,
+                fontWeight: 500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -36,19 +37,20 @@ export const StartFastBtn = (props: { onClick: Function, isLoading?: boolean })
 }
 
 export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
+    const { t } = useTranslation()
     return (
-        <PostBtn title="开始睡眠" type={ButtonType.elevated}
+        <PostBtn title={t('feature.track_time_duration.console.sleep_start')} type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
             lowLight={props.lowLight ? props.lowLight : false}
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
                 backgroundColor: '#00FFFF',
-                width:rpxToPx(320),
+                width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
                 color: 'black',
-                fontWeight:500,
+                fontWeight: 500,
                 fontSize: 20,
                 display: 'flex',
                 alignItems: 'center',
@@ -60,8 +62,9 @@ export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean, is
 }
 
 export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
+    const { t } = useTranslation()
     return (
-        <PostBtn title="结束睡眠" type={ButtonType.outline}
+        <PostBtn title={t('feature.track_time_duration.console.sleep_end')} type={ButtonType.outline}
             onClick={() => { props.onClick() }}
             lowLight={props.lowLight ? props.lowLight : false}
             lightLoading={true}
@@ -71,11 +74,11 @@ export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLo
                 borderColor: '#00FFFF',
                 borderWidth: 2,
                 borderStyle: 'solid',
-                width:rpxToPx(320),
+                width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
                 color: '#00FFFF',
-                fontWeight:500,
+                fontWeight: 500,
                 fontSize: 20,
                 display: 'flex',
                 alignItems: 'center',
@@ -87,8 +90,9 @@ export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLo
 }
 
 export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
+    const { t } = useTranslation()
     return (
-        <PostBtn title="结束断食" type={ButtonType.outline}
+        <PostBtn title={t('feature.track_time_duration.console.fast_end')} type={ButtonType.outline}
             onClick={() => { props.onClick() }}
             lowLight={props.lowLight ? props.lowLight : false}
             lightLoading={true}
@@ -98,12 +102,12 @@ export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean, isLoa
                 borderColor: '#AAFF00',
                 borderWidth: 2,
                 borderStyle: 'solid',
-                width:rpxToPx(320),
+                width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
                 color: '#AAFF00',
                 fontSize: 20,
-                fontWeight:500,
+                fontWeight: 500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -128,7 +132,7 @@ export const SetScheduleBtn = (props: { onClick: Function, title: string, isFast
                 paddingRight: 40,
                 color: 'black',
                 fontSize: 20,
-                fontWeight:500,
+                fontWeight: 500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -137,7 +141,7 @@ export const SetScheduleBtn = (props: { onClick: Function, title: string, isFast
     )
 }
 
-export const ChooseScenarioBtn = (props: { onClick: Function, title: string,background:string  }) => {
+export const ChooseScenarioBtn = (props: { onClick: Function, title: string, background: string }) => {
     return (
         <Buttons title={props.title} type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
@@ -151,7 +155,7 @@ export const ChooseScenarioBtn = (props: { onClick: Function, title: string,back
                 paddingRight: 40,
                 color: 'black',
                 fontSize: 20,
-                fontWeight:500,
+                fontWeight: 500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -160,7 +164,7 @@ export const ChooseScenarioBtn = (props: { onClick: Function, title: string,back
     )
 }
 
-export const RecordMetricBtn = (props: { onClick: Function, title: string,themeColor:string }) => {
+export const RecordMetricBtn = (props: { onClick: Function, title: string, themeColor: string }) => {
     return (
         <PostBtn title={props.title} type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
@@ -172,7 +176,7 @@ export const RecordMetricBtn = (props: { onClick: Function, title: string,themeC
                 backgroundColor: props.themeColor,
                 color: 'black',
                 fontSize: 20,
-                fontWeight:500,
+                fontWeight: 500,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

src/features/common/TimePicker.tsx

@@ -1,9 +1,9 @@
 import PickerViews from "@/components/input/PickerViews";
-import {  PickerView, PickerViewColumn, View } from "@tarojs/components";
+import { PickerView, PickerViewColumn, View } from "@tarojs/components";
 
 import { useEffect, useState } from "react";
 
-export default function Component(props: { time: string, confirm: Function,cancel:Function }) {
+export default function Component(props: { time: string, confirm: Function, cancel: Function, title?: string, color?: string }) {
     var [hour, minute] = props.time.split(':').map(x => parseInt(x))
     const m = Math.round(minute / 5) * 5;
     const v = [hour, m / 5];
@@ -33,9 +33,8 @@ export default function Component(props: { time: string, confirm: Function,cance
     function onPickerChange(e) {
         var strHour = hours[e[0]] < 10 ? '0' + hours[e[0]] : hours[e[0]]
         var strMinute = minutes[e[1]] < 10 ? '0' + minutes[e[1]] : minutes[e[1]]
-        console.log(strHour + ':' + strMinute)
         props.confirm(strHour + ':' + strMinute)
     }
 
-    return <PickerViews value={dt} onChange={onPickerChange} items={[hours,minutes]} onCancel={()=>{props.cancel()}}/>
+    return <PickerViews themeColor={props.color} title={props.title} value={dt} onChange={onPickerChange} items={[hours, minutes]} onCancel={() => { props.cancel() }} />
 }

src/features/trackSomething/components/Activity.tsx

@@ -85,7 +85,6 @@ export default function Component(props: any) {
             if (list.length == 0) {
                 setErrorPage(true)
             }
-            // console.log('请求超时')
         })
     }
 

src/features/trackSomething/components/Metric_backup.tsx

@@ -1,300 +0,0 @@
-import { View, Text } from "@tarojs/components";
-import './Metric.scss'
-import { setAuth } from "../hooks/werun";
-import { useReady } from "@tarojs/taro";
-import { useSelector } from "react-redux";
-import { useEffect, useState } from "react";
-import Taro from "@tarojs/taro";
-import { metricCards, uploadMetric, uploadSteps } from "@/services/trackSomething";
-import { TimeFormatter } from "@/utils/time_format";
-import MetricItem from "./MetricItem";
-import { get } from "http";
-import Modal from "@/components/layout/Modal";
-import PickerViews from "@/components/input/PickerViews";
-import LimitPickers from "@/components/input/LimitPickers";
-import  SlidngScale from "@/components/input/SlidngScale";
-
-export default function Component(props: any) {
-    const user = useSelector((state: any) => state.user);
-    const [list, setList] = useState([])
-
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [isTimePickerOpen, setIsTimePickerOpen] = useState(false);
-    const [pickerValue, setPickerValue] = useState([]);
-    const [pickerItems, setPickerItems] = useState([]);
-    const [isPoint, setIsPoint] = useState(false)
-
-    const [metricItem, setMetricItem] = useState({})
-
-    const [strTime, setStrTime] = useState('')
-    const [time, setTime] = useState(0)
-
-    //未登录<->已登录 状态切换时，执行一次授权检查
-    useEffect(() => {
-        getCards();
-    }, [user.isLogin])
-
-    useReady(() => {
-        getCards();
-    })
-
-    const openModal = () => {
-        setIsModalOpen(true);
-    };
-
-    const closeModal = () => {
-        setIsModalOpen(false);
-    };
-
-    function getCards() {
-        metricCards().then(res => {
-            setList((res as any).cards)
-        })
-    }
-
-    //ts 把数组items: [{code: "_walk", value: 2180},{code: "_walk", value: 4444}]中的value取出来,/分割，组成字符串，如2180/4444
-    function getValues(items) {
-        var values = ''
-        items.map((item, index) => {
-            if (index == 0) {
-                values = item.value
-            }
-            else {
-                values = values + '/' + item.value
-            }
-        })
-        return values
-    }
-    function goDetail(item) {
-        if (user.isLogin) {
-            Taro.navigateTo({
-                url: '/pages/common/RecordsHistory?type=metric&code=' + item.code
-            })
-        }
-        else {
-            Taro.navigateTo({
-                url: '/pages/ChooseAuth'
-            })
-        }
-    }
-
-    function record(item: any) {
-
-        if (user.isLogin) {
-            setMetricItem(item)
-            var now = new Date();
-            var t = (now.getHours() < 10 ? '0' + now.getHours() : now.getHours()) + ":" + (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes());
-            setStrTime(t)
-            setTime(now.getTime())
-            if (item.schemas[0].type == 'DECIMAL') {
-                pointPicker(item.schemas[0])
-            }
-            else if (item.schemas.length > 1) {
-
-            }
-            else {
-                singlePicker(item.schemas[0])
-            }
-        }
-        else {
-            Taro.navigateTo({
-                url: '/pages/ChooseAuth'
-            })
-        }
-    }
-
-    function pointPicker(item: any) {
-        var min = item.min
-        var max = item.max
-        var step = item.step
-        var value = item.default_value
-        console.log(value)
-        var items: number[] = []
-        var items2: number[] = []
-
-        var value0Index = 0
-        var value1Index = 0
-
-        for (var i = min; i <= max; i++) {
-            if (i == Math.floor(value)) {
-                value0Index = i - min
-            }
-            items.push(i)
-            // items2.push(i)
-        }
-
-        for (var i = 0; i <= 9; i++) {
-            items2.push(i)
-        }
-        value1Index = Math.round(10 * (value - Math.floor(value)));
-        console.log(value1Index)
-
-        setPickerValue([value0Index, value1Index] as any)
-        setPickerItems([items, items2] as any)
-        setIsPoint(true)
-
-        openModal()
-    }
-
-    function singlePicker(item: any) {
-        var min = item.min
-        var max = item.max
-        var step = 1//item.step
-        var value = item.default_value
-
-        var items: number[] = []
-        for (var i = min; i <= max; i += step) {
-            if (i == value) {
-                setPickerValue([i - min] as any)
-            }
-            items.push(i)
-        }
-
-        setPickerItems([items] as any)
-        setIsPoint(false)
-
-        openModal()
-    }
-
-    function pickerChanged(e) {
-        closeModal();
-        var params = {}
-        var date = new Date(time)
-        var strDate = (date.getFullYear() + '') + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
-
-        if ((metricItem as any).schemas[0].type == 'DECIMAL') {
-            var array = pickerItems;
-            var value = array[0][e[0]] + '.' + array[1][e[1]]
-            console.log(value)
-
-
-            params = {
-                code: (metricItem as any).code,
-                timestamp: time,
-                date: strDate,
-                items: [{ code: (metricItem as any).schemas[0].code, value: value }]
-            }
-        }
-        else if ((metricItem as any).schemas.length > 1) {
-
-        }
-        else {
-            var array = pickerItems;
-            var value = array[0][e[0]] + ''
-            console.log(value)
-            params = {
-                code: (metricItem as any).code,
-                timestamp: time,
-                date: strDate,
-                items: [{ code: (metricItem as any).schemas[0].code, value: value }]
-            }
-        }
-
-        uploadMetric(params).then(res => {
-            getCards();
-        })
-    }
-
-    function showTimePicker() {
-        setIsTimePickerOpen(true)
-    }
-
-    function chooseTime(e){
-        setTime(e);
-        setStrTime(TimeFormatter.formatTimestamp(e))
-        setIsTimePickerOpen(false)
-    }
-
-    const limit = new Date().getTime() - 180 * 3600 * 1000 * 24;
-
-    return <View className="metric_container">
-        {
-            list.map((item: any, index: number) => {
-                var unit = ''
-                var value = '无记录'
-                var desc = '记录解锁趋势'
-                if (item.latest_record) {
-                    unit = item.schemas[0].default_unit
-                    value = getValues(item.latest_record.items)
-                    desc = TimeFormatter.formatTimestamp(item.latest_record.timestamp)
-                }
-                return <MetricItem title={item.name}
-                    value={value}
-                    unit={unit}
-                    desc={desc}
-                    btnText='记录'
-                    isDisabled={false}
-                    themeColor={item.theme_color}
-                    onClickDetail={() => { goDetail(item) }}
-                    onClick={() => { record(item) }}
-                />
-            })
-        }
-        <View className="space_width" />
-        {
-            isModalOpen && <Modal dismiss={closeModal}>
-                <View style={{
-                    backgroundColor: 'white',
-                    display: 'flex', flexDirection: 'column',
-                    width: '100%', height: '50%', color: '#000'
-                }}>
-                    <Text style={{ textAlign: 'center' }}>{(metricItem as any).name}</Text>
-                    <Text style={{ textAlign: 'center', paddingTop: 10, paddingBottom: 10 }} onClick={showTimePicker}>{strTime}</Text>
-                    <View style={{ position: 'relative' }}>
-                        <PickerViews onChange={pickerChanged}
-                            items={pickerItems}
-                            value={pickerValue}
-                            height={200} showBtns={true}
-                            onCancel={closeModal} />
-                        {isPoint && <View style={{
-                            position: 'absolute', width: '20%', height: 50, backgroundColor: 'transparent', left: '40%', top: 75,
-                            display: 'flex', alignItems: 'center', justifyContent: 'center'
-                        }}>
-                            <Text style={{ color: '#000', fontSize: 16, fontWeight: 'bold' }}>.</Text>
-                        </View>}
-                    </View>
-
-                </View>
-            </Modal>
-        }
-        {
-
-            isTimePickerOpen && <Modal dismiss={() => setIsTimePickerOpen(false)}>
-                <LimitPickers isRealTime={true} time={time} limit={limit} limitDay={180} onCancel={() => { setIsTimePickerOpen(false) }} onChange={(e) => {
-                    chooseTime(e)
-                    //  pickerConfirm(e)
-                    //  hidePicker()
-                }} />
-            </Modal>
-        }
-    </View>
-
-    /*
-    return <MetricItem title="行走"
-        value={allowRun ? stepInfo ? (stepInfo as any).step : '' : '未开启'}
-        unit={(allowRun && stepInfo) ? '步' : ''}
-        desc={allowRun ? stepInfo ? TimeFormatter.formatTimestamp(lastTime) : '' : '开启步数仅自己可见'}
-        btnText={allowRun ? isCheking ? '打卡中...' : '打卡' : '开启'}
-        isDisabled={isCheking}
-        themeColor='#EEC01F'
-        onClickDetail={goDetail}
-        onClick={checkout}
-    />*/
-
-    return <View className="metric_bg">
-        <Text className="metric_title">行走</Text>
-        {
-            !allowRun && <Text className="metric_value">未开启</Text>
-        }
-        {
-            !allowRun && <Text className="mteric_desc">开启步数仅自己可见</Text>
-        }
-        {
-            allowRun && stepInfo && <Text className="metric_value">{(stepInfo as any).step}<Text className="metric_unit">步</Text></Text>
-        }
-        {
-            allowRun && stepInfo && <Text className="mteric_desc">{TimeFormatter.formatTimestamp(lastTime)}</Text>
-        }
-        <View className="operate" onClick={checkout}>{allowRun ? '打卡' : '开启'}</View>
-    </View>
-}

src/features/trackSomething/components/activity_backup.tsx

@@ -1,370 +0,0 @@
-import { View, Text } from "@tarojs/components";
-import './Metric.scss'
-import { setAuth } from "../hooks/werun";
-import { useDidShow, useReady } from "@tarojs/taro";
-import { useDispatch, useSelector } from "react-redux";
-import { useEffect, useState } from "react";
-import Taro from "@tarojs/taro";
-import { activityCards, uploadSteps } from "@/services/trackSomething";
-import { TimeFormatter } from "@/utils/time_format";
-import MetricItem from "./MetricItem";
-import { ResultType, checkFail, checkRetry, checkStart, checkSuccess, setResult } from "@/store/action_results";
-import { uploadSessionKey } from "@/services/common";
-
-export default function Component(props: any) {
-    const user = useSelector((state: any) => state.user);
-    const checkResult = useSelector((state: any) => state.checkResult);
-    const [allowRun, setAllowRun] = useState(false)
-    const [stepInfo, setStepInfo] = useState(null)
-    const [lastTime, setLastTime] = useState(new Date().getTime())
-    const [isCheking, setIsChecking] = useState(false)
-    const [list, setList] = useState([])
-    const dispatch = useDispatch();
-    const [returnLoginData, setReturnLoginData] = useState(false)
-    const [showErrorBadge, setShowErrorBadge] = useState(false)
-    // const [title, setTitle] = useState('打卡')
-
-    //未登录<->已登录 状态切换时，执行一次授权检查
-    useEffect(() => {
-        getCards();
-        // checkAuth(false)
-    }, [user.isLogin])
-
-    useEffect(() => {
-        console.log('checkResult.type:' + checkResult.type)
-    }, [
-        checkResult.type
-    ])
-
-    //页面渲染完成后执行一次授权检查
-    useReady(() => {
-        // getCards();
-    })
-
-    useDidShow(() => {
-        if (list.length > 0) {
-            checkAuth(false)
-        }
-        // 
-    })
-
-    function getCards() {
-        activityCards().then(res => {
-            if (user.isLogin) {
-                setReturnLoginData(true)
-            }
-            else {
-                setReturnLoginData(false)
-            }
-
-            checkAuth(false)
-            setList((res as any).cards)
-        })
-    }
-
-    function checkAuth(autoCheck = true) {
-        console.log(new Date().getTime())
-        if (user.isLogin) {
-            // setAuth()
-            Taro.getSetting({
-                success: res => {
-                    //第一步，检测是否有授权 - 没有授权
-                    if (!res.authSetting['scope.werun']) {
-                        // setTitle('开启')
-                        setAllowRun(false)
-                    }
-                    else {
-                        setAllowRun(true)
-                        // setTitle('打卡')
-                        //自动打卡流程
-                        // if (!autoCheck) {
-                        //     return
-                        // }
-                        // var time = Taro.getStorageSync('lastUploadStepsTime')
-                        // if (time) {
-                        //     var now = new Date().getTime()
-                        //     if (now - time >= 30 * 24 * 3600 * 1000) {
-                        //         console.log('a')
-                        //         getWeRunData(true)
-                        //     }
-                        // }
-                        // else {
-                        //     console.log('b')
-                        //     getWeRunData(true)
-                        // }
-                    }
-                    console.log(new Date().getTime())
-                }
-            })
-        }
-        else {
-            // Taro.setStorageSync('lastUploadStepsTime', time)
-            setAllowRun(false)
-            // setTitle('开启');
-        }
-    }
-
-    function checkout() {
-        // console.log('开始获取步数的时间戳：' + new Date().getTime())
-        if (allowRun) {
-            setIsChecking(true)
-            dispatch(checkStart());
-
-            getWeRunData(false)
-        }
-        if (user.isLogin) {
-            setAuth(getWeRunData, refuseAuth)
-        }
-        else {
-            Taro.navigateTo({
-                url: '/pages/clock/ChooseAuth'
-            })
-        }
-    }
-
-    function getWeRunData(autoCheck = false) {
-        if (autoCheck) {
-            return
-        }
-        else {
-            dispatch(checkStart());
-        }
-
-        // setTitle('打卡');
-        setAllowRun(true)
-        var date = new Date();
-        var time = date.getTime()
-        var strDate = (date.getFullYear() + '') + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
-        Taro.getWeRunData({
-            success: res => {
-                // console.log('已获取步数的时间戳：' + new Date().getTime())
-                var params = {
-                    is_manual: autoCheck ? 0 : 1,
-                    timestamp: time,
-                    encryptedData: res.encryptedData,
-                    iv: res.iv,
-                    date: strDate,
-                    cloudID: res.cloudID,
-                }
-                uploadSteps(params).then(res => {
-                    if ((res as any).error_code == 'WX_STEP_PARSE_FAIL') {
-                        retry(params, autoCheck, time)
-                        dispatch(checkRetry())
-                        // if (!autoCheck) {
-                        //     Taro.showToast({
-                        //         icon: 'none',
-                        //         title: (res as any).error_message
-                        //     })
-                        // }
-                    }
-                    else {
-                        setShowErrorBadge(false)
-                        uploadSuccess(res, autoCheck, time)
-                    }
-
-                }).catch(e => {
-                    retry(params, autoCheck, time)
-                    Taro.checkSession({
-                        success: function () {
-                            console.log('打卡后获取session_key 未过期')
-                        },
-                        fail: function () {
-                            console.log('打卡后获取session_key 已过期')
-                        }
-                    })
-                    // if (!autoCheck)
-                    //     dispatch(setResult({ isSuccess: false }) as any);
-                });
-            }
-        })
-    }
-
-    function retry(params, autoCheck, time) {
-        Taro.login().then(res => {
-            Taro.getWeRunData({
-                success: res2 => {
-                    params.code = res.code;
-                    params.encryptedData = res2.encryptedData
-                    params.iv = res2.iv
-                    params.cloudID = res2.cloudID
-                    uploadSteps(params).then(res => {
-                        if ((res as any).error_code == 'WX_STEP_PARSE_FAIL') {
-                            if (!autoCheck) {
-                                dispatch(setResult({ isSuccess: false }) as any);
-                                setShowErrorBadge(true)
-                            }
-
-                        }
-                        else {
-                            setShowErrorBadge(false)
-                            uploadSuccess(res, autoCheck, time)
-                        }
-
-                    }).catch(e => {
-                        if (!autoCheck)
-                            dispatch(setResult({ isSuccess: false }) as any);
-                    })
-                }
-            })
-        })
-    }
-
-    function uploadSuccess(res, autoCheck, time) {
-        Taro.setStorageSync('lastUploadStepsTime', time)
-        if (!autoCheck)
-            dispatch(setResult({ isSuccess: true }) as any)
-        setStepInfo((res as any)[(res as any).length - 1])
-        setLastTime(time)
-        setIsChecking(false)
-        getCards();
-    }
-
-    function refuseAuth() {
-        // setTitle('开启');
-        setIsChecking(false)
-        setAllowRun(false)
-    }
-
-    function goDetail() {
-        if (user.isLogin) {
-            if (!allowRun) {
-                return;
-            }
-            Taro.navigateTo({
-                url: '/pages/common/RecordsHistory?type=activity'
-            })
-        }
-        else {
-            Taro.navigateTo({
-                url: '/pages/account/ChooseAuth'
-            })
-        }
-
-    }
-
-    // checkResult.type == 'ing' && setStrBtnTitle('打卡中...')
-    var btnTitle = '';
-    var isEnable = true;
-    if (allowRun) {
-        switch (checkResult.type) {
-            case ResultType.idle:
-                {
-                    btnTitle = '打卡'
-                    isEnable = true
-                }
-                break;
-            case ResultType.ing:
-                {
-                    btnTitle = '打卡中...'
-                    isEnable = false
-                }
-                break;
-            case ResultType.retry:
-                {
-                    btnTitle = '仍在打卡中...'
-                    isEnable = false
-                }
-                break;
-            case ResultType.success:
-                {
-                    btnTitle = '打卡成功'
-                    isEnable = false
-                }
-                break;
-            case ResultType.fail:
-                {
-                    btnTitle = '打卡失败'
-                    isEnable = false
-                }
-                break;
-            case ResultType.countdown:
-                {
-                    btnTitle = checkResult.title + 's'
-                    isEnable = false
-                }
-                break;
-            default:
-                break;
-        }
-    }
-    else {
-        btnTitle = '开启';
-        isEnable = true;
-    }
-
-    return <View>
-        {
-            list.map((item: any, index) => {
-                var value = '0'
-                var desc = ''
-                var unit = ''
-                if (item.latest_record) {
-                    value = item.latest_record.items[0].value
-                    if (item.latest_record.timestamp == 0) {
-                        desc = '今天待打卡'
-                    }
-                    else {
-                        desc = TimeFormatter.formatTimestamp(item.latest_record.timestamp)
-                    }
-
-                }
-                else {
-                    desc = '今天待打卡'
-                }
-
-                if (!allowRun) {
-                    value = '0'
-                    desc = '开启步数仅自己可见'
-                    unit = ''
-                }
-                else {
-                    unit = '步'
-                }
-
-                if (!user.isLogin || !returnLoginData) {
-                    value = '未登录'
-                    desc = '登录后可开启打卡'
-                    unit = ''
-                }
-
-                // if (user.isLogin && !allowRun){
-                //     value = '0'
-                //     desc = '开启步数仅自己可见'
-                //     unit = ''
-                // }
-
-                return <MetricItem title={item.name}
-                    // value={allowRun ? stepInfo ? (stepInfo as any).step : '' : '未开启'}
-                    value={value}
-                    unit={unit}
-                    desc={desc}
-                    btnText={btnTitle}
-                    isDisabled={!isEnable}
-                    themeColor={item.theme_color}
-                    onClickDetail={goDetail}
-                    showBadge={showErrorBadge && checkResult.type == 'idle'}
-                    onClick={() => {
-                        checkout()
-                    }}
-                />
-            })
-        }
-    </View>
-
-    return <View className="metric_bg">
-        <Text className="metric_title">行走</Text>
-        {
-            !allowRun && <Text className="metric_value">未开启</Text>
-        }
-        {
-            !allowRun && <Text className="mteric_desc">开启步数仅自己可见</Text>
-        }
-        {
-            allowRun && stepInfo && <Text className="metric_value">{(stepInfo as any).step}<Text className="metric_unit">步</Text></Text>
-        }
-        {
-            allowRun && stepInfo && <Text className="mteric_desc">{TimeFormatter.formatTimestamp(lastTime)}</Text>
-        }
-        <View className="operate" onClick={checkout}>{allowRun ? '打卡' : '开启'}</View>
-    </View>
-}

src/features/trackSomething/components/demoB.js

@@ -1,13 +0,0 @@
-
-import { Button } from '@tarojs/components';
-// import { actor } from 'src/redux/demoMachine';
-// import { useSelector } from '@xstate/react';
-
-
-export default function ComponentB(){
-    return <Button></Button>
-    // const [state,send] = useSelector(actor);
-    // return (
-    //     <Button onClick={()=>send({type:'INCREMENT'})}>{state.context.count}</Button>
-    // )
-}

src/features/trackTimeDuration/components/ChooseScenario.tsx

@@ -85,7 +85,7 @@ export default function Component() {
                 break;
         }
         return <View>
-            <ChooseScenarioBtn title='Next' onClick={next} background={background} />
+            <ChooseScenarioBtn title={t('feature.common.btn_next')} onClick={next} background={background} />
             {/* <Buttons title='Next' onClick={next} btnStyle={{ ...style, width: 320 }} /> */}
         </View>
     }
@@ -255,18 +255,4 @@ export default function Component() {
             <Footer children={footerContent()} />
         </View>
     </Layout>
-
-    // return <View className="container">
-    //     <Texts text={t('page.choose_scenario.title')} type={TextType.primary}></Texts>
-    //     <Texts text={t('page.choose_scenario.sub_title')} type={TextType.secondary}></Texts>
-    //     <View style={{ height: 20 }} />
-    //     {
-    //         scenarios.length>0&&<View style={{ position: 'relative', zIndex: 1 }}>
-    //             <SingleSelect items={items()} itemSelect={handleItemSelect} selIndex={selIndex} />
-    //         </View>
-    //     }
-
-
-    //     <Footer children={footerContent()} />
-    // </View>;
 }

src/features/trackTimeDuration/components/Console.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import Taro from "@tarojs/taro";
 import LimitPickers from '@/components/input/LimitPickers';
 import { endFast, endSleep, startFast, startSleep } from "../actions/TrackTimeActions";
-import { durationDatas, durationIndex, getColor, getTitle, textAlpha, textNextStepAlpha } from "../hooks/Console";
+import { durationDatas, durationIndex, getColor, getDurationTitle, getTimePickerTitle, getTitle, textAlpha, textNextStepAlpha } from "../hooks/Console";
 import PickerViews from "@/components/input/PickerViews";
 import Modal from "@/components/layout/Modal";
 import Stepper from "@/components/input/Stepper";
@@ -15,6 +15,7 @@ import Box from "@/components/layout/Box";
 import './Console.scss'
 import { ConsoleType, changeConsoleStatus } from "@/store/console";
 import { updateScenario } from "@/store/time";
+import { useTranslation } from "react-i18next";
 
 export default function Component(props: { isNextStep?: boolean }) {
     const scenario = useSelector((state: any) => state.scenario);
@@ -29,6 +30,7 @@ export default function Component(props: { isNextStep?: boolean }) {
     const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
     const limitPickerRef = useRef(null)
     const durationPickerRef = useRef(null)
+    const {t} = useTranslation()
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -168,10 +170,10 @@ export default function Component(props: { isNextStep?: boolean }) {
             }
         }
 
-        var title = getTitle(time)
+        var title = getTimePickerTitle(time,t)
         var color = getColor(time)
         if (props.isNextStep) {
-            title = '结束断食'
+            title = t('feature.track_time_duration.console.fast_end')
             color = '#AAFF00'
         }
 
@@ -351,7 +353,7 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     function durationPickerContent() {
         var color = getColor(time)
-        var title = getTitle(time)
+        var title = getDurationTitle(time,t)
         return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
             <PickerViews ref={durationPickerRef}
                 onChange={durationChange}

src/features/trackTimeDuration/components/Console3.tsx

@@ -1,482 +0,0 @@
-import { recordCheck } from "@/services/trackTimeDuration";
-import { View, Text, PickerView } from "@tarojs/components";
-import trackTimeService, { machine } from "@/store/trackTimeMachine"
-import { useEffect, useRef, useState } from "react";
-import { TimeFormatter } from "@/utils/time_format";
-import TimePickers from '@/components/input/TimePickers'
-import { useSelector } from "react-redux";
-import Taro from "@tarojs/taro";
-import LimitPickers from '@/components/input/LimitPickers';
-import { endFast, endSleep, startFast, startSleep } from "../actions/TrackTimeActions";
-import { durationDatas, durationIndex, getTitle, pickerDurations } from "../hooks/Console";
-import PickerViews from "@/components/input/PickerViews";
-import Modal from "@/components/layout/Modal";
-import Stepper from "@/components/input/Stepper";
-import { EndFastBtn, EndSleepBtn, StartFastBtn, StartSleepBtn } from "@/features/common/SpecBtns";
-import Box from "@/components/layout/Box";
-import './Console.scss'
-
-export default function Component() {
-    const scenario = useSelector((state: any) => state.scenario);
-    const time = useSelector((state: any) => state.time);
-    const [key, setKey] = useState('');
-    const [value, setValue] = useState('');
-    const user = useSelector((state: any) => state.user);
-    const common = useSelector((state: any) => state.common);
-    const [isFast, setIsFast] = useState(true);
-    const [fastDuration, setFastDuration] = useState<number>(0);
-    const [sleepDuration, setSleepDuration] = useState<number>(0);
-
-    const [isOpen, setIsOpen] = useState(false);
-    const [showModal, setShowModal] = useState(false);
-    const [fastPickerValue, setFastPickerValue] = useState([0, 0])
-    const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
-    const [isOpenDurationPicker, setIsOpenDurationPicker] = useState(false)
-    const limitPickerRef = useRef(null)
-    const durationPickerRef = useRef(null)
-
-
-    useEffect(() => {
-        getStateDetail();
-    }, [machine.context.checkData]);
-
-    useEffect(() => {
-        getStateDetail();
-    }, [machine.context.currentStatus])
-
-    useEffect(() => {
-        trackTimeService.onTransition(state => {
-            if ((state.value as any).FAST_SLEEP) {
-                setKey('FAST_SLEEP');
-                setValue((state.value as any).FAST_SLEEP);
-            }
-            if ((state.value as any).FAST) {
-                setKey('FAST');
-                setValue((state.value as any).FAST);
-            }
-            if ((state.value as any).SLEEP) {
-                setKey('SLEEP');
-                setValue((state.value as any).SLEEP);
-            }
-        });
-    }, []);
-
-    function getStateDetail() {
-        var state = trackTimeService.getSnapshot().value
-        if ((state as any).FAST_SLEEP) {
-            setKey('FAST_SLEEP');
-            setValue((state as any).FAST_SLEEP);
-            if ((state as any).FAST_SLEEP == 'WAIT_FOR_START' || (state as any).FAST_SLEEP == 'ONGOING3') {
-                setIsFast(true);
-            }
-            else if ((state as any).FAST_SLEEP == 'ONGOING1') {
-                setIsFast(false);
-            }
-        }
-        if ((state as any).FAST) {
-            setKey('FAST');
-            setValue((state as any).FAST);
-            setIsFast(true);
-        }
-        if ((state as any).SLEEP) {
-            setKey('SLEEP');
-            setValue((state as any).SLEEP);
-            setIsFast(false);
-        }
-
-        var checkData = machine.context.checkData;
-        if (checkData) {
-            var current_record = (checkData as any).current_record;
-            if (current_record.fast) {
-                var fastCount = current_record.fast.target_end_time - current_record.fast.target_start_time
-                setFastDuration(fastCount)
-                setFastPickerValue(durationIndex(current_record.fast.target_start_time, current_record.fast.target_end_time, common))
-            }
-
-            if (current_record.sleep) {
-                var sleepCount = current_record.sleep.target_end_time - current_record.sleep.target_start_time
-
-                setSleepDuration(sleepCount)
-                setSleepPickerValue(durationIndex(current_record.sleep.target_start_time, current_record.sleep.target_end_time, common))
-            }
-        }
-    }
-
-
-    function showPicker() {
-        setShowModal(true)
-        setIsOpen(true)
-        global.set_time = new Date().getTime()
-        console.log(global.set_time)
-    }
-
-    function hidePicker() {
-        setIsOpen(false)
-        setTimeout(() => {
-            setShowModal(false)
-        }, 1000)
-    }
-
-    function testLayout() {
-        if (!user.test_user) {
-            return <View />
-        }
-        var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
-        if (current_record == null) {
-            return <View />
-        }
-        var isStart = false;
-        if (value == 'WAIT_FOR_START' || value == 'ONGOING1') {
-            isStart = true
-        }
-        var isFast = false;
-        switch (value) {
-            case 'WAIT_FOR_START':
-            case 'ONGOING':
-                {
-                    isFast = (scenario.name == 'FAST' || scenario.name == 'FAST_SLEEP')
-                }
-                break;
-            case 'ONGOING1':
-            case 'ONGOING2':
-                {
-                    isFast = false;
-                }
-                break
-            case 'ONGOING3':
-                {
-                    isFast = true;
-                }
-                break;
-
-
-        }
-
-
-
-        return <View style={{ color: '#fff', paddingTop: 30, paddingLeft: 30, display: 'flex', flexDirection: 'column' }}>
-            <Text>check scenario:{isFast ? 'fast' : 'sleep'}</Text>
-            <Text>check type:{isStart ? 'start' : 'end'}</Text>
-            <Text style={{ marginTop: 30 }}>picker restriction</Text>
-            <Text style={{ marginLeft: 50 }}>min:{TimeFormatter.formatTimestamp(global.limit)}</Text>
-            <Text style={{ marginLeft: 50 }}>pick:{TimeFormatter.formatTimestamp(global.picker_time)}</Text>
-            <Text style={{ marginLeft: 50 }}>max{TimeFormatter.formatTimestamp(global.set_time)}</Text>
-
-            <Text style={{ marginTop: 30 }}>now:{TimeFormatter.formatTimestamp(new Date().getTime())}</Text>
-            <Text>elapsed:{TimeFormatter.calculateTimeDifference(global.picker_time, new Date().getTime())}</Text>
-
-            <Text style={{ marginTop: 30 }}>real start:{isStart ? '-' : TimeFormatter.formatTimestamp(isFast ? current_record.fast.real_start_time : current_record.sleep.real_start_time)}</Text>
-            <Text>real duration:{isStart ? '-' : TimeFormatter.calculateTimeDifference(isFast ? current_record.fast.real_start_time : current_record.sleep.real_start_time, new Date().getTime())}</Text>
-        </View>
-    }
-
-
-    function layoutContent() {
-        var limit = global.set_time - 7 * 3600 * 1000 * 24;
-        global.limit = limit
-        var current_record = machine.context.checkData ? (machine.context.checkData as any).current_record : null;
-        if (current_record && current_record.last_real_check_time) {
-            limit = current_record.last_real_check_time
-            global.limit = limit
-            //当set_time秒数<=latest_record_time秒数时,最小限制时间戳需+1分钟
-            if (new Date(global.set_time).getSeconds() <= new Date(current_record.last_real_check_time).getSeconds()) {
-                limit = limit + 60 * 1000
-            }
-        }
-
-        var color = isFast ? '#aaff00' : '#00ffff'
-        if (value == 'ONGOING2') {
-            color = '#00ffff'
-        }
-
-        var checkData = machine.context.checkData;
-        var current = (checkData as any).current_record
-        var title = getTitle(current)
-
-
-        return <LimitPickers ref={limitPickerRef} limit={limit} limitDay={8}
-            themeColor={color}
-            title={title}
-            onCancel={hidePicker} onChange={(e) => {
-                pickerConfirm(e)
-                hidePicker()
-            }} />
-    }
-
-    function pickerConfirm(t: number) {
-        var date = new Date(t)
-        var setDate = new Date(global.set_time);
-        date.setMilliseconds(setDate.getMilliseconds());
-        date.setSeconds(setDate.getSeconds());
-
-        t = date.getTime();
-
-        if (isFast) {
-            if (value == 'WAIT_FOR_START') {
-                startFast(t, fastDuration);
-            }
-            else {
-                endFast(t)
-            }
-        }
-        else {
-            if (value == 'WAIT_FOR_START' || value == 'ONGOING1') {
-                startSleep(t, sleepDuration);
-            }
-            else {
-                endSleep(t)
-            }
-        }
-    }
-
-    function mixedBtns() {
-        var checkData = machine.context.checkData;
-        var current = (checkData as any).current_record
-        return <View style={{ display: 'flex', marginTop: 22 }}>
-            {
-                (value == 'WAIT_FOR_START' || value == 'DONE') &&
-                <StartFastBtn onClick={showPicker} />
-            }
-            {
-                (value == 'ONGOING' || value == 'ONGOING3') &&
-                <EndFastBtn onClick={showPicker} lowLight={current.fast.target_end_time > new Date().getTime()} />
-            }
-            {
-                value == 'ONGOING1' && <StartSleepBtn onClick={showPicker} />
-            }
-            {
-                value == 'ONGOING2' && <EndSleepBtn onClick={showPicker} lowLight={current.sleep.target_end_time > new Date().getTime()} />
-
-            }
-        </View>
-    }
-
-    function textAlpha() {
-        var checkData = machine.context.checkData;
-        var current = (checkData as any).current_record
-        if (value == 'WAIT_FOR_START' || value == 'DONE') {
-            return 1;
-        }
-
-        if (value == 'ONGOING' || value == 'ONGOING3') {
-            if (current.scenario == 'SLEEP') {
-                return current.sleep.target_end_time > new Date().getTime() ? 0.4 : 1
-            }
-            return current.fast.target_end_time > new Date().getTime() ? 0.4 : 1
-        }
-        if (value == 'ONGOING1')
-            return 1//current.sleep.target_start_time > new Date().getTime()?0.4:1
-        if (value == 'ONGOING2')
-            return current.sleep.target_end_time > new Date().getTime() ? 0.4 : 1
-        return 1
-    }
-
-    function fastBtns() {
-        return <View style={{ display: 'flex', marginTop: 22 }}>
-            {
-                value == 'ONGOING' ? <EndFastBtn onClick={showPicker} lowLight={textAlpha() != 1} /> : <StartFastBtn onClick={showPicker} />
-            }
-        </View>
-    }
-
-    function sleepBtns() {
-        return <View style={{ display: 'flex', marginTop: 22 }}>
-            {
-                value == 'ONGOING' ? <EndSleepBtn onClick={showPicker} lowLight={textAlpha() != 1} /> : <StartSleepBtn onClick={showPicker} />
-            }
-        </View>
-    }
-
-    function durationChange(e) {
-        var count = (e[0] + common.duration.min) * 60 + e[1] * common.duration.step
-        isFast ? setFastDuration(count * 60000) : setSleepDuration(count * 60000);
-        isFast ? setFastPickerValue(e) : setSleepPickerValue(e)
-
-        setIsOpenDurationPicker(false)
-    }
-
-    function login() {
-        Taro.navigateTo({
-            url: '/pages/account/ChooseAuth'
-        })
-    }
-
-    function durationFormate() {
-        if (isFast) {
-            var t = fastDuration / 60000
-            var hour = Math.floor(t / 60)
-            var minute = Math.floor(t % 60)
-            return `${hour > 0 ? hour + '小时' : ''}${minute > 0 ? minute + '分钟' : ''}`
-        }
-        else {
-            var t = sleepDuration / 60000
-            var hour = Math.floor(t / 60)
-            var minute = Math.floor(t % 60)
-            return `${hour > 0 ? hour + '小时' : ''}${minute > 0 ? minute + '分钟' : ''}`
-        }
-
-    }
-
-    function showDurationPicker() {
-        setIsOpenDurationPicker(true)
-    }
-
-    if (!user.isLogin) {
-        return <View style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}>
-            <Text>16:00</Text>
-            {/* <PickerViews onChange={() => { }} items={[pickerDurations()]} value={[12 * 15]} /> */}
-            {/* <TimePickers time={isFast ? fastStr : sleepStr} content="" change={handlePickerChange} isPickerView={true} /> */}
-            <Text style={{ color: '#AAFF00' }} onClick={login}>Start Fast</Text>
-        </View>
-    }
-
-
-    function durationPickerContent() {
-        var color = isFast ? '#aaff00' : '#00ffff'
-        if (value == 'ONGOING2') {
-            color = '#00ffff'
-        }
-        var checkData = machine.context.checkData;
-        var current = (checkData as any).current_record
-        var title = getTitle(current)
-        return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
-            <PickerViews ref={durationPickerRef}
-                onChange={durationChange}
-                items={durationDatas(common)}
-                value={isFast ? fastPickerValue : sleepPickerValue}
-                themeColor={color}
-                title={title}
-                showBtns={true} onCancel={() => { setIsOpenDurationPicker(false) }} />
-        </View>
-    }
-
-    function minus() {
-        if (isFast) {
-            var count = fastDuration - 5 * 60 * 1000
-            setFastDuration(count)
-            var hour = count / 60000 / 60
-            var minute = count / 60000 % 60
-
-            setFastPickerValue(durationIndex('00:00', `${hour > 10 ? hour : '0' + hour}:${minute > 10 ? minute : '0' + minute}`, common))
-        }
-        else {
-            var count = sleepDuration - 5 * 60 * 1000
-
-            setSleepDuration(count)
-            var hour = count / 60000 / 60
-            var minute = count / 60000 % 60
-
-            setSleepPickerValue(durationIndex('00:00', `${hour > 10 ? hour : '0' + hour}:${minute > 10 ? minute : '0' + minute}`, common))
-        }
-    }
-
-    function plus() {
-        if (isFast) {
-            var count = fastDuration + 5 * 60 * 1000
-            setFastDuration(count)
-            var hour = count / 60000 / 60
-            var minute = count / 60000 % 60
-
-            setFastPickerValue(durationIndex('00:00', `${hour > 10 ? hour : '0' + hour}:${minute > 10 ? minute : '0' + minute}`, common))
-        }
-        else {
-            var count = sleepDuration + 5 * 60 * 1000
-
-            setSleepDuration(count)
-            var hour = count / 60000 / 60
-            var minute = count / 60000 % 60
-
-            setSleepPickerValue(durationIndex('00:00', `${hour > 10 ? hour : '0' + hour}:${minute > 10 ? minute : '0' + minute}`, common))
-        }
-    }
-
-    function disableMinus() {
-        if (isFast) {
-            if (fastDuration <= 60 * 60 * 1000) {
-                return true;
-            }
-        }
-        else {
-            if (sleepDuration <= 60 * 60 * 1000) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    function disablePlus() {
-        if (isFast) {
-            if (fastDuration >= 23 * 60 * 60 * 1000) {
-                return true;
-            }
-        }
-        else {
-            if (sleepDuration >= 23 * 60 * 60 * 1000) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    var textColor = '#AAFF00'
-    if (!isFast) {
-        textColor = '#00FFFF'
-    }
-
-    return (
-        <Box >
-            <View  style={{ display:'flex',flexDirection: 'column',alignItems: 'center', flexShrink: 0 }}>
-                {
-                    value == 'ONGOING' && <View>
-                        <Text className="counter_text" style={{ color: textColor, opacity: textAlpha() }}>{(machine.context.checkData as any).current_record.scenario == 'FAST' ?
-                            TimeFormatter.countdown((machine.context.checkData as any).current_record.fast.target_end_time) :
-                            TimeFormatter.countdown((machine.context.checkData as any).current_record.sleep.target_end_time)}</Text>
-                    </View>
-                }
-                {
-                    (value == 'ONGOING1' || value == 'WAIT_FOR_START') && <Stepper child={
-                        <Text className="stepper_text" style={{ color: textColor, opacity: textAlpha() }} onClick={showDurationPicker}>{durationFormate()}</Text>
-                    } minus={minus} plus={plus} disableMinus={disableMinus()} disablePlus={disablePlus()} />
-                    // <Text style={{marginBottom:10}} onClick={showDurationPicker}>时长：{durationFormate()}</Text>
-                }
-                {
-                    machine.context.checkData && value == 'ONGOING2' && <View>
-                        <Text className="counter_text" style={{ color: '#00ffff', opacity: textAlpha() }}>{TimeFormatter.countdown((machine.context.checkData as any).current_record.sleep.target_end_time)}</Text>
-                    </View>
-                }
-
-                {
-                    machine.context.checkData && value == 'ONGOING3' && <View>
-                        <Text className="counter_text" style={{ color: textColor, opacity: textAlpha() }}>{TimeFormatter.countdown((machine.context.checkData as any).current_record.fast.target_end_time)}</Text>
-                    </View>
-                }
-
-                <View>
-                    {
-                        key === 'FAST_SLEEP' && mixedBtns()
-                    }
-                    {
-                        key === 'FAST' && fastBtns()
-                    }
-                    {
-                        key === 'SLEEP' && sleepBtns()
-                    }
-                </View>
-                {
-                    showModal && isOpen && <Modal testInfo={testLayout()} children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={() => {
-                        var picker = limitPickerRef.current;
-                        pickerConfirm((picker as any).getConfirmData());
-                        setIsOpen(false);
-                    }} />
-                }
-                {
-                    isOpenDurationPicker && <Modal children={durationPickerContent()} dismiss={() => setIsOpenDurationPicker(false)} confirm={() => {
-                        var picker = durationPickerRef.current;
-                        durationChange((picker as any).getConfirmData());
-                        setIsOpenDurationPicker(false);
-                    }} />
-                }
-            </View>
-        </Box>
-    )
-}

src/features/trackTimeDuration/components/Dial.tsx

@@ -91,7 +91,7 @@ const Component = (props) => {
         //绘制起终点圆弧
         ctx.beginPath();
         ctx.arc(centerX, centerY, radius, startAngle, endAngle);
-        ctx.strokeStyle = canRingDrag ? "#3e3e3e" : "#1c1c1c";
+        ctx.strokeStyle = (canRingDrag || canStartDrag || canEndDrag) ? "#3e3e3e" : "#1c1c1c";
         ctx.lineWidth = 38;
         ctx.lineCap = "round";
         ctx.stroke();
@@ -132,7 +132,13 @@ const Component = (props) => {
         //绘制起点圆点
         ctx.beginPath();
         ctx.arc(pointX, pointY, 17, 0, 2 * Math.PI);
-        ctx.fillStyle = (canRingDrag || canStartDrag) ? "#3e3e3e" : "#1c1c1c";
+        // ctx.fillStyle = (canRingDrag || canStartDrag) ? "#1c1c1c" : "#3e3e3e";
+        if (canEndDrag||canRingDrag){ //拖icon
+            ctx.fillStyle  = '#3e3e3e'
+        }
+        else {  //idle
+            ctx.fillStyle  = '#1c1c1c'
+        }
         ctx.fill();
 
         //绘制起点图标
@@ -163,7 +169,13 @@ const Component = (props) => {
 
         ctx.beginPath();
         ctx.arc(pointX2, pointY2, 17, 0, 2 * Math.PI);
-        ctx.fillStyle = (canRingDrag || canEndDrag) ? "#3e3e3e" : "#1c1c1c";
+        // ctx.fillStyle = (canRingDrag || canEndDrag) ? "#1c1c1c" : "#3e3e3e";
+        if (canStartDrag || canRingDrag){ //拖icon
+            ctx.fillStyle  = '#3e3e3e'
+        }
+        else {  //idle
+            ctx.fillStyle  = '#1c1c1c'
+        }
         ctx.fill();
 
         //绘制终点图标
@@ -395,8 +407,8 @@ const Component = (props) => {
             drawCanvas(currentContext);
             canRingDrag = false;
 
-            if (canStartDrag || canEndDrag){
-                var type = canStartDrag?1:2
+            if (canStartDrag || canEndDrag) {
+                var type = canStartDrag ? 1 : 2
                 global.startDuration(type)
             }
             return;
@@ -415,8 +427,8 @@ const Component = (props) => {
 
         drawCanvas(currentContext);
 
-        if (canStartDrag || canEndDrag || canRingDrag){
-            var type = canStartDrag?1:canEndDrag?2:3
+        if (canStartDrag || canEndDrag || canRingDrag) {
+            var type = canStartDrag ? 1 : canEndDrag ? 2 : 3
             global.startDuration(type)
         }
         else {

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -15,15 +15,17 @@ import Rings from "./Rings";
 import Segment from "@/components/navigation/Segment";
 import Stage from "./Stage";
 import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
+import { useTranslation } from "react-i18next";
 
 export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function }) {
     const [showDetailModal, setShowDetailModal] = useState(false)
     const [segmentIndex, setSegmentIndex] = useState(0)
+    const {t} = useTranslation()
     const canvasId = props.data.id
     const record = props.data;
     function header() {
         if (props.type == 'latest') {
-            return <Header title="最近记录" action={() => {
+            return <Header title={t('feature.track_time_duration.record_fast_sleep.header.latest_record')} action={() => {
                 Taro.navigateTo({
                     url: '/pages/common/RecordsHistory?type=time&title=time'
                 })
@@ -36,7 +38,7 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
         delRecord(id
         ).then(res => {
             Taro.showToast({
-                title: '删除成功'
+                title: t('page.records_history.del_success')
             })
             props.delSuccess && props.delSuccess(props.data)
             // Taro.navigateBack()
@@ -221,14 +223,14 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
             fastDuration = getDuration(record.fast)
             sleepDuration = getDuration(record.sleep)
             if (record.status == 'ONGOING3') {
-                fastDuration = '待结束'
+                fastDuration = t('feature.common.wait_for_end')
             }
 
             if (record.sleep.status == "NOT_STARTED") {
-                sleepDuration = '未开始'
+                sleepDuration = t('feature.common.not_started')
             }
             else if (record.sleep.status == 'NOT_COMPLETED') {
-                sleepDuration = '未完成'
+                sleepDuration = t('feature.common.not_completed')
             }
             showFast = true
             showSleep = true
@@ -247,13 +249,13 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
             }
             <View className="duration_bg">
                 {
-                    showFast && <Text className="duration_title">断食</Text>
+                    showFast && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
                 }
                 {
                     showFast && <Text className="duration_value" style={{ color: '#AAFF00' }}>{fastDuration}</Text>
                 }
                 {
-                    showSleep && <Text className="duration_title">睡眠</Text>
+                    showSleep && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
                 }
                 {
                     showSleep && <Text className="duration_value" style={{ color: '#00FFFF' }}>{sleepDuration}</Text>

src/features/trackTimeDuration/components/Schedule.tsx

@@ -90,7 +90,9 @@ export default function Component(props: { type?: string, data?: any, delSuccess
             justifyContent: 'space-between', alignItems: 'center',
             marginBottom: 10, paddingRight: 10, boxSizing: 'border-box'
         }}>
-            <Text style={{ fontSize: 18, lineHeight: 18, fontWeight: 500 }}>{permission.wxPubFollow ? TimeFormatter.getDateAndWeek() : '日程提醒'}</Text>
+            <Text style={{ fontSize: 18, lineHeight: 18, fontWeight: 500 }}>
+                {permission.wxPubFollow ? TimeFormatter.getDateAndWeek() :
+                    t('feature.track_time_duration.schedule.unfollow_title')}</Text>
             {
                 !permission.wxPubFollow && <View >
                     <Switch isOn={permission.wxPubFollow} onClick={() => followWxPub()} />
@@ -120,7 +122,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
     function detailCenter() {
         if (!permission.wxPubFollow) {
             return <View className="tip_bg2">
-                <Text className="tip_text2">开启后，将显示今天的日程。</Text>
+                <Text className="tip_text2">{t('feature.track_time_duration.schedule.follow_tip')}</Text>
             </View>
         }
 
@@ -151,7 +153,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
         today.setSeconds(0)
         if (nextCheckTimestamp != 0 && today.getTime() > nextCheckTimestamp) {
             return <View className="tip_bg2">
-                <Text className="tip_text2">完成当前记录，恢复今天的日程。</Text>
+                <Text className="tip_text2">{t('feature.track_time_duration.schedule.timeout_tip')}</Text>
             </View >
         }
 
@@ -162,7 +164,9 @@ export default function Component(props: { type?: string, data?: any, delSuccess
                 props.data.scenario == 'FAST_SLEEP' && <View className="schedule_more" onClick={showStage}>
                     <View style={{ flex: 1 }} />
                     <Text style={{ textAlign: 'right' }}>{
-                        props.data.status == 'WAIT_FOR_START' ? 'Duration goals by stage' : 'Current stage'
+                        props.data.status == 'WAIT_FOR_START' ?
+                            t('feature.track_time_duration.schedule.duration_goals_by_stage') :
+                            t('feature.track_time_duration.schedule.current_stage')
                     }</Text>
                 </View>
             }

src/features/trackTimeDuration/components/Schedule_backup.tsx

@@ -1,697 +0,0 @@
-import { View, Text, Image } from "@tarojs/components";
-import trackTimeService, { machine } from "@/store/trackTimeMachine"
-import { useEffect, useState } from "react";
-import Taro from "@tarojs/taro";
-import { TimeFormatter } from "@/utils/time_format";
-// import "taro-ui/dist/style/components/float-layout.scss";
-import { delRecord } from "@/services/trackTimeDuration";
-import Modal from "@/components/layout/Modal";
-import Rings, { BgRing, CurrentDot, RealRing, RingCommon } from './Rings';
-import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
-import Timeline from "@/components/view/Timeline";
-import RecordItem from "@/features/common/RecordItem";
-import Box from "@/components/layout/Box";
-import './Schedule.scss'
-import { ModalType } from "@/utils/types";
-import Header from "@/components/layout/Header";
-import { useTranslation } from "react-i18next";
-
-
-export default function Component(props: { type?: string, data?: any, delSuccess?: Function }) {
-    const [checkData, setCheckData] = useState(null)
-    const { t } = useTranslation()
-    const [key, setKey] = useState('');
-    const [value, setValue] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [isLatest, setIsLatest] = useState(props.type == 'latest');
-    const [showDetailModal, setShowDetailModal] = useState(false)
-    const canvasId = props.type == 'latest' ? 'latest' : props.type == 'record' ? props.data.id : 'current'
-
-    useEffect(() => {
-        getStateDetail();
-    }, [machine.context.currentStatus])
-
-    useEffect(() => {
-        if (machine.context.checkData) {
-            setCheckData(machine.context.checkData as any);
-        }
-        getStateDetail();
-    }, [machine.context.checkData]);
-    useEffect(() => {
-        trackTimeService.onTransition(state => {
-            getStateDetail();
-        });
-    }, []);
-
-
-    function getStateDetail() {
-        if (props.type == 'latest') {
-            if (machine.context.checkData) {
-                setKey((machine.context.checkData as any).latest_record.scenario);
-                setValue((machine.context.checkData as any).latest_record.status);
-            }
-            return
-        }
-
-        var state = trackTimeService.getSnapshot().value
-        if ((state as any).FAST_SLEEP) {
-            setKey('FAST_SLEEP');
-            setValue((state as any).FAST_SLEEP);
-        }
-        if ((state as any).FAST) {
-            setKey('FAST');
-            setValue((state as any).FAST);
-        }
-        if ((state as any).SLEEP) {
-            setKey('SLEEP');
-            setValue((state as any).SLEEP);
-        }
-
-    }
-
-    function editSchedule() {
-        Taro.navigateTo({
-            url: '/pages/clock/SetSchedule'
-        })
-    }
-
-    function showStage(e) {
-        setIsLatest(false);
-        setIsOpen(true)
-        debugger
-        e.stopPropagation()
-    }
-
-    function showLatest(e) {
-        // startTimer();
-        setIsLatest(true)
-        setIsOpen(true)
-        debugger
-        e.stopPropagation()
-    }
-
-    function getTime(t1: number, t2: number) {
-        return TimeFormatter.calculateTimeDifference(t1, t2)
-    }
-
-
-
-    function getStepATime(obj) {
-        if (obj.status == 'COMPLETED' && obj.sleep.status == 'NOT_STARTED') {
-            return '未知'
-        }
-        return obj.status == 'ONGOING1' ?
-            getTime(obj.fast.real_start_time, (new Date()).getTime()) :
-            obj.sleep.real_start_time ? getTime(obj.sleep.real_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time) :
-                getTime(obj.sleep.target_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time)
-    }
-
-    function getStepBTime(obj) {
-        if (obj.status == 'ONGOING1') return 'Next up'
-        if (obj.status == 'ONGOING2') return getTime(obj.sleep.real_start_time, (new Date()).getTime())
-        if (obj.status == 'WAIT_FOR_START') return getTime(obj.sleep.target_end_time, obj.sleep.target_start_time)
-        if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return '未知'
-        return getTime(obj.sleep.real_end_time, obj.sleep.real_start_time)
-
-    }
-
-    function getStepCTime(obj) {
-        if (obj.status == 'ONGOING1') return 'Final stage'
-        if (obj.status == 'ONGOING2') return 'Next up'
-        if (obj.status == 'ONGOING3') return getTime(obj.sleep.real_end_time, (new Date()).getTime())
-        if (obj.status == 'WAIT_FOR_START') return getTime(obj.fast.target_end_time, obj.sleep.target_end_time)
-        if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return '未知'
-        return getTime(obj.fast.real_end_time, obj.sleep.real_end_time)
-    }
-
-    function layoutContent() {
-        debugger
-        //当前断食阶段
-        var obj = isLatest ? (checkData as any).latest_record : (checkData as any).current_record
-        if (props.type == 'record') {
-            obj = props.data
-        }
-        return <View style={{ flexDirection: 'column', display: 'flex', color: '#000', backgroundColor: '#fff', paddingTop: 50, paddingBottom: 50, position: 'relative' }}>
-            <Text style={{ position: 'absolute', top: 5, right: 20 }} onClick={() => setIsOpen(false)}>关闭</Text>
-            {
-                obj.status == 'WAIT_FOR_START' ? <Text>断食阶段目标</Text> :
-                    obj.status == 'COMPLETED' ? <Text>断食阶段</Text> :
-                        <Text>当前断食阶段</Text>
-            }
-            <View style={{ flexDirection: 'row', display: 'flex' }}>
-                <Text>阶段A</Text>
-                <Text style={{ color: obj.status == 'ONGOING1' ? '#AAFF00' : '', marginLeft: 20, marginRight: 20 }}> 睡前断食</Text>
-                <Text style={{ color: obj.status == 'ONGOING1' ? '#AAFF00' : '' }}> {
-                    getStepATime(obj)
-                }</Text>
-            </View>
-            <View style={{ flexDirection: 'row', display: 'flex' }}>
-                <Text>阶段B</Text>
-                <Text style={{ color: obj.status == 'ONGOING2' ? '#AAFF00' : '', marginLeft: 20, marginRight: 20 }}> 睡眠中断食</Text>
-
-                <Text style={{ color: obj.status == 'ONGOING2' ? '#AAFF00' : '' }}>
-                    {
-                        getStepBTime(obj)
-                    }
-                </Text>
-            </View>
-            <View style={{ flexDirection: 'row', display: 'flex' }}>
-                <Text>阶段C</Text>
-                <Text style={{ color: obj.status == 'ONGOING3' ? '#AAFF00' : '', marginLeft: 20, marginRight: 20 }}> 起床后断食</Text>
-                <Text style={{ color: obj.status == 'ONGOING3' ? '#AAFF00' : '' }}>
-                    {
-                        getStepCTime(obj)
-                    }
-                </Text>
-            </View>
-        </View>
-    }
-
-    //🚫❌⭕️✅
-    function statusString(isFast: boolean, isStart: boolean, data: any) {
-        if (props.type == 'latest' || props.type == 'record') {
-            if (isFast) {
-                if (data.fast.status == 'COMPLETED') {
-                    return '✅'
-                }
-            }
-            else {
-                if (data.sleep.status == 'COMPLETED') {
-                    return '✅'
-                }
-                else if (data.sleep.status == 'NOT_STARTED') {
-                    return '🚫'
-                }
-                else if (data.sleep.status == 'NOT_COMPLETED') {
-                    return isStart ? '✅' : '🚫'
-                }
-            }
-        }
-        if (value == 'WAIT_FOR_START') {
-            return '⭕️'
-        }
-        else if (value == 'ONGOING') {
-            if (isFast && isStart) {
-                return '✅'
-            }
-            else if (!isFast && isStart) {
-                return '✅'
-            }
-        }
-        else if (value == 'ONGOING1') {
-            if (isFast && isStart) {
-                return '✅'
-            }
-        }
-        else if (value == 'ONGOING2') {
-            if (isStart) {
-                return '✅'
-            }
-        }
-        else if (value == 'ONGOING3') {
-            if (isFast && !isStart) {
-                return '⭕️'
-            }
-            else {
-                return '✅'
-            }
-        }
-
-        return '⭕️'
-    }
-
-    function getStatus(isFast: boolean, isStart: boolean, data: any) {
-        if (props.type == 'latest' || props.type == 'record') {
-            if (isFast) {
-                if (data.fast.status == 'COMPLETED') {
-                    return 'done'
-                }
-            }
-            else {
-                if (data.sleep.status == 'COMPLETED') {
-                    return 'done'
-                }
-                else if (data.sleep.status == 'NOT_STARTED') {
-                    return 'un_done'
-                }
-                else if (data.sleep.status == 'NOT_COMPLETED') {
-                    return isStart ? 'done' : 'un_done'
-                }
-            }
-        }
-        if (value == 'WAIT_FOR_START') {
-            return 'padding'
-        }
-        else if (value == 'ONGOING') {
-            if (isFast && isStart) {
-                return 'done'
-            }
-            else if (!isFast && isStart) {
-                return 'done'
-            }
-        }
-        else if (value == 'ONGOING1') {
-            if (isFast && isStart) {
-                return 'done'
-            }
-        }
-        else if (value == 'ONGOING2') {
-            if (isStart) {
-                return 'done'
-            }
-        }
-        else if (value == 'ONGOING3') {
-            if (isFast && !isStart) {
-                return 'padding'
-            }
-            else {
-                return 'done'
-            }
-        }
-
-        return 'padding'
-    }
-
-    function scheduleItems(data) {
-        if (!data) {
-            return <View></View>
-        }
-        var obj = props.type == 'latest' ? (data as any).latest_record : (data as any).current_record;
-        if (props.type == 'record') {
-            obj = data//(data as any).latest_record
-        }
-
-        var timelineItems: any = [];
-        if (obj.fast) {
-            timelineItems.push(
-                {
-                    status: getStatus(true, true, obj),
-                    title: '开始断食',
-                    content: formateTime(obj.fast, false),
-                }
-            )
-        }
-        if (obj.sleep) {
-            timelineItems.push(
-                {
-                    status: getStatus(false, true, obj),
-                    title: '开始睡眠',
-                    content: formateTime(obj.sleep, false),
-                }
-            )
-        }
-        if (obj.sleep) {
-            timelineItems.push(
-                {
-                    status: getStatus(false, false, obj),
-                    title: '结束睡眠',
-                    content: formateTime(obj.sleep, true),
-                }
-            )
-        }
-        if (obj.fast) {
-            timelineItems.push(
-                {
-                    status: getStatus(true, false, obj),
-                    title: '结束断食',
-                    content: formateTime(obj.fast, true),
-                }
-            )
-        }
-
-        return <Timeline items={timelineItems} />
-
-        // return <View>
-        //     {
-        //         obj && <View style={{ flexDirection: 'column', display: 'flex' }}>
-        //             {obj.fast && <Text>{statusString(true, true, obj)}开始断食：{formateTime(obj.fast, false)}</Text>}
-        //             {obj.sleep && <Text>{statusString(false, true, obj)}开始睡眠：{formateTime(obj.sleep, false)}</Text>}
-        //             {obj.sleep && <Text>{statusString(false, false, obj)}结束睡眠：{formateTime(obj.sleep, true)}</Text>}
-        //             {obj.fast && <Text>{statusString(true, false, obj)}结束断食：{formateTime(obj.fast, true)}</Text>}
-        //         </View>
-        //     }
-        // </View>
-    }
-
-    function formateTime(obj: any, isEnd: boolean) {
-
-        if (isEnd) {
-            if (obj.real_end_time) {
-                return TimeFormatter.formatTimestamp(obj.real_end_time)
-            }
-            else {
-                return TimeFormatter.formatTimestamp(obj.target_end_time)
-            }
-        }
-        else {
-            if (obj.real_start_time) {
-                return TimeFormatter.formatTimestamp(obj.real_start_time)
-            }
-            else {
-                return TimeFormatter.formatTimestamp(obj.target_start_time)
-            }
-        }
-
-    }
-
-    function more(e) {
-        Taro.showActionSheet({
-            itemList: ['删除', '分享']
-        })
-            .then(res => {
-                console.log(res.tapIndex)
-                switch (res.tapIndex) {
-                    case 0:
-                        {
-                            del()
-                        }
-                        break;
-                }
-            })
-            .catch(err => {
-                console.log(err.errMsg)
-            })
-        e.stopPropagation()
-    }
-
-    function del() {
-        var id = props.type == 'record' ? props.data.id : (checkData as any).latest_record.id
-        delRecord(id
-        ).then(res => {
-            Taro.showToast({
-                title: '删除成功'
-            })
-            props.delSuccess && props.delSuccess(props.data)
-            // Taro.navigateBack()
-        })
-    }
-
-    function all() {
-        if (props.type == 'latest') {
-            Taro.navigateTo({
-                url: '/pages/common/RecordsHistory?type=time&title=Time'
-            })
-        }
-    }
-
-    // const common: RingCommon = {
-    //     useCase: 'Record',
-    //     radius: 50,
-    //     lineWidth: 8,
-    //     isFast: true,
-    //     status: getRecord()?getRecord().status:'WAIT_FOR_START'
-    // }
-
-    // const common2: RingCommon = {
-    //     useCase: 'Record',
-    //     radius: 40,
-    //     lineWidth: 8,
-    //     isFast: true,
-    //     status: getRecord()?getRecord().status:'WAIT_FOR_START'
-    // }
-
-    // const bgRing: BgRing = {
-    //     color: '#262626'
-    // }
-
-    // const realRing: RealRing = {
-    //     color: '#AAFF00',
-    //     startArc: 0,
-    //     durationArc: 0
-    // }
-
-    // const realRing2: RealRing = {
-    //     color: '#00FFFF',
-    //     startArc: 0,
-    //     durationArc: 0
-    // }
-
-    // const currentDot: CurrentDot = {
-    //     color: '#AAFF00',
-    //     lineWidth: 8,
-    //     borderColor: 'black'
-    // }
-
-    // const currentDot2: CurrentDot = {
-    //     color: '#00FFFF',
-    //     lineWidth: 8,
-    //     borderColor: 'black'
-    // }
-
-    // function startArc(time: number) {
-    //     var date = new Date(time);
-    //     var hour = date.getHours();
-    //     var minute = date.getMinutes();
-    //     var second = date.getSeconds();
-    //     return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
-    // }
-
-    function durationArc(start_time: number, end_time: number) {
-        var duration = (end_time - start_time) / 1000;
-        return duration / (24 * 3600) * 2 * Math.PI;
-    }
-
-    function getRecord() {
-        var detail = props.type == 'record' ? props.data : checkData
-        if (detail) {
-            var record = detail;
-            if (props.type == 'latest') {
-                record = detail.latest_record
-            }
-            else if (props.type != 'record') {
-                record = detail.current_record
-            }
-
-            return record;
-        }
-        return
-    }
-
-
-
-    function bigRing() {
-        var record = getRecord()
-        if (!record) return null
-
-        var common = getCommon(null, true)
-        var bgRing = getBgRing()
-
-        if (props.type == 'record' || props.type == 'latest') {
-            var realRing = getReal(record, true, true)
-            return <Rings common={common} bgRing={bgRing} canvasId={canvasId} realRing={realRing} />
-        }
-        else {
-            var currentDot1 = getDot(record, true)
-            var targetBigRing1 = getTarget(record, true)
-            if (record.status == 'ONGOING') {
-                var realRing1 = getReal(record, true, false)
-
-                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId={canvasId} />
-            }
-            if (record.status == 'WAIT_FOR_START') {
-                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId={canvasId} />
-            }
-            var realRing1 = getReal(record, true, false)
-            return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={canvasId} />
-        }
-    }
-
-    function smallRing() {
-        if (!checkData) return null
-        var record = getRecord()
-        if (record.scenario == 'FAST_SLEEP') {
-            var common = getCommon(null, false)
-            var bgRing = getBgRing()
-            var realRing = getReal(record, false, false)
-            if (props.type == 'record' || props.type == 'latest') {
-                if (record.sleep.status == 'WAIT_FOR_END') {
-                    realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
-                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
-                }
-                else if (record.sleep.status == 'NOT_COMPLETED') {
-                    realRing.durationArc = 0.01
-                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
-                }
-                else if (record.sleep.status == 'COMPLETED') {
-                    realRing = getReal(record, false, true)
-                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
-                }
-                return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} />
-            }
-            else {
-
-
-                var currentDot = getDot(record, false)
-                var targetRing = getTarget(record, false)
-                if (record.status == 'ONGOING2') {
-                    var realRing = getReal(record, false, false)
-                    return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId={canvasId + 'small'} />
-                }
-                if (record.status == 'ONGOING3') {
-                    currentDot.color = 'rgba(0, 255, 255, 0.5)'
-                }
-                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={canvasId + 'small'} />
-            }
-            // if (record.sleep.status == 'WAIT_FOR_END') {
-            //     realRing2.startArc = startArc(record.sleep.target_start_time)
-            //     realRing2.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
-            //     return <Rings common={common2} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing2} />
-            // }
-            // else if (record.sleep.status == 'NOT_COMPLETED') {
-            //     realRing2.startArc = startArc(record.sleep.target_start_time)
-            //     realRing2.durationArc = 0.01
-            //     return <Rings common={common2} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing2} />
-            // }
-            // else if (record.status == 'WAIT_FOR_START') {
-            //     common2.useCase = 'Clock'
-            //     return <Rings common={common2} bgRing={bgRing} currentDot={currentDot2} canvasId={canvasId + 'small'} />
-            // }
-
-            // return <Rings common={common2} bgRing={bgRing} canvasId={canvasId + 'small'} />
-        }
-        return null
-    }
-
-    function rings() {
-        return <View style={{ position: 'relative', zIndex: 1 }}>
-            {
-                bigRing()
-            }
-            <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
-                {
-                    smallRing()
-                }
-            </View>
-        </View>
-    }
-
-    function schedules() {
-        return scheduleItems(props.type == 'record' ? props.data : checkData)
-    }
-
-    function detail() {
-        return <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center', position: 'relative' }} onClick={all}>
-            {
-                (props.type == 'latest' || props.type == 'record') && rings()
-            }
-            {
-                schedules()
-            }
-            {
-                ((props.type == 'record' && props.data.scenario == 'FAST_SLEEP') || (props.type == 'latest' && key == 'FAST_SLEEP')) && <Text onClick={showLatest}>Durations by stage</Text>
-            }
-            {
-                props.type != 'record' && props.type != 'latest' && key == 'FAST_SLEEP' && (value == 'WAIT_FOR_START' ? <Text onClick={showStage}>Duration goals by stage</Text> : <Text onClick={showStage}>Current stage</Text>)
-            }
-
-            {
-                props.type == 'record' && <Text style={{ position: 'absolute', right: 20, top: 20 }} onClick={more}>More</Text>
-            }
-
-
-        </View >
-    }
-
-    function getDuration(obj) {
-        if (!obj) {
-            debugger
-        }
-        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()
-        }
-        return TimeFormatter.calculateTimeDifference(start, end)
-    }
-
-    function showDetail(record) {
-        if (props.type == 'latest') {
-            setShowDetailModal(true)
-            return;
-        }
-        // 
-        var node = (<Modal children={schedules()}
-            modalType={ModalType.center}
-            dismiss={() => {
-                global.showModal(false, null)
-            }}
-            confirm={() => { }} />);
-        global.showModal(true, node);
-    }
-
-    function recordDetail() {
-        var record = getRecord()
-        var fastDuration = ''
-        var sleepDuration = ''
-        if (record.scenario == 'FAST_SLEEP') {
-            fastDuration = getDuration(record.fast)
-            sleepDuration = getDuration(record.sleep)
-        }
-        else if (record.scenario == 'FAST') {
-            fastDuration = getDuration(record.fast)
-        }
-        else {
-            sleepDuration = getDuration(record.sleep)
-        }
-        return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-            {
-                rings()
-            }
-            <View className="duration_bg">
-                {
-                    fastDuration.length > 0 && <Text className="duration_title">断食</Text>
-                }
-                {
-                    fastDuration.length > 0 && <Text className="duration_value" style={{ color: '#AAFF00' }}>{fastDuration}</Text>
-                }
-                {
-                    sleepDuration.length > 0 && <Text className="duration_title">睡眠</Text>
-                }
-                {
-                    sleepDuration.length > 0 && <Text className="duration_value" style={{ color: '#00FFFF' }}>{sleepDuration}</Text>
-                }
-            </View>
-            <Image className="arrow1" src={require('@/assets/images/arrow.png')} />
-        </View>
-    }
-
-    function header() {
-        if (props.type == 'latest') {
-            return <Header title="最近记录" action={() => {
-                Taro.navigateTo({
-                    url: '/pages/common/RecordsHistory?type=time&title=time'
-                })
-            }} />
-        }
-        return null
-    }
-
-    if (props.type == 'record' || props.type == 'latest') {
-        var record = getRecord()
-        if (!record) return <View />
-        return <Box header={header()}>
-            <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
-                onClick={() => { showDetail(record) }}
-            >{recordDetail()}
-            </RecordItem>
-            {
-                showDetailModal && <Modal children={schedules()}
-                    modalType={ModalType.center}
-                    dismiss={() => setShowDetailModal(false)}
-                    confirm={() => { }} />
-            }
-        </Box>
-        // return <RecordItem canDel={record.status == 'COMPLETED'} delete={del}>{detail()}</RecordItem>
-    }
-
-    return <Box title={t('page.clock.schedule.title')}>
-        {
-            detail()
-        }
-    </Box>
-
-
-}

src/features/trackTimeDuration/components/SetSchedule.scss

@@ -5,7 +5,6 @@
     border-radius: 56px;
     display: flex;
     flex-direction: column;
-    height: 1000px;
     margin-top: 20px;
 }
 
@@ -14,6 +13,7 @@
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
+    height: 90px;
 }
 
 .item1{
@@ -21,16 +21,24 @@
     flex: 1;
     align-items: center;
     justify-content: center;
-    background-color: orange;
+    // background-color: pink;
     flex-direction: column;
+    height: 90px;
 }
 
 .item_title{
-    font-size: 28px;
-    line-height: 28px;
+    font-size: 32px;
+    line-height: 32px;
     color: #fff;
 }
 
+.subtitle{
+    color: #fff;
+    opacity: 0.4;
+    font-size: 36px;
+    margin-bottom: 20px;
+    margin-left:40px;
+}
 .item_text{
     margin-top: 10px;
     font-size: 48px;
@@ -39,8 +47,36 @@
     font-weight: bold;
 }
 
+
+
+.dial_bg{
+    margin-top: 40px;
+    margin-bottom: 40px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+.duration_bg{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 90px;
+    margin-bottom: 40px;
+    margin-right: 40px;
+}
+
+.duration_title{
+    font-size: 32px;
+    line-height: 32px;
+    color: #fff;
+}
+
 .duration{
     font-size: 48px;
-    margin-bottom: 40px;
+    line-height: 48px;
+    margin-top: 10px;
     text-align: center;
+    font-weight: bold;
 }

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -25,6 +25,7 @@ export default function Component() {
   const canvasRef = useRef(null);
   const [scenario] = useState(useSelector((state: any) => state.scenario))
   // const scenario = useSelector((state: any) => state.scenario);
+  const isDebugMode = false
   const common = useSelector((state: any) => state.common);
 
   const [isOpen, setIsOpen] = useState(false)
@@ -264,44 +265,76 @@ export default function Component() {
   }
 
   function layoutContent() {
-    return <PickerViews ref={pickerRef} onChange={durationChange} items={durationDatas(common)} value={pickerValue} height={200} showBtns={true} onCancel={() => { setIsOpen(false) }} />
+    return <PickerViews ref={pickerRef}
+      onChange={durationChange}
+      items={durationDatas(common)}
+      value={pickerValue} height={200}
+      title={scenario.step == 'fast' ?
+        t('feature.track_time_duration.dial.picker_fast_schedule_duration') :
+        t('feature.track_time_duration.dial.picker_sleep_schedule_duration')}
+      themeColor={scenario.step == 'fast' ? '#AAFF00' : '#00FFFF'}
+      showBtns={true} onCancel={() => { setIsOpen(false) }} />
+  }
+
+  function pickerTitle() {
+    if (scenario.step == 'fast') {
+      if (chooseStart) {
+        return t('feature.track_time_duration.dial.picker_fast_schedule_start_time');
+      }
+      return t('feature.track_time_duration.dial.picker_fast_schedule_end_time');
+    }
+    else {
+      if (chooseStart) {
+        return t('feature.track_time_duration.dial.picker_sleep_schedule_start_time');
+      }
+      return t('feature.track_time_duration.dial.picker_sleep_schedule_end_time');
+    }
   }
 
 
   function timeContent() {
-    return <TimePicker time={chooseStart ? startTime : endTime} confirm={chooseStart ? onStartTimeChange : onEndTimeChange} cancel={() => { setIsTimeOpen(false) }} />
+    return <TimePicker time={chooseStart ? startTime : endTime}
+      color={scenario.step == 'fast' ? '#AAFF00' : '#00FFFF'}
+      title={pickerTitle()}
+      confirm={chooseStart ? onStartTimeChange : onEndTimeChange}
+      cancel={() => { setIsTimeOpen(false) }} />
   }
 
   function detail() {
     return <View >
-      {/* <Text>场景名称{scenario.name}</Text> */}
+      <Text className="subtitle">{t('page.set_schedule.fast_subtitle')}</Text>
 
       <View className="box">
-        <View className="header">
-          <View className="item1" style={{ opacity: operateType == 1 || operateType == 3 ? 1 : 0.4 }} onClick={() => {
+        <View className="header" style={{ backgroundColor: isDebugMode ? '#EEC01F' : 'transparent' }}>
+          <View className="item1" style={{ opacity: operateType == 1 || operateType == 3 ? 1 : 0.4, backgroundColor: isDebugMode ? 'pink' : 'transparent' }} onClick={() => {
             setChooseStart(true)
             setIsTimeOpen(true)
           }}>
-            <Text className="item_title">{scenario.step == 'fast' ? 'Fast starts' : 'Sleep starts'}</Text>
+            <Text className="item_title">{t('feature.track_time_duration.dial.start_time')}</Text>
             <Text className="item_text">{startTime}</Text>
           </View>
-          <View className="item1" style={{ opacity: operateType == 2 || operateType == 3 ? 1 : 0.4 }} onClick={() => {
+          <View style={{ width: 23 }} />
+          <View className="item1" style={{ opacity: operateType == 2 || operateType == 3 ? 1 : 0.4, backgroundColor: isDebugMode ? 'pink' : 'transparent' }} onClick={() => {
             setChooseStart(false)
             setIsTimeOpen(true)
           }}>
-            <Text className="item_title">{scenario.step == 'fast' ? 'Fast ends' : 'Sleep ends'}</Text>
+            <Text className="item_title">{t('feature.track_time_duration.dial.end_time')}</Text>
             <Text className="item_text">{endTime}</Text>
           </View>
 
         </View>
-        <View style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <View className="dial_bg" style={{ backgroundColor: isDebugMode ? 'pink' : 'transparent' }}>
           <Dial ref={canvasRef} />
         </View>
-        <Text className="duration" style={{ opacity: operateType == 1 || operateType == 2 ? 1 : 0.4 }} onClick={() => { setIsOpen(true) }}>{hours > 0 ? hours + ' hours ' : ''}{minutes > 0 ? minutes + ' minutes' : ''}</Text>
+        <View className="duration_bg" style={{ opacity: operateType == 1 || operateType == 2 ? 1 : 0.4, backgroundColor: isDebugMode ? 'pink' : 'transparent' }} onClick={() => { setIsOpen(true) }}>
+          <Text className="duration_title">{t('feature.track_time_duration.dial.duration')}</Text>
+          <Text className="duration"  >{hours > 0 ? hours + '小时' : ''}{minutes > 0 ? minutes + '分钟' : ''}</Text>
+        </View>
+
       </View>
 
       <Footer>
-        <SetScheduleBtn title={scenario.step == 'fast' ? 'Set fast schedule' : 'Set sleep schedule'}
+        <SetScheduleBtn title={scenario.step == 'fast' ? t('feature.common.btn_set_and_next') : t('feature.common.btn_set_and_done')}
           lowLight={operateType != 0}
           isFast={scenario.step == 'fast'}
           onClick={() => start()} />
@@ -321,7 +354,9 @@ export default function Component() {
     </View>
   }
 
-  return <Layout title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
+  return <Layout
+    titleColor={scenario.step == 'fast' ? '#AAFF00' : '#00FFFF'}
+    title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
     titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.flex}>
     {
       detail()

src/features/trackTimeDuration/components/TitleBar.scss

@@ -1,47 +0,0 @@
-.detail{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-    color: #fff;
-    background-color: #000;
-}
-
-.title{
-    color: #fff;
-    font-size: 48px;
-    line-height: 48px;
-    margin-bottom: 8px;
-}
-
-.time{
-    color: #fff;
-    opacity: 0.4;
-    font-size: 32px;
-    line-height: 48px;
-}
-
-.detail_item{
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.title_bg{
-    padding-top: 9px;
-    position: relative;
-    width: 100px;
-}
-
-.badge{
-    position: absolute;
-    right: -9px;
-    top: 0px;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background-color: #AAFF00;
-}

src/features/trackTimeDuration/components/TitleBar.tsx

@@ -1,82 +0,0 @@
-import { View, Text } from "@tarojs/components";
-import './TitleBar.scss'
-import { useEffect, useState } from "react";
-import trackTimeService, { machine } from "@/store/trackTimeMachine";
-import { TimeFormatter } from "@/utils/time_format";
-import Taro from "@tarojs/taro";
-import { recordCheck } from "@/services/trackTimeDuration";
-import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
-
-export default function Component() {
-    const { t } = useTranslation()
-    const [checkData, setCheckData] = useState(null)
-    const user = useSelector((state: any) => state.user);
-    useEffect(() => {
-        if (machine.context.checkData) {
-            setCheckData(machine.context.checkData as any);
-        }
-    }, [machine.context.checkData]);
-
-    useEffect(() => {
-        trackTimeService.onTransition(_ => {
-            if (machine.context.checkData) {
-                setCheckData(machine.context.checkData as any);
-            }
-        });
-    }, []);
-
-    function more() {
-        global.checkActionSheetData()
-    } 
-
-    if (!user.isLogin) {
-        return <View className="detail" onClick={more}>
-            <View className="detail_item">
-                <View className="title_bg">
-                    <Text className="title">断食</Text>
-                </View>
-                <Text className="time">16:00</Text>
-            </View>
-        </View>
-    }
-
-    if (!checkData) {
-        return <View />
-    }
-    return <View className="detail" onClick={more}>
-        {
-            ((checkData as any).current_record.scenario == 'FAST' || (checkData as any).current_record.scenario == 'FAST_SLEEP') &&
-            <View className="detail_item">
-                <View className="title_bg">
-                    <Text className="title">断食</Text>
-                    {
-                        ((checkData as any).current_record.status == 'ONGOING' ||
-                            (checkData as any).current_record.status == 'ONGOING1' ||
-                            (checkData as any).current_record.status == 'ONGOING2' ||
-                            (checkData as any).current_record.status == 'ONGOING3') ? <View className="badge" /> : <View />
-                    }
-                </View>
-                <Text className="time">{TimeFormatter.calculateTimeDifference((checkData as any).current_record.fast.target_start_time,
-                    (checkData as any).current_record.fast.target_end_time, true)}</Text>
-            </View>
-        }
-        {
-            ((checkData as any).current_record.scenario == 'SLEEP' || (checkData as any).current_record.scenario == 'FAST_SLEEP') &&
-            <View className="detail_item">
-                <View className="title_bg">
-                    <Text className="title">睡眠</Text>
-                    {
-                        ((checkData as any).current_record.status == 'ONGOING' ||
-                            (checkData as any).current_record.status == 'ONGOING2') ? <View className="badge" style={{ backgroundColor: '#00FFFF' }} /> : <View />
-                    }
-                </View>
-                {
-                    (checkData as any).current_record.status == 'ONGOING3' ? <Text className="time">已完成</Text> : <Text className="time">{TimeFormatter.calculateTimeDifference((checkData as any).current_record.sleep.target_start_time,
-                        (checkData as any).current_record.sleep.target_end_time, true)}</Text>
-                }
-
-            </View>
-        }
-    </View>
-}

src/features/trackTimeDuration/hooks/Console.tsx

@@ -1,4 +1,5 @@
 import { TimeFormatter } from "@/utils/time_format";
+import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 
 // const common = useSelector((state: any) => state.common);
@@ -95,30 +96,71 @@ export const durationTime = (start: string, end: string) => {
 
 
 //按钮文字
-export const getTitle = (data) => {
+export const getTitle = (data, t) => {
     if (data.scenario == 'FAST') {
         if (data.status == 'WAIT_FOR_START') {
-            return '开始断食'
+            return t('feature.track_time_duration.console.fast_start')
         }
-        return '结束断食'
+        return t('feature.track_time_duration.console.fast_end')
     }
     else if (data.scenario == 'SLEEP') {
         if (data.status == 'WAIT_FOR_START') {
-            return '开始睡眠'
+            return t('feature.track_time_duration.console.sleep_start')
         }
-        return '结束睡眠'
+        return t('feature.track_time_duration.console.sleep_end')
     }
     else {
         if (data.status == 'WAIT_FOR_START') {
-            return '开始断食'
+            return t('feature.track_time_duration.console.fast_start')
         }
         else if (data.status == 'ONGOING1') {
-            return '开始睡眠'
+            return t('feature.track_time_duration.console.sleep_start')
         }
         else if (data.state == 'ONGOING2') {
-            return '结束睡眠'
+            return t('feature.track_time_duration.console.sleep_end')
         }
-        return '结束睡眠'
+        return t('feature.track_time_duration.console.sleep_end')
+    }
+}
+
+export const getDurationTitle = (data, t) => {
+    if (data.scenario == 'FAST') {
+        return t('feature.track_time_duration.console.fast_duration')
+    }
+    else if (data.scenario == 'SLEEP') {
+        return t('feature.track_time_duration.console.sleep_duration')
+    }
+    else {
+        if (data.status == 'WAIT_FOR_START') {
+            return t('feature.track_time_duration.console.fast_duration')
+        }
+        return t('feature.track_time_duration.console.sleep_duration')
+    }
+}
+
+export const getTimePickerTitle = (data, t) => {
+    if (data.scenario == 'FAST') {
+        if (data.status == 'WAIT_FOR_START')
+            return t('feature.track_time_duration.console.real_fast_start_dt')
+        return t('feature.track_time_duration.console.real_fast_end_dt')
+    }
+    else if (data.scenario == 'SLEEP') {
+        if (data.status == 'WAIT_FOR_START')
+            return t('feature.track_time_duration.console.real_sleep_start_dt')
+        return t('feature.track_time_duration.console.real_sleep_end_dt')
+    }
+    else {
+        if (data.status == 'WAIT_FOR_START') {
+            return t('feature.track_time_duration.console.real_fast_start_dt')
+        }
+        else if (data.status == 'ONGOING1') {
+            return t('feature.track_time_duration.console.real_sleep_start_dt')
+        }
+        else if (data.status == 'ONGOING2') {
+            return t('feature.track_time_duration.console.real_sleep_end_dt')
+        }
+
+        return t('feature.track_time_duration.console.real_fast_end_dt')
     }
 }
 

src/pages/clock/Clock.tsx

@@ -12,9 +12,7 @@ import { wxPubFollow } from '@/services/permission';
 import { gobalConfigs, staticResources, uploadSessionKey } from '@/services/common';
 import Clocks from '@/features/trackTimeDuration/components/Clock';
 import Console from '@/features/trackTimeDuration/components/Console';
-import More from '@/features/trackTimeDuration/components/More';
 import Schedule from '@/features/trackTimeDuration/components/Schedule';
-import TitleBar from '@/features/trackTimeDuration/components/TitleBar';
 import { getChecks, getClocks } from '@/services/trackTimeDuration';
 import { setScenario } from '@/store/scenario';
 
@@ -119,9 +117,7 @@ export default function IndexPage() {
 
   function checkSession() {
     if (process.env.TARO_ENV === 'weapp') {
-      console.log('session request')
       thirdPartRequest(RequestType.RequestTypeCheckSession).then(res => {
-        console.log('session_key 未过期，并且在本生命周期一直有效')
       }).catch(err => {
         console.log('session_key 已经失效，需要更新登录code')
         thirdPartRequest(RequestType.RequestTypeWXLogin).then(result => {
@@ -319,7 +315,6 @@ export default function IndexPage() {
           needShowAddTip && <Tooltip title="添加到我的小程序" closeTip={() => { setNeedShowAddTip(false) }} />
         }
 
-        {/* <TitleBar /> */}
         <Box>
           <View className='clock_bg'>
             <Clocks />