xt-element-ui 1.0.8 → 1.0.9

package/src/styles/{theme.scss → vars.scss}

@@ -1,4 +1,4 @@
-@use './variables.scss' as *;
+@import './theme/index.scss';
 
 :root {
   // 主色调系列
@@ -64,39 +64,82 @@
   // 过渡动画
   --xt-transition-duration: #{$xt-transition-duration};
   --xt-transition-duration-fast: #{$xt-transition-duration-fast};
+
+  // 按钮专用变量
+  --xt-button-height: #{$xt-button-height};
+  --xt-button-padding-x: #{$xt-button-padding-x};
+  --xt-button-padding-y: #{$xt-button-padding-y};
+  --xt-button-font-weight: #{$xt-button-font-weight};
+  --xt-button-border-width: #{$xt-button-border-width};
+  --xt-button-transition: #{$xt-button-transition};
+
+  // 卡片专用变量
+  --xt-card-bg-color: #{$xt-card-bg-color};
+  --xt-card-border-color: #{$xt-card-border-color};
+  --xt-card-border-radius: #{$xt-card-border-radius};
+  --xt-card-padding: #{$xt-card-padding};
+  --xt-card-header-padding: #{$xt-card-header-padding};
+  --xt-card-shadow: #{$xt-card-shadow};
+
+  // 卡片项专用变量
+  --xt-card-item-min-height: #{$xt-card-item-min-height};
+  --xt-card-item-gap: #{$xt-card-item-gap};
+  --xt-card-item-border-width: #{$xt-card-item-border-width};
+
+  // 输入框专用变量
+  --xt-input-height: #{$xt-input-height};
+  --xt-input-padding-x: #{$xt-input-padding-x};
+  --xt-input-bg-color: #{$xt-input-bg-color};
+  --xt-input-border-color: #{$xt-input-border-color};
+  --xt-input-text-color: #{$xt-input-text-color};
+  --xt-input-placeholder-color: #{$xt-input-placeholder-color};
+
+  // FlexBox 专用变量
+  --xt-flex-box-gap: #{$xt-flex-box-gap};
 }
 
