themeConfig.ts 5.1 KB

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