蓝牙mock

src/pages/Bluetooth.tsx

@@ -1,7 +1,37 @@
-import { NavBar, SpinLoading } from 'antd-mobile';
+import { NavBar, SpinLoading, Toast } from 'antd-mobile';
 import './Bluetooth.scss';
+import { useEffect } from 'react';
+import { useAppSelector } from '../utils/hooks';
+import Bridge from '../utils/bridge';
 
 export default function Bluetooth() {
+  const contextState = useAppSelector((state) => state.context);
+
+  useEffect(() => {
+    Bridge.scanPeripherals().then((res) => {
+      if (!res.success) {
+        Toast.show(res.message);
+      }
+    });
+    return () => {
+      Bridge.stopScanPeripherals().then((res) => {});
+    };
+  }, []);
+
+  const onConnect = (id: string) => {
+    Bridge.connectPeripheral({ id }).then((res) => {
+      if (!res.success) {
+        Toast.show(res.message);
+      }
+    });
+  };
+  const onDisconnect = (id: string) => {
+    Bridge.disconnectPeripheral().then((res) => {
+      if (!res.success) {
+        Toast.show(res.message);
+      }
+    });
+  };
   return (
     <div>
       <NavBar className="bg-white" back={null}>
@@ -9,33 +39,33 @@ export default function Bluetooth() {
       </NavBar>
       <div className="home-page-content overflow-x-hidden overflow-y-auto">
         <section>
-          <div className="h-[42px] px-5">
-            <h1 className="h-[42px] leading-[42px] text-base text-text font-medium">已配对设备</h1>
-          </div>
-          <div className="bg-white px-5 text-sm text-text">
-            <div className="h-12 flex justify-between items-center border-b border-[#eee]">
-              <span>设备名</span>
-              <span>已连接</span>
-            </div>
-            <div className="h-12 flex justify-between items-center border-b border-[#eee]">
-              <span>设备名</span>
-              <span></span>
-            </div>
-          </div>
-        </section>
-
-        <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>
             <SpinLoading />
           </div>
           <div className="bg-white px-5 text-sm text-text">
-            <div className="h-12 flex justify-between items-center border-b border-[#eee]">
-              <span>设备1</span>
-            </div>
-            <div className="h-12 flex justify-between items-center border-b border-[#eee]">
-              <span>设备2</span>
+            {contextState.bleList.map((ble) => (
+              <div
+                key={ble.mac}
+                className="h-12 flex items-center border-b border-[#eee]"
+                onClick={
+                  contextState.bleList.some((bl) => bl.linked)
+                    ? undefined
+                    : () => onConnect(ble.mac)
+                }
+              >
+                <span>{ble.name}</span>
+                <span className="text-xs text-title ml-2">{ble.linked ? '已连接' : ''}</span>
+                {ble.linked && (
+                  <button
+                    className="btn-contained px-2 py-1 rounded ml-auto"
+                    onClick={() => onDisconnect(ble.mac)}
+                  >
+                    断开
+                  </button>
+                )}
               </div>
+            ))}
           </div>
         </section>
       </div>

src/pages/Measure.tsx

@@ -17,23 +17,6 @@ import { selectLabeledKtjOrgs } from '../store/features/baseData';
 import { updateOrg } from '../store/features/contextSlice';
 import { textsOfKeys } from '../utils/helper';
 
-// declare global {
-//   interface Window {
-//     ReactNativeWebView: { postMessage: (arg: string) => void };
-//     funcMap: Record<string, any>;
-//     bridgeCall: (func: string, args: any[]) => void;
-//   }
-// }
-// window.funcMap = {
-//   add: (a: number, b: number) => a + b,
-//   sub: (a: number, b: number) => a - b,
-// };
-
-// window.bridgeCall = (func, ...args) => {
-//   console.log(func, args);
-//   const res = window.funcMap[func].apply(null, args);
-//   console.log('res:', res);
-// };
 
 export default function Measure() {
   const navigate = useNavigate();

src/utils/bridge.ts

@@ -89,17 +89,15 @@ export function emitBridgeEvent(event: MobileDatagram) {
 }
 
 export function registerBridgeFunc() {
-//   window.bridgeFunc = {
-//     peripheralStatus: (param: string) => {
-//       bridgeSub.next({ func: 'peripheralStatus', data: JSON.parse(param) });
-//     },
-//   };
-
-//   window.bridgeCall = (func, param) => {
-//     const res = window.bridgeFunc[func].call(null, param);
-//     console.log('res:', res);
-//   };
-
+  //   window.bridgeFunc = {
+  //     peripheralStatus: (param: string) => {
+  //       bridgeSub.next({ func: 'peripheralStatus', data: JSON.parse(param) });
+  //     },
+  //   };
+  //   window.bridgeCall = (func, param) => {
+  //     const res = window.bridgeFunc[func].call(null, param);
+  //     console.log('res:', res);
+  //   };
   //   const jsFuncs = ['funcInJs'];
   //   jsFuncs.forEach((funcName) => {
   //     window.WebViewJavascriptBridge.registerHandler(funcName, (data, callback) => {
@@ -216,4 +214,47 @@ export default class Bridge {
       });
     }
   }
+
+  static scanPeripherals() {
+    return httpRequest<BridgeBaseResult>({
+      url: '/api/ble/list/start',
+      method: 'POST',
+      params: {},
+    });
+  }
+  static stopScanPeripherals() {
+    return httpRequest<BridgeBaseResult>({
+      url: '/api/ble/list/stop',
+      method: 'POST',
+      params: {},
+    });
+  }
+  static connectPeripheral(params: { id: string }) {
+    return httpRequest<BridgeBaseResult>({
+      url: '/api/ble/connect',
+      method: 'POST',
+      params,
+    });
+  }
+  static disconnectPeripheral() {
+    return httpRequest<BridgeBaseResult>({
+      url: '/api/ble/disconnect',
+      method: 'POST',
+      params: {},
+    });
+  }
+  static getConfig() {
+    return httpRequest<BridgeBaseResult<{ server: string }>>({
+      url: '/api/system/config',
+      method: 'POST',
+      params: {},
+    });
+  }
+  static saveConfig(params: { server: string }) {
+    return httpRequest<BridgeBaseResult<{ server: string }>>({
+      url: '/api/system/config/save',
+      method: 'POST',
+      params,
+    });
+  }
 }