From b3900fbef54c5f06bcfc39cb664d4863e8eb38eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Fri, 29 Dec 2023 16:39:50 +0800
Subject: [PATCH 01/17] feat: add global loading

---
 src/hooks/wifiAndMqttDetection.ts             |   2 +-
 src/locale/en-US.ts                           |   1 +
 src/locale/zh-CN.ts                           |   1 +
 src/pages/components/Loading.vue              | 128 ++++++++++++++++++
 src/pages/index.vue                           |  27 +++-
 src/pages/setup/config/components/Config.vue  |  54 +++++---
 .../setup/process/grove_ai_we2/Device.vue     |  12 +-
 .../setup/process/xiao_esp32s3/Device.vue     |  12 +-
 src/store/modules/app/index.ts                |  21 +++
 src/store/modules/app/types.ts                |   3 +
 src/utils/timer.ts                            |  22 +++
 11 files changed, 253 insertions(+), 30 deletions(-)
 create mode 100644 src/pages/components/Loading.vue

diff --git a/src/hooks/wifiAndMqttDetection.ts b/src/hooks/wifiAndMqttDetection.ts
index 6323ab5..3839984 100644
--- a/src/hooks/wifiAndMqttDetection.ts
+++ b/src/hooks/wifiAndMqttDetection.ts
@@ -19,7 +19,7 @@ const useWifiAndMqttDetection = () => {
       }
       isStarted = true;
       try {
-        await delay(isFirst ? 0 : 2000);
+        await delay(isFirst ? 1000 : 5000);
         await behavior();
       } catch (error) {
         console.log('get wifi info error', error);
diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts
index 23fec25..5e068b0 100644
--- a/src/locale/en-US.ts
+++ b/src/locale/en-US.ts
@@ -20,6 +20,7 @@ export default {
   'navbar.action.locale': 'Switch to English',
   'confirm': 'Confirm',
   'cancel': 'Cancel',
+  'config.save.success': 'Save Success',
   ...localeSettings,
   ...localeProcess,
 };
diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
index a631d1d..efa087f 100644
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@@ -20,6 +20,7 @@ export default {
   'navbar.action.locale': '切换为中文',
   'confirm': '确定',
   'cancel': '取消',
+  'config.save.success': '保存成功',
   ...localeSettings,
   ...localeProcess,
 };
diff --git a/src/pages/components/Loading.vue b/src/pages/components/Loading.vue
new file mode 100644
index 0000000..a5f1ddb
--- /dev/null
+++ b/src/pages/components/Loading.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+  import useAppStore from '@/store/modules/app';
+
+  const appStore = useAppStore();
+</script>
+
+<template>
+  <div class="container">
+    <div class="com__box">
+      <!-- loading -->
+      <div class="loading">
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+    <!-- 说明：组件名 -->
+    <span class="explain">{{ appStore.loadingText }}</span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .loading,
+  .loading > div {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .loading {
+    display: block;
+    color: white;
+    font-size: 0;
+  }
+
+  .loading.la-dark {
+    color: #f5f5f5;
+  }
+
+  .loading > div {
+    display: inline-block;
+    float: none;
+    background-color: currentcolor;
+    border: 0 solid currentcolor;
+  }
+
+  .loading {
+    width: 32px;
+    height: 32px;
+  }
+
+  .loading > div:nth-child(1),
+  .loading > div:nth-child(2) {
+    position: absolute;
+    left: 0;
+    width: 100%;
+  }
+
+  .loading > div:nth-child(1) {
+    top: -25%;
+    z-index: 1;
+    height: 100%;
+    border-radius: 10%;
+    animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
+  }
+
+  .loading > div:nth-child(2) {
+    bottom: -9%;
+    height: 10%;
+    background: white;
+    border-radius: 50%;
+    opacity: 0.2;
+    animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
+  }
+
+  .loading.la-sm {
+    width: 16px;
+    height: 16px;
+  }
+
+  .loading.la-2x {
+    width: 64px;
+    height: 64px;
+  }
+
+  .loading.la-3x {
+    width: 96px;
+    height: 96px;
+  }
+
+  @keyframes square-jelly-box-animate {
+    17% {
+      border-bottom-right-radius: 10%;
+    }
+
+    25% {
+      transform: translateY(25%) rotate(22.5deg);
+    }
+
+    50% {
+      border-bottom-right-radius: 100%;
+      transform: translateY(50%) scale(1, 0.9) rotate(45deg);
+    }
+
+    75% {
+      transform: translateY(25%) rotate(67.5deg);
+    }
+
+    100% {
+      transform: translateY(0) rotate(90deg);
+    }
+  }
+
+  @keyframes square-jelly-box-shadow {
+    50% {
+      transform: scale(1.25, 1);
+    }
+  }
+
+  .explain {
+    margin-top: 10px;
+    color: white;
+  }
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c06d99e..dbd8561 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -35,7 +35,12 @@
         <a-layout class="layout-content" :style="paddingStyle">
           <TabBar v-if="appStore.tabBar" />
           <a-layout-content>
-            <PageLayout />
+            <div class="page-layout">
+              <div v-if="appStore.globalLoading" class="loading-container">
+                <Loading />
+              </div>
+              <PageLayout />
+            </div>
           </a-layout-content>
           <Footer v-if="footer" />
         </a-layout>
@@ -46,8 +51,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, provide, onMounted, watch } from 'vue';
-  import { useRoute } from 'vue-router';
+  import { ref, computed, provide, onMounted } from 'vue';
   import { useAppStore } from '@/store';
   import useSenseCraftAIComesToFlash from '@/hooks/senseCraftAIComesToFlash';
   import Logger from './components/Logger.vue';
@@ -56,6 +60,7 @@
   import Navbar from './components/Navbar.vue';
   import Footer from './components/Footer.vue';
   import PageLayout from './components/PageLayout.vue';
+  import Loading from './components/Loading.vue';
 
   const isInit = ref(false);
   const appStore = useAppStore();
@@ -79,6 +84,7 @@
     const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
     return { ...paddingLeft, ...paddingTop };
   });