-// 暗色主题 - 只控制颜色
-[data-theme="dark"] {
-  --xt-color-primary: #{$xt-color-primary};
-  --xt-color-success: #67C23A;
-  --xt-color-warning: #E6A23C;
-  --xt-color-danger: #F56C6C;
-  --xt-color-info: #909399;
-
-  --xt-color-text-primary: rgba(255, 255, 255, 0.95);
-  --xt-color-text-regular: rgba(255, 255, 255, 0.8);
-  --xt-color-text-secondary: rgba(255, 255, 255, 0.6);
-  --xt-color-text-placeholder: rgba(255, 255, 255, 0.4);
-  --xt-color-text-disabled: rgba(255, 255, 255, 0.3);
-
-  --xt-color-bg-primary: #1f1f1f;
-  --xt-color-bg-secondary: #2d2d2d;
-  --xt-color-bg-hover: #3d3d3d;
-  --xt-color-bg-container: #1f1f1f;
-  --xt-color-bg-overlay: #2d2d2d;
-
-  --xt-color-border: #434343;
-  --xt-color-border-light: #3d3d3d;
-  --xt-color-border-lighter: #3d3d3d;
-  --xt-color-border-extra-light: #434343;
+// 暗色主题
+html.dark, html[data-theme="dark"] {
+  --xt-color-primary: var(--xt-color-primary);
+  --xt-color-success: #{$xt-dark-color-success};
+  --xt-color-warning: #{$xt-dark-color-warning};
+  --xt-color-danger: #{$xt-dark-color-danger};
+  --xt-color-info: #{$xt-dark-color-info};
+
+  --xt-color-text-primary: #{$xt-dark-color-text-primary};
+  --xt-color-text-regular: #{$xt-dark-color-text-regular};
+  --xt-color-text-secondary: #{$xt-dark-color-text-secondary};
+  --xt-color-text-placeholder: #{$xt-dark-color-text-placeholder};
+  --xt-color-text-disabled: #{$xt-dark-color-text-disabled};
+
+  --xt-color-bg-primary: #{$xt-dark-color-bg-primary};
+  --xt-color-bg-secondary: #{$xt-dark-color-bg-secondary};
+  --xt-color-bg-hover: #{$xt-dark-color-bg-hover};
+  --xt-color-bg-container: #{$xt-dark-color-bg-container};
+  --xt-color-bg-overlay: #{$xt-dark-color-bg-overlay};
+
+  --xt-color-border: #{$xt-dark-color-border};
+  --xt-color-border-light: #{$xt-dark-color-border-light};
+  --xt-color-border-lighter: #{$xt-dark-color-border-lighter};
+  --xt-color-border-extra-light: #{$xt-dark-color-border-extra-light};
+
+  // 暗色主题下的组件变量
+  --xt-card-bg-color: #{$xt-dark-color-bg-primary};
+  --xt-card-border-color: #{$xt-dark-color-border};
+  --xt-input-bg-color: #{$xt-dark-color-bg-secondary};
+  --xt-input-border-color: #{$xt-dark-color-border};
+  --xt-input-text-color: #{$xt-dark-color-text-primary};
+  --xt-input-placeholder-color: #{$xt-dark-color-text-placeholder};
+
+  // 暗色主题按钮颜色变量
+  --xt-dark-button-primary-bg: #{$xt-dark-button-primary-bg};
+  --xt-dark-button-success-bg: #{$xt-dark-button-success-bg};
+  --xt-dark-button-warning-bg: #{$xt-dark-button-warning-bg};
+  --xt-dark-button-danger-bg: #{$xt-dark-button-danger-bg};
+  --xt-dark-button-info-bg: #{$xt-dark-button-info-bg};
 }
 
-// ===========================
 // 字体大小主题（基于增量）
-// ===========================
-
-// 小字体主题 - 增量 0px
 [data-size="small"] {
   --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-small};
   --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-small};
@@ -106,7 +149,6 @@
   --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-small};
 }
 
-// 中等字体主题 - 增量 2px
 [data-size="medium"] {
   --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-medium};
   --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-medium};
@@ -116,7 +158,6 @@
   --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-medium};
 }
 
-// 大字体主题 - 增量 4px
 [data-size="large"] {
   --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-large};
   --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-large};

package/src/utils/index.js

