refactor(core): 将 菜单项生成 从Mixly.ContextMenu调整到Mixly.Menu

boards/default/arduino_esp32/index.xml

@@ -1 +1 @@
-<script defer=defer src=main.bundle.ec93e14c.js></script><link href=styles/main.b29a8ee0.css rel=stylesheet><xml></xml>
+<script defer=defer src=main.bundle.ed4e6fc5.js></script><link href=styles/main.b29a8ee0.css rel=stylesheet><xml></xml>

boards/default_src/arduino_esp32/mixly-modules/loader.js

@@ -1,6 +1,6 @@
 import * as goog from 'goog';
 import { Msg } from 'blockly/core';
-import { Workspace, ContextMenu } from 'mixly';
+import { Workspace, Menu } from 'mixly';
 import FSArduEsp32Handler from './fs-board-handler';
 
 
@@ -25,7 +25,7 @@ export default function addBoardFSItem () {
         },
         data: {
             isHtmlName: true,
-            name: ContextMenu.getItem(Msg.BOARD_FS, ''),
+            name: Menu.getItem(Msg.BOARD_FS),
             callback: () => {
                 statusBarsManager.add({
                     type: 'board-fs',

boards/default_src/arduino_esp8266/mixly-modules/loader.js

@@ -1,6 +1,6 @@
 import * as goog from 'goog';
 import { Msg } from 'blockly/core';
-import { Workspace, ContextMenu } from 'mixly';
+import { Workspace, Menu } from 'mixly';
 import FSArduEsp8266Handler from './fs-board-handler';
 
 
@@ -25,7 +25,7 @@ export default function addBoardFSItem () {
         },
         data: {
             isHtmlName: true,
-            name: ContextMenu.getItem(Msg.BOARD_FS, ''),
+            name: Menu.getItem(Msg.BOARD_FS),
             callback: () => {
                 statusBarsManager.add({
                     type: 'board-fs',

boards/default_src/python_pyodide/others/statusbar-filesystem.js

@@ -8,7 +8,7 @@ import {
     HTMLTemplate,
     DragV,
     StatusBar,
-    ContextMenu,
+    Menu,
     Debug,
     StatusBarsManager,
     Workspace
@@ -155,7 +155,7 @@ export default class StatusBarFileSystem extends PageBase {
             type: 'copy_path',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['fileTree.copyPath'], ''),
+                name: Menu.getItem(Msg.Lang['fileTree.copyPath']),
                 callback: (_, { $trigger }) => {
                     let outPath = null;
                     let type = $trigger.attr('type');
@@ -198,7 +198,7 @@ export default class StatusBarFileSystem extends PageBase {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.refresh'], ''),
+                name: Menu.getItem(Msg.Lang['statusbar.ampy.refresh']),
                 callback: (_, { $trigger }) => {
                     let type = $trigger.attr('type');
                     if (type === 'root') {
@@ -235,7 +235,7 @@ export default class StatusBarFileSystem extends PageBase {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.exit'], ''),
+                name: Menu.getItem(Msg.Lang['statusbar.ampy.exit']),
                 callback: () => {
                     this.closeFS();
                 }
@@ -257,7 +257,7 @@ export default class StatusBarFileSystem extends PageBase {
             type: 'cut',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
                 callback: () => this.#editor_.cut()
             }
         });
@@ -266,7 +266,7 @@ export default class StatusBarFileSystem extends PageBase {
             type: 'copy',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
                 callback: () => this.#editor_.copy()
             }
         });
@@ -275,7 +275,7 @@ export default class StatusBarFileSystem extends PageBase {
             type: 'paste',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
                 callback: () => this.#editor_.paste()
             }
         });
@@ -289,7 +289,7 @@ export default class StatusBarFileSystem extends PageBase {
             type: 'togglecomment',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
                 callback: () => this.#editor_.commentLine()
             }
         });
@@ -311,7 +311,7 @@ export default class StatusBarFileSystem extends PageBase {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['file.save'], 'Ctrl+S'),
+                name: Menu.getItem(Msg.Lang['file.save'], 'Ctrl+S'),
                 callback: async () => {
                     await this.put();
                 }

common/css/menu.css

@@ -15,6 +15,10 @@
     cursor: inherit;
 }
 
+.menu-line > label.text:before {
+    margin-left: 0;
+}
+
 .mixly-drapdown-menu {
     width: fit-content;
 }

common/modules/mixly-modules/common/app.js

@@ -9,7 +9,6 @@ goog.require('Mixly.Msg');
 goog.require('Mixly.Drag');
 goog.require('Mixly.Nav');
 goog.require('Mixly.Menu');
-goog.require('Mixly.ContextMenu');
 goog.require('Mixly.Workspace');
 goog.require('Mixly.FooterBar');
 goog.require('Mixly.HTMLTemplate');
@@ -44,7 +43,6 @@ const {
     Drag,
     Nav,
     Menu,
-    ContextMenu,
     Workspace,
     FooterBar,
     HTMLTemplate,
@@ -467,7 +465,7 @@ class App extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['nav.btn.file.new'], 'Ctrl+N'),
+                name: Menu.getItem(Msg.Lang['nav.btn.file.new'], 'Ctrl+N', 'icon-doc-new'),
                 callback: () => File.new()
             }
         });
@@ -486,7 +484,7 @@ class App extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['nav.btn.file.open'], 'Ctrl+O'),
+                name: Menu.getItem(Msg.Lang['nav.btn.file.open'], 'Ctrl+O', 'icon-doc'),
                 callback: (key, opt) => File.open()
             }
         });
