npm - xt-element-ui - Versions diffs - 2.2.2 → 2.2.4 - Mend

xt-element-ui 2.2.2 → 2.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/README.md +140 -192
package/docs/README.md +162 -81
package/docs/components/base/theme.md +248 -0
package/docs/components/base/xt-button.md +11 -4
package/docs/components/base/xt-card.md +5 -11
package/docs/components/base/xt-config-provider.md +2 -0
package/docs/components/base/xt-flow.md +404 -0
package/docs/components/base/xt-list.md +1 -1
package/docs/components/base/xt-multi.md +5 -5
package/docs/components/base/xt-scroll-arrow.md +87 -1
package/docs/components/base/xt-scroll.md +237 -0
package/docs/components/business/xt-chart.md +1 -0
package/docs/components/utils/config.md +18 -4
package/docs/components/utils/theme.md +280 -183
package/lib/index.common.1.js +4 -26
package/lib/index.common.2.js +1 -1
package/lib/index.common.js +4577 -109925
package/lib/index.css +1 -1
package/lib/index.umd.1.js +4 -26
package/lib/index.umd.2.js +1 -1
package/lib/index.umd.js +4583 -109930
package/lib/index.umd.min.1.js +1 -1
package/lib/index.umd.min.js +1 -1
package/lib/theme/element-overrides.css +607 -0
package/lib/theme/element-vars.css +280 -0
package/lib/xt-badge/xt-badge.common.js +1 -1
package/lib/xt-badge/xt-badge.css +1 -1
package/lib/xt-badge/xt-badge.umd.js +1 -1
package/lib/xt-button/xt-button.common.js +13 -8
package/lib/xt-button/xt-button.css +1 -1
package/lib/xt-button/xt-button.umd.js +13 -8
package/lib/xt-button/xt-button.umd.min.js +1 -1
package/lib/xt-card/xt-card.common.js +5 -5
package/lib/xt-card/xt-card.umd.js +5 -5
package/lib/xt-card/xt-card.umd.min.js +1 -1
package/lib/xt-card-item/xt-card-item.common.js +4 -4
package/lib/xt-card-item/xt-card-item.umd.js +4 -4
package/lib/xt-card-item/xt-card-item.umd.min.js +1 -1
package/lib/xt-chart/xt-chart.common.js +1969 -108924
package/lib/xt-chart/xt-chart.css +1 -1
package/lib/xt-chart/xt-chart.umd.js +1975 -108929
package/lib/xt-chart/xt-chart.umd.min.js +1 -1
package/lib/xt-config-provider/xt-config-provider.common.js +561 -107504
package/lib/xt-config-provider/xt-config-provider.css +1 -1
package/lib/xt-config-provider/xt-config-provider.umd.js +567 -107509
package/lib/xt-config-provider/xt-config-provider.umd.min.js +1 -1
package/lib/xt-date-picker/xt-date-picker.common.1.js +4 -26
package/lib/xt-date-picker/xt-date-picker.common.2.js +1 -1
package/lib/xt-date-picker/xt-date-picker.common.js +1 -47
package/lib/xt-date-picker/xt-date-picker.css +1 -1
package/lib/xt-date-picker/xt-date-picker.umd.1.js +4 -26
package/lib/xt-date-picker/xt-date-picker.umd.2.js +1 -1
package/lib/xt-date-picker/xt-date-picker.umd.js +1 -47
package/lib/xt-date-picker/xt-date-picker.umd.min.1.js +1 -1
package/lib/xt-date-picker/xt-date-picker.umd.min.js +1 -1
package/lib/xt-flex-box/xt-flex-box.common.js +1 -1
package/lib/xt-flex-box/xt-flex-box.umd.js +1 -1
package/lib/xt-flow/demo.html +10 -0
package/lib/xt-flow/index.js +1 -0
package/lib/xt-flow/xt-flow.common.js +638 -0
package/lib/xt-flow/xt-flow.css +1 -0
package/lib/xt-flow/xt-flow.umd.js +648 -0
package/lib/xt-flow/xt-flow.umd.min.js +1 -0
package/lib/xt-form-schema/xt-form-schema.common.js +1 -1
package/lib/xt-form-schema/xt-form-schema.umd.js +1 -1
package/lib/xt-grid-box/xt-grid-box.common.js +1 -1
package/lib/xt-grid-box/xt-grid-box.umd.js +1 -1
package/lib/xt-grid-item/xt-grid-item.common.js +1 -1
package/lib/xt-grid-item/xt-grid-item.umd.js +1 -1
package/lib/xt-icon/xt-icon.common.js +1 -1
package/lib/xt-icon/xt-icon.umd.js +1 -1
package/lib/xt-input/xt-input.common.js +1 -1
package/lib/xt-input/xt-input.umd.js +1 -1
package/lib/xt-list/xt-list.common.js +457 -118
package/lib/xt-list/xt-list.css +1 -1
package/lib/xt-list/xt-list.umd.js +457 -118
package/lib/xt-list/xt-list.umd.min.js +1 -1
package/lib/xt-map/xt-map.common.js +1 -1
package/lib/xt-map/xt-map.umd.js +1 -1
package/lib/xt-map-provider/xt-map-provider.common.js +1 -1
package/lib/xt-map-provider/xt-map-provider.umd.js +1 -1
package/lib/xt-page/xt-page.common.js +1 -1
package/lib/xt-page/xt-page.umd.js +1 -1
package/lib/xt-progress/xt-progress.common.js +1 -1
package/lib/xt-progress/xt-progress.umd.js +1 -1
package/lib/xt-scroll/demo.html +10 -0
package/lib/xt-scroll/index.js +1 -0
package/lib/xt-scroll/xt-scroll.common.js +551 -0
package/lib/xt-scroll/xt-scroll.css +1 -0
package/lib/xt-scroll/xt-scroll.umd.js +561 -0
package/lib/xt-scroll/xt-scroll.umd.min.js +1 -0
package/lib/xt-scroll-arrow/xt-scroll-arrow.common.js +591 -170
package/lib/xt-scroll-arrow/xt-scroll-arrow.css +1 -1
package/lib/xt-scroll-arrow/xt-scroll-arrow.umd.js +591 -170
package/lib/xt-scroll-arrow/xt-scroll-arrow.umd.min.js +1 -1
package/lib/xt-select-tree/xt-select-tree.common.js +1 -1
package/lib/xt-select-tree/xt-select-tree.umd.js +1 -1
package/lib/xt-step-price/xt-step-price.common.js +2 -2
package/lib/xt-step-price/xt-step-price.umd.js +2 -2
package/lib/xt-step-price-item/xt-step-price-item.common.js +1 -1
package/lib/xt-step-price-item/xt-step-price-item.umd.js +1 -1
package/lib/xt-tab-pane/xt-tab-pane.common.js +1 -1
package/lib/xt-tab-pane/xt-tab-pane.umd.js +1 -1
package/lib/xt-table/xt-table.common.js +2 -2
package/lib/xt-table/xt-table.umd.js +2 -2
package/lib/xt-tabs/xt-tabs.common.js +1 -1
package/lib/xt-tabs/xt-tabs.umd.js +1 -1
package/lib/xt-text/xt-text.common.js +1 -1
package/lib/xt-text/xt-text.css +1 -1
package/lib/xt-text/xt-text.umd.js +1 -1
package/lib/xt-time/xt-time.common.js +1 -1
package/lib/xt-time/xt-time.umd.js +1 -1
package/lib/xt-transfer-tree/xt-transfer-tree.common.js +1 -1
package/lib/xt-transfer-tree/xt-transfer-tree.umd.js +1 -1
package/lib/xt-upload/xt-upload.common.js +11 -11
package/lib/xt-upload/xt-upload.umd.js +12 -12
package/lib/xt-upload/xt-upload.umd.min.js +1 -1
package/package.json +6 -5
package/src/components/index.scss +7 -1
package/src/components/theme/element-overrides.css +607 -0
package/src/components/theme/element-vars.css +280 -0
package/src/components/theme/iframe-injector.js +502 -0
package/src/components/theme/index.js +64 -0
package/src/components/xt-badge/style/index.scss +6 -6
package/src/components/xt-button/index.vue +11 -6
package/src/components/xt-button/style/index.scss +7 -5
package/src/components/xt-card/index.vue +3 -3
package/src/components/xt-card-item/index.vue +2 -2
package/src/components/xt-chart/XtMulti.vue +8 -18
package/src/components/xt-chart/XtPie.vue +1 -0
package/src/components/xt-chart/utils.js +84 -50
package/src/components/xt-config-provider/index.vue +56 -54
package/src/components/xt-config-provider/style/index.scss +0 -11
package/src/components/xt-date-picker/component/RangeDate.vue +1 -29
package/src/components/xt-date-picker/style/index.scss +79 -54
package/src/components/xt-flow/flowable-parser.js +244 -0
package/src/components/xt-flow/index.js +8 -0
package/src/components/xt-flow/index.vue +226 -0
package/src/components/xt-flow/style/index.scss +359 -0
package/src/components/xt-list/index.vue +23 -12
package/src/components/xt-scroll/index.js +9 -0
package/src/components/xt-scroll/index.vue +363 -0
package/src/components/xt-scroll/style/index.scss +107 -0
package/src/components/xt-scroll-arrow/index.vue +200 -83
package/src/components/xt-scroll-arrow/style/index.scss +16 -5
package/src/components/xt-text/style/index.scss +6 -6
package/src/index.js +15 -13
package/src/styles/css-variables.scss +73 -1
package/src/utils/color.js +105 -0
package/src/utils/index.js +456 -468
package/src/utils/theme-vars.js +134 -0
package/lib/css/1.87a493be.css +0 -1
package/lib/xt-date-picker/css/1.87a493be.css +0 -1

