feat(core): 将一些progress layer从layui调整为dialog-plus

common/modules/mixly-modules/common/layer.js

@@ -38,7 +38,6 @@ class Layer extends Component {
         const shadow = Layer.templates.getItem(shadowType);
         this.setContent($(shadow));
         this.#dialog_ = dialog({
-            skin: 'min-dialog tips',
             padding: 0,
             ...config
         });

common/modules/mixly-modules/deps.json

@@ -1276,6 +1276,8 @@
             "Mixly.MString",
             "Mixly.Workspace",
             "Mixly.Serial",
+            "Mixly.LayerProgress",
+            "Mixly.Debug",
             "Mixly.Electron.Shell"
         ],
         "provide": [
@@ -1296,6 +1298,7 @@
             "Mixly.Debug",
             "Mixly.HTMLTemplate",
             "Mixly.LayerFirmware",
+            "Mixly.LayerProgress",
             "Mixly.Electron.Serial"
         ],
         "provide": [
@@ -1574,6 +1577,7 @@
             "Mixly.HTMLTemplate",
             "Mixly.MString",
             "Mixly.LayerFirmware",
+            "Mixly.LayerProgress",
             "Mixly.Web.Serial",
             "Mixly.Web.Ampy"
         ],

common/modules/mixly-modules/electron/arduino-shell.js

@@ -14,6 +14,8 @@ goog.require('Mixly.Msg');
 goog.require('Mixly.MString');
 goog.require('Mixly.Workspace');
 goog.require('Mixly.Serial');
+goog.require('Mixly.LayerProgress');
+goog.require('Mixly.Debug');
 goog.require('Mixly.Electron.Shell');
 goog.provide('Mixly.Electron.ArduShell');
 
