update

src/features/health/MainConsole.scss

@@ -1,4 +1,4 @@
-.timeline_item{
+.timeline_item {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -8,13 +8,13 @@
     height: 172px;
 }
 
-.timeline_left{
+.timeline_left {
     display: flex;
     flex-direction: column;
     width: 300px;
 }
 
-.timeline_title{
+.timeline_title {
     font-size: 34px;
     line-height: 42px;
     color: #808080;
@@ -28,7 +28,7 @@
     text-overflow: ellipsis; // 超出部分显示省略号
 }
 
-.timeline_desc{
+.timeline_desc {
     font-size: 24px;
     line-height: 28px;
     width: 500px;
@@ -41,17 +41,17 @@
     text-overflow: ellipsis; // 超出部分显示省略号
 }
 
-.timeline_thirdspace{
+.timeline_thirdspace {
     height: 12px;
     margin-top: 5px;
 }
 
-.timeline_time{
+.timeline_time {
     font-size: 34px;
     color: #4D4D4D;
 }
 
-.timeline_operate{
+.timeline_operate {
     height: 72px;
     border-radius: 18px;
     font-size: 30px;
@@ -63,18 +63,18 @@
     flex-shrink: 0;
 }
 
-.main-console-bg{
+.main-console-bg {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-.main_arrow{
+.main_arrow {
     width: 228px;
     height: 36px;
 }
 
-.main_summary{
+.main_summary {
     display: flex;
     width: 750px;
     background-color: #fff;
@@ -85,7 +85,7 @@
     justify-content: center;
 }
 
-.main_summary_time{
+.main_summary_time {
     font-size: 36px;
     color: #000;
     height: 44px;
@@ -96,7 +96,7 @@
     position: relative;
 }
 
-.time_point{
+.time_point {
     width: 12px;
     height: 12px;
     position: absolute;
@@ -104,18 +104,38 @@
     background-color: blue;
     position: absolute;
     left: -12px;
-    top: 16px;
-    
+    top: 18px;
 }
 
-.main_summary_duration{
+.time_point_animation {
+    animation: scaleFade 2s infinite;
+}
+
+@keyframes scaleFade {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    50% {
+        transform: scale(0.7);
+        opacity: 0.7;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.main_summary_duration {
     margin-top: 6px;
     color: #B2B2B2;
     font-size: 24px;
     line-height: 28px;
 }
 
-.main_summary_status{
+.main_summary_status {
     display: flex;
     position: absolute;
     left: 64px;
@@ -125,7 +145,7 @@
     align-items: center;
 }
 
-.main_footer{
+.main_footer {
     height: 108px;
     width: 750px;
     background-color: #fff;
@@ -135,7 +155,7 @@
     position: relative;
 }
 
-.main_footer_more{
+.main_footer_more {
     position: absolute;
     display: flex;
     align-items: center;
@@ -146,31 +166,31 @@
     width: 114px;
 }
 
-.main_footer_text{
+.main_footer_text {
     color: #B2B2B2;
     font-size: 24px;
 }
 
-.console_item_img{
+.console_item_img {
     width: 76px;
     height: 76px;
     border-radius: 12px;
 }
 
-.notification_icon{
+.notification_icon {
     width: 34px;
     height: 34px;
     margin-right: 12px;
     flex-shrink: 0;
 }
 
-.console_active_bg{
+.console_active_bg {
     background-color: #f5f5f5;
     padding-top: 36px;
 
 }
 
-.console_active{
+.console_active {
     background-color: #fff;
     display: flex;
     flex-direction: row;
@@ -182,20 +202,96 @@
     box-sizing: border-box;
 }
 
-.active_icon{
+.active_icon {
     width: 48px;
     height: 48px;
     margin-right: 12px;
 }
 
-.active_text{
+.active_text {
     color: #000000;
     font-size: 34px;
     flex: 1;
 }
 
-.cell_arrow{
+.cell_arrow {
     width: 34px;
     height: 34px;
 }
 
+/*
+rn呼吸灯效果
+import React, { useEffect, useRef } from 'react';
+import { View, Text, Animated, StyleSheet } from 'react-native';
+
+const App = () => {
+  const scale = useRef(new Animated.Value(1)).current; // 初始缩放值
+  const opacity = useRef(new Animated.Value(1)).current; // 初始透明度值
+
+  const startAnimation = () => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.parallel([
+          Animated.timing(scale, {
+            toValue: 0.7,
+            duration: 500,
+            useNativeDriver: true, // 使用原生驱动
+          }),
+          Animated.timing(opacity, {
+            toValue: 0.7,
+            duration: 500,
+            useNativeDriver: true,
+          }),
+        ]),
+        Animated.parallel([
+          Animated.timing(scale, {
+            toValue: 1,
+            duration: 500,
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacity, {
+            toValue: 1,
+            duration: 500,
+            useNativeDriver: true,
+          }),
+        ]),
+      ]),
+    ).start();
+  };
+
+  useEffect(() => {
+    startAnimation(); // 开始动画
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.animatedBox, { transform: [{ scale }], opacity }]}>
+        <Text style={styles.text}>动画效果</Text>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  animatedBox: {
+    width: 200,
+    height: 200,
+    backgroundColor: '#007aff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  text: {
+    color: 'white',
+    fontSize: 18,
+  },
+});
+
+export default App;
+*/

src/features/health/MainConsole.tsx

@@ -614,12 +614,20 @@ export default function MainConsole(props: { type: WindowType }) {
             global.refreshWindow()
         })
     }
+
+    function timePointClass(){
+        if (getWindowStatus(health.windows, health.mode) == WindowStatusType.process){
+            return 'time_point time_point_animation'
+        }
+        return 'time_point'
+    }
     return <View className="main-console-bg">
         <Image className="main_arrow" src={require('@assets/images/center_arrow.png')} />
         <View className="main_summary">
             {/* <View className="main_summary_status" style={{ color: getThemeColor(health.mode) }}>{windowStatus()}</View> */}
             <View className="main_summary_time" style={{ color: getWindowStatus(health.windows, health.mode) == WindowStatusType.upcoming ? '#B2B2B2' : '#000' }}>{getCountownTime(health.windows, health.mode)}
-                <View className="time_point" style={{backgroundColor:getWindowStatus(health.windows,health.mode)==WindowStatusType.upcoming?'#B2B2B2':getThemeColor(health.mode)}}/>
+                <View className={timePointClass()} 
+                style={{backgroundColor:getWindowStatus(health.windows,health.mode)==WindowStatusType.upcoming?'#B2B2B2':getThemeColor(health.mode)}}/>
             </View>
             <Text className="main_summary_duration">Total {getDuration(health.windows, health.mode)}</Text>
             <View className="border_footer_line" />
@@ -658,6 +666,7 @@ export default function MainConsole(props: { type: WindowType }) {
 
             </View>
         }
+        <View className="circle"/>
 
         {
             showTimePicker && modalContent()

src/features/trackTimeDuration/components/Rings.weapp.tsx

@@ -155,16 +155,9 @@ export default function Rings(props: {
 
     useEffect(() => {
         // if (props.showCurrentDotAnimation) {
-        //     console.log('oooooooooooooooooooooooo')
-        //     setTimeout(() => {
-        //         console.log('sssssssssddddddd')
-        //         animate2()
-        //     }, 2000)
-
+        //     animate2()
         // }
         // else {
-        //     if (laterTime)
-        //         clearTimeout(laterTime)
         //     if (animationFrameRef.current) {
         //         cancelAnimationFrame(animationFrameRef.current as any)
         //         animationFrameRef.current = null