package/src/components/theme/iframe-injector.js ADDED Viewed

@@ -0,0 +1,502 @@
+/* ============================================================
+ * XT-Element-UI iframe 主题注入工具
+ *
+ * 使用场景：微前端架构中，主系统统一管理主题，子系统通过 iframe 嵌入。
+ * 子系统为标准 Element UI 项目，无需任何改造。
+ *
+ * 设计：
+ *   - 主题状态的唯一事实源是 utils/index.js（setTheme / setPrimaryColor）
+ *   - 本模块仅负责 iframe DOM 操作（注入、MutationObserver、持久化、广播）
+ *   - 通过订阅 utils.onConfigChange 实现主文档和 iframe 的同步
+ *   - setTheme / setPrimaryColor 委托给 utils，保持外部 API 不变
+ *
+ * 工作流程：
+ *   1. 主系统调用 utils.setTheme('dark') → utils 同步更新 --xt-* + --el-* 变量
+ *   2. utils emitConfigChange → 所有 IframeThemeInjector 实例收到通知
+ *   3. 实例将新主题应用到其管理的所有 iframe
+ *   4. 持久化、广播事件、回调
+ * ============================================================ */
+import { setTheme as _setTheme, setPrimaryColor as _setPrimaryColor, getConfig as _getConfig, onConfigChange as _onConfigChange } from '../../utils/index'
+import { applyThemeVars, BRAND_COLORS, THEME_STORAGE_KEY, THEME_CHANGE_EVENT } from '../../utils/theme-vars'
+/**
+ * IframeThemeInjector 类
+ * 负责向 iframe 注入主题 CSS 并管理 iframe 侧主题状态
+ *
+ * 注意：主文档的 --el-* / --xt-* CSS 变量由 utils/index.js 管理，
+ * 本类仅负责 iframe 内的同步，避免重复设置主文档变量。
+ */
+class IframeThemeInjector {
+  /**
+   * @param {Object} options
+   * @param {string} options.baseCSS - 基础 CSS 内容（注入到 iframe 的 <head>）
+   * @param {string} [options.theme='white'] - 初始主题 'white' | 'dark'
+   * @param {string} [options.primaryColor='#1890ff'] - 初始主色调
+   * @param {string} [options.brand=''] - 品牌标识 '' | 'water' | 'electricity' | 'gas'
+   * @param {boolean} [options.persist=false] - 是否持久化主题配置到 localStorage
+   * @param {Function} [options.onThemeChange] - 主题变化回调
+   */
+  constructor(options = {}) {
+    if (!options.baseCSS) {
+      console.warn('[IframeThemeInjector] baseCSS 未提供，主题样式将无法注入到 iframe')
+    }
+    this.baseCSS = options.baseCSS || ''
+    this.theme = options.theme || 'white'
+    this.brand = options.brand || ''
+    this.persist = options.persist || false
+    this.onThemeChange = options.onThemeChange || null
+    // 主色调：如果有 brand，优先使用 brand 对应的颜色
+    this.primaryColor = options.primaryColor || this._getBrandColor()
+    this._userPrimaryColor = options.primaryColor || '#1890ff'
+    // 管理的 iframe 列表
+    // Map<HTMLIFrameElement, { styleEl: HTMLStyleElement, injected: boolean }>
+    this.iframes = new Map()
+    // MutationObserver 用于自动检测新增 iframe
+    this._observer = null
+    this._observerTarget = null
+    // 注入计数器（用于去重定时器）
+    this._injectPending = new Set()
+    // 订阅 utils 配置变更，实现主文档和 iframe 的主题同步
+    this._unsubscribe = _onConfigChange((key, value) => {
+      this._onUtilsConfigChange(key, value)
+    })
+  }
+  // ==================== 公共方法 ====================
+  /**
+   * 向指定 iframe 注入主题 CSS
+   * @param {HTMLIFrameElement} iframe - iframe 元素
+   * @returns {boolean} 是否注入成功
+   */
+  inject(iframe) {
+    if (!iframe) {
+      console.warn('[IframeThemeInjector] inject: iframe 参数为空')
+      return false
+    }
+    // 如果已注入，跳过
+    if (this.iframes.has(iframe)) {
+      return true
+    }
+    return this._doInject(iframe)
+  }
+  /**
+   * 批量注入：注入所有匹配选择器的 iframe
+   * @param {string} [selector='iframe'] - CSS 选择器
+   * @returns {number} 成功注入的数量
+   */
+  injectAll(selector = 'iframe') {
+    const iframes = document.querySelectorAll(selector)
+    let count = 0
+    iframes.forEach(iframe => {
+      if (this.inject(iframe)) count++
+    })
+    return count
+  }
+  /**
+   * 切换主题
+   * 委托给 utils 处理主文档 CSS 变量，本类负责 iframe 同步
+   * @param {string} theme - 'white' | 'dark'
+   * @param {Object} [options]
+   * @param {string} [options.primaryColor] - 主色调
+   * @param {string} [options.brand] - 品牌色
+   */
+  setTheme(theme, options = {}) {
+    if (theme !== 'white' && theme !== 'dark') {
+      console.warn('[IframeThemeInjector] setTheme: 无效的主题值，使用 "white"', theme)
+      theme = 'white'
+    }
+    const prevTheme = this.theme
+    this.theme = theme
+    if (options.primaryColor) {
+      this.primaryColor = options.primaryColor
+      this._userPrimaryColor = options.primaryColor
+    } else if (options.brand || this.brand) {
+      this.brand = options.brand || this.brand
+      this.primaryColor = this._getBrandColor()
+    }
+    if (options.brand !== undefined) {
+      this.brand = options.brand
+    }
+    // 委托给 utils 处理主文档的 CSS 变量设置
+    _setTheme(theme)
+    if (this.primaryColor) {
+      _setPrimaryColor(this.primaryColor)
+    }
+    // 同步所有 iframe
+    this.iframes.forEach((_, iframeEl) => {
+      try {
+        if (iframeEl.contentDocument) {
+          this._applyThemeToDocument(iframeEl.contentDocument)
+        }
+      } catch (e) { /* 跨域 iframe 无法访问 */ }
+    })
+    // 持久化
+    if (this.persist) {
+      this._saveToStorage()
+    }
+    // 广播事件
+    this._broadcastChange()
+    // 回调
+    if (this.onThemeChange) {
+      this.onThemeChange({
+        theme: this.theme,
+        primaryColor: this.primaryColor,
+        brand: this.brand,
+        prevTheme
+      })
+    }
+  }
+  /**
+   * 设置主色调
+   * @param {string} color - hex 颜色值，如 '#1890ff'
+   */
+  setPrimaryColor(color) {
+    this.primaryColor = color
+    this._userPrimaryColor = color
+    this.brand = '' // 清除品牌色
+    // 委托给 utils 处理主文档
+    _setPrimaryColor(color)
+    // 同步 iframe
+    this._applyPrimaryColorToAll()
+  }
+  /**
+   * 设置品牌色
+   * @param {string} brand - '' | 'water' | 'electricity' | 'gas'
+   */
+  setBrand(brand) {
+    this.brand = brand
+    this.primaryColor = this._getBrandColor()
+    // 委托给 utils 处理主文档
+    _setPrimaryColor(this.primaryColor)
+    // 同步 iframe
+    this._applyPrimaryColorToAll()
+  }
+  /**
+   * 移除指定 iframe 的注入
+   * @param {HTMLIFrameElement} iframe
+   */
+  remove(iframe) {
+    const info = this.iframes.get(iframe)
+    if (info && info.styleEl && info.styleEl.parentNode) {
+      info.styleEl.parentNode.removeChild(info.styleEl)
+    }
+    this.iframes.delete(iframe)
+    this._injectPending.delete(iframe)
+  }
+  /**
+   * 移除所有注入
+   */
+  removeAll() {
+    this.iframes.forEach((info, iframe) => {
+      if (info.styleEl && info.styleEl.parentNode) {
+        info.styleEl.parentNode.removeChild(info.styleEl)
+      }
+    })
+    this.iframes.clear()
+    this._injectPending.clear()
+  }
+  /**
+   * 开始自动监听 DOM 变化，自动注入新添加的 iframe
+   * @param {HTMLElement} [target=document.body] - 监听的容器元素
+   */
+  startObserving(target) {
+    this.stopObserving()
+    this._observerTarget = target || document.body
+    this._observer = new MutationObserver((mutations) => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          // 直接添加的 iframe
+          if (node.tagName === 'IFRAME') {
+            this._handleNewIframe(node)
+          }
+          // 包含 iframe 的子元素
+          if (node.querySelectorAll) {
+            node.querySelectorAll('iframe').forEach(iframe => {
+              this._handleNewIframe(iframe)
+            })
+          }
+        })
+      })
+    })
+    this._observer.observe(this._observerTarget, {
+      childList: true,
+      subtree: true
+    })
+  }
+  /**
+   * 停止自动监听
+   */
+  stopObserving() {
+    if (this._observer) {
+      this._observer.disconnect()
+      this._observer = null
+    }
+    this._observerTarget = null
+  }
+  /**
+   * 获取当前主题配置
+   * @returns {Object}
+   */
+  getConfig() {
+    return {
+      theme: this.theme,
+      primaryColor: this.primaryColor,
+      brand: this.brand
+    }
+  }
+  /**
+   * 获取已注入的 iframe 数量
+   * @returns {number}
+   */
+  getIframeCount() {
+    return this.iframes.size
+  }
+  /**
+   * 销毁实例，清理所有资源
+   */
+  destroy() {
+    this.removeAll()
+    this.stopObserving()
+    if (this._unsubscribe) {
+      this._unsubscribe()
+      this._unsubscribe = null
+    }
+  }
+  // ==================== utils 变更响应 ====================
+  /**
+   * 响应 utils 配置变更，同步到所有 iframe
+   * 统一使用 applyThemeVars 处理主题+主色变量
+   */
+  _onUtilsConfigChange(key, value) {
+    if (key === 'theme') {
+      this.theme = value
+    } else if (key === 'primaryColor') {
+      this.primaryColor = value
+    } else {
+      return
+    }
+    this._applyPrimaryColorToAll()
+  }
+  // ==================== 私有方法 ====================
+  /**
+   * 执行实际的注入操作
+   */
+  _doInject(iframe) {
+    try {
+      const doc = iframe.contentDocument || iframe.contentWindow.document
+      if (!doc || !doc.head) {
+        // iframe 尚未加载完成，等待 load 事件
+        iframe.addEventListener('load', () => this._doInject(iframe), { once: true })
+        return false
+      }
+      // 检查是否已注入过（防止重复）
+      const existing = doc.head.querySelector('style[data-xt-theme-injector]')
+      if (existing) {
+        this.iframes.set(iframe, { styleEl: existing, injected: true })
+        this._applyThemeToDocument(doc)
+        return true
+      }
+      // 创建 style 元素并注入
+      const styleEl = doc.createElement('style')
+      styleEl.setAttribute('data-xt-theme-injector', '')
+      styleEl.setAttribute('type', 'text/css')
+      styleEl.textContent = this.baseCSS
+      doc.head.appendChild(styleEl)
+      // 应用主题变量
+      this._applyThemeToDocument(doc)
+      // 记录
+      this.iframes.set(iframe, { styleEl, injected: true })
+      return true
+    } catch (e) {
+      console.warn('[IframeThemeInjector] 无法注入主题到 iframe（可能是跨域限制）:', e.message)
+      return false
+    }
+  }
+  /**
+   * 处理新检测到的 iframe
+   */
+  _handleNewIframe(iframe) {
+    if (this.iframes.has(iframe) || this._injectPending.has(iframe)) {
+      return
+    }
+    this._injectPending.add(iframe)
+    const tryInject = () => {
+      this._injectPending.delete(iframe)
+      if (!this.iframes.has(iframe)) {
+        this._doInject(iframe)
+      }
+    }
+    if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
+      tryInject()
+    } else {
+      iframe.addEventListener('load', tryInject, { once: true })
+    }
+  }
+  /**
+   * 将主题配置应用到指定文档（iframe 内）
+   * 统一使用 applyThemeVars 处理 CSS 变量
+   */
+  _applyThemeToDocument(doc) {
+    if (!doc || !doc.documentElement) return
+    applyThemeVars(doc.documentElement, {
+      theme: this.theme,
+      primaryColor: this.primaryColor,
+      brand: this.brand
+    })
+  }
+  /**
+   * 更新所有 iframe 文档的主色调
+   * 统一使用 applyThemeVars 处理
+   */
+  _applyPrimaryColorToAll() {
+    this.iframes.forEach((_, iframeEl) => {
+      try {
+        if (iframeEl.contentDocument) {
+          applyThemeVars(iframeEl.contentDocument.documentElement, {
+            theme: this.theme,
+            primaryColor: this.primaryColor,
+            brand: this.brand
+          })
+        }
+      } catch (e) { /* 跨域 */ }
+    })
+  }
+  /**
+   * 获取品牌色对应的主色调
+   */
+  _getBrandColor() {
+    if (!this.brand || !BRAND_COLORS[this.brand]) {
+      return this._userPrimaryColor || '#1890ff'
+    }
+    const colors = BRAND_COLORS[this.brand]
+    return this.theme === 'dark' ? colors.dark : colors.light
+  }
+  /**
+   * 持久化到 localStorage
+   */
+  _saveToStorage() {
+    if (typeof localStorage === 'undefined') return
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify({
+        theme: this.theme,
+        primaryColor: this._userPrimaryColor,
+        brand: this.brand,
+        timestamp: Date.now()
+      }))
+    } catch (e) {
+      console.warn('[IframeThemeInjector] 保存主题配置失败:', e.message)
+    }
+  }
+  /**
+   * 从 localStorage 恢复配置
+   */
+  _loadFromStorage() {
+    if (typeof localStorage === 'undefined') return null
+    try {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY)
+      return stored ? JSON.parse(stored) : null
+    } catch (e) {
+      return null
+    }
+  }
+  /**
+   * 广播主题变化事件
+   */
+  _broadcastChange() {
+    if (typeof window === 'undefined') return
+    try {
+      window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
+        detail: {
+          theme: this.theme,
+          primaryColor: this.primaryColor,
+          brand: this.brand,
+          timestamp: Date.now()
+        },
+        bubbles: true,
+        composed: true
+      }))
+    } catch (e) {
+      // 忽略
+    }
+  }
+}
+/**
+ * 创建 IframeThemeInjector 实例并自动从 localStorage 恢复配置
+ * @param {Object} options
+ * @returns {IframeThemeInjector}
+ */
+function createInjector(options = {}) {
+  const injector = new IframeThemeInjector(options)
+  // 如果启用持久化，尝试从 localStorage 恢复
+  if (options.persist) {
+    const stored = injector._loadFromStorage()
+    if (stored) {
+      injector.theme = stored.theme || 'white'
+      injector.brand = stored.brand || ''
+      injector._userPrimaryColor = stored.primaryColor || '#1890ff'
+      injector.primaryColor = stored.primaryColor || injector._getBrandColor()
+    }
+  }
+  return injector
+}
+export default IframeThemeInjector
+export { createInjector, IframeThemeInjector }

