xt-element-ui 1.0.8 → 1.1.0

package/src/styles/theme/font.scss

@@ -0,0 +1,10 @@
+$xt-font-size-extra-large: 20px;             // 特大字体基础值
+$xt-font-size-large: 18px;                   // 大字体基础值
+$xt-font-size-medium: 16px;                  // 中等字体基础值
+$xt-font-size-base: 14px;                    // 基准字体 - Element UI 默认
+$xt-font-size-small: 13px;                   // 小字体基础值
+$xt-font-size-extra-small: 12px;             // 特小字体基础值
+
+$xt-font-size-increment-small: 0px;          // 小尺寸增量
+$xt-font-size-increment-medium: 2px;         // 中尺寸增量
+$xt-font-size-increment-large: 4px;          // 大尺寸增量

package/src/styles/theme/index.scss

@@ -0,0 +1,11 @@
+@import './colors.scss';
+@import './typography.scss';
+@import './background.scss';
+@import './borders.scss';
+@import './font.scss';
+@import './spacing.scss';
+@import './border-radius.scss';
+@import './shadows.scss';
+@import './transitions.scss';
+@import './dark-variables.scss';
+@import './component-variables.scss';

package/src/styles/theme/shadows.scss

@@ -0,0 +1,3 @@
+$xt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);        // 小阴影
+$xt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);       // 中等阴影
+$xt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);       // 大阴影

package/src/styles/theme/spacing.scss

@@ -0,0 +1,5 @@
+$xt-spacing-xs: 4px;                         // 最小间距
+$xt-spacing-sm: 8px;                         // 小间距
+$xt-spacing-md: 12px;                        // 中间距
+$xt-spacing-lg: 16px;                        // 大间距
+$xt-spacing-xl: 20px;                        // 特大间距

package/src/styles/theme/transitions.scss

@@ -0,0 +1,3 @@
+$xt-transition-duration: 0.3s;               // 默认过渡时长
+$xt-transition-duration-fast: 0.2s;          // 快速过渡时长
+$xt-transition-ease: ease;                   // 缓动函数

package/src/styles/theme/typography.scss

@@ -0,0 +1,5 @@
+$xt-color-text-primary: #303133;             // 主要文字颜色 - 最深
+$xt-color-text-regular: #606266;             // 常规文字颜色 - 中等
+$xt-color-text-secondary: #909399;           // 次要文字颜色 - 较浅
+$xt-color-text-placeholder: #C0C4CC;         // 占位符文字颜色
+$xt-color-text-disabled: #C0C4CC;            // 禁用状态文字颜色

package/src/styles/{export.scss → variables-export.scss}

