chore(core): 调整新建文件时的弹出层样式

2025-11-18 01:33:37 +08:00
parent 848cee1b90
commit df1719e5e0
12 changed files with 164 additions and 57 deletions
--- a/common/modules/mixly-modules/common/layer-new-file.js
+++ b/common/modules/mixly-modules/common/layer-new-file.js
@@ -0,0 +1,76 @@
+goog.loadJs('common', () => {
+
+goog.require('Mixly.Env');
+goog.require('Mixly.Msg');
+goog.require('Mixly.Layer');
+goog.require('Mixly.HTMLTemplate');
+goog.provide('Mixly.LayerNewFile');
+
+const {
+    Env,
+    Msg,
+    Layer,
+    HTMLTemplate
+} = Mixly;
+
+
+class LayerNewFile extends Layer {
+    static {
+        HTMLTemplate.add(
+            'html/dialog/new-file.html',
+            new HTMLTemplate(goog.readFileSync(path.join(Env.templatePath, 'html/dialog/new-file.html')))
+        );
+    }
+
+    #dialog_ = null;
+    #$dialogContent_ = null;
+    #$cancel_ = null;
+    #$ok_ = null;
+
+    constructor(config = {}, shadowType = 'all') {
+        const $dialogContent_ = $(HTMLTemplate.get('html/dialog/new-file.html').render({
+            message: Msg.Lang['file.emptyInfo'],
+            cancel: Msg.Lang['nav.btn.cancel'],
+            ok: Msg.Lang['nav.btn.ok']
+        }));
+        config.title = Msg.Lang['nav.btn.file.new'];
+        config.cancelValue = Msg.Lang['nav.btn.cancel'];
+        config.cancel = () => {
+            this.hide();
+            return false;
+        };
+        config.cancelDisplay = false;
+        config.content = $dialogContent_;
+        super(config, shadowType);
+        this.#$dialogContent_ = $dialogContent_;
+        this.#$cancel_ = $dialogContent_.find('.cancel');
+        this.#$ok_ = $dialogContent_.find('.ok');
+        this.addEventsType(['empty']);
+        this.#addEventsListener_();
+    }
+
+    #addEventsListener_() {
+        this.#$cancel_.click(() => {
+            this.hide();
+        });
+
+        this.#$ok_.click(() => {
+            this.hide();
+            this.runEvent('empty');
+        });
+    }
+
+    dispose() {
+        this.#$cancel_.remove();
+        this.#$cancel_ = null;
+        this.#$ok_.remove();
+        this.#$ok_ = null;
+        this.#$dialogContent_.remove();
+        this.#$dialogContent_ = null;
+        super.dispose();
+    }
+}
+
+Mixly.LayerNewFile = LayerNewFile;
+
+});
--- a/common/modules/mixly-modules/common/layer.js
+++ b/common/modules/mixly-modules/common/layer.js
@@ -37,6 +37,7 @@ class Layer extends Component {
        super();
        const shadow = Layer.templates.getItem(shadowType);
        this.setContent($(shadow));
+        config.skin = config.skin ?? 'layui-anim layui-anim-scale';
        this.#dialog_ = dialog({
            padding: 0,
            ...config
--- a/common/modules/mixly-modules/deps.json
+++ b/common/modules/mixly-modules/deps.json
@@ -627,6 +627,18 @@
            "Mixly.LayerFirmware"
        ]
    },
