update

src/components/basic/Buttons.tsx

@@ -34,7 +34,8 @@ export default function Buttons(props: {
     lightLoading?:boolean
 }) {
 
-    function onClick() {
+    function onClick(e) {
+        e.stopPropagation()
         if (props.disabled) return
         props.onClick()
     }

src/components/basic/Icons.tsx

@@ -3,15 +3,15 @@ import './Icons.scss'
 
 export const IconMinus = (props: { color: string, disable?: boolean }) => {
     return <View className='icon_bg'>
-        <View className='minus' style={{ backgroundColor: props.disable?'#000D1F':props.color }}></View>
+        <View className='minus' style={{ backgroundColor: props.disable?'#FFFFFF66':props.color }}></View>
     </View>
 }
 
 export const IconPlus = (props: { color: string, disable?: boolean }) => {
     return <View className='icon_bg'>
-        <View className='minus' style={{ backgroundColor: props.disable?'#000D1F':props.color }}></View>
+        <View className='minus' style={{ backgroundColor: props.disable?'#FFFFFF66':props.color }}></View>
         <View className='plus_bg'>
-            <View className='plus' style={{ backgroundColor: props.disable?'#000D1F':props.color }}/>
+            <View className='plus' style={{ backgroundColor: props.disable?'#FFFFFF66':props.color }}/>
         </View>
     </View>
 }

src/components/input/Inputs.tsx

@@ -34,7 +34,7 @@ export default function Component({
                 textContentType={isSecure ? 'password' : 'none'}
                 type={isSecure ? 'password' : 'text'}
                 onInput={handleInputChange}
-                selectionColor={ColorType.fast}
+                selectionColor={global.fastColor?global.fastColor:ColorType.fast}
                 disabled={disabled?disabled:false}
                 onFocus={() => {
                     setIsFocus(true)

src/components/input/SingleSelect.scss

@@ -14,5 +14,5 @@
 }
 
 .item_select{
-    border: solid 4px $fastColor;
+    border: solid 4px #fff;
 }

src/components/input/SingleSelect.tsx

@@ -3,7 +3,10 @@ import { useEffect, useState } from "react";
 import './SingleSelect.scss'
 import check from '@/assets/svg/check.svg'
 
-export default function Component(props: { items: any[],itemSelect?:(index: number)=>void,selIndex?:number }) {
+export default function Component(props: { items: any[],
+    selColor?:string,
+    itemSelect?:(index: number)=>void,
+    selIndex?:number }) {
     const [selIndex, setSelIndex] = useState(props.selIndex?props.selIndex:-1)
 
     useEffect(()=>{

src/components/input/Stepper.scss

@@ -2,14 +2,16 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    background-color: #000;
+    background-color: #1c1c1c;
     height: 128px;
+    width: 578px;
     margin-bottom: 40px;
     border-radius: 36px;
-    padding-left: 20px;
-    padding-right: 20px;
+    // padding-left: 20px;
+    // padding-right: 20px;
     // padding-top: 24px;
     box-sizing: border-box;
+    box-shadow: 0px 8px 20px 0px rgba(255, 255, 255, 0.1);
 }
 
 .stepper_icon{
@@ -18,11 +20,19 @@
 }
 
 .stepper_item{
-    background-color: #1c1c1c;
-    width: 72px;
-    height: 72px;
+    background-color: transparent;
+    width: 112px;
+    height: 128px;
     border-radius: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.stepper_item_padding_left{
+    padding-left: 16px;
+}
+
+.stepper_item_padding_right{
+    padding-right: 16px;
 }

src/components/input/Stepper.tsx

@@ -19,7 +19,8 @@ export default function Component(props: { child: any, minus: Function, plus: Fu
     },[props.disableMinus,props.disablePlus])
 
 
-    function tapMinus() {
+    function tapMinus(e) {
+        e.stopPropagation()
         if (props.disableMinus) {
             Taro.showToast({
                 icon: 'none',
@@ -30,7 +31,8 @@ export default function Component(props: { child: any, minus: Function, plus: Fu
         props.minus();
     }
 
-    function tapPlus() {
+    function tapPlus(e) {
+        e.stopPropagation()
         if (props.disablePlus){
             Taro.showToast({
                 icon: 'none',
@@ -66,7 +68,7 @@ export default function Component(props: { child: any, minus: Function, plus: Fu
         setTimer(null);
     }
     return <View className="stepper_bg">
-        <View className="stepper_item" onClick={tapMinus} onLongPress={longMinus} onTouchEnd={longMinusEnd}>
+        <View className="stepper_item stepper_item_padding_right" onClick={tapMinus} onLongPress={longMinus} onTouchEnd={longMinusEnd}>
             <IconMinus color={props.themeColor} disable={props.disableMinus}/>
             {/* <Image src={minus} className="stepper_icon" style={{opacity:props.disableMinus?0.2:1}}/> */}
         </View>
@@ -74,7 +76,7 @@ export default function Component(props: { child: any, minus: Function, plus: Fu
         {
             props.child
         }
-        <View className="stepper_item" onClick={tapPlus} onLongPress={longPlus} onTouchEnd={longPlusEnd}>
+        <View className="stepper_item stepper_item_padding_left" onClick={tapPlus} onLongPress={longPlus} onTouchEnd={longPlusEnd}>
             <IconPlus color={props.themeColor} disable={props.disablePlus}/>
             {/* <Image src={plus} className="stepper_icon"  style={{opacity:props.disablePlus?0.2:1}}/> */}
         </View>

src/components/layout/Box.scss

@@ -1,7 +1,7 @@
 .box-container {
     background-color: #1C1C1C;
     // background-color: #fff;
-    border-radius: 36px;
+    border-radius: 48px;
     padding: 40px;
     margin-left: 46px;
     margin-right: 46px;

src/components/layout/Box.tsx

@@ -1,19 +1,34 @@
 import { View, Text } from "@tarojs/components";
 import './Box.scss'
 import { BoxType } from "@/utils/types";
+import Taro from "@tarojs/taro";
 
 export default function Component(props: {
     children: React.ReactNode,
     title?: string,
     header?: React.ReactNode,
     style?: any,
-    type?: BoxType
+    type?: BoxType,
+    onClick?: Function,
+    tranparentBg?:boolean
 }) {
+
+    function onClick(e) {
+        console.log(e)
+        if (props.onClick) {
+            props.onClick()
+            return
+        }
+        Taro.vibrateShort({
+            type: 'heavy'
+        })
+    }
+
     switch (props.type) {
         case BoxType.outline:
             return <View>
                 {props.header ? props.header : null}
-                <View className="box-outline" style={{ ...props.style }}>
+                <View className="box-outline" style={{ ...props.style }} onTap={onClick}>
                     {
                         props.title && <Text className="box-title">{props.title}</Text>
                     }
@@ -23,7 +38,7 @@ export default function Component(props: {
     }
     return <View>
         {props.header ? props.header : null}
-        <View className="box-container" style={{ ...props.style }}>
+        <View className="box-container" style={{ ...props.style,backgroundColor:props.tranparentBg?'transparent':'#1c1c1c' }} onTap={onClick}>
             {
                 props.title && <Text className="box-title">{props.title}</Text>
             }

src/components/layout/Header.tsx

@@ -9,6 +9,10 @@ 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" style={{color:getThemeColor(time)}} onClick={() => { props.action!() }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>
+        {
+            time.scenario=='FAST_SLEEP'?<Text className="header_action fast_sleep_text"  onClick={() => { props.action!() }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>:
+            <Text className="header_action" style={{color:getThemeColor(time)}} onClick={() => { props.action!() }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>
+        }
+        
     </View>
 }

src/components/layout/Modal.tsx

@@ -20,7 +20,7 @@ export default function Modal(props: {
 
     switch (props.modalType) {
         case ModalType.center:
-            return <View className='modal modal_center_container' catchMove onClick={() => props.dismiss()}>
+            return <View className='modal modal_center_container' catchMove onClick={(e) => {e.stopPropagation();props.dismiss()}}>
                 <View className='center_modal_detail'>
                     <Box><View onClick={click}>
                         {
@@ -33,7 +33,7 @@ export default function Modal(props: {
     }
     return <View className='modal' catchMove>
 
-        <View style={{ flex: 1,width:375,flexShrink:0 }} onClick={() => props.dismiss()}>
+        <View style={{ flex: 1,width:375,flexShrink:0 }} onClick={(e) => {e.stopPropagation();props.dismiss()}}>
             {
                 props.testInfo ? props.testInfo : null
             }

src/components/layout/layout.scss

@@ -26,7 +26,8 @@
     display: flex;
     flex-shrink: 0;
     margin-top: 24px;
-    margin-bottom: 10px;
+    margin-bottom: 24px;
+    
 }
 
 .grid_bg {

src/components/layout/layout.tsx

@@ -16,10 +16,12 @@ export default function Layout(props: {
     title?: string,
     titleColor?: string,
     header?: React.ReactNode,
+    secondPage?: boolean,
     titleShowStyle: NaviBarTitleShowType
 }) {
     const { children, type, triggered } = props;
     const [showTitle, setShowTitle] = useState(props.titleShowStyle == NaviBarTitleShowType.alwayShow)
+    const isDebugMode = false
 
     useEffect(() => {
         Taro.setNavigationBarTitle({
@@ -64,9 +66,12 @@ export default function Layout(props: {
                 onScrollToLower={() => { props.more ? props.more() : null }}
                 refresherTriggered={triggered}>
                 {
-                    props.title && <View className="layout_title_view">
+                    props.title && <View className="layout_title_view" style={{backgroundColor:isDebugMode?'red':'transparent'}}>
                         <Text className='layout_title'
-                            style={{ color: props.titleColor ? props.titleColor : '#fff' }}
+                            style={{
+                                color: props.titleColor ? props.titleColor : '#fff',
+                                fontSize: props.secondPage ? 28 : 36
+                            }}
                         >{props.title}</Text>
                     </View>
                 }
@@ -86,9 +91,12 @@ export default function Layout(props: {
                 onScrollToLower={() => { props.more ? props.more() : null }}
                 refresherTriggered={triggered}>
                 {
-                    props.title && <View className="layout_title_view">
+                    props.title && <View className="layout_title_view" style={{backgroundColor:isDebugMode?'red':'transparent'}}>
                         <Text className='layout_title'
-                            style={{ color: props.titleColor ? props.titleColor : '#fff' }}
+                            style={{
+                                color: props.titleColor ? props.titleColor : '#fff',
+                                fontSize: props.secondPage ? 28 : 36
+                            }}
                         >{props.title}</Text>
                     </View>
                 }
@@ -100,9 +108,12 @@ export default function Layout(props: {
         case TemplateType.flex:
             return <View className='flex'>
                 {
-                    props.title && <View className="layout_title_view">
+                    props.title && <View className="layout_title_view" style={{backgroundColor:isDebugMode?'red':'transparent'}}>
                         <Text className='layout_title'
-                            style={{ color: props.titleColor ? props.titleColor : '#fff' }}
+                            style={{
+                                color: props.titleColor ? props.titleColor : '#fff',
+                                fontSize: props.secondPage ? 28 : 36
+                            }}
                         >{props.title}</Text>
                     </View>
                 }

src/features/common/RecordItem.tsx

@@ -7,12 +7,15 @@ import { TimeFormatter } from "@/utils/time_format";
 
 export default function Component(props: { children: React.ReactNode,onClick?:Function, delete?: Function, canDel?: boolean }) {
 
-    function click(){
+    function click(e){
         if (props.onClick) {
+            e.stopPropagation()
             props.onClick();
         }
         else {
-            Taro.vibrateShort();
+            // Taro.vibrateShort({
+                
+            // });
         }
     }
     

src/features/common/SpecBtns.tsx

@@ -22,7 +22,7 @@ export const StartFastBtn = (props: { onClick: Function, isLoading?: boolean })
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
-                backgroundColor: ColorType.fast,
+                backgroundColor: global.fastColor?global.fastColor:ColorType.fast,
                 width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
@@ -46,7 +46,7 @@ export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean, is
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
-                backgroundColor: ColorType.sleep,
+                backgroundColor: global.sleepColor?global.sleepColor:ColorType.sleep,
                 width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
@@ -72,13 +72,13 @@ export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLo
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
-                borderColor: ColorType.sleep,
+                borderColor: global.sleepColor?global.sleepColor:ColorType.sleep,
                 borderWidth: 2,
                 borderStyle: 'solid',
                 width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
-                color: ColorType.sleep,
+                color: global.sleepColor?global.sleepColor:ColorType.sleep,
                 fontWeight: 500,
                 fontSize: 20,
                 display: 'flex',
@@ -100,13 +100,13 @@ export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean, isLoa
             btnStyle={{
                 height: rpxToPx(100),
                 borderRadius: rpxToPx(50),
-                borderColor: ColorType.fast,
+                borderColor: global.fastColor?global.fastColor:ColorType.fast,
                 borderWidth: 2,
                 borderStyle: 'solid',
                 width: rpxToPx(320),
                 // paddingLeft: 40,
                 // paddingRight: 40,
-                color: ColorType.fast,
+                color: global.fastColor?global.fastColor:ColorType.fast,
                 fontSize: 20,
                 fontWeight: 500,
                 display: 'flex',
@@ -128,7 +128,7 @@ export const SetScheduleBtn = (props: { onClick: Function, title: string, isFast
                 width: 300,
                 boxSizing: 'border-box',
                 borderRadius: 25,
-                backgroundColor: props.isFast ? ColorType.fast : ColorType.sleep,
+                backgroundColor: props.isFast ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep,
                 paddingLeft: 40,
                 paddingRight: 40,
                 color: 'black',

src/features/common/TimePicker.tsx

@@ -18,21 +18,24 @@ export default function Component(props: { time: string, confirm: Function, canc
     }, [props.time])
 
 
-    const hours: number[] = [];
+    const hours: string[] = [];
 
 
     for (let i = 0; i <= 23; i++) {
-        hours.push(i);
+        var h = i<10?'0'+i:i
+        hours.push(h as any);
     }
 
-    const minutes: number[] = [];
+    const minutes: string[] = [];
     for (let i = 0; i <= 11; i++) {
-        minutes.push(i * 5);
+        var ms = i*5
+        var m1 = ms<10?'0'+ms:ms+''
+        minutes.push(m1 as any);
     }
 
     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]]
+        var strHour =parseInt( hours[e[0]]) < 10 ? '0' + hours[e[0]] : hours[e[0]]
+        var strMinute = parseInt(minutes[e[1]]) < 10 ? '0' + minutes[e[1]] : minutes[e[1]]
         props.confirm(strHour + ':' + strMinute)
     }
 

src/features/trackSomething/components/Activity.tsx

@@ -252,7 +252,7 @@ export default function Component(props: any) {
                 return;
             }
             Taro.navigateTo({
-                url: '/pages/common/RecordsHistory?type=activity&refreshList=getCards&title='+item.name
+                url: '/pages/common/RecordsHistory?type=activity&refreshList=getCards&title='+item.name+'&themeColor='+item.theme_color
             })
         }
         else {
@@ -328,7 +328,7 @@ export default function Component(props: any) {
                             desc = '今天待打卡'
                         }
                         else {
-                            desc = TimeFormatter.formatTimestamp(item.latest_record.timestamp)
+                            desc = TimeFormatter.datetimeDescription(item.latest_record.timestamp)
                         }
 
                     }
@@ -352,7 +352,7 @@ export default function Component(props: any) {
                             showDetail = true
                             if (item.latest_record) {
                                 value = item.latest_record.items[0].value
-                                desc = TimeFormatter.formatTimestamp(item.latest_record.timestamp)
+                                desc =  TimeFormatter.datetimeDescription(item.latest_record.timestamp)
                                 unit = '步'
                             }
                             else {

src/features/trackSomething/components/ActivityHistory.scss

@@ -18,4 +18,11 @@
     border-radius: 36px;
     padding-left: 40px;
     padding-right: 40px;
+    margin-top: 16px;
+}
+
+.operate_arrow{
+    width: 40px;
+    height: 40px;
+    opacity: 0.2;
 }

src/features/trackSomething/components/ActivityHistory.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from "@tarojs/components";
+import { View, Text,Image } from "@tarojs/components";
 import './MetricHistory.scss'
 import RecordItem from "@/features/common/RecordItem";
 import { deleteActivityRecord } from "@/services/trackSomething";
@@ -14,6 +14,7 @@ import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
 export default function Component(props: { records: any[] }) {
     const user = useSelector((state: any) => state.user);
     const [list, setList] = useState(props.records)
+    const isDebugModel = false
     useEffect(() => {
         setList(props.records)
     }, [props.records])
@@ -91,6 +92,7 @@ export default function Component(props: { records: any[] }) {
             confirm={() => { }} />);
         global.showModal(true, node);
     }
+    var lastYearStr = '2023年'
 
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
         {
@@ -98,19 +100,25 @@ export default function Component(props: { records: any[] }) {
         }
         {
             (list as any).map(item => {
+                var showYear = lastYearStr!= TimeFormatter.getYearByDate(item.date) && lastYearStr!='2023年'
+                lastYearStr = TimeFormatter.getYearByDate(item.date)
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
-                    <Text className="operate_day">{formateDate(item.date + '')}</Text>
+                    {
+                        showYear && <Text className="year" style={{backgroundColor:isDebugModel?'red':'transparent'}}>{TimeFormatter.getYearByDate(item.date)}</Text>
+                    }
+                    <Text className="operate_day" style={{backgroundColor:isDebugModel?'red':'transparent'}}>{TimeFormatter.getMonthAndDayByDate(item.date)}</Text>
 
                     <RecordItem onClick={() => showDetail(item)} delete={() => deleteRecord(item.records[0])}>
                         <View className="operate_item">
-                            <View className="status_bg">
+                            {/* <View className="status_bg">
                                 <Text className="status_text">{item.records[0].type == 'total' ? '总计' : item.records[0].type == 'sync' ? '同步' : '打卡'}</Text>
                             </View>
-                            <View style={{ width: 12 }} />
-                            <Text className="value">{item.records[0].items[0].value}</Text>
+                            <View style={{ width: 12 }} /> */}
+                            <Text className="value" style={{backgroundColor:isDebugModel?'red':'transparent'}}>{item.records[0].items[0].value}</Text>
                             <Text className="unit">步</Text>
                             <View style={{ flex: 1 }} />
                             <Text className="time">{formateHourMinutes(item.records[0].timestamp)}</Text>
+                            <Image className="operate_arrow" src={require('@assets/images/arrow3.png')}/>
                         </View>
                     </RecordItem>
 

src/features/trackSomething/components/Metric.tsx

@@ -98,7 +98,7 @@ export default function Component(props: any) {
                 return
             }
             Taro.navigateTo({
-                url: '/pages/common/RecordsHistory?type=metric&refreshList=getCards&code=' + item.code + `&title=${item.name}`
+                url: '/pages/common/RecordsHistory?type=metric&refreshList=getCards&code=' + item.code + `&title=${item.name}`+'&themeColor='+item.theme_color
             })
         }
         else {
@@ -284,7 +284,9 @@ export default function Component(props: any) {
         })
     }
 
-    const limit = new Date().getTime() - 180 * 3600 * 1000 * 24;
+    const limitDay = 500
+
+    const limit = new Date().getTime() - limitDay * 3600 * 1000 * 24;
 
     function detail() {
         return <View>
@@ -300,7 +302,7 @@ export default function Component(props: any) {
                         if (item.latest_record) {
                             unit = item.schemas[0].default_unit
                             value = getValues(item.latest_record.items)
-                            desc = TimeFormatter.formatTimestamp(item.latest_record.timestamp)
+                            desc = TimeFormatter.dateDescription(item.latest_record.timestamp,true)
                             showDetail = true
                         }
                         return <MetricItem title={item.name}
@@ -319,7 +321,7 @@ export default function Component(props: any) {
 
 
             </View>
-            <View className="space_width" >11</View>
+            <View className="space_width" ></View>
         </View>
     }
 
@@ -398,7 +400,7 @@ export default function Component(props: any) {
                 isRealTime={true} time={time} limit={limit} 
                 title={t('feature.track_something.picker_datetime')}
                 themeColor={(metricItem as any).theme_color}
-                limitDay={180} onCancel={() => { setIsTimePickerOpen(false) }}
+                limitDay={limitDay} onCancel={() => { setIsTimePickerOpen(false) }}
                  onChange={(e) => {
                     chooseTime(e)
                     //  pickerConfirm(e)

src/features/trackSomething/components/MetricHistory.scss

@@ -1,3 +1,14 @@
+.year{
+    margin-left: 46px;
+    margin-top: 16px;
+    height: 80px;
+    line-height: 80px;
+    opacity: 0.8;
+    font-size: 48px;
+    color: #fff;
+    font-weight: 500;
+}
+
 .operate_view{
     margin-left: 86px;
     margin-top: 20px;
@@ -8,9 +19,10 @@
 }
 
 .operate_day{
-    margin-left: 86px;
-    margin-top: 20px;
-    
+    margin-left: 46px;
+    margin-top: 16px;
+    height: 32px;
+    line-height: 32px;
     color: #fff;
     opacity: 0.4;
 }
@@ -26,7 +38,7 @@
     border-radius: 36px;
     padding-left: 40px;
     padding-right: 40px;
-    margin-bottom: 20px;
+    margin-top: 16px;
 }
 
 .status_bg{
@@ -65,3 +77,5 @@
 }
 
 
+
+

src/features/trackSomething/components/MetricHistory.tsx

@@ -1,17 +1,19 @@
-import { View, Text } from "@tarojs/components";
+import { View, Text,Image } from "@tarojs/components";
 import './MetricHistory.scss'
 import RecordItem from "@/features/common/RecordItem";
 import { deleteMetricRecord } from "@/services/trackSomething";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import { TimeFormatter } from "@/utils/time_format";
 
 export default function Component(props: { records: any[] }) {
     const user = useSelector((state: any) => state.user);
     const [list, setList] = useState(props.records)
-    useEffect(()=>{
+    const isDebugModel = false
+    useEffect(() => {
         setList(props.records)
-    },[props.records])
-    
+    }, [props.records])
+
     function formateDate(date: string) {
         //yyyyMMdd转换成日期，如果是今天，返回今天，如果是昨天，返回昨天，如果是昨天之前，返回日期
         const dt = new Date(date.substring(0, 4) + '/' +
@@ -43,43 +45,44 @@ export default function Component(props: { records: any[] }) {
 
     function deleteRecord(record: any) {
         deleteMetricRecord({ id: record.id }).then(res => {
+            debugger
             list.map(item => {
                 item.records.splice(item.records.findIndex(item => item.id == record.id), 1)
             })
-            for (let i=list.length;i>0;i--){
-                if(list[i-1].records.length==0){
-                    list.splice(i-1,1)
+            for (let i = list.length; i > 0; i--) {
+                if (list[i - 1].records.length == 0) {
+                    list.splice(i - 1, 1)
                 }
             }
-            console.log(list)
-            global.refreshMetric()
+            // console.log(list)
+            setList(JSON.parse(JSON.stringify(list)))
+            // global.refreshMetric()
         })
     }
 
+    var lastYearStr = '2023年'
     return <View style={{ display: 'flex', flexDirection: 'column' }}>
         {
-            user.test_user && <Text style={{ color: '#fff', position: 'absolute', right: 50, top: 0 }} onClick={()=>global.clearHistory()}>删除全部</Text>
+            user.test_user && <Text style={{ color: '#fff', position: 'absolute', right: 50, top: 0 }} onClick={() => global.clearHistory()}>删除全部</Text>
         }
-        {/* <View className="operate_view">
-            <Text>时间倒序</Text>
-            <View style={{ marginLeft: 5, marginRight: 5, display: 'flex', height: '100%' }}>
-                <Text > | </Text>
-            </View>
-            <Text>时间正序</Text>
-        </View> */}
         {
             (list as any).map(item => {
+                var showYear = lastYearStr != TimeFormatter.getYearByDate(item.date)
+                lastYearStr = TimeFormatter.getYearByDate(item.date)
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
-                    <Text className="operate_day">{formateDate(item.date + '')}</Text>
+                    {
+                        showYear && <Text className="year" style={{ backgroundColor:isDebugModel?'red':'transparent' }}>{TimeFormatter.getYearByDate(item.date)}</Text>
+                    }
+                    <Text className="operate_day" style={{backgroundColor:isDebugModel?'red':'transparent'}}>{TimeFormatter.getMonthAndDayByDate(item.date)}</Text>
                     {
                         item.records.map(record => {
                             return <RecordItem delete={() => deleteRecord(record)}>
                                 <View className="operate_item1">
-                                    <View className="status_bg">
-                                        {/* <Text className="status_text">{record.type == 'total' ? '总计' : record.type == 'sync' ? '同步' : '打卡'}</Text> */}
+                                    {/* <View className="status_bg">
+                                       
                                     </View>
-                                    <View style={{ width: 12 }} />
-                                    <Text className="value">{record.items[0].value}</Text>
+                                    <View style={{ width: 12 }} /> */}
+                                    <Text className="value" style={{backgroundColor:isDebugModel?'red':'transparent'}}>{record.items[0].value}</Text>
                                     {
                                         record.items.length > 1 && <Text className="value">/{record.items[1].value}</Text>
                                     }
@@ -89,6 +92,7 @@ export default function Component(props: { records: any[] }) {
                                     <Text className="unit">{record.items[0].unit}</Text>
                                     <View style={{ flex: 1 }} />
                                     <Text className="time">{formateHourMinutes(record.timestamp)}</Text>
+                                    
                                 </View>
                             </RecordItem>
                         })

src/features/trackSomething/components/MetricItem.scss

@@ -17,6 +17,7 @@
     line-height: 36px;
     height: 40px;
     color: #ffffff;
+    font-weight: 500;
 }
 
 .metric_value_bg{
@@ -28,6 +29,7 @@
     font-size: 48px;
     line-height: 48px;
     height: 50px;
+    font-weight: 500;
     color: #ffffff;
     margin-top: 20px;
     margin-bottom: 12px;
@@ -38,6 +40,7 @@
     line-height: 32px;
     color: #ffffff;
     opacity: 0.8;
+    font-weight: 500;
 }
 
 
@@ -50,10 +53,17 @@
 }
 
 .mteric_desc {
-    font-size: 24px;
-    line-height: 24px;
+    font-size: 28px;
+    line-height: 28px;
     height: 28px;
     color: #ffffff;
+    opacity: 0.4;
+    font-weight: 400;
+}
+
+.metric_arrow{
+    width: 40px;
+    height: 40px;
     opacity: 0.2;
 }
 

src/features/trackSomething/components/MetricItem.tsx

@@ -31,7 +31,7 @@ export default function Component(props: {
         <View className="metric_desc_bg" onClick={() => props.onClickDetail()}>
             <Text className="mteric_desc">{props.desc}</Text>
             {
-                props.showDetail && <Image src={require('@assets/images/arrow3.png')} style={{width:12,height:12}}/>
+                props.showDetail && <Image src={require('@assets/images/arrow3.png')} className="metric_arrow"/>
             }
             
         </View>

src/features/trackTimeDuration/components/ChooseScenario.tsx

@@ -72,20 +72,21 @@ export default function Component() {
         var background;
         switch (selIndex) {
             case 0:
-                style = { backgroundColor: ColorType.fast }
-                background = ColorType.fast
+                style = { backgroundColor: global.fastColor?global.fastColor:ColorType.fast }
+                background = global.fastColor?global.fastColor:ColorType.fast
                 break;
             case 1:
-                style = { backgroundColor: ColorType.sleep }
-                background = ColorType.sleep
+                style = { backgroundColor: global.sleepColor?global.sleepColor:ColorType.sleep }
+                background = global.sleepColor?global.sleepColor:ColorType.sleep
                 break;
             case 2:
                 style = {
-                    background: 'linear-gradient(to right, ' + ColorType.fast + ', ' + ColorType.sleep + ')'
+                    background: 'linear-gradient(to right, ' + (global.fastColor?global.fastColor:ColorType.fast) + ', ' + (global.sleepColor?global.sleepColor:ColorType.sleep) + ')'
                 }
-                background = 'linear-gradient(to right, ' + ColorType.fast + ', ' + ColorType.sleep + ')'
+                background = 'linear-gradient(to right, ' + (global.fastColor?global.fastColor:ColorType.fast) + ', ' + (global.sleepColor?global.sleepColor:ColorType.sleep) + ')'
                 break;
         }
+        debugger
         return <View>
             <ChooseScenarioBtn title={t('feature.common.btn_next')} onClick={next} background={background} />
             {/* <Buttons title='Next' onClick={next} btnStyle={{ ...style, width: 320 }} /> */}
@@ -179,13 +180,13 @@ export default function Component() {
         }
 
         const targetRing: TargetRing = {
-            color: ColorType.fast,
+            color: global.fastColor?global.fastColor:ColorType.fast,
             startArc: timeToArc((getScheduleTarget(true) as any).start_time),
             durationArc: durationToArc((getScheduleTarget(true) as any).start_time, (getScheduleTarget(true) as any).end_time)
         }
 
         const targetRing2: TargetRing = {
-            color: ColorType.sleep,
+            color: global.sleepColor?global.sleepColor:ColorType.sleep,
             startArc: timeToArc((getScheduleTarget(false) as any).start_time),
             durationArc: durationToArc((getScheduleTarget(false) as any).start_time, (getScheduleTarget(false) as any).end_time)
         }
@@ -195,10 +196,10 @@ export default function Component() {
             <View className="item_row" style={{ opacity: scenarios.length > 0 ? 1 : 0 }}>
                 <Rings2 common={common} bgRing={bgRing} targetRing={targetRing} canvasId='0' />
                 <View className="item_txt_bg">
-                    <Text className="item_txt" style={{ color: ColorType.fast }}>{t('feature.track_time_duration.choose_scenario.list.item1.name')}</Text>
+                    <Text className="item_txt" style={{ color: global.fastColor?global.fastColor:ColorType.fast }}>{t('feature.track_time_duration.choose_scenario.list.item1.name')}</Text>
                     {
                         scenarios[0].count > 0 && <View className="scenario_count">
-                            <View className="badge_view1" style={{ backgroundColor: ColorType.fast }}>
+                            <View className="badge_view1" style={{ backgroundColor: global.fastColor?global.fastColor:ColorType.fast }}>
                                 <Text className="badge1">x{scenarios[0].count}</Text>
                             </View>
 
@@ -211,10 +212,10 @@ export default function Component() {
             <View className="item_row" style={{ opacity: scenarios.length > 0 ? 1 : 0 }}>
                 <Rings2 common={common} bgRing={bgRing} targetRing={targetRing2} canvasId='1' />
                 <View className="item_txt_bg">
-                    <Text className="item_txt" style={{ color: ColorType.sleep }}>{t('feature.track_time_duration.choose_scenario.list.item2.name')}</Text>
+                    <Text className="item_txt" style={{ color: global.sleepColor?global.sleepColor:ColorType.sleep }}>{t('feature.track_time_duration.choose_scenario.list.item2.name')}</Text>
                     {
                         scenarios[1].count > 0 && <View className="scenario_count">
-                        <View className="badge_view1" style={{ backgroundColor: ColorType.sleep }}>
+                        <View className="badge_view1" style={{ backgroundColor: global.sleepColor?global.sleepColor:ColorType.sleep }}>
                             <Text className="badge1">x{scenarios[1].count}</Text>
                         </View>
 
@@ -235,7 +236,9 @@ export default function Component() {
                     <Text className="item_txt fast_sleep_text" >{t('feature.track_time_duration.choose_scenario.list.item3.name')}</Text>
                     {
                         scenarios[2].count > 0 && <View className="scenario_count">
-                        <View className="badge_view1 linear_badge_bg">
+                        <View className="badge_view1" style={{background: 'linear-gradient(to right, ' +
+                         (global.fastColor?global.fastColor:ColorType.fast) + ', '
+                          + (global.sleepColor?global.sleepColor:ColorType.sleep) + ')'}}>
                             <Text className="badge1">x{scenarios[2].count}</Text>
                         </View>
 

src/features/trackTimeDuration/components/Clock.scss

@@ -1,6 +1,7 @@
 
 
 .clock_text{
-    font-size: 48px;
+    // font-size: 64px;
+    line-height: 72px;
     font-weight: 500;
 }

src/features/trackTimeDuration/components/Clock.tsx

@@ -6,8 +6,10 @@ import Rings, { BgRing, CurrentDot, RealRing, RingCommon } from './Rings';
 import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
 import './Clock.scss'
 import { ColorType } from "@/context/themes/color";
+import { useSelector } from "react-redux";
 export default function Component() {
     const [checkData, setCheckData] = useState(null)
+    const time = useSelector((state: any) => state.time);
 
 
     useEffect(() => {
@@ -38,7 +40,7 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         var currentDot1 = getDot((checkData as any).current_record, true)
         var targetBigRing1 = getTarget((checkData as any).current_record, true)
-        targetBigRing1.color = ColorType.fast+'33'//'rgba(170,255,0,0.4)'
+        targetBigRing1.color = global.fastColor?global.fastColor:ColorType.fast+'33'//'rgba(170,255,0,0.4)'
         if (current_record.status == 'ONGOING') {
             var realRing1 = getReal((checkData as any).current_record, true, false)
 
@@ -64,14 +66,14 @@ export default function Component() {
             var realRing = getReal((checkData as any).current_record, false, false)
             var currentDot = getDot((checkData as any).current_record, false)
             var targetRing = getTarget((checkData as any).current_record, false)
-            targetRing.color = ColorType.sleep+'33'//'rgba(0, 255, 255, 0.4)'
+            targetRing.color = global.sleepColor?global.sleepColor:ColorType.sleep+'33'//'rgba(0, 255, 255, 0.4)'
             if (current_record.status == 'ONGOING2') {
                 return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
             }
 
             //ongoing3时，睡眠点整理亮度降低
             if (current_record.status == 'ONGOING3') {
-                currentDot.color = ColorType.sleep+'66'
+                currentDot.color = global.sleepColor?global.sleepColor:ColorType.sleep+'66'
             }
             return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock8' />
         }
@@ -97,33 +99,38 @@ export default function Component() {
                 </View>
                 <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                     {
-                        (checkData as any).current_record.status == 'WAIT_FOR_START' && <Text className="clock_text" style={{ color: ColorType.fast }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
+                        (checkData as any).current_record.status == 'WAIT_FOR_START' && time.scenario=='FAST_SLEEP' && 
+                        <Text className="clock_text fast_sleep_text" style={{fontSize:32}}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                     }
                     {
-                        (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? ColorType.fast : ColorType.sleep }}>
+                        (checkData as any).current_record.status == 'WAIT_FOR_START' && time.scenario!='FAST_SLEEP' && 
+                        <Text className="clock_text" style={{ color: global.fastColor?global.fastColor:ColorType.fast,fontSize:32 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
+                    }
+                    {
+                        (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep,fontSize:32 }}>
                             {TimeFormatter.formateTimeNow((checkData as any).current_record.fast ?
                                 (checkData as any).current_record.fast.real_start_time :
                                 (checkData as any).current_record.sleep.real_start_time)}
                         </Text>
                     }
                     {
-                        (checkData as any).current_record.status == 'ONGOING1' && <Text className="clock_text" style={{ color: ColorType.fast }}>
+                        (checkData as any).current_record.status == 'ONGOING1' && <Text className="clock_text" style={{ color: global.fastColor?global.fastColor:ColorType.fast,fontSize:32 }}>
                             {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                         </Text>
                     }
                     {
                         (checkData as any).current_record.status == 'ONGOING2' && <View  style={{ flexDirection: 'column', display: 'flex' }}>
-                            <Text className="clock_text"style={{ color: ColorType.fast }}>
+                            <Text className="clock_text"style={{ color: global.fastColor?global.fastColor:global.fastColor?global.fastColor:ColorType.fast ,fontSize:32}}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                             </Text>
-                            <Text className="clock_text" style={{ color: ColorType.sleep }}>
+                            <Text className="clock_text" style={{ color: global.sleepColor?global.sleepColor:ColorType.sleep,fontSize:32 }}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.sleep.real_start_time)}
                             </Text>
                         </View>
                     }
                     {
                         (checkData as any).current_record.status == 'ONGOING3' && <Text>
-                            <Text className="clock_text" style={{ color: ColorType.fast }}>
+                            <Text className="clock_text" style={{ color: global.fastColor?global.fastColor:ColorType.fast,fontSize:32 }}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                             </Text>
                         </Text>

src/features/trackTimeDuration/components/Console.scss

@@ -1,3 +1,5 @@
+@import '@/utils/common.scss';
+
 .stepper_text {
     font-size: 48px;
     font-weight: 500;
@@ -5,7 +7,7 @@
     text-align: center;
 }
 
-.counter_text{
+.counter_text {
     font-size: 48px;
     font-weight: 500;
     text-align: center;
@@ -16,7 +18,7 @@
     flex-shrink: 0;
 }
 
-.target_view{
+.target_view {
     height: 46px;
     padding-left: 24px;
     padding-right: 24px;
@@ -26,50 +28,78 @@
     align-items: center;
     justify-content: center;
 }
-.target_text{
+
+.target_text {
     height: 46px;
     line-height: 46px;
     font-size: 20px;
 }
 
-.btn_bg{
+.btn_bg {
     margin-bottom: 12px;
     display: flex;
 }
 
-.console_time_bg{
+.console_time_bg {
     width: 578px;
-    background-color: #000;
+    background-color: transparent;
     height: 128px;
     border-radius: 36px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     box-sizing: border-box;
-    padding-left: 46px;
-    padding-right: 46px;
-    padding-top: 30px;
-    padding-bottom: 30px;
+    align-items: center;
     margin-bottom: 40px;
 }
 
-.console_time_item{
+.console_time_item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-.console_time_value{
+.console_time_value {
     font-weight: 500;
-    font-size: 36px;
-    line-height: 36px;
+    font-size: 64px;
+    line-height: 64px;
 
 }
 
-.console_time_desc{
+.console_time_duration {
+    margin-top: 24px;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 32px;
+    opacity: 0.4;
+}
+
+.console_time_desc {
     margin-top: 10px;
     color: #fff;
     opacity: 0.4;
     font-size: 20px;
     line-height: 20px;
+}
+
+.normal_fast_color{
+    color:  $fastColor;
+}
+
+.normal_sleep_color{
+    color:  $sleepColor;
+}
+
+.timeout_fast_linear_color {
+    background: linear-gradient(90deg, $alertFastColor 0%, $alertColor 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.timeout_sleep_linear_color {
+    background: linear-gradient(90deg, $alertSleepColor 0%, $alertColor 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
 }

src/features/trackTimeDuration/components/Console.tsx

@@ -175,7 +175,7 @@ export default function Component(props: { isNextStep?: boolean }) {
         var color = getColor(time)
         if (props.isNextStep) {
             title = t('feature.track_time_duration.console.fast_end')
-            color = ColorType.fast
+            color = global.fastColor ? global.fastColor : ColorType.fast
         }
 
 
@@ -248,8 +248,8 @@ export default function Component(props: { isNextStep?: boolean }) {
                     <Text className="target_text" style={{ color: '#FA5151' }}>超出目标结束</Text>
                 </View>
             }
-            return <View className="target_view" style={{ backgroundColor: ColorType.fast + '1A', opacity: opacity }}>
-                <Text className="target_text" style={{ color: ColorType.fast }}>距离目标结束</Text>
+            return <View className="target_view" style={{ backgroundColor: global.fastColor ? global.fastColor : ColorType.fast + '1A', opacity: opacity }}>
+                <Text className="target_text" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>距离目标结束</Text>
             </View>
         }
 
@@ -260,8 +260,8 @@ export default function Component(props: { isNextStep?: boolean }) {
                     <Text className="target_text" style={{ color: '#FA5151' }}>超出目标结束</Text>
                 </View>
             }
-            return <View className="target_view" style={{ backgroundColor: isFast ? ColorType.fast + '1A' : ColorType.sleep + '1A', opacity: opacity }}>
-                <Text className="target_text" style={{ color: isFast ? ColorType.fast : ColorType.sleep }}>距离目标结束</Text>
+            return <View className="target_view" style={{ backgroundColor: isFast ? global.fastColor ? global.fastColor : ColorType.fast + '1A' : global.sleepColor ? global.sleepColor : ColorType.sleep + '1A', opacity: opacity }}>
+                <Text className="target_text" style={{ color: isFast ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep }}>距离目标结束</Text>
             </View>
         }
         return <View />
@@ -341,7 +341,8 @@ export default function Component(props: { isNextStep?: boolean }) {
         return `${hour > 0 ? hour + '小时' : ''}${minute > 0 ? minute + '分钟' : ''}`
     }
 
-    function showDurationPicker() {
+    function showDurationPicker(e) {
+        e.stopPropagation()
         var node = <Modal children={durationPickerContent()} dismiss={() => global.showClockModal2(false, null)} confirm={() => {
             var picker = durationPickerRef.current;
             durationChange((picker as any).getConfirmData());
@@ -369,7 +370,9 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     function minus() {
         if (isFast) {
-            var count = fastDuration - 5 * 60 * 1000
+            var count = fastDuration - common.duration.step * 60 * 1000
+            count = count < 3600000 ? 3600000 : count
+
             setFastDuration(count)
             var hour = count / 60000 / 60
             var minute = count / 60000 % 60
@@ -377,7 +380,8 @@ export default function Component(props: { isNextStep?: boolean }) {
             setFastPickerValue(durationIndex('00:00', `${hour > 10 ? hour : '0' + hour}:${minute > 10 ? minute : '0' + minute}`, common))
         }
         else {
-            var count = sleepDuration - 5 * 60 * 1000
+            var count = sleepDuration - common.duration.step * 60 * 1000
+            count = count < 3600000 ? 3600000 : count
 
             setSleepDuration(count)
             var hour = count / 60000 / 60
@@ -389,7 +393,9 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     function plus() {
         if (isFast) {
-            var count = fastDuration + 5 * 60 * 1000
+            var count = fastDuration + common.duration.step * 60 * 1000
+            count = count > 23 * 3600000 ? 23 * 3600000 : count
+
             setFastDuration(count)
             var hour = count / 60000 / 60
             var minute = count / 60000 % 60
@@ -397,7 +403,9 @@ export default function Component(props: { isNextStep?: boolean }) {
             setFastPickerValue(durationIndex('00:00', `${hour > 10 ? hour : '0' + hour}:${minute > 10 ? minute : '0' + minute}`, common))
         }
         else {
-            var count = sleepDuration + 5 * 60 * 1000
+            var count = sleepDuration + common.duration.step * 60 * 1000
+
+            count = count > 23 * 3600000 ? 23 * 3600000 : count
 
             setSleepDuration(count)
             var hour = count / 60000 / 60
@@ -445,7 +453,7 @@ export default function Component(props: { isNextStep?: boolean }) {
     if (!user.isLogin) {
         return <View style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}>
             <Text>16:00</Text>
-            <Text style={{ color: ColorType.fast }} onClick={login}>Start Fast</Text>
+            <Text style={{ color: global.fastColor ? global.fastColor : ColorType.fast }} onClick={login}>Start Fast</Text>
         </View>
     }
 
@@ -458,23 +466,26 @@ export default function Component(props: { isNextStep?: boolean }) {
             }}>
                 {
                     (time.status == 'WAIT_FOR_START') && <Stepper child={
-                        <Text className="stepper_text" style={{ color: ColorType.sleep, opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
+                        <Text className="stepper_text" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep, opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
                     } minus={minus} plus={plus}
-                        themeColor={ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
+                        themeColor={global.sleepColor ? global.sleepColor : ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
                 }
                 {
                     (time.status == 'ONGOING1' || time.status == 'ONGOING2') &&
                     <View className="console_time_bg">
-                        <View className="console_time_item">
-                            <Text className="console_time_value" style={{ color: ColorType.fast, opacity: textNextStepAlpha(time) }}>{
-                                TimeFormatter.calculateTimeDifference(time.fast.target_start_time,
-                                    time.fast.target_end_time, true)}</Text>
-                            <Text className="console_time_desc">{t('feature.track_time_duration.console.total_duration')}</Text>
-                        </View>
-                        <View className="console_time_item">
-                            <Text className="console_time_value" style={{ color: textNextStepAlpha(time) == 1 ? '#FA5151' : ColorType.fast, opacity: textNextStepAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
-                            <Text className="console_time_desc">{textNextStepAlpha(time) == 1 ? t('feature.track_time_duration.console.timeout') : t('feature.track_time_duration.console.countdown_not_due')}</Text>
-                        </View>
+                        <Text className={textNextStepAlpha(time) == 1 ?
+                            'console_time_value  timeout_fast_linear_color' :
+                            'console_time_value normal_fast_color'}
+                            style={{
+                                opacity: textNextStepAlpha(time) == 1 ? 1 : 0.8
+                            }}>
+                            {TimeFormatter.countdown(time.fast.target_end_time)}</Text>
+                        <Text className="console_time_duration" style={{ color: global.fastColor ? global.fastColor : ColorType.fast, opacity: 0.4 }}>{
+                            TimeFormatter.calculateTimeDifference(time.fast.target_start_time,
+                                time.fast.target_end_time, true)}</Text>
+
+
+
                     </View>
                 }
 
@@ -487,22 +498,41 @@ export default function Component(props: { isNextStep?: boolean }) {
         </Box>
     }
 
+    function getClassName(isFast) {
+        if (isFast) {
+            if (textAlpha(time) == 1) {
+                return 'console_time_value  timeout_fast_linear_color'
+            }
+            else {
+                return 'console_time_value normal_fast_color'
+            }
+
+        }
+        else {
+            if (textAlpha(time) == 1) {
+                return 'console_time_value timeout_sleep_linear_color'
+            }
+            else {
+                return 'console_time_value normal_sleep_color'
+            }
+        }
+    }
+
     function ongoing() {
         if (time.status == 'ONGOING' || time.status == 'ONGOING2' || time.status == 'ONGOING3') {
             var isFastData = time.scenario == 'FAST' || time.status == 'ONGOING3'
             var duration = TimeFormatter.calculateTimeDifference(isFastData ? time.fast.target_start_time : time.sleep.target_start_time,
                 isFast ? time.fast.target_end_time : time.sleep.target_end_time, true);
             return <View className="console_time_bg">
-                <View className="console_time_item">
-                    <Text className="console_time_value" style={{ color: isFastData ? ColorType.fast : ColorType.sleep, opacity: textAlpha(time) }}>{duration}</Text>
-                    <Text className="console_time_desc">{t('feature.track_time_duration.console.total_duration')}</Text>
-                </View>
-                <View className="console_time_item">
-                    <Text className="console_time_value" style={{ color: textColor, opacity: textAlpha(time) }}>{isFastData ?
-                        TimeFormatter.countdown(time.fast.target_end_time) :
-                        TimeFormatter.countdown(time.sleep.target_end_time)}</Text>
-                    <Text className="console_time_desc">{textAlpha(time) == 1 ? t('feature.track_time_duration.console.timeout') : t('feature.track_time_duration.console.countdown_not_due')}</Text>
-                </View>
+
+                <Text className={getClassName(isFastData)} style={{ opacity: textAlpha(time) == 1 ? 1 : 0.8 }}>{isFastData ?
+                    TimeFormatter.countdown(time.fast.target_end_time) :
+                    TimeFormatter.countdown(time.sleep.target_end_time)}</Text>
+                <Text className="console_time_duration" style={{ color: isFastData ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep, opacity: 0.4 }}>{duration}</Text>
+
+
+
+
             </View>
         }
         return <View />
@@ -517,7 +547,7 @@ export default function Component(props: { isNextStep?: boolean }) {
                     (time.status == 'ONGOING1' || time.status == 'WAIT_FOR_START') && <Stepper child={
                         <Text className="stepper_text" style={{ color: textColor, opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
                     } minus={minus} plus={plus}
-                        themeColor={isFast ? ColorType.fast : ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
+                        themeColor={isFast ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
                 }
                 {/* {
                     targetView()

src/features/trackTimeDuration/components/Console_backup.tsx

@@ -31,7 +31,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 { t } = useTranslation()
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -171,11 +171,11 @@ export default function Component(props: { isNextStep?: boolean }) {
             }
         }
 
-        var title = getTimePickerTitle(time,t)
+        var title = getTimePickerTitle(time, t)
         var color = getColor(time)
         if (props.isNextStep) {
             title = t('feature.track_time_duration.console.fast_end')
-            color = ColorType.fast
+            color = global.fastColor?global.fastColor:ColorType.fast
         }
 
 
@@ -206,7 +206,7 @@ export default function Component(props: { isNextStep?: boolean }) {
         if (isFast) {
             if (time.status == 'WAIT_FOR_START') {
                 startFast(t, fastDuration).then(res => {
-                    
+
                     if ((res as any).current_record.scenario == 'FAST_SLEEP' &&
                         (res as any).current_record.status == 'ONGOING1') {
                         global.consoleType = 'going'
@@ -248,8 +248,8 @@ export default function Component(props: { isNextStep?: boolean }) {
                     <Text className="target_text" style={{ color: '#FA5151' }}>超出目标结束</Text>
                 </View>
             }
-            return <View className="target_view" style={{ backgroundColor: ColorType.fast+'1A', opacity: opacity }}>
-                <Text className="target_text" style={{ color: ColorType.fast }}>距离目标结束</Text>
+            return <View className="target_view" style={{ backgroundColor: global.fastColor?global.fastColor:ColorType.fast + '1A', opacity: opacity }}>
+                <Text className="target_text" style={{ color: global.fastColor?global.fastColor:ColorType.fast }}>距离目标结束</Text>
             </View>
         }
 
@@ -260,8 +260,8 @@ export default function Component(props: { isNextStep?: boolean }) {
                     <Text className="target_text" style={{ color: '#FA5151' }}>超出目标结束</Text>
                 </View>
             }
-            return <View className="target_view" style={{ backgroundColor: isFast ? ColorType.fast+'1A' : ColorType.sleep+'1A', opacity: opacity }}>
-                <Text className="target_text" style={{ color: isFast ? ColorType.fast : ColorType.sleep }}>距离目标结束</Text>
+            return <View className="target_view" style={{ backgroundColor: isFast ? global.fastColor?global.fastColor:ColorType.fast + '1A' : global.sleepColor?global.sleepColor:ColorType.sleep + '1A', opacity: opacity }}>
+                <Text className="target_text" style={{ color: isFast ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep }}>距离目标结束</Text>
             </View>
         }
         return <View />
@@ -341,7 +341,8 @@ export default function Component(props: { isNextStep?: boolean }) {
         return `${hour > 0 ? hour + '小时' : ''}${minute > 0 ? minute + '分钟' : ''}`
     }
 
-    function showDurationPicker() {
+    function showDurationPicker(e) {
+        e.stopPropagation()
         var node = <Modal children={durationPickerContent()} dismiss={() => global.showClockModal2(false, null)} confirm={() => {
             var picker = durationPickerRef.current;
             durationChange((picker as any).getConfirmData());
@@ -355,7 +356,7 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     function durationPickerContent() {
         var color = getColor(time)
-        var title = getDurationTitle(time,t)
+        var title = getDurationTitle(time, t)
         return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
             <PickerViews ref={durationPickerRef}
                 onChange={durationChange}
@@ -369,7 +370,9 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     function minus() {
         if (isFast) {
-            var count = fastDuration - 5 * 60 * 1000
+            var count = fastDuration - common.duration.step * 60 * 1000
+            count = count<3600000?3600000:count
+
             setFastDuration(count)
             var hour = count / 60000 / 60
             var minute = count / 60000 % 60
@@ -377,7 +380,8 @@ export default function Component(props: { isNextStep?: boolean }) {
             setFastPickerValue(durationIndex('00:00', `${hour > 10 ? hour : '0' + hour}:${minute > 10 ? minute : '0' + minute}`, common))
         }
         else {
-            var count = sleepDuration - 5 * 60 * 1000
+            var count = sleepDuration - common.duration.step * 60 * 1000
+            count = count<3600000?3600000:count
 
             setSleepDuration(count)
             var hour = count / 60000 / 60
@@ -389,7 +393,9 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     function plus() {
         if (isFast) {
-            var count = fastDuration + 5 * 60 * 1000
+            var count = fastDuration + common.duration.step * 60 * 1000
+            count = count>23*3600000?23*3600000:count
+
             setFastDuration(count)
             var hour = count / 60000 / 60
             var minute = count / 60000 % 60
@@ -397,7 +403,9 @@ export default function Component(props: { isNextStep?: boolean }) {
             setFastPickerValue(durationIndex('00:00', `${hour > 10 ? hour : '0' + hour}:${minute > 10 ? minute : '0' + minute}`, common))
         }
         else {
-            var count = sleepDuration + 5 * 60 * 1000
+            var count = sleepDuration + common.duration.step * 60 * 1000
+
+            count = count>23*3600000?23*3600000:count
 
             setSleepDuration(count)
             var hour = count / 60000 / 60
@@ -445,7 +453,7 @@ export default function Component(props: { isNextStep?: boolean }) {
     if (!user.isLogin) {
         return <View style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}>
             <Text>16:00</Text>
-            <Text style={{ color: ColorType.fast }} onClick={login}>Start Fast</Text>
+            <Text style={{ color: global.fastColor?global.fastColor:ColorType.fast }} onClick={login}>Start Fast</Text>
         </View>
     }
 
@@ -458,25 +466,26 @@ export default function Component(props: { isNextStep?: boolean }) {
             }}>
                 {
                     (time.status == 'WAIT_FOR_START') && <Stepper child={
-                        <Text className="stepper_text" style={{ color: ColorType.sleep, opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
+                        <Text className="stepper_text" style={{ color: global.sleepColor?global.sleepColor:ColorType.sleep, opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
                     } minus={minus} plus={plus}
-                    themeColor={ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
+                        themeColor={global.sleepColor?global.sleepColor:ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
                 }
                 {
-                    time.status == 'ONGOING1' && <View>
-                        <Text className="counter_text" style={{ color: textNextStepAlpha(time) == 1 ? '#FA5151' : ColorType.fast, opacity: textNextStepAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
+                    (time.status == 'ONGOING1' || time.status == 'ONGOING2') &&
+                    <View className="console_time_bg">
+                        <View className="console_time_item">
+                            <Text className="console_time_value" style={{ color: global.fastColor?global.fastColor:ColorType.fast, opacity: textNextStepAlpha(time) }}>{
+                                TimeFormatter.calculateTimeDifference(time.fast.target_start_time,
+                                    time.fast.target_end_time, true)}</Text>
+                            <Text className="console_time_desc">{t('feature.track_time_duration.console.total_duration')}</Text>
+                        </View>
+                        <View className="console_time_item">
+                            <Text className="console_time_value" style={{ color: textNextStepAlpha(time) == 1 ? '#FA5151' : global.fastColor?global.fastColor:ColorType.fast, opacity: textNextStepAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
+                            <Text className="console_time_desc">{textNextStepAlpha(time) == 1 ? t('feature.track_time_duration.console.timeout') : t('feature.track_time_duration.console.countdown_not_due')}</Text>
+                        </View>
                     </View>
                 }
 
-                {
-                    time.status == 'ONGOING2' && <View>
-                        <Text className="counter_text" style={{ color: textNextStepAlpha(time) == 1 ? '#FA5151' : ColorType.fast, opacity: textNextStepAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
-                    </View>
-                }
-                {
-                    targetView()
-                }
-
                 <View>
                     {
                         nextStepBtns()
@@ -485,36 +494,42 @@ export default function Component(props: { isNextStep?: boolean }) {
             </View>
         </Box>
     }
+
+    function ongoing() {
+        if (time.status == 'ONGOING' || time.status == 'ONGOING2' || time.status == 'ONGOING3') {
+            var isFastData = time.scenario == 'FAST' || time.status == 'ONGOING3'
+            var duration = TimeFormatter.calculateTimeDifference(isFastData ? time.fast.target_start_time : time.sleep.target_start_time,
+                isFast ? time.fast.target_end_time : time.sleep.target_end_time, true);
+            return <View className="console_time_bg">
+                <View className="console_time_item">
+                    <Text className="console_time_value" style={{ color: isFastData ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep, opacity: textAlpha(time) }}>{duration}</Text>
+                    <Text className="console_time_desc">{t('feature.track_time_duration.console.total_duration')}</Text>
+                </View>
+                <View className="console_time_item">
+                    <Text className="console_time_value" style={{ color: textColor, opacity: textAlpha(time) }}>{isFastData ?
+                        TimeFormatter.countdown(time.fast.target_end_time) :
+                        TimeFormatter.countdown(time.sleep.target_end_time)}</Text>
+                    <Text className="console_time_desc">{textAlpha(time) == 1 ? t('feature.track_time_duration.console.timeout') : t('feature.track_time_duration.console.countdown_not_due')}</Text>
+                </View>
+            </View>
+        }
+        return <View />
+    }
     return (
         <Box >
             <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                 {
-                    time.status == 'ONGOING' && <View>
-                        <Text className="counter_text" style={{ color: textColor, opacity: textAlpha(time) }}>{time.scenario == 'FAST' ?
-                            TimeFormatter.countdown(time.fast.target_end_time) :
-                            TimeFormatter.countdown(time.sleep.target_end_time)}</Text>
-                    </View>
+                    ongoing()
                 }
                 {
                     (time.status == 'ONGOING1' || time.status == 'WAIT_FOR_START') && <Stepper child={
                         <Text className="stepper_text" style={{ color: textColor, opacity: textAlpha(time) }} onClick={showDurationPicker}>{durationFormate()}</Text>
                     } minus={minus} plus={plus}
-                    themeColor={isFast?ColorType.fast:ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
-                }
-                {
-                    time.status == 'ONGOING2' && <View>
-                        <Text className="counter_text" style={{ color: textColor, opacity: textAlpha(time) }}>{TimeFormatter.countdown(time.sleep.target_end_time)}</Text>
-                    </View>
+                        themeColor={isFast ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep} disableMinus={disableMinus()} disablePlus={disablePlus()} />
                 }
-
-                {
-                    time.status == 'ONGOING3' && <View>
-                        <Text className="counter_text" style={{ color: textColor, opacity: textAlpha(time) }}>{TimeFormatter.countdown(time.fast.target_end_time)}</Text>
-                    </View>
-                }
-                {
+                {/* {
                     targetView()
-                }
+                } */}
 
                 <View>
                     {

src/features/trackTimeDuration/components/Dial.tsx

@@ -77,7 +77,7 @@ const Component = (props) => {
         if (needDrawFastRing) {
             ctx.beginPath();
             ctx.arc(centerX, centerY, radius + 16 + 8, global.fast_start_angle, global.fast_end_angle);
-            ctx.strokeStyle = ColorType.fast;
+            ctx.strokeStyle = global.fastColor?global.fastColor:ColorType.fast;
             ctx.lineWidth = 2;
             ctx.stroke();
         }

src/features/trackTimeDuration/components/More.tsx

@@ -134,7 +134,7 @@ const Component = forwardRef((props, ref) => {
         
         return <LimitPickers ref={limitPickerRef}
         title = '结束断食'
-        themeColor={ColorType.fast}
+        themeColor={global.fastColor?global.fastColor:ColorType.fast}
         limit={limit} onCancel={() => { setIsOpen(false); setShowModal(false) }} 
         onChange={(e) => {
             endFast(e)

src/features/trackTimeDuration/components/RecordFastSleep.scss

@@ -1,4 +1,4 @@
-.fast_sleep_item{
+.fast_sleep_item {
     // display: 'flex',position:'relative', flex-: 'row', alignItems: 'center'
     display: flex;
     position: relative;
@@ -32,15 +32,27 @@
 }
 
 .arrow1 {
-    width: 48px;
-    height: 48px;
+    width: 40px;
+    height: 40px;
+    opacity: 0.2;
 }
 
 .recordTime {
+
+    font-size: 28px;
+    line-height: 28px;
+    height: 28px;
+    color: #ffffff;
+    opacity: 0.4;
+    font-weight: 400;
+
+}
+
+.record_arrow_bg {
     position: absolute;
-    font-size: 24px;
-    color: #fff;
-    opacity: 0.2;
     right: 0px;
     bottom: 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -21,7 +21,8 @@ import { ColorType } from "@/context/themes/color";
 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 isDebugModel = false
+    const { t } = useTranslation()
     const canvasId = props.data.id
     const record = props.data;
     function header() {
@@ -38,6 +39,7 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
         var id = props.data.id
         delRecord(id
         ).then(res => {
+            global.refreshTime()
             Taro.showToast({
                 title: t('page.records_history.del_success')
             })
@@ -47,7 +49,7 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
     }
 
     function schedules() {
-        if (props.data.scenario != 'FAST_SLEEP'){
+        if (props.data.scenario != 'FAST_SLEEP') {
             return <CenterContentTitleModal title="Timeline">
                 <TimelineFastSleep data={props.data} />
             </CenterContentTitleModal>
@@ -94,7 +96,7 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
         </View>
     }
 
-    function showDetail() {
+    function showDetail(e) {
         if (props.type == 'latest') {
             setSegmentIndex(0)
             global.segmentIndex = 0
@@ -139,7 +141,7 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
 
         if (props.type == 'record' || props.type == 'latest') {
             var realRing = getReal(record, true, true)
-            if (props.data.status == 'ONGOING3'){
+            if (props.data.status == 'ONGOING3') {
                 realRing.color = 'rgba(0,0,0,0)'
                 // bgRing.color = 'rgba(0,0,0,0)'
             }
@@ -252,32 +254,36 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
                     showFast && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
                 }
                 {
-                    showFast && <Text className="duration_value" style={{ color: ColorType.fast }}>{fastDuration}</Text>
+                    showFast && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration}</Text>
                 }
                 {
                     showSleep && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
                 }
                 {
-                    showSleep && <Text className="duration_value" style={{ color: ColorType.sleep }}>{sleepDuration}</Text>
+                    showSleep && <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{sleepDuration}</Text>
                 }
             </View>
-            <Image className="arrow1" src={require('@/assets/images/arrow.png')} />
-            <Text className='recordTime'>{TimeFormatter.formatTimestamp(props.data.last_real_check_time)}</Text>
+            {/* <Image className="arrow1" src={require('@/assets/images/arrow.png')} /> */}
+            <View className="record_arrow_bg" style={{backgroundColor:isDebugModel?'red':'transparent'}}>
+                <Text className='recordTime'>{TimeFormatter.dateDescription(props.data.last_real_check_time, true)}</Text>
+                <Image className="arrow1" src={require('@/assets/images/arrow3.png')} />
+            </View>
+
         </View>
     }
 
 
     return <Box header={header()}>
-            <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
-                onClick={() => { showDetail() }}
-            >{recordDetail()}
-            </RecordItem>
-            {
-                showDetailModal && <Modal children={schedules()}
-                    modalType={ModalType.center}
-                    dismiss={() => setShowDetailModal(false)}
-                    confirm={() => { }} />
-            }
+        <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
+            onClick={ showDetail}
+        >{recordDetail()}
+        </RecordItem>
+        {
+            showDetailModal && <Modal children={schedules()}
+                modalType={ModalType.center}
+                dismiss={() => setShowDetailModal(false)}
+                confirm={() => { }} />
+        }
 
-        </Box>
+    </Box>
 }

src/features/trackTimeDuration/components/Schedule.tsx

@@ -36,7 +36,8 @@ export default function Component(props: { type?: string, data?: any, delSuccess
         }
     }
 
-    function showStage() {
+    function showStage(e) {
+        e.stopPropagation()
         setShowModal(true)
     }
 
@@ -65,14 +66,14 @@ export default function Component(props: { type?: string, data?: any, delSuccess
             btnStyle = {
                 fontSize: 14,
                 lineHeight: 18,
-                color: ColorType.sleep
+                color: global.sleepColor ? global.sleepColor : ColorType.sleep
             }
         }
         else if (props.data.scenario == 'FAST') {
             btnStyle = {
                 fontSize: 14,
                 lineHeight: 18,
-                color: ColorType.fast
+                color: global.fastColor ? global.fastColor : ColorType.fast
             }
         }
         else if (props.data.scenario == 'FAST_SLEEP') {
@@ -96,7 +97,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
                     <Switch isOn={permission.wxPubFollow} onClick={() => followWxPub()} />
                 </View>
             }
-            {
+            {/* {
                 permission.wxPubFollow && props.data.status == 'WAIT_FOR_START' && <Buttons disabled={props.data.status != 'WAIT_FOR_START'}
                     className={props.data.scenario == 'FAST_SLEEP' ? 'mixed' : ''}
                     btnStyle={btnStyle} type={ButtonType.text} title="调整日程" onClick={() => {
@@ -113,7 +114,7 @@ export default function Component(props: { type?: string, data?: any, delSuccess
                             url: '/pages/clock/SetSchedule'
                         })
                     }} />
-            }
+            } */}
         </View>
     }
 
@@ -161,11 +162,18 @@ 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',color:getThemeColor(time) }}>{
-                        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>
+                    {
+                        time.scenario == 'FAST_SLEEP' ? <Text className="fast_sleep_text" style={{ textAlign: 'right' }}>{
+                            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> :
+                            <Text style={{ textAlign: 'right', color: getThemeColor(time) }}>{
+                                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>
             }
         </View>
@@ -186,8 +194,45 @@ export default function Component(props: { type?: string, data?: any, delSuccess
         </View >
     }
 
+    function tapBox(e) {
+        if (permission.wxPubFollow && props.data.status == 'WAIT_FOR_START') {
+            Taro.showActionSheet({
+                itemList: ["调整日程"]
+            })
+                .then(res => {
+                    switch (res.tapIndex) {
+                        case 0:
+                            if (props.data.name == 'FAST_SLEEP') {
+                                dispatch(setStep('fast'))
+                            }
+                            else if (props.data.name == 'SLEEP') {
+                                dispatch(setStep('sleep'))
+                            }
+                            else {
+                                dispatch(setStep('fast'))
+                            }
+                            Taro.navigateTo({
+                                url: '/pages/clock/SetSchedule'
+                            })
+                            break;
+                        case 1:
+
+                            break;
+                    }
+                })
+                .catch(err => {
+                    console.log(err.errMsg)
+                })
+        }
+        else {
+            Taro.vibrateShort({
+                type: 'heavy'
+            })
+        }
+    }
+
 
-    return <Box>
+    return <Box onClick={tapBox}>
         {
             detail()
         }
@@ -201,12 +246,6 @@ export default function Component(props: { type?: string, data?: any, delSuccess
                 <CenterContentTitleModal title="Stage">
                     <Stage data={time} />
                 </CenterContentTitleModal>
-                {/* <View>
-                    <Text>Stage</Text>
-                    <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        <Stage data={time} />
-                    </View>
-                </View> */}
             </Modal>
         }
     </Box>

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -274,7 +274,7 @@ export default function Component() {
       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' ? ColorType.fast : ColorType.sleep}
+      themeColor={scenario.step == 'fast' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep}
       showBtns={true} onCancel={() => { setIsOpen(false) }} />
   }
 
@@ -296,7 +296,7 @@ export default function Component() {
 
   function timeContent() {
     return <TimePicker time={chooseStart ? startTime : endTime}
-      color={scenario.step == 'fast' ? ColorType.fast : ColorType.sleep}
+      color={scenario.step == 'fast' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep}
       title={pickerTitle()}
       confirm={chooseStart ? onStartTimeChange : onEndTimeChange}
       cancel={() => { setIsTimeOpen(false) }} />
@@ -309,7 +309,7 @@ export default function Component() {
       {/* <Text className="subtitle">{t('page.set_schedule.fast_subtitle')}</Text> */}
       <TitleView title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
         subTitle={t('page.set_schedule.fast_subtitle')}
-        titleColor={scenario.step == 'fast' ? ColorType.fast : ColorType.sleep}
+        titleColor={scenario.step == 'fast' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep}
       />
 
       <View className="box">
@@ -363,7 +363,7 @@ export default function Component() {
   }
 
   return <Layout
-    titleColor={scenario.step == 'fast' ? ColorType.fast : ColorType.sleep}
+    titleColor={scenario.step == 'fast' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep}
     title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
     titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.customHeader}>
     {

src/features/trackTimeDuration/components/Stage.tsx

@@ -43,11 +43,11 @@ export default function Component(props: { data: any }) {
                 'stage_step stage_step_border'}>阶段A</Text>
             <Text className="stage_title" style={{
                 color: props.data.status == 'ONGOING1' ?
-                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
+                global.fastColor?global.fastColor:ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>睡前断食</Text>
             <Text className="stage_value" style={{
                 color: props.data.status == 'ONGOING1' ?
-                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
+                global.fastColor?global.fastColor:ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>{getStepATime(props.data)}</Text>
         </View>
         <View className="stage_item">
@@ -56,11 +56,11 @@ export default function Component(props: { data: any }) {
                 'stage_step stage_step_border'}>阶段B</Text>
             <Text className="stage_title" style={{
                 color: props.data.status == 'ONGOING2' ?
-                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
+                global.fastColor?global.fastColor:ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>睡眠中断食</Text>
             <Text className="stage_value" style={{
                 color: props.data.status == 'ONGOING2' ?
-                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
+                global.fastColor?global.fastColor:ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>{getStepBTime(props.data)}</Text>
         </View>
         <View className="stage_item">
@@ -69,11 +69,11 @@ export default function Component(props: { data: any }) {
                 'stage_step stage_step_border'}>阶段C</Text>
             <Text className="stage_title" style={{
                 color: props.data.status == 'ONGOING3' ?
-                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
+                global.fastColor?global.fastColor:ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>起床后断食</Text>
             <Text className="stage_value" style={{
                 color: props.data.status == 'ONGOING3' ?
-                ColorType.fast : 'rgba(255, 255, 255, 0.8)'
+                global.fastColor?global.fastColor:ColorType.fast : 'rgba(255, 255, 255, 0.8)'
             }}>{getStepCTime(props.data)}</Text>
         </View>
 

src/features/trackTimeDuration/components/StatusIndicator.tsx

@@ -77,13 +77,13 @@ export default function Component() {
     return <View className='subcontent'>
         {
             time.scenario != 'SLEEP' && <View className='scenario'>
-                <View className='point' style={{ backgroundColor: ColorType.fast }} />
+                <View className='point' style={{ backgroundColor: global.fastColor?global.fastColor:ColorType.fast }} />
                 <Text className='name'>{getFastName()}</Text>
             </View>
         }
         {
             time.scenario != 'FAST' && <View className='scenario' style={{ opacity: sleepAlpha() }}>
-                <View className='point' style={{ backgroundColor: ColorType.sleep }} />
+                <View className='point' style={{ backgroundColor: global.sleepColor?global.sleepColor:ColorType.sleep }} />
                 <Text className='name'>{getSleepName()}</Text>
             </View>
         }

src/features/trackTimeDuration/components/TitleView.tsx

@@ -9,6 +9,7 @@ export default function Component(props: {
     children?: any,
     subTitle?: string,
     title: string, titleColor?: string,
+    secondPage?: boolean,
     showAddBtn?: boolean
 }) {
     const time = useSelector((state: any) => state.time);
@@ -54,7 +55,10 @@ export default function Component(props: {
 
     return <View className='title_view'>
         <View className='title_bg'>
-            <Text className='title' style={{ color: props.titleColor ? props.titleColor : '#fff' }}>{props.title}</Text>
+            <Text className='title' style={{
+                color: props.titleColor ? props.titleColor : '#fff',
+                fontSize: props.secondPage ? 28 : 36
+            }}>{props.title}</Text>
             {
                 time.status == 'WAIT_FOR_START' && props.showAddBtn && <Image onClick={more} src={require('@/assets/images/add.png')} className='icon' />
             }

src/features/trackTimeDuration/hooks/Common.tsx

@@ -2,15 +2,15 @@ import { ColorType } from "@/context/themes/color"
 
 export const getThemeColor = (time: any) => {
     if (time.scenario == 'FAST') {
-        return ColorType.fast
+        return global.fastColor?global.fastColor:ColorType.fast
     }
     else if (time.scenario == 'SLEEP') {
-        return ColorType.sleep
+        return global.sleepColor?global.sleepColor:ColorType.sleep
     }
     else {
         if (time.status == 'WAIT_FOR_START' || time.status == 'ONGOING3') {
-            return ColorType.fast
+            return global.fastColor?global.fastColor:ColorType.fast
         }
-        return ColorType.sleep
+        return global.sleepColor?global.sleepColor:ColorType.sleep
     }
 }

src/features/trackTimeDuration/hooks/Console.tsx

@@ -168,17 +168,17 @@ export const getTimePickerTitle = (data, t) => {
 //按钮颜色
 export const getColor = (data) => {
     if (data.scenario == 'FAST') {
-        return ColorType.fast
+        return global.fastColor?global.fastColor:ColorType.fast
     }
     else if (data.scenario == 'SLEEP') {
-        return ColorType.sleep
+        return global.sleepColor?global.sleepColor:ColorType.sleep
     }
     else {
         if (data.status == 'WAIT_FOR_START' || data.status == 'ONGOING3') {
-            return ColorType.fast
+            return global.fastColor?global.fastColor:ColorType.fast
         }
     }
-    return ColorType.sleep
+    return global.sleepColor?global.sleepColor:ColorType.sleep
 }
 
 //透明度

src/features/trackTimeDuration/hooks/RingData.tsx

@@ -54,26 +54,26 @@ export const getCommon = (data: any, isBigRing: boolean) => {
 
 export const getBgRing = () => {
     return {
-        color: '#2c2c2c'
+        color: '#0c0c0c'
     }
 }
 
 export const getDot = (data: any, isBigRing: boolean) => {
     const currentDotBig: CurrentDot = {
-        color:ColorType.fast,
+        color: global.fastColor ? global.fastColor : ColorType.fast,
         lineWidth: 8,
         borderColor: 'black'
     }
-    
+
     const currentDotSmall: CurrentDot = {
-        color: ColorType.sleep,
+        color: global.sleepColor?global.sleepColor:ColorType.sleep,
         lineWidth: 8,
         borderColor: 'black'
     }
 
     if (isBigRing) {
         if (data && data.scenario == 'SLEEP') {
-            currentDotBig.color = ColorType.sleep
+            currentDotBig.color = global.sleepColor?global.sleepColor:ColorType.sleep
         }
         return currentDotBig
     }
@@ -88,7 +88,7 @@ export const getTarget = (data: any, isBigRing: boolean) => {
         startArc: 0,
         durationArc: 0
     }
-    
+
     const targetRingSmall: TargetRing = {
         color: '#FF0000',
         startArc: 0,
@@ -97,7 +97,7 @@ export const getTarget = (data: any, isBigRing: boolean) => {
 
     if (isBigRing) {
         if (data.scenario == 'SLEEP') {
-            targetRingBig.color = ColorType.sleep
+            targetRingBig.color = global.sleepColor?global.sleepColor:ColorType.sleep
             targetRingBig.startArc = startArc(data.sleep.target_start_time)
             targetRingBig.durationArc = durationArc(data.sleep.start_time, data.sleep.target_end_time)
         }
@@ -116,20 +116,20 @@ export const getTarget = (data: any, isBigRing: boolean) => {
 
 export const getReal = (data: any, isBigRing: boolean, isRecord: boolean) => {
     const realRingBig: RealRing = {
-        color: ColorType.fast,
+        color: global.fastColor ? global.fastColor : ColorType.fast,
         startArc: 0,
         durationArc: 0
     }
 
     const realRingSmall: RealRing = {
-        color: ColorType.sleep,
+        color: global.sleepColor?global.sleepColor:ColorType.sleep,
         startArc: 0,
         durationArc: 0
     }
 
     if (isBigRing) {
         if (data.scenario == 'SLEEP') {
-            realRingBig.color = ColorType.sleep
+            realRingBig.color = global.sleepColor?global.sleepColor:ColorType.sleep
             realRingBig.startArc = startArc(data.sleep.real_start_time)
             realRingBig.durationArc = durationArc(data.sleep.real_start_time, isRecord ? (data.sleep.real_end_time ? data.sleep.real_end_time : new Date().getTime()) : new Date().getTime())
         }

src/pages/clock/Clock.tsx

@@ -2,6 +2,8 @@ import { Component, PropsWithChildren, useEffect, useRef, useState } from 'react
 import { View, Text, Button, Input, Picker, Swiper, SwiperItem } from '@tarojs/components'
 import '../index/index.scss'
 import './Clock.scss'
+// import './context/locales/index'
+import '@/context/locales/index'
 import Taro, { useDidShow, usePageScroll, useReady, useRouter } from '@tarojs/taro'
 // import ComponentA from './component'
 import Rings from '@components/view/Rings';
@@ -205,7 +207,11 @@ export default function IndexPage() {
     clearTempScenarioCache()
   })
 
-  global.showSingleFastEnd = ()=>{
+  global.refreshTime = () => {
+    getCheckData()
+  }
+
+  global.showSingleFastEnd = () => {
     setShowSingleFastEnd(true)
   }
 
@@ -214,6 +220,11 @@ export default function IndexPage() {
       dispatch(updateScenario((res as any).current_record))
       dispatch(setConfigs((res as any).time_input_schema));
       dispatch(setScenario((res as any).scenario));
+
+      if ((res as any).theme_color) {
+        global.fastColor = (res as any).theme_color.fast
+        global.sleepColor = (res as any).theme_color.sleep
+      }
       machine.context.checkData = res as any;
 
       global.scenario = (res as any).current_record.scenario;
@@ -318,7 +329,7 @@ export default function IndexPage() {
           needShowAddTip && <Tooltip title="添加到我的小程序" closeTip={() => { setNeedShowAddTip(false) }} />
         }
 
-        <Box>
+        <Box tranparentBg={true}>
           <View className='clock_bg'>
             <Clocks />
           </View>
@@ -333,7 +344,7 @@ export default function IndexPage() {
               duration={300}
               interval={300}
               // indicator-margin={30}
-              indicator-offset={[0,-30]}
+              indicator-offset={[0, -30]}
               indicator-height={30}
               indicatorDots={global.consoleType == 'idle'}
               onChange={(e) => {

src/pages/common/RecordsHistory.scss

@@ -12,4 +12,11 @@
 .no_records{
     color: #fff;
     font-size: 72px;
+}
+
+.fast_sleep_item_bg{
+    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    flex-direction: 0;
 }

src/pages/common/RecordsHistory.tsx

@@ -14,6 +14,7 @@ import { useSelector } from "react-redux";
 import RecordFastSleep from "@/features/trackTimeDuration/components/RecordFastSleep";
 import './RecordsHistory.scss'
 import { useTranslation } from "react-i18next";
+import './RecordsHistory.scss'
 
 export default function Page() {
     const router = useRouter();
@@ -95,6 +96,7 @@ export default function Page() {
     }
 
     function getHistory(page = pageIndex) {
+        debugger
         if (page == 1)
             setTriggered(true)
         if (router.params.type == 'time') {
@@ -180,6 +182,7 @@ export default function Page() {
     }
 
     function doClear() {
+        debugger
         if (router.params.type == 'activity') {
             cleartActivityRecords({
                 code: '_walk'
@@ -202,6 +205,7 @@ export default function Page() {
         else if (router.params.type == 'time') {
             clearTimeRecords().then(res => {
                 refresh()
+                global.refreshTime()
                 // global.refreshMetric()
                 // Taro.getCurrentPages()[0].refresh()
             })
@@ -216,7 +220,9 @@ export default function Page() {
                 }
                 {
                     records.map((item, index) => {
-                        return <RecordFastSleep key={index} data={item} type='record' delSuccess={(item) => removeItem(item)} />
+                        return <View className="fast_sleep_item_bg">
+                            <RecordFastSleep key={index} data={item} type='record' delSuccess={(item) => removeItem(item)} />
+                        </View>
                         // return <Schedule key={index} data={item} type="record" delSuccess={(item) => removeItem(item)} />
                     })
                 }
@@ -235,16 +241,18 @@ export default function Page() {
             return t('page.records_history.time_title')
         }
         else if (router.params.type == 'metric') {
-            return t('page.records_history.metric_title', {title:router.params.title})
+            return t('page.records_history.metric_title', { title: router.params.title })
         }
         else {
-            return t('page.records_history.activity_title', {title:router.params.title})
+            return t('page.records_history.activity_title', { title: router.params.title })
         }
     }
 
     return <View style={{ position: 'relative' }}>
         <Layout children={showErrorPage ? <NoData refresh={() => { refresh() }} /> : detail()}
             // title={router.params.title}
+            secondPage={true}
+            titleColor={router.params.themeColor ? router.params.themeColor : '#fff'}
             title={getTitle()}
             type={TemplateType.flex}
             refresh={() => { refresh() }}

src/utils/common.scss

@@ -1,4 +1,15 @@
-$themeColor:#AAFF00;
-$backgroundColor:#1C1C1C;
-$fastColor:#00ffff;
-$sleepColor:#8961F5;
+$themeColor: #AAFF00;
+$backgroundColor: #1C1C1C;
+$fastColor: #00ffff;
+$sleepColor: #8961F5;
+$alertColor:#ea6c6c;
+$alertFastColor:#00ffff66;
+$alertSleepColor:#8961F566;
+
+
+.fast_sleep_text {
+    background: linear-gradient(90deg, $fastColor 0%, $sleepColor 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}

src/utils/time_format.ts

@@ -1,4 +1,5 @@
 export class TimeFormatter {
+  static nowDuration = 30
   //格式化时间
   static formatTimestamp(timestamp: number): string {
     const currentDate = new Date();
@@ -55,8 +56,8 @@ export class TimeFormatter {
     }
     return str
   }
-  //2.基于日期显示日期秒数,省略今天描述
-  static dateDescription(timestamp: number): string {
+  //2.基于日期显示日期,省略今天描述
+  static dateDescription(timestamp: number, showToday?: boolean): string {
     const currentDate = new Date();
     const inputDate = new Date(timestamp);
 
@@ -66,7 +67,11 @@ export class TimeFormatter {
       inputDate.getMonth() === currentDate.getMonth() &&
       inputDate.getFullYear() === currentDate.getFullYear()
     ) {
-      return ``;
+      if (currentDate.getTime() - timestamp <= TimeFormatter.nowDuration * 1000 && currentDate.getTime() - timestamp >=0) {
+        return '刚刚'
+      }
+
+      return showToday ? '今天' : ``;
     }
 
     // 判断是否是昨天
@@ -93,9 +98,34 @@ export class TimeFormatter {
       return `明天`;
     }
 
-    return `${inputDate.getFullYear()}-${TimeFormatter.formatNumber(inputDate.getMonth() + 1)}-${TimeFormatter.formatNumber(
-      inputDate.getDate()
-    )}`;
+
+    const utcDate1 = Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
+    const utcDate2 = Date.UTC(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate())
+    const oneDayMilliseconds = 24 * 60 * 60 * 1000; // 一天的毫秒数
+    var dayDifference = Math.floor((utcDate2 - utcDate1) / oneDayMilliseconds);
+    if (dayDifference < 0) {
+      dayDifference = 0 - dayDifference;
+      return `${dayDifference}天前`
+    }
+    return `${dayDifference}天后`
+
+    // return `${inputDate.getFullYear()}-${TimeFormatter.formatNumber(inputDate.getMonth() + 1)}-${TimeFormatter.formatNumber(
+    //   inputDate.getDate()
+    // )}`;
+  }
+
+  //3. datedescription+时间，刚刚时隐藏时间
+  static datetimeDescription(timestamp: number): string {
+    const currentDate = new Date();
+    if (currentDate.getTime() - timestamp <= TimeFormatter.nowDuration * 1000) {
+      return TimeFormatter.dateDescription(timestamp, true)
+    }
+    return TimeFormatter.dateDescription(timestamp,true) + '' + TimeFormatter.timeDescription(timestamp)
+  }
+
+  static timeDescription(timestamp): string {
+    const date = new Date(timestamp);
+    return `${TimeFormatter.padZero(date.getHours())}:${TimeFormatter.padZero(date.getMinutes())}`;
   }
 
   static formatTime(date: Date): string {
@@ -105,6 +135,13 @@ export class TimeFormatter {
   static formatNumber(num: number): string {
     return num.toString().padStart(2, '0');
   }
+  static getYearByDate(num:number):string{
+    return (num+'').substring(0,4)+'年'
+  }
+
+  static getMonthAndDayByDate(num:number):string{
+    return (num+'').substring(4,6)+'月'+(num+'').substring(6,8)+'日'
+  }
 
   //计算时间间隔
   static calculateTimeDifference(startTimestamp: number, endTimestamp: number, ingoreSeconds?: boolean): string {
@@ -186,7 +223,7 @@ export class TimeFormatter {
   }
 
   //获取当前时间（hh:mm）
-  static getCurrentHourAndMinute = () =>{
+  static getCurrentHourAndMinute = () => {
     var now = new Date()
     return `${TimeFormatter.padZero(now.getHours())}:${TimeFormatter.padZero(now.getMinutes())}`;
   }