@@ -1,4 +1,4 @@
-@use './variables.scss' as *;
+@import './theme/index.scss';
 
 // SCSS 变量导出给 JavaScript 使用
 :export {

package/src/styles/variables.scss

@@ -1,126 +1 @@
-// ===========================
-// Element UI 标准颜色变量
-// ===========================
-
-// 主色调系列
-$xt-color-primary: #409EFF;       // 主颜色 - Element UI 标准蓝色
-$xt-color-success: #67C23A;       // 成功色 - Element UI 标准绿色
-$xt-color-warning: #E6A23C;       // 警告色 - Element UI 标准橙色
-$xt-color-danger: #F56C6C;        // 危险色 - Element UI 标准红色
-$xt-color-info: #909399;          // 信息色 - Element UI 标准灰色
-
-// 主色调浅色系列（用于 hover、active 等状态）
-$xt-color-primary-light-3: #79BBFF;   // 主色浅色 30%
-$xt-color-primary-light-5: #A0CFFF;   // 主色浅色 50%
-$xt-color-primary-light-7: #C6E2FF;   // 主色浅色 70%
-$xt-color-primary-light-8: #D9ECFF;   // 主色浅色 80%
-$xt-color-primary-light-9: #ECF5FF;   // 主色浅色 90%
-
-// ===========================
-// 文字颜色
-// ===========================
-$xt-color-text-primary: #303133;             // 主要文字颜色 - 最深
-$xt-color-text-regular: #606266;             // 常规文字颜色 - 中等
-$xt-color-text-secondary: #909399;           // 次要文字颜色 - 较浅
-$xt-color-text-placeholder: #C0C4CC;         // 占位符文字颜色
-$xt-color-text-disabled: #C0C4CC;            // 禁用状态文字颜色
-
-// ===========================
-// 背景颜色
-// ===========================
-$xt-color-bg-primary: #ffffff;               // 主背景色 - 白色
-$xt-color-bg-secondary: #f5f7fa;            // 次要背景色 - 浅灰
-$xt-color-bg-hover: #f5f5f5;                 // 悬停背景色
-$xt-color-bg-container: #f5f7fa;             // 容器背景色
-$xt-color-bg-main: #ffffff;                  // 主内容区域背景色
-$xt-color-bg-overlay: #ffffff;               // 浮层背景色
-
-// ===========================
-// 边框颜色
-// ===========================
-$xt-color-border: #DCDFE6;                   // 边框颜色 - 标准
-$xt-color-border-light: #E4E7ED;             // 边框浅色
-$xt-color-border-lighter: #EBEEF5;          // 边框更浅色
-$xt-color-border-extra-light: #F2F6FC;      // 边框极浅色
-
-// ===========================
-// 字体大小 - 基础值
-// ===========================
-$xt-font-size-extra-large: 20px;             // 特大字体基础值
-$xt-font-size-large: 18px;                   // 大字体基础值
-$xt-font-size-medium: 16px;                  // 中等字体基础值
-$xt-font-size-base: 14px;                    // 基准字体 - Element UI 默认
-$xt-font-size-small: 13px;                   // 小字体基础值
-$xt-font-size-extra-small: 12px;             // 特小字体基础值
-
-// ===========================
-// 字体大小增量（用于主题切换）
-// ===========================
-$xt-font-size-increment-small: 0px;          // 小尺寸增量
-$xt-font-size-increment-medium: 2px;         // 中尺寸增量
-$xt-font-size-increment-large: 4px;          // 大尺寸增量
-
-// ===========================
-// 间距
-// ===========================
-$xt-spacing-xs: 4px;                         // 最小间距
-$xt-spacing-sm: 8px;                         // 小间距
-$xt-spacing-md: 12px;                        // 中间距
-$xt-spacing-lg: 16px;                        // 大间距
-$xt-spacing-xl: 20px;                        // 特大间距
-
-// ===========================
-// 圆角
-// ===========================
-$xt-border-radius-base: 4px;                 // 基准圆角
-$xt-border-radius-small: 2px;                // 小圆角
-$xt-border-radius-round: 20px;               // 圆角（胶囊状）
-$xt-border-radius-circle: 50%;               // 圆形
-
-// ===========================
-// 阴影
-// ===========================
-$xt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);        // 小阴影
-$xt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);       // 中等阴影
-$xt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);       // 大阴影
-
-// ===========================
-// 过渡动画
-// ===========================
-$xt-transition-duration: 0.3s;               // 默认过渡时长
-$xt-transition-duration-fast: 0.2s;          // 快速过渡时长
-$xt-transition-ease: ease;                   // 缓动函数
-
-// ===========================
-// 布局 / 头部 / 导航 专用变量
-// ===========================
-
-// 头部导航
-$xt-header-bg: #ffffff;                      // 头部背景色
-$xt-header-text-color: #303133;              // 头部文字颜色
-$xt-header-active-text: #409EFF;             // 头部激活状态文字颜色
-$xt-header-hover-text: #409EFF;              // 头部悬停状态文字颜色
-
-// 汉堡菜单按钮
-$xt-hamburger-bg: #409EFF;                   // 汉堡按钮背景色
-
-// 侧边菜单
-$xt-menu-bg: #304156;                        // 菜单背景色
-$xt-menu-hover: #263445;                     // 菜单悬停背景色
-$xt-menu-text: #bfcbd9;                      // 菜单文字颜色
-$xt-menu-active-text: #ffffff;               // 菜单激活状态文字颜色
-
-// 子菜单
-$xt-sub-menu-bg: #1f2d3d;                    // 子菜单背景色
-$xt-sub-menu-hover: #001528;                 // 子菜单悬停背景色
-
-// ===========================
-// 弹窗专用变量
-// ===========================
-$xt-dialog-bg: #ffffff;                      // 弹窗背景色
-$xt-dialog-title: #303133;                   // 弹窗标题文字颜色
-
-// ===========================
-// TAG 标签专用变量
-// ===========================
-$xt-tag-bg: #ffffff;                         // 标签背景色
+@import './theme/index.scss';

package/src/utils/index.js

@@ -1,124 +1,193 @@
-
-// 默认配置
-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: 'white',
+    size: 'medium',
+    primaryColor: '#1890ff'
+}
+
+// 当前配置
+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 = ['white', '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.setAttribute('data-theme', 'dark')
+    } else {
+      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
+}