update

src/app.config.ts

@@ -17,7 +17,8 @@ const appConfig = defineAppConfig({
     'pages/Activity',
     'pages/RecordsHistory',
     'pages/ProfileSetting',
-    'pages/Setting'
+    'pages/Setting',
+    'pages/EditPage',
   ],
   subPackages: [
     {

src/app.scss

@@ -33,7 +33,7 @@ page {
     color: #1c1c1c;
 }
 
-.gray1{
+.gray1 {
     background-color: #2D2D2F;
 }
 
@@ -49,18 +49,47 @@ page {
     background-color: #1c1c1c;
 }
 
-.sleep_color{
+.sleep_color {}
+
+.sleep_bg_color {}
+
+.fast_color {}
+
+.fast_bg_color {}
+
 
-}
 
-.sleep_bg_color{
+//modal
 
+.modal_title {
+    font-size: 36px;
+    line-height: 120px;
+    height: 120px;
+    font-weight: 500;
+    width: 750px;
+    text-align: center;
 }
 
-.fast_color{
+.modal_operate {
+    display: flex;
+    flex-direction: row;
+    width: 750px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 36px;
+}
 
+.modal_btn {
+    width: 260px;
+    height: 84px;
+    border-radius: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.fast_bg_color{
+.btn_space {
 
+    width: 90px;
 }

src/components/Box.tsx

@@ -1,8 +1,8 @@
 import { View } from "@tarojs/components";
 import './Box.scss'
 
-export default function Component(props: { child: any }) {
+export default function Component(props: { children: React.ReactNode }) {
     return <View className="box-container">
-        {props.child}
+        {props.children}
     </View>;
 }

src/components/LimitPickers.tsx

@@ -3,10 +3,27 @@ import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import './LimitPickers.scss'
 import Taro from "@tarojs/taro";
 // export default function Component(props: { limit: number, onChange: Function, onCancel: Function,isRealTime?:boolean,limitDay?:number,time?:number,ref?:any }) {
-const Component = forwardRef((props: { limit: number, onChange: Function, onCancel: Function, isRealTime?: boolean, limitDay?: number, time?: number }, ref) => {
+const Component = forwardRef((props: {
+    limit: number, onChange: Function, onCancel: Function,
+    isRealTime?: boolean, limitDay?: number, time?: number, themeColor?: string, title?: string
+}, ref) => {
     const days: string[] = [];
     const today = new Date();
+    var color = props.themeColor ? props.themeColor : '#ff0000'
+    var alpha = alphaToHex(0.4)
     const [values, setValues] = useState([props.limitDay ? props.limitDay - 1 : 6, today.getHours(), today.getMinutes()])
+    const [isDisableConfirm, setIsDisableConfirm] = useState(false)
+
+    function alphaToHex(alpha) {
+        var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
+        var hexValue = alphaValue.toString(16); // 将整数转换为十六进制字符串
+        if (hexValue.length === 1) {
+            hexValue = "0" + hexValue; // 如果十六进制字符串只有一位，补零
+        }
+        return hexValue;
+    }
+
+
     useEffect(() => {
         global.picker_time = global.set_time
         if (props.time) {
@@ -103,6 +120,7 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
                 title: '不能更大了',
             })
             setValues([list[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
+            disableConfirm()
         }
         else {
             var limitDate = new Date(props.limit)
@@ -121,6 +139,7 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
                     title: '不能更小了',
                 })
                 setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
+                disableConfirm()
                 return
             }
 
@@ -132,6 +151,13 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
 
     }
 
+    function disableConfirm(){
+        setIsDisableConfirm(true)
+        setTimeout(() => {
+            setIsDisableConfirm(false)
+        },2000);
+    }
+
     function expandZero(num: number): string {
         return num < 10 ? `0${num}` : `${num}`;
     }
@@ -140,17 +166,20 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
         props.onCancel()
     }
 
-    // function confirm() {
-    //     var date = new Date();
-    //     if (!props.isRealTime) {
-    //         date = new Date(global.set_time);
-    //     }
+    function confirm() {
+        if (isDisableConfirm){
+            return;
+        }
+        var date = new Date();
+        if (!props.isRealTime) {
+            date = new Date(global.set_time);
+        }
 
-    //     date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
-    //     date.setHours(values[1])
-    //     date.setMinutes(values[2])
-    //     props.onChange(date.getTime())
-    // }
+        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
+        date.setHours(values[1])
+        date.setMinutes(values[2])
+        props.onChange(date.getTime())
+    }
 
     function setPickerTime() {
 
@@ -175,38 +204,52 @@ const Component = forwardRef((props: { limit: number, onChange: Function, onCanc
 
 
 
-    return <View style={{ backgroundColor: 'transparent', position: 'relative' }}>
-        <PickerView value={values}
-            className="picker"
-            maskClass="picker-mask"
-            onChange={onPickerChange}
-            immediateChange={true}
-            indicatorStyle='height: 50px;'>
-            <PickerViewColumn style='flex:0 0 45%'>
-                {days.map(item => {
-                    return (
-                        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}</View>
-                    );
-                })}
-            </PickerViewColumn>
-            <PickerViewColumn>
-                {hours.map(item => {
-                    return (
-                        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
-                    );
-                })}
-            </PickerViewColumn>
-            <PickerViewColumn>
-                {minutes.map(item => {
-                    return (
-                        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
-                    );
-                })}
-            </PickerViewColumn>
-        </PickerView>
-
-        <View className="point_bg1 ">
-            <Text style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>:</Text>
+    return <View style={{display:'flex',flexDirection:'column'}}>
+        <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
+        <View style={{ backgroundColor: 'transparent', position: 'relative' }}>
+            <PickerView value={values}
+                className="picker"
+                maskClass="picker-mask"
+                onChange={onPickerChange}
+                immediateChange={true}
+                indicatorStyle='height: 50px;'>
+                <PickerViewColumn style='flex:0 0 45%'>
+                    {days.map(item => {
+                        return (
+                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}</View>
+                        );
+                    })}
+                </PickerViewColumn>
+                <PickerViewColumn>
+                    {hours.map(item => {
+                        return (
+                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
+                        );
+                    })}
+                </PickerViewColumn>
+                <PickerViewColumn>
+                    {minutes.map(item => {
+                        return (
+                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
+                        );
+                    })}
+                </PickerViewColumn>
+            </PickerView>
+
+            <View className="point_bg1 ">
+                <Text style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>:</Text>
+            </View>
+        </View>
+        <View className='modal_operate'>
+            <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>
+                <Text className='modal_cancel_text' style={{ color: color }}>取消</Text>
+            </View>
+            <View className='btn_space' />
+            <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
+                <Text className='modal_confirm_text' style={{ color: '#000' }}>确定</Text>
+            </View>
+
+
         </View>
     </View>
 })

src/components/Modal.tsx

@@ -30,11 +30,11 @@ export default function Modal(props: {
             }
         </View>
         <View className='modal_content'>
-            <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
+            {/* <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text> */}
             {
                 props.children
             }
-            <View className='modal_operate'>
+            {/* <View className='modal_operate'>
                 <View className='modal_btn' style={{ backgroundColor: color+alpha }} onClick={() => props.dismiss()}>
                     <Text className='modal_cancel_text' style={{color:color}}>取消</Text>
                 </View>
@@ -44,7 +44,7 @@ export default function Modal(props: {
                 </View>
 
 
-            </View>
+            </View> */}
         </View>
 
     </View>

src/components/PickerViews.tsx

@@ -3,8 +3,14 @@ import './PickerViews.scss'
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 
 // export default function Component(props: { value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function, }) {
-const Component = forwardRef((props: { value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function, }, ref) => {
+const Component = forwardRef((props: {
+    value: any, onChange: Function, items: any, height?: number, showBtns?: boolean, onCancel?: Function,
+    themeColor?: string, title?: string
+}, ref) => {
     const [v, setV] = useState([0])
+    var color = props.themeColor ? props.themeColor : '#ff0000'
+    var alpha = alphaToHex(0.4)
+
     useEffect(() => {
         setV(props.value)
     }, [props.value])
@@ -17,42 +23,58 @@ const Component = forwardRef((props: { value: any, onChange: Function, items: an
         props.onChange(e.detail.value)
     }
 
+    function alphaToHex(alpha) {
+        var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
+        var hexValue = alphaValue.toString(16); // 将整数转换为十六进制字符串
+        if (hexValue.length === 1) {
+            hexValue = "0" + hexValue; // 如果十六进制字符串只有一位，补零
+        }
+        return hexValue;
+    }
+
     function confirm() {
-        return v;
-        // props.onChange(v)
+        // return v;
+        props.onChange(v)
     }
 
     useImperativeHandle(ref, () => ({
-        getConfirmData:confirm
+        getConfirmData: confirm
     }));
 
-    return <PickerView value={v}
-        onChange={onPickerChange}
-        indicatorStyle='height: 50px;'
-        immediateChange={true}
-        className="picker"
-        maskClass="picker-mask"
-    >
-        {
-            props.items.map(item => {
-                return <PickerViewColumn>
-                    {item.map(obj => {
-                        return (
-                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{obj}</View>
-                        );
-                    })}
-                </PickerViewColumn>
-            })
-        }
+    return <View style={{ display: 'flex', flexDirection: 'column' }}>
+        <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
+        <PickerView value={v}
+            onChange={onPickerChange}
+            indicatorStyle='height: 50px;'
+            immediateChange={true}
+            className="picker"
+            maskClass="picker-mask"
+        >
+            {
+                props.items.map(item => {
+                    return <PickerViewColumn>
+                        {item.map(obj => {
+                            return (
+                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{obj}</View>
+                            );
+                        })}
+                    </PickerViewColumn>
+                })
+            }
 
-    </PickerView >
-        {/* {
-            props.showBtns ? <View style={{ marginBottom: 20, marginTop: 20, display: 'flex', flexDirection: 'row', width: '100%' }}>
-                <Text style={{ flex: 1, textAlign: 'center', height: 50, color: '#000' }} onClick={cancel}>取消</Text>
-                <Text style={{ flex: 1, textAlign: 'center', height: 50, color: '#000' }} onClick={confirm}>确认</Text>
-            </View> : null
-        }
-    </View> */}
+        </PickerView >
+        <View className='modal_operate'>
+            <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={()=>{props.onCancel!()}}>
+                <Text className='modal_cancel_text' style={{ color: color }}>取消</Text>
+            </View>
+            <View className='btn_space' />
+            <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
+                <Text className='modal_confirm_text' style={{ color: '#000' }}>确定</Text>
+            </View>
+
+
+        </View>
+    </View>
 })
 
 export default Component;

src/components/Timeline.scss

@@ -31,7 +31,7 @@
   }
   
   .timeline-line {
-    width: 1px;
+    width: 2px;
     background-color: #FFFFFF66;
     position: absolute;
     top: 25px;
@@ -44,7 +44,7 @@
     background-color: transparent;
     border-left-style: dashed;
     border-left-color: #FFFFFF66;
-    border-left-width: 1px;
+    border-left-width: 2px;
   }
 
 

src/features/auth/components/CreateAccount.tsx

@@ -55,7 +55,7 @@ export default function Component(props:{login:()=>void}) {
   return <View style={{ backgroundColor: '#000', flex: 1, flexDirection: 'column', display: 'flex', width: '100%', height: '100%' }}>
     <Texts text={t('feature.auth.create_account.title')} type={TextType.primary}></Texts>
     <Texts text={t('feature.auth.create_account.sub_title')} type={TextType.secondary}></Texts>
-    <Box child={signupComponent()}></Box>
+    <Box children={signupComponent()}></Box>
 
     <Buttons
       onClick={registerF}

src/features/auth/components/CreatePassword.tsx

@@ -63,7 +63,7 @@ export default function Component(prop: { name: string, email: string }) {
   return <View style={{ backgroundColor: '#000', flex: 1, flexDirection: 'column', display: 'flex', width: '100vw', height: '100vh' }}>
     <Texts text={t('feature.auth.create_password.title')} type={TextType.primary}></Texts>
     <Texts text={t('feature.auth.create_password.sub_title')} type={TextType.secondary}></Texts>
-    <Box child={loginComponent()}></Box>
+    <Box children={loginComponent()}></Box>
     <Buttons
       onClick={registerF}
       title={t('feature.auth.create_password.btn_next')}

src/features/auth/components/login.tsx

@@ -65,7 +65,7 @@ export default function Login(props: { register: () => void }) {
     return <View style={{ backgroundColor: '#000', flex: 1, flexDirection: 'column', display: 'flex', width: '100%', height: '100%' }}>
         <Texts text={'App Name'} type={TextType.primary}></Texts>
         {/* <Texts text={t('feature.auth.create_account.sub_title')} type={TextType.secondary}></Texts> */}
-        <Box child={loginComponent()}></Box>
+        <Box children={loginComponent()}></Box>
 
         <Buttons
             onClick={LoginF}

src/features/trackSomething/components/Metric.tsx

@@ -14,6 +14,7 @@ import PickerViews from "@/components/PickerViews";
 import LimitPickers from "@/components/LimitPickers";
 import SlidngScale from "@/components/SlidngScale";
 import NoData from "@/components/NoData";
+import { alphaToHex } from "@/utils/tools";
 
 export default function Component(props: any) {
     const user = useSelector((state: any) => state.user);
@@ -322,7 +323,7 @@ export default function Component(props: any) {
                     display: 'flex', flexDirection: 'column',
                     width: '100%', color: '#000'
                 }}>
-
+                    <Text className='modal_title' style={{ color: (metricItem as any).theme_color }}>{props.title ? props.title : '测试标题 '}</Text>
                     <View style={{ position: 'relative' }}>
                         {
                             (metricItem as any).schemas.map((item, index) => {
@@ -346,6 +347,17 @@ export default function Component(props: any) {
                             <Text className="time" >{strTime}</Text>
                         </View>
 
+                    </View>
+                    <View className='modal_operate'>
+                        <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color + alphaToHex(0.4) }} onClick={cancelModal}>
+                            <Text className='modal_cancel_text' style={{ color: (metricItem as any).theme_color }}>取消</Text>
+                        </View>
+                        <View className='btn_space' />
+                        <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color }} onClick={confirmModal}>
+                            <Text className='modal_confirm_text' style={{ color: '#000' }}>确定</Text>
+                        </View>
+
+
                     </View>
                     {/* <View style={{ marginBottom: 20, marginTop: 20, display: 'flex', flexDirection: 'row', width: '100%' }}>
                             <Text style={{ flex: 1, textAlign: 'center', height: 50 }} onClick={cancelModal}>取消</Text>

src/features/trackTimeDuration/components/Clock.tsx

@@ -23,7 +23,7 @@ export default function Component() {
         });
     }, []);
 
-    
+
     //外环
     function bigRing() {
         var common = getCommon(null, true)
@@ -46,7 +46,7 @@ export default function Component() {
         if (current_record.status == 'WAIT_FOR_START') {
             return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId='clock2' />
         }
-        
+
         var realRing1 = getReal((checkData as any).current_record, true, false)
         return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId='clock3' />
     }
@@ -57,10 +57,13 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         if (current_record.scenario == 'FAST_SLEEP') {
             var common = getCommon(null, false)
+            common.radius = 80;
+            common.lineWidth = 20;
             var bgRing = getBgRing()
             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 = 'rgba(0, 255, 255, 0.1)'
             if (current_record.status == 'ONGOING2') {
                 return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
             }
@@ -89,39 +92,42 @@ export default function Component() {
                         smallRing()
                     }
                 </View>
-            </View>
-            {
-                (checkData as any).current_record.status == 'WAIT_FOR_START' && <Text style={{ color: '#AAFF00' }}>00:00:00</Text>
-            }
-            {
-                (checkData as any).current_record.status == 'ONGOING' && <Text style={{ color: (checkData as any).current_record.scenario == 'FAST' ? '#aaff00' : '#00ffffff' }}>
-                    {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 style={{ color: '#AAFF00' }}>
-                    {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 style={{ color: '#AAFF00' }}>
-                        {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
-                    </Text>
-                    <Text style={{ color: '#00FFFF' }}>
-                        {TimeFormatter.formateTimeNow((checkData as any).current_record.sleep.real_start_time)}
-                    </Text>
+                <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 style={{ color: '#AAFF00' }}>00:00:00</Text>
+                    }
+                    {
+                        (checkData as any).current_record.status == 'ONGOING' && <Text style={{ color: (checkData as any).current_record.scenario == 'FAST' ? '#aaff00' : '#00ffffff' }}>
+                            {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 style={{ color: '#AAFF00' }}>
+                            {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 style={{ color: '#AAFF00' }}>
+                                {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
+                            </Text>
+                            <Text style={{ color: '#00FFFF' }}>
+                                {TimeFormatter.formateTimeNow((checkData as any).current_record.sleep.real_start_time)}
+                            </Text>
+                        </View>
+                    }
+                    {
+                        (checkData as any).current_record.status == 'ONGOING3' && <Text>
+                            <Text style={{ color: '#AAFF00' }}>
+                                {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
+                            </Text>
+                        </Text>
+                    }
                 </View>
-            }
-            {
-                (checkData as any).current_record.status == 'ONGOING3' && <Text>
-                    <Text style={{ color: '#AAFF00' }}>
-                        {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
-                    </Text>
-                </Text>
-            }
+            </View>
+
         </View>
     )
 }

src/features/trackTimeDuration/components/Schedule.tsx

@@ -278,41 +278,41 @@ export default function Component(props: { type?: string, data?: any, delSuccess
             obj = data//(data as any).latest_record
         }
 
-        var timelineItems:any = [];
-        if (obj.fast){
+        var timelineItems: any = [];
+        if (obj.fast) {
             timelineItems.push(
                 {
                     status: getStatus(true, true, obj),
                     title: '开始断食',
                     content: formateTime(obj.fast, false),
-                  }
+                }
             )
         }
-        if (obj.sleep){
+        if (obj.sleep) {
             timelineItems.push(
                 {
                     status: getStatus(false, true, obj),
                     title: '开始睡眠',
                     content: formateTime(obj.sleep, false),
-                  }
+                }
             )
         }
-        if (obj.sleep){
+        if (obj.sleep) {
             timelineItems.push(
                 {
                     status: getStatus(false, false, obj),
                     title: '结束睡眠',
                     content: formateTime(obj.sleep, true),
-                  }
+                }
             )
         }
-        if (obj.fast){
+        if (obj.fast) {
             timelineItems.push(
                 {
                     status: getStatus(true, false, obj),
                     title: '结束断食',
                     content: formateTime(obj.fast, true),
-                  }
+                }
             )
         }
 
@@ -557,17 +557,20 @@ export default function Component(props: { type?: string, data?: any, delSuccess
     }
 
     return <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center', position: 'relative' }} onClick={all}>
-
-        <View style={{ position: 'relative', zIndex: 1 }}>
-            {
-                bigRing()
-            }
-            <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
+        {
+            (props.type == 'latest' || props.type == 'record') &&
+            <View style={{ position: 'relative', zIndex: 1 }}>
                 {
-                    smallRing()
+                    bigRing()
                 }
+                <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
+                    {
+                        smallRing()
+                    }
+                </View>
             </View>
-        </View>
+        }
+
         {
             props.type == 'latest' ? <Text style={{ color: 'red' }}>Latest</Text> :
                 <Text>{value == 'WAIT_FOR_START' ? 'Schedule' : 'Log in Progress'}</Text>
@@ -586,10 +589,10 @@ export default function Component(props: { type?: string, data?: any, delSuccess
             props.type != 'record' && props.type != 'latest' && key == 'FAST_SLEEP' && (value == 'WAIT_FOR_START' ? <Text onClick={showStage}>Duration goals by stage</Text> : <Text onClick={showStage}>Current stage</Text>)
         }
         {
-            key == 'FAST_SLEEP' && isOpen && props.type != 'record' && checkData && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={()=>{}}/>
+            key == 'FAST_SLEEP' && isOpen && props.type != 'record' && checkData && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={() => { }} />
         }
         {
-            key == 'FAST_SLEEP' && isOpen && props.type == 'record' && props.data.scenario == 'FAST_SLEEP' && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={()=>{}}/>
+            key == 'FAST_SLEEP' && isOpen && props.type == 'record' && props.data.scenario == 'FAST_SLEEP' && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={() => { }} />
         }
 
         {/* {

src/pages/EditPage.tsx

@@ -0,0 +1,7 @@
+import { Input, View } from "@tarojs/components";
+
+export default function Page() {
+    return <View>
+        <Input type="nickname" placeholder="请输入昵称" style={{color:'#fff'}}/>
+    </View>
+}

src/pages/ProfileSetting.scss

@@ -2,14 +2,28 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    margin-left: 28px;
+    padding-left: 36px;
+    margin-right: 28px;
+    padding-right: 36px;
+    position: relative;
 }
 
 .avatar{
-    width: 90px;
-    height: 90px;
-    border-radius: 90px;
+    width: 80px;
+    height: 80px;
+    border-radius: 40px;
     background-color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.btn{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
 }

src/pages/ProfileSetting.tsx

@@ -1,26 +1,29 @@
 import Buttons from "@/components/Buttons";
 import { clear, logout } from "@/services/user";
-import { View, Text,Image } from "@tarojs/components";
+import { View, Text, Image,Button } from "@tarojs/components";
 import { useDispatch, useSelector } from "react-redux";
-import './Profile.scss'
+import './ProfileSetting.scss'
+import Box from "@/components/Box";
+import Taro from "@tarojs/taro";
 
 export default function Page() {
     const dispatch = useDispatch();
     const user = useSelector((state: any) => state.user);
-    function logoutF() {
-        dispatch(logout() as any);
-    }
-
-    function clearF() {
-        dispatch(clear() as any);
+    function editNickname(){
+        Taro.navigateTo({
+            url: '/pages/EditPage'
+        })
     }
 
     return <View className="container">
         <View className="row">
             <Text>头像</Text>
             <Image src={user.avatar} className="avatar" />
+            <Button className="btn" openType="chooseAvatar"></Button>
         </View>
-        <View className="row">
+
+
+        <View className="row" onClick={editNickname}>
             <Text>昵称</Text>
             <Text>{user.nickname}</Text>
         </View>

src/utils/tools.ts

@@ -0,0 +1,8 @@
+export function alphaToHex(alpha) {
+    var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
+    var hexValue = alphaValue.toString(16); // 将整数转换为十六进制字符串
+    if (hexValue.length === 1) {
+        hexValue = "0" + hexValue; // 如果十六进制字符串只有一位，补零
+    }
+    return hexValue;
+}