@@ -21,6 +23,7 @@ const {
     Env,
     Electron,
     LayerExt,
+    Config,
     Title,
     Boards,
     MFile,
@@ -29,7 +32,8 @@ const {
     MString,
     Workspace,
     Serial,
-    Config
+    LayerProgress,
+    Debug
 } = Mixly;
 
 const { BOARD, SOFTWARE, USER } = Config;
@@ -46,14 +50,29 @@ const {
 } = Electron;
 
 ArduShell.DEFAULT_CONFIG = goog.readJsonSync(path.join(Env.templatePath, 'json/arduino-cli-config.json'));
-
-ArduShell.binFilePath = '';
-
-ArduShell.shellPath = null;
-
-ArduShell.shell = null;
-
 ArduShell.ERROR_ENCODING = Env.currentPlatform == 'win32' ? 'cp936' : 'utf-8';
+ArduShell.binFilePath = '';
+ArduShell.shellPath = null;
+ArduShell.shell = null;
+ArduShell.compiling = false;
+ArduShell.uploading = false;
+ArduShell.killing = false;
+ArduShell.progressLayer = new LayerProgress({
+    width: 200,
+    cancelValue: Msg.Lang['nav.btn.stop'],
+    skin: 'layui-anim layui-anim-scale',
+    cancel: () => {
+        if (ArduShell.killing) {
+            return false;
+        }
+        ArduShell.progressLayer.title(`${Msg.Lang['shell.aborting']}...`);
+        ArduShell.killing = true;
+        ArduShell.cancel();
+        return false;
+    },
+    cancelDisplay: false
+});
+
 
 ArduShell.updateShellPath = () => {
     let shellPath = path.join(Env.clientPath, 'arduino-cli');
@@ -143,32 +162,12 @@ ArduShell.compile = (doFunc = () => {}) => {
     const code = editor.getCode();
     ArduShell.compiling = true;
     ArduShell.uploading = false;
+    ArduShell.killing = false;
     const boardType = Boards.getSelectedBoardCommandParam();
     mainStatusBarTabs.show();
-    const layerNum = layer.open({
+    ArduShell.progressLayer.title(`${Msg.Lang['shell.compiling']}...`);
-        type: 1,
+    ArduShell.progressLayer.show();
-        title: Msg.Lang['shell.compiling'] + "...",
-        content: $('#mixly-loader-div'),
-        shade: LayerExt.SHADE_NAV,
-        resize: false,
-        closeBtn: 0,
-        success: () => {
-            $(".layui-layer-page").css("z-index", "198910151");
-            $("#mixly-loader-btn").off("click").click(() => {
-                $("#mixly-loader-btn").css('display', 'none');
-                layer.title(Msg.Lang['shell.aborting'] + '...', layerNum);
-                ArduShell.cancel();
-            });
-        },
-        end: () => {
-            $('#mixly-loader-div').css('display', 'none');
-            $("layui-layer-shade" + layerNum).remove();
-            $("#mixly-loader-btn").off("click");
-            $("#mixly-loader-btn").css('display', 'inline-block');
-        }
-    });
     statusBarTerminal.setValue(Msg.Lang['shell.compiling'] + "...\n");
-
     let myLibPath = path.join(Env.boardDirPath, "/libraries/myLib/");
     if (fs_plus.isDirectorySync(myLibPath))
         myLibPath += '\",\"';
@@ -202,7 +201,7 @@ ArduShell.compile = (doFunc = () => {}) => {
                  + '\" \"'
                  + codePath
                  + '\" --no-color';
-    ArduShell.runCmd(layerNum, 'compile', cmdStr, code, doFunc);
+    ArduShell.runCmd('compile', cmdStr, code, doFunc);
 }
 
 /**
@@ -214,6 +213,7 @@ ArduShell.initUpload = () => {
     const { mainStatusBarTabs } = Mixly;
     ArduShell.compiling = false;
     ArduShell.uploading = true;
+    ArduShell.killing = false;
     const boardType = Boards.getSelectedBoardCommandParam();
     const uploadType = Boards.getSelectedBoardConfigParam('upload_method');
     let port = Serial.getSelectedPortName();
@@ -256,28 +256,7 @@ ArduShell.upload = (boardType, port) => {
     const mainWorkspace = Workspace.getMain();
     const editor = mainWorkspace.getEditorsManager().getActive();
     const code = editor.getCode();
-    const layerNum = layer.open({
+    ArduShell.progressLayer.title(`${Msg.Lang['shell.uploading']}...`);
-        type: 1,
-        title: Msg.Lang['shell.uploading'] + "...",
-        content: $('#mixly-loader-div'),
-        shade: LayerExt.SHADE_NAV,
-        resize: false,
-        closeBtn: 0,
-        success: function () {
-            $(".layui-layer-page").css("z-index", "198910151");
-            $("#mixly-loader-btn").off("click").click(() => {
-                $("#mixly-loader-btn").css('display', 'none');
-                layer.title(Msg.Lang['shell.aborting'] + '...', layerNum);
-                ArduShell.cancel();
-            });
-        },
-        end: function () {
-            $('#mixly-loader-div').css('display', 'none');
-            $("layui-layer-shade" + layerNum).remove();
-            $("#mixly-loader-btn").off("click");
-            $("#mixly-loader-btn").css('display', 'inline-block');
-        }
-    });
     mainStatusBarTabs.show();
     statusBarTerminal.setValue(Msg.Lang['shell.uploading'] + "...\n");
     const configPath = path.join(ArduShell.shellPath, '../arduino-cli.json'),
@@ -331,7 +310,7 @@ ArduShell.upload = (boardType, port) => {
             + codePath
             + '\" --no-color';
     }
-    ArduShell.runCmd(layerNum, 'upload', cmdStr, code, () => {
+    ArduShell.runCmd('upload', cmdStr, code, () => {
         if (!Serial.portIsLegal(port)) {
             return;
         }
@@ -480,7 +459,7 @@ ArduShell.writeLibFiles = (inPath) => {
 * @param cmd {String} 输入的cmd命令
 * @return void
 */
-ArduShell.runCmd = (layerNum, type, cmd, code, sucFunc) => {
+ArduShell.runCmd = (type, cmd, code, sucFunc) => {
     const { mainStatusBarTabs } = Mixly;
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
     const testArduinoDirPath = path.join(Env.clientPath, 'testArduino');
@@ -500,7 +479,7 @@ ArduShell.runCmd = (layerNum, type, cmd, code, sucFunc) => {
         return ArduShell.shell.exec(cmd);
     })
     .then((info) => {
-        layer.close(layerNum);
+        ArduShell.progressLayer.hide();
         let message = '';
         if (info.code) {
             message = (type === 'compile' ? Msg.Lang['shell.compileFailed'] : Msg.Lang['shell.uploadFailed']);
@@ -513,8 +492,8 @@ ArduShell.runCmd = (layerNum, type, cmd, code, sucFunc) => {
         layer.msg(message, { time: 1000 });
     })
     .catch((error) => {
-        layer.close(layerNum);
+        ArduShell.progressLayer.hide();
-        console.log(error);
+        Debug.error(error);
     })
     .finally(() => {
         statusBarTerminal.scrollToBottom();
@@ -530,74 +509,56 @@ ArduShell.writeFile = function (readPath, writePath) {
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
     ArduShell.compile(function () {
         window.setTimeout(function () {
-            const layerNum = layer.open({
+            ArduShell.progressLayer.title(`${Msg.Lang['shell.saving']}...`);
-                type: 1,
+            ArduShell.progressLayer.show();
-                title: Msg.Lang['shell.saving'] + '...',
+            window.setTimeout(function () {
-                content: $('#mixly-loader-div'),
+                try {
-                shade: LayerExt.SHADE_ALL,
+                    readPath = readPath.replace(/\\/g, "/");
-                resize: false,
+                    writePath = writePath.replace(/\\/g, "/");
-                closeBtn: 0,
+                } catch (error) {
-                success: function () {
+                    Debug.error(error);
-                    $(".layui-layer-page").css("z-index", "198910151");
-                    $("#mixly-loader-btn").off("click").click(() => {
-                        layer.close(layerNum);
-                        ArduShell.cancel();
-                    });
-                    window.setTimeout(function () {
-                        try {
-                            readPath = readPath.replace(/\\/g, "/");
-                            writePath = writePath.replace(/\\/g, "/");
-                        } catch (e) {
-                            console.log(e);
-                        }
-                        try {
-                            let writeDirPath = writePath.substring(0, writePath.lastIndexOf("."));
-                            let writeFileName = writePath.substring(writePath.lastIndexOf("/") + 1, writePath.lastIndexOf("."));
-                            let writeFileType = writePath.substring(writePath.lastIndexOf(".") + 1);
-                            if (!fs.existsSync(writeDirPath)) {
-                                fs.mkdirSync(writeDirPath);
-                            }
-                            if (fs.existsSync(writePath)) {
-                                fs.unlinkSync(writePath);
-                            }
-                            let readBinFilePath = readPath + "/testArduino.ino." + writeFileType;
-                            let binFileData = fs.readFileSync(readBinFilePath);
-                            fs.writeFileSync(writePath, binFileData);
-                            let binFileType = [
-                                ".eep",
-                                ".hex",
-                                ".with_bootloader.bin",
-                                ".with_bootloader.hex",
-                                ".bin",
-                                ".elf",
-                                ".map",
-                                ".partitions.bin",
-                                ".bootloader.bin"
-                            ]
-                            for (let i = 0; i < binFileType.length; i++) {
-                                let readFilePath = readPath + "/testArduino.ino" + binFileType[i];
-                                let writeFilePath = writeDirPath + "/" + writeFileName + binFileType[i];
-                                if (fs.existsSync(readFilePath)) {
-                                    let binData = fs.readFileSync(readFilePath);
-                                    fs.writeFileSync(writeFilePath, binData);
-                                }
-                            }
-                            layer.msg(Msg.Lang['shell.saveSucc'], {
-                                time: 1000
-                            });
-                        } catch (e) {
-                            console.log(e);
-                            statusBarTerminal.addValue(e + "\n");
-                        }
-                        layer.close(layerNum);
-                    }, 500);
-                },
-                end: function () {
-                    $('#mixly-loader-div').css('display', 'none');
-                    $("layui-layer-shade" + layerNum).remove();
-                    $("#mixly-loader-btn").off("click");
                 }
-            });
+                try {
+                    let writeDirPath = writePath.substring(0, writePath.lastIndexOf("."));
+                    let writeFileName = writePath.substring(writePath.lastIndexOf("/") + 1, writePath.lastIndexOf("."));
+                    let writeFileType = writePath.substring(writePath.lastIndexOf(".") + 1);
+                    if (!fs.existsSync(writeDirPath)) {
+                        fs.mkdirSync(writeDirPath);
+                    }
+                    if (fs.existsSync(writePath)) {
+                        fs.unlinkSync(writePath);
+                    }
+                    let readBinFilePath = readPath + "/testArduino.ino." + writeFileType;
+                    let binFileData = fs.readFileSync(readBinFilePath);
+                    fs.writeFileSync(writePath, binFileData);
+                    let binFileType = [
+                        ".eep",
+                        ".hex",
+                        ".with_bootloader.bin",
+                        ".with_bootloader.hex",
+                        ".bin",
+                        ".elf",
+                        ".map",
+                        ".partitions.bin",
+                        ".bootloader.bin"
+                    ]
+                    for (let i = 0; i < binFileType.length; i++) {
+                        let readFilePath = readPath + "/testArduino.ino" + binFileType[i];
+                        let writeFilePath = writeDirPath + "/" + writeFileName + binFileType[i];
+                        if (fs.existsSync(readFilePath)) {
+                            let binData = fs.readFileSync(readFilePath);
+                            fs.writeFileSync(writeFilePath, binData);
+                        }
+                    }
+                    layer.msg(Msg.Lang['shell.saveSucc'], {
+                        time: 1000
+                    });
+                } catch (error) {
+                    Debug.error(error);
+                    statusBarTerminal.addValue(e + "\n");
+                }
+                ArduShell.progressLayer.hide();
+            }, 500);
         }, 1000);
     });
 }

common/modules/mixly-modules/electron/burn-upload.js

@@ -11,6 +11,7 @@ goog.require('Mixly.Workspace');
 goog.require('Mixly.Debug');
 goog.require('Mixly.HTMLTemplate');
 goog.require('Mixly.LayerFirmware');
+goog.require('Mixly.LayerProgress');
 goog.require('Mixly.Electron.Serial');
 goog.provide('Mixly.Electron.BU');
 
@@ -26,7 +27,8 @@ const {
     Serial,
     Debug,
     HTMLTemplate,
-    LayerFirmware
+    LayerFirmware,
+    LayerProgress
 } = Mixly;
 
 const { BU } = Electron;
@@ -66,6 +68,22 @@ BU.firmwareLayer.bind('burn', (info) => {
     const port = Serial.getSelectedPortName();
     BU.burnWithPort(port, info);
 });
+BU.killing = false;
+BU.progressLayer = new LayerProgress({
+    width: 200,
+    cancelValue: Msg.Lang['nav.btn.stop'],
+    skin: 'layui-anim layui-anim-scale',
+    cancel: () => {
+        if (BU.killing) {
+            return false;
+        }
+        BU.progressLayer.title(`${Msg.Lang['shell.aborting']}...`);
+        BU.killing = true;
+        BU.cancel();
+        return false;
+    },
+    cancelDisplay: false
+});
 
 /**
  * @function 根据传入的stdout判断磁盘数量并选择对应操作
@@ -173,11 +191,10 @@ BU.checkNumOfDisks = function (type, stdout, startPath) {
 /**
  * @function 将文件或文件夹下所有文件拷贝到指定文件夹
  * @param type {string} 值为'burn' | 'upload'
- * @param layerNum {number} 烧录或上传加载弹窗的编号，用于关闭此弹窗
  * @param startPath {string} 需要拷贝的文件或文件夹的路径
  * @param desPath {string} 文件的目的路径
  **/
-BU.copyFiles = (type, layerNum, startPath, desPath) => {
+BU.copyFiles = async (type, startPath, desPath) => {
     const { mainStatusBarTabs } = Mixly;
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
     const { burn, upload } = SELECTED_BOARD;
@@ -193,9 +210,9 @@ BU.copyFiles = (type, layerNum, startPath, desPath) => {
     if (fs_plus.isFileSync(startPath)) {
         desPath = path.join(desPath, path.basename(startPath));
     }
-    fs_extra.copy(startPath, desPath)
+    try {
-    .then(() => {
+        await fs_extra.copy(startPath, desPath);
-        layer.close(layerNum);
+        BU.progressLayer.hide();
         const message = (type === 'burn'? Msg.Lang['shell.burnSucc'] : Msg.Lang['shell.uploadSucc']);
         layer.msg(message, {
             time: 1000
@@ -210,16 +227,14 @@ BU.copyFiles = (type, layerNum, startPath, desPath) => {
             const statusBarSerial = mainStatusBarTabs.getStatusBarById(port);
             statusBarSerial.open();
         }
-    })
+    } catch (error) {
-    .catch((error) => {
+        Debug.error(error);
-        layer.close(layerNum);
+        BU.progressLayer.hide();
         statusBarTerminal.setValue(error + '\n');
         console.log(error);
-    })
+    }
-    .finally(() => {
+    BU.burning = false;
-        BU.burning = false;
+    BU.uploading = false;
-        BU.uploading = false;
-    });
 }
 
 /**
@@ -231,43 +246,32 @@ BU.copyFiles = (type, layerNum, startPath, desPath) => {
 BU.initWithDropdownBox = function (type, startPath) {
     const { mainStatusBarTabs } = Mixly;
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
-    const layerNum = layer.open({
+    const message = (type === 'burn'? Msg.Lang['shell.burning'] : Msg.Lang['shell.uploading']);
-        type: 1,
+    BU.progressLayer.title(`${message}...`);
-        title: (type === 'burn'? Msg.Lang['shell.burning'] : Msg.Lang['shell.uploading']) + '...',
+    const desPath = $('#mixly-selector-type option:selected').val();
-        content: $('#mixly-loader-div'),
+    if (type === 'burn') {
-        shade: LayerExt.SHADE_ALL,
+        BU.copyFiles(type, startPath, desPath)
-        resize: false,
+            .catch((error) => {
-        closeBtn: 0,
+                BU.progressLayer.hide();
-        success: function (layero, index) {
+                BU.burning = false;
-            $(".layui-layer-page").css("z-index","198910151");
+                BU.uploading = false;
-            $("#mixly-loader-btn").off("click").click(() => {
+                statusBarTerminal.setValue(error + '\n');
-                layer.close(index);
-                BU.cancel();
             });
-            const desPath = $('#mixly-selector-type option:selected').val();
+    } else {
-            if (type === 'burn') {
+        const mainWorkspace = Workspace.getMain();
-                BU.copyFiles(type, index, startPath, desPath);
+        const editor = mainWorkspace.getEditorsManager().getActive();
-            } else {
+        const code = editor.getCode();
-                const mainWorkspace = Workspace.getMain();
+        fs_extra.outputFile(startPath, code)
-                const editor = mainWorkspace.getEditorsManager().getActive();
+            .then(() => {
-                const code = editor.getCode();
+                return BU.copyFiles(type, startPath, desPath);
-                fs_extra.outputFile(startPath, code)
+            })
-                .then(() => {
+            .catch((error) => {
-                    BU.copyFiles(type, index, startPath, desPath);
+                BU.progressLayer.hide();
-                })
+                BU.burning = false;
-                .catch((error) => {
+                BU.uploading = false;
-                    layer.close(index);
+                statusBarTerminal.setValue(error + '\n');
-                    BU.burning = false;
+            });
-                    BU.uploading = false;
+    }
-                    statusBarTerminal.setValue(error + '\n');
-                });
-            }
-        },
-        end: function () {
-            $('#mixly-loader-div').css('display', 'none');
-            $(`#layui-layer-shade${layerNum}`).remove();
-        }
-    });
 }
 
 /**
@@ -506,26 +510,24 @@ BU.searchLibs = function (dirPath, code, libArr) {
 
 /**
 * @function 通过cmd烧录
- * @param layerNum {number} 烧录或上传加载弹窗的编号，用于关闭此弹窗
 * @param port {string} 所选择的串口
 * @param command {string} 需要执行的指令
 * @return {void}
 */
-BU.burnByCmd = function (layerNum, port, command) {
+BU.burnByCmd = function (port, command) {
     const { mainStatusBarTabs } = Mixly;
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
     statusBarTerminal.setValue(Msg.Lang['shell.burning'] + '...\n');
-    BU.runCmd(layerNum, 'burn', port, command);
+    BU.runCmd('burn', port, command);
 }
 
 /**
 * @function 通过cmd上传
-* @param layerNum {number} 烧录或上传加载弹窗的编号，用于关闭此弹窗
 * @param port {string} 所选择的串口
 * @param command {string} 需要执行的指令
 * @return {void}
 */
-BU.uploadByCmd = async function (layerNum, port, command) {
+BU.uploadByCmd = async function (port, command) {
     const { mainStatusBarTabs } = Mixly;
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
     statusBarTerminal.setValue(Msg.Lang['shell.uploading'] + '...\n');
@@ -539,27 +541,26 @@ BU.uploadByCmd = async function (layerNum, port, command) {
         BU.copyLib(upload.filePath, '');
     }
     fs_extra.outputFile(upload.filePath, code)
-    .then(() => {
+        .then(() => {
-        BU.runCmd(layerNum, 'upload', port, command);
+            BU.runCmd('upload', port, command);
-    })
+        })
-    .catch((error) => {
+        .catch((error) => {
-        statusBarTerminal.setValue(error.toString() + '\n');
+            BU.progressLayer.hide();
-        console.log(error);
+            statusBarTerminal.setValue(error.toString() + '\n');
-        layer.close(layerNum);
+            Debug.error(error);
-        BU.uploading = false;
+            BU.uploading = false;
-    });
+        });
 }
 
 /**
 * @function 运行cmd
-* @param layerNum {number} 烧录或上传加载弹窗的编号，用于关闭此弹窗
 * @param type {string} 值为 'burn' | 'upload'
 * @param port {string} 所选择的串口
 * @param command {string} 需要执行的指令
 * @param sucFunc {function} 指令成功执行后所要执行的操作
 * @return {void}
 */
-BU.runCmd = function (layerNum, type, port, command, sucFunc) {
+BU.runCmd = function (type, port, command, sucFunc) {
     const { mainStatusBarTabs } = Mixly;
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
     mainStatusBarTabs.changeTo('output');
@@ -567,7 +568,7 @@ BU.runCmd = function (layerNum, type, port, command, sucFunc) {
     let nowCommand = MString.tpl(command, { com: port });
 
     BU.shell = child_process.exec(nowCommand, { encoding: 'binary' }, function (error, stdout, stderr) {
-        layer.close(layerNum);
+        BU.progressLayer.hide();
         BU.burning = false;
         BU.uploading = false;
         BU.shell = null;
@@ -605,7 +606,7 @@ BU.runCmd = function (layerNum, type, port, command, sucFunc) {
                 statusBarSerial.open().catch(Debug.error);
             }
         }
-    })
+    });
 
     BU.shell.stdout.on('data', function (data) {
         if (BU.uploading || BU.burning) {
@@ -656,48 +657,23 @@ BU.operateWithPort = (type, port, command) => {
         return;
     }
     const title = (type === 'burn' ? Msg.Lang['shell.burning'] : Msg.Lang['shell.uploading']) + '...';
-    const operate = () => {
+    BU.progressLayer.title(title);
-        const layerNum = layer.open({
+    BU.progressLayer.show();
-            type: 1,
-            title,
-            content: $('#mixly-loader-div'),
-            shade: LayerExt.SHADE_NAV,
-            resize: false,
-            closeBtn: 0,
-            success: function (layero, index) {
-                $(".layui-layer-page").css("z-index","198910151");
-                switch (type) {
-                    case 'burn':
-                        BU.burnByCmd(index, port, command);
-                        break;
-                    case 'upload':
-                    default:
-                        BU.uploadByCmd(index, port, command);
-                }
-                $("#mixly-loader-btn").off("click").click(() => {
-                    $("#mixly-loader-btn").css('display', 'none');
-                    layer.title(Msg.Lang['shell.aborting'] + '...', index);
-                    BU.cancel(type);
-                });
-            },
-            end: function () {
-                $('#mixly-loader-div').css('display', 'none');
-                $("layui-layer-shade" + layerNum).remove();
-                $("#mixly-loader-btn").off("click");
-                $("#mixly-loader-btn").css('display', 'inline-block');
-            }
-        });
-    }
     const { mainStatusBarTabs } = Mixly;
     const statusBarSerial = mainStatusBarTabs.getStatusBarById(port);
+    let serialClosePromise = null;
     if (statusBarSerial) {
-        statusBarSerial.close()
+        serialClosePromise = statusBarSerial.close();
-        .finally(() => {
-            operate();
-        });
     } else {
-        operate();
+        serialClosePromise = Promise.resolve();
     }
+    serialClosePromise.finally(() => {
+        if (type === 'burn') {
+            BU.burnByCmd(port, command);
+        } else {
+            BU.uploadByCmd(port, command);
+        }
+    });
 }
 
 /**

common/modules/mixly-modules/web/burn-upload.js

@@ -20,6 +20,7 @@ goog.require('Mixly.Debug');
 goog.require('Mixly.HTMLTemplate');
 goog.require('Mixly.MString');
 goog.require('Mixly.LayerFirmware');
+goog.require('Mixly.LayerProgress');
 goog.require('Mixly.Web.Serial');
 goog.require('Mixly.Web.Ampy');
 goog.provide('Mixly.Web.BU');
@@ -36,7 +37,8 @@ const {
     Debug,
     HTMLTemplate,
     MString,
-    LayerFirmware
+    LayerFirmware,
+    LayerProgress
 } = Mixly;
 
 const {
@@ -71,6 +73,13 @@ BU.firmwareLayer.bind('burn', (info) => {
         BU.burnWithEsptool(info, web.burn.erase);
     }
 });
+BU.progressLayer = new LayerProgress({
+    width: 200,
+    cancelValue: false,
+    skin: 'layui-anim layui-anim-scale',
+    cancel: false,
+    cancelDisplay: false
+});
 
 const BAUD = goog.platform() === 'darwin' ? 460800 : 921600;
 
@@ -132,9 +141,9 @@ const readBinFileAsArrayBuffer = (path, offset) => {
     });
 }
 
-BU.initBurn = () => {
+BU.initBurn = async () => {
     if (['BBC micro:bit', 'Mithon CC'].includes(BOARD.boardType)) {
-        BU.burnByUSB();
+        await BU.burnByUSB();
     } else {
         const { web } = SELECTED_BOARD;
         const boardKey = Boards.getSelectedBoardKey();
@@ -148,9 +157,9 @@ BU.initBurn = () => {
             BU.burnWithSpecialBin();
         } else {
             if (boardKey.indexOf('micropython:esp32s2') !== -1) {
-                BU.burnWithAdafruitEsptool(web.burn.binFile, web.burn.erase);
+                await BU.burnWithAdafruitEsptool(web.burn.binFile, web.burn.erase);
             } else {
-                BU.burnWithEsptool(web.burn.binFile, web.burn.erase);
+                await BU.burnWithEsptool(web.burn.binFile, web.burn.erase);
             }
         }
     }
@@ -214,36 +223,23 @@ BU.burnByUSB = async () => {
         const rightStr = (new Array(50 - nowProgressLen).fill('-')).join('');
         statusBarTerminal.addValue(`[${leftStr}${rightStr}] ${nowPercent}%\n`);
     });
-    layer.open({
+    BU.progressLayer.title(`${Msg.Lang['shell.burning']}...`);
-        type: 1,
+    BU.progressLayer.show();
-        title: `${Msg.Lang['shell.burning']}...`,
+    try {
-        content: $('#mixly-loader-div'),
+        await dapLink.flash(buffer);
-        shade: LayerExt.SHADE_NAV,
+        BU.progressLayer.hide();
-        resize: false,
+        layer.msg(Msg.Lang['shell.burnSucc'], { time: 1000 });
-        closeBtn: 0,
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.burnSucc']}==\n`);
-        success: async (layero, index) => {
+    } catch (error) {
-            $('#mixly-loader-btn').hide();
+        Debug.error(error);
-            try {
+        BU.progressLayer.hide();
-                await dapLink.flash(buffer);
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.burnFailed']}==\n`);
-                layer.close(index);
+    } finally {
-                layer.msg(Msg.Lang['shell.burnSucc'], { time: 1000 });
+        dapLink.removeAllListeners(DAPjs.DAPLink.EVENT_PROGRESS);
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.burnSucc']}==\n`);
+        await dapLink.disconnect();
-            } catch (error) {
+        await webUSB.close();
-                Debug.error(error);
+        await port.close();
-                layer.close(index);
+    }
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.burnFailed']}==\n`);
-            } finally {
-                dapLink.removeAllListeners(DAPjs.DAPLink.EVENT_PROGRESS);
-                await dapLink.disconnect();
-                await webUSB.close();
-                await port.close();
-            }
-        },
-        end: function () {
-            $('#mixly-loader-btn').css('display', 'inline-block');
-            $('#mixly-loader-div').css('display', 'none');
-        }
-    });
 }
 
 BU.burnWithEsptool = async (binFile, erase) => {
@@ -274,6 +270,8 @@ BU.burnWithEsptool = async (binFile, erase) => {
     statusBarTerminal.setValue(Msg.Lang['shell.burning'] + '...\n');
     mainStatusBarTabs.show();
     mainStatusBarTabs.changeTo('output');
+    BU.progressLayer.title(`${Msg.Lang['shell.burning']}...`);
+    BU.progressLayer.show();
     let esploader = null;
     let transport = null;
     try {
@@ -298,6 +296,7 @@ BU.burnWithEsptool = async (binFile, erase) => {
         Debug.error(error);
         statusBarTerminal.addValue(`\n${error.toString()}\n`);
         await transport.disconnect();
+        BU.progressLayer.hide();
         return;
     }
 
@@ -319,6 +318,7 @@ BU.burnWithEsptool = async (binFile, erase) => {
         statusBarTerminal.addValue("Failed!\n" + Msg.Lang['shell.bin.readFailed'] + "！\n");
         statusBarTerminal.addValue("\n" + e + "\n", true);
         await transport.disconnect();
+        BU.progressLayer.hide();
         return;
     }
     statusBarTerminal.addValue("Done!\n");
@@ -331,39 +331,18 @@ BU.burnWithEsptool = async (binFile, erase) => {
         compress: true,
         calculateMD5Hash: (image) => CryptoJS.MD5(CryptoJS.enc.Latin1.parse(image))
     };
-    layer.open({
+    try {
-        type: 1,
+        await esploader.writeFlash(flashOptions);
-        title: Msg.Lang['shell.burning'] + '...',
+        BU.progressLayer.hide();
-        content: $('#mixly-loader-div'),
+        layer.msg(Msg.Lang['shell.burnSucc'], { time: 1000 });
-        shade: LayerExt.SHADE_NAV,
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.burnSucc']}==\n`);
-        resize: false,
+    } catch (error) {
-        closeBtn: 0,
+        Debug.error(error);
-        success: async function (layero, index) {
+        BU.progressLayer.hide();
-            let cancel = false;
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.burnFailed']}==\n`);
-            $("#mixly-loader-btn").off().click(async () => {
+    } finally {
-                cancel = true;
+        await transport.disconnect();
-                try {
+    }
-                    await transport.disconnect();
-                } catch (error) {
-                    layer.close(index);
-                    Debug.error(error);
-                }
-            });
-            try {
-                await esploader.writeFlash(flashOptions);
-                layer.msg(Msg.Lang['shell.burnSucc'], { time: 1000 });
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.burnSucc']}==\n`);
-            } catch (error) {
-                Debug.error(error);
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.burnFailed']}==\n`);
-            } finally {
-                layer.close(index);
-                if (!cancel) {
-                    await transport.disconnect();
-                }
-            }
-        }
-    });
 }
 
 BU.burnWithAdafruitEsptool = async (binFile, erase) => {
@@ -394,6 +373,8 @@ BU.burnWithAdafruitEsptool = async (binFile, erase) => {
     statusBarTerminal.setValue(Msg.Lang['shell.burning'] + '...\n');
     mainStatusBarTabs.show();
     mainStatusBarTabs.changeTo('output');
+    BU.progressLayer.title(`${Msg.Lang['shell.burning']}...`);
+    BU.progressLayer.show();
     let esploader = null;
     let transport = null;
     let espStub = null;
@@ -416,6 +397,7 @@ BU.burnWithAdafruitEsptool = async (binFile, erase) => {
         Debug.error(error);
         statusBarTerminal.addValue(`\n${error.toString()}\n`);
         await port.close();
+        BU.progressLayer.hide();
         return;
     }
 
@@ -438,55 +420,37 @@ BU.burnWithAdafruitEsptool = async (binFile, erase) => {
         statusBarTerminal.addValue("\n" + e + "\n", true);
         await espStub.disconnect();
         await espStub.port.close();
+        BU.progressLayer.hide();
         return;
     }
     statusBarTerminal.addValue("Done!\n");
     BU.burning = true;
     BU.uploading = false;
-    const layerNum = layer.open({
+    try {
-        type: 1,
+        if (erase) {
-        title: Msg.Lang['shell.burning'] + '...',
+            await espStub.eraseFlash();
-        content: $('#mixly-loader-div'),
-        shade: LayerExt.SHADE_NAV,
-        resize: false,
-        closeBtn: 0,
-        success: async function (layero, index) {
-            let cancel = false;
-            $("#mixly-loader-btn").hide();
-            try {
-                if (erase) {
-                    await espStub.eraseFlash();
-                }
-                for (let file of data) {
-                    await espStub.flashData(
-                        file.data,
-                        (bytesWritten, totalBytes) => {
-                            const percent = Math.floor((bytesWritten / totalBytes) * 100) + '%';
-                            statusBarTerminal.addValue(`Writing at 0x${(file.address + bytesWritten).toString(16)}... (${percent})\n`);
-                        },
-                        file.address, true
-                    );
-                }
-                await espStub.disconnect();
-                await espStub.port.close();
-                cancel = true;
-                layer.msg(Msg.Lang['shell.burnSucc'], { time: 1000 });
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.burnSucc']}==\n`);
-            } catch (error) {
-                Debug.error(error);
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.burnFailed']}==\n`);
-            } finally {
-                layer.close(index);
-                if (!cancel) {
-                    await espStub.disconnect();
-                    await espStub.port.close();
-                }
-            }
-        },
-        end: function () {
-            $(`#layui-layer-shade${layerNum}`).remove();
         }
-    });
+        for (let file of data) {
+            await espStub.flashData(
+                file.data,
+                (bytesWritten, totalBytes) => {
+                    const percent = Math.floor((bytesWritten / totalBytes) * 100) + '%';
+                    statusBarTerminal.addValue(`Writing at 0x${(file.address + bytesWritten).toString(16)}... (${percent})\n`);
+                },
+                file.address, true
+            );
+        }
+        BU.progressLayer.hide();
+        layer.msg(Msg.Lang['shell.burnSucc'], { time: 1000 });
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.burnSucc']}==\n`);
+    } catch (error) {
+        Debug.error(error);
+        BU.progressLayer.hide();
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.burnFailed']}==\n`);
+    } finally {
+        await espStub.disconnect();
+        await espStub.port.close();
+    }
 }
 
 BU.getImportModulesName = (code) => {
@@ -562,9 +526,9 @@ BU.initUpload = async () => {
         }
     }
     if (['BBC micro:bit', 'Mithon CC'].includes(BOARD.boardType)) {
-        BU.uploadByUSB(portName);
+        await BU.uploadByUSB(portName);
     } else {
-        BU.uploadWithAmpy(portName);
+        await BU.uploadWithAmpy(portName);
     }
 }
 
@@ -618,58 +582,42 @@ BU.uploadByUSB = async (portName) => {
         const data = goog.readFileSync(importsMap[key]['__path__']);
         FSWrapper.writeFile(filename, data);
     }
-    const layerNum = layer.open({
+    BU.progressLayer.title(`${Msg.Lang['shell.uploading']}...`);
-        type: 1,
+    BU.progressLayer.show();
-        title: Msg.Lang['shell.uploading'] + '...',
+    try {
-        content: $('#mixly-loader-div'),
+        let prevPercent = 0;
-        shade: LayerExt.SHADE_NAV,
+        await partialFlashing.flashAsync(new BoardId(0x9900), FSWrapper, progress => {
-        resize: false,
+            const nowPercent = Math.floor(progress * 100);
-        closeBtn: 0,
+            if (nowPercent > prevPercent) {
-        success: async function (layero, index) {
+                prevPercent = nowPercent;
-            $('#mixly-loader-btn').hide();
+            } else {
-            try {
+                return;
-                let prevPercent = 0;
-                await partialFlashing.flashAsync(new BoardId(0x9900), FSWrapper, progress => {
-                    const nowPercent = Math.floor(progress * 100);
-                    if (nowPercent > prevPercent) {
-                        prevPercent = nowPercent;
-                    } else {
-                        return;
-                    }
-                    const nowProgressLen = Math.floor(nowPercent / 2);
-                    const leftStr = new Array(nowProgressLen).fill('=').join('');
-                    const rightStr = (new Array(50 - nowProgressLen).fill('-')).join('');
-                    statusBarTerminal.addValue(`[${leftStr}${rightStr}] ${nowPercent}%\n`);
-                });
-                layer.close(index);
-                layer.msg(Msg.Lang['shell.uploadSucc'], { time: 1000 });
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.uploadSucc']}==\n`);
-                if (!statusBarSerial) {
-                    mainStatusBarTabs.add('serial', portName);
-                    statusBarSerial = mainStatusBarTabs.getStatusBarById(portName);
-                }
-                statusBarSerial.setValue('');
-                mainStatusBarTabs.changeTo(portName);
-                await statusBarSerial.open();
-            } catch (error) {
-                await dapWrapper.disconnectAsync();
-                layer.close(index);
-                console.error(error);
-                statusBarTerminal.addValue(`${error}\n`);
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.uploadFailed']}==\n`);
             }
-            BU.burning = false;
+            const nowProgressLen = Math.floor(nowPercent / 2);
-            BU.uploading = false;
+            const leftStr = new Array(nowProgressLen).fill('=').join('');
-        },
+            const rightStr = (new Array(50 - nowProgressLen).fill('-')).join('');
-        end: function () {
+            statusBarTerminal.addValue(`[${leftStr}${rightStr}] ${nowPercent}%\n`);
-            $('#mixly-loader-btn').css('display', 'inline-block');
+        });
-            $('#mixly-loader-div').css('display', 'none');
+        BU.progressLayer.hide();
-            $(`#layui-layer-shade${layerNum}`).remove();
+        layer.msg(Msg.Lang['shell.uploadSucc'], { time: 1000 });
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.uploadSucc']}==\n`);
+        if (!statusBarSerial) {
+            mainStatusBarTabs.add('serial', portName);
+            statusBarSerial = mainStatusBarTabs.getStatusBarById(portName);
         }
-    });
+        statusBarSerial.setValue('');
+        mainStatusBarTabs.changeTo(portName);
+        await statusBarSerial.open();
+    } catch (error) {
+        await dapWrapper.disconnectAsync();
+        Debug.error(error);
+        BU.progressLayer.hide();
+        statusBarTerminal.addValue(`${error}\n`);
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.uploadFailed']}==\n`);
+    }
 }
 
-BU.uploadWithAmpy = (portName) => {
+BU.uploadWithAmpy = async (portName) => {
     const { mainStatusBarTabs } = Mixly;
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
     let statusBarSerial = mainStatusBarTabs.getStatusBarById(portName);
@@ -681,83 +629,67 @@ BU.uploadWithAmpy = (portName) => {
     const mainWorkspace = Workspace.getMain();
     const editor = mainWorkspace.getEditorsManager().getActive();
     const port = Serial.getPort(portName);
-    const layerNum = layer.open({
+    BU.progressLayer.title(`${Msg.Lang['shell.uploading']}...`);
-        type: 1,
+    BU.progressLayer.show();
-        title: Msg.Lang['shell.uploading'] + '...',
+    const serial = new Serial(portName);
-        content: $('#mixly-loader-div'),
+    const ampy = new Ampy(serial);
-        shade: LayerExt.SHADE_NAV,
+    const code = editor.getCode();
-        resize: false,
+    let closePromise = Promise.resolve();
-        closeBtn: 0,
+    if (statusBarSerial) {
-        success: async function (layero, index) {
+        closePromise = statusBarSerial.close();
-            $('#mixly-loader-btn').hide();
+    }
-            const serial = new Serial(portName);
+    try {
-            const ampy = new Ampy(serial);
+        /*const importsMap = BU.getImportModules(code);
-            const code = editor.getCode();
+        let libraries = {};
-            let closePromise = Promise.resolve();
+        for (let key in importsMap) {
-            if (statusBarSerial) {
+            const filename = importsMap[key]['__name__'];
-                closePromise = statusBarSerial.close();
+            const data = goog.readFileSync(importsMap[key]['__path__']);
-            }
+            libraries[filename] = {
-            try {
+                data,
-                /*const importsMap = BU.getImportModules(code);
+                size: importsMap[key]['__size__']
-                let libraries = {};
+            };
-                for (let key in importsMap) {
+        }*/
-                    const filename = importsMap[key]['__name__'];
+        await closePromise;
-                    const data = goog.readFileSync(importsMap[key]['__path__']);
+        await ampy.enter();
-                    libraries[filename] = {
+        statusBarTerminal.addValue('Writing main.py ');
-                        data,
+        await ampy.put('main.py', code);
-                        size: importsMap[key]['__size__']
+        statusBarTerminal.addValue('Done!\n');
-                    };
+        /*const cwd = await ampy.cwd();
-                }*/
+        const rootInfo = await ampy.ls(cwd);
-                await closePromise;
+        let rootMap = {};
-                await ampy.enter();
+        for (let item of rootInfo) {
-                statusBarTerminal.addValue('Writing main.py ');
+            rootMap[item[0]] = item[1];
-                await ampy.put('main.py', code);
-                statusBarTerminal.addValue('Done!\n');
-                /*const cwd = await ampy.cwd();
-                const rootInfo = await ampy.ls(cwd);
-                let rootMap = {};
-                for (let item of rootInfo) {
-                    rootMap[item[0]] = item[1];
-                }
-                if (libraries && libraries instanceof Object) {
-                    for (let key in libraries) {
-                        if (rootMap[`${cwd}/${key}`] !== undefined && rootMap[`${cwd}/${key}`] === libraries[key].size) {
-                            statusBarTerminal.addValue(`Skip ${key}\n`);
-                            continue;
-                        }
-                        statusBarTerminal.addValue(`Writing ${key} `);
-                        await ampy.put(key, libraries[key].data);
-                        statusBarTerminal.addValue('Done!\n');
-                    }
-                }*/
-                await ampy.exit();
-                await ampy.dispose();
-                layer.close(index);
-                layer.msg(Msg.Lang['shell.uploadSucc'], { time: 1000 });
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.uploadSucc']}==\n`);
-                if (!statusBarSerial) {
-                    mainStatusBarTabs.add('serial', portName);
-                    statusBarSerial = mainStatusBarTabs.getStatusBarById(portName);
-                }
-                statusBarSerial.setValue('');
-                mainStatusBarTabs.changeTo(portName);
-                await statusBarSerial.open();
-            } catch (error) {
-                ampy.dispose();
-                layer.close(index);
-                Debug.error(error);
-                statusBarTerminal.addValue(`${error}\n`);
-                statusBarTerminal.addValue(`==${Msg.Lang['shell.uploadFailed']}==\n`);
-            }
-            BU.burning = false;
-            BU.uploading = false;
-        },
-        end: function () {
-            $('#mixly-loader-btn').css('display', 'inline-block');
-            $('#mixly-loader-div').css('display', 'none');
-            $(`#layui-layer-shade${layerNum}`).remove();
         }
-    });
+        if (libraries && libraries instanceof Object) {
+            for (let key in libraries) {
+                if (rootMap[`${cwd}/${key}`] !== undefined && rootMap[`${cwd}/${key}`] === libraries[key].size) {
+                    statusBarTerminal.addValue(`Skip ${key}\n`);
+                    continue;
+                }
+                statusBarTerminal.addValue(`Writing ${key} `);
+                await ampy.put(key, libraries[key].data);
+                statusBarTerminal.addValue('Done!\n');
+            }
+        }*/
+        await ampy.exit();
+        await ampy.dispose();
+        BU.progressLayer.hide();
+        layer.msg(Msg.Lang['shell.uploadSucc'], { time: 1000 });
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.uploadSucc']}==\n`);
+        if (!statusBarSerial) {
+            mainStatusBarTabs.add('serial', portName);
+            statusBarSerial = mainStatusBarTabs.getStatusBarById(portName);
+        }
+        statusBarSerial.setValue('');
+        mainStatusBarTabs.changeTo(portName);
+        await statusBarSerial.open();
+    } catch (error) {
+        ampy.dispose();
+        BU.progressLayer.hide();
+        Debug.error(error);
+        statusBarTerminal.addValue(`${error}\n`);
+        statusBarTerminal.addValue(`==${Msg.Lang['shell.uploadFailed']}==\n`);
+    }
 }
 
 function hexToBuf (hex) {

common/templates/html/footerbar.html

@@ -1,5 +1,6 @@
 <style>
     div[m-id="{{d.mId}}"] {
+        font-family: "Lato", "Noto Sans SC";
         width: 100%;
         height: 100%;
         display: flex;