xt-element-ui 1.0.5 → 1.0.7

package/src/styles/variables.scss

@@ -1,41 +1,119 @@
-$xt-color-primary: #1890ff;
-$xt-color-success: #52c41a;
-$xt-color-warning: #faad14;
-$xt-color-danger: #f5222d;
-$xt-color-info: #1890ff;
-
-$xt-color-text-primary: rgba(0, 0, 0, 0.85);
-$xt-color-text-secondary: rgba(0, 0, 0, 0.65);
-$xt-color-text-placeholder: rgba(0, 0, 0, 0.45);
-$xt-color-text-disabled: rgba(0, 0, 0, 0.25);
-
-$xt-color-bg-primary: #ffffff;
-$xt-color-bg-secondary: #f5f5f5;
-$xt-color-bg-hover: #f5f5f5;
-
-$xt-color-border: #d9d9d9;
-$xt-color-border-light: #f0f0f0;
-
-$xt-font-size-xs: 12px;
-$xt-font-size-sm: 14px;
-$xt-font-size-md: 16px;
-$xt-font-size-lg: 18px;
-$xt-font-size-xl: 20px;
-
-$xt-spacing-xs: 4px;
-$xt-spacing-sm: 8px;
-$xt-spacing-md: 16px;
-$xt-spacing-lg: 24px;
-$xt-spacing-xl: 32px;
-
-$xt-border-radius-sm: 4px;
-$xt-border-radius-md: 6px;
-$xt-border-radius-lg: 8px;
-
-$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-fast: 0.15s ease;
-$xt-transition-normal: 0.2s ease;
-$xt-transition-slow: 0.3s ease;
+// ===========================
+// 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-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;                         // 标签背景色

package/src/utils/index.js

@@ -0,0 +1,124 @@
+
+// 默认配置
+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
+  }