@@ -510,7 +508,7 @@ class App extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['nav.btn.file.save'], 'Ctrl+S'),
+                name: Menu.getItem(Msg.Lang['nav.btn.file.save'], 'Ctrl+S', 'icon-floppy'),
                 callback: () => File.save()
             }
         });
@@ -528,7 +526,7 @@ class App extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['nav.btn.file.saveAs'], 'Ctrl+Shift+S'),
+                name: Menu.getItem(Msg.Lang['nav.btn.file.saveAs'], 'Ctrl+Shift+S', 'icon-save-as'),
                 callback: () => File.saveAs()
             }
         });
@@ -555,7 +553,7 @@ class App extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['nav.btn.file.exportAs'], 'Ctrl+E'),
+                name: Menu.getItem(Msg.Lang['nav.btn.file.exportAs'], 'Ctrl+E', 'icon-export'),
                 callback: () => File.exportLib()
             }
         });
@@ -575,7 +573,7 @@ class App extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['nav.btn.setting.manageLibs'], 'Ctrl+M'),
+                name: Menu.getItem(Msg.Lang['nav.btn.setting.manageLibs'], 'Ctrl+M', 'icon-menu'),
                 callback: () => LibManager.showManageDialog()
             }
         });
@@ -603,7 +601,7 @@ class App extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['nav.btn.setting.feedback'], 'Ctrl+Shift+F'),
+                name: Menu.getItem(Msg.Lang['nav.btn.setting.feedback'], 'Ctrl+Shift+F', 'icon-comment-1'),
                 callback: () => {
                     const href = 'https://gitee.com/bnu_mixly/mixly3/issues';
                     Url.open(href);
@@ -624,7 +622,7 @@ class App extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem('文档', 'Ctrl+H'),
+                name: Menu.getItem(Msg.Lang['nav.btn.setting.wiki'], 'Ctrl+H', 'icon-book-open'),
                 callback: () => {
                     const href = 'https://mixly.readthedocs.io/zh-cn/latest/contents.html';
                     Url.open(href);

common/modules/mixly-modules/common/context-menu.js

@@ -1,30 +1,20 @@
 goog.loadJs('common', () => {
 
 goog.require('$.contextMenu');
-goog.require('Mixly.XML');
+goog.require('Mixly.Menu');
-goog.require('Mixly.Env');
 goog.require('Mixly.Events');
 goog.require('Mixly.Registry');
-goog.require('Mixly.HTMLTemplate');
 goog.provide('Mixly.ContextMenu');
 
 const {
-    XML,
+    Menu,
-    Env,
     Events,
-    Registry,
+    Registry
-    HTMLTemplate
 } = Mixly;
 
+
 class ContextMenu {
     static {
-        HTMLTemplate.add(
-            'html/context-menu-item.html',
-            new HTMLTemplate(goog.readFileSync(path.join(Env.templatePath, 'html/context-menu-item.html')))
-        );
-
-        this.getItem = (name, hotKey) => HTMLTemplate.get('html/context-menu-item.html').render({ name, hotKey });
-
         this.generate = (menu, $trigger) => {
             let menuItems = {};
             for (let item of menu.getAllItems()) {

common/modules/mixly-modules/common/editor-code.js

@@ -6,9 +6,9 @@ goog.require('Mixly.Config');
 goog.require('Mixly.XML');
 goog.require('Mixly.Env');
 goog.require('Mixly.Msg');
+goog.require('Mixly.Menu');
 goog.require('Mixly.ContextMenu');
 goog.require('Mixly.IdGenerator');
-goog.require('Mixly.Menu');
 goog.require('Mixly.EditorMonaco');
 goog.provide('Mixly.EditorCode');
 
@@ -17,9 +17,9 @@ const {
     XML,
     Env,
     Msg,
+    Menu,
     ContextMenu,
     IdGenerator,
-    Menu,
     EditorMonaco
 } = Mixly;
 const { USER } = Config;
@@ -54,7 +54,7 @@ class EditorCode extends EditorMonaco {
             id: 'cut',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
                 callback: (key, opt) => this.cut()
             }
         });
@@ -63,7 +63,7 @@ class EditorCode extends EditorMonaco {
             id: 'copy',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
                 callback: (key, opt) => this.copy()
             }
         });
@@ -72,7 +72,7 @@ class EditorCode extends EditorMonaco {
             id: 'paste',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
                 callback: (key, opt) => this.paste()
             }
         });
@@ -86,7 +86,7 @@ class EditorCode extends EditorMonaco {
             id: 'togglecomment',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
                 callback: (key, opt) => this.commentLine()
             }
         });