@@ -1,124 +1,195 @@
-
-// 默认配置
-const defaultConfig = {
-    theme: 'light',
-    size: 'medium',
-    primaryColor: '#1890ff'
-  }
-  
-  // 当前配置
-  let currentConfig = { ...defaultConfig }
-  
-  // 配置变更事件处理
-  const configChangeListeners = []
-  
-  const emitConfigChange = function(key, value) {
-    configChangeListeners.forEach(listener => {
-      listener(key, value)
-    })
-  }
-  
-  // 获取所有配置
-  export const getConfig = function() {
-    return { ...currentConfig }
-  }
-  
-  // 设置全局配置
-  export const setConfig = function(config) {
-    if (typeof config !== 'object' || config === null) {
-      console.warn('[XtElementUI] setConfig 必须传入对象参数')
-      return
-    }
-  
-    if (config.theme !== undefined) {
-      setTheme(config.theme)
-    }
-    if (config.size !== undefined) {
-      setSize(config.size)
-    }
-    if (config.primaryColor !== undefined) {
-      setPrimaryColor(config.primaryColor)
-    }
-  }
-  
-
-// 设置主题
-export const setTheme = function(theme) {
-    const validThemes = ['light', 'dark', 'compact']
-    if (!validThemes.includes(theme)) {
-      console.warn(`[XtElementUI] 无效的主题值: ${theme}，可选值: ${validThemes.join(', ')}`)
-      return
-    }
-    
-    currentConfig.theme = theme
-    document.documentElement.setAttribute('data-theme', theme)
-    emitConfigChange('theme', theme)
-  }
-  
-  // 设置字体大小
-  export const setSize = function(size) {
-    const validSizes = ['small', 'medium', 'large']
-    if (!validSizes.includes(size)) {
-      console.warn(`[XtElementUI] 无效的大小值: ${size}，可选值: ${validSizes.join(', ')}`)
-      return
-    }
-    
-    currentConfig.size = size
-    document.documentElement.setAttribute('data-size', size)
-    emitConfigChange('size', size)
-  }
-  
-  // 设置主色调
-  export const setPrimaryColor = function(color) {
-    // 简单的颜色格式验证
-    const colorRegex = /^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/
-    if (!colorRegex.test(color)) {
-      console.warn(`[XtElementUI] 无效的颜色值: ${color}，请使用十六进制颜色格式，如 #1890ff`)
-      return
-    }
-    
-    currentConfig.primaryColor = color
-    document.documentElement.style.setProperty('--xt-color-primary', color)
-    emitConfigChange('primaryColor', color)
-  }
-  
-  // 获取当前主题
-  export const getTheme = function() {
-    return currentConfig.theme
-  }
-  
-  // 获取当前字体大小
-  export const getSize = function() {
-    return currentConfig.size
-  }
-  
-  // 获取当前主色调
-  export const getPrimaryColor = function() {
-    return currentConfig.primaryColor
-  }
-  
-  // 重置为默认配置
-  export const resetConfig = function() {
-    setConfig(defaultConfig)
-  }
-  
-  // 监听配置变更
-  export const onConfigChange = function(listener) {
-    if (typeof listener === 'function') {
-      configChangeListeners.push(listener)
-      return function() {
-        const index = configChangeListeners.indexOf(listener)
-        if (index > -1) {
-          configChangeListeners.splice(index, 1)
-        }
-      }
-    } else {
-      console.warn('[XtElementUI] onConfigChange 必须传入函数')
-    }
-  }
-
-  export default {
-    setTheme,
-    setSize,
-    setPrimaryColor
-  }
+// 默认配置
+const defaultConfig = {
+    theme: 'light',
+    size: 'medium',
+    primaryColor: '#409EFF'
+}
+
+// 当前配置
+let currentConfig = { ...defaultConfig }
+
+// 调试：输出初始化信息
+console.log('[XtElementUI] utils initialized with currentConfig:', currentConfig)
+
+// 配置变更事件处理
+const configChangeListeners = []
+
+const emitConfigChange = function(key, value) {
+  configChangeListeners.forEach(listener => {
+    listener(key, value)
+  })
+}
+
+// 获取所有配置
+export const getConfig = function() {
+  return { ...currentConfig }
+}
+
+// 设置全局配置
+export const setConfig = function(config) {
+  if (typeof config !== 'object' || config === null) {
+    console.warn('[XtElementUI] setConfig 必须传入对象参数')
+    return
+  }
+
+  if (config.theme !== undefined) {
+    setTheme(config.theme)
+  }
+  if (config.size !== undefined) {
+    setSize(config.size)
+  }
+  if (config.primaryColor !== undefined) {
+    setPrimaryColor(config.primaryColor)
+  }
+}
+
+
+// 设置主题
+export const setTheme = function(theme) {
+    const validThemes = ['light', 'dark']
+    if (!validThemes.includes(theme)) {
+      console.warn(`[XtElementUI] 无效的主题值: ${theme}，可选值: ${validThemes.join(', ')}`)
+      return
+    }
+    
+    currentConfig.theme = theme
+    const root = document.documentElement
+    
+    // 使用类名方式切换主题（兼容 Element Plus 风格）
+    if (theme === 'dark') {
+      root.classList.add('dark')
+      root.setAttribute('data-theme', 'dark')
+    } else {
+      root.classList.remove('dark')
+      root.removeAttribute('data-theme')
+    }
+    
+    emitConfigChange('theme', theme)
+}
+
+// 设置字体大小
+export const setSize = function(size) {
+    const validSizes = ['small', 'medium', 'large']
+    if (!validSizes.includes(size)) {
+      console.warn(`[XtElementUI] 无效的大小值: ${size}，可选值: ${validSizes.join(', ')}`)
+      return
+    }
+    
+    currentConfig.size = size
+    document.documentElement.setAttribute('data-size', size)
+    emitConfigChange('size', size)
+}
+
+// 将十六进制颜色转换为 RGB 对象
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null
+}
+
+// 将 RGB 对象转换为十六进制颜色
+function rgbToHex(r, g, b) {
+    return '#' + [r, g, b].map(x => {
+        const hex = x.toString(16)
+        return hex.length === 1 ? '0' + hex : hex
+    }).join('')
+}
+
+// 计算浅色系列（混合白色）
+function lightenColor(hex, percent) {
+    const rgb = hexToRgb(hex)
+    if (!rgb) return hex
+    
+    const amount = Math.round(2.55 * percent)
+    const r = Math.min(255, rgb.r + amount)
+    const g = Math.min(255, rgb.g + amount)
+    const b = Math.min(255, rgb.b + amount)
+    
+    return rgbToHex(r, g, b)
+}
+
+// 设置主色调
+export const setPrimaryColor = function(color) {
+    // 颜色格式验证（支持 3/6/8 位十六进制）
+    const colorRegex = /^#[0-9A-Fa-f]{3}$|^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{8}$/
+    if (!colorRegex.test(color)) {
+      console.warn(`[XtElementUI] 无效的颜色值: ${color}，请使用十六进制颜色格式，如 #1890ff`)
+      return
+    }
+
+    // 转换为 6 位十六进制（去掉透明度）
+    let validColor = color
+    if (color.length === 4) {
+      // #RGB 转换为 #RRGGBB
+      validColor = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
+    } else if (color.length === 9) {
+      // #RRGGBBAA 转换为 #RRGGBB（去掉 Alpha）
+      validColor = color.substring(0, 7)
+    }
+
+    currentConfig.primaryColor = validColor
+    
+    // 设置主色调
+    document.documentElement.style.setProperty('--xt-color-primary', validColor)
+    
+    // 动态计算并设置浅色系列
+    document.documentElement.style.setProperty('--xt-color-primary-light-3', lightenColor(validColor, 30))
+    document.documentElement.style.setProperty('--xt-color-primary-light-5', lightenColor(validColor, 50))
+    document.documentElement.style.setProperty('--xt-color-primary-light-7', lightenColor(validColor, 70))
+    document.documentElement.style.setProperty('--xt-color-primary-light-8', lightenColor(validColor, 80))
+    document.documentElement.style.setProperty('--xt-color-primary-light-9', lightenColor(validColor, 90))
+    
+    emitConfigChange('primaryColor', validColor)
+    console.log('[XtElementUI] 主色调已设置为:', validColor)
+}
+
+// 获取当前主题
+export const getTheme = function() {
+    return currentConfig.theme
+}
+
+// 获取当前字体大小
+export const getSize = function() {
+    return currentConfig.size
+}
+
+// 获取当前主色调
+export const getPrimaryColor = function() {
+    return currentConfig.primaryColor
+}
+
+// 重置为默认配置
+export const resetConfig = function() {
+    setConfig(defaultConfig)
+}
+
+// 监听配置变更
+export const onConfigChange = function(listener) {
+    if (typeof listener === 'function') {
+      configChangeListeners.push(listener)
+      return function() {
+        const index = configChangeListeners.indexOf(listener)
+        if (index > -1) {
+          configChangeListeners.splice(index, 1)
+        }
+      }
+    } else {
+      console.warn('[XtElementUI] onConfigChange 必须传入函数')
+    }
+}
+
+export default {
+    setTheme,
+    setSize,
+    setPrimaryColor,
+    getConfig,
+    setConfig,
+    getTheme,
+    getSize,
+    getPrimaryColor,
+    resetConfig,
+    onConfigChange
+}