package/src/components/theme/index.js ADDED Viewed

@@ -0,0 +1,64 @@
+/* ============================================================
+ * XT-Element-UI Theme 模块入口
+ *
+ * 提供：
+ *   1. 静态 CSS 样式文件（用于注入到 iframe）
+ *   2. IframeThemeInjector - iframe 主题注入工具
+ *   3. 便捷的工厂函数
+ * ============================================================ */
+import IframeThemeInjector, { createInjector } from './iframe-injector'
+// 使用 raw-loader 以原始字符串形式导入 CSS 文件
+// eslint-disable-next-line
+const elementVarsCSS = require('!!raw-loader!./element-vars.css').default || require('!!raw-loader!./element-vars.css')
+// eslint-disable-next-line
+const elementOverridesCSS = require('!!raw-loader!./element-overrides.css').default || require('!!raw-loader!./element-overrides.css')
+/**
+ * 合并后的完整 CSS 内容
+ * 可直接注入到 iframe 的 <head> 中
+ */
+const fullThemeCSS = elementVarsCSS + '\n' + elementOverridesCSS
+/**
+ * 创建一个预配置好 CSS 内容的 IframeThemeInjector 实例
+ * 这是推荐的使用方式，无需手动提供 CSS 内容
+ *
+ * @param {Object} options
+ * @param {string} [options.theme='white'] - 初始主题 'white' | 'dark'
+ * @param {string} [options.primaryColor='#1890ff'] - 初始主色调
+ * @param {boolean} [options.persist=false] - 是否持久化主题配置
+ * @param {Function} [options.onThemeChange] - 主题变化回调
+ * @returns {IframeThemeInjector}
+ *
+ * @example
+ * // 基本使用
+ * const injector = createThemeInjector({ theme: 'white' })
+ * injector.injectAll('iframe')
+ *
+ * @example
+ * // 切换主题
+ * injector.setTheme('dark')
+ *
+ * @example
+ * // 自动监听新增 iframe
+ * injector.startObserving()
+ */
+function createThemeInjector(options = {}) {
+  return createInjector({
+    ...options,
+    baseCSS: fullThemeCSS
+  })
+}
+export {
+  IframeThemeInjector,
+  createInjector,
+  createThemeInjector,
+  elementVarsCSS,
+  elementOverridesCSS,
+  fullThemeCSS
+}
+export default createThemeInjector