+
   const setCollapsed = (val: boolean) => {
     if (!isInit.value) return; // for page initialization menu state problem
     appStore.updateSettings({ menuCollapse: val });
@@ -168,4 +174,19 @@
     background-color: var(--color-fill-1);
     transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   }
+
+  .page-layout {
+    position: relative;
+    height: 100%;
+  }
+
+  .loading-container {
+    position: absolute;
+    inset: 0;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(0 0 0 / 30%);
+  }
 </style>
diff --git a/src/pages/setup/config/components/Config.vue b/src/pages/setup/config/components/Config.vue
index 2acc689..bb97aae 100644
--- a/src/pages/setup/config/components/Config.vue
+++ b/src/pages/setup/config/components/Config.vue
@@ -102,7 +102,9 @@
           html-type="submit"
           size="large"
           :loading="loading"
-          :disabled="change"
+          :disabled="
+            change || deviceStore.deviceStatus !== DeviceStatus.SerialConnected
+          "
           >{{ $t('workplace.config.wifi.save') }}</a-button
         >
       </a-form-item>
@@ -112,12 +114,14 @@
 
 <script lang="ts" setup>
   import { onMounted, watch, reactive, ref } from 'vue';
-  import { Message } from '@arco-design/web-vue';
   import { useI18n } from 'vue-i18n';
-  import { useDeviceStore } from '@/store';
+  import { Message } from '@arco-design/web-vue';
+  import { useAppStore, useDeviceStore } from '@/store';
   import { DeviceStatus } from '@/sscma';
   import useDeviceManager from '@/hooks/deviceManager';
+  import { retry } from '@/utils/timer';
 
+  const appStore = useAppStore();
   const { device } = useDeviceManager();
   const deviceStore = useDeviceStore();
   const { t } = useI18n();
@@ -190,28 +194,38 @@
     oldConfig = JSON.parse(JSON.stringify(config));
     loading.value = false;
     change.value = true;
