xt-element-ui 1.0.8 → 1.0.9

package/src/index.js

@@ -1,7 +1,19 @@
+// 导入主题样式（定义 CSS 变量）
+import './styles/vars.scss'
+
+// 导入组件样式（统一入口）
+import './components/index.scss'
+
 // 导入 SCSS 变量（通过 CSS Modules :export 导出）
 import variables from './styles/export.scss'
 
-import utils from './utils/index'
+import utilsModule from './utils/index'
+
+// ES Module 默认导出需要通过 .default 访问
+const utils = utilsModule.default || utilsModule
+
+// 从 utils 导入配置管理函数（仅用于存储配置）
+const { getConfig, setConfig, getTheme, getSize, getPrimaryColor, resetConfig, onConfigChange, setTheme, setSize, setPrimaryColor } = utils
 
 // 导入组件
 import Button from './components/button'
@@ -9,6 +21,7 @@ import Input from './components/input'
 import FlexBox from './components/flex-box'
 import Card from './components/card'
 import CardItem from './components/card-item'
+import ConfigProvider from './components/config-provider'
 
 // 存储组件列表
 const components = [
@@ -16,12 +29,13 @@ const components = [
   Input,
   FlexBox,
   Card,
-  CardItem
+  CardItem,
+  ConfigProvider
 ]
 
 
 // 定义 install 方法，Vue.use() 会自动调用
-const install = function (Vue) {
+const install = function (Vue, options = {}) {
   if (install.installed) return
   install.installed = true
 
@@ -29,7 +43,40 @@ const install = function (Vue) {
   components.forEach(component => {
     Vue.component(component.name, component)
   })
-  Vue.prototype.$utils = utils
+  
+  // 将工具方法挂载到 Vue.prototype
+  Vue.prototype.$xt = {
+    setTheme,
+    setSize,
+    setPrimaryColor,
+    getConfig,
+    setConfig,
+    getTheme,
+    getSize,
+    getPrimaryColor,
+    resetConfig,
+    onConfigChange
+  }
+
+  // 在安装时直接应用配置选项
+  if (options) {
+    // 处理主题配置
+    if (options.theme !== undefined) {
+      setTheme(options.theme)
+    }
+    // 处理字体大小配置
+    if (options.size !== undefined) {
+      setSize(options.size)
+    }
+    // 处理主色调配置
+    if (options.primaryColor !== undefined) {
+      setPrimaryColor(options.primaryColor)
+    }
+    // 处理完整配置对象
+    if (options.config !== undefined) {
+      setConfig(options.config)
+    }
+  }
 }
 
 // 支持全局 script 标签引入
@@ -45,127 +92,23 @@ export default {
   Input,
   FlexBox,
   Card,
-  CardItem
+  CardItem,
+  ConfigProvider
 }
 
 // 导出工具函数和变量
 export {
   utils,
-  variables
-}
-
-// 默认配置
-const defaultConfig = {
-  theme: 'light',
-  size: 'medium',
-  primaryColor: '#1890ff'
+  variables,
+  // 配置管理函数（从 utils 导入）
+  getConfig,
+  setConfig,
+  getTheme,
+  getSize,
+  getPrimaryColor,
+  resetConfig,
+  onConfigChange,
+  setTheme,
+  setSize,
+  setPrimaryColor
 }
-
-// 当前配置
-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']
-  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 必须传入函数')
-  }
-}

package/src/styles/export.scss

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

package/src/styles/theme/bg.scss

@@ -0,0 +1,6 @@
+$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;               // 浮层背景色

package/src/styles/theme/border.scss

@@ -0,0 +1,4 @@
+$xt-color-border: #DCDFE6;                   // 边框颜色 - 标准
+$xt-color-border-light: #E4E7ED;             // 边框浅色
+$xt-color-border-lighter: #EBEEF5;          // 边框更浅色
+$xt-color-border-extra-light: #F2F6FC;      // 边框极浅色

package/src/styles/theme/color.scss

@@ -0,0 +1,11 @@
+$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 标准灰色
+
+$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%

package/src/styles/theme/component.scss

@@ -0,0 +1,70 @@
+// ===========================
+// 按钮专用变量
+// ===========================
+$xt-button-height: 32px;                    // 按钮高度
+$xt-button-padding-x: 15px;                 // 按钮水平内边距
+$xt-button-padding-y: 8px;                  // 按钮垂直内边距
+$xt-button-font-weight: 500;                // 按钮字体粗细
+$xt-button-border-width: 1px;               // 按钮边框宽度
+$xt-button-transition: 0.1s;                // 按钮过渡时长
+
+// ===========================
+// 卡片专用变量
+// ===========================
+$xt-card-bg-color: #ffffff;                 // 卡片背景色
+$xt-card-border-color: #EBEEF5;             // 卡片边框颜色
+$xt-card-border-radius: 4px;                // 卡片圆角
+$xt-card-padding: 20px;                     // 卡片内边距
+$xt-card-header-padding: 18px 20px;         // 卡片头部内边距
+$xt-card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);  // 卡片阴影
+
+// ===========================
+// 卡片项专用变量
+// ===========================
+$xt-card-item-min-height: 40px;             // 卡片项最小高度
+$xt-card-item-gap: 10px;                    // 卡片项间距
+$xt-card-item-border-width: 3px;            // 卡片项边框宽度
+
+// ===========================
+// 输入框专用变量
+// ===========================
+$xt-input-height: 32px;                     // 输入框高度
+$xt-input-padding-x: 15px;                  // 输入框水平内边距
+$xt-input-bg-color: #ffffff;                // 输入框背景色
+$xt-input-border-color: #DCDFE6;            // 输入框边框颜色
+$xt-input-text-color: #303133;              // 输入框文字颜色
+$xt-input-placeholder-color: #C0C4CC;       // 输入框占位符颜色
+
+// ===========================
+// FlexBox 专用变量
+// ===========================
+$xt-flex-box-gap: 8px;                      // FlexBox 默认间距
+
+// ===========================
+// 布局 / 头部 / 导航 专用变量
+// ===========================
+$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/styles/theme/dark.scss

