web-component-gallery 2.1.21 → 2.2.0

package/extensions/BuildTheme.js

@@ -1,6 +1,8 @@
 // 引入所需依赖
 const fs = require("fs")
 const path = require("path")
+// 指向宿主项目路径 ../../为node_modules路径
+const hostPath = path.join(__dirname, '../../')
 const { generateTheme } = require('antd-theme-generator')
 const { cssFileName, parseCSSVariables, parseLessVariables, parseExtendVariables, fetchAndParseLessFile } = require('./UpdateTheme')
 
@@ -28,7 +30,7 @@ function addLessVariables(lessContent, newVars) {
   }
 
   // 如果没有找到:export块，则添加到文件末尾
-  if (exportStartIndex === -1) exportStartIndex = lines.length 
+  if (exportStartIndex === -1) exportStartIndex = lines.length
 
   // 添加非导出变量
   const addNonExportVars = () => {
@@ -69,8 +71,8 @@ async function processLessFiles(theme) {
         // 处理颜色变量
         let processedContent = fileBContent
 
-        for (const [key, colorA] of Object.entries(fileAVariables)) { 
-            const colorB = extractColor(fileBContent, key) 
+        for (const [key, colorA] of Object.entries(fileAVariables)) {
+            const colorB = extractColor(fileBContent, key)
 
             if (colorB) {
                 processedContent = processedContent.replace(
@@ -94,11 +96,21 @@ async function processLessFiles(theme) {
             }
         )
 
+        const basePath = path.resolve(hostPath, '../src/styles')
+
         // 写入输出文件
-        const outputPath = path.join(__dirname, 'src', 'styles', `${cssFileName}.less`)
+        const outputPath = path.join(basePath, `${cssFileName}.less`)
         fs.writeFileSync(outputPath, processedContent)
 
-        return '文件处理完成'
+        // 转换为 "xxx:111;" 格式
+        // const formattedString = Object.entries(fileAVariables)
+        //     .map(([key, value]) => `${key}: ${value};`)
+        //     .join('\n') // 每行一个键值对
+
+        // const themeOutputPath = path.join(basePath, `${theme}.less`)
+        // fs.writeFileSync(themeOutputPath, formattedString)
+
+        return fileAVariables
     } catch (error) {
         console.error('处理失败:', error)
         throw error
@@ -107,32 +119,101 @@ async function processLessFiles(theme) {
 
 // 自定义less内置函数处理
 const customFunctions = {
-    install: function (less) {
-        const funcs = ['fade', 'ceil', 'tint', 'shade', 'lighten']
-        funcs.forEach(func => {
-            less.functions.functionRegistry.add(func, function () {
-                const args = Array.from(arguments)
-                    .map(arg => arg.toCSS ? arg.toCSS() : arg.value)
-                return new less.tree.Quoted('~"', `${func}(${args.join(',')})`)
-            })
-        })
+  install: function(less, pluginManager, functions) {
+    
+    // 辅助函数：检查是否为 CSS 变量（Call 类型）
+    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 函数实现（支持 Call 类型和静态颜色）
+    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 * (1 - amount.value / 100)))
+        return new less.tree.Color(color.rgb, alpha)
+    })
+  }
 }
 
 // 生成AntdVue主题文件及自定义主题文件
 function createGeneratorTheme(theme) {
     // 初始化主题
     const resetTheme = theme || 'dark'
+    // 抛出基础色
+    const notIncludes = ['@white', '@black']
 
-    // 输出AntdVue样式打包放置public引入
-    const options = {
-        antDir: path.join(__dirname, 'node_modules/ant-design-vue'),
-        stylesDir: path.join(__dirname, 'node_modules/ant-design-vue/lib/style/themes'),
-        outputFilePath: path.join(__dirname, 'public/static/style/antdVue.less')
-    }
-    generateTheme(options)
     // 输出自定义样式文件
-    processLessFiles(resetTheme)
+    processLessFiles(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)
+    })
 }
 
 module.exports = {

package/extensions/UpdateTheme.js

@@ -7,14 +7,21 @@ const colorPalette = require('../utils/ColorPalette')
 
 // 获取并解析LESS文件
 async function fetchAndParseLessFile(fileName, isParseVariables) {
-    // 默认值需要给一个内外网都能访问到的固定地址
-    let origin = process.env.VUE_APP_API_BASE_URL || 'http://qxfnkj.com'
+    // 确定请求源地址
+    let origin = 'http://qxfnkj.com'
+    
+    // 浏览器环境：使用当前页面的origin
+    if (typeof window !== 'undefined' && window.location && window.location.origin && process.env.NODE_ENV !== 'development') origin = window.location.origin
+
     const response = await fetch(`${origin}/base-subject/themes/${fileName}.less`)
+    
+    if (!response.ok) throw new Error(`${fileName}文件请求失败！`)
+    
     const responseText = await response.text()
 
     return isParseVariables
-        ? await parseLessVariables(responseText)
-        : responseText
+      ? await parseLessVariables(responseText)
+      : responseText
 }
 
 // 解析LESS变量
@@ -105,11 +112,11 @@ async function updateTheme(theme) {
         if (colorA !== colorB) updateVariables[`@${key.slice(2)}`] = colorA
     }
 
+    less.modifyVars({...themeVariables, ...updateVariables}).then(console.log("换肤成功"))
+
     if (!Object.keys(updateVariables).length) return
 
     const updateCSSViables = parseExtendVariables(cssVariables, updateVariables).export
-
-    less.modifyVars(updateVariables).then(console.log("换肤成功")) 
     
     for (const [key, color] of Object.entries(updateCSSViables)) {
         root.style.setProperty(key, color)

package/extensions/index.js

@@ -22,7 +22,7 @@ import PageLoading from "./PageLoading"
  * 全局切换主题 
  * @theme 主题key 使用方法: this.$setTheme(@theme)
  * */
-// import setTheme from './Theme'
+import { updateTheme } from './UpdateTheme'
 
 /** 
  * 全局挂载组件自定义指令 
@@ -57,7 +57,7 @@ export default {
     /** 加载便捷弹窗等 */
     Vue.use(Dialog)
     Vue.use(PageLoading)
-    // Vue.use(setTheme)
+    Vue.prototype.$setTheme = updateTheme
 
     // 指令注册
     Object.keys(Directives).forEach(key => {

package/lib/modal/index.jsx

@@ -3,7 +3,7 @@ import { Modal } from 'ant-design-vue/es'
 import IconFont from '../icon-font'
 
 const ModalProps = {
-  mode: PropTypes.string.def('small'),
+  size: PropTypes.string.def('small'),
   title: PropTypes.string.def('标题'),
   visible: PropTypes.bool.def(false),
   cancelHandle: PropTypes.func
@@ -15,11 +15,11 @@ const ModalComp = {
   data() {
     return {
       modalModes: ['small', 'middle', 'large', 'max'],
-      internalMode: this.mode
+      internalMode: this.size
     }
   },
   watch: {
-    mode(newVal) {
+    size(newVal) {
       this.internalMode = newVal
     }
   },
@@ -30,7 +30,7 @@ const ModalComp = {
     handleConvert() {
       const currentIndex = this.modalModes.indexOf(this.internalMode)
       const isLastMode = currentIndex === this.modalModes.length - 1
-      this.internalMode = isLastMode ? this.mode : this.modalModes[currentIndex + 1]
+      this.internalMode = isLastMode ? this.size : this.modalModes[currentIndex + 1]
     }
   },
   render() {
@@ -53,7 +53,7 @@ const ModalComp = {
           ...this.$listeners
         }}
       >
-        {this.mode !== 'screen' && (
+        {this.size !== 'screen' && (
           <div slot="title" class="AntModal__Title">
             <span>{this.title}</span> 
             <div class="AntModal__Title__Blank">

package/lib/style/page.less

@@ -1,6 +1,3 @@
-@import '~ant-design-vue/lib/style/themes/default.less';
-@import './mixins.less'; 
-
 html,
 body,
 #app, #root {

package/package.json

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