+    Message.success(t('config.save.success'));
   };
 
   const handelRefresh = async (deviceStatus: DeviceStatus) => {
     if (deviceStatus === DeviceStatus.SerialConnected && !loaded.value) {
-      const wifi = await device.value?.getWifi();
-      const mqtt = await device.value?.getMqttServer();
-      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;
+      try {
+        appStore.showLoading();
+        // Sometimes it may not be possible to obtain the data, so try a few more times.
+        const [wifi, mqtt] = await Promise.all([
+          retry(() => device.value?.getWifi(), 5, 500, null),
+          retry(() => device.value?.getMqttServer(), 5, 500, null),
+        ]);
+
+        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;
+        }
+        oldConfig = JSON.parse(JSON.stringify(config));
+        loaded.value = true;
+        change.value = true;
+      } finally {
+        appStore.hideLoading();
       }
-      oldConfig = JSON.parse(JSON.stringify(config));
-      loaded.value = true;
-      change.value = true;
     }
   };
 
diff --git a/src/pages/setup/process/grove_ai_we2/Device.vue b/src/pages/setup/process/grove_ai_we2/Device.vue
index 2f6cbf8..59b37c9 100644
--- a/src/pages/setup/process/grove_ai_we2/Device.vue
+++ b/src/pages/setup/process/grove_ai_we2/Device.vue
@@ -9,6 +9,7 @@
   import Flasher from '@/sscma/grove_ai_we2/Flasher';
   import { FlashWayType } from '@/store/modules/device';
   import useWifiAndMqttDetection from '@/hooks/wifiAndMqttDetection';
+  import { retry } from '@/utils/timer';
   import Device from '../components/Device.vue';
 
   const { device, term } = useDeviceManager();
@@ -69,9 +70,14 @@
   };
 
   const fetchAvailableModels = async () => {
-    const data = await fetch(
-      `https://files.seeedstudio.com/sscma/sscma-model-we2.json?timestamp=${new Date().getTime()}`
-    ).then((response) => response.json());
+    const data = await retry(
+      () =>
+        fetch(
+          `https://files.seeedstudio.com/sscma/sscma-model-we2.json?timestamp=${new Date().getTime()}`
+        ).then((response) => response.json()),
+      5,
+      500
+    );
     deviceStore.setModels(data.models);
     const firmwares = data.firmwares;
     if (firmwares?.length > 0) {
diff --git a/src/pages/setup/process/xiao_esp32s3/Device.vue b/src/pages/setup/process/xiao_esp32s3/Device.vue
index 98e8b63..2e49067 100644
--- a/src/pages/setup/process/xiao_esp32s3/Device.vue
+++ b/src/pages/setup/process/xiao_esp32s3/Device.vue
@@ -8,6 +8,7 @@
   import useDeviceManager from '@/hooks/deviceManager';
   import Flasher from '@/sscma/xiao_esp32s3/Flasher';
   import { FlashWayType } from '@/store/modules/device';
+  import { retry } from '@/utils/timer';
   import Device from '../components/Device.vue';
 
   const { device, term } = useDeviceManager();
@@ -54,9 +55,14 @@
   };
 
   const fetchAvailableModels = async () => {
-    const data = await fetch(
-      `https://files.seeedstudio.com/sscma/sscma-model.json?timestamp=${new Date().getTime()}`
-    ).then((response) => response.json());
+    const data = await retry(
+      () =>
+        fetch(
+          `https://files.seeedstudio.com/sscma/sscma-model.json?timestamp=${new Date().getTime()}`
+        ).then((response) => response.json()),
+      5,
+      500
+    );
     deviceStore.setModels(data.models);
     const firmwares = data.firmwares;
     if (firmwares?.length > 0) {
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index 9ef9d67..2bc1095 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -6,6 +6,8 @@ import { AppState } from './types';
 const useAppStore = defineStore('app', {
   state: (): AppState => ({
     ...defaultSettings,
+    globalLoading: false,
+    loadingText: 'loading...',
   }),
 
   getters: {
@@ -50,6 +52,25 @@ const useAppStore = defineStore('app', {
     clearServerMenu() {
       this.serverMenu = [];
     },
+    showLoading(text?: string) {
+      this.loadingTime = Date.now();
+      const timer = setTimeout(() => {
+        if (this.loadingTime) {
+          this.globalLoading = true;
+          if (text) {
+            this.loadingText = text;
+          }
+        }
+        clearTimeout(timer);
+      }, 500);
+    },
+    hideLoading() {
+      if (this.loadingTime && Date.now() - this.loadingTime < 500) {
+        this.loadingTime = undefined;
+      }
+      this.globalLoading = false;
+      this.loadingText = 'loading...';
+    },
   },
 });
 
diff --git a/src/store/modules/app/types.ts b/src/store/modules/app/types.ts
index a1bbc20..9b64d00 100644
--- a/src/store/modules/app/types.ts
+++ b/src/store/modules/app/types.ts
@@ -17,5 +17,8 @@ export interface AppState {
   menuFromServer: boolean;
   serverMenu: RouteRecordNormalized[];
   log: boolean;
+  globalLoading: boolean;
+  loadingText: string;
+  loadingTime?: number;
   [key: string]: unknown;
 }
diff --git a/src/utils/timer.ts b/src/utils/timer.ts
index a700d88..f668fb1 100644
--- a/src/utils/timer.ts
+++ b/src/utils/timer.ts
@@ -10,3 +10,25 @@ export function delay(time: number, isReject = false) {
     }, time);
   });
 }
+
+export async function retry(
+  fn: () => Promise<any>,
+  retryCount: number,
+  interval: number,
+  errSymbol?: any
+) {
+  try {
+    const result = await fn();
+    if (errSymbol !== undefined && result === errSymbol && retryCount > 0) {
+      await delay(interval);
+      return retry(fn, retryCount - 1, errSymbol);
+    }
+    return result;
+  } catch (err) {
+    if (errSymbol === undefined && retryCount > 0) {
+      await delay(interval);
+      return retry(fn, retryCount - 1, errSymbol);
+    }
+    throw err;
+  }
+}

From 28c4d66fe2a934bccc141977abb0ff915b839654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Wed, 10 Jan 2024 15:39:21 +0800
Subject: [PATCH 02/17] fix: unconnected burn-in model always upgrades

---
 src/pages/setup/process/components/Device.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/setup/process/components/Device.vue b/src/pages/setup/process/components/Device.vue
index eb2a9b1..85462b4 100644
--- a/src/pages/setup/process/components/Device.vue
+++ b/src/pages/setup/process/components/Device.vue
@@ -431,7 +431,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'));

From 75cda35874be64b38b90a292a66b6557f1717f83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Wed, 10 Jan 2024 15:41:19 +0800
Subject: [PATCH 03/17] fix: file name too long, UI error

---
 src/pages/utils/components/Tools.vue | 4 ++++
 1 file changed, 4 insertions(+)

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;
         }
       }

