xt-element-ui 2.2.1 → 2.2.3

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/component/Picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="base-date-root">
+  <div class="date-picker">
     <el-date-picker
       v-if="type !== 'quarter'"
       v-model="innerValue"
@@ -73,9 +73,7 @@ export default {
     disabled: {
       type: Boolean,
       default: false
-    },
-    placeholder: String,
-    valueFormat: String
+    }
   },
   data() {
     return {
@@ -89,7 +87,6 @@ export default {
       return this.type === 'quarter' ? null : this.type
     },
     placeholder() {
-      if (this.$props.placeholder) return this.$props.placeholder
       const map = {
         date: '请选择日期',
         month: '请选择月份',
@@ -100,7 +97,6 @@ export default {
       return map[this.type] || '请选择日期'
     },
     valueFormat() {
-      if (this.$props.valueFormat) return this.$props.valueFormat
       const map = {
         date: 'yyyy-MM-dd',
         month: 'yyyy-MM',
@@ -154,43 +150,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.base-date-root {
-}
-
-.quarter-panel {
-  padding: 10px;
-}
-
-.quarter-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.quarter-list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-}
-
-.quarter-item {
-  text-align: center;
-  padding: 8px 0;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.quarter-item.active {
-  background: #409eff;
-  color: #fff;
-  border-color: #409eff;
-}
-
-::v-deep .base-date-popper {
-  border-radius: 4px;
-}
-</style>

package/src/components/xt-date-picker/component/RangeDate.vue

@@ -1,6 +1,6 @@
 <!-- RangeDate.vue 区间业务组件 -->
 <template>
-    <div class="range-wrap">
+    <div class="range-picker">
       <Picker
         v-model="startVal"
         :type="type"
@@ -107,14 +107,14 @@
   }
   </script>
   <style scoped>
-  .range-wrap {
+  .range-picker {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 8px;
     width: 100%;
   }
-  .range-wrap .el-date-editor {
+  .range-picker .el-date-editor {
     flex: 1;
     min-width: 130px;
   }
@@ -124,7 +124,7 @@
   }
   /* 手机/窄侧边栏自动竖向排列 */
   @media (max-width: 360px) {
-    .range-wrap {
+    .range-picker {
       flex-direction: column;
       align-items: stretch;
     }

package/src/components/xt-date-picker/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtDatePicker from './index.vue'
 
 XtDatePicker.install = function (Vue) {

package/src/components/xt-date-picker/index.vue

@@ -31,6 +31,7 @@
         ref="singlePicker"
         v-model="singleValue"
         size="small"
+        class="xt-date"
         :disabled="disabled"
         append-to-body
         :format="format"
@@ -45,6 +46,7 @@
         v-else-if="!useRangeMode && realDateType === 'quarter'"
         v-model="singleValue"
         type="quarter"
+        class="xt-date"
         size="small"
         :disabled="disabled"
         :placeholder="innerPlaceholder"
@@ -89,12 +91,9 @@ const NORMAL_TO_RANGE_TYPE = {
   week: 'week'
 };
 
-import RangeDate from './component/RangeDate.vue';
-import Picker from './component/Picker.vue';
-
 export default {
   name: 'XtDatePicker',
-  components: { RangeDate, Picker },
+  components: { RangeDate: () => import( './component/RangeDate.vue'), Picker: () => import( './component/Picker.vue') },
   // 标准v-model：父组件 v-model="xxx"
   model: {
     prop: 'value',
@@ -250,22 +249,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.xt-date-picker-container {
-  display: inline-block;
-  width: 100%;
-}
-
-.xt-date-dimension {
-  margin-bottom: 8px;
-}
-
-.xt-date-picker-wrapper {
-  display: inline-block;
-}
-
-.xt-date {
-  width: 100%;
-}
-</style>

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

@@ -0,0 +1,62 @@
+
+@import '../../../styles/variables.scss';
+.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);
+    border-color: var(--xt-border-color);
+    color: var(--xt-text-color-regular);
+    font-size: var(--xt-font-size-base, 14px);
+    border-radius: var(--xt-border-radius-small, 4px);
+    height: var(--xt-input-height);
+    line-height: var(--xt-input-height);
+    padding: 0 30px;
+}
+  .xt-date-dimension {
+    margin-bottom: 8px;
+  }
+  
+  .xt-date-picker-wrapper {
+    display: inline-block;
+  }
+  
+
+
+
+  .quarter-panel {
+    padding: 10px;
+  
+    .quarter-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+  
+    .quarter-list {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 8px;
+    }
+  
+    .quarter-item {
+      text-align: center;
+      padding: 8px 0;
+      border: 1px solid #e4e7ed;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  
+    .quarter-item.active {
+      background: #409eff;
+      color: #fff;
+      border-color: #409eff;
+    }
+  
+    ::v-deep .base-date-popper {
+      border-radius: 4px;
+    }
+  }