工具栏配置方式调整

[hooray]

以专业版为例，同样适用于基础版

红框区域为工具栏，如果要达到和截图一样的效果，则需要如下配置：

{
  menu: {
    enableSubMenuCollapseButton: true, // 次导航展开/收起
  },
  toolbar: {
    enableNotification: true, // 消息通知
    enableI18n: true, // 国际化
    enableFullscreen: true, // 全屏
    enablePageReload: true, // 刷新
    enableColorScheme: true, // 明亮/暗黑
  },
  favorites: {
    enable: true, // 收藏夹
  },
  breadcrumb: {
    enable: true, // 面包屑导航，默认开启
  },
  navSearch: {
    enable: true, // 搜索，默认开启
  },
}

目前配置有一个痛点，就是工具栏上的功能模块，并不全都在 toolbar: {} 中设置，这样的配置结构不太符合开发直觉。对于不熟悉本框架的开发者来说，就需要依靠文档或查看 settings.default.ts 文件，才能了解工具栏上不同功能模块需要在哪里进行开启/关闭。

所以我的第一个调整思路是，将散落在其他对象中的配置属性，全部转移到 toolbar: {} 中；并且因为工具栏中的功能模块都是开关状态，属性名前缀的 enable 也可以去掉（不确定是否会增加理解成本），所以大致会变成这样：

{
  toolbar: {
    subMenuCollapse: true, // 次导航展开/收起
    favorites: true, // 收藏夹
    breadcrumb: true, // 面包屑导航，默认开启
    navSearch: true, // 搜索，默认开启
    notification: true, // 消息通知
    i18n: true, // 国际化
    fullscreen: true, // 全屏
    pageReload: true, // 刷新
    colorScheme: true, // 明亮/暗黑
  },
}

其次还有一个新的想法，就是让工具栏的配置化更彻底一点，目前只能配置功能模块的开启/关闭，并不能调整它们的顺序，所以我的第二个调整思路是，借鉴 element-plus 的 ep-pagination 组件的 layout 属性，将整个工具栏当成一个可布局的区域，配置大致会变成这样：

{
  toolbar: 'subMenuCollapse, favorites, breadcrumb, ->, navSearch, notification, i18n, fullscreen, pageReload, colorScheme',
}

-> 用来隔开左右两侧的布局，而两侧的位置和顺序都可以随意调整或删除，最终用 , 拼接即可。

或者也可以用数组的方式，会更直观一点

{
  toolbar: {
    leftSide: ['subMenuCollapse', 'favorites', 'breadcrumb'],
    rightSide: ['navSearch', 'notification', 'i18n', 'fullscreen', 'pageReload', 'colorScheme'],
  },
}

如此一来，后续在工具栏新增功能模块则不会出现更多配置项，只需维护左右两侧的数组即可。

---

以上是我的两种调整方案

• 方案一：不增加新特性，只是降低配置的学习成本，更符合开发直觉
• 方案二：在方案一的基础上，增强了工具栏的配置自由度

---

如果你有更好的方案或者建议，欢迎留言讨论。同时下方开了一个投票，如果你没有其他想法的话，也可以投票参与下你觉得我提出的两种方案哪种更好？或者还是保持现状不变？

[mic1on]

方案二自然提高了灵活性，我在markdown编辑器中有过这类配置体验。但是如果想象一下，我这个subMenuCollapse放在右边合适吗？会有什么场景我需要把这些功能左右互换？是否会破坏框架的整体设计？

如果需要灵活 甚至还可以把选择交给用户而不是开发者，让用户自定义从功能池里拖拽。

所以我个人支持方案一或者保持不变

[hooray]

subMenuCollapse 这个功能，我其实有计划将它从工具栏移动到次导航的展示区域，比如放置在次导航底部或浮动在次导航右侧。或者也可以将它固定在工具栏最左侧，就像工具栏最右侧的用户信息一样，始终固定在右侧，不在可配置的范围内。

当然抛开这个属性，确实有一些功能模块的放置位置通常不太变动，变动反而会破坏操作习惯。但我设计的本意是，左侧区域更偏向常用操作区，而这个“常用”又非常主观，所以才有了方案二。

另外关于你说的把选择交给用户，这个目前已经有提供“用户偏好设置”支持，如果采用了方案二，也会如你所说，提供拖拽设置的功能，这个主要看开发者是否开放该特性，框架本身是有提供现成功能的。

[hooray]

有一个新的想法，将方案一和方案二结合一下：

{
  toolbar: {
    subMenuCollapse: true, // 次导航展开/收起
    favorites: true, // 收藏夹
    breadcrumb: true, // 面包屑导航，默认开启
    navSearch: true, // 搜索，默认开启
    notification: true, // 消息通知
    i18n: true, // 国际化
    fullscreen: true, // 全屏
    pageReload: true, // 刷新
    colorScheme: true, // 明亮/暗黑
    layout: [ // 可调整顺序，不可删减
      'subMenuCollapse',
      'favorites',
      'breadcrumb',
      '->',
      'navSearch',
      'notification',
      'i18n',
      'fullscreen',
      'pageReload',
      'colorScheme'
    ],
  },
}

功能按钮是否显示依旧采用原有的配置模式，而 layout 属性只关注布局，如此一来破坏性变化最小，对于布局没有特殊要求的开发者，可以直接使用框架提供的默认布局