From 70f404837674bf19a2eeb53598b2ed0cb265e122 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Wed, 10 Jan 2024 18:54:04 +0800
Subject: [PATCH 04/17] feat: configurable client ID

---
 src/pages/setup/config/components/Config.vue | 45 ++++++++++++++------
 src/sscma/device.ts                          |  5 ++-
 2 files changed, 36 insertions(+), 14 deletions(-)

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/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,

From 8095cf58ba86a360e180c8d5c64c82ae1feb5144 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Wed, 10 Jan 2024 18:55:10 +0800
Subject: [PATCH 05/17] feat: internationalization

---
 src/locale/en-US/process.ts | 2 ++
 src/locale/zh-CN/process.ts | 2 ++
 2 files changed, 4 insertions(+)

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/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': '输出',

From 8581432eef8c19faf57cc067592f3c4d416c0403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Wed, 10 Jan 2024 18:56:08 +0800
Subject: [PATCH 06/17] fix: timeout undefined error

---
 src/pages/components/Navbar.vue                 |  8 --------
 src/pages/setup/process/components/Config.vue   | 10 ++++++++--
 src/pages/setup/process/grove_ai_we2/Device.vue |  2 +-
 src/pages/setup/process/xiao_esp32s3/Device.vue |  2 +-
 src/sscma/atclient.ts                           |  3 ++-
 src/sscma/grove_ai_we2/deviceHimax.ts           | 14 +-------------
 6 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/pages/components/Navbar.vue b/src/pages/components/Navbar.vue
index 646b149..ca1d441 100644
--- a/src/pages/components/Navbar.vue
+++ b/src/pages/components/Navbar.vue
@@ -258,14 +258,6 @@
       term.writeln(`Error: ${error?.message}`);
     }
   }
