update

src/app.config.ts

@@ -5,6 +5,7 @@ const appConfig = defineAppConfig({
     
     
     
+    
     'pages/index/index',
     'pages/account/Login',
     'pages/account/Auth',

src/components/input/LimitPickers.tsx

@@ -15,6 +15,7 @@ const Component = forwardRef((props: {
     var alpha = alphaToHex(0.4)
     const [values, setValues] = useState([props.limitDay ? props.limitDay - 1 : 6, today.getHours(), today.getMinutes()])
     const [isDisableConfirm, setIsDisableConfirm] = useState(false)
+    const [count,setCount] = useState(0)
 
     function alphaToHex(alpha) {
         var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
@@ -103,7 +104,8 @@ const Component = forwardRef((props: {
     }
 
     function onPickerChange(e) {
-        console.log(e.detail.value)
+        // console.log('picker change')
+        // console.log(e.detail.value)
         var list = e.detail.value
 
         const date = new Date();
@@ -117,11 +119,12 @@ const Component = forwardRef((props: {
         //     setValues([list[0], today.getHours(), today.getMinutes()])
         // }
         if (getTimestamp(time) > global.set_time) {
+            // console.log('oppsu')
             Taro.showToast({
                 icon: 'none',
                 title: '不能更大了',
             })
-            
+            // console.log(list[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes())
             setValues([list[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
             disableConfirm()
         }
@@ -146,6 +149,13 @@ const Component = forwardRef((props: {
 
     }
 
+    function onPickerEnd(e){
+        // console.log(e)
+        // console.log(values)
+        setValues(values)
+        setCount(count+1)
+    }
+
     function disableConfirm() {
         setIsDisableConfirm(true)
         setTimeout(() => {
@@ -212,6 +222,7 @@ const Component = forwardRef((props: {
                     className="picker"
                     maskClass="picker-mask"
                     onChange={onPickerChange}
+                    onPickEnd={onPickerEnd}
                     immediateChange={true}
                     indicatorStyle='height: 50px;color:red;'>
                     <PickerViewColumn style='flex:0 0 45%'>

src/custom-tab-bar/index.tsx

@@ -3,9 +3,11 @@ import './index.scss'
 import { useTranslation } from 'react-i18next'
 import Taro from '@tarojs/taro'
 import { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
 
 export default function TabBar() {
     const { t } = useTranslation()
+    const common = useSelector((state: any) => state.common);
     const [selIndex, setSelIndex] = useState(global.index?global.index:0)
     useEffect(() => {
         setSelIndex(global.index?global.index:0)
@@ -16,6 +18,9 @@ export default function TabBar() {
     }
 
     function switchTab(index: number) {
+        if (!common.showTabbar){
+            return
+        }
         global.index = index;
         switch (index) {
             case 0:
@@ -42,8 +47,12 @@ export default function TabBar() {
                 break;
         }
     }
+    if (!common.showTabbar){
+            return <View />
+    }
     return (
-        <View className='tabbar'>
+        
+        <View className='tabbar' style={{opacity:common.showTabbar?1:0}}>
             <View className={selIndex == 0 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(0)}>
                 {/* <Text>{t('tabbar.clock')}</Text> */}
                 <Text>生物钟</Text>

src/features/trackSomething/components/Activity.tsx

@@ -342,7 +342,7 @@ export default function Component(props: any) {
     }
 
     function headerView() {
-        return <TitleView title={t('page.activity.title')} showAddBtn={true} onClick={addBtnClick}>
+        return <TitleView title={t('page.activity.title')} showAddBtn={false}>
         </TitleView>
     }
 

src/features/trackSomething/components/Metric.tsx

@@ -1,9 +1,9 @@
-import { View, Text, ScrollView } from "@tarojs/components";
+import { View, Text, ScrollView, PageContainer } from "@tarojs/components";
 import './Metric.scss'
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
-import { metricCards, uploadMetric, uploadSteps } from "@/services/trackSomething";
+import { metricCards, metricGroups, uploadMetric, uploadSteps } from "@/services/trackSomething";
 import { TimeFormatter } from "@/utils/time_format";
 import MetricItem from "./MetricItem";
 import Modal from "@/components/layout/Modal";
@@ -15,6 +15,8 @@ import Layout from "@/components/layout/layout";
 import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
 import { useTranslation } from "react-i18next";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+import TitleView from "@/features/trackTimeDuration/components/TitleView";
+import { setTabbarStatus } from "@/store/common";
 
 let useNavigation;
 if (process.env.TARO_ENV == 'rn') {
@@ -43,9 +45,10 @@ export default function Component(props: any) {
     const [triggered, setTriggered] = useState(true)
     const limitPickerRef = useRef<any>(null);
     const [count, setCount] = useState(0)
-
+    const [showPageContainer, setShowPageContainer] = useState(false)
+    const dispatch = useDispatch();
     let navigation;
-    if (useNavigation){
+    if (useNavigation) {
         navigation = useNavigation()
     }
 
@@ -53,6 +56,7 @@ export default function Component(props: any) {
     //未登录<->已登录 状态切换时，执行一次授权检查
     useEffect(() => {
         getCards();
+        getGroups();
         const now = new Date();
         const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
         const timeUntilMidnight = nextMidnight.getTime() - now.getTime();
@@ -91,6 +95,12 @@ export default function Component(props: any) {
         })
     }
 
+    function getGroups(){
+        metricGroups().then(res=>{
+            
+        })
+    }
+
 
     //ts 把数组items: [{code: "_walk", value: 2180},{code: "_walk", value: 4444}]中的value取出来,/分割，组成字符串，如2180/4444
     function getValues(items) {
@@ -113,7 +123,7 @@ export default function Component(props: any) {
             jumpPage('/pages/common/RecordsHistory?type=metric&refreshList=getCards&code=' + item.code + `&title=${item.name}` + '&themeColor=' + item.theme_color)
         }
         else {
-            jumpPage('/pages/account/ChooseAuth','ChooseAuth',navigation)
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
         }
     }
 
@@ -129,7 +139,7 @@ export default function Component(props: any) {
             openModal()
         }
         else {
-            jumpPage('/pages/account/ChooseAuth','ChooseAuth',navigation)
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
         }
     }
 
@@ -232,6 +242,7 @@ export default function Component(props: any) {
     }
 
     function showTimePicker() {
+        
         setIsTimePickerOpen(true)
     }
 
@@ -352,14 +363,33 @@ export default function Component(props: any) {
         return detail()
     }
 
+    function addBtnClick() {
+        dispatch(setTabbarStatus(false))
+        setShowPageContainer(true)
+    }
+
+    function headerView() {
+        return <TitleView title={t('page.metric.title')} showAddBtn={true} onClick={addBtnClick}>
+        </TitleView>
+    }
+
     return <View style={{ position: 'relative' }}>
         <Layout children={showErrorPage ? <NoData refresh={() => { getCards() }} /> : detailContent()}
             title={t('page.metric.title')}
-            type={TemplateType.flex}
+            type={TemplateType.customHeader}
+            header={headerView()}
             refresh={() => { getCards() }}
             triggered={triggered}
             titleShowStyle={NaviBarTitleShowType.scrollToShow}
         />
+        <PageContainer style={{ backgroundColor: '#1c1c1c' }}
+            overlayStyle='background-color:rgba(0,0,0,0.9)'
+            custom-style='background-color:#1c1c1c'
+            show={showPageContainer} round={true} overlay={true} position='bottom' onAfterLeave={() => {setShowPageContainer(false);dispatch(setTabbarStatus(true))}}>
+            <Text style={{color:'#000'}} onClick={()=>{console.log('ssss')}}>1111</Text>
+            <View style={{ width: 200, height: 200, backgroundColor: 'pink', margin: 50 }} />
+            <Text style={{color:'#000'}} onClick={()=>{console.log('ssss')}}>1111</Text>
+        </PageContainer>
         {
             isModalOpen && <Modal dismiss={closeModal} title={(metricItem as any).name}
                 themeColor={(metricItem as any).theme_color}

src/features/trackSomething/components/MoveOrderList.tsx

@@ -1,7 +1,8 @@
 import { MovableArea, MovableView, View, ScrollView } from '@tarojs/components'
 import './MoveOrderList.scss'
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ColorType } from '@/context/themes/color';
+import Taro from '@tarojs/taro';
 
 export default function Component(props: { array: any, itemHeight: number }) {
     const [list, setList] = useState(props.array)
@@ -12,13 +13,26 @@ export default function Component(props: { array: any, itemHeight: number }) {
     const [startPageY, setStartPageY] = useState(0)
     const [dragIndex, setDragIndex] = useState(-1)
     const [scrollThreshold, setScrollThreshold] = useState(0.5)
-    const [upperThreshold, setUpperThreshold] = useState(100)
-    const [lowThreshold, setLowThreshold] = useState(100)
+    const upperThreshold = 100
+    const lowThreshold = 100
     const [duration, setDuration] = useState(1000)
     const [canScroll, setCanScroll] = useState(true)
-    const [y,setY] = useState(0)
-    const [changedIndex,setChangedIndex] = useState(-1)
-    const [hiddenContent,setHiddenContent] = useState(false)
+    const [changedIndex, setChangedIndex] = useState(-1)
+    const [hiddenContent, setHiddenContent] = useState(false)
+
+    const [scrollTop, setScrollTop] = useState(0)
+    const [contentY, setContentY] = useState(0)
+    const [contentHeight, setContentHeight] = useState(0)
+    const ref = useRef(null)
+
+    useEffect(() => {
+        const query = Taro.createSelectorQuery();
+        query.select('#myScrollView').boundingClientRect();
+        query.exec((res) => {
+            setContentY(res[0].top)
+            setContentHeight(res[0].height)
+        })
+    }, [])
 
     function longPress(e, index) {
         setChangedIndex(index)
@@ -28,43 +42,29 @@ export default function Component(props: { array: any, itemHeight: number }) {
         setDragElement(list[index])
         setMovaleViewY(e.target.offsetTop)
         setCanScroll(false)
-
-        setY(e.touches[0].pageY-index*props.itemHeight)
-
-        console.log(e.touches[0].pageY)
-        console.log(e.touches[0].pageY-index*props.itemHeight)
     }
 
     function touchMove(e) {
         if (dragElement) {
             let clientY = e.touches[0].clientY;
-            //this._pageScroll(clientY);
+            pageScroll(clientY);
             let pageY = e.touches[0].pageY;
             let targetMoveDistance = pageY - startPageY
             let movaleViewY2 = startOffsetY + targetMoveDistance
 
             let targetIndex = computeFutureIndex(targetMoveDistance, dragIndex)
-            if (targetIndex!==false && targetIndex!=changedIndex){
-                var temps = swapListItems(list,targetIndex,changedIndex)
+            if (targetIndex !== false && targetIndex != changedIndex) {
+                var temps = swapListItems(list, targetIndex, changedIndex)
                 setList(temps)
                 setChangedIndex(targetIndex)
 
             }
-            // if (targetIndex !==false){
-            //     var temps = swapListItems(list,targetIndex,dragIndex)
-            //     setList(temps)
-            //     setDragIndex(targetIndex)
-            //     // setStartPageY(targetIndex*props.itemHeight+y)
-            // }
-            // console.log(targetIndex)
 
-            // const futrueIndex = computeFutureIndex(targetMoveDistance, dragIndex)
-            // if (futrueIndex !== false) {
-            //     var temps = list
-            //     temps.splice(futrueIndex, 0, temps.splice(dragIndex, 1)[0])
-
-            //     setList(temps)
-            // }
+            if (targetIndex === false && targetIndex != changedIndex) {
+                var temps = swapListItems(list, dragIndex, changedIndex)
+                setList(temps)
+                setChangedIndex(dragIndex)
+            }
 
             setMovaleViewY(movaleViewY2)
             setLastTarget(targetIndex as any)
@@ -72,6 +72,32 @@ export default function Component(props: { array: any, itemHeight: number }) {
         }
     }
 
+    function pageScroll(clientY) {
+        
+        // console.log(clientY,contentY,contentHeight)
+        if ((clientY - contentY) + upperThreshold >= contentHeight) {
+            console.log('ccc',(clientY - contentY) + props.itemHeight);
+            // var scroll = ref.current
+            // debugger
+            // (ref.current as any).scrollTo({scrollTop:100})
+            // setScrollTop((clientY - contentY) + props.itemHeight)
+            // setScrollTop(2200)
+            // setCanScroll(true)
+            Taro.pageScrollTo({
+                selector:'#myScrollView',
+                scrollTop:(clientY - contentY) + props.itemHeight,
+                duration:200
+            })
+        }
+        else if ((clientY - contentY) - lowThreshold <= 0) {
+            setScrollTop((clientY - contentY) - props.itemHeight)
+            // setCanScroll(true)
+        }
+        else {
+            // setCanScroll(true)
+        }
+    }
+
     function swapListItems<T>(list: T[], index1: number, index2: number): T[] {
         const newList = [...list];
         const temp = newList[index1];
@@ -84,21 +110,20 @@ export default function Component(props: { array: any, itemHeight: number }) {
 
     function touchEnd(e) {
         if (dragElement) {
-            let pageY = e.changedTouches[0].pageY
-            let targetMoveDistance = pageY - startPageY;
-            /** 初始点击项索引 */
-            let dragElementIndex = dragIndex;
-            const futrueIndex = computeFutureIndex(targetMoveDistance, dragElementIndex)
-            if (futrueIndex !== false) {
-                var temps = list
-                temps.splice(futrueIndex, 0, temps.splice(dragIndex, 1)[0])
+            // let pageY = e.changedTouches[0].pageY
+            // let targetMoveDistance = pageY - startPageY;
+            // let dragElementIndex = dragIndex;
+            // const futrueIndex = computeFutureIndex(targetMoveDistance, dragElementIndex)
+            // if (futrueIndex !== false) {
+            //     var temps = list
+            //     temps.splice(futrueIndex, 0, temps.splice(dragIndex, 1)[0])
 
-                setList(temps)
-            }
+            //     setList(temps)
+            // }
             setDragElement(null)
             setLastTarget(null)
             setDragIndex(-1)
-            
+
         }
         setChangedIndex(-1)
         setCanScroll(true)
@@ -147,7 +172,7 @@ export default function Component(props: { array: any, itemHeight: number }) {
         }
     }
 
-    return <ScrollView scrollY={canScroll} style={{ height: 400 }}>
+    return <View id="myScrollView" ref={ref}  style={{ height: 400,overflow:'scroll' }} catchMove={!canScroll}>
         <MovableArea style={{ height: list.length * props.itemHeight }}>
             {list.map((item, index) => {
                 var className = 'demo_item'
@@ -160,7 +185,7 @@ export default function Component(props: { array: any, itemHeight: number }) {
 
                     // console.log(className)
                 }
-                return <View style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1,height:props.itemHeight}}
+                return <View style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight }}
                     className={className}
                     onLongPress={(e) => longPress(e, index)}
                     onTouchMove={(e) => touchMove(e)}
@@ -173,10 +198,10 @@ export default function Component(props: { array: any, itemHeight: number }) {
                 animation={false}
                 y={movaleViewY}
             >
-                <View className='demo_item' style={{backgroundColor:ColorType.fast}}>
+                <View className='demo_item' style={{ backgroundColor: ColorType.fast }}>
                     {dragElement}
                 </View>
             </MovableView>
         </MovableArea>
-    </ScrollView>
+    </View>
 }

src/features/trackSomething/components/MoveOrderList_backup.tsx

@@ -0,0 +1,201 @@
+import { MovableArea, MovableView, View, ScrollView } from '@tarojs/components'
+import './MoveOrderList.scss'
+import { useEffect, useRef, useState } from 'react';
+import { ColorType } from '@/context/themes/color';
+import Taro from '@tarojs/taro';
+
+export default function Component(props: { array: any, itemHeight: number }) {
+    const [list, setList] = useState(props.array)
+    const [movaleViewY, setMovaleViewY] = useState(0)
+    const [dragElement, setDragElement] = useState(null)
+    const [lastTarget, setLastTarget] = useState(null)
+    const [startOffsetY, setStartOffsetY] = useState(0)
+    const [startPageY, setStartPageY] = useState(0)
+    const [dragIndex, setDragIndex] = useState(-1)
+    const [scrollThreshold, setScrollThreshold] = useState(0.5)
+    const upperThreshold = 100
+    const lowThreshold = 100
+    const [duration, setDuration] = useState(1000)
+    const [canScroll, setCanScroll] = useState(true)
+    const [changedIndex, setChangedIndex] = useState(-1)
+    const [hiddenContent, setHiddenContent] = useState(false)
+
+    const [scrollTop, setScrollTop] = useState(0)
+    const [contentY, setContentY] = useState(0)
+    const [contentHeight, setContentHeight] = useState(0)
+    const ref = useRef(null)
+
+    useEffect(() => {
+        const query = Taro.createSelectorQuery();
+        query.select('#myScrollView').boundingClientRect();
+        query.exec((res) => {
+            setContentY(res[0].top)
+            setContentHeight(res[0].height)
+        })
+    }, [])
+
+    function longPress(e, index) {
+        setChangedIndex(index)
+        setStartOffsetY(e.target.offsetTop)
+        setStartPageY(e.touches[0].pageY)
+        setDragIndex(index)
+        setDragElement(list[index])
+        setMovaleViewY(e.target.offsetTop)
+        setCanScroll(false)
+    }
+
+    function touchMove(e) {
+        if (dragElement) {
+            let clientY = e.touches[0].clientY;
+            pageScroll(clientY);
+            let pageY = e.touches[0].pageY;
+            let targetMoveDistance = pageY - startPageY
+            let movaleViewY2 = startOffsetY + targetMoveDistance
+
+            let targetIndex = computeFutureIndex(targetMoveDistance, dragIndex)
+            if (targetIndex !== false && targetIndex != changedIndex) {
+                var temps = swapListItems(list, targetIndex, changedIndex)
+                setList(temps)
+                setChangedIndex(targetIndex)
+
+            }
+
+            if (targetIndex === false && targetIndex != changedIndex) {
+                var temps = swapListItems(list, dragIndex, changedIndex)
+                setList(temps)
+                setChangedIndex(dragIndex)
+            }
+
+            setMovaleViewY(movaleViewY2)
+            setLastTarget(targetIndex as any)
+            setHiddenContent(true)
+        }
+    }
+
+    function pageScroll(clientY) {
+        console.log(clientY,contentY,contentHeight)
+        if ((clientY - contentY) + upperThreshold >= contentHeight) {
+            // console.log('ccc',(clientY - contentY) + props.itemHeight);
+            // var scroll = ref.current
+            // debugger
+            // (ref.current as any).scrollTo({scrollTop:100})
+            // setScrollTop((clientY - contentY) + props.itemHeight)
+            setScrollTop(2200)
+            setCanScroll(true)
+        }
+        else if ((clientY - contentY) - lowThreshold <= 0) {
+            setScrollTop((clientY - contentY) - props.itemHeight)
+            setCanScroll(true)
+        }
+        else {
+            setCanScroll(true)
+        }
+    }
+
+    function swapListItems<T>(list: T[], index1: number, index2: number): T[] {
+        const newList = [...list];
+        const temp = newList[index1];
+        newList[index1] = newList[index2];
+        newList[index2] = temp;
+
+        return newList;
+    }
+
+
+    function touchEnd(e) {
+        if (dragElement) {
+            // let pageY = e.changedTouches[0].pageY
+            // let targetMoveDistance = pageY - startPageY;
+            // let dragElementIndex = dragIndex;
+            // const futrueIndex = computeFutureIndex(targetMoveDistance, dragElementIndex)
+            // if (futrueIndex !== false) {
+            //     var temps = list
+            //     temps.splice(futrueIndex, 0, temps.splice(dragIndex, 1)[0])
+
+            //     setList(temps)
+            // }
+            setDragElement(null)
+            setLastTarget(null)
+            setDragIndex(-1)
+
+        }
+        setChangedIndex(-1)
+        setCanScroll(true)
+        setHiddenContent(false)
+    }
+
+    function computeFutureIndex(targetMoveDistance, dragElementIndex) {
+        let willInsertAfter = getSwapDirection(targetMoveDistance);
+        if (willInsertAfter !== false) {
+            /** 偏移索引 */
+            let offsetElementIndex = dragElementIndex + willInsertAfter;
+            /** 移动步数 */
+            let step = targetMoveDistance / props.itemHeight;
+            /** 步数补偿，当只有移动距离超过单项 _scrollThreshold 时才算有效 */
+            if (step <= -1) {
+                step += scrollThreshold;
+            } else if (step >= 1) {
+                step -= scrollThreshold;
+            }
+            /** 目标索引 */
+            let futureIndex = parseInt(step) + offsetElementIndex;
+
+            // 避免越界
+            if (futureIndex < 0) {
+                futureIndex = 0;
+            } else if (futureIndex > list.length - 1) {
+                futureIndex = list.length - 1;
+            }
+
+            return futureIndex;
+        } else {
+            return willInsertAfter;
+        }
+    }
+
+    function getSwapDirection(targetMoveDistance) {
+        if (Math.abs(targetMoveDistance) < props.itemHeight / 2) {
+            // 轻轻拂动，滑动距离小于1/2单项高度
+            return false;
+        } else if (targetMoveDistance >= props.itemHeight / 2) {
+            // console.log('[_getSwapDirection] 👇👇👇');
+            return 1;  // 下滑
+        } else if (targetMoveDistance <= props.itemHeight / -2) {
+            // console.log('[_getSwapDirection] 👆👆👆');
+            return -1;  // 上滑
+        }
+    }
+
+    return <ScrollView id="myScrollView" ref={ref} scrollY={canScroll} style={{ height: 400 }} scrollTop={scrollTop}>
+        <MovableArea style={{ height: list.length * props.itemHeight }}>
+            {list.map((item, index) => {
+                var className = 'demo_item'
+                if (lastTarget == index) {
+                    className += ' last_item'
+                }
+
+                if (dragIndex == index) {
+                    className += ' drag_item'
+
+                    // console.log(className)
+                }
+                return <View style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight }}
+                    className={className}
+                    onLongPress={(e) => longPress(e, index)}
+                    onTouchMove={(e) => touchMove(e)}
+                    onTouchEnd={(e) => touchEnd(e)}
+                >{item}</View>
+            })}
+            <MovableView style={{ height: props.itemHeight }}
+                direction='vertical'
+                disabled
+                animation={false}
+                y={movaleViewY}
+            >
+                <View className='demo_item' style={{ backgroundColor: ColorType.fast }}>
+                    {dragElement}
+                </View>
+            </MovableView>
+        </MovableArea>
+    </ScrollView>
+}

src/features/trackTimeDuration/components/Console.tsx

@@ -1,5 +1,5 @@
 
-import { View, Text, PickerView } from "@tarojs/components";
+import { View, Text, PickerView, PageContainer } from "@tarojs/components";
 import { useEffect, useRef, useState } from "react";
 import { TimeFormatter } from "@/utils/time_format";
 import { useDispatch, useSelector } from "react-redux";
@@ -20,7 +20,7 @@ import { ColorType } from "@/context/themes/color";
 import { jumpPage } from "../hooks/Common";
 
 let useNavigation;
-if (process.env.TARO_ENV=='rn'){
+if (process.env.TARO_ENV == 'rn') {
     useNavigation = require("@react-navigation/native").useNavigation
 }
 
@@ -35,14 +35,15 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     const [fastPickerValue, setFastPickerValue] = useState([0, 0])
     const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
-    const [isLoaded,setIsLoaded] = useState(false)
+    const [isLoaded, setIsLoaded] = useState(false)
+    const [showPageContainer,setShowPageContainer] = useState(false)
     const limitPickerRef = useRef(null)
     const durationPickerRef = useRef(null)
     const { t } = useTranslation()
     const dispatch = useDispatch();
 
     let navigation;
-    if (useNavigation){
+    if (useNavigation) {
         navigation = useNavigation()
     }
 
@@ -63,10 +64,10 @@ export default function Component(props: { isNextStep?: boolean }) {
             setSleepPickerValue(durationIndex(time.sleep.target_start_time, time.sleep.target_end_time, common))
         }
         checkFastStatus()
-        
+
     }
 
-    function checkFastStatus(){
+    function checkFastStatus() {
         if (time.scenario == 'FAST') {
             setIsFast(true)
         }
@@ -86,13 +87,14 @@ export default function Component(props: { isNextStep?: boolean }) {
 
 
     function showPicker() {
-       
+        // setShowPageContainer(true)
+        // return
         if (global.testInfotimer) {
             return
         }
         global.set_time = new Date().getTime()
         updateNodeInfo()
-        if (!global.isDebug){
+        if (!global.isDebug) {
             return
         }
         global.testInfotimer = setInterval(() => {
@@ -102,6 +104,10 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     }
 
+    function pageContainerDetail(){
+        return layoutContent()
+    }
+
     function updateNodeInfo() {
         var node = (<Modal testInfo={testLayout()} children={layoutContent()} dismiss={() => {
             global.showClockModal(false, null);
@@ -130,7 +136,7 @@ export default function Component(props: { isNextStep?: boolean }) {
         if (!user.test_user) {
             return <View />
         }
-        if (!global.isDebug){
+        if (!global.isDebug) {
             return <View />
         }
         var isStart = false;
@@ -325,7 +331,7 @@ export default function Component(props: { isNextStep?: boolean }) {
     }
 
     function login() {
-        jumpPage('/pages/account/ChooseAuth','ChooseAuth',navigation)
+        jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
     }
 
     function durationFormate() {
@@ -354,7 +360,7 @@ export default function Component(props: { isNextStep?: boolean }) {
     function durationPickerContent() {
         var color = getColor(time)
         var title = getDurationTitle(time, t)
-        console.log('duration',fastPickerValue)
+        console.log('duration', fastPickerValue)
         return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
             <PickerViews ref={durationPickerRef}
                 onChange={durationChange}
@@ -539,7 +545,7 @@ export default function Component(props: { isNextStep?: boolean }) {
         <Box >
             <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                 {
-                    isLoaded&&ongoing()
+                    isLoaded && ongoing()
                 }
                 {
                     (time.status == 'ONGOING1' || time.status == 'WAIT_FOR_START') && <Stepper child={
@@ -560,6 +566,13 @@ export default function Component(props: { isNextStep?: boolean }) {
                     }
                 </View>
             </View>
+            <PageContainer 
+                // overlayStyle='background:transparent'
+                show={showPageContainer} round={true} overlay={true} position='bottom' onAfterLeave={() => setShowPageContainer(false)}>
+                {
+                    pageContainerDetail()
+                }
+            </PageContainer>
         </Box>
     )
 }

src/pages/demo.tsx

@@ -10,7 +10,7 @@ export default function Demo() {
 
   function items() {
     var array = []
-    for (var i = 0; i < 5; i++) {
+    for (var i = 0; i < 55; i++) {
       var item = (
         <View style={{ height: 60, color: '#fff', width: 375, display: 'flex', flexDirection: 'row', alignItems: 'center' }}><Text style={{}}>第{i}咧</Text></View>
       )
@@ -24,11 +24,12 @@ export default function Demo() {
 
 
     <View>
+      <View style={{height:50}}/>
       <MoveOrderList itemHeight={60} array={items()} />
       <Text style={{color:'#fff',fontWeight:'bold'}} onClick={()=>setShow(true)}>打开page container</Text>
       <PageContainer style={{backgroundColor:'transparent'}} 
       overlayStyle='background:transparent'
-      show={show} round={true} overlay={true} position='center' onAfterLeave={()=>setShow(false)}>
+      show={show} round={true} overlay={true} position='bottom' onAfterLeave={()=>setShow(false)}>
         <View style={{width:200,height:200,backgroundColor:'pink',margin:50}}/>
       </PageContainer>
     </View>

src/services/http/api.js

@@ -39,6 +39,7 @@ export const API_ACTIVITY_CARDS = `${baseUrl}/api/activity/cards`
 export const API_ACTIVITY_RECORDS = `${baseUrl}/api/activity/records`
 export const API_METRIC_CARDS = `${baseUrl}/api/metric/cards`
 export const API_METRIC_RECORDS = `${baseUrl}/api/metric/records`
+export const API_METRIC_GROUPS = `${baseUrl}/api/metric/groups`
 
 //journal
 

src/services/trackSomething.tsx

@@ -1,5 +1,5 @@
 
-import { API_ACTIVITY_CARDS, API_ACTIVITY_RECORDS, API_METRIC_CARDS, API_METRIC_RECORDS, API_UPLOAD_STEPS } from './http/api';
+import { API_ACTIVITY_CARDS, API_ACTIVITY_RECORDS, API_METRIC_CARDS, API_METRIC_GROUPS, API_METRIC_RECORDS, API_UPLOAD_STEPS } from './http/api';
 import { request } from './http/request';
 
 export const uploadSteps = (params) => {
@@ -51,6 +51,17 @@ export const cleartActivityRecords = (params) => {
 
 }
 
+export const metricGroups = ()=>{
+    return new Promise((resolve) => {
+        request({
+            url: API_METRIC_GROUPS, method: 'GET', data: {}
+        }).then(res => {
+            resolve(res);
+            // dispatch(loginSuccess(res));
+        })
+    })
+}
+
 export const clearMetricRecords = (params) => {
     return new Promise((resolve) => {
         request({

src/store/common.tsx

@@ -8,12 +8,14 @@ interface CommonState {
         max: number;
         step: number;
     } | null;
+    showTabbar: boolean | true;
 }
 
 const initialState: CommonState = {
     resources: [],
     configs: null,
-    duration: null
+    duration: null,
+    showTabbar: true
 }
 
 const commonSlice = createSlice({
@@ -24,6 +26,10 @@ const commonSlice = createSlice({
         setResources(state, action) {
             state.resources = action.payload;
         },
+        //是否disable并隐藏tabbar
+        setTabbarStatus(state, action) {
+            state.showTabbar = action.payload;
+        },
         //time配置文件
         setConfigs(state, action) {
             state.configs = action.payload;
@@ -42,4 +48,4 @@ const commonSlice = createSlice({
 });
 
 export default commonSlice.reducer;
-export const { setResources, setConfigs } = commonSlice.actions;
+export const { setResources, setConfigs,setTabbarStatus } = commonSlice.actions;