xt-element-ui 2.2.2 → 2.2.3

package/src/components/xt-chart/utils.js

@@ -7,16 +7,27 @@ const themeKeys = {
   "dark": themeDark
 };
 
-// echarts 仅在客户端加载，避免 SSR 编译/渲染报错
+// 品牌色映射 - 用于 ECharts 图表调色板
+const brandColors = {
+  "water": ["#0077be", "#0099cc", "#5DB1FF", "#005C91", "#003D61"],
+  "electricity": ["#2ecc71", "#27ae60", "#5DD3B0", "#22A85A", "#167039"],
+  "gas": ["#f39c12", "#e67e22", "#F5C976", "#C28500", "#8C6000"]
+};
+
 let echarts = null;
+let themesRegistered = false;
 
 function getEcharts() {
   if (!echarts && typeof window !== 'undefined') {
     try {
       echarts = require('echarts');
-      // 注册所有主题
-      for (const key in themeKeys) {
-        echarts.registerTheme(key, themeKeys[key]);
+      
+      // 主题只注册一次
+      if (!themesRegistered) {
+        for (const key in themeKeys) {
+          echarts.registerTheme(key, themeKeys[key]);
+        }
+        themesRegistered = true;
       }
     } catch (e) {
       console.warn('[XtChart] echarts 加载失败:', e.message);
@@ -59,6 +70,43 @@ EchartsUtil.currentTheme = "default";
 EchartsUtil.currentSize = "medium";
 EchartsUtil.inverse = false;
 
+// 颜色处理工具方法
+EchartsUtil.hexToRgb = function(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;
+};
+
+EchartsUtil.rgbToHex = function(r, g, b) {
+  return '#' + [r, g, b].map(x => {
+    const hex = x.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  }).join('');
+};
+
+EchartsUtil.lightenColor = function(hex, percent) {
+  const rgb = this.hexToRgb(hex);
+  if (!rgb) return hex;
+  const ratio = percent / 100;
+  const r = Math.round(rgb.r * (1 - ratio) + 255 * ratio);
+  const g = Math.round(rgb.g * (1 - ratio) + 255 * ratio);
+  const b = Math.round(rgb.b * (1 - ratio) + 255 * ratio);
+  return this.rgbToHex(r, g, b);
+};
+
+EchartsUtil.darkenColor = function(hex, percent) {
+  const rgb = this.hexToRgb(hex);
+  if (!rgb) return hex;
+  const ratio = percent / 100;
+  const r = Math.max(0, Math.round(rgb.r * (1 - ratio)));
+  const g = Math.max(0, Math.round(rgb.g * (1 - ratio)));
+  const b = Math.max(0, Math.round(rgb.b * (1 - ratio)));
+  return this.rgbToHex(r, g, b);
+};
+
 EchartsUtil.EchartsUtil = {
   backgroundColor: "transparent",
   tooltip: {
@@ -74,42 +122,11 @@ EchartsUtil.EchartsUtil = {
     }
   },
   grid: {
-    top: "25%",
-    left: "40",
-    right: "15",
-    bottom: "40"
-  },
-  xAxis: {
-    type: "category",
-    boundaryGap: false,
-    axisTick: {
-      show: true,
-      length: 4
-    },
-    axisLabel: {
-      fontSize: 12,
-      interval: 0,
-      formatter: function(value) {
-        return !this.reverse && this.longLable ? value.replace(new RegExp(`(.{${this.longLableSplitNum}})`, "g"), `$1\n`) : value;
-      }
-    }
-  },
-  yAxis: {
-    type: "value",
-    axisTick: {
-      show: false
-    },
-    min: null,
-    max: null,
-    axisLabel: {
-      show: false
-    },
-    splitLine: {
-      lineStyle: {
-        type: "dashed",
-        width: 1
-      }
-    }
+    left: 16,
+    right: 16,
+    top: 40,
+    bottom: 48,
+    containLabel: true
   }
 };
 
@@ -358,11 +375,13 @@ EchartsUtil.init = function(dom, theme, customOption, size) {
   this.currentTheme = useTheme;
   this.currentSize = useSize;
   
-  let themeOption = themeKeys[useTheme];
+  // 使用基础选项配置作为 option 模板
+  // 主题已通过 ec.init(dom, useTheme) 应用，这里不需要再使用 themeOption
+  let baseOption = JSON.parse(JSON.stringify(EchartsUtil.EchartsUtil));
   // 应用字体大小配置
-  themeOption = this.applyFontSize(themeOption, useSize);
+  baseOption = this.applyFontSize(baseOption, useSize);
   
-  const option = this.mergeOptions(themeOption, customOption);
+  const option = this.mergeOptions(baseOption, customOption);
   
   const chart = ec.init(dom, useTheme);
   chart.setOption(option, true);
@@ -401,12 +420,11 @@ EchartsUtil.changeSingleTheme = function(dom, chartIns, customOption, newTheme)
   return newChart;
 };
 
-EchartsUtil.changeAllTheme = function(newTheme, newSize) {
+EchartsUtil.changeAllTheme = function(newTheme, newSize, primaryColor, brand) {
   const ec = getEcharts();
   if (!ec || !newTheme) return;
   
   this.currentTheme = newTheme;
-  // 如果传入了新的 size，则更新全局 size
   if (newSize) {
     this.currentSize = newSize;
   }
@@ -415,7 +433,6 @@ EchartsUtil.changeAllTheme = function(newTheme, newSize) {
     const dom = item.dom;
     const chart = item.chart;
     const customOption = item.customOption;
-    // 使用图表自己的 size，如果没有则使用全局 size
     const useSize = item.size || EchartsUtil.currentSize;
     
     if (chart) {
@@ -423,14 +440,31 @@ EchartsUtil.changeAllTheme = function(newTheme, newSize) {
     }
     
     const newChart = ec.init(dom, newTheme);
-    let themeOption = themeKeys[newTheme];
+    
+    // 使用基础选项配置（EchartsUtil.EchartsUtil）作为 option 模板
+    let baseOption = JSON.parse(JSON.stringify(EchartsUtil.EchartsUtil));
+    
     // 应用字体大小配置
-    themeOption = EchartsUtil.applyFontSize(themeOption, useSize);
-    const option = EchartsUtil.mergeOptions(themeOption, customOption);
+    baseOption = EchartsUtil.applyFontSize(baseOption, useSize);
+    
+    // 应用品牌色到图表调色板
+    if (brand && brandColors[brand]) {
+      baseOption.color = brandColors[brand];
+    } else if (primaryColor) {
+      // 如果没有品牌色但有自定义主色，生成衍生色系
+      baseOption.color = [
+        primaryColor,
+        EchartsUtil.lightenColor(primaryColor, 30),
+        EchartsUtil.lightenColor(primaryColor, 50),
+        EchartsUtil.darkenColor(primaryColor, 20),
+        EchartsUtil.darkenColor(primaryColor, 40)
+      ];
+    }
     
+    const option = EchartsUtil.mergeOptions(baseOption, customOption);
+    console.log('option1', option);
     newChart.setOption(option, true);
     item.chart = newChart;
-    // 更新图表的 size 记录
     item.size = useSize;
     EchartsUtil.bindResize(newChart);
   });

package/src/components/xt-config-provider/index.vue

@@ -7,71 +7,67 @@ const HTMLElementType = typeof HTMLElement !== 'undefined' ? HTMLElement : Objec
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,
-  provide() {
+  data() {
     return {
       xtConfig: {
         theme: this.theme,
         size: this.size,
-        primaryColor: this.primaryColor
+        primaryColor: this.primaryColor,
+        brand: this.brand
       }
     }
   },
+  provide() {
+    return {
+      xtConfig: this.xtConfig
+    }
+  },
   watch: {
     theme(newVal) {
-      this.xtConfig ={
-        theme: newVal,
-        size: this.size,
-        primaryColor: this.primaryColor
-      }
+      this.xtConfig.theme = newVal
+      this.updateConfig()
     },
     size(newVal) {
-      this.xtConfig ={
-        theme: newVal,
-        size: this.size,
-        primaryColor: this.primaryColor
-      }
+      this.xtConfig.size = newVal
+      this.updateConfig()
     },
     primaryColor(newVal) {
-      this.xtConfig ={
-        theme: newVal,
-        size: this.size,
-        primaryColor: this.primaryColor
-      }
+      this.xtConfig.primaryColor = newVal
+      this.updateConfig()
+    },
+    brand(newVal) {
+      this.xtConfig.brand = newVal
+      this.updateConfig()
     }
   },
   render(h) {
-    // Vue 2 不支持 Fragment，当 tag="template" 时需要特殊处理
-    // 如果设置了 proxyElement，则不渲染包裹元素，只渲染 slot 内容
-    if (this.tag === 'template' || this.proxyElement) {
-      // 渲染 slot 内容，如果只有一个元素则直接返回，否则包裹一个 div
-      const slotContent = this.$slots.default
+    const slotContent = this.$slots.default
 
+    if (this.tag === 'template' || this.proxyElement) {
       if (!slotContent || slotContent.length === 0) {
         return h('div')
       }
 
-      // 如果 slot 只有一个元素，直接返回该元素
       if (slotContent.length === 1) {
         return slotContent[0]
       }
 
-      // Vue 2 不支持多根节点，需要包裹一个 div
-      // 使用普通的 div 包裹，避免 display: contents 的兼容性问题
       return h('div', {
         class: 'xt-config-provider-wrapper',
         attrs: {
-          'data-theme': this.theme
+          'data-theme': this.theme,
+          'data-brand': this.brand
         }
       }, slotContent)
     }
 
-    // 正常渲染包裹元素
     return h(this.tag, {
       style: this.mergedStyle,
       class: this.computedClass,
       attrs: {
         ...this.customAttrs,
-        'data-theme': this.theme
+        'data-theme': this.theme,
+        'data-brand': this.brand
       }
     }, this.$slots.default)
   },
@@ -85,12 +81,22 @@ export default {
     },
     size: {
       type: String,
-      default: 'medium'
+      default: 'medium',
+      validator: (value) => {
+        return ['small', 'medium', 'large'].includes(value)
+      }
     },
     primaryColor: {
       type: String,
       default: '#1890ff'
     },
+    brand: {
+      type: String,
+      default: '',
+      validator: (value) => {
+        return ['', 'water', 'electricity', 'gas'].includes(value)
+      }
+    },
     vars: {
       type: Object,
       default: () => ({})
@@ -118,12 +124,12 @@ export default {
     onThemeChange: {
       type: Function,
       default: null,
-      description: '主题改变时的钩子函数，接收参数: { theme, size, primaryColor }'
+      description: '主题改变时的钩子函数，接收参数: { theme, size, primaryColor, brand }'
     },
     onStyleApplied: {
       type: Function,
       default: null,
-      description: '样式应用完成时的钩子函数，接收参数: { element, style, theme }'
+      description: '样式应用完成时的钩子函数，接收参数: { element, style, theme, brand }'
     }
   },
   computed: {
@@ -133,13 +139,11 @@ export default {
       if (this.primaryColor) {
         const color = this.normalizeColor(this.primaryColor)
         result['--xt-color-primary'] = color
-        // 浅色系列（与 css-variables.scss 保持一致）
         result['--xt-color-primary-light-3'] = this.lightenColor(color, 30)
         result['--xt-color-primary-light-5'] = this.lightenColor(color, 50)
         result['--xt-color-primary-light-7'] = this.lightenColor(color, 70)
         result['--xt-color-primary-light-8'] = this.lightenColor(color, 80)
         result['--xt-color-primary-light-9'] = this.lightenColor(color, 90)
-        // 深色系列
         result['--xt-color-primary-dark-2'] = this.darkenColor(color, 20)
       }
       
@@ -154,18 +158,17 @@ export default {
       
       if (this.theme === 'dark') {
         if (this.injectBackground) {
-          result.backgroundColor = result['--xt-color-bg-primary'] || '#141414'
+          result.backgroundColor = result['--xt-bg-color'] || '#141414'
         }
         if (this.injectColor) {
-          result.color = result['--xt-color-text-primary'] || '#E5EAF3'
+          result.color = result['--xt-text-color-primary'] || '#E5EAF3'
         }
       } else {
-        // 恢复默认主题颜色（light 主题）
         if (this.injectBackground) {
-          result.backgroundColor = result['--xt-color-bg-primary'] || '#ffffff'
+          result.backgroundColor = result['--xt-bg-color'] || '#ffffff'
         }
         if (this.injectColor) {
-          result.color = result['--xt-color-text-primary'] || '#2c3e50'
+          result.color = result['--xt-text-color-primary'] || '#303133'
         }
       }
       
@@ -181,7 +184,7 @@ export default {
       return classes
     },
     customAttrs() {
-      const props = ['theme', 'size', 'primaryColor', 'vars', 'tag', 'injectBackground', 'injectColor', 'proxyElement']
+      const props = ['theme', 'size', 'primaryColor', 'brand', 'vars', 'tag', 'injectBackground', 'injectColor', 'proxyElement']
       const attrs = {}
 
       for (const key in this.$attrs) {
@@ -203,6 +206,10 @@ export default {
     this.clearProxyElementStyle()
   },
   methods: {
+    updateConfig() {
+      this.applyProxyElementStyle()
+    },
+    
     normalizeColor(color) {
       if (!color) return '#1890ff'
       
@@ -250,8 +257,6 @@ export default {
       const rgb = this.hexToRgb(hex)
       if (!rgb) return hex
       
-      // 使用与 Element Plus 一致的算法：将颜色与白色按比例混合
-      // percent 表示混合白色的比例（0-100），即 (1 - percent/100) 是原色比例
       const ratio = percent / 100
       const r = Math.round(rgb.r * (1 - ratio) + 255 * ratio)
       const g = Math.round(rgb.g * (1 - ratio) + 255 * ratio)
@@ -264,8 +269,6 @@ export default {
       const rgb = this.hexToRgb(hex)
       if (!rgb) return hex
 
-      // 使用按比例混合黑色的方式变暗
-      // percent 表示混合黑色的比例（0-100）
       const ratio = percent / 100
       const r = Math.max(0, Math.round(rgb.r * (1 - ratio)))
       const g = Math.max(0, Math.round(rgb.g * (1 - ratio)))
@@ -305,36 +308,36 @@ export default {
       
       const style = this.mergedStyle
       const prevTheme = element.getAttribute('data-theme')
+      const prevBrand = element.getAttribute('data-brand')
       
-      // 应用样式到代理元素
       for (const key in style) {
         element.style.setProperty(key, style[key])
       }
       
-      // 设置 data-theme 属性
       element.setAttribute('data-theme', this.theme)
+      element.setAttribute('data-brand', this.brand)
 
-      // 更新图表颜色
-      EchartsUtil.changeAllTheme(this.theme, this.size, this.primaryColor)
+      EchartsUtil.changeAllTheme(this.theme, this.size, this.primaryColor, this.brand)
       
-      // 触发主题改变钩子（当主题实际发生变化时）
       if (prevTheme !== this.theme && typeof this.onThemeChange === 'function') {
         this.onThemeChange({
           theme: this.theme,
           size: this.size,
           primaryColor: this.primaryColor,
-          prevTheme: prevTheme
+          brand: this.brand,
+          prevTheme: prevTheme,
+          prevBrand: prevBrand
         })
       }
       
-      // 触发样式应用完成钩子
       if (typeof this.onStyleApplied === 'function') {
         this.onStyleApplied({
           element: element,
           style: style,
           theme: this.theme,
           size: this.size,
-          primaryColor: this.primaryColor
+          primaryColor: this.primaryColor,
+          brand: this.brand
         })
       }
       
@@ -350,17 +353,16 @@ export default {
         element.style.removeProperty(key)
       }
 
-      // 移除 data-theme 属性
       element.removeAttribute('data-theme')
+      element.removeAttribute('data-brand')
     }
   }
 }
 </script>
 
 <style scoped>
-/* 包裹容器样式 - 最小化影响布局 */
 .xt-config-provider-wrapper {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>

package/src/components/xt-date-picker/style/index.scss

@@ -3,7 +3,7 @@
 .xt-date-picker-container {
     display: inline-block;
     width: 100%;
-    
+    --xt-input-height: 32px;
   }
   .xt-date .el-date-editor .el-input__inner {
     background-color: var(--xt-fill-color-blank);
@@ -13,7 +13,7 @@
     border-radius: var(--xt-border-radius-small, 4px);
     height: var(--xt-input-height);
     line-height: var(--xt-input-height);
-    padding: 0 15px;
+    padding: 0 30px;
 }
   .xt-date-dimension {
     margin-bottom: 8px;
@@ -26,10 +26,8 @@
 
 
 
-.date-picker {
-    .quarter-panel {
-      padding: 10px;
-    }
+  .quarter-panel {
+    padding: 10px;
   
     .quarter-header {
       display: flex;