themeConfig.ts 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. import { fa } from 'element-plus/es/locale';
  2. import { defineStore } from 'pinia';
  3. /**
  4. * 布局配置
  5. * 修复:https://gitee.com/lyt-top/vue-next-admin/issues/I567R1,感谢@lanbao123
  6. * 2020.05.28 by lyt 优化。开发时配置不生效问题
  7. * 修改配置时:
  8. * 1、需要每次都清理 `window.localStorage` 浏览器永久缓存
  9. * 2、或者点击布局配置最底部 `一键恢复默认` 按钮即可看到效果
  10. */
  11. export const useThemeConfig = defineStore('themeConfig', {
  12. state: (): ThemeConfigState => ({
  13. themeConfig: {
  14. // 是否开启布局配置抽屉
  15. isDrawer: false,
  16. /**
  17. * 全局主题
  18. */
  19. // 默认 primary 主题颜色
  20. primary: '#409eff',
  21. // 是否开启深色模式
  22. isIsDark: false,
  23. /**
  24. * 顶栏设置
  25. */
  26. // 默认顶栏导航背景颜色
  27. topBar: '#ffffff',
  28. // 默认顶栏导航字体颜色
  29. topBarColor: '#606266',
  30. // 是否开启顶栏背景颜色渐变
  31. isTopBarColorGradual: false,
  32. /**
  33. * 菜单设置
  34. */
  35. // 默认菜单导航背景颜色
  36. menuBar: '#545c64',
  37. // 默认菜单导航字体颜色
  38. menuBarColor: '#eaeaea',
  39. // 默认菜单高亮背景色
  40. menuBarActiveColor: 'rgba(0, 0, 0, 0.2)',
  41. // 是否开启菜单背景颜色渐变
  42. isMenuBarColorGradual: false,
  43. /**
  44. * 分栏设置
  45. */
  46. // 默认分栏菜单背景颜色
  47. columnsMenuBar: '#545c64',
  48. // 默认分栏菜单字体颜色
  49. columnsMenuBarColor: '#e6e6e6',
  50. // 是否开启分栏菜单背景颜色渐变
  51. isColumnsMenuBarColorGradual: false,
  52. // 是否开启分栏菜单鼠标悬停预加载(预览菜单)
  53. isColumnsMenuHoverPreload: false,
  54. /**
  55. * 界面设置
  56. */
  57. // 是否开启菜单水平折叠效果
  58. isCollapse: false,
  59. // 是否开启菜单手风琴效果
  60. isUniqueOpened: true,
  61. // 是否开启固定 Header
  62. isFixedHeader: true,
  63. // 初始化变量,用于更新菜单 el-scrollbar 的高度,请勿删除
  64. isFixedHeaderChange: false,
  65. // 是否开启经典布局分割菜单(仅经典布局生效)
  66. isClassicSplitMenu: false,
  67. // 是否开启自动锁屏
  68. isLockScreen: false,
  69. // 开启自动锁屏倒计时(s/秒)
  70. lockScreenTime: 30,
  71. /**
  72. * 界面显示
  73. */
  74. // 是否开启侧边栏 Logo
  75. isShowLogo: false,
  76. // 初始化变量,用于 el-scrollbar 的高度更新,请勿删除
  77. isShowLogoChange: false,
  78. // 是否开启 Breadcrumb,强制经典、横向布局不显示
  79. isBreadcrumb: true,
  80. // 是否开启 Tagsview
  81. isTagsview: true,
  82. // 是否开启 Breadcrumb 图标
  83. isBreadcrumbIcon: true,
  84. // 是否开启 Tagsview 图标
  85. isTagsviewIcon: true,
  86. // 是否开启 TagsView 缓存
  87. isCacheTagsView: true,
  88. // 是否开启 TagsView 拖拽
  89. isSortableTagsView: true,
  90. // 是否开启 TagsView 共用
  91. isShareTagsView: false,
  92. // 是否开启 Footer 底部版权信息
  93. isFooter: false,
  94. // 是否开启灰色模式
  95. isGrayscale: false,
  96. // 是否开启色弱模式
  97. isInvert: false,
  98. // 是否开启水印
  99. isWartermark: false,
  100. // 水印文案
  101. wartermarkText: 'vue-next-admin',
  102. /**
  103. * 其它设置
  104. */
  105. // Tagsview 风格:可选值"<tags-style-one|tags-style-four|tags-style-five>",默认 tags-style-five
  106. // 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
  107. tagsStyle: 'tags-style-five',
  108. // 主页面切换动画:可选值"<slide-right|slide-left|opacitys>",默认 slide-right
  109. animation: 'slide-right',
  110. // 分栏高亮风格:可选值"<columns-round|columns-card>",默认 columns-round
  111. columnsAsideStyle: 'columns-round',
  112. // 分栏布局风格:可选值"<columns-horizontal|columns-vertical>",默认 columns-horizontal
  113. columnsAsideLayout: 'columns-vertical',
  114. /**
  115. * 布局切换
  116. * 注意:为了演示,切换布局时,颜色会被还原成默认,代码位置:/@/layout/navBars/breadcrumb/setings.vue
  117. * 中的 `initSetLayoutChange(设置布局切换,重置主题样式)` 方法
  118. */
  119. // 布局切换:可选值"<defaults|classic|transverse|columns>",默认 defaults
  120. layout: 'defaults',
  121. /**
  122. * 后端控制路由
  123. */
  124. // 是否开启后端控制路由
  125. isRequestRoutes: false,
  126. /**
  127. * 全局网站标题 / 副标题
  128. */
  129. // 网站主标题(菜单导航、浏览器当前网页标题)
  130. globalTitle: '项目管理系统',
  131. // 网站副标题(登录页顶部文字)
  132. globalViceTitle: '项目管理系统',
  133. // 网站副标题(登录页顶部文字)(专注、免费、开源、维护、解疑)
  134. globalViceTitleMsg: 'v1.0.1',
  135. // 默认初始语言,可选值"<zh-cn|en|zh-tw>",默认 zh-cn
  136. globalI18n: 'zh-cn',
  137. // 默认全局组件大小,可选值"<large|'default'|small>",默认 'large'
  138. globalComponentSize: 'default',
  139. //默认分页大小数组
  140. pageSizeArray: [10, 20, 30, 40, 50, 100],
  141. //默认分页大小
  142. pageSize: 20,
  143. },
  144. }),
  145. actions: {
  146. setThemeConfig(data: ThemeConfigState) {
  147. this.themeConfig = data.themeConfig;
  148. },
  149. },
  150. });