web-component-gallery 2.1.19 → 2.1.20

package/extensions/UpdateTheme.js

@@ -3,7 +3,7 @@ const less = require('less')
 
 // CSS变量搭桥文件名
 const cssFileName = 'vars.module'
-const colorPalette = require('./ColorPalette')
+const colorPalette = require('../utils/ColorPalette')
 
 // 获取并解析LESS文件
 async function fetchAndParseLessFile(fileName, isParseVariables) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.1.19",
+  "version": "2.1.20",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [

package/extensions/Theme.js

@@ -1,93 +0,0 @@
-import message from 'ant-design-vue/es/message'
-
-const watchTheme = {
-    created() {
-        /** 全局添加标志变量来控制是否已经添加过监听器 */
-        if (!window._storageListenerAdded) {
-            /** 监听storage变化 */
-            window.addEventListener('storage', this.handleStorageChange)
-            window._storageListenerAdded = true
-        }
-    },
-    methods: {
-        handleStorageChange(event) {
-            // console.log('Storage changed:', event.newValue)
-            /** 判断是否为主题key更改并执行资源切换 */
-            event.key === 'projectTheme' && this.$setTheme(event.newValue)
-        }
-    },
-    beforeDestroy() {
-        /** 销毁标志变量及监听器 */
-        if (window._storageListenerAdded) {
-            window.removeEventListener('storage', this.handleStorageChange)
-            window._storageListenerAdded = false
-        }
-    }
-}
-
-export default {
-    install(Vue) {
-        /** 判断是否属于内嵌项目 */
-        const isHas = window.parent !== window
-
-        Vue.prototype.$setTheme = function(theme) {
-            /** 子项目则只需切换主题资源 */
-            if(isHas) {
-                return ToggleThemeSource(theme)
-            }
-            ToggleTheme(theme)
-        }
-        /** 子项目需挂载监听主题变化自动执行切换 */
-        isHas && Vue.mixin(watchTheme)
-
-        /** 切换当前主题 */
-        function ToggleTheme(scopeName) {
-            /** 切换主题loading */
-            const hideMessage = message.loading('正在切换主题！', 0)
-
-            ToggleThemeSource(scopeName)
-
-            const loadingTimer=setTimeout(() => {
-              hideMessage()
-              clearTimeout(loadingTimer)
-            }, 10)
-
-            Vue.prototype.$store.commit('SET_THEME',scopeName)
-        }
-
-        /** 切换主题资源 */
-        function ToggleThemeSource(scopeName) {
-            try {
-                const { toggleTheme } = require('@zougt/theme-css-extract-webpack-plugin/dist/toggleTheme')
-                /** 获取初始配置项 */
-                // env.themeConfig 来源 vue.config.js define (webpack的DefinePlugin)
-                const themeConfig = env.themeConfig || {}
-                /** 主题配置
-                 *  @scopeName 名称
-                 *  @multipleScopeVars 主题项
-                 *  @extract 是否提取
-                 *  @publicPath 资源输出路径
-                 *  @outputDir 提取的 css 文件存放目录
-                 */ 
-                toggleTheme({
-                  scopeName: `theme-${scopeName}`,
-                  multipleScopeVars: themeConfig.multipleScopeVars,
-                  extract: themeConfig.extract,
-                  publicPath: themeConfig.publicPath,
-                  outputDir: themeConfig.extractCssOutputDir
-                })
-    
-                /** 加载主题对应样式文件 */
-                // const requireLess = require.context('@/theme/styles', false, /\.less$/)
-                // requireLess(`./${scopeName}.less`)
-                let themeLink = document.getElementById('theme-stylesheet')
-                themeLink.href = `${process.env.BASE_URL}static/style/${scopeName}.css`
-            } catch(err) {
-                // message.error('主题资源加载失败')
-                console.error('换肤控件错误:', err)
-                throw err
-            }
-        }
-
-    }
-}