From 6d9ad7e2b39b8d3fae3fd14905ce9a36ecf0fb90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC?=
 <43266613+wutiange@users.noreply.github.com>
Date: Fri, 12 Jan 2024 17:06:41 +0800
Subject: [PATCH] Fix/test question (#12)

* feat: add global loading

* fix: unconnected burn-in model always upgrades

* fix: file name too long, UI error

* feat: configurable client ID

* feat: internationalization

* fix: timeout undefined error

* feat: concurrent data processing

* fix: user prompted without selecting serial port

* feat: xiao Single-step execution

* feat: disconnect first before switching

* feat: add come to v2 support

* feat: come to update uniform_type

* fix: burned but not deduced
---
 src/hooks/senseCraftAIComesToFlash.ts         | 89 +++++++++----------
 src/locale/en-US.ts                           |  3 +
 src/locale/en-US/process.ts                   |  2 +
 src/locale/zh-CN.ts                           |  3 +
 src/locale/zh-CN/process.ts                   |  2 +
 src/pages/components/Navbar.vue               | 47 +++++++---
 src/pages/setup/config/components/Config.vue  | 45 +++++++---
 src/pages/setup/process/components/Config.vue | 10 ++-
 src/pages/setup/process/components/Device.vue | 13 ++-
 .../setup/process/grove_ai_we2/Device.vue     |  2 +-
 .../setup/process/xiao_esp32s3/Device.vue     | 30 ++++---
 src/pages/utils/components/Tools.vue          |  4 +
 src/sscma/atclient.ts                         |  3 +-
 src/sscma/constants.ts                        |  2 +-
 src/sscma/device.ts                           |  5 +-
 src/sscma/grove_ai_we2/deviceHimax.ts         | 76 ++++++++--------
 src/sscma/xiao_esp32s3/Flasher.ts             | 22 ++---
 src/utils/flash.ts                            |  2 +
 18 files changed, 211 insertions(+), 149 deletions(-)

diff --git a/src/hooks/senseCraftAIComesToFlash.ts b/src/hooks/senseCraftAIComesToFlash.ts
index 7409b5b..71d0baa 100644
--- a/src/hooks/senseCraftAIComesToFlash.ts
+++ b/src/hooks/senseCraftAIComesToFlash.ts
@@ -11,9 +11,14 @@ export async function fetchConstant() {
     .then((res) => res.data);
 }
 
-export async function fetchModelDetail(modelId: string, needParams?: string[]) {
+export async function fetchModelDetail(
+  modelId: string,
+  token: string,
+  needParams?: string[]
+) {
   const response: Record<string, any> = await fetch(
-    `https://sensecraft.seeed.cc/aiserverapi/model/view_model?model_id=${modelId}`
+    `https://sensecraft.seeed.cc/aiserverapi/model/view_model?model_id=${modelId}`,
+    { headers: { Authorization: token } }
   ).then((res) => res.json());
   if (response?.code !== '0') {
     throw new Error(response.msg);
@@ -39,28 +44,18 @@ export async function fetchModelFileUrl(modelId: string, token: string) {
 const useSenseCraftAIComesToFlash = () => {
   const route = useRoute();
   const deviceStore = useDeviceStore();
-  const { id: modelId, token } = route.query ?? {};
+  const { id: modelId, token, uniform_type: uniformType } = route.query ?? {};
   const handleSenseCraftAI = async () => {
     if (!(modelId && token && route.name === 'process')) {
       return {};
     }
     const [
-      [
-        modelImg,
-        deviceTypes,
-        labels,
-        description,
-        size,
-        name,
-        aiFramework,
-        modelFormat,
-      ],
+      [modelImg, labels, description, size, name, aiFramework, modelFormat],
       modelFile,
       constant,
     ] = await Promise.all<any>([
-      fetchModelDetail(modelId as string, [
+      fetchModelDetail(modelId as string, token as string, [
         'pic_url',
-        'uniform_types',
         'labels',
         'description',
         'model_size',
@@ -71,41 +66,37 @@ const useSenseCraftAIComesToFlash = () => {
       fetchModelFileUrl(modelId as string, token as string),
       fetchConstant(),
     ]);
-    if (deviceTypes.length > 0) {
-      const deviceType: string = deviceTypes[0];
-      const deviceKeyToId: Record<string, string> = {
-        '32': DeviceType.XiaoEsp32s3,
-      };
-      if (typeof deviceKeyToId[deviceType] === 'string') {
-        deviceStore.setDeviceTypeById(deviceKeyToId[deviceType]);
-      }
-      deviceStore.setComeToSenseCraftAI({
-        model: {
-          description,
-          classes:
-            labels?.reduce(
-              (
-                arr: string[],
-                e: { object_id: string; object_name: string }
-              ) => {
-                arr[Number(e.object_id)] = e.object_name;
-                return arr;
-              },
-              []
-            ) ?? [],
-          algorithm: constant.ai_framework_array[aiFramework as string],
-          name,
-          version: modelFile.version ?? '1.0.0',
-          category: modelFile.algorithm[0].algorithm_name ?? 'Object Detection',
-          model_type: constant.model_format_array[modelFormat],
-          size,
-          modelImg,
-          isCustom: true,
-        },
-        modelUrl: modelFile.arguments.url,
-      });
-      deviceStore.setFlashWay(FlashWayType.ComeToSenseCraftAI);
+    const deviceType: string = uniformType as string;
+    const deviceKeyToId: Record<string, string> = {
+      '32': DeviceType.XiaoEsp32s3,
+      '36': DeviceType.GroveAIWE2,
+    };
+    if (typeof deviceKeyToId[deviceType] === 'string') {
+      deviceStore.setDeviceTypeById(deviceKeyToId[deviceType]);
     }
+    deviceStore.setComeToSenseCraftAI({
+      model: {
+        description,
+        classes:
+          labels?.reduce(
+            (arr: string[], e: { object_id: string; object_name: string }) => {
+              arr[Number(e.object_id)] = e.object_name;
+              return arr;
+            },
+            []
+          ) ?? [],
+        algorithm: constant.ai_framework_array[aiFramework as string],
+        name,
+        version: modelFile.version ?? '1.0.0',
+        category: modelFile.algorithm[0].algorithm_name ?? 'Object Detection',
+        model_type: constant.model_format_array[modelFormat],
+        size,
+        modelImg,
+        isCustom: true,
+      },
+      modelUrl: modelFile.arguments.url,
+    });
+    deviceStore.setFlashWay(FlashWayType.ComeToSenseCraftAI);
     return null;
   };
   onMounted(async () => {
diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts
index 5e068b0..eb3c95c 100644
--- a/src/locale/en-US.ts
+++ b/src/locale/en-US.ts
@@ -18,6 +18,9 @@ export default {
   'menu.faq': 'FAQ',
   'navbar.docs': 'Docs',
   'navbar.action.locale': 'Switch to English',
+  'navbar.swap.confirm.text':
+    'Switching while connected will cause the current connection to be disconnected. Are you sure you want to switch?',
+  'navbar.switch': 'Switch',
   'confirm': 'Confirm',
   'cancel': 'Cancel',
   'config.save.success': 'Save Success',
diff --git a/src/locale/en-US/process.ts b/src/locale/en-US/process.ts
index c87e166..b00e6b2 100644
--- a/src/locale/en-US/process.ts
+++ b/src/locale/en-US/process.ts
@@ -17,11 +17,13 @@ export default {
   'workplace.config.mqtt': 'MQTT',
   'workplace.config.mqtt.host': 'Host',
   'workplace.config.mqtt.port': 'Port',
+  'workplace.config.mqtt.clientId': 'clientId',
   'workplace.config.mqtt.username': 'Username',
   'workplace.config.mqtt.password': 'Password',
   'workplace.config.mqtt.ssl': 'SSL',
   'workplace.config.mqtt.message.host': 'Please enter host',
   'workplace.config.mqtt.message.port': 'Please enter port',
+  'workplace.config.mqtt.message.clientId': 'Please enter clientId',
   'workplace.config.mqtt.message.username': 'Please enter username',
   'workplace.config.mqtt.message.password': 'Please enter password',
   'workplace.output.title': 'Output',
diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
index efa087f..644b0fd 100644
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@@ -18,6 +18,9 @@ export default {
   'menu.faq': '常见问题',
   'navbar.docs': '文档中心',
   'navbar.action.locale': '切换为中文',
+  'navbar.swap.confirm.text':
+    '当处于连接状态下切换会导致当前连接断开，确定切换嘛？',
+  'navbar.switch': '切换',
   'confirm': '确定',
   'cancel': '取消',
   'config.save.success': '保存成功',
diff --git a/src/locale/zh-CN/process.ts b/src/locale/zh-CN/process.ts
index 1ea816a..b04ffb7 100644
--- a/src/locale/zh-CN/process.ts
+++ b/src/locale/zh-CN/process.ts
@@ -16,11 +16,13 @@ export default {
   'workplace.config.mqtt': 'MQTT配置',
   'workplace.config.mqtt.host': '主机',
   'workplace.config.mqtt.port': '端口',
+  'workplace.config.mqtt.clientId': '客户端ID',
   'workplace.config.mqtt.username': '用户名',
   'workplace.config.mqtt.password': '密码',
   'workplace.config.mqtt.ssl': 'SSL',
   'workplace.config.mqtt.message.host': '请输入主机',
   'workplace.config.mqtt.message.port': '请输入端口',
+  'workplace.config.mqtt.message.clientId': '请输入客户端ID',
   'workplace.config.mqtt.message.username': '请输入用户名',
   'workplace.config.mqtt.message.password': '请输入密码',
   'workplace.output.title': '输出',
diff --git a/src/pages/components/Navbar.vue b/src/pages/components/Navbar.vue
index 646b149..bcf5d77 100644
--- a/src/pages/components/Navbar.vue
+++ b/src/pages/components/Navbar.vue
@@ -133,7 +133,7 @@
         <a-select
           :model-value="deviceStore.deviceType.name"
           :style="{}"
-          @update:model-value="deviceStore.setDeviceType"
+          @update:model-value="onSwapDeviceType"
         >
           <a-option v-for="deviceType in DEVICE_LIST" :key="deviceType.id">{{
             deviceType.name
@@ -161,11 +161,20 @@
         >
       </li>
     </ul>
+    <a-modal
+      v-model:visible="visible"
+      :hide-title="true"
+      :ok-text="$t('navbar.switch')"
+      @ok="onConfirmSwitch"
+      @cancel="onCancel"
+    >
+      <span>{{ $t('navbar.swap.confirm.text') }}</span>
+    </a-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref, inject, watch } from 'vue';
+  import { computed, ref, inject } from 'vue';
   import { useDark, useToggle, useFullscreen } from '@vueuse/core';
   import { useI18n } from 'vue-i18n';
   import { Message } from '@arco-design/web-vue';
@@ -183,11 +192,12 @@
   const deviceStore = useDeviceStore();
   const { t } = useI18n();
   const { device, term } = useDeviceManager();
-
+  const visible = ref(false);
   const { changeLocale, currentLocale } = useLocale();
   const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
   const locales = [...LOCALE_OPTIONS];
   const loading = ref(false);
+  let tempDeviceType = deviceStore.deviceType.name;
 
   const theme = computed(() => {
     return appStore.theme;
@@ -222,6 +232,21 @@
 
   const triggerBtn = ref();
 
+  const onSwapDeviceType = (
+    value:
+      | string
+      | number
+      | Record<string, any>
+      | (string | number | Record<string, any>)[]
+  ) => {
+    if (deviceStore.deviceStatus === DeviceStatus.SerialConnected) {
+      visible.value = true;
+      tempDeviceType = value as string;
+    } else {
+      deviceStore.setDeviceType(value as string);
+    }
+  };
+
   const setDropDownVisible = () => {
     const event = new MouseEvent('click', {
       view: window,
@@ -259,13 +284,15 @@
     }
   }
 
-  // Clear the logs when switching
-  watch(
-    () => deviceStore.deviceType,
-    () => {
-      device.value.cleanLogger();
-    }
-  );
+  const onCancel = () => {
+    visible.value = false;
+  };
+
+  const onConfirmSwitch = async () => {
+    await disconnect();
+    deviceStore.setDeviceType(tempDeviceType);
+    onCancel();
+  };
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/setup/config/components/Config.vue b/src/pages/setup/config/components/Config.vue
index bb97aae..70960f6 100644
--- a/src/pages/setup/config/components/Config.vue
+++ b/src/pages/setup/config/components/Config.vue
@@ -68,6 +68,17 @@
             allow-clear
           />
         </a-form-item>
+        <a-form-item
+          field="mqtt.clientId"
+          :label="$t('workplace.config.mqtt.clientId')"
+        >
+          <a-input
+            v-model="config.mqtt.clientId"
+            :placeholder="$t('workplace.config.mqtt.message.clientId')"
+            size="large"
+            allow-clear
+          />
+        </a-form-item>
         <a-form-item
           v-if="!config.mqtt.ssl"
           field="mqtt.username"
@@ -134,6 +145,7 @@
       encryption: '0',
     },
     mqtt: {
+      clientId: '',
       enabled: false,
       host: '',
       port: 1883,
@@ -180,9 +192,10 @@
     }
 
     if (!config.mqtt.enabled) {
-      ret = await device.value?.setMqttServer('', 0, '', '', 0);
+      ret = await device.value?.setMqttServer('', '', 0, '', '', 0);
     } else {
       ret = await device.value?.setMqttServer(
+        config.mqtt.clientId,
         config.mqtt.host,
         config.mqtt.port,
         config.mqtt.username,
@@ -206,20 +219,26 @@
           retry(() => device.value?.getWifi(), 5, 500, null),
           retry(() => device.value?.getMqttServer(), 5, 500, null),
         ]);
+        if (config?.wifi) {
+          config.wifi.password = wifi.config.password;
+          config.wifi.ssid = wifi.config.name;
+          config.wifi.encryption = wifi.config.security.toString();
+        }
 
-        config.wifi.password = wifi.config.password;
-        config.wifi.ssid = wifi.config.name;
-        config.wifi.encryption = wifi.config.security.toString();
-        if (mqtt.config.address !== '') {
-          config.mqtt.enabled = true;
-          config.mqtt.host = mqtt.config.address;
-          config.mqtt.port = mqtt.config.port;
-          config.mqtt.username = mqtt.config.username;
-          config.mqtt.password = mqtt.config.password;
-          config.mqtt.ssl = mqtt.config.use_ssl;
-        } else {
-          config.mqtt.enabled = false;
+        if (mqtt?.config) {
+          if (mqtt.config.address !== '') {
+            config.mqtt.enabled = true;
+            config.mqtt.clientId = mqtt.config.client_id;
+            config.mqtt.host = mqtt.config.address;
+            config.mqtt.port = mqtt.config.port;
+            config.mqtt.username = mqtt.config.username;
+            config.mqtt.password = mqtt.config.password;
+            config.mqtt.ssl = mqtt.config.use_ssl;
+          } else {
+            config.mqtt.enabled = false;
+          }
         }
+
         oldConfig = JSON.parse(JSON.stringify(config));
         loaded.value = true;
         change.value = true;
diff --git a/src/pages/setup/process/components/Config.vue b/src/pages/setup/process/components/Config.vue
index e3e3c62..e455681 100644
--- a/src/pages/setup/process/components/Config.vue
+++ b/src/pages/setup/process/components/Config.vue
@@ -58,11 +58,17 @@
   const iou = ref(deviceStore.tiou);
 
   const setConfidence = async (value: number | [number, number]) => {
-    await device.value?.setScore(value as number);
+    const result = await device.value?.setScore(value as number);
+    if (Number(result) === Number(value)) {
+      deviceStore.setScore(Number(result));
+    }
   };
 
   const setIou = async (value: number | [number, number]) => {
-    await device.value?.setIOU(value as number);
+    const result = await device.value?.setIOU(value as number);
+    if (Number(result) === Number(value)) {
+      deviceStore.setIOU(Number(result));
+    }
   };
 
   const handelConfidenceChange = throttle(setConfidence, 1000);
diff --git a/src/pages/setup/process/components/Device.vue b/src/pages/setup/process/components/Device.vue
index eb2a9b1..e361aa2 100644
--- a/src/pages/setup/process/components/Device.vue
+++ b/src/pages/setup/process/components/Device.vue
@@ -153,7 +153,10 @@
       </div>
 
       <div
-        v-if="deviceStore.flashWay === FlashWayType.Custom"
+        v-if="
+          deviceStore.flashWay === FlashWayType.Custom &&
+          deviceStore.deviceStatus === DeviceStatus.SerialConnected
+        "
         :class="[
           'custom-model-wrapper',
           { 'custom-model-selected': isSelectedCustomModel },
@@ -431,7 +434,11 @@
     const version = deviceStore.firmware?.version;
     const bins = deviceStore.firmware?.bins ?? [];
     const fileArray = [];
-    const currentVersion = deviceStore.deviceVersion;
+    let currentVersion = deviceStore.deviceVersion;
+    // When there is no current version number, you need to obtain the version number first before continuing with the operation.
+    if (currentVersion === null) {
+      currentVersion = await device.value?.getVersion();
+    }
     if (!currentVersion || version !== currentVersion) {
       if (bins.length === 0) {
         throw new Error(t('workplace.device.message.firmware.no'));
@@ -470,7 +477,6 @@
     }
     loadingTip.value = t('workplace.device.message.tip.flashing');
     deviceStore.setDeviceStatus(DeviceStatus.Flashing);
-    deviceStore.setCurrentAvailableModel(false);
     const result = await props.flasher.onWriteFlash(fileArray);
     if (result) {
       if (props.flasher.isNeedResetDevice) {
@@ -487,6 +493,7 @@
         await device.value?.deleteAction();
         deviceStore.setCurrentModel(finallyModel);
       }
+      deviceStore.setCurrentAvailableModel(false);
       deviceStore.setDeviceStatus(DeviceStatus.SerialConnected);
     } else {
       await device.value.disconnect();
diff --git a/src/pages/setup/process/grove_ai_we2/Device.vue b/src/pages/setup/process/grove_ai_we2/Device.vue
index 59b37c9..3f5d557 100644
--- a/src/pages/setup/process/grove_ai_we2/Device.vue
+++ b/src/pages/setup/process/grove_ai_we2/Device.vue
@@ -42,7 +42,7 @@
         deviceStore.setCurrentAvailableModel(currentModel?.id !== undefined);
         if (deviceStore.flashWay !== FlashWayType.ComeToSenseCraftAI) {
           deviceStore.setFlashWay(
-            FlashWayType[model.isCustom ? 'Custom' : 'Prefabricated']
+            FlashWayType[model?.isCustom ? 'Custom' : 'Prefabricated']
           );
         }
         if (!name && !version && !model && !currentModel) {
diff --git a/src/pages/setup/process/xiao_esp32s3/Device.vue b/src/pages/setup/process/xiao_esp32s3/Device.vue
index 2e49067..c3efed8 100644
--- a/src/pages/setup/process/xiao_esp32s3/Device.vue
+++ b/src/pages/setup/process/xiao_esp32s3/Device.vue
@@ -21,18 +21,22 @@
   const handelRefresh = async () => {
     if (deviceStore.deviceStatus === DeviceStatus.SerialConnected) {
       try {
-        const [name, version, deviceId, model, currentModel] =
-          await Promise.all([
-            device.value?.getName(),
-            device.value?.getVersion(),
-            device.value?.getID(),
-            device.value?.getInfo().then((base64Str) => {
-              if (!base64Str) return null;
-              const str = decode(base64Str);
-              return JSON.parse(str);
-            }),
-            device.value?.getModel(),
-          ]);
+        /**
+         * Because the data retrieved immediately after burning to xiao will be from the previous time,
+         * so we can't request it right away. Therefore, we still use a synchronous method to request
+         * instructions one by one here.
+         */
+        const name = await device.value?.getName();
+        const version = await device.value?.getVersion();
+        const deviceId = await device.value?.getID();
+        const base64Str = await device.value?.getInfo();
+        const currentModel = await device.value?.getModel();
+
+        let model = null;
+        if (base64Str) {
+          const str = decode(base64Str);
+          model = JSON.parse(str);
+        }
         deviceStore.setDeviceName(name);
         deviceStore.setDeviceVersion(version);
         deviceStore.setDeviceId(deviceId);
@@ -40,7 +44,7 @@
         deviceStore.setCurrentAvailableModel(currentModel?.id !== undefined);
         if (deviceStore.flashWay !== FlashWayType.ComeToSenseCraftAI) {
           deviceStore.setFlashWay(
-            FlashWayType[model.isCustom ? 'Custom' : 'Prefabricated']
+            FlashWayType[model?.isCustom ? 'Custom' : 'Prefabricated']
           );
         }
         if (!name && !version && !model && !currentModel) {
diff --git a/src/pages/utils/components/Tools.vue b/src/pages/utils/components/Tools.vue
index bada14f..0fcc278 100644
--- a/src/pages/utils/components/Tools.vue
+++ b/src/pages/utils/components/Tools.vue
@@ -263,6 +263,7 @@
 
         .list-item-content {
           display: flex;
+          flex-direction: row;
           align-items: center;
           justify-content: space-between;
         }
@@ -272,7 +273,10 @@
         }
 
         .list-item-file {
+          flex: 1;
+          width: 0;
           margin: 0 auto;
+          margin-right: 10px;
           margin-left: 0;
         }
       }
diff --git a/src/sscma/atclient.ts b/src/sscma/atclient.ts
index 58e0c52..8262243 100644
--- a/src/sscma/atclient.ts
+++ b/src/sscma/atclient.ts
@@ -135,13 +135,14 @@ export class ATClient {
   }
 
   public setMqttServer(
+    clientId: string,
     host: string,
     port: number,
     username: string,
     password: string,
     ssl: number
   ): string {
-    return `AT+MQTTSERVER="","${host}",${port},"${username}","${password}", ${ssl} \r`;
+    return `AT+MQTTSERVER="${clientId}","${host}",${port},"${username}","${password}", ${ssl} \r`;
   }
 
   public reset(): string {
diff --git a/src/sscma/constants.ts b/src/sscma/constants.ts
index 193c9d3..a621541 100644
--- a/src/sscma/constants.ts
+++ b/src/sscma/constants.ts
@@ -11,7 +11,7 @@ export const DEVICE_LIST = [
   },
   {
     id: DeviceType.GroveAIWE2,
-    name: 'Grove Vision AI(WE2)',
+    name: 'Grove Vision AI(V2)',
     filter: [{ vendorId: 0x1a86, productId: 0x55d3 }],
   },
 ];
diff --git a/src/sscma/device.ts b/src/sscma/device.ts
index f259342..4382cd9 100644
--- a/src/sscma/device.ts
+++ b/src/sscma/device.ts
@@ -59,8 +59,9 @@ export default class Device {
   public async sendCommand(
     command: string | undefined,
     tag: string,
-    timeout = 5000
+    timeout = 10000
   ): Promise<any> {
+    console.time(tag);
     // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve, reject) => {
       if (!command) {
@@ -619,6 +620,7 @@ export default class Device {
   }
 
   public async setMqttServer(
+    clientId: string,
     host: string,
     port: number,
     username: string,
@@ -628,6 +630,7 @@ export default class Device {
     try {
       const tag = 'MQTTSERVER';
       const command = this.client.setMqttServer(
+        clientId,
         host,
         port,
         username,
diff --git a/src/sscma/grove_ai_we2/deviceHimax.ts b/src/sscma/grove_ai_we2/deviceHimax.ts
index 2f0ea56..49b232d 100644
--- a/src/sscma/grove_ai_we2/deviceHimax.ts
+++ b/src/sscma/grove_ai_we2/deviceHimax.ts
@@ -13,7 +13,6 @@ class Himax extends Device {
   private lastCode: number; // 遍历时缓存的上一个code，用来辅助判断开始和结束
   private cacheData: Array<number>;
   private watchLoop: boolean | undefined = undefined;
-  private loggerManager: string[] = [];
 
   name = 'Grove AI WE2';
   constructor() {
@@ -23,6 +22,37 @@ class Himax extends Device {
     this.cacheData = [];
   }
 
+  private parseAndProcessData = (data: number[]) => {
+    try {
+      const buffer = new Uint8Array(data);
+      const str = this.textDecoder.decode(buffer);
+      const obj = JSON.parse(str);
+      const type = obj?.type;
+      const name = obj?.name;
+      if (type === 0) {
+        // 指令响应
+        console.log('handleReceive:', obj);
+        console.timeEnd(name);
+        const resolve = this.resolveMap.get(name);
+        if (resolve) resolve(obj);
+      } else if (type === 1) {
+        // 事件
+        const code = obj?.code;
+        const listener = this.eventMap.get(name);
+        if (listener?.(obj) && code !== 0) {
+          Message.error(
+            `Please check device connection status, errorCode[${code}]`
+          );
+        }
+      }
+    } catch (error) {
+      // console.error(
+      //   'An error occurred while parsing the returned data:',
+      //   error
+      // );
+    }
+  };
+
   private readLoop = async () => {
     while (true) {
       if (!this.serial) {
@@ -31,9 +61,6 @@ class Himax extends Device {
       if (this.watchLoop && this.serial.available()) {
         // eslint-disable-next-line no-await-in-loop
         const data = await this.serial.read();
-        this.loggerManager.push(
-          `[${new Date()}]: ${this.textDecoder.decode(data)}`
-        );
         try {
           let index = 0;
           while (index < data.length) {
@@ -52,33 +79,11 @@ class Himax extends Device {
               if (this.lastCode === 0x7d) {
                 // }
                 this.hasStart = false;
-                try {
-                  const buffer = new Uint8Array(this.cacheData);
-                  const str = this.textDecoder.decode(buffer);
-                  const obj = JSON.parse(str);
-                  const type = obj?.type;
-                  const name = obj?.name;
-                  if (type === 0) {
-                    // 指令响应
-                    console.log('handleReceive:', obj);
-                    const resolve = this.resolveMap.get(name);
-                    if (resolve) resolve(obj);
-                  } else if (type === 1) {
-                    // 事件
-                    const code = obj?.code;
-                    const listener = this.eventMap.get(name);
-                    if (listener?.(obj) && code !== 0) {
-                      Message.error(
-                        `Please check device connection status, errorCode[${code}]`
-                      );
-                    }
-                  }
-                } catch (error) {
-                  // console.error(
-                  //   'An error occurred while parsing the returned data:',
-                  //   error
-                  // );
-                }
+                const tempCache = [...this.cacheData];
+                requestIdleCallback(() => {
+                  this.parseAndProcessData(tempCache);
+                });
+                // this.parseAndProcessData(tempCache);
                 this.cacheData = [];
               } else if (this.hasStart) {
                 this.cacheData.push(num);
@@ -249,18 +254,9 @@ class Himax extends Device {
     this.deviceStore.setDeviceStatus(DeviceStatus.SerialConnected);
   }
 
-  public cleanLogger() {
-    this.loggerManager = [];
-  }
-
-  public showLogger() {
-    return [...this.loggerManager];
-  }
-
   public async disconnect(): Promise<void> {
     console.log('Called when disconnected, Does serial exist?', !!this.serial);
     this.break();
-    this.cleanLogger();
     if (!this.serial) {
       return;
     }
diff --git a/src/sscma/xiao_esp32s3/Flasher.ts b/src/sscma/xiao_esp32s3/Flasher.ts
index c93b33d..4510836 100644
--- a/src/sscma/xiao_esp32s3/Flasher.ts
+++ b/src/sscma/xiao_esp32s3/Flasher.ts
@@ -33,21 +33,13 @@ class Flasher implements FlasherInterface {
   }
 
   private async espLoaderConnect() {
-    try {
-      if (this.deviceStore.deviceStatus !== DeviceStatus.EspConnected) {
-        await this.device?.esploaderConnect(this.espLoaderTerminal);
-      }
-      this.espLoader = this.device?.esploader ?? null;
-      this.transport = this.device?.transport ?? null;
-      if (!this.espLoader || !this.transport) {
-        throw new Error(i18n.global.t('workplace.serial.no.port'));
-      }
-    } catch (error: any) {
-      console.log('在 espLoader connect 的地方出现了错误', error);
-      this.espLoaderTerminal.writeLine(`Error: ${error.message}`);
-      if (error?.message?.includes('No port selected by the user')) {
-        throw new Error(i18n.global.t('workplace.serial.no.port'));
-      }
+    if (this.deviceStore.deviceStatus !== DeviceStatus.EspConnected) {
+      await this.device?.esploaderConnect(this.espLoaderTerminal);
+    }
+    this.espLoader = this.device?.esploader ?? null;
+    this.transport = this.device?.transport ?? null;
+    if (!this.espLoader || !this.transport) {
+      throw new Error(i18n.global.t('workplace.serial.no.port'));
     }
   }
 
diff --git a/src/utils/flash.ts b/src/utils/flash.ts
index 1ced32b..d415567 100644
--- a/src/utils/flash.ts
+++ b/src/utils/flash.ts
@@ -9,6 +9,8 @@ export function flashErrorHandle(error?: Error, defaultMsg?: string) {
     ].includes(error?.message ?? '')
   ) {
     Message.error(i18n.global.t('workplace.serial.device.port.occupied'));
+  } else if (error?.message?.includes('No port selected by the user')) {
+    Message.error(i18n.global.t('workplace.serial.no.port'));
   } else {
     Message.error(defaultMsg ?? error?.message ?? '');
   }