fix:电量ui逻辑优化

src/assets/power.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749353079688" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7537" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M467.301105 179.2821l-190.958547 373.403017h229.636774l-103.020311 291.911153 407.824207-452.827176h-255.422259l124.427129-212.486994H467.301105z" fill="#fff" p-id="7538"></path></svg>

src/components/CustomNavBar.scss

@@ -2,19 +2,37 @@
     position: relative;
     font-size: 12px;
     height: 16px;
-    padding-left: 2px;
-    padding-right: 2px;
-    color: var(--primaryColor);
-    border: solid 1px var(--primaryColor);
-    border-radius: 2px;
-    &::after {
-        content: " ";
+    padding: 0 5px;
+    background: rgba(0,0,0,0.3);
+    color: #ffffff;
+    border-radius: 4px;
+    width: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .bg-color {
         position: absolute;
-        width: 4px;
+        height: 100%;
+        width: 50%;
+        left: 0;
+        border-radius: 4px;
+        z-index: 1;
+        background: var(--successColor);
+    }
+    .power-num{
+        z-index: 10;
+    }
+    img {
+        width: 50%;
+        z-index: 10;
+    }
+    .power-head {
+        position: absolute;
+        width: 2px;
         height: 8px;
-        background-color: var(--primaryColor);
-        right: -4px;
-        top: 3px;
+        background-color: rgba(0,0,0,0.3);
+        right: -2px;
+        top: 3.5px;
         border-top-right-radius: 2px;
         border-bottom-right-radius: 2px;
     }

src/components/CustomNavBar.tsx

@@ -1,5 +1,6 @@
 import icon_bluetooth from '../assets/icon_bluetooth.svg';
 import icon_arr_d from '../assets/icon_arr_down.svg';
+import power_icon from '../assets/power.svg';
 import './CustomNavBar.scss';
 import { useState } from 'react';
 import { useAppSelector } from '../utils/hooks';
@@ -26,22 +27,28 @@ export default function CustomNavBar({ title }: { title: string }) {
         <h1 className="text-lg text-text ml-3">{title}</h1>
         {/** 蓝牙连接状态 */}
         {device.connected ? (
-          <div
-            className="ml-auto flex items-center cursor-pointer"
-            onClick={() => setShowDetail(!showDetail)}
-          >
-            <div className="bluetooth-battery flex justify-center items-center">{device.power}%</div>
-            <img src={icon_bluetooth} alt="icon" className="mx-2" />
-            <span>设备已连接</span>
-            <img
-              src={icon_arr_d}
-              alt="arr"
-              style={{
-                transform: device.connected && showDetail ? 'rotate(180deg)' : 'rotate(0deg)',
-                transition: 'transform 300ms',
-              }}
-            />
-          </div>
+            <div
+                className="ml-auto flex items-center cursor-pointer"
+                onClick={() => setShowDetail(!showDetail)}
+            >
+                <img src={icon_bluetooth} alt="icon" className="mx-2" />
+                <span>设备已连接</span>
+                <img
+                    src={icon_arr_d}
+                    alt="arr"
+                    style={{
+                        transform: device.connected && showDetail ? 'rotate(180deg)' : 'rotate(0deg)',
+                        transition: 'transform 300ms',
+                    }}
+                />
+                <div className="bluetooth-battery">
+                    <div className="bg-color" style={{ width: `${device.power}%`, backgroundColor: device.flag ? '#1dbb1d' : device.power > 20 ? '#3e63cb' : 'red' }}></div>
+                    <div className={'power-head'} style={{ backgroundColor: device.flag ? '#1dbb1d' : device.power > 20 ? '#3e63cb' : 'red' }}></div>
+                    <span className="power-num">{device.power}</span>
+                    {device.flag === 1 && <img src={power_icon} alt=""/>}
+                </div>
+
+            </div>
         ) : (
           <div
             className="ml-auto flex items-center cursor-pointer"

src/pages/Measure.tsx

@@ -282,7 +282,7 @@ export default function Measure() {
           right_end: 'none',
         });
     }
-  });
+  }, [measureState.taskState, status]);
 
   function railName() {
     return baseState.railTypes.find((r) => r.id === railId[0])?.name || '';

src/services/mobileWsType.ts

@@ -1,6 +1,7 @@
 export type PeripheralStatus = {
   type: 'peripheral-status';
   data: {
+    flag:0 | 1;
     connected: boolean;
     power: number;
     inclinatorX: number;

src/store/features/contextSlice.ts

@@ -33,6 +33,7 @@ if (orgGwdXmStr) {
 
 const initialState: ContextState = {
   device: {
+    flag: 0,
     connected: true, //是否已连接蓝牙
     power: 60, //电量
     inclinatorX: 0.276, //x轴倾斜