update

src/_health/components/fast_sleep_console.tsx

@@ -14,6 +14,7 @@ import { TimeFormatter } from "@/utils/time_format";
 import showActionSheet from "@/components/basic/ActionSheet";
 import { useTranslation } from "react-i18next";
 import ConsoleCell from "./console_cell";
+import StatusIndicator, { StatusType } from "../base/status_indicator";
 
 export default function FastSleepConsole(props: { step: number, data: any, del: any }) {
     const health = useSelector((state: any) => state.health);
@@ -300,24 +301,33 @@ export default function FastSleepConsole(props: { step: number, data: any, del:
         }
 
         return <ConsoleCell
-            status={<View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <View style={{
-                    flexShrink: 0,
-                    width: rpxToPx(26),
-                    height: rpxToPx(26),
-                    borderRadius: rpxToPx(13),
-                    marginRight: rpxToPx(8),
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    backgroundColor: isError ? MainColorType.error : getIconColor(index, finish)
-                }}>
-                    {
-                        processIcon(item, finish, isError)
-                    }
-                </View>
-                <Text className="timeline_time" style={{ color: isError ? MainColorType.error : MainColorType.g01 }}>{time}</Text>
-            </View>}
+            status={
+            <StatusIndicator type={StatusType.img}
+            color={isError ? MainColorType.error : getIconColor(index, finish)}
+            fontColor={ isError ? MainColorType.error : MainColorType.g01 }
+            text={time}
+            >{
+                processIcon(item, finish, isError)
+            }</StatusIndicator>
+            // <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+            //     <View style={{
+            //         flexShrink: 0,
+            //         width: rpxToPx(26),
+            //         height: rpxToPx(26),
+            //         borderRadius: rpxToPx(13),
+            //         marginRight: rpxToPx(8),
+            //         display: 'flex',
+            //         alignItems: 'center',
+            //         justifyContent: 'center',
+            //         backgroundColor: isError ? MainColorType.error : getIconColor(index, finish)
+            //     }}>
+            //         {
+            //             processIcon(item, finish, isError)
+            //         }
+            //     </View>
+            //     <Text className="timeline_time" style={{ color: isError ? MainColorType.error : MainColorType.g01 }}>{time}</Text>
+            // </View>
+            }
             title={(item.moment && item.moment.title) ? item.moment.title : item.title}
             description={hasDescription ? item.moment.description : null}
             disable={itemDisableStatus(index)}

src/features/health/MainConsole.tsx

@@ -27,6 +27,7 @@ import { useTranslation } from "react-i18next";
 import Cell from "@/_health/base/cell";
 import ConsoleCell from "@/_health/components/console_cell";
 import IconTitleCell from "@/_health/components/icon_title_cell";
+import StatusIndicator, { StatusType } from "@/_health/base/status_indicator";
 
 let useNavigation;
 let min = 0
@@ -287,24 +288,12 @@ export default function MainConsole(props: { type: WindowType }) {
 
     function timelineItem(item: any, index: number, count: number) {
         function statusView() {
-            return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <View style={{
-                    flexShrink: 0,
-                    width: rpxToPx(26),
-                    height: rpxToPx(26),
-                    borderRadius: rpxToPx(13),
-                    marginRight: rpxToPx(8),
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    backgroundColor: getIconColor(index),
-                }}>
-                    {
-                        processIcon(index)
-                    }
-                </View>
-                <Text className="timeline_time" style={{ color: MainColorType.g01 }}>{itemTitle(item)}</Text>
-            </View>
+            return <StatusIndicator type={StatusType.img}
+                color={getIconColor(index)}
+                text={itemTitle(item)}
+            >{
+                    processIcon(index)
+                }</StatusIndicator>
         }
 
         return <ConsoleCell