@@ -95,7 +95,7 @@ class EditorCode extends EditorMonaco {
             id: 'toggleBlockComment',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.toggleBlockComment'], 'Shift+Alt+A'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.toggleBlockComment'], 'Shift+Alt+A'),
                 callback: (key, opt) => this.blockComment()
             }
         });

common/modules/mixly-modules/common/editor-mix.js

@@ -10,12 +10,11 @@ goog.require('Mixly.XML');
 goog.require('Mixly.Msg');
 goog.require('Mixly.Config');
 goog.require('Mixly.Env');
-goog.require('Mixly.LayerExt');
-goog.require('Mixly.ContextMenu');
 goog.require('Mixly.Debug');
 goog.require('Mixly.Menu');
 goog.require('Mixly.Boards');
 goog.require('Mixly.MJson');
+goog.require('Mixly.LayerExt');
 goog.require('Mixly.HTMLTemplate');
 goog.require('Mixly.EditorBlockly');
 goog.require('Mixly.EditorCode');
@@ -33,7 +32,6 @@ const {
     Msg,
     Config,
     Env,
-    ContextMenu,
     Debug,
     Menu,
     Boards,
@@ -45,6 +43,7 @@ const { BOARD, SOFTWARE } = Config;
 
 const { form } = layui;
 
+
 class EditorMix extends EditorBase {
     static {
         HTMLTemplate.add(
@@ -112,7 +111,7 @@ class EditorMix extends EditorBase {
             id: 'copy',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
                 callback: (key, opt) => codePage.copy()
             }
         });

common/modules/mixly-modules/common/file-tree.js

@@ -257,7 +257,7 @@ class FileTree extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['fileTree.newFolder'], ''),
+                name: Menu.getItem(Msg.Lang['fileTree.newFolder'], ''),
                 callback: (_, { $trigger }) => {
                     let type = $trigger.attr('type');
                     if (type === 'root') {
@@ -279,7 +279,7 @@ class FileTree extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['fileTree.newFile'], ''),
+                name: Menu.getItem(Msg.Lang['fileTree.newFile'], ''),
                 callback: (_, { $trigger }) => {
                     let type = $trigger.attr('type');
                     if (type === 'root') {
@@ -310,7 +310,7 @@ class FileTree extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.cut'], ''),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.cut'], ''),
                 callback: (_, { $trigger }) => {
                     let id = $trigger.attr('id');
                     this.cutNode(id);
@@ -326,7 +326,7 @@ class FileTree extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], ''),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.copy'], ''),
                 callback: (_, { $trigger }) => {
                     let id = $trigger.attr('id');
                     this.copyNode(id);
@@ -342,7 +342,7 @@ class FileTree extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.paste'], ''),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.paste'], ''),
                 callback: (_, { $trigger }) => {
                     let id = $trigger.attr('id');
                     this.pasteNode(id);
@@ -359,7 +359,7 @@ class FileTree extends Component {
             id: 'copy_path',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['fileTree.copyPath'], ''),
+                name: Menu.getItem(Msg.Lang['fileTree.copyPath'], ''),
                 callback: (_, { $trigger }) => {
                     let outPath = null;
                     let type = $trigger.attr('type');
@@ -382,7 +382,7 @@ class FileTree extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['fileTree.rename'], ''),
+                name: Menu.getItem(Msg.Lang['fileTree.rename'], ''),
                 callback: (_, { $trigger }) => {
                     let type = $trigger.attr('type');
                     let id = $trigger.attr('id');
@@ -403,7 +403,7 @@ class FileTree extends Component {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['fileTree.delete'], ''),
+                name: Menu.getItem(Msg.Lang['fileTree.delete'], ''),
                 callback: (_, { $trigger }) => {
                     let type = $trigger.attr('type');
                     let id = $trigger.attr('id');

common/modules/mixly-modules/common/menu.js

@@ -1,17 +1,33 @@
 goog.loadJs('common', () => {
 
+goog.require('Mixly.Env');
 goog.require('Mixly.Debug');
-goog.require('Mixly.IdGenerator');
 goog.require('Mixly.Events');
+goog.require('Mixly.IdGenerator');
+goog.require('Mixly.HTMLTemplate');
 goog.provide('Mixly.Menu');
 
 const {
+    Env,
     Debug,
+    Events,
     IdGenerator,
-    Events
+    HTMLTemplate
 } = Mixly;
 
+
 class Menu {
+    static {
+        HTMLTemplate.add(
+            'html/menu-item.html',
+            new HTMLTemplate(goog.readFileSync(path.join(Env.templatePath, 'html/menu-item.html')))
+        );
+
+        this.getItem = (name, hotKey = '', icon = '') => {
+            return HTMLTemplate.get('html/menu-item.html').render({ name, hotKey, icon });
+        };
+    }
+
     #menuItems_ = [];
     #ids_ = {};
     #isDynamic_ = false;

common/modules/mixly-modules/common/nav.js

@@ -7,8 +7,6 @@ goog.require('Mixly.XML');
 goog.require('Mixly.Msg');
 goog.require('Mixly.HTMLTemplate');
 goog.require('Mixly.Component');
-goog.require('Mixly.Menu');
-goog.require('Mixly.ContextMenu');
 goog.require('Mixly.DropdownMenuGroup');
 goog.provide('Mixly.Nav');
 
@@ -18,8 +16,6 @@ const {
     Msg,
     HTMLTemplate,
     Component,
-    Menu,
-    ContextMenu,
     DropdownMenuGroup
 } = Mixly;
 

common/modules/mixly-modules/common/sidebar-local-storage.js

@@ -6,7 +6,6 @@ goog.require('Mixly.IdGenerator');
 goog.require('Mixly.XML');
 goog.require('Mixly.Env');
 goog.require('Mixly.HTMLTemplate');
-goog.require('Mixly.ContextMenu');
 goog.require('Mixly.Debug');
 goog.require('Mixly.Menu');
 goog.require('Mixly.PageBase');
@@ -21,7 +20,6 @@ const {
     XML,
     Env,
     HTMLTemplate,
-    ContextMenu,
     Debug,
     Menu,
     PageBase,
@@ -78,7 +76,7 @@ class SideBarLocalStorage extends PageBase {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem('打开新文件夹', ''),
+                name: Menu.getItem('打开新文件夹', ''),
                 callback: () => {
                     this.showDirectoryPicker();
                 }

common/modules/mixly-modules/common/statusbar-ampy.js

@@ -9,7 +9,7 @@ goog.require('Mixly.HTMLTemplate');
 goog.require('Mixly.DragV');
 goog.require('Mixly.StatusBar');
 goog.require('Mixly.Serial');
-goog.require('Mixly.ContextMenu');
+goog.require('Mixly.Menu');
 goog.require('Mixly.AmpyFileTree');
 goog.provide('Mixly.StatusBarAmpy');
 
@@ -21,7 +21,7 @@ const {
     DragV,
     StatusBar,
     Serial,
-    ContextMenu,
+    Menu,
     AmpyFileTree
 } = Mixly;
 
@@ -168,7 +168,7 @@ class StatusBarAmpy extends PageBase {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.refresh'], ''),
+                name: Menu.getItem(Msg.Lang['statusbar.ampy.refresh'], ''),
                 callback: (_, { $trigger }) => {
                     let type = $trigger.attr('type');
                     if (type === 'root') {
@@ -205,7 +205,7 @@ class StatusBarAmpy extends PageBase {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.exit'], ''),
+                name: Menu.getItem(Msg.Lang['statusbar.ampy.exit'], ''),
                 callback: () => {
                     this.closeFS();
                 }
@@ -227,7 +227,7 @@ class StatusBarAmpy extends PageBase {
             id: 'cut',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
                 callback: () => this.#editor_.cut()
             }
         });
@@ -236,7 +236,7 @@ class StatusBarAmpy extends PageBase {
             id: 'copy',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
                 callback: () => this.#editor_.copy()
             }
         });
@@ -245,7 +245,7 @@ class StatusBarAmpy extends PageBase {
             id: 'paste',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
                 callback: () => this.#editor_.paste()
             }
         });
@@ -259,7 +259,7 @@ class StatusBarAmpy extends PageBase {
             id: 'togglecomment',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
                 callback: () => this.#editor_.commentLine()
             }
         });
@@ -268,7 +268,7 @@ class StatusBarAmpy extends PageBase {
             id: 'toggleBlockComment',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.toggleBlockComment'], 'Shift+Alt+A'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.toggleBlockComment'], 'Shift+Alt+A'),
                 callback: (key, opt) => this.#editor_.blockComment()
             }
         });*/