-
-  // Clear the logs when switching
-  watch(
-    () => deviceStore.deviceType,
-    () => {
-      device.value.cleanLogger();
-    }
-  );
 </script>
 
 <style scoped lang="less">
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/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..26a47bd 100644
--- a/src/pages/setup/process/xiao_esp32s3/Device.vue
+++ b/src/pages/setup/process/xiao_esp32s3/Device.vue
@@ -40,7 +40,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/sscma/atclient.ts b/src/sscma/atclient.ts
index cdd72e7..33edea2 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/grove_ai_we2/deviceHimax.ts b/src/sscma/grove_ai_we2/deviceHimax.ts
index 2f0ea56..4e1fb8a 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() {
@@ -31,9 +30,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) {
@@ -61,6 +57,7 @@ class Himax extends Device {
                   if (type === 0) {
                     // 指令响应
                     console.log('handleReceive:', obj);
+                    console.timeEnd(name);
                     const resolve = this.resolveMap.get(name);
                     if (resolve) resolve(obj);
                   } else if (type === 1) {
@@ -249,18 +246,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;
     }

From 0d1a3e98f69e4f4cac564748605795e67ecd42fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Thu, 11 Jan 2024 09:17:23 +0800
Subject: [PATCH 07/17] feat: concurrent data processing

---
 src/sscma/grove_ai_we2/deviceHimax.ts | 64 +++++++++++++++------------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/sscma/grove_ai_we2/deviceHimax.ts b/src/sscma/grove_ai_we2/deviceHimax.ts
index 4e1fb8a..49b232d 100644
--- a/src/sscma/grove_ai_we2/deviceHimax.ts
+++ b/src/sscma/grove_ai_we2/deviceHimax.ts
@@ -22,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) {
@@ -48,34 +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);
-                    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
-                  // );
-                }
+                const tempCache = [...this.cacheData];
+                requestIdleCallback(() => {
+                  this.parseAndProcessData(tempCache);
+                });
+                // this.parseAndProcessData(tempCache);
                 this.cacheData = [];
               } else if (this.hasStart) {
                 this.cacheData.push(num);

From e0a6698cae18d97c9e0d1a90d0129f9f638c3f93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Thu, 11 Jan 2024 10:55:10 +0800
Subject: [PATCH 08/17] fix: user prompted without selecting serial port

---
 src/sscma/xiao_esp32s3/Flasher.ts | 22 +++++++---------------
 src/utils/flash.ts                |  2 ++
 2 files changed, 9 insertions(+), 15 deletions(-)

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 ?? '');
   }

From 102d23fbab79180516f656bb453302e48484ec21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Thu, 11 Jan 2024 13:44:13 +0800
Subject: [PATCH 09/17] feat: xiao Single-step execution

---
 .../setup/process/xiao_esp32s3/Device.vue     | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/pages/setup/process/xiao_esp32s3/Device.vue b/src/pages/setup/process/xiao_esp32s3/Device.vue
index 26a47bd..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);

From ea7c615738c9d045b53dac0bcc3b300b0abcdbbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Thu, 11 Jan 2024 15:21:50 +0800
Subject: [PATCH 10/17] feat: disconnect first before switching

---
 src/locale/en-US.ts                           |  3 ++
 src/locale/zh-CN.ts                           |  3 ++
 src/pages/components/Navbar.vue               | 41 +++++++++++++++++--
 src/pages/setup/process/components/Device.vue |  5 ++-
 4 files changed, 48 insertions(+), 4 deletions(-)

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/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/pages/components/Navbar.vue b/src/pages/components/Navbar.vue
index ca1d441..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,
@@ -258,6 +283,16 @@
       term.writeln(`Error: ${error?.message}`);
     }
   }
+
+  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/process/components/Device.vue b/src/pages/setup/process/components/Device.vue
index 85462b4..6cbb085 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 },

From ca9869fff10db0b1eb2d4bfe9b9b3683abbf71e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Thu, 11 Jan 2024 17:04:25 +0800
Subject: [PATCH 11/17] feat: add come to v2 support

---
 src/hooks/senseCraftAIComesToFlash.ts | 1 +
 src/sscma/constants.ts                | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/hooks/senseCraftAIComesToFlash.ts b/src/hooks/senseCraftAIComesToFlash.ts
