随着框架新特性越来越多，功能越来越完善，配置项也变得越来越复杂。

前期为了快速迭代，并没有很好的设计配置项。

所以 v6 版本其中一个核心目标就是重构配置项，让配置项更加合理，更加易用。

这份文档将记录 v6 版本的修改内容，感兴趣的可以关注 commit 记录，有好的建议也可随时与我保持联系。

现在配置文件存放在 src/settings/index.ts 中，为方便从 v5.x 版本迁移，还提供了一个迁移函数。

import { setSettingsLegacy } from './utils'

export default setSettingsLegacy({
  // v5.x 配置
})

你可以先将 v5.x 的配置复制到 src/settings/index.ts 中，然后调用 setSettingsLegacy 函数。

这样项目可以正常运行起来，然后就能在浏览器开发者工具里看到一段转换后的配置，复制粘贴到 src/settings/index.ts 中，然后删除 setSettingsLegacy 函数即可。

import { setSettings } from './utils'

export default setSettings({
  // v6.x 配置
})

通过 src/types/global.d.ts 里可以了解完整配置项的结构，在这里简单做一些说明。

interface all {
  /**
   * 应用设置
   * @description 应用级别的全局配置
   */
  app?: app
  /**
   * 主题设置
   * @description 主题和样式相关的配置
   */
  theme?: theme
  /**
   * 导航栏设置
   * @description 导航菜单相关的配置
   */
  menu?: menu
  /**
   * 顶栏设置
   * @description 顶部工具栏相关的配置
   */
  topbar?: topbar
  /**
   * 标签栏设置
   * @description 标签页相关的配置
   */
  tabbar?: tabbar
  /**
   * 工具栏设置
   * @description 工具栏功能相关的配置
   */
  toolbar?: toolbar
  /**
   * 页面设置
   * @description 页面行为和显示相关的配置
   */
  page?: page
}

其中 app 是应用级别的配置，这里的配置是不允许动态修改的，其余所有配置项都允许动态修改。

所谓的动态修改，就是允许用户进行偏好设置，默认是关闭所有偏好设置项，可以根据需要按需开启。

v5.x 及之前版本，偏好设置的设计过于复杂且不易用，而现在可以通过这种方式完全自定义开启。

import { setSettings } from './utils'

export default setSettings({
  app: {
    preferences: { // 偏好设置
      theme: true, // 开启全部，意味着 theme 里的所有配置项，用户都可以进行个性化设置
      menu: { // 开启部分
        style: false, // 不允许用户进行个性化设置（默认就是false，这行配置其实可以省略，这里只是为了说明）
        subMenuCollapseButton: true, // 允许用户进行个性化设置
        hotkeys: true, // 允许用户进行个性化设置
      },
    },
  },
})

其次为了更好扩展，偏好设置的 vue 组件代码现在已经合并到 src/layouts/components/AppSetting/index.vue 中。原先需要维护两份类似的组件，现在只需维护一份即可。

将一些非 UI 相关的组件抽离到 src/components/ 中，比如 FaAuth、FaCopyright 等。

并且因为这些组件和框架本身强相关，所以统一更名为 App 开头，后续如果有和框架强相关，且非 UI 类的组件，也会以 App 开头并放在该目录下。

合并了一些两两搭配的配置项，比如：

// 旧
meta: {
  icon: 'i-twemoji:face-without-mouth',
  activeIcon: 'i-twemoji:grinning-face-with-big-eyes',
}

// 新
meta: {
  icon: ['i-twemoji:face-without-mouth', 'i-twemoji:grinning-face-with-big-eyes'],
}
// 如果不需要设置激活图标
meta: {
  icon: 'i-twemoji:face-without-mouth',
}

// 旧
meta: {
  badge: 'PRO',
  badgeVariant: 'destructive',
}

// 新
meta: {
  badge: ['PRO', 'secondary'],
}
// 如果不需要设置徽标颜色
meta: {
  badge: 'PRO',
}

// 旧
meta: {
  cache: true,
  noCache: 'xxx',
}

// 新
meta: {
  keepAlive: true,
  noKeepAlive: 'xxx',
}

// 旧
meta: {
  maximize: true,
  exitMaximize: true,
}

// 新
meta: {
  maximize: true, // 移除了 exitMaximize 配置项，跳出该路由时，会自动退出最大化
}
// 如果希望该页面强制最大化，也就是最大化时隐藏右上角退出按钮
meta: {
  maximize: [true, true],
}

// 旧
meta: {
  defaultOpened: true,
  alwaysOpened: true,
}

// 新
meta: {
  expand: [true, true],
}
// 如果只希望默认展开
meta: {
  expand: true,
}

修改了一些配置项名称，比如：

// 旧
meta: {
  permanent: true,
}

// 新
meta: {
  tabPermanent: true,
}

新增了一些配置项，比如：

meta: {
  layout: { // 开启居中布局，其中任意一项不设置，则继承应用配置中的 layout 配置
    center: true, // 开启居中
    centerScope: 'inner', // 居中范围，inner 表示内部，outer 表示外部
    centerWidth: 1400, // 居中宽度，单位 px
  },
  localeAuth: ['zh-cn', 'zh-tw'], // 区域权限
}

增加了 src/store/modules/app 目录，并将和框架强相关的 store 都迁移到该目录下，开发者自定义的全局 store 可继续放在 src/store/ 下，方面未来做版本升级。

• 新增锁屏功能
• 新增多账号功能
• 重新设计工具栏消息通知
• RTL模式跟随语言设置自动切换，可在 src/locales/index.ts 中设置不同语言是否需要开启RTL
• 标签页宽度移入 tabbar 配置项中
• 优化最大化进入/退出动画效果
• 部分环境变量名调整
• 新增布局顶部和底部插槽
• FaPinInput 组件更名为 FaInputOpt
• UnoCSS 预设 presetWind3 升级为 presetWind4

预计会在 10 月份底左右发布，这也意味着 v5.x 版本在 v6 发布前，将不会再有大的功能更新，仅会进行 bug 修复和基础维护。

计划在 vue 3.6 / vite 8 后发布，时间待定。