@@ -290,7 +290,7 @@ class StatusBarAmpy extends PageBase {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['file.save'], 'Ctrl+S'),
+                name: Menu.getItem(Msg.Lang['file.save'], 'Ctrl+S'),
                 callback: async () => {
                     await this.put();
                 }

common/modules/mixly-modules/common/statusbar-serial.js

@@ -11,7 +11,7 @@ goog.require('Mixly.StatusBar');
 goog.require('Mixly.SideBarsManager');
 goog.require('Mixly.HTMLTemplate');
 goog.require('Mixly.PageBase');
-goog.require('Mixly.ContextMenu');
+goog.require('Mixly.Menu');
 goog.require('Mixly.StatusBarSerialOutput');
 goog.require('Mixly.StatusBarSerialChart');
 goog.require('Mixly.Electron.Serial');
@@ -29,7 +29,7 @@ const {
     RightSideBarsManager,
     HTMLTemplate,
     PageBase,
-    ContextMenu,
+    Menu,
     StatusBarSerialOutput,
     StatusBarSerialChart,
     Electron = {},
@@ -186,7 +186,7 @@ class StatusBarSerial extends PageBase {
                 },
                 data: {
                     isHtmlName: true,
-                    name: ContextMenu.getItem(Msg.Lang['statusbar.serial.interrupt'], 'Ctrl+C'),
+                    name: Menu.getItem(Msg.Lang['statusbar.serial.interrupt'], 'Ctrl+C'),
                     callback: (key, opt) => this.interrupt().catch(Debug.error)
                 }
             });
