web-component-gallery 2.2.7 → 2.2.8

package/extensions/BuildTheme.js

@@ -1,15 +1,33 @@
-// 引入所需依赖
 const fs = require("fs")
 const path = require("path")
-// 指向宿主项目路径 ../../为node_modules路径
-const hostPath = path.join(__dirname, '../../')
-const { cssFileName, parseCSSVariables, parseLessVariables, parseExtendVariables, fetchAndParseLessFile } = require('./UpdateTheme')
 
-// 提取颜色变量
+// 导入UpdateTheme中的共享函数
+const { 
+  CONFIG,
+  fetchRemoteFiles,
+  fetchAndParseLessFile,
+  parseLessVariables, 
+  parseCSSVariables, 
+  parseExtendVariables 
+} = require('./UpdateTheme')
+
+// 构建配置
+const BUILD_CONFIG = { 
+  // 宿主路径
+  DEPD_PATH: path.join(__dirname, '../../'),
+  // 入口路径
+  ENTRY_PATH: path.join(__dirname, '../../../src/')
+}
+
+/**
+ * 提取颜色变量
+ * @param {string} content - 文件内容
+ * @param {string} varName - 变量名
+ */
 function extractColor(content, varName) {
     const regex = new RegExp(`${varName}:\\s*(.+?);`)
     const match = content.match(regex)
-    return match ? match[1] : null
+    return match ? match[1].trim() : null
 }
 
 /**
@@ -49,17 +67,18 @@ function addLessVariables(newVars, lessContent) {
   return lines.join('\n')
 }
 
-// 初始化处理并输出主题文件
+/**
+ * 初始化处理并输出主题文件
+ * @param {string} resetTheme - 重置主题
+ */
 async function createStyleFiles(resetTheme) {
-    // 初始化主题
     const theme = resetTheme || 'dark'
     
     try {
-
         // 并行获取文件内容
         const [fileAVariables, fileBContent] = await Promise.all([
             fetchAndParseLessFile(theme, true),
-            fetchAndParseLessFile(cssFileName, false)
+            fetchAndParseLessFile(CONFIG.FILE.VAR, false)
         ])
 
         // 处理颜色变量
@@ -75,6 +94,7 @@ async function createStyleFiles(resetTheme) {
                 )
             }
         }
+
         // 解析扩展变量
         const cssVariables = await parseLessVariables(processedContent)
         const result = parseExtendVariables(cssVariables, fileAVariables)
@@ -86,17 +106,17 @@ async function createStyleFiles(resetTheme) {
             processedContent
         )
 
-        const basePath = path.resolve(hostPath, '../src/styles')
+        const basePath = path.resolve(BUILD_CONFIG.ENTRY_PATH, 'styles')
 
         // 确保目录存在
         fs.mkdirSync(basePath, { recursive: true })
 
         // 写入LESS文件
-        const lessOutPut = path.join(basePath, `${cssFileName}.less`)
+        const lessOutPut = path.join(basePath, CONFIG.FILE.VAR)
         fs.writeFileSync(lessOutPut, processedContent)
 
         // 生成并写入CSS变量文件