index 7409b5b..b56cdaf 100644
--- a/src/hooks/senseCraftAIComesToFlash.ts
+++ b/src/hooks/senseCraftAIComesToFlash.ts
@@ -75,6 +75,7 @@ const useSenseCraftAIComesToFlash = () => {
       const deviceType: string = deviceTypes[0];
       const deviceKeyToId: Record<string, string> = {
         '32': DeviceType.XiaoEsp32s3,
+        '36': DeviceType.GroveAIWE2,
       };
       if (typeof deviceKeyToId[deviceType] === 'string') {
         deviceStore.setDeviceTypeById(deviceKeyToId[deviceType]);
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 }],
   },
 ];

From d068e815e1a88c5ca4ec567b7d86600d3c3a4762 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Thu, 11 Jan 2024 17:30:30 +0800
Subject: [PATCH 12/17] feat: come to update uniform_type

---
 src/hooks/senseCraftAIComesToFlash.ts | 79 +++++++++++----------------
 1 file changed, 32 insertions(+), 47 deletions(-)

diff --git a/src/hooks/senseCraftAIComesToFlash.ts b/src/hooks/senseCraftAIComesToFlash.ts
index b56cdaf..390ef2c 100644
--- a/src/hooks/senseCraftAIComesToFlash.ts
+++ b/src/hooks/senseCraftAIComesToFlash.ts
@@ -39,28 +39,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, [
         'pic_url',
-        'uniform_types',
         'labels',
         'description',
         'model_size',
@@ -71,42 +61,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,
-        '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);
+    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 () => {

From 9646cd84d8cfaf9ef7839f76a398edd6e77a8f02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Fri, 12 Jan 2024 15:27:32 +0800
Subject: [PATCH 13/17] fix: burned but not deduced

---
 src/hooks/senseCraftAIComesToFlash.ts         | 11 ++++++++---
 src/pages/setup/process/components/Device.vue |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/hooks/senseCraftAIComesToFlash.ts b/src/hooks/senseCraftAIComesToFlash.ts
index 390ef2c..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);
@@ -49,7 +54,7 @@ const useSenseCraftAIComesToFlash = () => {
       modelFile,
       constant,
     ] = await Promise.all<any>([
-      fetchModelDetail(modelId as string, [
+      fetchModelDetail(modelId as string, token as string, [
         'pic_url',
         'labels',
         'description',
diff --git a/src/pages/setup/process/components/Device.vue b/src/pages/setup/process/components/Device.vue
index 6cbb085..e361aa2 100644
--- a/src/pages/setup/process/components/Device.vue
+++ b/src/pages/setup/process/components/Device.vue
@@ -477,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) {
@@ -494,6 +493,7 @@
         await device.value?.deleteAction();
         deviceStore.setCurrentModel(finallyModel);
       }
+      deviceStore.setCurrentAvailableModel(false);
       deviceStore.setDeviceStatus(DeviceStatus.SerialConnected);
     } else {
       await device.value.disconnect();

From d46542090bf5fe80a5e785a8af6ba45c2e2f3327 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Fri, 12 Jan 2024 18:00:33 +0800
Subject: [PATCH 14/17] fix: merge error

---
 src/pages/setup/config/components/Config.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/setup/config/components/Config.vue b/src/pages/setup/config/components/Config.vue
index f6b5f02..c3b043d 100644
--- a/src/pages/setup/config/components/Config.vue
+++ b/src/pages/setup/config/components/Config.vue
@@ -80,7 +80,6 @@
           />
         </a-form-item>
         <a-form-item
-          v-if="!config.mqtt.ssl"
           field="mqtt.username"
           :label="$t('workplace.config.mqtt.username')"
         >

From 232102e34548926b69b9fdb1a1d294c2e8318716 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Tue, 16 Jan 2024 18:30:41 +0800
Subject: [PATCH 15/17] fix: long-term background memory overflow exception

---
 src/sscma/grove_ai_we2/deviceHimax.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/sscma/grove_ai_we2/deviceHimax.ts b/src/sscma/grove_ai_we2/deviceHimax.ts
index 49b232d..941cc66 100644
--- a/src/sscma/grove_ai_we2/deviceHimax.ts
+++ b/src/sscma/grove_ai_we2/deviceHimax.ts
@@ -80,10 +80,7 @@ class Himax extends Device {
                 // }
                 this.hasStart = false;
                 const tempCache = [...this.cacheData];
-                requestIdleCallback(() => {
-                  this.parseAndProcessData(tempCache);
-                });
-                // this.parseAndProcessData(tempCache);
+                this.parseAndProcessData(tempCache);
                 this.cacheData = [];
               } else if (this.hasStart) {
                 this.cacheData.push(num);

From 0106f2875ce60e69fb3257b36557cb6fa046ca0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Wed, 17 Jan 2024 13:44:13 +0800
Subject: [PATCH 16/17] fix: pase error handle

---
 .../setup/process/grove_ai_we2/Device.vue     | 21 ++++++++++++++-----
 .../setup/process/xiao_esp32s3/Device.vue     |  8 +++++--
 src/utils/timer.ts                            |  3 +++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/pages/setup/process/grove_ai_we2/Device.vue b/src/pages/setup/process/grove_ai_we2/Device.vue
index 3f5d557..f4992ea 100644
--- a/src/pages/setup/process/grove_ai_we2/Device.vue
+++ b/src/pages/setup/process/grove_ai_we2/Device.vue
@@ -25,11 +25,22 @@
           await Promise.all([
             device.value?.getName(),
             device.value?.getVersion(),
-            device.value?.getInfo().then((base64Str) => {
-              if (!base64Str) return null;
-              const str = decode(base64Str);
-              return JSON.parse(str);
-            }),
+            retry(
+              () =>
+                device.value?.getInfo().then((base64Str) => {
+                  if (!base64Str) return null;
+                  try {
+                    const str = decode(base64Str);
+                    return JSON.parse(str);
+                  } catch (error) {
+                    console.error(error);
+                    return null;
+                  }
+                }),
+              5,
+              1000,
+              null
+            ),
             device.value?.getModel(),
             device.value?.getID(),
           ]);
diff --git a/src/pages/setup/process/xiao_esp32s3/Device.vue b/src/pages/setup/process/xiao_esp32s3/Device.vue
index c3efed8..4448eb6 100644
--- a/src/pages/setup/process/xiao_esp32s3/Device.vue
+++ b/src/pages/setup/process/xiao_esp32s3/Device.vue
@@ -34,8 +34,12 @@
 
         let model = null;
         if (base64Str) {
-          const str = decode(base64Str);
-          model = JSON.parse(str);
+          try {
+            const str = decode(base64Str);
+            model = JSON.parse(str);
+          } catch (error) {
+            console.error(error);
+          }
         }
         deviceStore.setDeviceName(name);
         deviceStore.setDeviceVersion(version);
diff --git a/src/utils/timer.ts b/src/utils/timer.ts
index 9c2ee91..f5fc9e7 100644
--- a/src/utils/timer.ts
+++ b/src/utils/timer.ts
@@ -11,6 +11,9 @@ export function delay(time: number, isReject = false) {
   });
 }
 
+/**
+ * It should be noted that if the 'fn' function contains 'this', please use an arrow function.
+ */
 export async function retry(
   fn: () => Promise<any>,
   retryCount: number,

From 8b4baa7c2e65f5a7d889c5c4f2d387047828f79b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=95=AC=E6=82=A6?= <wutiange20@qq.com>
Date: Wed, 17 Jan 2024 14:02:37 +0800
Subject: [PATCH 17/17] feat: flash finish show info

---
 src/pages/setup/process/components/Device.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/setup/process/components/Device.vue b/src/pages/setup/process/components/Device.vue
index e361aa2..422da52 100644
--- a/src/pages/setup/process/components/Device.vue
+++ b/src/pages/setup/process/components/Device.vue
@@ -12,7 +12,12 @@
         <div class="device-item"> {{ $t('workplace.device.noconnect') }} </div>
       </a-space>
       <div v-else>
-        <template v-if="deviceStore.currentAvailableModel">
+        <template
+          v-if="
+            deviceStore.currentAvailableModel &&
+            deviceStore.deviceStatus === DeviceStatus.SerialConnected
+          "
+        >
           <div class="device-basic-info">
             <a-space class="device-item">
               <div class="device-item-title">{{