settingConfig.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import { message } from 'ant-design-vue/es'
  2. // import defaultSettings from '../defaultSettings';
  3. import themeColor from './themeColor.js'
  4. // let lessNodesAppended
  5. const colorList = [
  6. {
  7. key: '薄暮', color: '#F5222D'
  8. },
  9. {
  10. key: '火山', color: '#FA541C'
  11. },
  12. {
  13. key: '日暮', color: '#FAAD14'
  14. },
  15. {
  16. key: '明青', color: '#13C2C2'
  17. },
  18. {
  19. key: '极光绿', color: '#52C41A'
  20. },
  21. {
  22. key: '拂晓蓝(默认)', color: '#1890FF'
  23. },
  24. {
  25. key: '极客蓝', color: '#2F54EB'
  26. },
  27. {
  28. key: '酱紫', color: '#722ED1'
  29. }
  30. ]
  31. const updateTheme = newPrimaryColor => {
  32. console.log(newPrimaryColor,'newPrimaryColor')
  33. const hideMessage = message.loading('正在切换主题!', 0)
  34. themeColor.changeColor(newPrimaryColor).finally(t => {
  35. setTimeout(() => {
  36. hideMessage()
  37. })
  38. })
  39. }
  40. /*
  41. const updateTheme = primaryColor => {
  42. // Don't compile less in production!
  43. /* if (process.env.NODE_ENV === 'production') {
  44. return;
  45. } * /
  46. // Determine if the component is remounted
  47. if (!primaryColor) {
  48. return
  49. }
  50. const hideMessage = message.loading('正在编译主题!', 0)
  51. function buildIt () {
  52. if (!window.less) {
  53. return
  54. }
  55. setTimeout(() => {
  56. window.less
  57. .modifyVars({
  58. '@primary-color': primaryColor
  59. })
  60. .then(() => {
  61. hideMessage()
  62. })
  63. .catch(() => {
  64. message.error('Failed to update theme')
  65. hideMessage()
  66. })
  67. }, 200)
  68. }
  69. if (!lessNodesAppended) {
  70. // insert less.js and color.less
  71. const lessStyleNode = document.createElement('link')
  72. const lessConfigNode = document.createElement('script')
  73. const lessScriptNode = document.createElement('script')
  74. lessStyleNode.setAttribute('rel', 'stylesheet/less')
  75. lessStyleNode.setAttribute('href', '/color.less')
  76. lessConfigNode.innerHTML = `
  77. window.less = {
  78. async: true,
  79. env: 'production',
  80. javascriptEnabled: true
  81. };
  82. `
  83. lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js'
  84. lessScriptNode.async = true
  85. lessScriptNode.onload = () => {
  86. buildIt()
  87. lessScriptNode.onload = null
  88. }
  89. document.body.appendChild(lessStyleNode)
  90. document.body.appendChild(lessConfigNode)
  91. document.body.appendChild(lessScriptNode)
  92. lessNodesAppended = true
  93. } else {
  94. buildIt()
  95. }
  96. }
  97. */
  98. const updateColorWeak = colorWeak => {
  99. // document.body.className = colorWeak ? 'colorWeak' : '';
  100. colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
  101. }
  102. export { updateTheme, colorList, updateColorWeak }