feat(core): 优化nav右侧菜单栏

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

@@ -443,7 +443,7 @@ class App extends Component {
 
         this.#nav_.register({
             id: 'file',
-            displayText: `${Msg.Lang['nav.btn.file']}(F)`,
+            displayText: Msg.Lang['nav.btn.file'],
             scopeType: Nav.Scope.RIGHT,
             weight: 1,
             menu: fileMenu
@@ -451,7 +451,7 @@ class App extends Component {
 
         this.#nav_.register({
             id: 'setting',
-            displayText: `${Msg.Lang['nav.btn.setting']}(S)`,
+            displayText: Msg.Lang['nav.btn.setting'],
             scopeType: Nav.Scope.RIGHT,
             weight: 2,
             menu: settingMenu

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

@@ -1,16 +1,21 @@
 goog.loadJs('common', () => {
 
+goog.require('path');
 goog.require('tippy');
+goog.require('Mixly.Env');
 goog.require('Mixly.Menu');
 goog.require('Mixly.Registry');
+goog.require('Mixly.HTMLTemplate');
 goog.require('Mixly.IdGenerator');
 goog.require('Mixly.ContextMenu');
 goog.require('Mixly.DropdownMenu');
 goog.provide('Mixly.DropdownMenuGroup');
 
 const {
+    Env,
     Menu,
     Registry,
+    HTMLTemplate,
     IdGenerator,
     ContextMenu,
     DropdownMenu
@@ -18,6 +23,13 @@ const {
 
 
 class DropdownMenuGroup {
+    static {
+        HTMLTemplate.add(
+            'html/dropdown-menu-item.html',
+            new HTMLTemplate(goog.readFileSync(path.join(Env.templatePath, 'html/dropdown-menu-item.html')))
+        );
+    }
+
     #singleton_ = null;
     #menuItems_ = [];
     #ids_ = {};
@@ -85,9 +97,12 @@ class DropdownMenuGroup {
             item.weight = 0;
         }
         this.remove(item.id);
-        item.$elem = $(`<button class="layui-btn layui-btn-xs layui-btn-primary mixly-nav">${item.displayText}</button>`);
+        item.$elem = $(HTMLTemplate.get('html/dropdown-menu-item.html').render({
+            text: item.displayText
+        }));
         const instance = tippy(item.$elem[0]);
         item.$elem.attr('data-id', instance.id);
+        item.$i = item.$elem.children('i');
         item.instance = instance;
         const contextMenuId = IdGenerator.generate();
         const selector = `body > .mixly-dropdown-menus > div[m-id="${contextMenuId}"]`;
@@ -103,10 +118,12 @@ class DropdownMenuGroup {
             },
             events: {
                 show: (opt) => {
+                    item.$i.addClass('menu-shown');
                     this.#menuShown_ = true;
                     this.#singleton_.setProps({});
                 },
                 hide: (opt) => {
+                    item.$i.removeClass('menu-shown');
                     if (this.#trigged_) {
                         this.#trigged_ = false;
                         return true;
@@ -155,6 +172,10 @@ class DropdownMenuGroup {
         return this.#ids_[id].contextMenu;
     }
 
+    getInstance() {
+        return this.#singleton_;
+    }
+
     remove(id) {
         let item = this.#ids_[id];
         if (!item) {

common/modules/mixly-modules/deps.json

@@ -189,9 +189,12 @@
     {
         "path": "/common/dropdown-menu-group.js",
         "require": [
+            "path",
             "tippy",
+            "Mixly.Env",
             "Mixly.Menu",
             "Mixly.Registry",
+            "Mixly.HTMLTemplate",
             "Mixly.IdGenerator",
             "Mixly.ContextMenu",
             "Mixly.DropdownMenu"

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

@@ -0,0 +1,14 @@
+<style>
+    button[m-id="{{d.mId}}"] > i {
+        margin-left: 2px;
+        -webkit-transition: all .2s;
+    }
+
+    button[m-id="{{d.mId}}"] > i.menu-shown {
+        transform: rotate(180deg);
+    }
+</style>
+<button m-id="{{d.mId}}" class="mixly-nav layui-btn layui-btn-xs layui-btn-primary">
+    {{d.text}}
+    <i class="layui-icon layui-icon-down"></i>
+</button>