-        const cssOutPut = path.join(basePath, 'root.css')
+        const cssOutPut = path.join(basePath, CONFIG.FILE.CSS)
         fs.writeFileSync(cssOutPut, addLessVariables(
             {
               export: {
@@ -113,11 +133,14 @@ async function createStyleFiles(resetTheme) {
     }
 }
 
-// 自定义less内置函数处理
+
+/**
+ * 自定义LESS函数
+ */
 const customFunctions = {
   install: function(less, pluginManager, functions) {
     
-    // 辅助函数：检查是否为 CSS 变量（Call 类型）
+    // 检查是否为CSS变量
     function isCSSVariable(color) {
         return color.type === 'Call' && 
                 color.name === 'var' && 
@@ -125,24 +148,24 @@ const customFunctions = {
                 color.args[0].value.indexOf('--') === 0
     }
 
-    // 辅助函数：提取 CSS 变量信息
+    // 提取CSS变量信息
     function extractCSSVariable(callNode) {
         if (callNode.name === 'var') {
             return {
-            varName: callNode.args[0].value,
-            defaultValue: callNode.args[1] ? callNode.args[1] : null
+              varName: callNode.args[0].value,
+              defaultValue: callNode.args[1] ? callNode.args[1] : null
             }
         }
         return null
     }
     
-    // tint 函数实现（支持 Call 类型和静态颜色）
+    // 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(
           [
@@ -154,13 +177,13 @@ const customFunctions = {
         )
     })
     
-    // lighten 函数实现
+    // 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(
@@ -173,63 +196,32 @@ const customFunctions = {
         )
     })
     
-    // fade 函数实现
+    // 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)
     })
   }
 }
 
