feat: theme item highlight

src/Cherry.config.js

@@ -379,6 +379,7 @@ const defaultConfig = {
      */
     // theme: 'dark', // light or dark
     showToolbar: true, // false：不展示顶部工具栏； true：展示工具栏; toolbars.showToolbar=false 与 toolbars.toolbar=false 等效
+    subMenuHighlight: true, // 是否高亮子菜单
     toolbar: [
       'bold',
       'italic',

src/sass/cherry.scss

@@ -152,6 +152,10 @@
       background: $toolbarBtnBgHoverLight;
       color: $toolbarBtnHoverColorLight;
     }
+    &__selected {
+      background: $toolbarBtnBgHoverLight;
+      color: $toolbarBtnHoverColorLight;
+    }
 
     .ch-icon {
       margin-right: 10px;
@@ -169,6 +173,10 @@
         background: $toolbarBtnBgHoverDark;
         color: $toolbarBtnHoverColorDark;
       }
+      &__selected {
+        background: $toolbarBtnBgHoverDark;
+        color: $toolbarBtnHoverColorLight;
+      }
     }
   }
 }

src/sass/themes/blue.scss

@@ -81,6 +81,11 @@ $mdBlockquoteBg: $VIOLET1;
     background: $toolbarBg;
     .cherry-dropdown-item {
       color: $toolbarBtnColor;
+      // 选中子菜单高亮 
+      &__selected {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor;
+      }
       &:hover {
         background-color: $toolbarBtnBgHover;
         color: $toolbarBtnHoverColor;

src/sass/themes/dark.scss

@@ -54,6 +54,11 @@ $mdSvgTextColor: rgb(250, 160, 0);
     background: $toolbarBg;
     .cherry-dropdown-item {
       color: $toolbarBtnColor;
+      // 选中子菜单高亮 
+      &__selected {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor;
+      }
       &:hover {
         background-color: $toolbarBtnBgHover;
         color: $toolbarBtnHoverColor;

src/sass/themes/green.scss

@@ -68,6 +68,11 @@ $mdBlockquoteBg: $GREEN1;
     background: $toolbarBg;
     .cherry-dropdown-item {
       color: $toolbarBtnColor;
+      // 选中子菜单高亮
+      &__selected {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor;
+      }
       &:hover {
         background-color: $toolbarBtnBgHover;
         color: $toolbarBtnHoverColor;

src/sass/themes/light.scss

@@ -54,6 +54,11 @@ $mdBlockquoteBg: rgb(231, 245, 255);
     background: $toolbarBg;
     .cherry-dropdown-item {
       color: $toolbarBtnColor;
+      // 选中子菜单高亮
+      &__selected {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor;
+      }
       &:hover {
         background-color: $toolbarBtnBgHover;
         color: $toolbarBtnHoverColor;

src/sass/themes/red.scss

@@ -68,6 +68,11 @@ $mdBlockquoteBg: $PINK1;
     background: $toolbarBg;
     .cherry-dropdown-item {
       color: $toolbarBtnColor;
+      // 选中子菜单高亮
+      &__selected {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor;
+      }
       &:hover {
         background-color: $toolbarBtnBgHover;
         color: $toolbarBtnHoverColor;

src/sass/themes/violet.scss

@@ -67,6 +67,11 @@ $mdBlockquoteBg: $VIOLET1;
     background: $toolbarBg;
     .cherry-dropdown-item {
       color: $toolbarBtnColor;
+      // 选中子菜单高亮
+      &__selected {
+        background-color: $toolbarBtnBgHover;
+        color: $toolbarBtnHoverColor;
+      }
       &:hover {
         background-color: $toolbarBtnBgHover;
         color: $toolbarBtnHoverColor;

src/toolbars/MenuBase.js

@@ -544,4 +544,13 @@ export default class MenuBase {
     }
     return parent;
   }
+
+  /**
+   * 绑定子菜单点击事件
+   * @param {HTMLDivElement} subMenuDomPanel
+   * @returns {number} 当前激活的子菜单索引
+   */
+  getActiveSubMenuIndex(subMenuDomPanel) {
+    return -1;
+  }
 }

src/toolbars/Toolbar.js

@@ -235,6 +235,18 @@ export default class Toolbar {
     }
   }
 
+  /**
+   * 激活二级菜单添加选中颜色
+   * @param {string} name
+   */
+  activeSubMenuItem(name) {
+    const subMenu = this.subMenus[name];
+    const index = this.menus.hooks?.[name]?.getActiveSubMenuIndex(subMenu);
+    subMenu?.querySelectorAll('.cherry-dropdown-item').forEach((item, i) => {
+      item.classList.toggle('cherry-dropdown-item__selected', i === index);
+    });
+  }
+
   /**
    * 展开/收起二级菜单
    */
@@ -244,13 +256,15 @@ export default class Toolbar {
       this.hideAllSubMenu();
       this.drawSubMenus(name);
       this.subMenus[name].style.display = 'block';
+      this.activeSubMenuItem(name);
       return;
     }
     if (this.subMenus[name].style.display === 'none') {
       // 如果是隐藏的，则先隐藏所有二级菜单，再显示当前二级菜单
       this.hideAllSubMenu();
       this.subMenus[name].style.display = 'block';
       this.setSubMenuPosition(this.menus.hooks[name], this.subMenus[name]);
+      this.activeSubMenuItem(name);
     } else {
       // 如果是显示的，则隐藏当前二级菜单
       this.subMenus[name].style.display = 'none';

src/toolbars/hooks/Theme.js

@@ -24,23 +24,27 @@ export default class Theme extends MenuBase {
     this.setName('theme', 'insertChart');
     this.subMenuConfig = [];
     const self = this;
-    if (typeof $cherry.options.theme !== 'undefined') {
-      $cherry.options.theme.forEach((one) => {
-        self.subMenuConfig.push({
-          iconName: one.className,
-          name: one.label,
-          onclick: self.bindSubClick.bind(self, one.className),
-        });
-      });
-    } else {
-      $cherry.options.themeSettings.themeList.forEach((one) => {
-        self.subMenuConfig.push({
-          iconName: one.className,
-          name: one.label,
-          onclick: self.bindSubClick.bind(self, one.className),
-        });
+
+    const themes = $cherry.options.theme || $cherry.options.themeSettings.themeList;
+    themes.forEach((one) => {
+      self.subMenuConfig.push({
+        iconName: one.className,
+        name: one.label,
+        onclick: self.bindSubClick.bind(self, one.className),
       });
-    }
+    });
+  }
+
+  /**
+   * 绑定子菜单点击事件
+   * @param {HTMLDivElement} subMenuDomPanel
+   * @returns {number} 当前激活的子菜单索引
+   */
+  getActiveSubMenuIndex(subMenuDomPanel) {
+    const theme = this.$cherry.wrapperDom.className.match(/theme__([^\s]+)/)?.[1] || '';
+    return Array.from(subMenuDomPanel.querySelectorAll('.cherry-dropdown-item')).findIndex((item) =>
+      item.querySelector(`.ch-icon-${theme}`),
+    );
   }
 
   /**

types/cherry.d.ts

@@ -599,6 +599,8 @@ export interface CherryToolbarsOptions<F extends CherryToolbarsCustomType = Cher
   hiddenToolbar?: any[];
   /** 是否展示顶部工具栏 */
   showToolbar?: boolean;
+  /** 是否高亮子菜单 */
+  subMenuHighlight: boolean;
   /** 侧边栏配置 */
   sidebar?: any[] | false;
   /** 选中悬停菜单配置 */