@@ -200,7 +200,7 @@ class StatusBarSerial extends PageBase {
                 },
                 data: {
                     isHtmlName: true,
-                    name: ContextMenu.getItem(Msg.Lang['statusbar.serial.reset'], 'Ctrl+D'),
+                    name: Menu.getItem(Msg.Lang['statusbar.serial.reset'], 'Ctrl+D'),
                     callback: (key, opt) => this.reset().catch(Debug.error)
                 }
             });
@@ -213,7 +213,7 @@ class StatusBarSerial extends PageBase {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['statusbar.serial.toggle'], ''),
+                name: Menu.getItem(Msg.Lang['statusbar.serial.toggle'], ''),
                 callback: (key, opt) => this.toggle().catch(Debug.error)
             }
         });

common/modules/mixly-modules/common/statusbar.js

@@ -22,6 +22,7 @@ const {
 } = Mixly;
 const { USER } = Config;
 
+
 class StatusBar extends EditorAce {
     #contextMenu_ = null;
     constructor() {
@@ -44,7 +45,7 @@ class StatusBar extends EditorAce {
             id: 'copy',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
+                name: Menu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
                 callback: (key, opt) => this.copy()
             }
         });

common/modules/mixly-modules/common/statusbars-manager.js

@@ -14,7 +14,6 @@ goog.require('Mixly.StatusBarFS');
 goog.require('Mixly.StatusBarLibs');
 goog.require('Mixly.StatusBarAmpy')
 goog.require('Mixly.PagesManager');
