xt-element-ui 1.1.0 → 1.1.2

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

@@ -1,23 +1,50 @@
-<template>
-  <!-- 根据 tag 属性选择渲染的标签 -->
-  <component 
-    :is="tag" 
-    :style="mergedStyle" 
-    :class="computedClass"
-    v-bind="customAttrs"
-  >
-    <slot></slot>
-  </component>
-</template>
-
 <script>
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,
+  render(h) {
+    // Vue 2 不支持 Fragment，当 tag="template" 时需要特殊处理
+    // 如果设置了 proxyElement，则不渲染包裹元素，只渲染 slot 内容
+    if (this.tag === 'template' || this.proxyElement) {
+      // 渲染 slot 内容，如果只有一个元素则直接返回，否则包裹一个 div
+      const slotContent = this.$slots.default
+
+      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
+        }
+      }, slotContent)
+    }
+
+    // 正常渲染包裹元素
+    return h(this.tag, {
+      style: this.mergedStyle,
+      class: this.computedClass,
+      attrs: {
+        ...this.customAttrs,
+        'data-theme': this.theme
+      }
+    }, this.$slots.default)
+  },
   props: {
     theme: {
       type: String,
-      default: 'white'
+      default: 'light',
+      validator: (value) => {
+        return ['light', 'dark', 'auto'].includes(value)
+      }
     },
     size: {
       type: String,
@@ -25,7 +52,7 @@ export default {
     },
     primaryColor: {
       type: String,
-      default: '#409EFF'
+      default: '#1890ff'
     },
     vars: {
       type: Object,
@@ -45,6 +72,11 @@ export default {
     injectColor: {
       type: Boolean,
       default: false
+    },
+    proxyElement: {
+      type: [HTMLElement, String, Object],
+      default: null,
+      description: '代理元素，将样式应用到该元素上。支持 HTMLElement、CSS选择器字符串或 ref 对象'
     }
   },
   computed: {
@@ -54,11 +86,14 @@ 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)
       }
       
       const sizeMap = {
@@ -71,37 +106,19 @@ export default {
       }
       
       if (this.theme === 'dark') {
-        result['--xt-color-text-primary'] = 'rgba(255, 255, 255, 0.95)'
-        result['--xt-color-text-regular'] = 'rgba(255, 255, 255, 0.8)'
-        result['--xt-color-text-secondary'] = 'rgba(255, 255, 255, 0.6)'
-        result['--xt-color-bg-primary'] = '#1f1f1f'
-        result['--xt-color-bg-secondary'] = '#2d2d2d'
-        result['--xt-color-bg-container'] = '#1f1f1f'
-        result['--xt-color-border'] = '#434343'
-        result['--xt-color-border-light'] = '#3d3d3d'
-        
         if (this.injectBackground) {
-          result.backgroundColor = result['--xt-color-bg-primary']
+          result.backgroundColor = result['--xt-color-bg-primary'] || '#141414'
         }
         if (this.injectColor) {
-          result.color = result['--xt-color-text-primary']
+          result.color = result['--xt-color-text-primary'] || '#E5EAF3'
         }
       } else {
-        // 恢复默认主题颜色（white 主题）
-        result['--xt-color-text-primary'] = '#303133'
-        result['--xt-color-text-regular'] = '#606266'
-        result['--xt-color-text-secondary'] = '#909399'
-        result['--xt-color-bg-primary'] = '#ffffff'
-        result['--xt-color-bg-secondary'] = '#f5f7fa'
-        result['--xt-color-bg-container'] = '#f5f7fa'
-        result['--xt-color-border'] = '#DCDFE6'
-        result['--xt-color-border-light'] = '#E4E7ED'
-        
+        // 恢复默认主题颜色（light 主题）
         if (this.injectBackground) {
-          result.backgroundColor = result['--xt-color-bg-primary']
+          result.backgroundColor = result['--xt-color-bg-primary'] || '#ffffff'
         }
         if (this.injectColor) {
-          result.color = result['--xt-color-text-primary']
+          result.color = result['--xt-color-text-primary'] || '#2c3e50'
         }
       }
       
@@ -112,30 +129,35 @@ export default {
       
       if (this.tag !== 'template') {
         classes.push('xt-config-provider')
-        
-        if (this.theme === 'dark') {
-          classes.push('xt-config-provider--dark')
-        }
       }
       
       return classes
     },
     customAttrs() {
-      const props = ['theme', 'size', 'primaryColor', 'vars', 'tag', 'injectBackground', 'injectColor']
+      const props = ['theme', 'size', 'primaryColor', 'vars', 'tag', 'injectBackground', 'injectColor', 'proxyElement']
       const attrs = {}
-      
+
       for (const key in this.$attrs) {
         if (!props.includes(key)) {
           attrs[key] = this.$attrs[key]
         }
       }
-      
+
       return attrs
     }
   },
+  mounted() {
+    this.applyProxyElementStyle()
+  },
+  updated() {
+    this.applyProxyElementStyle()
+  },
+  beforeUnmount() {
+    this.clearProxyElementStyle()
+  },
   methods: {
     normalizeColor(color) {
-      if (!color) return '#409EFF'
+      if (!color) return '#1890ff'
       
       if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
         return color
@@ -158,7 +180,7 @@ export default {
       }
       
       console.warn('[XtConfigProvider] 无法识别的颜色格式:', color)
-      return '#409EFF'
+      return '#1890ff'
     },
     
     hexToRgb(hex) {
@@ -181,13 +203,90 @@ export default {
       const rgb = this.hexToRgb(hex)
       if (!rgb) return hex
       
-      const amount = Math.round(2.55 * percent)
-      const r = Math.min(255, rgb.r + amount)
-      const g = Math.min(255, rgb.g + amount)
-      const b = Math.min(255, rgb.b + amount)
+      // 使用与 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)
+      const b = Math.round(rgb.b * (1 - ratio) + 255 * ratio)
       
       return this.rgbToHex(r, g, b)
+    },
+    
+    darkenColor(hex, percent) {
+      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)))
+      const b = Math.max(0, Math.round(rgb.b * (1 - ratio)))
+
+      return this.rgbToHex(r, g, b)
+    },
+    
+    getProxyElement() {
+      const { proxyElement } = this
+      
+      if (!proxyElement) return null
+      
+      if (proxyElement instanceof HTMLElement) {
+        return proxyElement
+      }
+      
+      if (typeof proxyElement === 'string') {
+        return document.querySelector(proxyElement)
+      }
+      
+      if (proxyElement.$el) {
+        return proxyElement.$el
+      }
+      
+      if (proxyElement.value && proxyElement.value instanceof HTMLElement) {
+        return proxyElement.value
+      }
+      
+      console.warn('[XtConfigProvider] 无法解析 proxyElement:', proxyElement)
+      return null
+    },
+    
+    applyProxyElementStyle() {
+      const element = this.getProxyElement()
+      if (!element) return
+      
+      const style = this.mergedStyle
+      
+      for (const key in style) {
+        element.style.setProperty(key, style[key])
+      }
+      
+      // 设置 data-theme 属性
+      element.setAttribute('data-theme', this.theme)
+    },
+    
+    clearProxyElementStyle() {
+      const element = this.getProxyElement()
+      if (!element) return
+      
+      const style = this.mergedStyle
+
+      for (const key in style) {
+        element.style.removeProperty(key)
+      }
+
+      // 移除 data-theme 属性
+      element.removeAttribute('data-theme')
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+/* 包裹容器样式 - 最小化影响布局 */
+.xt-config-provider-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/config-provider/style/index.scss

@@ -6,7 +6,7 @@
 .xt-config-provider--dark {
 }
 
-.xt-config-provider--dark.xt-config-provider--with-bg {
-  background-color: var(--xt-color-bg-primary, #1f1f1f);
+.xt-config-provider--dark {
+  background-color: var(--xt-color-bg-primary, #0b141d);
   color: var(--xt-color-text-primary, rgba(255, 255, 255, 0.95));
 }

package/src/components/date-picker/SearchDate.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-form-item label="日期类型">
+    <el-select v-model="params.SearchCondition" style="width:120px;">
+      <el-option label="建档日期" value="建档日期"></el-option>
+      <el-option label="更新日期" value="更新日期"></el-option>
+    </el-select>
+    <el-select v-model="params.SearchType" style="width:120px;">
+      <el-option v-for="item in searchList" :key="item.value" :label="item.name" :value="item.value"></el-option>
+    </el-select>
+    <el-date-picker v-model="params.SearchValue" :style="'width:'+txtInputWidth+'px;'" value-format="yyyy-MM-dd" placeholder=""></el-date-picker>
+  </el-form-item>
+</template>
+<script>
+export default {
+  name: "SearchDate",
+  props: {
+    searchList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    params: {
+      type: Object,
+      default() {
+        return {
+          SearchType: "",
+          SearchCondition: "建档日期",
+          SearchValue: ""
+        };
+      }
+    },
+    /** 查询文本输入框宽度 */
+    txtInputWidth: {
+      type: Number,
+      default: 130
+    }
+  },
+  created() {
+    if (this.searchList.length > 0 && !this.params.SearchType) {
+      this.params.SearchType = this.searchList[0].value;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,2 @@
+import XtDatePicker from './index.vue'
+export default XtDatePicker

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

@@ -0,0 +1,131 @@
+<template>
+  <div style="display:inline-block">
+    <FlexBox v-if="dateType=='quarter'" type="inline-flex" class="xt-date-picker" :class="{focus: isfocus}" :style="width?{width: `${width}px`}:{}">
+      <Quarter v-model="timeStart" :format="format" placeholder="开始时间" quarter-type="quarter-start" clearable></Quarter>
+      <span class="separator">{{ separator }}</span>
+      <Quarter v-model="timeEnd" :format="format" placeholder="结束时间" quarter-type="quarter-end" clearable></Quarter>
+    </FlexBox>
+    <FlexBox v-else type="inline-flex" class="xt-date" :class="{focus: isfocus}" :style="width?{width: `${width}px`}:{}">
+      <el-date-picker ref="timeStart" key="startSelect" v-model="timeStart" size="small" :disabled="disabled" append-to-body :picker-options="startTimeRange" :format="format" :type="dateType" placeholder="开始时间" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
+      <span class="separator">{{ separator }}</span>
+      <el-date-picker ref="timeEnd" key="endSelect" v-model="timeEnd" size="small" :disabled="disabled" append-to-body :picker-options="endTimeRange" :format="format" :type="dateType" placeholder="结束时间" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
+    </FlexBox>
+  </div>
+</template>
+<script>
+const typeFormatEnum = {
+  datetime: "yyyy-MM-dd HH:mm", month: "yyyy-MM", year: "yyyy", date: "yyyy-MM-dd", quarter: "yyyy-Qq", week: "yyyy-WW"
+};
+
+import FlexBox from '../flex-box/index.vue'
+import Quarter from "./quarter.vue";
+export default {
+  name: "XtDatePicker",
+  components: {
+    FlexBox,
+    Quarter
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {},
+    dateType: {
+      type: String,
+      default: "date"
+    },
+    separator: {
+      type: String,
+      default: "至"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    immediate: { // 是否直接初始化 参数
+      type: Boolean,
+      default: true
+    },
+    placeholder: {},
+    width: {
+      type: Number,
+      default: 280
+    }
+  },
+  data() {
+    return {
+      isfocus: false
+    };
+  },
+  computed: {
+    format() {
+      return typeFormatEnum[this.dateType] || "yyyy-MM-dd";
+    },
+    timeStart: {
+      get() {
+        return this.value && this.value[0];
+      },
+      set(v) {
+        this.$emit("update:value", [v, this.timeEnd]);
+        this.$emit("change", [v, this.timeEnd]);
+      }
+    },
+    timeEnd: {
+      get() {
+        return this.value && this.value[1];
+      },
+      set(v) {
+        this.$emit("update:value", [this.timeStart, v]);
+        this.$emit("change", [this.timeStart, v]);
+      }
+    },
+    startTimeRange() {
+      if (!this.timeEnd) return {};
+      const endTime = this.timeEnd.getTime();
+      return {
+        disabledDate: (time) => {
+          return time.getTime() > (endTime);
+        }
+      };
+    },
+    endTimeRange() {
+      if (!this.timeStart) return {};
+      const startTime = this.timeStart.getTime();
+      return {
+        disabledDate: (time) => {
+          return time.getTime() < (startTime);
+        }
+      };
+    }
+  },
+  methods: {
+  }
+};
+</script>
+<style lang="scss" scoped>
+.xt-date-picker{
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  
+  &.focus{
+    border-color: #1890FF;
+  }
+  
+  ::v-deep .el-picker-panel{
+    position: absolute;
+    z-index: 401;
+  }
+  
+  ::v-deep .el-input__inner{
+    border: none;
+    padding: 0;
+    text-align: center;
+  }
+  
+  ::v-deep .el-input__prefix{
+    display: none;
+  }
+}
+</style>

package/src/components/date-picker/quarter.vue

@@ -0,0 +1,152 @@
+<template>
+  <el-popover v-model="popoverVisible" trigger="click" :disabled="disabled" transition="el-zoom-in-top" :placement="placement" :width="popoverWidth" @hide="handleBlur">
+    <div class="quarter-wrapper">
+      <BaseFlexBox content="between">
+        <i class="el-icon-d-arrow-left" @click="prev"></i>
+        <span>{{ selectYear }}</span>
+        <i class="el-icon-d-arrow-right" @click="after"></i>
+      </BaseFlexBox>
+      <BaseFlexBox content="between" style="margin-top: 10px">
+        <el-button v-for="item in quarterList" :key="item.value" :disabled="getDisable(item)" :type="currentyear==selectYear&&item.value == currentQuarter ?'primary':''" size="mini" round @click="setCurrent(item)">{{ item.label }}</el-button>
+      </BaseFlexBox>
+    </div>
+    <el-input slot="reference" ref="reference" size="small" :value="quarterLabel" readonly :title="value" :placeholder="placeholder" prefix-icon="el-icon-date" clearable />
+  </el-popover>
+</template>
+
+<script>
+import BaseFlexBox from "../flex-box/index.vue";
+import dateFns from "date-fns";
+export default {
+  name: "DateQuarter",
+  components: {
+    BaseFlexBox
+  },
+  model: {
+    props: "value",
+    event: "change"
+  },
+  props: {
+    value: {},
+    quarterType: { // value绑定值类型 1.quarter为时返回当前时间 2.quarter-start时返回季的开始时间 3. quarter-end时返回季的结束时间
+      type: String,
+      default: "quarter"
+    },
+    placement: {
+      type: String,
+      default: "bottom-start"
+    },
+    // valueFormat: {
+    //   type: String,
+    //   default: "yyyy-Qq"
+    // },
+    format: { // 同时支持字符串 "yyyy-Qq" 使用小写q进行格式化数据
+      type: String,
+      default: "yy-Qq"
+    },
+    popoverWidth: Number,
+    placeholder: {},
+    pickerOptions: {
+      type: Object,
+      default: () => {
+        return {
+          disabledDate: () => {
+            return false;
+          }
+        };
+      }
+    },
+    disabled: {}
+  },
+  data() {
+    const dateVal = this.getQuarterDate(this.value);
+    const currentyear = dateVal ? dateVal.getFullYear() : "";
+    const month = dateVal ? dateVal.getMonth() : "";
+    const selectYear = dateVal ? dateVal.getFullYear() : new Date().getFullYear();
+    return {
+      dateVal: dateVal,
+      currentyear: currentyear,
+      currentQuarter: dateFns.getQuarter(dateVal),
+      selectYear: selectYear,
+      currentMonth: month,
+      popoverVisible: false,
+      quarterList: [
+        { label: "Q1", value: 1 },
+        { label: "Q2", value: 2 },
+        { label: "Q3", value: 3 },
+        { label: "Q4", value: 4 }
+      ]
+    };
+  },
+  computed: {
+    diffQuarter() {
+      return (this.selectYear - this.currentyear) * 4 - this.currentQuarter;
+    },
+    quarterLabel: {
+      get() {
+        if (!this.currentyear || !this.currentQuarter) {
+          return "";
+        }
+        return this.getFormatVal();
+      }
+    }
+  },
+  methods: {
+    getQuarterDate(val) {
+      if (!val) return null;
+      if (this.quarterType == "quarter-start") {
+        return dateFns.startOfQuarter(val);
+      } else if (this.quarterType == "quarter-end") {
+        return dateFns.endOfQuarter(val);
+      } else {
+        const currentQuarter = dateFns.getQuarter(val);
+        return dateFns.setQuarter(this.value, currentQuarter);
+      }
+    },
+    getDisable(it) {
+    },
+    handleChangeVal(v) {
+    },
+    getFormatVal() {
+      if (!this.format) {
+        return `${this.currentyear}-Q${this.currentQuarter}`;
+      }
+      const formatMap = {
+        y: this.currentyear,
+        q: this.currentQuarter
+      };
+      const val = this.format.replace(/(y|q)+/g, (result, key) => {
+        const value = formatMap[key];
+        return value || "";
+      });
+      return val;
+    },
+    setCurrent(item) {
+      if (!this.dateVal) {
+        this.dateVal = new Date();
+      }
+      this.dateVal.setFullYear(this.selectYear);
+      this.dateVal = dateFns.setQuarter(this.dateVal, item.value);
+      this.$emit("change", this.dateVal);
+      this.currentQuarter = item.value;
+      this.currentyear = this.selectYear;
+      this.popoverVisible = false;
+    },
+    after() {
+      this.dateVal.setFullYear(this.dateVal.getFullYear() + 1);
+      this.selectYear = this.dateVal.getFullYear();
+    },
+    prev() {
+      this.dateVal.setFullYear(this.dateVal.getFullYear() - 1);
+      this.selectYear = this.dateVal.getFullYear();
+    },
+    handleBlur() {
+      this.$refs.reference.blur();
+    }
+  }
+};
+</script>
+
+<style>
+
+</style>

package/src/components/grid-box/index.js

@@ -0,0 +1,2 @@
+import XtGridBox from './index.vue'
+export default XtGridBox

package/src/components/grid-box/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="ex-grid-box" :style="styleAttrs">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "XtGridBox",
+  props: {
+    columns: {
+      type: [String, Array], // ["1fr","2fr", "20%"]
+      default: "1fr"
+    },
+    rows: { // 1
+      type: [String, Array], // ["1fr","2fr", "20%"]
+      default: "1fr"
+    },
+    gap: { type: String, default: "" }
+  },
+  computed: {
+    styleAttrs() {
+      const gridTemplateRows = (typeof this.rows !== "string") ? this.rows.join(" ") : this.rows;
+      const gridTemplateColumns = (typeof this.columns !== "string") ? this.columns.join(" ") : this.columns;
+      return this.gap ? {
+        gridTemplateColumns,
+        gridTemplateRows,
+        gap: this.gap.toString().split(" ").map(_getGap).join(" ")
+      } : {
+        gridTemplateColumns,
+        gridTemplateRows
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.ex-grid-box{
+    display: grid;
+}
+</style>