web-component-gallery 2.2.1 → 2.2.2

package/extensions/BuildTheme.js

@@ -15,45 +15,37 @@ function extractColor(content, varName) {
 
 /**
  * 向LESS文件添加新变量并保持原有格式
- * @param {string} lessContent - 原始LESS文件内容
  * @param {Object} newVars - 要添加的新变量对象
+ * @param {string} lessContent - 原始LESS文件内容
  * @param {Object} newVars.export - 需要导出的变量对象
  * @param {Object} newVars.nonExport - 不需要导出的变量对象
  * @returns {string} 修改后的LESS文件内容
  */
-function addLessVariables(lessContent, newVars) {
-  const lines = lessContent.split('\n')
-  let exportStartIndex = -1
-
-  for (let i = 0; i < lines.length; i++) {
-    if (lines[i].trim() === ':export {') exportStartIndex = i
-  }
-
-  // 如果没有找到:export块，则添加到文件末尾
-  if (exportStartIndex === -1) exportStartIndex = lines.length
-
-  // 添加非导出变量
-  const addNonExportVars = () => {
-    const newVarLines = ['\n// 扩展变量']
-    for (const [lessVar, cssVar] of Object.entries(newVars.nonExport || {})) {
-      newVarLines.push(`${lessVar}: ${cssVar};`)
+function addLessVariables(newVars, lessContent) {
+  const lines = lessContent?.split('\n') || []
+  const newLines = []
+
+  // 智能添加非导出变量（仅在newVars.nonExport存在时添加）
+  if (newVars.nonExport && Object.keys(newVars.nonExport).length > 0) {
+    newLines.push('\n// 扩展变量')
+    for (const [lessVar, cssVar] of Object.entries(newVars.nonExport)) {
+      newLines.push(`${lessVar}: ${cssVar};`)
     }
-    return newVarLines
   }
 
-  // 添加导出变量
-  const addExportVars = () => {
-    const newVarLines = ['\r:root {']
-    for (const [cssVar, lessVar] of Object.entries(newVars.export || {})) {
-      newVarLines.push(`  ${cssVar}: ${lessVar};`)
+  // 智能添加导出变量（仅在newVars.export存在时添加）
+  if (newVars.export && Object.keys(newVars.export).length > 0) {
+    newLines.push('\n:root {')
+    for (const [cssVar, lessVar] of Object.entries(newVars.export)) {
+      newLines.push(`  ${cssVar}: ${lessVar};`)
     }
-    return [...newVarLines, '}']
+    newLines.push('}')
   }
 
-  // 在适当位置插入新变量
-  lines.splice(exportStartIndex - 1, 0, ...addNonExportVars())
-  // 添加ROOT变量
-  lines.splice(lines.length, 0, ...addExportVars())
+  // 在文件末尾插入新变量
+  if (newLines.length > 0) {
+    lines.splice(lines.length, 0, ...newLines)
+  }
 
   return lines.join('\n')
 }
@@ -86,29 +78,31 @@ async function processLessFiles(theme) {
         const result = parseExtendVariables(cssVariables, fileAVariables)
 
         processedContent = addLessVariables(
-            processedContent,
             {
-                export: {
-                    ...parseCSSVariables(cssVariables), 
-                    ...result.export
-                },
-                nonExport: result.nonExport
-            }
+              nonExport: result.nonExport
+            },
+            processedContent
         )
 
         const basePath = path.resolve(hostPath, '../src/styles')
 
-        // 写入输出文件
-        const outputPath = path.join(basePath, `${cssFileName}.less`)
-        fs.writeFileSync(outputPath, processedContent)
+        // 确保目录存在
+        fs.mkdirSync(basePath, { recursive: true })
 
-        // 转换为 "xxx:111;" 格式
-        // const formattedString = Object.entries(fileAVariables)
-        //     .map(([key, value]) => `${key}: ${value};`)
-        //     .join('\n') // 每行一个键值对
+        // 写入LESS文件
+        const lessOutPut = path.join(basePath, `${cssFileName}.less`)
+        fs.writeFileSync(lessOutPut, processedContent)
 
-        // const themeOutputPath = path.join(basePath, `${theme}.less`)
-        // fs.writeFileSync(themeOutputPath, formattedString)
+        // 生成并写入CSS变量文件
+        const cssOutPut = path.join(basePath, 'root.css')
+        fs.writeFileSync(cssOutPut, addLessVariables(
+            {
+              export: {
+                ...parseCSSVariables(cssVariables), 
+                ...result.export
+              }
+            }
+        ))
 
         return fileAVariables
     } catch (error) {
@@ -184,7 +178,7 @@ const customFunctions = {
             return new less.tree.Quoted('"', `fade(${defaultValue}, ${amount.value}%)`)
         }
         // 处理静态颜色值
-        const alpha = Math.max(0, Math.min(1, color.alpha * (1 - amount.value / 100)))
+        const alpha = Math.max(0, Math.min(1, color.alpha * (amount.value / 100)))
         return new less.tree.Color(color.rgb, alpha)
     })
   }

package/extensions/UpdateTheme.js

@@ -100,26 +100,46 @@ function parseExtendVariables(extendVar, lessVariables) {
 async function updateTheme(theme) {
     if (!less || !less.modifyVars) return
 
-    const root = document.documentElement 
-    // 获取主题变量最新数据
-    const themeVariables = await fetchAndParseLessFile(theme, true)
-    const cssVariables = await fetchAndParseLessFile(cssFileName, true)
+    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 = {}
+    const updateVariables = {
+        css: {},
+        less: {}
+    }
     
-    for (const [key, colorA] of Object.entries(resetValue)) { 
-        // 对比变量的旧数据，判断是否改动
+    // 对比新旧变量值，收集需要更新的变量
+    for (const [key, colorA] of Object.entries(resetValue)) {
         const colorB = getComputedStyle(root).getPropertyValue(key).trim()
-        // 存储改动数据
-        if (colorA !== colorB) updateVariables[`@${key.slice(2)}`] = colorA
+        // 只有当颜色值确实发生变化时才更新
+        if (colorA !== colorB) { 
+            updateVariables.css[key] = colorA
+            // 将CSS变量名转换为LESS变量名
+            updateVariables.less[`@${key.slice(2)}`] = colorA
+        }
     }
 
-    less.modifyVars({...themeVariables, ...updateVariables}).then(console.log("换肤成功"))
+    await less.modifyVars({
+        ...themeVariables, 
+        ...updateVariables.less
+    }).then(console.log("换肤成功"))
 
-    if (!Object.keys(updateVariables).length) return
+    if (!Object.keys(updateVariables.css).length) return
 
-    const updateCSSViables = parseExtendVariables(cssVariables, updateVariables).export
+    // 解析并更新CSS变量
+    const updateCSSViables = {
+        ...updateVariables.css,
+        ...parseExtendVariables(
+            cssVariables, 
+            updateVariables.less
+        ).export
+    }
     
     for (const [key, color] of Object.entries(updateCSSViables)) {
         root.style.setProperty(key, color)

package/lib/browse/style/index.less

@@ -1,4 +1,3 @@
 iframe {
-    width: 100%;
-    height: 100%;
+    .layout();
 }

package/lib/form-comp/ASliderVerify.vue

@@ -0,0 +1,283 @@
+<template>
+    <div
+      ref="sliderContainer"
+      class="slider-wrapper"
+      :style="sliderWrapperStyle"
+      @mousemove="handleDragMove"
+      @mouseup="handleDragEnd"
+      @mouseleave="handleDragEnd"
+      @touchmove="handleDragMove"
+      @touchend="handleDragEnd"
+    >
+      <!-- 背景轨道 -->
+      <div class="slider-track">
+        <!-- 进度条 -->
+        <div
+          class="slider-progress"
+          :class="{ 'progress-resetting': isResetting }"
+          ref="progressBar"
+          :style="progressBarStyle"
+        />
+        
+        <!-- 提示文字 -->
+        <div
+          class="slider-text"
+          ref="sliderText"
+          :style="sliderTextStyle"
+        >
+          <span v-if="!isVerified">{{ dragText }}</span>
+          <span v-else class="success-text">{{ successText }}</span>
+        </div>
+      </div>
+
+      <!-- 滑块手柄 -->
+      <div
+        class="slider-handle"
+        :class="{
+          'handle-resetting': isResetting,
+          'handle-success': isVerified
+        }"
+        @mousedown="handleDragStart"
+        @touchstart="handleDragStart"
+        ref="sliderHandle"
+        :style="sliderHandleStyle"
+      >
+        <IconFont
+          :type="currentIconType"
+          :style="{ fontSize: '16px', color: iconColor }"
+        />
+      </div>
+    </div>
+</template>
+
+<script>
+
+import debounce from 'lodash/debounce'
+import IconFont from '../icon-font'
+
+export default {
+  name: 'SliderVerify',
+  components: { IconFont },
+  props: {
+    successText: {
+      type: String,
+      default: '验证成功'
+    },
+    dragText: {
+      type: String,
+      default: '请按住滑块拖动到最右侧'
+    },
+    sliderHeight: {
+      type: Number,
+      default: 40
+    },
+    handleSize: {
+      type: Number,
+      default: 40
+    },
+    verifyThreshold: {
+      type: Number,
+      default: 85,
+      validator: (value) => value >= 0 && value <= 100
+    }
+  },
+  
+  data() {
+    return {
+      // 拖拽状态
+      isDragging: false,
+      // 起始位置
+      startX: 0,
+      // 当前位置
+      currentX: 0,
+      // 是否通过
+      isVerified: false,
+      // 是否重置
+      isResetting: false,
+      // 容器宽度
+      containerWidth: 0,
+      // 拖拽开始时间
+      dragStartTime: null
+    }
+  },
+  
+  computed: {
+    sliderWrapperStyle() {
+      return {
+        height: `${this.sliderHeight}px`
+      }
+    },
+    
+    progressBarStyle() {
+      return {
+        width: `${this.progressWidth}px`,
+        background: this.isVerified ? '#52c41a' : '#1890ff',
+        transition: this.isResetting ? 'width 0.5s ease' : 'none'
+      }
+    },
+    
+    sliderHandleStyle() {
+      return {
+        left: `${this.handlePosition}px`,
+        width: `${this.handleSize}px`,
+        height: `${this.handleSize}px`,
+        transition: this.isResetting ? 'left 0.5s ease' : 'none'
+      }
+    },
+    
+    sliderTextStyle() {
+      return {
+        lineHeight: `${this.sliderHeight}px`,
+        color: this.isVerified ? '#fff' : 'transparent'
+      }
+    },
+    
+    currentIconType() {
+      return this.isVerified ? 'passSlider' : 'arrowSlider'
+    },
+    
+    iconColor() {
+      return this.isVerified ? '#01DC66' : '#666'
+    },
+    
+    progressWidth() {
+      if (this.isVerified) {
+        return this.containerWidth
+      }
+      return this.currentX + this.handleSize / 2
+    },
+    
+    handlePosition() {
+      if (this.isVerified) {
+        return this.containerWidth - this.handleSize
+      }
+      return this.currentX
+    },
+    
+    maxDragDistance() {
+      return this.containerWidth - this.handleSize
+    },
+    
+    thresholdDistance() {
+      return (this.verifyThreshold / 100) * this.maxDragDistance
+    }
+  }, 
+
+  watch: {
+    isVerified(newVal) {
+      this.$emit('update:isVerified', newVal)
+    }
+  },
+  
+  mounted() {
+    this.initSlider()
+    this.$bus.$onWindow(this, 'resize', this.handleWindowResize)
+  },
+  
+  methods: {
+    initSlider() {
+      this.updateContainerWidth()
+      this.setupCSSVariables()
+    },
+
+    updateContainerWidth() {
+      if (this.$refs.sliderContainer) {
+        this.containerWidth = this.$refs.sliderContainer.offsetWidth
+      }
+    },
+    
+    setupCSSVariables() {
+      const container = this.$refs.sliderContainer
+      if (container) {
+        const halfWidth = Math.floor(this.containerWidth / 2)
+        container.style.setProperty('--slider-width', `${this.containerWidth}px`)
+        container.style.setProperty('--half-width', `${halfWidth}px`)
+        container.style.setProperty('--negative-half-width', `-${halfWidth}px`)
+      }
+    },
+    
+    handleDragStart(event) {
+      if (this.isVerified) return
+      
+      this.isDragging = true
+      this.dragStartTime = Date.now()
+      const handle = this.$refs.sliderHandle
+      const currentLeft = parseInt(handle.style.left || '0', 10)
+      
+      this.startX = (event.pageX || event.touches[0].pageX) - currentLeft
+    },
+    
+    handleDragMove(event) {
+      if (!this.isDragging || this.isVerified) return
+      
+      const currentX = (event.pageX || event.touches[0].pageX) - this.startX
+      
+      if (currentX > 0 && currentX <= this.maxDragDistance) {
+        this.currentX = currentX
+        this.$emit('dragging', {
+          currentX,
+          progress: (currentX / this.maxDragDistance) * 100
+        })
+      }
+    },
+    
+    handleDragEnd(event) {
+      if (!this.isDragging || this.isVerified) return
+      
+      const currentX = (event.pageX || event.changedTouches[0].pageX) - this.startX
+      
+      if (currentX >= this.thresholdDistance) {
+          this.handleVerifySuccess()
+        } else {
+          this.handleVerifyFail()
+        }
+        
+        this.isDragging = false
+    },
+    
+    handleVerifySuccess() {
+      this.isVerified = true
+      this.currentX = this.maxDragDistance
+      const dragDuration = Date.now() - this.dragStartTime
+      
+      this.$emit('verify-success', {
+        duration: dragDuration,
+        endTime: Date.now()
+      })
+    },
+    
+    handleVerifyFail() {
+      this.isResetting = true
+      
+      setTimeout(() => {
+        this.resetSlider()
+        this.isResetting = false
+      }, 500)
+    },
+    
+    resetSlider() {
+      this.currentX = 0
+      this.isVerified = false
+      
+      const handle = this.$refs.sliderHandle
+      const progressBar = this.$refs.progressBar
+      const text = this.$refs.sliderText
+        
+      if (handle) handle.style.left = '0px'
+      if (progressBar) progressBar.style.width = '0px'
+      
+      if (text) {
+        // 重新设置动画
+        // text.style.animation = 'slidetounlock 3s infinite'
+        text.style.color = 'transparent'
+      }
+    },
+
+    handleWindowResize: debounce(function() {
+      this.updateContainerWidth()
+      this.setupCSSVariables()
+      this.resetSlider()
+    }, 250)
+  }
+}
+</script>

package/lib/form-comp/index.js

@@ -13,6 +13,8 @@ import ARangePicker from './ARangePicker.vue'
 import ADayTimePicker from './ADayTimePicker.vue' 
 /* 文件上传选择器 */
 import AUpload from './AUpload.vue' 
+/* 滑块 */
+import ASliderVerify from './ASliderVerify.vue'
  
 const components = {
     ACascaderMultiple,
@@ -21,7 +23,8 @@ const components = {
     ATagsInput,
     ARangePicker,
     ADayTimePicker,
-    AUpload
+    AUpload,
+    ASliderVerify
 }
 
 const install = function (Vue) { 

package/lib/form-comp/style/ASliderVerify.less

@@ -0,0 +1,94 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
+.slider-wrapper {
+  position: relative;
+  overflow: hidden;
+
+  .slider-track {
+    position: relative;
+    background: fade(@black, 10%);
+    border-radius: @border-radius-base;
+    .layout();
+  }
+
+  .slider-progress {
+    height: 100%;
+    position: absolute;
+    background: @primary-color;
+    border-radius: @border-radius-base 0 0 @border-radius-base;
+    transition: width 0.3s ease;
+  }
+
+  .slider-text {
+    top: 0;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    font-size: @font-size-base;
+    background: -webkit-gradient(
+      linear,
+      left top,
+      right top,
+      color-stop(0, @black),
+      color-stop(0.4, @black),
+      color-stop(0.5, @white),
+      color-stop(0.6, @black),
+      color-stop(1, @black)
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: slidetounlock 3s infinite;
+    .layout();
+  }
+
+  .success-text {
+    color: @white;
+    -webkit-text-fill-color: @white;
+    animation: none;
+  }
+
+  .slider-handle {
+    top: 0;
+    left: 0;
+    z-index: 2;
+    cursor: move;
+    position: absolute;
+    background: @white;
+    border: 1px solid fade(@black, 10%);
+    border-radius: @border-radius-base 0 0 @border-radius-base;
+    transition: left 0.3s ease, background 0.3s ease;
+    .flex-mixins();
+  }
+
+  .handle-success {
+    border-color: @success-color;
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+  }
+
+  .handle-resetting {
+    left: 0px;
+    transition: left 0.5s ease;
+  }
+
+  .progress-resetting {
+    width: 0px;
+    transition: width 0.5s ease;
+  }
+}
+
+/* 触摸设备优化 */
+@media (hover: none) and (pointer: coarse) {
+  .slider-handle {
+    cursor: pointer;
+  }
+}
+
+@keyframes slidetounlock {
+  0% {
+    background-position: var(--negative-half-width) 0;
+  }
+  100% {
+    background-position: var(--half-width) 0;
+  }
+}

package/lib/form-comp/style/index.less

@@ -4,4 +4,5 @@
 @import './ASelectCustom.less';
 @import './ATagsInput.less';
 @import './ADayTimePicker.less';
-@import './AUpload.less';
+@import './AUpload.less';
+@import './ADragVerify.less';

package/lib/modal/index.jsx

@@ -25,7 +25,7 @@ const ModalComp = {
   },
   methods: {
     handleBlank() {
-      window.open(this.$attrs.blankUrl, '_blank')
+      window.open(this.$attrs.externalLink, '_blank')
     },
     handleConvert() {
       const currentIndex = this.modalModes.indexOf(this.internalMode)
@@ -62,7 +62,7 @@ const ModalComp = {
                 on={{ click: this.handleConvert }}
               />
               {
-                $attrs.blankUrl &&
+                $attrs.externalLink &&
                 <IconFont
                   type="modal_blank"
                   on={{ click: this.handleBlank }}

package/package.json

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