web-component-gallery 2.2.26 → 2.2.27

package/extensions/BuildTheme.js

@@ -1,24 +1,22 @@
 const fs = require("fs")
 const path = require("path")
 
-// 导入UpdateTheme中的共享函数
-const { 
-  CONFIG,
-  fetchRemoteFiles,
-  fetchAndParseLessFile,
-  parseLessVariables, 
-  parseCSSVariables, 
-  parseExtendVariables 
-} = require('./UpdateTheme')
-
 // 构建配置
-const BUILD_CONFIG = { 
+const BUILD_CONFIG = {
   // 宿主路径
   DEPD_PATH: path.join(__dirname, '../../'),
   // 入口路径
   ENTRY_PATH: path.join(__dirname, '../../../src/')
 }
 
+
+// 提取配置常量到独立对象
+const THEME_CONFIG = {
+  DEFAULT_THEME: 'dark',
+  REMOTE_URL: (process.env.VUE_APP_STATIC_URL || 'http://qxfnkj.com') + '/base-subject/iframe/theme.js'
+} 
+
+
 /**
  * 提取颜色变量
  * @param {string} content - 文件内容
@@ -30,6 +28,83 @@ function extractColor(content, varName) {
     return match ? match[1].trim() : null
 }
 
+
+/**
+ * 自定义LESS函数
+ */
+const customFunctions = {
+  install: function(less, pluginManager, functions) {
+    
+    // 检查是否为CSS变量
+    function isCSSVariable(color) {
+        return color.type === 'Call' && 
+                color.name === 'var' && 
+                color.args && 
+                color.args[0].value.indexOf('--') === 0
+    }
+
+    // 提取CSS变量信息
+    function extractCSSVariable(callNode) {
+        if (callNode.name === 'var') {
+            return {
+              varName: callNode.args[0].value,
+              defaultValue: callNode.args[1] ? callNode.args[1] : null
+            }
+        }
+        return null
+    }
+    
+    // tint函数实现
+    functions.add('tint', function(color, amount) {
+        if (isCSSVariable(color)) {
+            const {varName, defaultValue} = extractCSSVariable(color)
+            return new less.tree.Quoted('"', `tint(${defaultValue}, ${amount.value}%)`)
+        }
+        
+        const ratio = Math.max(0, Math.min(1, parseFloat(amount.value) / 100))
+        return new less.tree.Color(
+          [
+            Math.min(255, Math.round(color.rgb[0] + (255 - color.rgb[0]) * ratio)),
+            Math.min(255, Math.round(color.rgb[1] + (255 - color.rgb[1]) * ratio)),
+            Math.min(255, Math.round(color.rgb[2] + (255 - color.rgb[2]) * ratio))
+          ],
+          color.alpha
+        )
+    })
+    
+    // lighten函数实现
+    functions.add('lighten', function(color, amount) {
+        if (isCSSVariable(color)) {
+            const {varName, defaultValue} = extractCSSVariable(color)
+            return new less.tree.Quoted('"', `lighten(${defaultValue}, ${amount.value}%)`)
+        }
+        
+        const hsl = color.toHSL()
+        const newLightness = Math.min(100, hsl.l + parseFloat(amount.value))
+        return new less.tree.Color(
+          [
+            Math.round(hsl.h * 360),
+            Math.round(hsl.s * 100),
+            Math.round(newLightness)
+          ],
+          color.alpha
+        )
+    })
+    
+    // fade函数实现
+    functions.add('fade', function(color, amount) {
+        if (isCSSVariable(color)) {
+            const {varName, defaultValue} = extractCSSVariable(color)
+            return new less.tree.Quoted('"', `fade(${defaultValue}, ${amount.value}%)`)
+        }
+        
+        const alpha = Math.max(0, Math.min(1, color.alpha * (amount.value / 100)))
+        return new less.tree.Color(color.rgb, alpha)
+    })
+  }
+}
+
+
 /**
  * 向LESS文件添加新变量并保持原有格式
  * @param {Object} newVars - 要添加的新变量对象
@@ -67,12 +142,40 @@ function addLessVariables(newVars, lessContent) {
   return lines.join('\n')
 }
 
+
+// 添加模块缓存避免重复加载
+let remoteModuleCache = null
+
+async function loadRemoteModule() {
+    if (remoteModuleCache) {
+        return remoteModuleCache
+    }
+
+    // 获取JS文件内容
+    const response = await fetch(THEME_CONFIG.REMOTE_URL)
+    const jsCode = await response.text()
+    
+    // 获取导出类
+    remoteModuleCache = eval(jsCode)
+    return remoteModuleCache
+}
+
+
 /**
  * 初始化处理并输出主题文件
  * @param {string} resetTheme - 重置主题
  */
 async function createStyleFiles(resetTheme) {
-    const theme = resetTheme || 'dark'
+
+    const {
+      CONFIG,
+      fetchAndParseLessFile,
+      parseLessVariables,
+      parseCSSVariables,
+      parseExtendVariables
+    } = await loadRemoteModule()
+
+    const theme = resetTheme || THEME_CONFIG.DEFAULT_THEME
     
     try {
         // 并行获取文件内容
@@ -134,86 +237,17 @@ async function createStyleFiles(resetTheme) {
 }
 
 
-/**
- * 自定义LESS函数
- */
-const customFunctions = {
-  install: function(less, pluginManager, functions) {
-    
-    // 检查是否为CSS变量
-    function isCSSVariable(color) {
-        return color.type === 'Call' && 
-                color.name === 'var' && 
-                color.args && 
-                color.args[0].value.indexOf('--') === 0
-    }
-
-    // 提取CSS变量信息
-    function extractCSSVariable(callNode) {
-        if (callNode.name === 'var') {
-            return {
-              varName: callNode.args[0].value,
-              defaultValue: callNode.args[1] ? callNode.args[1] : null
-            }
-        }
-        return null
-    }
-    
-    // tint函数实现
-    functions.add('tint', function(color, amount) {
-        if (isCSSVariable(color)) {
-            const {varName, defaultValue} = extractCSSVariable(color)
-            return new less.tree.Quoted('"', `tint(${defaultValue}, ${amount.value}%)`)
-        }
-        
-        const ratio = Math.max(0, Math.min(1, parseFloat(amount.value) / 100))
-        return new less.tree.Color(
-          [
-            Math.min(255, Math.round(color.rgb[0] + (255 - color.rgb[0]) * ratio)),
-            Math.min(255, Math.round(color.rgb[1] + (255 - color.rgb[1]) * ratio)),
-            Math.min(255, Math.round(color.rgb[2] + (255 - color.rgb[2]) * ratio))
-          ],
-          color.alpha
-        )
-    })
-    
-    // lighten函数实现
-    functions.add('lighten', function(color, amount) {
-        if (isCSSVariable(color)) {
-            const {varName, defaultValue} = extractCSSVariable(color)
-            return new less.tree.Quoted('"', `lighten(${defaultValue}, ${amount.value}%)`)
-        }
-        
-        const hsl = color.toHSL()
-        const newLightness = Math.min(100, hsl.l + parseFloat(amount.value))
-        return new less.tree.Color(
-          [
-            Math.round(hsl.h * 360),
-            Math.round(hsl.s * 100),
-            Math.round(newLightness)
-          ],
-          color.alpha
-        )
-    })
-    
-    // fade函数实现
-    functions.add('fade', function(color, amount) {
-        if (isCSSVariable(color)) {
-            const {varName, defaultValue} = extractCSSVariable(color)
-            return new less.tree.Quoted('"', `fade(${defaultValue}, ${amount.value}%)`)
-        }
-        
-        const alpha = Math.max(0, Math.min(1, color.alpha * (amount.value / 100)))
-        return new less.tree.Color(color.rgb, alpha)
-    })
-  }
-}
-
 /**
  * 生成传输信息文件
  * @param {string} theme - 主题名称
  */
 async function createTransferFile(theme) {
+
+    const {
+      CONFIG,
+      fetchRemoteFiles
+    } = await loadRemoteModule()
+
     // 输出自定义样式文件
     await createStyleFiles(theme)
 

package/extensions/index.js

@@ -1,3 +1,6 @@
+/** 加载必备依赖 */
+require('less')
+
 /** 加载antDesignVue */
 import {
   Input,
@@ -18,11 +21,6 @@ import {
 import Dialog from "./Dialog"
 /** 全局页面加载框 */
 import PageLoading from "./PageLoading"
-/** 
- * 全局切换主题 
- * @theme 主题key 使用方法: this.$setTheme(@theme)
- * */
-import { updateTheme } from './UpdateTheme'
 
 /** 
  * 全局挂载组件自定义指令 
@@ -57,7 +55,6 @@ export default {
     /** 加载便捷弹窗等 */
     Vue.use(Dialog)
     Vue.use(PageLoading)
-    Vue.prototype.$setTheme = updateTheme
 
     // 指令注册
     Object.keys(Directives).forEach(key => {

package/package.json

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

package/extensions/UpdateTheme.js

@@ -1,221 +0,0 @@
-// 引入所需依赖
-const less = require('less')
-
-// CSS变量搭桥文件名
-const colorPalette = require('../utils/ColorPalette')
-
-// 配置常量
-const CONFIG = {
-    FILE: {
-        CSS: 'root.css',
-        VAR: 'vars.module.less',
-        MESSAGE: 'transferData.js'
-    },
-    REQUEST: {
-        IP: process.env.VUE_APP_STATIC_URL || 'http://qxfnkj.com',
-        PATHS: {
-            THEMES: '/base-subject/themes/',
-            IFRAME: '/base-subject/iframe/'
-        }
-    } 
-}
-
-/**
- * 获取服务器文件
- * @param {string} dirPath - 文件夹名称
- * @param {string} fileName - 文件名称
- */
-async function fetchRemoteFiles(dirPath, fileName) {
-    // 远程请求IP
-    let requestIP = CONFIG.REQUEST.IP
-    
-    // 浏览器环境：使用当前页面的origin
-    if (typeof window !== 'undefined' && window.location && window.location.origin && process.env.NODE_ENV !== 'development') {
-        requestIP = window.location.origin
-    }
-
-    const response = await fetch(`${requestIP}${CONFIG.REQUEST.PATHS[dirPath]}${fileName}`, {
-        method: 'GET',
-        mode: 'cors'
-    })
-    
-    if (!response.ok) throw new Error(`${fileName}文件请求失败！`)
-    
-    const responseText = await response.text()
-
-    return responseText
-}
-
-/**
- * 获取并解析LESS文件
- * @param {string} fileName - 文件名
- * @param {boolean} isParseVariables - 是否解析变量
- */
-async function fetchAndParseLessFile(fileName, isParseVariables) {
-    // 检测并补全文件后缀
-    let processedFileName = fileName
-    if (!fileName.endsWith('.less') && !fileName.endsWith('.css')) {
-        processedFileName = fileName + '.less'
-    }
-
-    const lessContent = await fetchRemoteFiles('THEMES', processedFileName)
-
-    return isParseVariables
-      ? await parseLessVariables(lessContent)
-      : lessContent
-}
-
-/**
- * 解析LESS变量
- * @param {string} content - LESS文件内容
- */
-async function parseLessVariables(content) {
-    try {
-        const lessRoot = await less.parse(content, {
-            javascriptEnabled: true,
-            math: 'always'
-        })
-        
-        const env = new less.contexts.Eval()
-        const evaluatedRoot = lessRoot.eval(env)
-        const variables = {}
-
-        evaluatedRoot.rules.forEach(rule => {
-            if (rule.variable && rule.name) {
-                variables[rule.name] = rule.value.toCSS()
-            }
-        })
-
-        return variables
-    } catch (err) {
-        console.error('LESS文件解析失败', err)
-        return {}
-    }
-}
-
-
-/**
- * 解析CSS变量
- * @param {Object} cssVariables - CSS变量对象
- * @param {Object} resetVar - 重置变量对象
- */
-function parseCSSVariables(cssVariables, resetVar) {
-    const result = {}
-    for (const [key, value] of Object.entries(cssVariables)) {
-        const match = value.match(/var\(\s*([^,)]+)\s*(?:,\s*((?:[^()]|\([^)]*\))+))?\s*\)/)
-        if (match) result[match[1]] = (match[2] || resetVar[key])
-    }
-    return result
-}
-
-/**
- * 解析扩展变量
- * @param {Object} extendVar - 扩展变量对象
- * @param {Object} lessVariables - LESS变量对象
- */
-function parseExtendVariables(extendVar, lessVariables) {
-    const { '@extend-colors': extendColors, '@extend-light': extendLight } = extendVar
-
-    if (!extendColors || !extendLight) {
-        return { nonExport: {}, export: {} }
-    }
-
-    return extendColors.split(',').reduce((acc, key) => {
-        const varName = key.trim().replace(/\"/g, '')
-        const [lessVar] = varName.split('-')
-        const cssVar = `--${varName.slice(1)}`
-        const hex = lessVariables[varName]
-
-        if (!hex) return acc
-
-        // 转换RGB值
-        const [r, g, b] = [1, 3, 5].map(offset => 
-            parseInt(hex.slice(offset, offset + 2), 16)
-        )
-
-        // 添加基础变量
-        acc.nonExport[`${lessVar}-rgb`] = `var(${cssVar}-rgb)`
-        acc.export[`${cssVar}-rgb`] = `${r},${g},${b}`
-
-        // 处理亮度变量
-        extendLight.split(',').forEach(light => {
-            const lightName = light.trim().replace(/\"/g, '')
-            acc.nonExport[`${lessVar}-${lightName}`] = `var(${cssVar}-${lightName})`
-            acc.export[`${cssVar}-${lightName}`] = colorPalette(hex, lightName)
-        })
-
-        return acc
-    }, { nonExport: {}, export: {} }) 
-}
-
-
-
-/**
- * 更新主题
- * @param {string} theme - 主题名称
- */
-async function updateTheme(theme) {
-    if (!less || !less.modifyVars) return
-
-    const root = document.documentElement
-    
-    try {
-        // 并行获取主题变量和CSS变量
-        const [themeVariables, cssVariables] = await Promise.all([
-            fetchAndParseLessFile(theme, true),
-            fetchAndParseLessFile(CONFIG.FILE.VAR, true)
-        ])
-        
-        // 解析CSS变量
-        const resetValue = parseCSSVariables(cssVariables, themeVariables)
-
-        const updateVariables = {
-            css: {},
-            less: {}
-        }
-        
-        // 对比新旧变量值，收集需要更新的变量
-        for (const [key, colorA] of Object.entries(resetValue)) {
-            const colorB = getComputedStyle(root).getPropertyValue(key).trim()
-            
-            // 只有当颜色值确实发生变化时才更新
-            if (colorA !== colorB) { 
-                updateVariables.css[key] = colorA
-                // 将CSS变量名转换为LESS变量名
-                updateVariables.less[`@${key.slice(2)}`] = colorA
-            }
-        }
-
-        // 应用LESS变量更新
-        // await less.modifyVars({
-        //     ...themeVariables, 
-        //     ...updateVariables.less
-        // })
-        // console.log("换肤成功")
-
-        if (!Object.keys(updateVariables.css).length) return
-
-        // 解析并更新CSS变量
-        const updateCSSVariables = {
-            ...updateVariables.css,
-            ...parseExtendVariables(cssVariables, updateVariables.less).export
-        }
-        
-        for (const [key, color] of Object.entries(updateCSSVariables)) {
-            root.style.setProperty(key, color)
-        }
-    } catch (error) {
-        console.error('主题更新失败:', error)
-        throw error
-    }
-}
-
-module.exports = {
-    CONFIG,
-    updateTheme,
-    parseCSSVariables,
-    parseLessVariables,
-    parseExtendVariables,
-    fetchAndParseLessFile,
-    fetchRemoteFiles
-}