package/src/components/xt-badge/style/index.scss CHANGED Viewed

@@ -25,7 +25,7 @@
   color: #ffffff;
   text-align: center;
   white-space: nowrap;
-  background: $xt-color-danger;
+  background: var(--xt-color-danger);
 }
 .xt-badge--dot .xt-badge__badge {
@@ -42,23 +42,23 @@
 }
 .xt-badge--primary .xt-badge__badge {
-  background: $xt-color-primary;
+  background: var(--xt-color-primary);
 }
 .xt-badge--success .xt-badge__badge {
-  background: $xt-color-success;
+  background: var(--xt-color-success);
 }
 .xt-badge--warning .xt-badge__badge {
-  background: $xt-color-warning;
+  background: var(--xt-color-warning);
 }
 .xt-badge--danger .xt-badge__badge {
-  background: $xt-color-danger;
+  background: var(--xt-color-danger);
 }
 .xt-badge--info .xt-badge__badge {
-  background: $xt-color-info;
+  background: var(--xt-color-info);
 }
 .xt-badge--hidden {

package/src/components/xt-button/index.vue CHANGED Viewed

@@ -16,17 +16,17 @@ export default {
   inject: {
     xtConfig: {
       default: () => ({
-        theme: 'light',
-        size: 'medium',
-        primaryColor: '#1890ff'
+        theme: undefined,
+        size: undefined,
+        primaryColor: undefined
       })
     }
   },
   props: {
     type: {
       type: String,
-      default: 'default',
-      validator: (val) => ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
+      default: '',
+      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
     },
     throttle: {
       type: Number,
@@ -36,6 +36,10 @@ export default {
       type: String,
       default: null,
       validator: (val) => !val || ['mini', 'small', 'medium', 'large'].includes(val)
+    },
+    square: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -51,7 +55,8 @@ export default {
     buttonClasses() {
       return [
         `xt-button-${this.finalSize}`,
-        `xt-button-${this.type}`
+        `xt-button-${this.type}`,
+        this.square ? 'is-square' : ''
       ]
     }
   },

package/src/components/xt-button/style/index.scss CHANGED Viewed

@@ -6,11 +6,8 @@
   font-size: var(--xt-font-size-small);
   border: 1px solid var(--xt-border-color, #dcdfe6);
   transition: all 0.3s;
-  &-default{
-    background-color: var(--xt-bg-color-page, #ffffff);
-    border: 1px solid var(--xt-border-color, #303133);
-    color: var(--xt-text-color-primary, #303133);
-  }
+  background-color: var(--xt-bg-color, #ffffff);
+  color: var(--xt-text-color-primary, #303133);
   &-primary{
     background-color: var(--xt-color-primary, #ffffff);
     border-color: var(--xt-color-primary, #ffffff);
@@ -36,6 +33,11 @@
     border-color: var(--xt-color-info, #ffffff);
     color: var(--xt-color-white, #ffffff);
   }
+  &.is-square{
+    padding: 12px;
+    border-radius: 0;
+  }
   &:hover {
     opacity: 0.8;

package/src/components/xt-card/index.vue CHANGED Viewed

@@ -18,9 +18,9 @@ export default {
   inject: {
     xtConfig: {
       default: () => ({
-        theme: 'light',
-        size: 'medium',
-        primaryColor: '#1890ff'
+        theme: undefined,
+        size: undefined,
+        primaryColor: undefined
       })
     }
   },

package/src/components/xt-card-item/index.vue CHANGED Viewed

@@ -6,7 +6,7 @@
             <xt-text bold size="large" v-model="value" format="thousand" :type="type" :decimals="0"></xt-text>
             <div style="margin: 5px 0;">
               <xt-text size="small">较昨日</xt-text>
-              <xt-text v-model="change" format="normal" :type="diff > 0 ? 'success' : 'danger'" :suffix="diff > 0 ? '↑' : '↓'"></xt-text>
+              <xt-text v-model="reference" format="normal" :type="diff > 0 ? 'success' : 'danger'" :suffix="diff > 0 ? '↑' : '↓'"></xt-text>
             </div>
           </div>
           <div style="height: 100%;">
@@ -25,7 +25,7 @@ export default {
         title: { type: String, default: '' },
         diff: { type: Number, default: 0 },
         value: { type: Number, default: 0 },
-        change: { type: Number, default: 0 },
+        reference: { type: Number, default: 0 },
     },
     data() {
         return {