-goog.require('Mixly.ContextMenu');
 goog.require('Mixly.DropdownMenu');
 goog.require('Mixly.Menu');
 goog.require('Mixly.IdGenerator');
@@ -36,7 +35,6 @@ const {
     StatusBarLibs,
     StatusBarAmpy,
     PagesManager,
-    ContextMenu,
     DropdownMenu,
     Menu,
     IdGenerator,
@@ -158,7 +156,7 @@ class StatusBarsManager extends PagesManager {
             },
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['statusbar.openSelectedPort'], ''),
+                name: Menu.getItem(Msg.Lang['statusbar.openSelectedPort'], ''),
                 callback: (key, opt) => {
                     this.openSelectedPort();
                 }
@@ -170,7 +168,7 @@ class StatusBarsManager extends PagesManager {
             children: serialChildMenu,
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem(Msg.Lang['statusbar.openPort'], '')
+                name: Menu.getItem(Msg.Lang['statusbar.openPort'], '')
             }
         });
 
@@ -179,7 +177,7 @@ class StatusBarsManager extends PagesManager {
             id: 'lib',
             data: {
                 isHtmlName: true,
-                name: ContextMenu.getItem('第三方库管理', ''),
+                name: Menu.getItem('第三方库管理', ''),
                 callback: (key, opt) => {
                     this.add('libs', 'libs', '第三方库管理');
                     this.changeTo('libs');
@@ -199,7 +197,7 @@ class StatusBarsManager extends PagesManager {
                 id: 'ampy',
                 data: {
                     isHtmlName: true,
-                    name: ContextMenu.getItem(Msg.Lang['statusbar.ampy'], ''),
+                    name: Menu.getItem(Msg.Lang['statusbar.ampy'], ''),
                     callback: (key, opt) => {
                         this.add({
                             id: 'ampy',

common/modules/mixly-modules/deps.json

@@ -31,7 +31,6 @@
             "Mixly.Drag",
             "Mixly.Nav",
             "Mixly.Menu",
-            "Mixly.ContextMenu",
             "Mixly.Workspace",
             "Mixly.FooterBar",
             "Mixly.HTMLTemplate",
@@ -149,11 +148,9 @@
         "path": "/common/context-menu.js",
         "require": [
             "$.contextMenu",
-            "Mixly.XML",
+            "Mixly.Menu",
-            "Mixly.Env",
             "Mixly.Events",
-            "Mixly.Registry",
+            "Mixly.Registry"
-            "Mixly.HTMLTemplate"
         ],
         "provide": [
             "Mixly.ContextMenu"
@@ -282,9 +279,9 @@
             "Mixly.XML",
             "Mixly.Env",
             "Mixly.Msg",
+            "Mixly.Menu",
             "Mixly.ContextMenu",
             "Mixly.IdGenerator",
-            "Mixly.Menu",
             "Mixly.EditorMonaco"
         ],
         "provide": [
@@ -322,12 +319,11 @@
             "Mixly.Msg",
             "Mixly.Config",
             "Mixly.Env",
-            "Mixly.LayerExt",
-            "Mixly.ContextMenu",
             "Mixly.Debug",
             "Mixly.Menu",
             "Mixly.Boards",
             "Mixly.MJson",
+            "Mixly.LayerExt",
             "Mixly.HTMLTemplate",
             "Mixly.EditorBlockly",
             "Mixly.EditorCode",
@@ -700,9 +696,11 @@
     {
         "path": "/common/menu.js",
         "require": [
+            "Mixly.Env",
             "Mixly.Debug",
+            "Mixly.Events",
             "Mixly.IdGenerator",
-            "Mixly.Events"
+            "Mixly.HTMLTemplate"
         ],
         "provide": [
             "Mixly.Menu"
@@ -787,8 +785,6 @@
             "Mixly.Msg",
             "Mixly.HTMLTemplate",
             "Mixly.Component",
-            "Mixly.Menu",
-            "Mixly.ContextMenu",
             "Mixly.DropdownMenuGroup"
         ],
         "provide": [
@@ -908,7 +904,6 @@
             "Mixly.XML",
             "Mixly.Env",
             "Mixly.HTMLTemplate",
-            "Mixly.ContextMenu",
             "Mixly.Debug",
             "Mixly.Menu",
             "Mixly.PageBase",
@@ -963,7 +958,7 @@
             "Mixly.DragV",
             "Mixly.StatusBar",
             "Mixly.Serial",
-            "Mixly.ContextMenu",
+            "Mixly.Menu",
             "Mixly.AmpyFileTree"
         ],
         "provide": [
@@ -1093,7 +1088,7 @@
             "Mixly.SideBarsManager",
             "Mixly.HTMLTemplate",
             "Mixly.PageBase",
-            "Mixly.ContextMenu",
+            "Mixly.Menu",
             "Mixly.StatusBarSerialOutput",
             "Mixly.StatusBarSerialChart",
             "Mixly.Electron.Serial",
@@ -1137,7 +1132,6 @@
             "Mixly.StatusBarLibs",
             "Mixly.StatusBarAmpy",
             "Mixly.PagesManager",
-            "Mixly.ContextMenu",
             "Mixly.DropdownMenu",
             "Mixly.Menu",
             "Mixly.IdGenerator",

common/msg/mixly/en.json

@@ -79,6 +79,7 @@
     "nav.btn.setting.manageLibs": "Manage libs",
     "nav.btn.setting.firmware": "Firmware",
     "nav.btn.setting.feedback": "Feedback",
+    "nav.btn.setting.wiki": "Wiki",
     "shell.compiling": "Compiling",
     "shell.compileFailed": "Compile failed",
     "shell.compileSucc": "Compile successful",

common/msg/mixly/zh-hans.json

@@ -79,6 +79,7 @@
     "nav.btn.setting.manageLibs": "管理库",
     "nav.btn.setting.firmware": "固件",
     "nav.btn.setting.feedback": "反馈",
+    "nav.btn.setting.wiki": "文档",
     "shell.compiling": "编译中",
     "shell.compileFailed": "编译失败",
     "shell.compileSucc": "编译成功",

common/msg/mixly/zh-hant.json

@@ -80,6 +80,7 @@
     "nav.btn.setting.manageLibs": "管理函式庫",
     "nav.btn.setting.firmware": "韌體",
     "nav.btn.setting.feedback": "回饋",
+    "nav.btn.setting.wiki": "維基",
     "shell.compiling": "編譯中",
     "shell.compileFailed": "編譯失敗",
     "shell.compileSucc": "編譯成功",

common/templates/html/context-menu-item.html

@@ -1,7 +0,0 @@
-<div class="menu-line">
-    <label>{{d.name}}</label>
-    <div class="sep"></div>
-    {{# if (d.hotKey) { }}
-        <label>{{d.hotKey}}</label>
-    {{# } }}
-</div>

common/templates/html/menu-item.html

@@ -0,0 +1,11 @@
+<div class="menu-line">
+    {{# if (d.icon) { }}
+    <label class="text {{d.icon}}">{{d.name}}</label>
+    {{# } else { }}
+    <label class="item">{{d.name}}</label>
+    {{# } }}
+    <div class="sep"></div>
+    {{# if (d.hotKey) { }}
+    <label class="hot-key">{{d.hotKey}}</label>
+    {{# } }}
+</div>