蓝牙连接和断开时的UI反馈

src/pages/Bluetooth.tsx

@@ -1,14 +1,16 @@
 import { NavBar, SpinLoading, Toast } from 'antd-mobile';
 import './Bluetooth.scss';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../utils/hooks';
 import Bridge from '../utils/bridge';
-import { updateBleLinkStatus } from '../store/features/contextSlice';
+import { updateBleLinkStatus, updateBleList } from '../store/features/contextSlice';
 
 export default function Bluetooth() {
   const dispatch = useAppDispatch();
   const contextState = useAppSelector((state) => state.context);
 
+  const [connectingMac, setConnectingMac] = useState('')
+
   useEffect(() => {
     Bridge.scanPeripherals().then((res) => {
       if (!res.success) {
@@ -21,7 +23,9 @@ export default function Bluetooth() {
   }, []);
 
   const onConnect = (mac: string) => {
+    setConnectingMac(mac);
     Bridge.connectPeripheral({ mac }).then((res) => {
+      setConnectingMac('');
       if (!res.success) {
         Toast.show(res.message);
       } else {
@@ -34,7 +38,8 @@ export default function Bluetooth() {
       if (!res.success) {
         Toast.show(res.message);
       } else {
-        dispatch(updateBleLinkStatus({ mac, link: false }));
+        dispatch(updateBleList([])); // 清空列表
+        // dispatch(updateBleLinkStatus({ mac, link: false }));
       }
     });
   };
@@ -50,7 +55,7 @@ export default function Bluetooth() {
         <section>
           <div className="h-[42px] px-5 flex items-center justify-between">
             <h1 className="h-[42px] leading-[42px] text-base text-text font-medium">附近设备</h1>
-            {contextState.bleList.some((bl) => bl.linked) ? undefined : scanning()}
+            {contextState.bleList.some((bl) => bl.linked) || connectingMac ? undefined : scanning()}
           </div>
           <div className="bg-white px-5 text-sm text-text">
             {contextState.bleList.map((ble) => (
@@ -58,7 +63,7 @@ export default function Bluetooth() {
                 key={ble.mac}
                 className="py-2 flex items-center border-b border-[#eee]"
                 onClick={
-                  contextState.bleList.some((bl) => bl.linked)
+                  contextState.bleList.some((bl) => bl.linked) || connectingMac
                     ? undefined
                     : () => onConnect(ble.mac)
                 }
@@ -68,7 +73,8 @@ export default function Bluetooth() {
                   <p className='text-[10px] text-title'>{ble.mac}</p>
                 </div>
 
-                <span className="text-xs text-title ml-3">{ble.linked ? '已连接' : ''}</span>
+                <span className="text-xs text-title ml-3">{ble.linked ? '已连接' : connectingMac === ble.mac ? '正在连接' : ''}</span>
+                {connectingMac === ble.mac && <div className='ml-auto'><SpinLoading /></div>}
                 {ble.linked && (
                   <button
                     className="btn-contained px-2 py-1 rounded ml-auto"