-// 生成AntdVue主题文件及自定义主题文件
-function createGeneratorTheme(theme) {
-    // 初始化主题
-    const resetTheme = theme || 'dark'
-    // 抛出基础色
-    const notIncludes = ['@white', '@black']
-
-    // 输出自定义样式文件
-    createStyleFiles(resetTheme).then(themeVariables => {
-        // 输出AntdVue样式打包放置public引入
-        const options = {
-            antDir: path.join(hostPath, 'ant-design-vue'),
-            // 指定项目自定义样式文件目录
-            stylesDir: path.join(hostPath, 'ant-design-vue/lib/style/themes'),
-            // 指定项目自定义样式文件目录
-            // stylesDir: path.join(hostPath, '../src/styles'),
-            // 指定自定义主题变量文件路径
-            // varFile: path.join(hostPath, `../src/styles/${resetTheme}.less`),
-            // 列出需要动态替换的主题变量
-            themeVariables: Object.keys(themeVariables).filter(key => !notIncludes.includes(key)),
-            outputFilePath: path.join(hostPath, '../public/static/style/antdVue.less') 
-        }
-        generateTheme(options)
-    })
-}
-
-// 生成传输信息文件
+/**
+ * 生成传输信息文件
+ * @param {string} theme - 主题名称
+ */
 async function createTransferFile(theme) {
     // 输出自定义样式文件
-    createStyleFiles(theme)
-
-    // 默认请求源地址
-    const origin = process.env.VUE_APP_STATIC_URL || 'http://qxfnkj.com'
+    await createStyleFiles(theme)
 
-    const fileName = 'transferData.js'
-
-    const response = await fetch(`${origin}/base-subject/iframe/${fileName}`)
-    if (!response.ok) throw new Error(`${fileName}文件请求失败！`)
-    
-    const responseText = await response.text()
+    const jsContent = await fetchRemoteFiles('IFRAME', CONFIG.FILE.MESSAGE)
 
     // 写入传输文件
-    const outPut = path.join(hostPath, `../src/utils/${fileName}`)
-    fs.writeFileSync(outPut, responseText)
+    const outPut = path.join(BUILD_CONFIG.ENTRY_PATH, `utils/${CONFIG.FILE.MESSAGE}`)
+    fs.writeFileSync(outPut, jsContent) 
 }
 
 module.exports = {

package/extensions/UpdateTheme.js

@@ -2,18 +2,39 @@
 const less = require('less')
 
 // CSS变量搭桥文件名
-const cssFileName = 'vars.module'
 const colorPalette = require('../utils/ColorPalette')
 
-// 获取并解析LESS文件
-async function fetchAndParseLessFile(fileName, isParseVariables) {
-    // 确定请求源地址
-    let origin = 'http://qxfnkj.com'
+// 配置常量
+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') origin = window.location.origin
+    if (typeof window !== 'undefined' && window.location && window.location.origin && process.env.NODE_ENV !== 'development') {
+        requestIP = window.location.origin
+    }
 
-    const response = await fetch(`${origin}/base-subject/themes/${fileName}.less`, {
+    const response = await fetch(`${requestIP}${CONFIG.REQUEST.PATHS[dirPath]}${fileName}`, {
         method: 'GET',
         mode: 'cors'
     })
@@ -22,28 +43,47 @@ async function fetchAndParseLessFile(fileName, isParseVariables) {
     
     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(responseText)
-      : responseText
+      ? await parseLessVariables(lessContent)
+      : lessContent
 }
 
-// 解析LESS变量
+/**
+ * 解析LESS变量
+ * @param {string} content - LESS文件内容
+ */
 async function parseLessVariables(content) {
     try {
-        const lessRoot = await less.parse(
-            content,
-            {
-                javascriptEnabled: true,
-                math: 'always'
-            }
-        )
+        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)
+            if (rule.variable && rule.name) {
                 variables[rule.name] = rule.value.toCSS()
+            }
         })
 
         return variables
@@ -53,23 +93,35 @@ async function parseLessVariables(content) {
     }
 }
 
-// 解析ROOT变量
+
+/**
+ * 解析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*\)/)
+        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 varName = key.trim().replace(/\"/g, '')
         const [lessVar] = varName.split('-')
         const cssVar = `--${varName.slice(1)}`
         const hex = lessVariables[varName]
@@ -79,7 +131,7 @@ function parseExtendVariables(extendVar, lessVariables) {
         // 转换RGB值
         const [r, g, b] = [1, 3, 5].map(offset => 
             parseInt(hex.slice(offset, offset + 2), 16)
-        ) 
+        )
 
         // 添加基础变量
         acc.nonExport[`${lessVar}-rgb`] = `var(${cssVar}-rgb)`
@@ -87,7 +139,7 @@ function parseExtendVariables(extendVar, lessVariables) {
 
         // 处理亮度变量
         extendLight.split(',').forEach(light => {
-            const lightName = light.trim().replace(/"/g, '')
+            const lightName = light.trim().replace(/\"/g, '')
             acc.nonExport[`${lessVar}-${lightName}`] = `var(${cssVar}-${lightName})`
             acc.export[`${cssVar}-${lightName}`] = colorPalette(hex, lightName)
         })
@@ -96,61 +148,75 @@ function parseExtendVariables(extendVar, lessVariables) {
     }, { nonExport: {}, export: {} }) 
 }
 
-// 更新主题
+
+
+/**
+ * 更新主题
+ * @param {string} theme - 主题名称
+ */
 async function updateTheme(theme) {
     if (!less || !less.modifyVars) return
 
     const root = document.documentElement
-    // 并行获取主题变量和CSS变量
-    const [themeVariables, cssVariables] = await Promise.all([
-      fetchAndParseLessFile(theme, true),
-      fetchAndParseLessFile(cssFileName, 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
+    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
+            }
         }
-    }
 
-    await less.modifyVars({
-        ...themeVariables, 
-        ...updateVariables.less
-    }).then(console.log("换肤成功"))
+        // 应用LESS变量更新
+        await less.modifyVars({
+            ...themeVariables, 
+            ...updateVariables.less
+        })
+        
+        console.log("换肤成功")
 
-    if (!Object.keys(updateVariables.css).length) return
+        if (!Object.keys(updateVariables.css).length) return
 
-    // 解析并更新CSS变量
-    const updateCSSViables = {
-        ...updateVariables.css,
-        ...parseExtendVariables(
-            cssVariables, 
-            updateVariables.less
-        ).export
-    }
-    
-    for (const [key, color] of Object.entries(updateCSSViables)) {
-        root.style.setProperty(key, color)
+        // 解析并更新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 = { 
-    cssFileName,
+module.exports = {
+    CONFIG,
     updateTheme,
     parseCSSVariables,
     parseLessVariables,
     parseExtendVariables,
-    fetchAndParseLessFile
+    fetchAndParseLessFile,
+    fetchRemoteFiles
 }

package/package.json

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