+    {
+        "path": "/common/layer-new-file.js",
+        "require": [
+            "Mixly.Env",
+            "Mixly.Msg",
+            "Mixly.Layer",
+            "Mixly.HTMLTemplate"
+        ],
+        "provide": [
+            "Mixly.LayerNewFile"
+        ]
+    },
    {
        "path": "/common/layer-progress.js",
        "require": [
@@ -1380,7 +1392,7 @@
            "path",
            "Blockly",
            "Mixly.Env",
-            "Mixly.LayerExt",
+            "Mixly.LayerNewFile",
            "Mixly.Config",
            "Mixly.Title",
            "Mixly.MFile",
@@ -1628,7 +1640,7 @@
            "Blockly",
            "Mixly.MFile",
            "Mixly.Title",
-            "Mixly.LayerExt",
+            "Mixly.LayerNewFile",
            "Mixly.Msg",
            "Mixly.Workspace"
        ],
--- a/common/modules/mixly-modules/electron/arduino-shell.js
+++ b/common/modules/mixly-modules/electron/arduino-shell.js
@@ -60,7 +60,6 @@ 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;
--- a/common/modules/mixly-modules/electron/burn-upload.js
+++ b/common/modules/mixly-modules/electron/burn-upload.js
@@ -53,7 +53,6 @@ BU.firmwareLayer = new LayerFirmware({
    width: 400,
    title: Msg.Lang['nav.btn.burn'],
    cancelValue: false,
-    skin: 'layui-anim layui-anim-scale',
    cancel: false,
    cancelDisplay: false
 });
@@ -72,7 +71,6 @@ 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;
--- a/common/modules/mixly-modules/electron/file.js
+++ b/common/modules/mixly-modules/electron/file.js
@@ -3,7 +3,7 @@ goog.loadJs('electron', () => {
 goog.require('path');
 goog.require('Blockly');
 goog.require('Mixly.Env');
-goog.require('Mixly.LayerExt');
+goog.require('Mixly.LayerNewFile');
 goog.require('Mixly.Config');
 goog.require('Mixly.Title');
 goog.require('Mixly.MFile');
@@ -16,7 +16,7 @@ goog.provide('Mixly.Electron.File');

 const {
    Env,
-    LayerExt,
+    LayerNewFile,
    Config,
    Title,
    MFile,
@@ -48,7 +48,22 @@ File.userPath = {
    mix: null,
    code: null,
    hex: null
-}
+};
+
+File.newFileLayer = new LayerNewFile();
+File.newFileLayer.bind('empty', () => {
+    const mainWorkspace = Workspace.getMain();
+    const editor = mainWorkspace.getEditorsManager().getActive();
+    const blockEditor = editor.getPage('block').getEditor();
+    const codeEditor = editor.getPage('code').getEditor();
+    const generator = Blockly.generator;
+    blockEditor.clear();
+    blockEditor.scrollCenter();
+    Blockly.hideChaff();
+    codeEditor.setValue(generator.workspaceToCode(blockEditor) || '', -1);
+    File.openedFilePath = null;
+    Title.updateTitle(Title.title);
+});

 File.showSaveDialog = (title, filters, endFunc) => {
    const currentWindow = electron_remote.getCurrentWindow();
@@ -225,28 +240,7 @@ File.new = () => {
            return;
        }
    }
-    layer.confirm(MSG['confirm_newfile'], {
-        title: false,
-        shade: LayerExt.SHADE_ALL,
-        resize: false,
-        success: (layero) => {
-            const { classList } = layero[0].childNodes[1].childNodes[0];
-            classList.remove('layui-layer-close2');
-            classList.add('layui-layer-close1');
-        },
-        btn: [Msg.Lang['nav.btn.ok'], Msg.Lang['nav.btn.cancel']],
-        btn2: (index, layero) => {
-            layer.close(index);
-        }
-    }, (index, layero) => {
-        layer.close(index);
-        blockEditor.clear();
-        blockEditor.scrollCenter();
-        Blockly.hideChaff();
-        codeEditor.setValue(generator.workspaceToCode(blockEditor) || '', -1);
-        File.openedFilePath = null;
-        Title.updateTitle(Title.title);
-    });
+    File.newFileLayer.show();
 }

 File.open = () => {
--- a/common/modules/mixly-modules/web/burn-upload.js
+++ b/common/modules/mixly-modules/web/burn-upload.js
@@ -60,7 +60,6 @@ BU.firmwareLayer = new LayerFirmware({
    width: 400,
    title: Msg.Lang['nav.btn.burn'],
    cancelValue: false,
-    skin: 'layui-anim layui-anim-scale',
    cancel: false,
    cancelDisplay: false
 });
@@ -71,7 +70,6 @@ BU.firmwareLayer.bind('burn', (info) => {
 BU.progressLayer = new LayerProgress({
    width: 200,
    cancelValue: false,
-    skin: 'layui-anim layui-anim-scale',
    cancel: false,
    cancelDisplay: false
 });
--- a/common/modules/mixly-modules/web/file.js
+++ b/common/modules/mixly-modules/web/file.js
@@ -4,7 +4,7 @@ goog.require('path');
 goog.require('Blockly');
 goog.require('Mixly.MFile');
 goog.require('Mixly.Title');
-goog.require('Mixly.LayerExt');
+goog.require('Mixly.LayerNewFile');
 goog.require('Mixly.Msg');
 goog.require('Mixly.Workspace');
 goog.provide('Mixly.Web.File');
@@ -12,7 +12,7 @@ goog.provide('Mixly.Web.File');
 const {
    MFile,
    Web,
-    LayerExt,
+    LayerNewFile,
    Msg,
    Title,
    Workspace
@@ -25,7 +25,20 @@ const { File } = Web;
 const platform = goog.platform();

 File.obj = null;
-
+File.newFileLayer = new LayerNewFile();
+File.newFileLayer.bind('empty', () => {
+    const mainWorkspace = Workspace.getMain();
+    const editor = mainWorkspace.getEditorsManager().getActive();
+    const blockEditor = editor.getPage('block').getEditor();
+    const codeEditor = editor.getPage('code').getEditor();
+    const generator = Blockly.generator;
+    blockEditor.clear();
+    blockEditor.scrollCenter();
+    Blockly.hideChaff();
+    codeEditor.setValue(generator.workspaceToCode(blockEditor) || '', -1);
+    Title.updateTitle(Title.title);
+    File.obj = null;
+});


 File.getFileTypes = (filters) => {
@@ -199,28 +212,7 @@ File.new = async () => {
            return;
        }
    }
-    layer.confirm(MSG['confirm_newfile'], {
-        title: false,
-        shade: LayerExt.SHADE_ALL,
-        resize: false,
-        success: (layero) => {
-            const { classList } = layero[0].childNodes[1].childNodes[0];
-            classList.remove('layui-layer-close2');
-            classList.add('layui-layer-close1');
-        },
-        btn: [Msg.Lang['nav.btn.ok'], Msg.Lang['nav.btn.cancel']],
-        btn2: (index, layero) => {
-            layer.close(index);
-        }
-    }, (index, layero) => {
-        layer.close(index);
-        blockEditor.clear();
-        blockEditor.scrollCenter();
-        Blockly.hideChaff();
-        codeEditor.setValue(generator.workspaceToCode(blockEditor) || '', -1);
-        Title.updateTitle(Title.title);
-        File.obj = null;
-    });
+    File.newFileLayer.show();
 }

 });
--- a/common/msg/mixly/en.json
+++ b/common/msg/mixly/en.json
@@ -153,6 +153,7 @@
    "file.saveSucc": "Save successfully",
    "file.saving": "File is saving...",
    "file.notExist": "File does not exist",
+    "file.emptyInfo": "Do you want to clear all the contents?",
    "toolboxSearcher.search": "Search",
    "toolboxSearcher.empty": "No data",
    "toolboxSearcher.tooManyResultsInfo": "There are too many matching graphic blocks, only the first 30 are displayed, please add keywords to display all. For example: pin number",
--- a/common/msg/mixly/zh-hans.json
+++ b/common/msg/mixly/zh-hans.json
@@ -153,6 +153,7 @@
    "file.saveSucc": "保存成功",
    "file.saving": "正在保存...",
    "file.notExist": "文件不存在",
+    "file.emptyInfo": "是否希望清除画布所有内容？",
    "toolboxSearcher.search": "查找",
    "toolboxSearcher.empty": "无数据",
    "toolboxSearcher.tooManyResultsInfo": "匹配图形块数量过多, 仅展示前30个, 请添加关键词以全部显示。例如：管脚 数字",
--- a/common/msg/mixly/zh-hant.json
+++ b/common/msg/mixly/zh-hant.json
@@ -154,6 +154,7 @@
    "file.saveSucc": "儲存成功",
    "file.saving": "正在保存...",
    "file.notExist": "檔案不存在",
+    "file.emptyInfo": "是否希望清除畫布所有內容？",
    "toolboxSearcher.search": "查找",
    "toolboxSearcher.empty": "無資料",
    "toolboxSearcher.tooManyResultsInfo": "符合圖形區塊數量過多, 僅展示前30個, 請新增關鍵字以全部顯示。例如：腳位 數字",
--- a/common/templates/html/dialog/new-file.html
+++ b/common/templates/html/dialog/new-file.html
@@ -0,0 +1,34 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    div[m-id="{{d.mId}}"] > .layer-message {
+        margin: 10px 10px 20px 10px;
+        min-width: 220px;
+        text-align: center;
+    }
+
+    div[m-id="{{d.mId}}"] > .layui-btn-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    div[m-id="{{d.mId}}"] > .layui-btn-container > button {
+        font-family: "Lato", "Noto Sans SC";
+    }
+</style>
+<div m-id="{{d.mId}}">
+    <div class="layer-message">{{d.message}}</div>
+    <div class="layui-btn-container">
+        <button type="button" class="cancel layui-btn layui-btn-sm self-adaption-btn">{{d.cancel}}</button>
+        <button type="button" class="ok layui-btn layui-btn-sm self-adaption-btn">{{d.ok}}</button>
+    </div>
+</div>