@@ -0,0 +1,29 @@
+$xt-dark-color-primary: #0a7be0;            // 暗色主题主色调
+$xt-dark-color-success: #4BC376;             // 暗色主题成功颜色
+$xt-dark-color-warning: #E6B61e;             // 暗色主题警告颜色
+$xt-dark-color-danger: #c13737;              // 暗色主题危险颜色
+$xt-dark-color-info: #3f4249;                // 暗色主题信息文字颜色
+
+$xt-dark-color-text-primary: rgba(255, 255, 255, 0.95);      // 暗色主题主要文字颜色
+$xt-dark-color-text-regular: rgba(255, 255, 255, 0.8);       // 暗色主题常规文字颜色
+$xt-dark-color-text-secondary: rgba(255, 255, 255, 0.6);     // 暗色主题次要文字颜色
+$xt-dark-color-text-placeholder: rgba(255, 255, 255, 0.4);   // 暗色主题占位符文字颜色
+$xt-dark-color-text-disabled: rgba(255, 255, 255, 0.3);      // 暗色主题禁用状态文字颜色
+
+$xt-dark-color-bg-primary: #1f1f1f;                           // 暗色主题主背景色
+$xt-dark-color-bg-secondary: #2d2d2d;                         // 暗色主题次要背景色
+$xt-dark-color-bg-hover: #3d3d3d;                             // 暗色主题悬停背景色
+$xt-dark-color-bg-container: #1f1f1f;                         // 暗色主题容器背景色
+$xt-dark-color-bg-overlay: #2d2d2d;                           // 暗色主题浮层背景色
+
+$xt-dark-color-border: #434343;                               // 暗色主题边框颜色
+$xt-dark-color-border-light: #3d3d3d;                         // 暗色主题边框浅色
+$xt-dark-color-border-lighter: #3d3d3d;                       // 暗色主题边框更浅色
+$xt-dark-color-border-extra-light: #434343;                   // 暗色主题边框极浅色
+
+// 暗色主题按钮颜色
+$xt-dark-button-primary-bg: #1e40af;          // 暗色主题主按钮背景色
+$xt-dark-button-success-bg: #166534;          // 暗色主题成功按钮背景色
+$xt-dark-button-warning-bg: #78350f;          // 暗色主题警告按钮背景色
+$xt-dark-button-danger-bg: #991b1b;           // 暗色主题危险按钮背景色
+$xt-dark-button-info-bg: #374151;            // 暗色主题信息按钮背景色

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 './color.scss';
+@import './text.scss';
+@import './bg.scss';
+@import './border.scss';
+@import './font.scss';
+@import './spacing.scss';
+@import './radius.scss';
+@import './shadow.scss';
+@import './transition.scss';
+@import './dark.scss';
+@import './component.scss';

package/src/styles/theme/radius.scss

@@ -0,0 +1,4 @@
+$xt-border-radius-base: 4px;                 // 基准圆角
+$xt-border-radius-small: 2px;                // 小圆角
+$xt-border-radius-round: 20px;               // 圆角（胶囊状）
+$xt-border-radius-circle: 50%;               // 圆形

package/src/styles/theme/shadow.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/text.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/theme/transition.scss

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

package/src/styles/theme-element.scss

@@ -84,16 +84,6 @@
   --el-border-color-extra-light: #5c5c5d;
 }
 
-/* 紧凑主题 */
-[data-theme="compact"] {
-  --el-font-size-base: 13px;
-  --el-font-size-small: 12px;
-  
-  --el-spacing-xs: 3px;
-  --el-spacing-sm: 6px;
-  --el-spacing-md: 10px;
-  --el-spacing-lg: 14px;
-}
 
 /* 大字体主题 */
 [data-size="large"] {

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';